@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
332 lines (329 loc) • 11.4 kB
JavaScript
import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const textOverrides = {
apps: 'Apps',
help: 'Help',
notifications: 'Notifications',
search: 'Search',
};
const userCard = {
avatarAlt: 'Sonic',
avatarSrc: 'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',
email: 'sonic@trimble.com',
name: 'Sonic the Hedgehog',
};
const visibility = {
ai: true,
apps: true,
help: true,
mainMenu: true,
notifications: true,
search: true,
searchInput: true,
user: true,
};
const meta = {
title: 'Components/Navbar',
component: 'modus-wc-navbar',
args: {
condensed: false,
'search-debounce-ms': 300,
'text-overrides': textOverrides,
'user-card': userCard,
visibility,
},
argTypes: {
'text-overrides': {
description: 'Text replacements for navbar menu items',
table: {
type: {
detail: `
Interface: INavbarTextOverrides
Properties:
- apps (string, optional): Replaces the text for "Apps" in the condensed menu
- help (string, optional): Replaces the text for "Help" in the condensed menu
- notifications (string, optional): Replaces the text for "Notifications" in the condensed menu
- search (string, optional): Replaces the text for "Search" in the condensed menu
`,
},
},
control: {
type: 'object',
},
},
'user-card': {
description: 'User profile card information',
table: {
type: {
detail: `
Interface: IUserCard
Properties:
- avatarAlt (string, optional): The alt value to set on the avatar
- avatarSrc (string, optional): The avatar image source value
- email (string): The email address of the user
- myTrimbleButton (string, optional): Text override for the Access MyTrimble button, allows for translation
- name (string): The name of the user
- signOutButton (string, optional): Text override for the Sign out button, allows for translation
`,
},
},
},
visibility: {
description: 'Controls visibility of individual navbar buttons',
table: {
type: {
detail: `
Interface: INavbarVisibility
Properties:
- ai (boolean, optional): Controls visibility of the AI button
- apps (boolean, optional): Controls visibility of the apps button
- help (boolean, optional): Controls visibility of the help button
- mainMenu (boolean, optional): Controls visibility of the main menu button
- notifications (boolean, optional): Controls visibility of the notifications button
- search (boolean, optional): Controls visibility of the search button
- searchInput (boolean, optional): Controls visibility of the search input
- user (boolean, optional): Controls visibility of the user button
`,
},
},
},
},
decorators: [withActions],
parameters: {
actions: {
handles: [
'aiClick',
'appsClick',
'appsMenuOpenChange',
'condensedMenuOpenChange',
'helpClick',
'mainMenuOpenChange',
'myTrimbleClick',
'notificationsMenuOpenChange',
'notificationsClick',
'searchChange',
'searchClick',
'searchInputOpenChange',
'signOutClick',
'trimbleLogoClick',
'userMenuOpenChange',
],
},
layout: 'padded',
},
};
export default meta;
const Template = {
render: (args) => {
// prettier-ignore
return html `
<style>
div[id^='story--components-navbar--default'] {
border: 1px dashed black;
height: 360px;
overflow: hidden;
}
[slot=main-menu] {
background-color: #0063a3;
color: white;
height: 400px;
}
</style>
<modus-wc-navbar
?apps-menu-open=${args['apps-menu-open']}
?condensed=${args.condensed}
?condensed-menu-open=${args['condensed-menu-open']}
custom-class=${ifDefined(args['custom-class'])}
?main-menu-open=${args['main-menu-open']}
?notifications-menu-open=${args['notifications-menu-open']}
search-debounce-ms=${ifDefined(args['search-debounce-ms'])}
?search-input-open=${args['search-input-open']}
.textOverrides=${ifDefined(args['text-overrides'])}
.userCard=${args['user-card']}
?user-menu-open=${args['user-menu-open']}
.visibility=${args.visibility}
>
<div slot="main-menu">Main menu contents</div>
<div slot="notifications">Notification contents</div>
<div slot="apps">App drawer contents</div>
</modus-wc-navbar>
`;
},
};
export const Default = Object.assign({}, Template);
export const CustomMenuAndSlots = {
render: (args) => {
function toggleCustomUserMenu(e) {
var _a;
const customIcon = e.currentTarget;
const menu = (_a = customIcon.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('#custom-user-menu');
menu === null || menu === void 0 ? void 0 : menu.classList.toggle('hidden');
}
return html `
<div id="custom-menu-and-slots">
<style>
#custom-menu-and-slots .modus-wc-navbar {
align-items: center;
display: flex;
gap: 0.2rem;
padding: 0 1rem;
width: 100%;
}
.modus-wc-card-body {
padding: 1rem;
}
#custom-menu-and-slots .modus-wc-navbar-center,
#custom-menu-and-slots .modus-wc-navbar-end,
#custom-menu-and-slots .modus-wc-navbar-start {
align-items: center;
display: flex;
flex: 1;
}
#custom-menu-and-slots .modus-wc-navbar-center {
background: #d9d9d969;
justify-content: center;
}
#custom-menu-and-slots .modus-wc-navbar-end {
background: #d9d9d969;
justify-content: flex-end;
}
#custom-menu-and-slots .modus-wc-navbar-start {
background: #d9d9d969;
justify-content: flex-start;
}
#custom-user-menu {
position: absolute;
right: 10px;
top: 50px;
z-index: 1000;
}
#custom-user-menu.hidden {
display: none;
}
.custom-user-email {
font-size: 0.8rem;
}
.custom-user-icon {
cursor: pointer;
margin-inline-start: 8px;
margin-inline-end: 8px;
position: relative;
top: 3px;
}
.custom-user-menu-header {
border-bottom: 1px solid #e0e0e0;
margin-bottom: 8px;
padding: 8px 16px;
}
.custom-user-menu-title {
font-weight: bold;
}
div[id^='story--components-navbar--custom-menu-and-slots'] {
border: 1px dashed black;
height: 365px;
}
.menu-item {
align-items: center;
cursor: pointer;
display: flex;
padding: 8px;
}
.slot-bg {
align-items: center;
display: flex;
font-weight: 600;
height: 40px;
justify-content: center;
opacity: 0.4;
}
</style>
<script>
/** function to toggle custom user menu */
function toggleCustomUserMenu(e) {
const customIcon = e.currentTarget;
const menu =
customIcon.parentElement?.querySelector('#custom-user-menu');
menu?.classList.toggle('hidden');
}
</script>
<modus-wc-navbar
?apps-menu-open=${args['apps-menu-open']}
?condensed=${args.condensed}
?condensed-menu-open=${args['condensed-menu-open']}
custom-class=${ifDefined(args['custom-class'])}
?main-menu-open=${args['main-menu-open']}
?notifications-menu-open=${args['notifications-menu-open']}
search-debounce-ms=${ifDefined(args['search-debounce-ms'])}
?search-input-open=${args['search-input-open']}
.textOverrides=${ifDefined(args['text-overrides'])}
.userCard=${args['user-card']}
?user-menu-open=${args['user-menu-open']}
.visibility=${{
ai: false,
apps: false,
help: false,
mainMenu: false,
notifications: false,
search: false,
searchInput: false,
user: false,
}}
>
<div slot="main-menu">Main menu contents</div>
<div slot="notifications">Notification contents</div>
<div slot="apps">App drawer contents</div>
<!-- Slots demonstration -->
<div slot="start">
<div class="slot-bg">Left slot</div>
</div>
<div slot="center">
<div class="slot-bg">Center slot</div>
</div>
<div slot="end">
<div class="slot-bg">Right slot</div>
<div class="custom-user-icon" @click=${toggleCustomUserMenu}>
<modus-wc-avatar
alt="Sonic the Hedgehog"
img-src="https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg"
size="xs"
shape="circle"
></modus-wc-avatar>
</div>
<!-- Custom user menu -->
<modus-wc-card id="custom-user-menu" bordered="true">
<div class="custom-user-menu-header">
<div class="custom-user-menu-title">Custom Menu</div>
<div class="custom-user-email">custom.user@example.com</div>
</div>
<div class="menu-item">
<span class="menu-item-icon"
><modus-wc-icon
name="settings_solid"
size="16px"
></modus-wc-icon
></span>
<span class="custom-user-icon">Account Settings</span>
</div>
<div class="menu-item">
<span class="menu-item-icon"
><modus-wc-icon
name="person_solid"
size="16px"
></modus-wc-icon
></span>
<span class="custom-user-icon">Profile</span>
</div>
<div class="menu-item">
<span class="menu-item-icon"
><modus-wc-icon name="sign_out" size="16px"></modus-wc-icon
></span>
<span class="custom-user-icon">Logout</span>
</div>
</modus-wc-card>
</div>
</modus-wc-navbar>
</div>
`;
},
};