feat(layer/dropdown/combo-box): update stories to Storybook v7 (carbo…

…n-design-system#11318) * feat(layer): updated to v7 * feat(dropdown): update story * feat(combo-box): update to v7 * fix(stories): addressed feedback * fix(markdown): replaced description --------- Co-authored-by: kennylam <[email protected]>
kennylam · Jan 10, 2024 · d7c2e71 · d7c2e71
1 parent 93ce902
commit d7c2e71
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 180 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -20,6 +20,10 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/combo-box.stories.ts',
+    '../src/**/combo-box.mdx',
+    '../src/**/dropdown.stories.ts',
+    '../src/**/dropdown.mdx',
     '../src/**/data-table-*.stories.ts',
     '../src/**/data-table.mdx',
     '../src/**/ordered-list.stories.ts',
@@ -35,6 +39,8 @@ const stories = glob.sync(
     '../src/**/button.stories.ts',
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
+    '../src/**/layer.stories.ts',
+    '../src/**/layer.mdx',
     '../src/**/file-uploader.mdx',
     '../src/**/modal.stories.ts',
     '../src/**/modal.mdx',

diff --git a/packages/carbon-web-components/.storybook/preview.js b/packages/carbon-web-components/.storybook/preview.js
@@ -4,6 +4,7 @@ import container from './container';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import { breakpoints } from '@carbon/layout';
 import theme from './theme';
+import './templates/with-layer';
 
 setCustomElementsManifest(customElements);
 

diff --git a/.../components/combo-box/combo-box-story.mdx → ...ts/src/components/combo-box/combo-box.mdx b/.../components/combo-box/combo-box-story.mdx → ...ts/src/components/combo-box/combo-box.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ComboBoxStories from './combo-box.stories';
+
+<Meta of={ComboBoxStories} /> 
 
 # Combo box
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/combo-box/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['combo-box'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['combo-box'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -94,12 +97,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box open>`) and `false` means not setting the attribute (e.g.
 `<cds-combo-box>` without `open` attribute).
 
-<Props of="cds-combo-box" />
+<ArgsTable of="cds-combo-box" />
 
 ## `<cds-combo-box-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-combo-box-item>` without `disabled` attribute).
 
-<Props of="cds-combo-box-item" />
+<ArgsTable of="cds-combo-box-item" />
diff --git a/...c/components/combo-box/combo-box-story.ts → ...components/combo-box/combo-box.stories.ts b/...c/components/combo-box/combo-box-story.ts → ...components/combo-box/combo-box.stories.ts
@@ -9,12 +9,9 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean, select } from '@storybook/addon-knobs';
 import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box';
 import './combo-box-item';
-import storyDocs from './combo-box-story.mdx';
-import { prefix } from '../../globals/settings';
-import textNullable from '../../../.storybook/knob-text-nullable';
+import storyDocs from './combo-box.mdx';
 
 const items = [
   {
@@ -55,8 +52,79 @@ const sizes = {
   [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
 };
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  direction: DROPDOWN_DIRECTION.BOTTOM,
+  disabled: false,
+  hideLabel: false,
+  helperText: 'This is some helper text',
+  invalid: false,
+  invalidText: 'invalid selection',
+  label: 'This is an example label',
+  readOnly: false,
+  size: null,
+  titleText: 'This is an example title',
+  value: '',
+  warn: false,
+  warnText: 'please notice the warning',  
+}
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be disabled, or not.`,
+  },
+  direction: {
+    control: 'select', options: directionOptions,
+    description: `Dropdown direction`
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: `Specify if the title text should be hidden, or not.`,
+  },
+  helperText: {
+    control: 'text',
+    description: `The helper text for the dropdown.`,
+  },
+  invalid: {
+    control: 'boolean',
+    description: `Specify if the dropdown should display an invalid icon, or not.`,
+  },
+  invalidText: {
+    control: 'text',
+    description: `Message which is displayed if the value is invalid.`,
+  },
+  label: {
+    control: 'text',
+    description: `The default content of the trigger button.`,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be read only, or not.`,
+  },
+  size: {
+    control: 'select', options: sizes,
+    description: `Dropdown size.`
+  },
+  titleText: {
+    control: 'text',
+    description: `Text that will be read by a screen reader when visiting this control.`,
+  },
+  value: {
+    control: 'text',
+    description: `The value of the selected item.`,
+  },
+  warn: {
+    control: 'boolean',
+    description: `Specify whether the control is currently in warning state.`,
+  },
+  warnText: {
+    control: 'text',
+    description: `Text that is displayed when the control is in warning state.`,
+  },
+};
+
+export const Default = {
+  render: () => html`
     <cds-combo-box
       helper-text="Combobox helper text"
       title-text="ComboBox title">
@@ -68,11 +136,11 @@ export const Default = () => {
         `
       )}
     </cds-combo-box>
-  `;
+  `
 };
 
-export const WithLayer = () => {
-  return html`
+export const WithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:300px">
         <cds-combo-box
@@ -91,11 +159,13 @@ export const WithLayer = () => {
         </cds-combo-box>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const Playground = (args) => {
-  const {
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({
     disabled,
     helperText,
     invalid,
@@ -110,8 +180,7 @@ export const Playground = (args) => {
     type,
     invalidText,
     value,
-  } = args?.[`${prefix}-combo-box`] ?? {};
-  return html`
+  }) => html`
     <cds-combo-box
       ?disabled="${disabled}"
       ?hide-label=${hideLabel}
@@ -135,51 +204,22 @@ export const Playground = (args) => {
         `
       )}
     </cds-combo-box>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-combo-box`]: () => ({
-      direction: select(
-        'Direction',
-        directionOptions,
-        DROPDOWN_DIRECTION.BOTTOM
-      ),
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'Optional helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable(
-        'Invalid text (invalid-text)',
-        'invalid selection'
-      ),
-      readOnly: boolean('Read only (read-only)', false),
-      titleText: textNullable('Title text (title-text)', 'ComboBox title'),
-      size: select('Size (size)', sizes, null),
-      value: textNullable('Selected value (value)', ''),
-      label: textNullable('Placeholder (label)', ''),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable(
-        'Warn text (warn-text)',
-        'please notice the warning'
-      ),
-    }),
-  },
-};
+  `
+}
 
-export default {
+const meta = {
   title: 'Components/Combo box',
-  parameters: {
-    ...storyDocs.parameters,
-  },
   decorators: [
     (story, { name }) => {
       const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
 };
+
+export default meta;
diff --git a/...rc/components/dropdown/dropdown-story.mdx → ...ents/src/components/dropdown/dropdown.mdx b/...rc/components/dropdown/dropdown-story.mdx → ...ents/src/components/dropdown/dropdown.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as DropdownStories from './dropdown.stories';
+
+<Meta of={DropdownStories} /> 
 
 # Dropdown
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/dropdown/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['dropdown'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['dropdown'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -75,12 +78,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown open>`) and `false` means not setting the attribute (e.g.
 `<cds-dropdown>` without `open` attribute).
 
-<Props of="cds-dropdown" />
+<ArgsTable of="cds-dropdown" />
 
 ## `<cds-dropdown-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-dropdown-item>` without `disabled` attribute).
 
-<Props of="cds-dropdown-item" />
+<ArgsTable of="cds-dropdown-item" />