@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/sidebar/Sidebar.stories.js

@@ -0,0 +1,333 @@
+import { html } from 'lit';
+import '@mozaic-ds/icons-svelte/components/Admin24/Admin24.svelte';
+import '@mozaic-ds/icons-svelte/components/Coffee24/Coffee24.svelte';
+import '@mozaic-ds/icons-svelte/components/Course24/Course24.svelte';
+import '@mozaic-ds/icons-svelte/components/Release24/Release24.svelte';
+import '@mozaic-ds/icons-svelte/components/Sample24/Sample24.svelte';
+import '@mozaic-ds/icons-svelte/components/Palette24/Palette24.svelte';
+import '@mozaic-ds/icons-svelte/components/Pantone24/Pantone24.svelte';
+import './Sidebar.svelte';
+import '../sidebarexpandableitem/SidebarExpandableItem.svelte';
+import '../sidebarfooter/SidebarFooter.svelte';
+import '../sidebarheader/SidebarHeader.svelte';
+import '../sidebarnavitem/SidebarNavItem.svelte';
+import '../sidebarshortcutitem/SidebarShortcutItem.svelte';
+import '../sidebarshortcuts/SidebarShortcuts.svelte';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Structure/Sidebar',
+    component: 'm-sidebar',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    subcomponents: {
+        'm-sidebar-header': 'm-sidebar-header',
+        'm-sidebar-shortcuts': 'm-sidebar-shortcuts',
+        'm-sidebar-shortcut-item': 'm-sidebar-shortcut-item',
+        'm-sidebar-nav-item': 'm-sidebar-nav-item',
+        'm-sidebar-footer': 'm-sidebar-footer',
+    },
+    tags: ['v2'],
+    argTypes: {},
+    args: {
+        expanded: true,
+    },
+    globals: {
+        backgrounds: { value: 'secondary' },
+    },
+    render: (args) => {
+        return html `
+      <m-sidebar
+        ?expanded="${args.expanded}"
+        @close="${action('close')}"
+        @update:expanded="${action('update:expanded')}"
+        @logout="${action('logout')}"
+      >
+        <m-sidebar-header
+          slot="header"
+          title="Adeo Design System"
+          logo="/logo.svg"
+        ></m-sidebar-header>
+
+        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
+          <m-sidebar-shortcut-item label="Shortcut 01">
+            <coffee-24 slot="icon"></coffee-24>
+          </m-sidebar-shortcut-item>
+
+          <m-sidebar-shortcut-item label="Shortcut 02">
+            <course-24 slot="icon"></course-24>
+          </m-sidebar-shortcut-item>
+        </m-sidebar-shortcuts>
+
+        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
+          <release-24 slot="icon"></release-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-expandable-item
+          slot="nav"
+          menulabel="Sublist menu label"
+          label="Design Tokens"
+          href="#"
+        >
+          <sample-24 slot="icon"></sample-24>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 1"
+            href="#"
+            ?locked="${true}"
+          ></m-sidebar-nav-item>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 2"
+            href="#"
+            ?external="${true}"
+          ></m-sidebar-nav-item>
+        </m-sidebar-expandable-item>
+
+        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
+          <palette-24 slot="icon"></palette-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-nav-item slot="nav" label="Components" href="#">
+          <pantone-24 slot="icon"></pantone-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-footer
+          slot="footer"
+          title="Dieter Rams"
+          subtitle="Industrial designer"
+          avatar="/images/Avatar.png"
+          @logout="${action('logout')}"
+        >
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 03" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 04" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+        </m-sidebar-footer>
+      </m-sidebar>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const ExpandFeatureOnly = {
+    render: (args) => {
+        return html `
+      <m-sidebar
+        ?expanded="${args.expanded}"
+        @update:expanded="${action('update:expanded')}"
+        @close="${action('close')}"
+        @logout="${action('logout')}"
+      >
+        <m-sidebar-header
+          slot="header"
+          title="Adeo Design System"
+          logo="/logo.svg"
+        ></m-sidebar-header>
+
+        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
+          <m-sidebar-shortcut-item label="Shortcut 01">
+            <coffee-24 slot="icon"></coffee-24>
+          </m-sidebar-shortcut-item>
+
+          <m-sidebar-shortcut-item label="Shortcut 02">
+            <course-24 slot="icon"></course-24>
+          </m-sidebar-shortcut-item>
+        </m-sidebar-shortcuts>
+
+        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
+          <release-24 slot="icon"></release-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-expandable-item
+          slot="nav"
+          menulabel="Sublist menu label"
+          label="Design Tokens"
+          href="#"
+        >
+          <sample-24 slot="icon"></sample-24>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 1"
+            href="#"
+            ?locked="${true}"
+          ></m-sidebar-nav-item>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 2"
+            href="#"
+            ?external="${true}"
+          ></m-sidebar-nav-item>
+        </m-sidebar-expandable-item>
+
+        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
+          <palette-24 slot="icon"></palette-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-nav-item slot="nav" label="Components" href="#">
+          <pantone-24 slot="icon"></pantone-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-footer slot="footer"></m-sidebar-footer>
+      </m-sidebar>
+    `;
+    },
+};
+export const ProfileInfoOnly = {
+    render: (args) => {
+        return html `
+      <m-sidebar
+        ?expanded="${args.expanded}"
+        @update:expanded="${action('update:expanded')}"
+        @close="${action('close')}"
+        @logout="${action('logout')}"
+      >
+        <m-sidebar-header
+          slot="header"
+          title="Adeo Design System"
+          logo="/logo.svg"
+        ></m-sidebar-header>
+
+        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
+          <m-sidebar-shortcut-item label="Shortcut 01">
+            <coffee-24 slot="icon"></coffee-24>
+          </m-sidebar-shortcut-item>
+
+          <m-sidebar-shortcut-item label="Shortcut 02">
+            <course-24 slot="icon"></course-24>
+          </m-sidebar-shortcut-item>
+        </m-sidebar-shortcuts>
+
+        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
+          <release-24 slot="icon"></release-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-expandable-item
+          slot="nav"
+          menulabel="Sublist menu label"
+          label="Design Tokens"
+          href="#"
+        >
+          <sample-24 slot="icon"></sample-24>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 1"
+            href="#"
+            ?locked="${true}"
+          ></m-sidebar-nav-item>
+
+          <m-sidebar-nav-item
+            label="Subsection menu label 2"
+            href="#"
+            ?external="${true}"
+          ></m-sidebar-nav-item>
+        </m-sidebar-expandable-item>
+
+        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
+          <palette-24 slot="icon"></palette-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-nav-item slot="nav" label="Components" href="#">
+          <pantone-24 slot="icon"></pantone-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-footer
+          slot="footer"
+          ?expandable=${false}
+          title="Dieter Rams"
+          subtitle="Industrial designer"
+          avatar="/images/Avatar.png"
+        >
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 03" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 04" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+        </m-sidebar-footer>
+      </m-sidebar>
+    `;
+    },
+};
+export const SingleLevelOnly = {
+    render: (args) => {
+        return html `
+      <m-sidebar
+        ?expanded="${args.expanded}"
+        @update:expanded="${action('update:expanded')}"
+        @close="${action('close')}"
+        @logout="${action('logout')}"
+        <m-sidebar-header
+          slot="header"
+          title="Adeo Design System"
+          logo="/logo.svg"
+        ></m-sidebar-header>
+
+        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
+          <m-sidebar-shortcut-item label="Shortcut 01">
+            <coffee-24 slot="icon"></coffee-24>
+          </m-sidebar-shortcut-item>
+
+          <m-sidebar-shortcut-item label="Shortcut 02">
+            <course-24 slot="icon"></course-24>
+          </m-sidebar-shortcut-item>
+        </m-sidebar-shortcuts>
+
+        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
+          <release-24 slot="icon"></release-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
+          <palette-24 slot="icon"></palette-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-nav-item slot="nav" label="Components" href="#">
+          <pantone-24 slot="icon"></pantone-24>
+        </m-sidebar-nav-item>
+
+        <m-sidebar-footer
+          slot="footer"
+          title="Dieter Rams"
+          subtitle="Industrial designer"
+          avatar="/images/Avatar.png"
+        >
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 01" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 03" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+
+          <m-sidebar-nav-item label="Action 04" href="#">
+            <admin-24 slot="icon"></admin-24>
+          </m-sidebar-nav-item>
+        </m-sidebar-footer>
+      </m-sidebar>
+    `;
+    },
+};