@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 { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const meta = {
    title: 'Components/Stepper',
    component: 'modus-wc-stepper',
    args: {
        steps: [
            { label: 'Scale', color: 'primary' },
            { label: 'Belong', color: 'primary' },
            { label: 'Grow', color: 'warning' },
            { label: 'Innovate', content: '🚀' },
        ],
    },
    argTypes: {
        'custom-class': {
            control: 'text',
        },
        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: {
        layout: 'padded',
    },
};
export default meta;
const Template = {
    // prettier-ignore
    render: (args) => html `
<modus-wc-stepper
  custom-class="${ifDefined(args['custom-class'])}"
  orientation="${ifDefined(args.orientation)}"
  .steps="${args.steps}"
>
</modus-wc-stepper>
  `,
};
export const Default = Object.assign({}, Template);