chore(radio-button): update radio-button stories to sb v7 (#11361)

Co-authored-by: kennylam <[email protected]>
carbon-design-system · Jan 18, 2024 · 722a84e · 722a84e
1 parent 7a3a48f
commit 722a84e
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 161 deletions.
diff --git 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
diff --git a/...nents/radio-button/radio-button-story.mdx → .../components/radio-button/radio-button.mdx b/...nents/radio-button/radio-button-story.mdx → .../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';
+
+<Meta of={RadioButtonStories} />
 
 # 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';
 ```
 
-<Description markdown={`${cdnJs({ components: ['radio-button'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['radio-button'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -56,12 +59,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-radio-button-group disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-radio-button-group>` without `disabled` attribute).
 
-<Props of="cds-radio-button-group" />
+<ArgsTable of="cds-radio-button-group" />
 
 ## `<cds-radio-button-group>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-radio-button-group disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-radio-button-group>` without `disabled` attribute).
 
-<Props of="cds-radio-button-group" />
+<ArgsTable of="cds-radio-button-group" />