@trimble-oss/moduswebcomponents/collection/components/modus-wc-badge/modus-wc-badge.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";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
const meta = {
    title: 'Components/Badge',
    component: 'modus-wc-badge',
    args: {
        color: 'primary',
        size: 'md',
        variant: 'filled',
    },
    argTypes: {
        color: {
            control: { type: 'select' },
            options: [
                'primary',
                'secondary',
                'tertiary',
                'high-contrast',
                'success',
                'warning',
                'danger',
            ],
        },
        size: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg'],
        },
        variant: {
            control: { type: 'select' },
            options: ['counter', 'filled', 'outlined', 'text'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-badge
  color="${args.color}"
  custom-class="${ifDefined(args['custom-class'])}"
  size="${args.size}"
  variant="${args.variant}"
>
  Badge
</modus-wc-badge>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const WithIcon = {
    render: () => {
        // prettier-ignore
        return html `
<style>
  .modus-wc-icon {
    padding-inline-end: 4px;
  }
</style>
<modus-wc-badge>
  <modus-wc-icon decorative name="check" size="xs"></modus-wc-icon>
  Item
</modus-wc-badge>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('badge-shadow-host')) {
            const BadgeShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-badge',
                propsMapper: (v, el) => {
                    const badgeEl = el;
                    badgeEl.color = v.color;
                    badgeEl.customClass = v['custom-class'] || '';
                    badgeEl.size = v.size;
                    badgeEl.variant = v.variant;
                },
                defaultContent: 'Badge',
            });
            customElements.define('badge-shadow-host', BadgeShadowHost);
        }
        return html `<badge-shadow-host .props=${Object.assign({}, args)}></badge-shadow-host>`;
    },
};
export const Migration = {
    parameters: {
        docs: {
            description: {
                story: `
#### Breaking Changes

  - The \`dark\` color option is now \`high-contrast\`
  - The \`type\` prop is now \`variant\` and \`default\` type is now \`filled\`
  - Size values have changed from verbose names (\`small\`, \`medium\`, \`large\`) to abbreviations (\`sm\`, \`md\`, \`lg\`).

#### Prop Mapping

| 1.0 Prop   | 2.0 Prop   | Notes                                                       |
|------------|------------|-------------------------------------------------------------|
| aria-label | aria-label |                                                             |
| color      | color      | \`dark\` is now \`high-contrast\`                           |
| size       | size       | \`small\` → \`sm\`, \`medium\` → \`md\`, \`large\` → \`lg\` |
| type       | variant    | \`default\` is now \`filled\`                               |
        `,
            },
        },
        // To hide the actual story rendering and only show docs:
        controls: { disable: true },
        canvas: { disable: true },
    },
    // Simple render function or leave it empty
    render: () => html `<div></div>`,
};