From af424d740b4041972e818d272edf8f3b90f48fd9 Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Wed, 24 Jan 2024 09:44:49 -0800 Subject: [PATCH] feat(tile): update to storybook v7 (#11437) * feat(tile): update to storybook v7 * fix(tile): addressed comments * Update packages/carbon-web-components/src/components/tile/tile.stories.ts * Update packages/carbon-web-components/src/components/tile/tile.stories.ts --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 2 + .../tile/{tile-story.mdx => tile.mdx} | 14 +- .../tile/{tile-story.ts => tile.stories.ts} | 400 ++++++++++-------- .../tests/spec/tile_spec.ts | 2 +- 4 files changed, 223 insertions(+), 195 deletions(-) rename packages/carbon-web-components/src/components/tile/{tile-story.mdx => tile.mdx} (94%) rename packages/carbon-web-components/src/components/tile/{tile-story.ts => tile.stories.ts} (60%) diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index a67d1807853..2aa1cee370e 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -105,6 +105,8 @@ const stories = glob.sync( '../src/**/textarea.stories.ts', '../src/**/text-input.mdx', '../src/**/text-input.stories.ts', + '../src/**/tile.mdx', + '../src/**/tile.stories.ts', '../src/**/tooltip.mdx', '../src/**/tooltip.stories.ts', '../src/**/ui-shell.mdx', diff --git a/packages/carbon-web-components/src/components/tile/tile-story.mdx b/packages/carbon-web-components/src/components/tile/tile.mdx similarity index 94% rename from packages/carbon-web-components/src/components/tile/tile-story.mdx rename to packages/carbon-web-components/src/components/tile/tile.mdx index fa0fe0f15a2..219e27ee624 100644 --- a/packages/carbon-web-components/src/components/tile/tile-story.mdx +++ b/packages/carbon-web-components/src/components/tile/tile.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Tile @@ -30,8 +30,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/tile/index.js'; ``` - - +{`${cdnJs({ components: ['tile'] })}`} +{`${cdnCss()}`} ### HTML @@ -58,7 +58,7 @@ contain separate internal CTAs. ## `` attributes and properties - + ## Radio tile @@ -81,7 +81,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `selected` attribute). - + ## Selectable tile @@ -97,7 +97,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `selected` attribute). - + ## Multi Select @@ -163,4 +163,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `expanded` attribute). - + diff --git a/packages/carbon-web-components/src/components/tile/tile-story.ts b/packages/carbon-web-components/src/components/tile/tile.stories.ts similarity index 60% rename from packages/carbon-web-components/src/components/tile/tile-story.ts rename to packages/carbon-web-components/src/components/tile/tile.stories.ts index ed03958aebd..38d837ddcd9 100644 --- a/packages/carbon-web-components/src/components/tile/tile-story.ts +++ b/packages/carbon-web-components/src/components/tile/tile.stories.ts @@ -9,13 +9,9 @@ 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 { prefix } from '../../globals/settings'; -import textNullable from '../../../.storybook/knob-text-nullable'; import { TILE_COLOR_SCHEME } from './tile'; import './index'; -import storyDocs from './tile-story.mdx'; +import storyDocs from './tile.mdx'; import '../../../.storybook/templates/with-layer'; const colorSchemes = { @@ -23,187 +19,145 @@ const colorSchemes = { [`Light (${TILE_COLOR_SCHEME.LIGHT})`]: TILE_COLOR_SCHEME.LIGHT, }; -export const Default = (args) => { - const { colorScheme } = args?.[`${prefix}-tile`] ?? {}; - return html` - - Default tile - Link - - `; +const defaultArgs = { + checkmarkLabel: '', + colorScheme: null, + name: 'selectable-tile', + value: '', + onInput: 'input' }; -Default.storyName = 'Default'; +const colorSchemeControl = { + colorScheme: { + control: 'select', + description: 'Color scheme (color-scheme)', + options: colorSchemes + }, +} -export const DefaultWithLayer = (args) => { - const { colorScheme } = args?.[`${prefix}-tile`] ?? {}; - return html` - - - Default layer - Link - - - `; +const defaultHref = { + href: 'https://example.com' }; -export const clickable = (args) => { - const { download, href, hreflang, ping, rel, target, type } = - args?.[`${prefix}-clickable-tile`] ?? {}; - return html` - - Clickable tile - - `; +const hrefControl = { + href: { + control: 'text', + description: 'Href for clickable UI (href)' + } }; -clickable.parameters = { - knobs: { - [`${prefix}-clickable-tile`]: () => ({ - href: textNullable('Href for clickable UI (href)', 'https://example.com'), - }), +const radioControls = { + checkmarkLabel: { + control: 'text', + description: 'Label text for the checkmark icon (checkmark-label)' + }, + ...colorSchemeControl, + name: { + control: 'text', + description: 'Name (name)' + }, + value: { + control: 'text', + description: 'Value (value)' + }, + onInput: { + action: `input`, + table: { + disable: true, + }, }, }; -export const ClickableWithLayer = (args) => { - const { download, href, hreflang, ping, rel, target, type } = - args?.[`${prefix}-clickable-tile`] ?? {}; - return html` - - - Clickable tile - - - `; -}; +const multiSelectableControls = { + ...radioControls, + selected: { + control: 'boolean', + description: 'Selected (selected)' + } +} -export const Radio = (args) => { - const { checkmarkLabel, colorScheme, name, value, onInput } = - args?.[`${prefix}-radio-tile`] ?? {}; - return html` - - Radio tile group - - Option 1 - - - Option 2 - - - Option 3 - - - `; +const expandableArgs = { + colorScheme: null, + expanded: false, + disableChange: false, + onBeforeChange: 'cds-expandable-tile-beingchanged', + onChange: 'cds-expandable-tile-changed' }; -Radio.storyName = 'Radio'; - -Radio.parameters = { - knobs: { - [`${prefix}-radio-tile`]: () => ({ - checkmarkLabel: textNullable( - 'Label text for the checkmark icon (checkmark-label)', - '' - ), - colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), - name: textNullable('Name (name)', 'selectable-tile'), - value: textNullable('Value (value)', ''), - onInput: action('input'), - }), +const expandableControls = { + ...colorSchemeControl, + expanded: { + control: 'boolean', + description: 'Expanded (expanded)' + }, + disableChange: { + control: 'boolean', + description: 'Disable user-initiated change in expanded state (Call event.preventDefault() in cds-expandable-tile-beingchanged event)' + }, + onBeforeChange: { + action: 'cds-expandable-tile-beingchanged', + table: { + disable: true, + }, }, + onChange: { + action: 'cds-expandable-tile-changed', + table: { + disable: true, + }, + } }; -export const RadioWithLayer = () => { - return html` +export const clickable = { + args: defaultHref, + argTypes: hrefControl, + render: ({href}) => html` + + Clickable tile + + ` +}; + +export const ClickableWithLayer = { + args: defaultHref, + argTypes: hrefControl, + render: ({href}) => html` - - Radio tile group - Option 1 - Option 2 - + + Clickable tile + - `; + ` }; -export const multiSelectable = (args) => { - const { checkmarkLabel, colorScheme, name, selected, value, onInput } = - args?.[`${prefix}-selectable-tile`] ?? {}; - return html` - - - Option 1 - - - Option 2 - - - Option 3 - - - `; +export const Default = { + argTypes: colorSchemeControl, + render: ({ colorScheme }) => html` + + Default tile + Link + + ` }; -multiSelectable.storyName = 'Multi Select'; - -multiSelectable.parameters = { - knobs: { - [`${prefix}-selectable-tile`]: () => ({ - ...Radio.parameters.knobs[`${prefix}-radio-tile`](), - selected: boolean('Selected (selected)', false), - }), - }, +export const DefaultWithLayer = { + argTypes: colorSchemeControl, + render: ({ colorScheme }) => html` + + + Default layer + Link + + + ` }; -export const expandable = (args) => { - const { colorScheme, expanded, disableChange, onBeforeChange, onChange } = - args?.[`${prefix}-expandable-tile`] ?? {}; +export const expandable = { + args: expandableArgs, + argTypes: expandableControls, + render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange }) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -226,11 +180,13 @@ export const expandable = (args) => { `; +} }; -export const ExpandableWithInteractive = (args) => { - const { colorScheme, expanded, disableChange, onBeforeChange, onChange } = - args?.[`${prefix}-expandable-tile`] ?? {}; +export const ExpandableWithInteractive = { + args: expandableArgs, + argTypes: expandableControls, + render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange }) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -258,11 +214,11 @@ export const ExpandableWithInteractive = (args) => { `; +} }; -export const ExpandableWithLayer = (args) => { - const { colorScheme, expanded, disableChange, onBeforeChange, onChange } = - args?.[`${prefix}-expandable-tile`] ?? {}; +export const ExpandableWithLayer = { + render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange } ) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -288,34 +244,104 @@ export const ExpandableWithLayer = (args) => { `; +}}; + +export const MultiSelect = { + args: defaultArgs, + argTypes: multiSelectableControls, + render: ({ checkmarkLabel, colorScheme, name, selected, value, onInput }) => html` + + + Option 1 + + + Option 2 + + + Option 3 + + + ` }; -expandable.parameters = { - knobs: { - [`${prefix}-expandable-tile`]: () => ({ - colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), - expanded: boolean('Expanded (expanded)', false), - disableChange: boolean( - 'Disable user-initiated change in expanded state ' + - '(Call event.preventDefault() in cds-expandable-tile-beingchanged event)', - false - ), - onBeforeChange: action('cds-expandable-tile-beingchanged'), - onChange: action('cds-expandable-tile-changed'), - }), - }, +export const Radio = { + args: defaultArgs, + argTypes: radioControls, + render: ({ checkmarkLabel, colorScheme, name, value, onInput }) => html` + + Radio tile group + + Option 1 + + + Option 2 + + + Option 3 + + + ` }; -export const Selectable = () => { - return html` Default tile `; +export const RadioWithLayer = { + render: () => html` + + + Radio tile group + Option 1 + Option 2 + + + ` }; -Selectable.storyName = 'Selectable'; -export default { +export const Selectable = { + render: () => html` Default tile ` +}; + +const meta = { title: 'Components/Tile', decorators: [(story) => html`
${story()}
`], parameters: { - ...storyDocs.parameters, + actions: { argTypesRegex: '^on.*' }, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/packages/carbon-web-components/tests/spec/tile_spec.ts b/packages/carbon-web-components/tests/spec/tile_spec.ts index 54411a4c559..321ab5d0a38 100644 --- a/packages/carbon-web-components/tests/spec/tile_spec.ts +++ b/packages/carbon-web-components/tests/spec/tile_spec.ts @@ -17,7 +17,7 @@ import { clickable, expandable, multiSelectable, -} from '../../src/components/tile/tile-story'; +} from '../../src/components/tile/tile.stories'; const clickableTemplate = (props?) => clickable({