@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.spec.ts

@@ -0,0 +1,151 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ref, nextTick } from 'vue';
+
+const onTriggerKeydown = vi.fn();
+const onListboxKeydown = vi.fn();
+const hideFloatingItem = vi.fn();
+
+vi.mock('../sidebar/use-floating-item.composable', () => {
+  return {
+    useFloatingItem: () => {
+      const floatingItemIsDisplayed = ref(false);
+      return {
+        floatingItemIsDisplayed,
+        showFloatingItem: () => (floatingItemIsDisplayed.value = true),
+        hideFloatingItem: () => {
+          floatingItemIsDisplayed.value = false;
+          hideFloatingItem();
+        },
+        onTriggerKeydown,
+        onListboxKeydown,
+      };
+    },
+  };
+});
+
+import MSidebarExpandableItem from './MSidebarExpandableItem.vue';
+import { EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+
+describe('MSidebarExpandableItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders expanded details when expanded is true', async () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'My Label', menuLabel: 'Menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true },
+      },
+      slots: {
+        default: '<li>Child item</li>',
+      },
+    });
+
+    expect(wrapper.find('li.mc-sidebar__item').exists()).toBe(true);
+    expect(
+      wrapper.find('summary.mc-sidebar__link').attributes('aria-label'),
+    ).toBe('My Label');
+    expect(wrapper.text()).toContain('My Label');
+    expect(wrapper.find('ul.mc-sidebar__sublist').html()).toContain(
+      'Child item',
+    );
+  });
+
+  it('renders trigger and toggles listbox when not expanded', async () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'My Label', menuLabel: 'Overlay Menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+      slots: {
+        default: '<li>Overlay item</li>',
+      },
+    });
+
+    const button = wrapper.find('button.mc-sidebar__trigger');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('aria-haspopup')).toBe('listbox');
+    expect(button.attributes('aria-expanded')).toBe('false');
+
+    await button.trigger('mouseenter');
+    await nextTick();
+    expect(button.attributes('aria-expanded')).toBe('true');
+
+    const floating = wrapper.find('.mc-sidebar__floating-item');
+    expect(floating!.text()).toContain('Overlay Menu');
+    expect(floating!.text()).toContain('Overlay item');
+
+    await button.trigger('mouseleave');
+    await nextTick();
+    expect(button.attributes('aria-expanded')).toBe('false');
+    expect(floating.classes()).toContain('mc-sidebar__floating-item--hidden');
+  });
+
+  it('handles listbox trigger with keyboard accessibility', async () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'My Label', menuLabel: 'Overlay Menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+      slots: {
+        default: `
+          <li>Overlay item</li>
+          <li>Overlay item 2</li>
+        `,
+      },
+    });
+
+    const button = wrapper.find('button.mc-sidebar__trigger');
+    expect(button.exists()).toBe(true);
+
+    await button.trigger('focus');
+    await nextTick();
+    expect(button.attributes('aria-expanded')).toBe('true');
+
+    await button.trigger('keydown', { key: 'ArrowDown' });
+    expect(onTriggerKeydown).toHaveBeenCalled();
+
+    const listboxEl = wrapper.find('.mc-sidebar__floating-item');
+
+    await listboxEl.trigger('keydown', { key: 'Escape' });
+
+    await button.trigger('blur');
+    await nextTick();
+    expect(button.attributes('aria-expanded')).toBe('false');
+  });
+
+  it('calls onListboxKeydown when keydown is emitted on the listbox', async () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'Item', menuLabel: 'Menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+    });
+
+    const listbox = wrapper.find('.mc-sidebar__floating-item');
+    expect(listbox.exists()).toBe(true);
+
+    await listbox.trigger('keydown');
+    expect(onListboxKeydown).toHaveBeenCalled();
+  });
+
+  it('calls hideFloatingItem on mouseleave and blur on the listbox', async () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'Item', menuLabel: 'Menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+    });
+
+    const listbox = wrapper.find('.mc-sidebar__floating-item');
+    expect(listbox.exists()).toBe(true);
+
+    await listbox.trigger('mouseleave');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(1);
+
+    await listbox.trigger('blur');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue

@@ -0,0 +1,113 @@
+<template>
+  <li v-if="expanded" class="mc-sidebar__item">
+    <details class="mc-sidebar__link-expand" open>
+      <summary class="mc-sidebar__link" :aria-label="props.label">
+        <component
+          v-if="props.icon"
+          :is="props.icon"
+          class="mc-sidebar__icon"
+        />
+        <span class="mc-sidebar__text">{{ props.label }}</span>
+        <ChevronDown20 />
+      </summary>
+      <ul class="mc-sidebar__sublist">
+        <slot name="default" />
+      </ul>
+    </details>
+  </li>
+
+  <div v-else class="mc-sidebar__item">
+    <button
+      ref="trigger"
+      class="mc-sidebar__trigger mc-sidebar__link"
+      :id="id"
+      aria-haspopup="listbox"
+      :aria-expanded="floatingItemIsDisplayed"
+      :aria-controls="`listbox-${id}`"
+      @mouseenter="showFloatingItem"
+      @focus="showFloatingItem"
+      @keydown="onTriggerKeydown"
+      @mouseleave="hideFloatingItem"
+      @blur="hideFloatingItem"
+    >
+      <component v-if="props.icon" :is="props.icon" class="mc-sidebar__icon" />
+    </button>
+
+    <div
+      class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden"
+      ref="listbox"
+      :id="`listbox-${id}`"
+      tabindex="0"
+      role="menu"
+      @keydown="onListboxKeydown"
+      @mouseleave="hideFloatingItem"
+      @blur="hideFloatingItem"
+    >
+      <div class="mc-sidebar__listbox">
+        <h3 class="mc-sidebar__listbox-title">{{ props.menuLabel }}</h3>
+        <ul class="mc-sidebar__list">
+          <slot name="default" />
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  inject,
+  provide,
+  useId,
+  useTemplateRef,
+  type Component,
+  type VNode,
+} from 'vue';
+import { ChevronDown20 } from '@mozaic-ds/icons-vue';
+import { useFloatingItem } from '../sidebar/use-floating-item.composable';
+import { SUB_ITEM_KEY, EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+/**
+ * SidebarExpandableItem is a component that renders a sidebar item which can either expand to show a nested submenu or display a floating menu when the sidebar is collapsed. It supports optional icons, keyboard navigation, and accessibility attributes, and allows for custom submenu items via slots.
+ */
+const props = defineProps<{
+  /**
+   * The text displayed for the sidebar item in its expanded state.
+   */
+  label: string;
+  /**
+   * The title shown at the top of the floating menu when the sidebar is collapsed.
+   */
+  menuLabel: string;
+  /**
+   * A Vue component used to display an icon alongside the sidebar item.
+   */
+  icon?: Component;
+}>();
+
+defineSlots<{
+  /**
+   * Contains one or more MSidebarNavItem components used to render the submenu items.
+   */
+  default: VNode[];
+}>();
+
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+
+const id = useId();
+
+const trigger = useTemplateRef('trigger');
+const listbox = useTemplateRef('listbox');
+
+const {
+  floatingItemIsDisplayed,
+  hideFloatingItem,
+  showFloatingItem,
+  onTriggerKeydown,
+  onListboxKeydown,
+} = useFloatingItem(trigger, listbox);
+
+provide(SUB_ITEM_KEY, true);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarexpandableitem/README.md

@@ -0,0 +1,36 @@
+# MSidebarExpandableItem
+
+SidebarExpandableItem is a component that renders a sidebar item which can either expand to show a nested submenu or display a floating menu when the sidebar is collapsed. It supports optional icons, keyboard navigation, and accessibility attributes, and allows for custom submenu items via slots.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | The text displayed for the sidebar item in its expanded state. | `string` | - |
+| `menuLabel*` | The title shown at the top of the floating menu when the sidebar is collapsed. | `string` | - |
+| `icon` | A Vue component used to display an icon alongside the sidebar item. | `Component` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Contains one or more MSidebarNavItem components used to render the submenu items. |
+
+## Dependencies
+
+### Used By
+
+- [DefaultCase.stories](../sidebar/stories)
+- [WithExpandOnly.stories](../sidebar/stories)
+- [WithProfileInfoOnly.stories](../sidebar/stories)
+
+### Graph
+
+```mermaid
+graph TD;
+  DefaultCase.stories --> MSidebarExpandableItem
+  WithExpandOnly.stories --> MSidebarExpandableItem
+  WithProfileInfoOnly.stories --> MSidebarExpandableItem
+style MSidebarExpandableItem fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/sidebarfooter/MSidebarFooter.spec.ts

@@ -0,0 +1,276 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MSidebarFooter from './MSidebarFooter.vue';
+import {
+  TOGGLE_SIDEBAR_KEY,
+  EXPANDED_SIDEBAR_KEY,
+} from '../sidebar/MSidebar.const';
+import { nextTick, ref } from 'vue';
+
+const onTriggerKeydown = vi.fn();
+const onListboxKeydown = vi.fn();
+const hideFloatingItem = vi.fn();
+
+vi.mock('../sidebar/use-floating-item.composable', () => {
+  return {
+    useFloatingItem: () => {
+      const floatingItemIsDisplayed = ref(false);
+      return {
+        floatingItemIsDisplayed,
+        showFloatingItem: () => (floatingItemIsDisplayed.value = true),
+        hideFloatingItem: () => {
+          floatingItemIsDisplayed.value = false;
+          hideFloatingItem();
+        },
+        onTriggerKeydown,
+        onListboxKeydown,
+      };
+    },
+  };
+});
+
+vi.mock('../../utils/use-is-mobile.composable.ts', () => {
+  return {
+    useIsMobile: () => {
+      return {
+        isMobile: false,
+      };
+    },
+  };
+});
+
+describe('MSidebarFooter', () => {
+  const toggleSidebar = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not render profile when no img/title/subtitle provided', () => {
+    const wrapper = mount(MSidebarFooter, {
+      global: {
+        provide: {
+          [TOGGLE_SIDEBAR_KEY]: vi.fn(),
+          [EXPANDED_SIDEBAR_KEY]: false,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-sidebar__footer-profile').exists()).toBe(false);
+    expect(wrapper.find('button').exists()).toBe(true);
+  });
+
+  it('renders img, title and subtitle when provided', () => {
+    const props = {
+      avatar: '/avatar.png',
+      title: 'John Doe',
+      subtitle: 'Designer',
+      href: '/profile',
+    };
+    const wrapper = mount(MSidebarFooter, {
+      props,
+      global: {
+        provide: {
+          [TOGGLE_SIDEBAR_KEY]: vi.fn(),
+          [EXPANDED_SIDEBAR_KEY]: true,
+        },
+      },
+    });
+
+    const profile = wrapper.find('.mc-sidebar__footer-profile');
+    expect(profile.exists()).toBe(true);
+
+    const img = wrapper.find('.mc-sidebar__footer-avatar');
+    expect(img.exists()).toBe(true);
+    expect(img.attributes('src')).toBe('/avatar.png');
+    expect(img.attributes('alt')).toBe('John Doe');
+
+    expect(wrapper.find('.mc-sidebar__footer-title').text()).toBe('John Doe');
+    expect(wrapper.find('.mc-sidebar__footer-subtitle').text()).toBe(
+      'Designer',
+    );
+  });
+
+  it('hides expand button when expandable prop is false', () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { expendable: false },
+      global: {
+        provide: {
+          [TOGGLE_SIDEBAR_KEY]: vi.fn(),
+          [EXPANDED_SIDEBAR_KEY]: false,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-sidebar__footer-expand').exists()).toBe(false);
+  });
+
+  it('binds aria-expanded and calls toggle function when clicked', async () => {
+    const toggle = vi.fn();
+    const wrapper = mount(MSidebarFooter, {
+      global: {
+        provide: {
+          [TOGGLE_SIDEBAR_KEY]: toggle,
+          [EXPANDED_SIDEBAR_KEY]: true,
+        },
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('aria-expanded')).toBe('true');
+
+    await button.trigger('click');
+    expect(toggle).toHaveBeenCalled();
+  });
+
+  it('emits "log-out" when log out button is clicked', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: {
+        title: 'John Doe',
+        logOutLabel: 'Log out',
+      },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: true,
+          [TOGGLE_SIDEBAR_KEY]: vi.fn(),
+        },
+        stubs: {
+          MDivider: true,
+          MButton: true,
+          MSidebarNavItem: {
+            template: `
+              <div data-test="logout" @click="$emit('click')">
+                Log out
+              </div>
+            `,
+          },
+        },
+      },
+    });
+
+    const logoutItem = wrapper.find('[data-test="logout"]');
+
+    expect(logoutItem.exists()).toBe(true);
+
+    await logoutItem.trigger('click');
+
+    expect(wrapper.emitted('log-out')).toBeTruthy();
+  });
+
+  it('shows floating item on mouseenter when collapsed', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const trigger = wrapper.find('button.mc-sidebar__footer-trigger');
+    expect(trigger.exists()).toBe(true);
+    expect(trigger.attributes('aria-expanded')).toBe('false');
+
+    await trigger.trigger('mouseenter');
+    await nextTick();
+
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+  });
+
+  it('hides floating item on mouseleave and blur when collapsed', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const trigger = wrapper.find('button.mc-sidebar__footer-trigger');
+
+    await trigger.trigger('mouseenter');
+    await nextTick();
+
+    await trigger.trigger('mouseleave');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(1);
+
+    await trigger.trigger('blur');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(2);
+  });
+
+  it('calls onTriggerKeydown on keydown when collapsed', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const trigger = wrapper.find('button.mc-sidebar__footer-trigger');
+
+    await trigger.trigger('keydown', { key: 'ArrowDown' });
+    expect(onTriggerKeydown).toHaveBeenCalled();
+  });
+
+  it('calls onListboxKeydown when keydown is emitted on the listbox', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const listbox = wrapper.find('#listbox-footer');
+    expect(listbox.exists()).toBe(true);
+
+    await listbox.trigger('keydown');
+    expect(onListboxKeydown).toHaveBeenCalled();
+  });
+
+  it('calls hideFloatingItem on mouseleave and blur on the listbox', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const listbox = wrapper.find('#listbox-footer');
+
+    await listbox.trigger('mouseleave');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(1);
+
+    await listbox.trigger('blur');
+    expect(hideFloatingItem).toHaveBeenCalledTimes(2);
+  });
+
+  it('calls toggleSidebar when expand button is clicked', async () => {
+    const wrapper = mount(MSidebarFooter, {
+      props: { title: 'John Doe' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: false,
+          [TOGGLE_SIDEBAR_KEY]: toggleSidebar,
+        },
+      },
+    });
+
+    const expandButton = wrapper.find('.mc-sidebar__footer-expand');
+    expect(expandButton.exists()).toBe(true);
+
+    await expandButton.trigger('click');
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
+});