@trimble-oss/moduswebcomponents/collection/components/modus-wc-breadcrumbs/modus-wc-breadcrumbs.stories.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const items = [
    {
        label: 'Root',
        url: '#',
    },
    {
        label: 'Subpage',
        url: '#',
    },
    {
        label: 'Current Page',
        url: '#',
    },
];
const meta = {
    title: 'Components/Breadcrumbs',
    component: 'modus-wc-breadcrumbs',
    args: {
        items,
        size: 'md',
    },
    argTypes: {
        items: {
            description: 'Array of items for the breadcrumbs component',
            table: {
                type: {
                    detail: `
            Interface: IBreadcrumb
            Properties:
            - label (string): The text to render in the breadcrumb
            - url (string, optional): The URL emitted when the breadcrumb is clicked
          `,
                },
            },
        },
        size: {
            control: {
                type: 'select',
            },
            options: ['xs', 'sm', 'md', 'lg'],
        },
    },
    decorators: [withActions],
    parameters: {
        actions: {
            handles: ['breadcrumbClick'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-breadcrumbs
  custom-class=${ifDefined(args['custom-class'])}
  .items=${args.items}
  size=${ifDefined(args.size)}
></modus-wc-breadcrumbs>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const UnderlineLinks = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  .underline-links a {
    text-decoration: underline;
  }
</style>
<modus-wc-breadcrumbs
  custom-class="underline-links"
  .items=${args.items}
  size=${ifDefined(args.size)}
></modus-wc-breadcrumbs>
    `;
    },
};
export const Migration = {
    parameters: {
        docs: {
            description: {
                story: `
#### Breaking Changes

  - The structure of the breadcrumb \`items\` has changed from \`Crumb\` interface to \`IBreadcrumb\` interface.
  - Underlined links are now applied using a custom class rather than a dedicated prop.

#### Prop Mapping

| 1.0 Prop        | 2.0 Prop      | Notes                                               |
|-----------------|---------------|-----------------------------------------------------|
| aria-label      | aria-label    |                                                     |
| crumbs          | items         | Interface changed from \`Crumb\` to \`IBreadcrumb\` |
| underline-links |               | Not carried over, use CSS instead                   |

#### Event Mapping

| 1.0 Event  | 2.0 Event       | Notes                                             |
|------------|-----------------|---------------------------------------------------|
| crumbClick | breadcrumbClick | Payload changed from \`Crumb\` to \`IBreadcrumb\` |

#### Interfaces

##### 1.0:
\`\`\`typescript
interface Crumb {
  display: string;
  id: string;
}
\`\`\`

##### 2.0:
\`\`\`typescript
interface IBreadcrumb {
  label: string;
  url?: string;
}
\`\`\`
        `,
            },
        },
        // To hide the actual story rendering and only show docs:
        controls: { disable: true },
        canvas: { disable: true },
    },
    // Simple render function or leave it empty
    render: () => html `<div></div>`,
};