@trimble-oss/moduswebcomponents/collection/components/modus-wc-alert/modus-wc-alert.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/Alert',
    component: 'modus-wc-alert',
    args: {
        'alert-description': 'You have 3 new messages.',
        'alert-title': 'New message!',
        'disable-icon': false,
        dismissible: false,
        role: 'status',
        variant: 'info',
    },
    argTypes: {
        role: {
            control: { type: 'select' },
            options: ['', 'alert', 'log', 'marquee', 'status', 'timer'],
        },
        variant: {
            control: { type: 'select' },
            options: ['neutral', 'error', 'info', 'success', 'warning'],
        },
    },
    decorators: [withActions],
    parameters: {
        layout: 'padded',
        actions: {
            handles: ['dismissClick'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-alert
  alert-description=${ifDefined(args['alert-description'])}
  alert-title=${args['alert-title']}
  custom-class=${ifDefined(args['custom-class'])}
  delay=${ifDefined(args.delay)}
  disable-icon=${ifDefined(args['disable-icon'])}
  dismissible=${ifDefined(args.dismissible)}
  icon=${ifDefined(args.icon)}
  role=${args.role}
  variant=${ifDefined(args.variant)}
>
</modus-wc-alert>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const CustomButton = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-alert
  alert-description=${ifDefined(args['alert-description'])}
  alert-title=${args['alert-title']}
  custom-class=${ifDefined(args['custom-class'])}
  delay=${ifDefined(args.delay)}
  disable-icon=${ifDefined(args['disable-icon'])}
  dismissible=${ifDefined(args.dismissible)}
  icon=${ifDefined(args.icon)}
  role=${args.role}
  variant=${ifDefined(args.variant)}
>
  <modus-wc-button
    aria-label="View messages"
    color="tertiary"
    slot="button"
    variant="outlined"
  >View Messages</modus-wc-button>
</modus-wc-alert>
    `;
    },
};
export const WithCustomContent = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-alert
  id="alert-123"
  custom-class=${ifDefined(args['custom-class'])}
  delay=${ifDefined(args.delay)}
  disable-icon=${ifDefined(args['disable-icon'])}
  dismissible=${ifDefined(args.dismissible)}
  icon=${ifDefined(args.icon)}
  role=${args.role}
  variant=${ifDefined(args.variant)}
>
  <div slot="content">New custom message!</div>
</modus-wc-alert>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('alert-shadow-host')) {
            const AlertShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-alert',
                propsMapper: (v, el) => {
                    var _a, _b, _c;
                    const alertEl = el;
                    alertEl.alertDescription = (_a = v['alert-description']) !== null && _a !== void 0 ? _a : '';
                    alertEl.alertTitle = v['alert-title'];
                    alertEl.customClass = v['custom-class'] || '';
                    alertEl.delay = (_b = v.delay) !== null && _b !== void 0 ? _b : 0;
                    alertEl.disableIcon = Boolean(v['disable-icon']);
                    alertEl.dismissible = Boolean(v.dismissible);
                    alertEl.icon = (_c = v.icon) !== null && _c !== void 0 ? _c : '';
                    alertEl.variant = v.variant;
                },
            });
            customElements.define('alert-shadow-host', AlertShadowHost);
        }
        return html `<alert-shadow-host .props=${Object.assign({}, args)}></alert-shadow-host>`;
    },
};
export const Migration = {
    parameters: {
        docs: {
            description: {
                story: `
#### Breaking Changes

  - The 2.0 component can render a custom HTML title in the \`content\` slot.
  - The 1.0 component rendered a button, while the 2.0 component can render a custom HTML button in the \`button\` slot.

#### Prop Mapping

| 1.0 Prop          | 2.0 Prop    | Notes                                 |
|-------------------|-------------|---------------------------------------|
| aria-label        | aria-label  |                                       |
| button-aria-label |             | Not carried over, use \`button\` slot |
| button-text       |             | Not carried over, use \`button\` slot |
| dismissible       | dismissible |                                       |
| message           | alert-title |                                       |
| type              | variant     |                                       |

#### Event Mapping

| 1.0 Event    | 2.0 Event    | Notes                                 |
|--------------|--------------|---------------------------------------|
| actionClick  |              | Not carried over, use \`button\` slot |
| dismissClick | dismissClick |                                       |
        `,
            },
        },
        // 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>`,
};