feat(date-picker): update story to Storybook v7 (#11276)

* chore(date-picker): rename for sb v7 * chore(date-picker): convert from knobs to controls * chore(date-picker): remove storyDocs parameter, causing local failures * chore(date-picker): add date picker descriptions from React storybook * chore(date-picker): include storybook layers components * chore(date-picker): add back actions in sb v7 format --------- Co-authored-by: Ignacio Becerra <[email protected]>
carbon-design-system · Jan 11, 2024 · 7901205 · 7901205
1 parent c4772f9
commit 7901205
Show file tree

Hide file tree

Showing 4 changed files with 360 additions and 286 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,8 @@ const stories = glob.sync(
     '../src/**/breadcrumb.stories.ts',
     '../src/**/combo-box.stories.ts',
     '../src/**/combo-box.mdx',
+    '../src/**/date-picker.mdx',
+    '../src/**/date-picker.stories.ts',
     '../src/**/content-switcher.mdx',
     '../src/**/content-switcher.stories.ts',
     '../src/**/dropdown.stories.ts',

diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts
diff --git a/...ponents/date-picker/date-picker-story.mdx → ...rc/components/date-picker/date-picker.mdx b/...ponents/date-picker/date-picker-story.mdx → ...rc/components/date-picker/date-picker.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as DatePickerStories from './date-picker.stories';
+
+<Meta of={DatePickerStories} />
 
 # Date picker
 
@@ -102,12 +105,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-date-picker open>`) and `false` means not setting the attribute (e.g.
 `<cds-date-picker>` without `open` attribute).
 
-<Props of="cds-date-picker" />
+<ArgsTable of="cds-date-picker" />
 
 ## `<cds-date-picker-input>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-date-picker-input light>`) and `false` means not setting the attribute
 (e.g. `<cds-date-picker-input>` without `light` attribute).
 
-<Props of="cds-date-picker-input" />
+<ArgsTable of="cds-date-picker-input" />