@trimble-oss/moduswebcomponents/collection/components/modus-wc-app-menu/modus-wc-app-menu.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 defaultApps = [
    { appName: 'trimble' },
    { appName: 'siteworks' },
    { appName: 'earthworks' },
    { appName: 'worksmanager' },
    { appName: 'connect' },
    { appName: 'unity' },
    { appName: 'trade_service_live' },
    { appName: 'livecount' },
    { appName: 'supplier_xchange' },
    { appName: 'projectsight' },
    { appName: 'app_xchange' },
    { appName: 'sketchup' },
    { appName: 'pay' },
    { appName: 'copilot' },
    { appName: 'stabicad' },
];
const meta = {
    title: 'Components/App Menu',
    component: 'modus-wc-app-menu',
    args: {
        layout: 'list',
        apps: defaultApps,
    },
    argTypes: {
        'custom-class': {
            control: 'text',
        },
        layout: {
            control: { type: 'select' },
            options: ['list', 'grid'],
        },
        apps: {
            control: 'object',
        },
        draggedItemPos: {
            table: { disable: true },
        },
        grabbedItemPos: {
            table: { disable: true },
        },
        isEditMode: {
            table: { disable: true },
        },
    },
    decorators: [withActions],
    parameters: {
        actions: {
            handles: ['layoutChange', 'itemsOrderChange', 'itemClick'],
        },
        docs: {
            description: {
                component: `
A customizable app menu component that displays application links in list or grid layout.
\nThe component uses the modus-wc-panel component for layout , supports dual viewing (List and Grid) modes and allows reordering via drag-and-drop and keyboard in edit mode.
        `,
            },
        },
    },
};
export default meta;
const getSourceCode = (args) => {
    const appsCode = `const apps = ${JSON.stringify(args.apps, null, 2)};`;
    return `<modus-wc-app-menu></modus-wc-app-menu>

<script>
  ${appsCode}

  const element = document.querySelector('modus-wc-app-menu');
  element.apps = apps;${args.layout ? `\n  element.layout = '${args.layout}';` : ''}

  element.addEventListener('layoutChange', (event) => {
    console.log('Layout changed:', event.detail);
  });
  element.addEventListener('itemsOrderChange', (event) => {
    console.log('Items order changed:', event.detail);
  });
  element.addEventListener('itemClick', (event) => {
    console.log('Item clicked:', event.detail);
  });
</script>
`;
};
const Template = {
    parameters: {
        docs: {
            source: {
                transform: (_src, { args }) => getSourceCode(args),
            },
        },
    },
    render: (args) => {
        // prettier-ignore
        return html `
      <div style="min-height: 400px;">
        <modus-wc-app-menu
          custom-class=${ifDefined(args['custom-class'])}
          layout=${ifDefined(args.layout)}
          .apps=${args.apps}
        ></modus-wc-app-menu>
      </div>
    `;
    },
};
export const Default = Object.assign(Object.assign({}, Template), { parameters: {
        docs: {
            description: {
                story: 'App menu displayed in list layout.',
            },
            source: {
                transform: (_src, { args }) => getSourceCode(args),
            },
        },
    } });
export const GridLayout = Object.assign(Object.assign({}, Template), { args: {
        layout: 'grid',
    }, parameters: {
        docs: {
            description: {
                story: 'App menu in grid layout showing all app emblems.',
            },
            source: {
                transform: (_src, { args }) => getSourceCode(args),
            },
        },
    } });