@trimble-oss/moduswebcomponents/collection/components/modus-wc-progress/modus-wc-progress.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/Progress',
    component: 'modus-wc-progress',
    args: {
        indeterminate: false,
        max: 100,
        value: 70,
        variant: 'default',
    },
    argTypes: {
        variant: {
            control: { type: 'select' },
            options: ['default', 'radial'],
        },
    },
    parameters: {
        layout: 'padded',
    },
};
export default meta;
export const Default = {
    render: (args) => {
        return html `
      <modus-wc-progress
        aria-label="Progress bar"
        custom-class="${ifDefined(args['custom-class'])}"
        ?indeterminate=${args.indeterminate}
        label=${ifDefined(args.label)}
        max=${ifDefined(args.max)}
        value=${args.value}
        variant=${ifDefined(args.variant)}
      ></modus-wc-progress>
    `;
    },
};
export const Indeterminate = {
    render: () => {
        return html ` <modus-wc-progress indeterminate="true"></modus-wc-progress> `;
    },
};
export const SizeVariations = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  modus-wc-progress.modus-wc-progress-container .size-small {
    height: 0.5rem;
  }
  modus-wc-progress.modus-wc-progress-container .size-compact {
    height: 0.25rem;
  }
</style>
<div>
  <div>
    Default size
    <modus-wc-progress value=${args.value}></modus-wc-progress>
  </div>
  <div>
    Small size
    <modus-wc-progress
      value=${args.value}
      custom-class="size-small"
    ></modus-wc-progress>
  </div>
  <div>
    Compact size
    <modus-wc-progress
      value=${args.value}
      custom-class="size-compact"
    ></modus-wc-progress>
  </div>
</div>
    `;
    },
};
export const LabelTextColor = {
    args: {
        label: 'Loading...',
        value: 50,
    },
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  modus-wc-progress .modus-wc-progress-label.custom-label-color {
    color: #f00;
  }
</style>
<modus-wc-progress
  value=${args.value}
  label=${ifDefined(args.label)}
  custom-class="custom-label-color"
></modus-wc-progress>
    `;
    },
};
export const CustomBarColor = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  modus-wc-progress .modus-wc-progress.custom-bar-color::-webkit-progress-value {
    background-color: #f48;
  }
  modus-wc-progress .modus-wc-progress.custom-bar-color::-moz-progress-bar {
    background-color: #f48;
  }
</style>
<modus-wc-progress
  value=${args.value}
  custom-class="custom-bar-color"
></modus-wc-progress>
    `;
    },
};
export const CustomBackgroundColor = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  modus-wc-progress .modus-wc-progress.custom-bg-color {
    background-color: #f00;
  }
</style>
<modus-wc-progress
  value=${args.value}
  custom-class="custom-bg-color"
></modus-wc-progress>
    `;
    },
};
export const RadialWithSlottedContent = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  #radial-icon {
    justify-content: center;
  }
</style>
<modus-wc-progress
  aria-label="progress radial"
  ?indeterminate=${args.indeterminate}
  max=${ifDefined(args.max)}
  variant="radial"
  value=${args.value}
>
  <modus-wc-icon id="radial-icon" name="clipboard" size="md"></modus-wc-icon>
  ${args.value}%
</modus-wc-progress>
    `;
    },
    parameters: {
        layout: 'centered',
    },
};
export const RadialWithCustomSizeAndThickness = {
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  .radial-progress--lg {
    --size: 12rem;
  }
  .radial-progress--thin {
    --thickness: 0.5rem;
  }
</style>
<modus-wc-progress
  aria-label="progress radial"
  custom-class="radial-progress--lg"
  ?indeterminate=${args.indeterminate}
  max=${ifDefined(args.max)}
  variant="radial"
  value=${args.value}
>
  ${args.value}%
</modus-wc-progress>
<modus-wc-progress
  aria-label="progress radial"
  custom-class="radial-progress--lg radial-progress--thin"
  ?indeterminate=${args.indeterminate}
  max=${ifDefined(args.max)}
  variant="radial"
  value=${args.value}
>
  ${args.value}%
</modus-wc-progress>
    `;
    },
    parameters: {
        layout: 'centered',
    },
};
export const Migration = {
    parameters: {
        docs: {
            description: {
                story: `
#### Breaking Changes

  - Colors and sizes are now handled through CSS instead of direct props.
  - The \`mode\` prop has been replaced with an \`indeterminate\` boolean prop.

#### Prop Mapping

| 1.0 Prop          | 2.0 Prop      | Notes                                                |
|-------------------|---------------|------------------------------------------------------|
| aria-label        | aria-label    |                                                      |
| background-color  |               | Not carried over, use CSS instead                    |
| color             |               | Not carried over, use CSS instead                    |
| max-value         | max           |                                                      |
| min-value         |               | Not carried over                                     |
| mode              | indeterminate | 1.0: \`determinate\`/\`indeterminate\`, 2.0: boolean |
| size              |               | Not carried over, use CSS instead                    |
| text              | label         |                                                      |
| text-color        |               | Not carried over, use CSS instead                    |
| value             | value         |                                                      |
        `,
            },
        },
        controls: { disable: true },
        canvas: { disable: true },
    },
    render: () => html `<div></div>`,
};