Merge branch 'feat/cwc-storybook-7-vite' into chore/progress-indicato…

…r-sb-v7
carbon-design-system · Jan 10, 2024 · 9468ff5 · 9468ff5
2 parents a8112ec + edb9de9
commit 9468ff5
Show file tree

Hide file tree

Showing 13 changed files with 543 additions and 412 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -28,6 +28,14 @@ const stories = glob.sync(
     '../src/**/overflow-menu.stories.ts',
     '../src/**/progress-indicator.mdx',
     '../src/**/progress-indicator.stories.ts',
+    '../src/**/skeleton-placeholder.mdx',
+    '../src/**/skeleton-placeholder.stories.ts',
+    '../src/**/skeleton-text.mdx',
+    '../src/**/skeleton-text.stories.ts',
+    '../src/**/skip-to-content.mdx',
+    '../src/**/skip-to-content.stories.ts',
+    '../src/**/slider.mdx',
+    '../src/**/slider.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/...s/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/...s/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
diff --git a/...laceholder/skeleton-placeholder-story.mdx → ...eton-placeholder/skeleton-placeholder.mdx b/...laceholder/skeleton-placeholder-story.mdx → ...eton-placeholder/skeleton-placeholder.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 SkeletonPlaceholderStories from './skeleton-placeholder.stories';
+
+<Meta of={SkeletonPlaceholderStories} />
 
 # Skeleton placeholder
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-placeholder'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-placeholder'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -30,4 +33,4 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 
 ## `<cds-skeleton-placeholder>` attributes, properties and events
 
-<Props of="cds-skeleton-placeholder" />
+<ArgsTable of="cds-skeleton-placeholder" />
diff --git a/...carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts b/...carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * 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 './skeleton-placeholder';
+import storyDocs from './skeleton-placeholder.mdx';
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`,
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Placeholder',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
diff --git a/...nts/skeleton-text/skeleton-text-story.mdx → ...omponents/skeleton-text/skeleton-text.mdx b/...nts/skeleton-text/skeleton-text-story.mdx → ...omponents/skeleton-text/skeleton-text.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 SkeletonTextStories from './skeleton-text.stories';
+
+<Meta of={SkeletonTextStories} />
 
 # Skeleton text
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-text/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-text'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-text'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -41,4 +44,4 @@ multiple instances of `<cds-skeleton-text>`.
 
 ## `<cds-skeleton-text>` attributes and properties
 
-<Props of="cds-skeleton-text" />
+<ArgsTable of="cds-skeleton-text" />
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts
@@ -0,0 +1,85 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * 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 { ifDefined } from 'lit/directives/if-defined.js';
+import { SKELETON_TEXT_TYPE } from './skeleton-text';
+import storyDocs from './skeleton-text.mdx';
+
+const types = {
+  Regular: null,
+  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
+};
+
+const args = {
+  type: null,
+  paragraph: true,
+  lineCount: 3,
+  width: '100%',
+};
+
+const argTypes = {
+  type: {
+    control: 'select',
+    description: 'Indicate the type of skeleton text, heading or regular.',
+    options: types,
+  },
+  paragraph: {
+    control: 'boolean',
+    description: 'Set this to true to generate multiple lines of text.',
+  },
+  lineCount: {
+    control: 'number',
+    description: 'The number of lines shown if paragraph is true.',
+  },
+  width: {
+    control: 'text',
+    description:
+      'Width (in px or %) of single line of text or max-width of paragraph lines.',
+  },
+};
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-text></cds-skeleton-text>`,
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { type, paragraph, lineCount, width } = args ?? {};
+    return html`
+      <cds-skeleton-text
+        type="${ifDefined(type)}"
+        ?paragraph="${paragraph}"
+        lineCount="${lineCount}"
+        width="${width}">
+      </cds-skeleton-text>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Text',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+    percy: {
+      skip: true,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
diff --git a/...skip-to-content/skip-to-content-story.mdx → ...nents/skip-to-content/skip-to-content.mdx b/...skip-to-content/skip-to-content-story.mdx → ...nents/skip-to-content/skip-to-content.mdx
@@ -1,4 +1,8 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SkipToContentStories from './skip-to-content.stories';
+
+<Meta of={SkipToContentStories} />
 
 # Skip to content
 
@@ -21,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skip-to-content/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skip-to-content'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skip-to-content'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -32,4 +36,4 @@ import '@carbon/web-components/es/components/skip-to-content/index.js';
 
 ## `<cds-skip-to-content>` attributes and properties
 
-<Props of="cds-skip-to-content" />
+<ArgsTable of="cds-skip-to-content" />