From 722a84e46dc151f97bf12d445f2bc13fa178f583 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Thu, 18 Jan 2024 17:29:05 -0500 Subject: [PATCH] chore(radio-button): update radio-button stories to sb v7 (#11361) Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 2 + .../radio-button/radio-button-story.ts | 156 ------------- ...adio-button-story.mdx => radio-button.mdx} | 13 +- .../radio-button/radio-button.stories.ts | 207 ++++++++++++++++++ 4 files changed, 217 insertions(+), 161 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/radio-button/radio-button-story.ts rename packages/carbon-web-components/src/components/radio-button/{radio-button-story.mdx => radio-button.mdx} (84%) create mode 100644 packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 9d2ed507ca0..a67d1807853 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -76,6 +76,8 @@ const stories = glob.sync( '../src/**/progress-bar.stories.ts', '../src/**/progress-indicator.mdx', '../src/**/progress-indicator.stories.ts', + '../src/**/radio-button.mdx', + '../src/**/radio-button.stories.ts', '../src/**/search.mdx', '../src/**/search.stories.ts', '../src/**/select.mdx', diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts b/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts deleted file mode 100644 index 84849d85335..00000000000 --- a/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts +++ /dev/null @@ -1,156 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { prefix } from '../../globals/settings'; -import { RADIO_BUTTON_ORIENTATION } from './radio-button-group'; -import { RADIO_BUTTON_LABEL_POSITION } from './radio-button'; -import './index'; -import storyDocs from './radio-button-story.mdx'; - -const orientations = { - [`Horizontal (${RADIO_BUTTON_ORIENTATION.HORIZONTAL})`]: - RADIO_BUTTON_ORIENTATION.HORIZONTAL, - [`Vertical (${RADIO_BUTTON_ORIENTATION.VERTICAL})`]: - RADIO_BUTTON_ORIENTATION.VERTICAL, -}; - -const labelPositions = { - [`Left (${RADIO_BUTTON_LABEL_POSITION.LEFT})`]: - RADIO_BUTTON_LABEL_POSITION.LEFT, - [`Right (${RADIO_BUTTON_LABEL_POSITION.RIGHT})`]: - RADIO_BUTTON_LABEL_POSITION.RIGHT, -}; - -export const Default = () => { - return html` - - - - - - `; -}; - -export const skeleton = () => - html``; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const Playground = (args) => { - const { - disabled, - readOnly, - helperText, - invalid, - invalidText, - labelPosition, - orientation, - name, - value, - warn, - warnText, - onChange, - } = args?.[`${prefix}-radio-button-group`] ?? {}; - const { checked, hideLabel, labelText } = - args?.[`${prefix}-radio-button`] ?? {}; - return html` - - - - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-radio-button-group`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - readOnly: boolean('read only (readOnly)', false), - helperText: textNullable('Helper text (helper-text)', 'Helper text'), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Invalid selection' - ), - labelPosition: select( - 'Label position (label-position)', - labelPositions, - RADIO_BUTTON_LABEL_POSITION.RIGHT - ), - orientation: select( - 'Orientation (orientation)', - orientations, - RADIO_BUTTON_ORIENTATION.HORIZONTAL - ), - name: textNullable('Name (name)', 'radio-group'), - value: textNullable('Value (value)', ''), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Please notice the warning' - ), - onChange: action(`${prefix}-radio-button-group-changed`), - }), - [`${prefix}-radio-button`]: () => ({ - checked: boolean('Checked (checked)', false), - hideLabel: boolean('Hide label (hide-label)', false), - labelText: textNullable('Label text (label-text)', 'Radio button label'), - }), - }, -}; - -export default { - title: 'Components/Radio button', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx b/packages/carbon-web-components/src/components/radio-button/radio-button.mdx similarity index 84% rename from packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx rename to packages/carbon-web-components/src/components/radio-button/radio-button.mdx index 103c4fa129b..ef0e1ae1512 100644 --- a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx +++ b/packages/carbon-web-components/src/components/radio-button/radio-button.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as RadioButtonStories from './radio-button.stories'; + + # Radio button @@ -22,8 +25,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/radio-button/index.js'; ``` - - +{`${cdnJs({ components: ['radio-button'] })}`} +{`${cdnCss()}`} ### HTML @@ -56,7 +59,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + ## `` attributes, properties and events @@ -64,4 +67,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts b/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts new file mode 100644 index 00000000000..05f7c9b55ed --- /dev/null +++ b/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts @@ -0,0 +1,207 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; +import { RADIO_BUTTON_ORIENTATION } from './radio-button-group'; +import { RADIO_BUTTON_LABEL_POSITION } from './radio-button'; +import './index'; +import storyDocs from './radio-button.mdx'; + +const orientations = { + [`Horizontal (${RADIO_BUTTON_ORIENTATION.HORIZONTAL})`]: + RADIO_BUTTON_ORIENTATION.HORIZONTAL, + [`Vertical (${RADIO_BUTTON_ORIENTATION.VERTICAL})`]: + RADIO_BUTTON_ORIENTATION.VERTICAL, +}; + +const labelPositions = { + [`Left (${RADIO_BUTTON_LABEL_POSITION.LEFT})`]: + RADIO_BUTTON_LABEL_POSITION.LEFT, + [`Right (${RADIO_BUTTON_LABEL_POSITION.RIGHT})`]: + RADIO_BUTTON_LABEL_POSITION.RIGHT, +}; + +const args = { + disabled: false, + readOnly: false, + helperText: 'Helper text', + invalid: false, + invalidText: 'Invalid selection', + labelPosition: RADIO_BUTTON_LABEL_POSITION.RIGHT, + orientation: RADIO_BUTTON_ORIENTATION.HORIZONTAL, + name: 'radio-group', + value: '', + warn: false, + warnText: 'Please notice the warning', + checked: false, + hideLabel: false, + labelText: 'Radio button label', +}; + +const argTypes = { + disabled: { + control: 'boolean', + description: 'Disabled (disabled)', + }, + readOnly: { + control: 'boolean', + description: 'read only (readOnly)', + }, + helperText: { + control: 'text', + description: 'Helper text (helper-text)', + }, + invalid: { + control: 'boolean', + description: 'Invalid (invalid)', + }, + invalidText: { + control: 'text', + description: 'Invalid text (invalid-text)', + }, + labelPosition: { + control: 'select', + description: 'Label position (label-position)', + options: labelPositions, + }, + orientation: { + control: 'select', + description: 'Orientation (orientation)', + options: orientations, + }, + name: { + control: 'text', + description: 'Name (name)', + }, + value: { + control: 'text', + description: 'Value (value)', + }, + warn: { + control: 'boolean', + description: 'Warn (warn)', + }, + warnText: { + control: 'text', + description: 'Warn text (warn-text)', + }, + checked: { + control: 'boolean', + description: 'Checked (checked)', + }, + hideLabel: { + control: 'boolean', + description: 'Hide label (hide-label)', + }, + labelText: { + control: 'text', + description: 'Label text (label-text)', + }, + onChange: { + action: `${prefix}-radio-button-group-changed`, + }, +}; + +export const Default = { + render: () => { + return html` + + + + + + `; + }, +}; + +export const Skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html``, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { + disabled, + readOnly, + helperText, + invalid, + invalidText, + labelPosition, + orientation, + name, + value, + warn, + warnText, + onChange, + checked, + hideLabel, + labelText, + } = args ?? {}; + return html` + + + + + + `; + }, +}; + +const meta = { + title: 'Components/Radio Button', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta;