@trimble-oss/moduswebcomponents/collection/components/modus-wc-stepper/modus-wc-stepper.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";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
const meta = {
    title: 'Components/Stepper',
    component: 'modus-wc-stepper',
    args: {
        interactive: false,
        steps: [
            { label: 'Scale', color: 'primary' },
            { label: 'Belong', color: 'primary' },
            { label: 'Grow', color: 'warning' },
            { label: 'Innovate', content: '🚀' },
        ],
    },
    decorators: [withActions],
    argTypes: {
        'custom-class': {
            control: 'text',
        },
        interactive: {
            control: 'boolean',
        },
        orientation: {
            control: { type: 'select' },
            options: ['horizontal', 'vertical'],
        },
        steps: {
            description: 'Array of step objects defining the steps to display',
            table: {
                type: {
                    detail: `
            Interface: IStepperItem
            Properties:
            - color ('primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral', optional): The color theme of the step
            - content (string, optional): Custom content to display in the step indicator
            - customClass (string, optional): Custom CSS class to apply to the step
            - label (string, optional): Text label for the step
          `,
                },
            },
        },
    },
    parameters: {
        actions: {
            handles: ['stepClick'],
        },
        layout: 'padded',
    },
};
export default meta;
const Template = {
    // prettier-ignore
    render: (args) => {
        var _a;
        return html `
<modus-wc-stepper
  custom-class="${ifDefined(args['custom-class'])}"
  orientation="${ifDefined(args.orientation)}"
  ?interactive="${(_a = args.interactive) !== null && _a !== void 0 ? _a : false}"
  .steps="${args.steps}"
>
</modus-wc-stepper>
<script>
// Adding this block to show how to set stepper steps via JS.    
// const steps = [
//   { label: 'Scale', color: 'primary' },
//   { label: 'Belong', color: 'primary' },
//   { label: 'Grow', color: 'warning' },
//   { label: 'Innovate', content: '🚀' }
//   ];      
// const stepper = document.querySelector('modus-wc-stepper');  
// stepper.steps = steps;
</script>

  `;
    },
};
export const Default = Object.assign({}, Template);
export const Interactive = {
    args: {
        interactive: true,
    },
    parameters: {
        docs: {
            source: {
                code: `
<modus-wc-stepper
  id="interactive-stepper"
  orientation="horizontal"
  interactive
></modus-wc-stepper>
<script>
  const activeIndex = 1;
  const steps = [
    { label: 'Scale' },
    { label: 'Belong' },
    { label: 'Grow' },
    { label: 'Innovate', content: '🚀' },
  ];

  const getSteps = (selectedIndex) =>
    steps.map((step, index) =>
      index <= selectedIndex ? { ...step, color: 'primary' } : { ...step }
    );

  const stepper = document.getElementById('interactive-stepper');
  stepper.steps = getSteps(activeIndex);

  stepper.addEventListener('stepClick', (event) => {
    stepper.steps = getSteps(event.detail.index);
  });
</script>
        `,
            },
        },
    },
    // prettier-ignore
    render: (args) => {
        var _a;
        const initialActiveIndex = 1;
        const interactiveSteps = [
            { label: 'Scale' },
            { label: 'Belong' },
            { label: 'Grow' },
            { label: 'Innovate', content: '🚀' },
        ];
        const getInteractiveSteps = (activeIndex) => interactiveSteps.map((step, index) => index <= activeIndex ? Object.assign(Object.assign({}, step), { color: 'primary' }) : Object.assign({}, step));
        const handleInteractiveStepClick = (event) => {
            const stepper = event.target;
            stepper.steps = getInteractiveSteps(event.detail.index);
        };
        return html `
      <modus-wc-stepper
        id="interactive-stepper"
        orientation="horizontal"
        ?interactive="${(_a = args.interactive) !== null && _a !== void 0 ? _a : false}"
        .steps="${getInteractiveSteps(initialActiveIndex)}"
        @stepClick=${handleInteractiveStepClick}
      ></modus-wc-stepper>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('stepper-shadow-host')) {
            const StepperShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-stepper',
                propsMapper: (v, el) => {
                    var _a, _b, _c;
                    const stepperEl = el;
                    stepperEl.customClass = v['custom-class'] || '';
                    stepperEl.interactive = (_a = v.interactive) !== null && _a !== void 0 ? _a : false;
                    stepperEl.orientation = (_b = v.orientation) !== null && _b !== void 0 ? _b : 'horizontal';
                    stepperEl.steps = (_c = v.steps) !== null && _c !== void 0 ? _c : [];
                },
            });
            customElements.define('stepper-shadow-host', StepperShadowHost);
        }
        return html `<stepper-shadow-host
      .props=${Object.assign({}, args)}
    ></stepper-shadow-host>`;
    },
};