@spectrum-web-components/breadcrumbs/stories/breadcrumbs.stories.js

Web component implementation of a Spectrum design Breadcrumbs

"use strict";
import { html } from "@spectrum-web-components/base";
import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
import {
  getBreadcrumbs,
  getBreadcrumbsWithLinks,
  getResizableStyles,
  Template
} from "./template.js";
import { argTypes } from "./args.js";
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
import { spreadProps } from "../../../test/lit-helpers.js";
export default {
  title: "Breadcrumbs",
  component: "sp-breadcrumbs",
  args: {
    "max-visible-items": 4
  },
  argTypes
};
export const Default = (args) => Template(args);
export const Disabled = (args) => Template(args);
Disabled.args = {
  disabled: true
};
export const Compact = (args) => Template(args);
Compact.args = {
  compact: true
};
export const Links = (args) => {
  return html`
        <sp-breadcrumbs
            ${spreadProps(args)}
            max-visible-items=${ifDefined(args["max-visible-items"])}
            @change=${args.onChange}
        >
            ${getBreadcrumbsWithLinks(4)}
        </sp-breadcrumbs>
    `;
};
export const ShowRoot = (args) => {
  return html`
        <sp-breadcrumbs
            ${spreadProps(args)}
            max-visible-items=${ifDefined(args["max-visible-items"])}
            @change=${args.onChange}
        >
            <sp-breadcrumb-item value="Home" slot="root">
                Home
            </sp-breadcrumb-item>
            ${getBreadcrumbs(6)}
        </sp-breadcrumbs>
    `;
};
export const resizableBehavior = (args) => {
  return html`
        <div class="resizable-container">
            ${getResizableStyles()}

            <sp-breadcrumbs
                ${spreadProps(args)}
                max-visible-items=${ifDefined(args["max-visible-items"])}
                @change=${args.onChange}
            >
                ${getBreadcrumbs(4)}
            </sp-breadcrumbs>
        </div>
    `;
};
//# sourceMappingURL=breadcrumbs.stories.js.map