@trimble-oss/moduswebcomponents/collection/components/modus-wc-chip/modus-wc-chip.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/Chip',
    component: 'modus-wc-chip',
    args: {
        label: 'Chip',
        multiline: false,
        'show-remove': true,
        shape: 'rectangle',
        size: 'md',
        variant: 'filled',
    },
    argTypes: {
        shape: {
            control: { type: 'select' },
            options: ['rectangle', 'circle'],
        },
        size: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg'],
        },
        variant: {
            control: { type: 'select' },
            options: ['filled', 'outline'],
        },
    },
    decorators: [withActions],
    parameters: {
        actions: {
            handles: ['chipClick', 'chipRemove'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        return html ` <modus-wc-chip
      aria-label="Chip example"
      active=${ifDefined(args.active)}
      disabled=${ifDefined(args.disabled)}
      has-error=${ifDefined(args['has-error'])}
      label=${args.label}
      ?multiline=${Boolean(args.multiline)}
      shape=${args.shape}
      show-remove=${ifDefined(args['show-remove'])}
      size=${args.size}
      variant=${args.variant}
    />`;
    },
};
export const Default = Object.assign({}, Template);
export const AvatarChip = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-chip
  aria-label="Chip example"
  active=${ifDefined(args.active)}
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  label=${args.label}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  show-remove=${ifDefined(args['show-remove'])}
  size=${args.size}
  variant=${args.variant}
>
  <modus-wc-avatar
    img-src="https://i.pinimg.com/474x/73/54/79/7354794bf3873c3ef2666f778da4bcac.jpg"
    alt="sonic the hedgehog"
  ></modus-wc-avatar>
</modus-wc-chip>
    `;
    },
};
export const CheckIconChip = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-chip
  aria-label="Chip example"
  active=${ifDefined(args.active)}
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  label=${args.label}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  show-remove=${ifDefined(args['show-remove'])}
  size=${args.size}
  variant=${args.variant}
>
  <modus-wc-icon name="check" size="xs"></modus-wc-icon>
</modus-wc-chip>
    `;
    },
};
export const Multiline = {
    args: {
        label: 'This chip has a longer label that wraps across multiple lines when constrained.',
        multiline: true,
        'show-remove': false,
    },
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  .multiline-chip {
    max-width: 12rem;
  }
</style>

<modus-wc-chip
  aria-label="Multiline chip example"
  active=${ifDefined(args.active)}
  custom-class="multiline-chip"
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  label=${args.label}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  show-remove=${ifDefined(args['show-remove'])}
  size=${args.size}
  variant=${args.variant}
></modus-wc-chip>
    `;
    },
};
// prettier-ignore
export const Composable = {
    render: (args) => {
        return html `
<modus-wc-chip
  aria-label="Chip example"
  active=${ifDefined(args.active)}
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  size=${args.size}
  variant=${args.variant}
>
  <modus-wc-icon name="heart" size="xs"></modus-wc-icon>
  Chip
</modus-wc-chip>

<modus-wc-chip
  aria-label="Chip example"
  active=${ifDefined(args.active)}
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  show-remove="true"
  size=${args.size}
  variant=${args.variant}
>
  <modus-wc-icon name="heart" size="xs"></modus-wc-icon>
  Chip
</modus-wc-chip>

<modus-wc-chip
  aria-label="Chip example"
  active=${ifDefined(args.active)}
  disabled=${ifDefined(args.disabled)}
  has-error=${ifDefined(args['has-error'])}
  ?multiline=${Boolean(args.multiline)}
  shape=${args.shape}
  size=${args.size}
  variant=${args.variant}
>
  <modus-wc-icon name="heart" size="xs"></modus-wc-icon>
  Chip
  <modus-wc-icon name="heart" size="xs"></modus-wc-icon>
</modus-wc-chip>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        // Create a unique shadow host for chip component
        if (!customElements.get('chip-shadow-host')) {
            const ChipShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-chip',
                propsMapper: (v, el) => {
                    const chipEl = el;
                    chipEl.ariaLabel = 'Click me chip';
                    chipEl.active = Boolean(v.active);
                    chipEl.shape = v.shape || 'rectangle';
                    chipEl.size = v.size;
                    chipEl.variant = v.variant;
                    chipEl.customClass = v['custom-class'] || '';
                    chipEl.disabled = Boolean(v.disabled);
                    chipEl.hasError = Boolean(v['has-error']);
                    chipEl.label = v.label;
                    chipEl.multiline = Boolean(v.multiline);
                    chipEl.showRemove = Boolean(v['show-remove']);
                },
            });
            customElements.define('chip-shadow-host', ChipShadowHost);
        }
        return html `<chip-shadow-host .props=${Object.assign({}, args)}></chip-shadow-host>`;
    },
};
export const Migration = {
    parameters: {
        docs: {
            description: {
                story: `
#### Breaking Changes

  - \`chip-style\` prop has been renamed to \`variant\` and values changed from \`solid\` to \`filled\`.
  - \`closeClick\` event has been renamed to \`chipRemove\`.
  - \`show-close\` prop has been renamed to \`show-remove\`.
  - Size values have changed from verbose names (\`medium\`, \`small\`) to abbreviations (\`md\`, \`sm\`).

#### Prop Mapping

| 1.0 Prop       | 2.0 Prop    | Notes                                             |
|----------------|-------------|---------------------------------------------------|
| active         | active      |                                                   |
| advanced-chip  |             | Not carried over                                  |
| aria-label     | aria-label  |                                                   |
| chip-id        |             | Not carried over                                  |
| chip-style     | variant     | \`solid\` → \`filled\`, \`outline\` → \`outline\` |
| disabled       | disabled    |                                                   |
| has-error      | has-error   |                                                   |
| image-url      |             | Not carried over, use slot instead                |
| max-width      |             | Not carried over, use CSS instead                 |
| show-checkmark |             | Not carried over, use slot instead                |
| show-close     | show-remove |                                                   |
| size           | size        | \`medium\` → \`md\`, \`small\` → \`sm\`           |
| value          | label       |                                                   |
|                | shape       | New in 2.0: \`rectangle\` (default), \`circle\` |

#### Event Mapping

| 1.0 Event   | 2.0 Event   | Notes |
|-------------|-------------|-------|
| chipClick  | chipClick  |       |
| closeClick | chipRemove |       |
        `,
            },
        },
        controls: { disable: true },
        canvas: { disable: true },
    },
    render: () => html `<div></div>`,
};