chore(storybook): update tearsheet and sidepanel stories

packages/carbon-web-components/package.json

@@ -68,7 +68,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "^2.30.1",
-    "@carbon/styles": "1.53.0",
+    "@carbon/styles": "1.54.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.3.0",
     "flatpickr": "4.6.13",

packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-icon.stories.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 './ai-skeleton-icon';
+
+export const Default = {
+  // This story doesn't accept any args.
+  args: {},
+  argTypes: {},
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => {
+    html`<cds-ai-skeleton-icon
+        custom-styles="margin: 50px"></cds-ai-skeleton-icon>
+      <cds-ai-skeleton-icon
+        custom-styles="margin: 50px; width: 24px; height: 24px"></cds-ai-skeleton-icon>`;
+  },
+};
+
+const meta = {
+  title: 'Experimental/AISkeleton/AISkeletonIcon',
+};
+
+export default meta;

packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-placeholder-story.ts → packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-placeholder.stories.ts

@@ -9,21 +9,24 @@
 
 import { html } from 'lit';
 import './ai-skeleton-placeholder';
-import storyDocs from './ai-skeleton-story.mdx';
 
-export const Default = () =>
-  html`<cds-ai-skeleton-placeholder
-    class="test"></cds-ai-skeleton-placeholder>`;
-
-Default.parameters = {
-  percy: {
-    skip: true,
+export const Default = {
+  // This story doesn't accept any args.
+  args: {},
+  argTypes: {},
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => {
+    html`<cds-ai-skeleton-placeholder
+      class="test"></cds-ai-skeleton-placeholder>`;
   },
 };
 
-export default {
+const meta = {
   title: 'Experimental/AISkeleton/AISkeletonPlaceholder',
-  parameters: {
-    ...storyDocs.parameters,
-  },
 };
+
+export default meta;

packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-text.stories.ts

@@ -0,0 +1,76 @@
+/**
+ * @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 './ai-skeleton-text';
+
+const args = {
+  heading: false,
+  paragraph: false,
+  width: '100%',
+  lineCount: 3,
+};
+
+const argTypes = {
+  heading: {
+    control: 'boolean',
+    description: 'Heading (heading)',
+  },
+  paragraph: {
+    control: 'boolean',
+    description: 'Paragraph (paragraph)',
+  },
+  width: {
+    control: 'text',
+    description: 'Width (width)',
+  },
+  lineCount: {
+    control: 'number',
+    description: 'Line count (linecount)',
+  },
+};
+
+export const Default = {
+  // This story doesn't accept any args.
+  args: {},
+  argTypes: {},
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => {
+    html`<cds-ai-skeleton-text></cds-ai-skeleton-text>`;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: (args) => {
+    const { heading, paragraph, width, lineCount } = args ?? {};
+
+    return html`<cds-ai-skeleton-text
+      ?heading="${heading}"
+      width="${width}"
+      ?paragraph="${paragraph}"
+      linecount="${lineCount}"></cds-ai-skeleton-text>`;
+  },
+};
+
+const meta = {
+  title: 'Experimental/AISkeleton/AISkeletonText',
+};
+
+export default meta;

packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-story.mdx → packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton.mdx

@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as AISkeletonStories from './ai-skeleton-placeholder.stories';
+
+<Meta of={AISkeletonStories} />
 
 # AI Skeleton placeholder
 
@@ -19,26 +22,25 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/ai-skeleton/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['ai-skeleton'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['ai-skeleton'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
 ```html
 <cds-ai-skeleton-placeholder></cds-ai-skeleton-placeholder>
 <cds-ai-skeleton-icon></cds-ai-skeleton-icon>
 <cds-ai-skeleton-text></cds-ai-skeleton-text>
-
 ```
 
 ## `<cds-skeleton-placeholder>` attributes, properties and events
 
-<Props of="cds-skeleton-placeholder" />
+<ArgsTable of="cds-skeleton-placeholder" />
 
 ## `<cds-skeleton-icon>` attributes, properties and events
 
-<Props of="cds-skeleton-icon" />
+<ArgsTable of="cds-skeleton-icon" />
 
 ## `<cds-skeleton-text>` attributes, properties and events
 
-<Props of="cds-skeleton-text" />
+<ArgsTable of="cds-skeleton-text" />