@trimble-oss/moduswebcomponents
Version:
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
67 lines (65 loc) • 2.06 kB
JavaScript
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>
<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);