@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";
const meta = {
    title: 'Components/Chip',
    component: 'modus-wc-chip',
    args: {
        label: 'Chip',
        'show-remove': true,
        size: 'md',
        variant: 'filled',
    },
    argTypes: {
        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}
      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}
  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}
  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>
    `;
    },
};
// 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'])}
  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'])}
  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'])}
  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 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       |                                                   |

#### Event Mapping

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