@trimble-oss/moduswebcomponents/collection/components/modus-wc-tree-item/modus-wc-tree-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";
import { treeItemCustomSourceCode, treeItemDefaultSourceCode, treeItemShadowDomParentSourceCode, treeItemWithCheckboxSourceCode, treeItemWithEndSlotSourceCode, treeItemWithStartSlotSourceCode, treeItemWithTooltipSourceCode, } from "./modus-wc-tree-item.story-source";
const meta = {
    title: 'Components/Tree Item',
    component: 'modus-wc-tree-item',
    args: {
        label: 'Tree Item',
        size: 'md',
        value: 'treeItem',
    },
    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 = {
    parameters: {
        docs: { source: { code: treeItemDefaultSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu>
  <modus-wc-tree-item
    ?bordered=${args.bordered}
    ?block-expand=${args['block-expand']}
    ?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-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const WithStartSlot = {
    parameters: {
        docs: { source: { code: treeItemWithStartSlotSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu>
  <modus-wc-tree-item
    ?bordered=${args.bordered}
    ?disabled=${args.disabled}
    label=${args.label}
    ?selected=${args.selected}
    size=${args.size}
    value=${args.value}
  >
    <modus-wc-icon slot="start" name="alert" size="sm"></modus-wc-icon>
  </modus-wc-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const WithEndSlot = {
    parameters: {
        docs: { source: { code: treeItemWithEndSlotSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu>
  <modus-wc-tree-item
    label=${args.label}
    value=${args.value}
  >
    <modus-wc-dropdown-menu
      slot="end"
      button-variant="borderless"
      button-size="sm"
      button-shape="circle"
      button-aria-label="More options"
    >
        <div slot="button">
          <modus-wc-icon name="more_vertical" size="sm"></modus-wc-icon>
        </div>
     <div slot="menu">
        <modus-wc-menu-item label="Rename" value="rename"></modus-wc-menu-item>
        <modus-wc-menu-item label="Duplicate" value="duplicate"></modus-wc-menu-item>
        <modus-wc-menu-item label="Delete" value="delete"></modus-wc-menu-item>
      </div>
    </modus-wc-dropdown-menu>
  </modus-wc-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const CustomTreeItem = {
    parameters: {
        docs: { source: { code: treeItemCustomSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu size="sm">
  <modus-wc-tree-item
    label=${args.label}
    value=${args.value}
  >
    <modus-wc-icon slot="start" name="search"></modus-wc-icon>
    <div slot="end" style="display: flex; align-items: center;">
      <div
        style="width: 1px; background: currentColor; opacity: 0.3; margin-inline-end: 4px; align-self: stretch;"
      ></div>
      <modus-wc-button
        variant="borderless"
        size="sm"
        aria-label="Open folder"
      >
        <modus-wc-icon name="folder_closed" size="sm"></modus-wc-icon>
        <modus-wc-icon name="chevron_right" size="sm"></modus-wc-icon>
      </modus-wc-button>
    </div>
  </modus-wc-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const WithCheckbox = {
    args: {
        checkbox: true,
    },
    parameters: {
        docs: { source: { code: treeItemWithCheckboxSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu>
  <modus-wc-tree-item
    ?checkbox=${args.checkbox}
    label=${args.label}
    value=${args.value}
  ></modus-wc-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const WithTooltip = {
    args: {
        'tooltip-content': 'Tooltip content',
    },
    parameters: {
        docs: { source: { code: treeItemWithTooltipSourceCode } },
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-tree-menu>
  <modus-wc-tree-item
    label=${args.label}
    tooltip-content=${ifDefined(args['tooltip-content'])}
    value=${args.value}
  ></modus-wc-tree-item>
</modus-wc-tree-menu>
    `;
    },
};
export const ShadowDomParent = {
    parameters: {
        docs: { source: { code: treeItemShadowDomParentSourceCode } },
    },
    render: (args) => {
        if (!customElements.get('tree-item-shadow-host')) {
            const TreeItemShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-tree-menu',
                propsMapper: (v, el) => {
                    const treeMenuEl = el;
                    treeMenuEl.ariaLabel = 'Shadow DOM Tree Menu';
                    let treeItem = el.querySelector('modus-wc-tree-item');
                    if (!treeItem) {
                        treeItem = document.createElement('modus-wc-tree-item');
                        el.innerHTML = '';
                        el.appendChild(treeItem);
                    }
                    const treeItemEl = treeItem;
                    treeItemEl.bordered = Boolean(v.bordered);
                    treeItemEl.blockExpand = Boolean(v['block-expand']);
                    treeItemEl.checkbox = Boolean(v.checkbox);
                    treeItemEl.customClass = v['custom-class'] || '';
                    treeItemEl.disabled = Boolean(v.disabled);
                    treeItemEl.focused = Boolean(v.focused);
                    treeItemEl.hasSubmenu = Boolean(v['has-submenu']);
                    treeItemEl.label = v.label;
                    treeItemEl.selected = Boolean(v.selected);
                    treeItemEl.size = v.size || 'md';
                    treeItemEl.subLabel = v['sub-label'] || '';
                    treeItemEl.tooltipContent = v['tooltip-content'] || '';
                    treeItemEl.tooltipPosition = v['tooltip-position'] || 'auto';
                    treeItemEl.value = v.value;
                },
            });
            customElements.define('tree-item-shadow-host', TreeItemShadowHost);
        }
        return html `<tree-item-shadow-host
      .props=${Object.assign({}, args)}
    ></tree-item-shadow-host>`;
    },
};