@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";
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}
    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}
    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}
    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}
    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>
    `;
    },
};