@mozaic-ds/web-components 1.5.0 → 1.6.0

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

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, afterAll, beforeAll } from 'vitest';
+import { render, waitFor, fireEvent } from '@testing-library/svelte';
+import Sidebar from './Sidebar.svelte';
+beforeAll(() => {
+    vi.stubGlobal('matchMedia', (query) => ({
+        matches: query.includes('max-width: 780px'),
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+});
+afterAll(() => {
+    vi.unstubAllGlobals();
+});
+describe('Sidebar component', () => {
+    it('renders expanded by default', () => {
+        const { container } = render(Sidebar);
+        const aside = container.querySelector('aside');
+        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+    });
+    it('reflects provided expanded prop and updates when changed', async () => {
+        const { container, rerender } = render(Sidebar, { expanded: false });
+        const aside = container.querySelector('aside');
+        expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        await rerender({ expanded: true });
+        await waitFor(() => {
+            expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+        });
+    });
+    it('toggles on document "toggle" event and calls onexpanded and emits update:expanded', async () => {
+        const onexpanded = vi.fn();
+        const { container } = render(Sidebar, { onexpanded });
+        const aside = container.querySelector('aside');
+        const updateHandler = vi.fn();
+        aside.addEventListener('update:expanded', (e) => {
+            updateHandler(e.detail);
+        });
+        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
+        document.dispatchEvent(new Event('toggle'));
+        await waitFor(() => {
+            expect(onexpanded).toHaveBeenCalled();
+            expect(updateHandler).toHaveBeenCalled();
+            expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        });
+    });
+    it('should call onclose and emit close event on close button click', async () => {
+        const onclose = vi.fn();
+        const { container } = render(Sidebar, { props: { onclose } });
+        const button = container.querySelector('.mc-sidebar__close-button button');
+        expect(button).not.toBeNull();
+        const aside = container.querySelector('aside');
+        const closeEventListener = vi.fn();
+        aside?.addEventListener('close', closeEventListener);
+        await fireEvent.click(button);
+        expect(onclose).toHaveBeenCalled();
+        expect(closeEventListener).toHaveBeenCalled();
+    });
+    it('should set expanded to true on resize when isMobile', async () => {
+        vi.stubGlobal('matchMedia', (query) => ({
+            matches: true, // mobile
+            media: query,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        }));
+        const { container } = render(Sidebar, { props: { expanded: false } });
+        const aside = container.querySelector('aside');
+        expect(aside?.classList.contains('mc-sidebar--collapsed')).toBe(true);
+        window.dispatchEvent(new Event('resize'));
+        await Promise.resolve(); // attendre le $effect
+        expect(aside?.classList.contains('mc-sidebar--expanded')).toBe(true);
+    });
+});

package/dist/components/sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+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';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const ExpandFeatureOnly: Story;
+export declare const ProfileInfoOnly: Story;
+export declare const SingleLevelOnly: Story;
+//# sourceMappingURL=Sidebar.stories.d.ts.map

package/dist/components/sidebar/Sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC;AACrE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,+DAA+D,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uDAAuD,CAAC;AAC/D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6CAA6C,CAAC;AAGrD,QAAA,MAAM,IAAI,EAAE,IAwGX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,iBAAiB,EAAE,KA8D/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoF7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6D7B,CAAC"}

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>
+    `;
+    },
+};