@trimble-oss/moduswebcomponents
Version:
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
173 lines (172 loc) • 4.85 kB
JavaScript
import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const meta = {
title: 'Components/Menu',
component: 'modus-wc-menu',
args: {
orientation: 'vertical',
size: 'md',
},
argTypes: {
orientation: {
control: { type: 'select' },
options: ['horizontal', 'vertical'],
},
size: {
control: { type: 'select' },
options: ['xs', 'sm', 'md', 'lg'],
},
},
decorators: [withActions],
parameters: {
actions: {
handles: ['menuFocusout'],
},
},
};
export default meta;
export const Default = {
render: (args) => {
// prettier-ignore
return html `
<modus-wc-menu
aria-label="Menu"
?bordered=${args.bordered}
custom-class=${ifDefined(args['custom-class'])}
orientation=${ifDefined(args.orientation)}
size=${ifDefined(args.size)}
>
<modus-wc-menu-item
label="Small"
value="1"
size="sm"
></modus-wc-menu-item>
<modus-wc-menu-item label="Medium" value="2"></modus-wc-menu-item>
<modus-wc-menu-item
label="Large"
value="3"
size="lg"
></modus-wc-menu-item>
<modus-wc-menu-item
label="Bordered"
value="3"
bordered="true"
></modus-wc-menu-item>
<modus-wc-menu-item
label="With Sub-label"
value="3"
sub-label="Sub-label"
></modus-wc-menu-item>
<modus-wc-menu-item
label="Selected"
value="3"
selected="true"
></modus-wc-menu-item>
<modus-wc-menu-item
label="With Start Icon"
value="3"
start-icon="info"
></modus-wc-menu-item>
<modus-wc-menu-item
label="Disabled"
value="3"
disabled="true"
></modus-wc-menu-item>
</modus-wc-menu>
`;
},
};
export const CustomMenu = {
render: () => {
// prettier-ignore
return html `
<style>
.menu-width {
width: 400px;
}
.flex-row {
display: flex;
align-items: center;
}
.nested-row {
padding-inline-start: 3rem;
}
.justify-end {
margin-left: auto;
}
.green-square {
height: 18px;
width: 18px;
background-color: green;
}
.red-square {
height: 18px;
width: 18px;
background-color: red;
}
</style>
<modus-wc-menu
aria-label="Custom menu"
custom-class="menu-width"
>
<li>
<div class="flex-row">
<modus-wc-icon decorative="true" name="expand_more"></modus-wc-icon>
<modus-wc-button aria-label="Visible button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Visible icon" name="visibility_on"></modus-wc-icon>
</modus-wc-button>
<div>Parent</div>
<div class="justify-end">
<modus-wc-button aria-label="Actions button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Actions icon" name="more_vertical"></modus-wc-icon>
</modus-wc-button>
</div>
</div>
</li>
<li>
<div class="flex-row nested-row">
<modus-wc-button aria-label="Visible button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Visible icon" name="visibility_on"></modus-wc-icon>
</modus-wc-button>
<div class="green-square"></div>
<div>Child</div>
<div class="justify-end">
<modus-wc-button aria-label="Actions button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Actions icon" name="more_vertical"></modus-wc-icon>
</modus-wc-button>
</div>
</div>
</li>
<li>
<div class="flex-row nested-row">
<modus-wc-button aria-label="Visible button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Invisible icon" name="visibility_off"></modus-wc-icon>
</modus-wc-button>
<div class="red-square"></div>
<div>Child</div>
<div class="justify-end">
<modus-wc-button aria-label="Actions button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Actions icon" name="more_vertical"></modus-wc-icon>
</modus-wc-button>
</div>
</div>
</li>
<li>
<div class="flex-row">
<modus-wc-icon decorative="true" name="chevron_right"></modus-wc-icon>
<modus-wc-button aria-label="Visible button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Visible icon" name="visibility_on"></modus-wc-icon>
</modus-wc-button>
<div>Parent</div>
<div class="justify-end">
<modus-wc-button aria-label="Actions button" size="sm" shape="circle" variant="borderless">
<modus-wc-icon aria-label="Actions icon" name="more_vertical"></modus-wc-icon>
</modus-wc-button>
</div>
</div>
</li>
</modus-wc-menu>
`;
},
};