feat(skeleton): update story to Storybook v7

packages/carbon-web-components/.storybook/main.ts

@@ -26,6 +26,10 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.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',

packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx → packages/carbon-web-components/src/components/skeleton-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" />

packages/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;

packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx → packages/carbon-web-components/src/components/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" />

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;