@trimble-oss/moduswebcomponents/collection/components/modus-wc-menu-item/modus-wc-menu-item.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/Menu Item',
    component: 'modus-wc-menu-item',
    args: {
        label: 'Menu Item',
        size: 'md',
        value: 'menuItem',
    },
    argTypes: {
        size: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg'],
        },
        'tooltip-position': {
            control: { type: 'select' },
            options: ['auto', 'top', 'right', 'bottom', 'left'],
        },
    },
    decorators: [withActions],
    parameters: {
        actions: {
            handles: ['itemSelect'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-menu>
  <modus-wc-menu-item
    ?bordered=${args.bordered}
    ?checkbox=${args.checkbox}
    custom-class=${ifDefined(args['custom-class'])}
    ?disabled=${args.disabled}
    ?focused=${args.focused}
    label=${args.label}
    ?selected=${args.selected}
    size=${args.size}
    sub-label=${ifDefined(args['sub-label'])}
    tooltip-content=${ifDefined(args['tooltip-content'])}
    tooltip-position=${ifDefined(args['tooltip-position'])}
    value=${args.value}
  ></modus-wc-menu-item>
</modus-wc-menu>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const WithIcon = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-menu>
  <modus-wc-menu-item
    ?bordered=${args.bordered}
    ?checkbox=${args.checkbox}
    custom-class=${ifDefined(args['custom-class'])}
    ?disabled=${args.disabled}
    ?focused=${args.focused}
    label=${args.label}
    ?selected=${args.selected}
    size=${args.size}
    sub-label=${ifDefined(args['sub-label'])}
    tooltip-content=${ifDefined(args['tooltip-content'])}
    tooltip-position=${ifDefined(args['tooltip-position'])}
    value=${args.value}
  >
    <modus-wc-icon
      slot="start-icon"
      name="alert"
      size="sm"
    ></modus-wc-icon>
  </modus-wc-menu-item>
</modus-wc-menu>
    `;
    },
};
export const WithCheckbox = {
    args: {
        checkbox: true,
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-menu>
  <modus-wc-menu-item
    ?bordered=${args.bordered}
    ?checkbox=${args.checkbox}
    custom-class=${ifDefined(args['custom-class'])}
    ?disabled=${args.disabled}
    ?focused=${args.focused}
    label=${args.label}
    ?selected=${args.selected}
    size=${args.size}
    sub-label=${ifDefined(args['sub-label'])}
    value=${args.value}
 ></modus-wc-menu-item>
</modus-wc-menu>
    `;
    },
};
export const WithTooltip = {
    args: {
        'tooltip-content': 'This is a tooltip for the menu item',
        'tooltip-position': 'top',
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-menu>
  <modus-wc-menu-item
    ?bordered=${args.bordered}
    custom-class=${ifDefined(args['custom-class'])}
    ?disabled=${args.disabled}
    ?focused=${args.focused}
    label=${args.label}
    ?selected=${args.selected}
    size=${args.size}
    sub-label=${ifDefined(args['sub-label'])}
    tooltip-content=${ifDefined((args['tooltip-content']))}
    tooltip-position=${ifDefined(args['tooltip-position'])}
    value=${args.value}
  ></modus-wc-menu-item>
</modus-wc-menu>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        // Create a unique shadow host for menu-item component
        if (!customElements.get('menu-item-shadow-host')) {
            const MenuItemShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-menu',
                propsMapper: (v, el) => {
                    const menuEl = el;
                    menuEl.ariaLabel = 'Shadow DOM Menu';
                    // Get or create menu item
                    let menuItem = el.querySelector('modus-wc-menu-item');
                    if (!menuItem) {
                        menuItem = document.createElement('modus-wc-menu-item');
                        el.innerHTML = '';
                        el.appendChild(menuItem);
                    }
                    // Update properties on the existing element
                    const menuItemEl = menuItem;
                    menuItemEl.ariaLabel = 'Menu item in shadow DOM';
                    menuItemEl.bordered = Boolean(v.bordered);
                    menuItemEl.checkbox = Boolean(v.checkbox);
                    menuItemEl.customClass = v['custom-class'] || '';
                    menuItemEl.disabled = Boolean(v.disabled);
                    menuItemEl.focused = Boolean(v.focused);
                    menuItemEl.label = v.label;
                    menuItemEl.selected = Boolean(v.selected);
                    menuItemEl.size = v.size || 'md';
                    menuItemEl.subLabel = v['sub-label'] || '';
                    menuItemEl.tooltipContent = v['tooltip-content'] || '';
                    menuItemEl.tooltipPosition = v['tooltip-position'] || 'auto';
                    menuItemEl.value = v.value;
                },
            });
            customElements.define('menu-item-shadow-host', MenuItemShadowHost);
        }
        return html `<menu-item-shadow-host
      .props=${Object.assign({}, args)}
    ></menu-item-shadow-host>`;
    },
};