From c5e937061debea344f21de61c27e11677703bf09 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:27:24 +0100 Subject: [PATCH] feat(storybook): adds Icon Button Story --- .../buttons/icon-button/index.stories.ts | 295 +++++++++++++++++- 1 file changed, 281 insertions(+), 14 deletions(-) diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts index ab8372ee3..4b7353bd8 100644 --- a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts +++ b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts @@ -1,50 +1,317 @@ /* eslint-disable no-console */ +import { html } from 'lit'; import { BlrIconButtonType, BlrIconButtonRenderFunction } from './index'; import { PureIconKeys } from '@boiler/icons'; import { ActionVariants, Sizes } from '../../../../globals/constants'; import { Themes } from '../../../../foundation/_tokens-generated/index.themes'; +// Shared Style inside the Stories +const sharedStyles = html` + +`; +//Main Showcase Storybook IconButton, main argType Table export default { - title: 'Design System/Web Components/Actions/Buttons/IconButton', + title: 'Design System/Web Components/Actions/Buttons/Icon Button', argTypes: { - icon: { - options: [undefined, ...PureIconKeys], + //Appearance + variant: { + name: 'variant', + description: 'Select variant of the component.', + options: ActionVariants, control: { type: 'select' }, + table: { + category: 'Appearance', + }, }, size: { + name: 'sizeVariant', + description: 'Choose size of the component.', options: Sizes, control: { type: 'select' }, - }, - variant: { - options: ActionVariants, - control: { type: 'select' }, + table: { + category: 'Appearance', + }, }, theme: { options: Themes, control: { type: 'select' }, + table: { + category: 'Appearance', + }, + }, + // Content / Settings + icon: { + name: 'icon', + description: 'Select the icon of the component.', + options: [undefined, ...PureIconKeys], + control: { type: 'select' }, + table: { + category: 'Content / Settings', + }, + }, + //States + disabled: { + name: 'disabled', + description: + 'Choose if component is disabled. Prevents the user to select or change the value of this component.', + defaultValue: false, + table: { + category: 'States', + }, + }, + loading: { + name: 'loading', + description: 'Choose if the component is loading.', + defaultValue: false, + table: { + category: 'States', + }, + }, + //Accessibility + arialabel: { + name: 'ariaLabel', + description: + 'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.', + table: { + category: 'Accessibility', + }, + }, + //Technical attributes + buttonId: { + name: 'buttonId', + description: 'Unique identifier for this component.', + table: { + category: 'Technical Attributes', + }, + }, + href: { + name: 'href', + description: "Enter the link's destination with the href attribute.", + table: { + category: 'Technical Attributes', + }, + }, + target: { + name: 'target', + description: 'Choose where to open the linked document with the target attribute.', + table: { + category: 'Technical Attributes', + }, + }, + // Events + onChange: { + name: 'onChange', + description: 'Fires when the value changes.', + action: 'onChange', + table: { + category: 'Events', + }, + }, + onFocus: { + name: 'onFocus', + description: 'Fires when the component is focused.', + action: 'onFocus', + table: { + category: 'Events', + }, + }, + onBlur: { + name: 'onBlur', + description: 'Fires when the component lost focus.', + action: 'onBlur', + table: { + category: 'Events', + }, }, }, parameters: { viewMode: 'docs', + docs: { + description: { + component: `
+

Text Button represents a clickable button that typically displays text rather than icons or symbols. The main feature of a Text Button is the text label, which communicates the button's action or function to the user. +

+ +
`, + }, + }, }, }; - export const BlrIconButton = (params: BlrIconButtonType) => BlrIconButtonRenderFunction(params); - -BlrIconButton.storyName = 'IconButton'; +BlrIconButton.storyName = 'Icon Button'; const args: BlrIconButtonType = { theme: 'Light', - variant: 'cta', + variant: 'primary', size: 'md', - arialabel: 'Button', + arialabel: 'Icon Button', onClick: () => console.log('onClick'), onBlur: () => console.log('onBlur'), icon: 'blr360', loading: false, disabled: false, - buttonId: 'button-id', + buttonId: 'iconButtonId', loadingStatus: 'Loading', }; - BlrIconButton.args = args; + +const defaultParams: BlrIconButtonType = { + theme: 'Light', + variant: 'primary', + size: 'md', + arialabel: 'Icon Button', + onClick: () => console.log('onClick'), + onBlur: () => console.log('onBlur'), + icon: 'blr360', + loading: false, + disabled: false, + buttonId: 'iconButtonId', + loadingStatus: 'Loading', +}; +//Appearance / Variant / SizeVariant +/** + * The Icon Button component comes in 6 variants: cta, primary, secondary, silent, destructive and encourage. + */ +export const Variant = () => { + return html` + ${sharedStyles} +
+
+ ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'primary', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'secondary', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'cta', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'silent', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'destructive', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + variant: 'encourage', + })} +
+
+ `; +}; +Variant.storyName = 'Variant'; +/** + * The Icon Button component comes in 5 sizes: XS, SM, MD, LG and XL. + */ +export const SizeVariant = () => { + return html` + ${sharedStyles} +
+
+ ${BlrIconButtonRenderFunction({ + ...defaultParams, + size: 'sm', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + size: 'md', + })} + ${BlrIconButtonRenderFunction({ + ...defaultParams, + size: 'lg', + })} +
+
+ `; +}; +// States Disabled +/** + * Disabled + * The Icon Button component in the disabled state can not be interacted with. This means it can not receive focus or be selected. + */ +export const Disabled = () => { + return html` + ${sharedStyles} +
+
+ ${BlrIconButtonRenderFunction({ + ...defaultParams, + disabled: true, + })} +
+
+ `; +}; + +//Dependencies Icon / Loader +/** + * The Icon Button component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon--docs) component. + */ +export const Icon = () => { + return html` + ${sharedStyles} +
+
+ ${BlrIconButtonRenderFunction({ + ...defaultParams, + icon: 'blr360', + })} +
+
+ `; +}; +/** + * The Icon Button uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](/docs/design-system-web-components-feedback-loader--docs) component. + */ +export const Loader = () => { + return html` + ${sharedStyles} +
+
+ ${BlrIconButtonRenderFunction({ + ...defaultParams, + loading: true, + })} +
+
+ `; +};