feat(storybook): updated 7 component stories to v7 (carbon-design-sys…

…tem#11344) * fix(loading): update story to v7 * fix(modal): update to v7 * fix(checkbox): update to v7 * fix(list): update to v7 * fix(inline-loading): updated to v7 * fix(data-table): update to v7 * chore(prettier): ran formatter * fix(list): remove double mdxs * fix(markdown): replaced description * Update packages/carbon-web-components/src/components/list/ordered-list.stories.ts * Update packages/carbon-web-components/src/components/list/ordered-list.stories.ts --------- Co-authored-by: kennylam <[email protected]>
kennylam · Jan 10, 2024 · 93ce902 · 93ce902
1 parent 316b114
commit 93ce902
Show file tree

Hide file tree

Showing 35 changed files with 1,695 additions and 1,262 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -20,11 +20,24 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/data-table-*.stories.ts',
+    '../src/**/data-table.mdx',
+    '../src/**/ordered-list.stories.ts',
+    '../src/**/unordered-list.stories.ts',
+    '../src/**/list.mdx',
+    '../src/**/checkbox.stories.ts',
+    '../src/**/inline-loading.mdx',
+    '../src/**/inline-loading.stories.ts',
+    '../src/**/checkbox.mdx',
+    '../src/**/loading.stories.ts',
+    '../src/**/loading.mdx',
     '../src/**/button.mdx',
     '../src/**/button.stories.ts',
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
     '../src/**/file-uploader.mdx',
+    '../src/**/modal.stories.ts',
+    '../src/**/modal.mdx',
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',

diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
diff --git a/...rc/components/checkbox/checkbox-story.mdx → ...ents/src/components/checkbox/checkbox.mdx b/...rc/components/checkbox/checkbox-story.mdx → ...ents/src/components/checkbox/checkbox.mdx
@@ -1,6 +1,10 @@
-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 CheckboxStories from './checkbox.stories';
+
+<Meta of={CheckboxStories} /> 
+
 # Check box
 
 > 💡 Check our
@@ -22,8 +26,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/checkbox/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['checkbox'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['checkbox'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -49,4 +53,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-checkbox checked>`) and `false` means not setting the attribute (e.g.
 `<cds-checkbox>` without `checked` attribute).
 
-<Props of="cds-checkbox" />
+<ArgsTable of="cds-checkbox" />
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts b/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts
@@ -0,0 +1,148 @@
+/**
+ * @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 { prefix } from '../../globals/settings';
+import storyDocs from './checkbox.mdx';
+import './index';
+
+const checkboxLabel = 'Checkbox label';
+
+const defaultArgs = {
+  disabled: false,
+  helperText: 'Helper text goes here',
+  invalid: false,
+  invalidText: 'Invalid message goes here',
+  legendText: 'Group label',
+  readonly: false,
+  warn: false,
+  warnText: 'Warn message goes here',
+};
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: 'Specify whether the checkbox should be disabled.',
+  },
+  helperText: {
+    control: 'textNullable',
+    description: 'Provide text for the form group for additional help.',
+  },
+  invalid: {
+    control: 'boolean',
+    description: 'Specify whether the form group is currently invalid.',
+  },
+  invalidText: {
+    control: 'textNullable',
+    description:
+      'Provide the text that is displayed when the form group is in an invalid state.',
+  },
+  legendText: {
+    control: 'textNullable',
+    description: 'Provide the text to be rendered inside of the fieldset.',
+  },
+  readonly: {
+    control: 'boolean',
+    description: 'Specify whether the checkbox group is read-only.',
+  },
+  warn: {
+    control: 'boolean',
+    description:
+      'Specify whether the form group is currently in warning state.',
+  },
+  warnText: {
+    control: 'textNullable',
+    description:
+      'Provide the text that is displayed when the form group is in warning state.',
+  },
+};
+
+export const Default = {
+  render: () => html`
+    <cds-checkbox-group legend-text="Group label">
+      <cds-checkbox>${checkboxLabel}</cds-checkbox>
+      <cds-checkbox>${checkboxLabel}</cds-checkbox>
+    </cds-checkbox-group>
+  `,
+};
+
+export const Skeleton = {
+  render: () => html`
+    <fieldset class="${prefix}--fieldset">
+      <cds-checkbox-skeleton>${checkboxLabel}</cds-checkbox-skeleton>
+    </fieldset>
+  `,
+};
+
+export const Single = {
+  render: () => html`
+    <cds-checkbox helper-text="Helper text goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
+    <br /><br />
+    <cds-checkbox invalid invalid-text="Invalid test goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
+    <br /><br />
+    <cds-checkbox warn warn-text="Warning test goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
+    <br /><br />
+    <cds-checkbox readonly>${checkboxLabel}</cds-checkbox>
+  `,
+};
+
+export const Playground = {
+  args: defaultArgs,
+  argTypes: controls,
+  render: ({
+    disabled,
+    readonly,
+    onChange,
+    helperText,
+    invalid,
+    invalidText,
+    legendText,
+    warn,
+    warnText,
+  }) =>
+    html`
+      <cds-checkbox-group
+        helper-text="${helperText}"
+        ?disabled="${disabled}"
+        ?invalid="${invalid}"
+        invalid-text="${invalidText}"
+        legend-text="${legendText}"
+        ?readonly="${readonly}"
+        ?warn="${warn}"
+        warn-text="${warnText}">
+        <cds-checkbox checked @cds-checkbox-changed="${onChange}"
+          >Checkbox label</cds-checkbox
+        >
+        <cds-checkbox @cds-checkbox-changed="${onChange}"
+          >Checkbox label</cds-checkbox
+        >
+        <cds-checkbox disabled @cds-checkbox-changed="${onChange}"
+          >Checkbox label</cds-checkbox
+        >
+      </cds-checkbox-group>
+    `,
+};
+
+const meta = {
+  title: 'Components/Checkbox',
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;