chore(breadcrumb): finish updating breadcrumb to sb v7 (carbon-design…

…-system#11310)

Co-authored-by: kennylam <[email protected]>

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

@@ -20,6 +20,8 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/breadcrumb.mdx',
+    '../src/**/breadcrumb.stories.ts',
     '../src/**/combo-box.stories.ts',
     '../src/**/combo-box.mdx',
     '../src/**/content-switcher.mdx',

packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx → packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx

@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as BreadcrumbStories from './breadcrumb.stories';
+
+<Meta of={BreadcrumbStories} />
 
 # Breadcrumb
 
@@ -116,8 +119,8 @@ import '@carbon/web-components/es/components/breadcrumb/index.js';
 
 ## `<cds-breadcrumb>` attributes, properties and events
 
-<Props of="cds-breadcrumb" />
+<ArgsTable of="cds-breadcrumb" />
 
 ## `<cds-breadcrumb-link>` attributes, properties and events
 
-<Props of="cds-breadcrumb-link" />
+<ArgsTable of="cds-breadcrumb-link" />

packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,133 @@
+/**
+ * @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 './breadcrumb';
+import './breadcrumb-item';
+import './breadcrumb-link';
+import './breadcrumb-overflow-menu';
+import '../overflow-menu/overflow-menu-body';
+import './breadcrumb-skeleton';
+import storyDocs from './breadcrumb.mdx';
+
+const args = {
+  ariaLabel: '',
+  classes: '',
+  noTrailingSlash: false,
+};
+
+const argTypes = {
+  ariaLabel: {
+    control: 'text',
+    description: 'Specify the label for the breadcrumb container.',
+    name: 'aria-label',
+  },
+  classes: {
+    control: 'text',
+    description:
+      'Specify an optional className to be applied to the container node.',
+  },
+  noTrailingSlash: {
+    control: 'boolean',
+    description:
+      'Optional prop to omit the trailing slash for the breadcrumbs.',
+  },
+};
+
+export const Default = {
+  render: () => {
+    return html`
+      <cds-breadcrumb>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+      </cds-breadcrumb>
+    `;
+  },
+};
+
+export const BreadcrumbWithOverflowMenu = {
+  render: () => html`
+    <cds-breadcrumb>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="/#">Breadcrumb 2</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-overflow-menu>
+          <cds-overflow-menu-body>
+            <cds-overflow-menu-item>Breadcrumb 3</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Breadcrumb 4</cds-overflow-menu-item>
+          </cds-overflow-menu-body>
+        </cds-breadcrumb-overflow-menu>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="/#">Breadcrumb 5</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link>Breadcrumb 6</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+    </cds-breadcrumb>
+  `,
+};
+
+export const Skeleton = {
+  render: () => {
+    return html` <cds-breadcrumb-skeleton> </cds-breadcrumb-skeleton> `;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { ariaLabel, classes, noTrailingSlash } = args ?? {};
+    return html`
+      <cds-breadcrumb
+        ?no-trailing-slash="${noTrailingSlash}"
+        class="${classes}"
+        aria-label="${ariaLabel}">
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+      </cds-breadcrumb>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;