@trimble-oss/moduswebcomponents/collection/components/modus-wc-panel/modus-wc-panel.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/Panel',
    component: 'modus-wc-panel',
    args: {
        'custom-class': '',
        width: '250px',
        height: '500px',
        floating: false,
    },
    parameters: {
        layout: 'padded',
    },
    argTypes: {
        floating: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
export const Default = {
    args: {
        width: '250px',
        height: '500px',
        floating: false,
    },
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  .panel-section {
    padding: 12px;
  }
</style>
<modus-wc-panel custom-class="${ifDefined(args['custom-class'])}" width="${ifDefined(args.width)}" height="${ifDefined(args.height)}" ?floating="${args.floating}">
  <modus-wc-menu slot="header">  
    <modus-wc-menu-item label="Home" custom-class="panel-section">
      <modus-wc-icon slot="start-icon" name="home"></modus-wc-icon>
    </modus-wc-menu-item>
  </modus-wc-menu>

  <modus-wc-menu size="lg" slot="body">
    <modus-wc-menu-item label="Dashboard" value="dashboard"></modus-wc-menu-item>
    <modus-wc-menu-item label="Projects" value="projects"></modus-wc-menu-item>
    <modus-wc-menu-item label="Team" value="team"></modus-wc-menu-item>
    <modus-wc-menu-item label="Calendar" value="calendar"></modus-wc-menu-item>
    <modus-wc-menu-item label="Documents" value="documents"></modus-wc-menu-item>
    <modus-wc-menu-item label="Reports" value="reports"></modus-wc-menu-item>
    <modus-wc-menu-item label="Analytics" value="analytics"></modus-wc-menu-item>
    <modus-wc-menu-item label="Messages" value="messages"></modus-wc-menu-item>
  </modus-wc-menu>

  <modus-wc-menu slot="footer">   
    <modus-wc-menu-item label="Settings" custom-class="panel-section">
      <modus-wc-icon slot="start-icon" name="settings"></modus-wc-icon>
    </modus-wc-menu-item>
  </modus-wc-menu>
</modus-wc-panel>
    `;
    },
};
export const Floating = {
    args: {
        width: '250px',
        height: '500px',
        floating: true,
    },
    render: (args) => {
        // prettier-ignore
        return html `
<style>
  .panel-section {
    padding: 12px;
  }
</style>
<modus-wc-panel custom-class="${ifDefined(args['custom-class'])}" width="${ifDefined(args.width)}" height="${ifDefined(args.height)}" ?floating="${args.floating}">
  <modus-wc-menu slot="header">
    <modus-wc-menu-item label="Menu" custom-class="panel-section">
      <modus-wc-icon slot="start-icon" name="menu"></modus-wc-icon>
    </modus-wc-menu-item>
  </modus-wc-menu>

  <modus-wc-menu size="lg" slot="body">
    <modus-wc-menu-item label="Files" value="files"></modus-wc-menu-item>
    <modus-wc-menu-item label="Inbox" value="inbox"></modus-wc-menu-item>
    <modus-wc-menu-item label="Starred" value="starred"></modus-wc-menu-item>
    <modus-wc-menu-item label="Recent" value="recent"></modus-wc-menu-item>
    <modus-wc-menu-item label="Shared" value="shared"></modus-wc-menu-item>
    <modus-wc-menu-item label="Archive" value="archive"></modus-wc-menu-item>
    <modus-wc-menu-item label="Trash" value="trash"></modus-wc-menu-item>
    <modus-wc-menu-item label="Settings" value="settings"></modus-wc-menu-item>
  </modus-wc-menu>

  <modus-wc-menu slot="footer">
    <modus-wc-menu-item label="Help" custom-class="panel-section">
      <modus-wc-icon slot="start-icon" name="help"></modus-wc-icon>
    </modus-wc-menu-item>
  </modus-wc-menu>
</modus-wc-panel>
    `;
    },
};
export const BodyOnly = {
    args: {
        width: '250px',
        height: 'auto',
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-panel custom-class="${ifDefined(args['custom-class'])}" width="${ifDefined(args.width)}" height="${ifDefined(args.height)}" ?floating="${args.floating}">
  <modus-wc-menu size="lg" slot="body">
    <modus-wc-menu-item label="Dashboard" value="dashboard"></modus-wc-menu-item>
    <modus-wc-menu-item label="Projects" value="projects"></modus-wc-menu-item>
    <modus-wc-menu-item label="Team" value="team"></modus-wc-menu-item>
    <modus-wc-menu-item label="Calendar" value="calendar"></modus-wc-menu-item>
    <modus-wc-menu-item label="Documents" value="documents"></modus-wc-menu-item>
    <modus-wc-menu-item label="Reports" value="reports"></modus-wc-menu-item>
    <modus-wc-menu-item label="Analytics" value="analytics"></modus-wc-menu-item>
    <modus-wc-menu-item label="Messages" value="messages"></modus-wc-menu-item>
    <modus-wc-menu-item label="Tasks" value="tasks"></modus-wc-menu-item>
  </modus-wc-menu>
</modus-wc-panel>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('panel-shadow-host')) {
            const PanelShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-panel',
                propsMapper: (v, el) => {
                    var _a, _b;
                    const panelEl = el;
                    panelEl.customClass = v['custom-class'] || '';
                    panelEl.width = (_a = v.width) !== null && _a !== void 0 ? _a : '250px';
                    panelEl.height = (_b = v.height) !== null && _b !== void 0 ? _b : '500px';
                    panelEl.floating = Boolean(v.floating);
                    if (!el.hasChildNodes()) {
                        // Inject .panel-section style into the shadow root since the
                        // global <style> block can't cross the shadow DOM boundary
                        const shadowRoot = el.getRootNode();
                        if (shadowRoot instanceof ShadowRoot &&
                            !shadowRoot.querySelector('#panel-section-style')) {
                            const style = document.createElement('style');
                            style.id = 'panel-section-style';
                            style.textContent = '.panel-section { padding: 12px; }';
                            shadowRoot.appendChild(style);
                        }
                        el.innerHTML = `
<modus-wc-menu slot="header">
  <modus-wc-menu-item label="Home" custom-class="panel-section">
    <modus-wc-icon slot="start-icon" name="home"></modus-wc-icon>
  </modus-wc-menu-item>
</modus-wc-menu>
<modus-wc-menu size="lg" slot="body">
  <modus-wc-menu-item label="Dashboard" value="dashboard"></modus-wc-menu-item>
  <modus-wc-menu-item label="Projects" value="projects"></modus-wc-menu-item>
  <modus-wc-menu-item label="Team" value="team"></modus-wc-menu-item>
  <modus-wc-menu-item label="Calendar" value="calendar"></modus-wc-menu-item>
  <modus-wc-menu-item label="Documents" value="documents"></modus-wc-menu-item>
  <modus-wc-menu-item label="Reports" value="reports"></modus-wc-menu-item>
  <modus-wc-menu-item label="Analytics" value="analytics"></modus-wc-menu-item>
  <modus-wc-menu-item label="Messages" value="messages"></modus-wc-menu-item>
</modus-wc-menu>
<modus-wc-menu slot="footer">
  <modus-wc-menu-item label="Settings" custom-class="panel-section">
    <modus-wc-icon slot="start-icon" name="settings"></modus-wc-icon>
  </modus-wc-menu-item>
</modus-wc-menu>`;
                    }
                },
            });
            customElements.define('panel-shadow-host', PanelShadowHost);
        }
        return html `<panel-shadow-host .props=${Object.assign({}, args)}></panel-shadow-host>`;
    },
};