@trimble-oss/moduswebcomponents/collection/components/modus-wc-divider/modus-wc-divider.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/Divider',
    component: 'modus-wc-divider',
    args: {
        color: 'tertiary',
        content: '',
        'custom-class': '',
        orientation: 'vertical',
        position: 'center',
        responsive: true,
    },
    argTypes: {
        color: {
            control: { type: 'select' },
            options: [
                'primary',
                'secondary',
                'tertiary',
                'high-contrast',
                'success',
                'warning',
                'danger',
            ],
        },
        content: {
            control: 'text',
        },
        'custom-class': {
            control: 'text',
        },
        orientation: {
            control: { type: 'select' },
            options: ['horizontal', 'vertical'],
        },
        position: {
            control: { type: 'select' },
            options: ['start', 'center', 'end'],
        },
        responsive: {
            control: { type: 'boolean' },
        },
    },
    parameters: {
        layout: 'padded',
    },
};
export default meta;
const Template = {
    render: (args) => html `
    <modus-wc-divider
      color="${args.color}"
      content="${args.content}"
      custom-class="${ifDefined(args['custom-class'])}"
      orientation="${args.orientation}"
      position="${args.position}"
      responsive="${args.responsive}"
      style="${args.orientation === 'horizontal'
        ? 'display: flex; height: 100px'
        : ''}"
    ></modus-wc-divider>
  `,
};
export const Default = Object.assign({}, Template);
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('divider-shadow-host')) {
            const DividerShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-divider',
                propsMapper: (v, el) => {
                    const dividerEl = el;
                    dividerEl.color = v.color;
                    dividerEl.content = v.content;
                    dividerEl.customClass = v['custom-class'] || '';
                    dividerEl.orientation = v.orientation;
                    dividerEl.position = v.position;
                    dividerEl.responsive = Boolean(v.responsive);
                    // Mirror the Default story: apply display:flex + height on the
                    // modus-wc-divider element itself so the inner div gets its height
                    if (v.orientation === 'horizontal') {
                        el.style.display = 'flex';
                        el.style.height = '100px';
                    }
                    else {
                        el.style.display = '';
                        el.style.height = '';
                    }
                },
            });
            customElements.define('divider-shadow-host', DividerShadowHost);
        }
        return html `<divider-shadow-host
      .props=${Object.assign({}, args)}
    ></divider-shadow-host>`;
    },
};