@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/sidebarfooter/MSidebarFooter.vue

@@ -0,0 +1,201 @@
+<template>
+  <footer
+    :class="{
+      'mc-sidebar__footer': true,
+      'mc-sidebar__footer--expanded': expanded,
+      'mc-sidebar__footer--collapsed': !expanded,
+    }"
+  >
+    <MDivider />
+    <div class="mc-sidebar__footer-container">
+      <component
+        v-if="avatar || title || subtitle"
+        :is="isMobile ? 'div' : 'button'"
+        class="mc-sidebar__footer-profile mc-sidebar__footer-trigger"
+        v-bind="desktopTriggerAttrs"
+      >
+        <img
+          v-if="avatar"
+          class="mc-sidebar__footer-avatar"
+          :src="avatar"
+          :alt="title"
+          loading="lazy"
+        />
+        <div v-if="title || subtitle" class="mc-sidebar__footer-content">
+          <p v-if="title" class="mc-sidebar__footer-title">
+            {{ title }}
+          </p>
+          <p v-if="subtitle" class="mc-sidebar__footer-subtitle">
+            {{ subtitle }}
+          </p>
+        </div>
+
+        <MSidebarFooterMenu
+          v-if="!isMobile"
+          ref="listbox"
+          :expanded="!!expanded"
+          :logOutLabel="logOutLabel"
+          :onListboxKeydown="onListboxKeydown"
+          :hideFloatingItem="hideFloatingItem"
+          @log-out="emit('log-out')"
+        >
+          <slot />
+        </MSidebarFooterMenu>
+      </component>
+
+      <MIconButton
+        v-if="expendable"
+        class="mc-sidebar__footer-expand"
+        ghost
+        aria-label="Expand"
+        :aria-expanded="expanded"
+        @click="toggleSidebar"
+      >
+        <template #icon>
+          <SidebarExpand24 />
+        </template>
+      </MIconButton>
+
+      <button
+        v-if="isMobile"
+        ref="trigger"
+        class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile"
+        aria-label="Profile menu"
+        :aria-expanded="floatingItemIsDisplayed"
+        @click="showFloatingItem"
+      >
+        <component
+          :is="floatingItemIsDisplayed ? ChevronUp24 : ChevronDown24"
+        />
+
+        <MSidebarFooterMenu
+          v-if="isMobile"
+          ref="listbox"
+          :expanded="!!expanded"
+          :logOutLabel="logOutLabel"
+          :onListboxKeydown="onListboxKeydown"
+          :hideFloatingItem="hideFloatingItem"
+          @log-out="emit('log-out')"
+        >
+          <slot />
+        </MSidebarFooterMenu>
+      </button>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, provide, useTemplateRef, type VNode } from 'vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import MDivider from '../divider/MDivider.vue';
+import MSidebarFooterMenu from './_MSidebarFooterMenu.vue';
+import {
+  SidebarExpand24,
+  ChevronDown24,
+  ChevronUp24,
+} from '@mozaic-ds/icons-vue';
+import {
+  EXPANDED_SIDEBAR_KEY,
+  SUB_ITEM_KEY,
+  TOGGLE_SIDEBAR_KEY,
+} from '../sidebar/MSidebar.const';
+import { useFloatingItem } from '../sidebar/use-floating-item.composable';
+import { useIsMobile } from '@/utils/use-is-mobile.composable';
+/**
+ * SidebarFooter is a component that renders the footer of a sidebar. It can display a user profile with an optional avatar, title, subtitle, and link, and includes a button to expand or collapse the sidebar.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * The main text or name displayed in the sidebar footer profile.
+     */
+    title?: string;
+    /**
+     * Secondary text or description displayed under the title in the footer.
+     */
+    subtitle?: string;
+    /**
+     * URL of the avatar image displayed in the footer profile.
+     */
+    avatar?: string;
+    /**
+     * if `true`, hides the sidebar expand/collapse button.
+     */
+    expendable?: boolean;
+    /**
+     * Text to display for the log out button.
+     */
+    logOutLabel?: string;
+  }>(),
+  {
+    logOutLabel: 'Log out',
+    expendable: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Contains one or more MSidebarNavItem components used to render the profile items.
+   */
+  default: VNode[];
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits when the user clicks the log out button in the footer menu.
+   */
+  (on: 'log-out'): void;
+}>();
+
+provide(SUB_ITEM_KEY, true);
+
+const toggleSidebar = inject(TOGGLE_SIDEBAR_KEY);
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+
+const trigger = useTemplateRef('trigger');
+const listbox = useTemplateRef('listbox');
+
+const { isMobile } = useIsMobile();
+
+const listboxContainer = computed(
+  () => (listbox.value?.container as HTMLElement | null) ?? null,
+);
+
+const {
+  floatingItemIsDisplayed,
+  hideFloatingItem,
+  showFloatingItem,
+  onTriggerKeydown,
+  onListboxKeydown,
+} = useFloatingItem(trigger, listboxContainer, {
+  position: 'top',
+});
+
+const desktopTriggerAttrs = computed(() => {
+  if (isMobile.value) return {};
+
+  const baseAttrs = {
+    ref: 'trigger',
+    ['aria-expanded']: floatingItemIsDisplayed.value,
+  };
+
+  return expanded?.value
+    ? {
+        ...baseAttrs,
+        onClick: showFloatingItem,
+      }
+    : {
+        ...baseAttrs,
+        onMouseenter: showFloatingItem,
+        onFocus: showFloatingItem,
+        onKeydown: onTriggerKeydown,
+        onMouseleave: hideFloatingItem,
+        onBlur: hideFloatingItem,
+      };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/button';
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarfooter/README.md

@@ -0,0 +1,52 @@
+# _MSidebarFooterMenu
+
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `expanded*` | - | `boolean` | - |
+| `logOutLabel*` | - | `string` | - |
+| `onListboxKeydown*` | - | `(event: KeyboardEvent) => void` | - |
+| `hideFloatingItem*` | - | `() => void` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `log-out` | - | `[]` |
+
+## Dependencies
+
+### Depends on
+
+- [MDivider](../divider)
+- [MSidebarNavItem](../sidebarnavitem)
+
+### Graph
+
+```mermaid
+graph TD;
+  _MSidebarFooterMenu --> MDivider
+  _MSidebarFooterMenu --> MSidebarNavItem
+style _MSidebarFooterMenu fill:#008240,stroke:#333,stroke-width:4px
+```
+
+### Used By
+
+- [MSidebarFooter]()
+
+### Graph
+
+```mermaid
+graph TD;
+  MSidebarFooter --> _MSidebarFooterMenu
+style _MSidebarFooterMenu fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/sidebarfooter/_MSidebarFooterMenu.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    ref="container"
+    id="listbox-footer"
+    tabindex="0"
+    role="menu"
+    :class="{
+      'mc-sidebar__floating-item mc-sidebar__floating-item--hidden': true,
+      'mc-sidebar__floating-item--expanded': expanded,
+    }"
+    v-bind="
+      expanded
+        ? {}
+        : {
+            onKeydown: onListboxKeydown,
+            onMouseleave: hideFloatingItem,
+            onBlur: hideFloatingItem,
+          }
+    "
+  >
+    <div class="mc-sidebar__footer-menu">
+      <ul class="mc-sidebar__list">
+        <slot name="default" />
+      </ul>
+
+      <MDivider class="mc-sidebar__footer-menu-divider" />
+
+      <MSidebarNavItem
+        tag="div"
+        :label="logOutLabel"
+        :icon="LogOut24"
+        @click="emit('log-out')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import MDivider from '../divider/MDivider.vue';
+import MSidebarNavItem from '../sidebarnavitem/MSidebarNavItem.vue';
+import { LogOut24 } from '@mozaic-ds/icons-vue';
+
+defineProps<{
+  expanded: boolean;
+  logOutLabel: string;
+  onListboxKeydown: (event: KeyboardEvent) => void;
+  hideFloatingItem: () => void;
+}>();
+
+const emit = defineEmits<{
+  (on: 'log-out'): void;
+}>();
+
+const container = useTemplateRef('container');
+
+defineExpose({
+  container,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarheader/MSidebarHeader.vue

@@ -0,0 +1,36 @@
+<template>
+  <header
+    :class="{
+      'mc-sidebar__header': true,
+      'mc-sidebar__header--expanded': expanded,
+      'mc-sidebar__header--collapsed': !expanded,
+    }"
+  >
+    <img class="mc-sidebar__header-logo" :src="props.logo" alt="logo" />
+    <p class="mc-sidebar__header-title">{{ props.title }}</p>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+/**
+ * SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.
+ */
+const props = defineProps<{
+  /**
+   * The main title text displayed in the sidebar header.
+   */
+  title: string;
+  /**
+   * URL of the logo image displayed in the sidebar header.
+   */
+  logo: string;
+}>();
+
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarheader/README.md

@@ -0,0 +1,31 @@
+# MSidebarHeader
+
+SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `title*` | The main title text displayed in the sidebar header. | `string` | - |
+| `logo*` | URL of the logo image displayed in the sidebar header. | `string` | - |
+
+## Dependencies
+
+### Used By
+
+- [DefaultCase.stories](../sidebar/stories)
+- [WithExpandOnly.stories](../sidebar/stories)
+- [WithProfileInfoOnly.stories](../sidebar/stories)
+- [WithSingleLevel.stories](../sidebar/stories)
+
+### Graph
+
+```mermaid
+graph TD;
+  DefaultCase.stories --> MSidebarHeader
+  WithExpandOnly.stories --> MSidebarHeader
+  WithProfileInfoOnly.stories --> MSidebarHeader
+  WithSingleLevel.stories --> MSidebarHeader
+style MSidebarHeader fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/sidebarnavitem/MSidebarNavItem.spec.ts

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const showFloatingItemMock = vi.fn();
+const hideFloatingItemMock = vi.fn();
+
+vi.mock('../sidebar/use-floating-item.composable', () => ({
+  useFloatingItem: () => ({
+    showFloatingItem: showFloatingItemMock,
+    hideFloatingItem: hideFloatingItemMock,
+  }),
+}));
+
+import MSidebarNavItem from './MSidebarNavItem.vue';
+import { h } from 'vue';
+import { EXPANDED_SIDEBAR_KEY, SUB_ITEM_KEY } from '../sidebar/MSidebar.const';
+
+const DummyIcon = {
+  name: 'DummyIcon',
+  render() {
+    return h('svg', { class: 'dummy-icon' });
+  },
+};
+
+describe('MSidebarNavItem', () => {
+  it('renders label, href and aria-label', () => {
+    const wrapper = mount(MSidebarNavItem, {
+      props: { label: 'Home', href: '/home' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true, [SUB_ITEM_KEY]: false },
+      },
+    });
+
+    const a = wrapper.get('a');
+    expect(a.attributes('href')).toBe('/home');
+    expect(a.attributes('aria-label')).toBe('Home');
+    expect(wrapper.get('.mc-sidebar__text').text()).toBe('Home');
+  });
+
+  it('renders the passed icon component', () => {
+    const wrapper = mount(MSidebarNavItem, {
+      props: { label: 'Item', href: '#', icon: DummyIcon },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true, [SUB_ITEM_KEY]: false },
+      },
+    });
+
+    expect(wrapper.find('.mc-sidebar__icon').exists()).toBe(true);
+    expect(wrapper.find('.dummy-icon').exists()).toBe(true);
+  });
+
+  it('uses _blank target and shows ExternalLink24 when external is true', () => {
+    const wrapper = mount(MSidebarNavItem, {
+      props: { label: 'Ext', href: '/ext', external: true },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true, [SUB_ITEM_KEY]: false },
+      },
+    });
+
+    const a = wrapper.get('a');
+    expect(a.attributes('target')).toBe('_blank');
+  });
+
+  it('shows Lock24 and locked class when locked is true', () => {
+    const wrapper = mount(MSidebarNavItem, {
+      props: { label: 'Locked', href: '/locked', locked: true },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true, [SUB_ITEM_KEY]: false },
+      },
+    });
+
+    const a = wrapper.get('a');
+    expect(a.classes()).toContain('mc-sidebar__link--locked');
+  });
+
+  it('applies selected class when active is true', () => {
+    const wrapper = mount(MSidebarNavItem, {
+      props: { label: 'Active', href: '/active', active: true },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: true, [SUB_ITEM_KEY]: false },
+      },
+    });
+
+    const a = wrapper.get('a');
+    expect(a.classes()).toContain('mc-sidebar__link--selected');
+  });
+
+  describe('Component events', () => {
+    let wrapper: ReturnType<typeof mount>;
+
+    beforeEach(() => {
+      showFloatingItemMock.mockClear();
+      hideFloatingItemMock.mockClear();
+
+      wrapper = mount(MSidebarNavItem, {
+        props: { label: 'Item label', href: '#' },
+        global: {
+          provide: {
+            [EXPANDED_SIDEBAR_KEY]: true,
+            [SUB_ITEM_KEY]: false,
+          },
+        },
+      });
+    });
+
+    it('calls showFloatingItem on mouseenter and focus', async () => {
+      const anchor = wrapper.find('a');
+      await anchor.trigger('mouseenter');
+      await anchor.trigger('focus');
+      expect(showFloatingItemMock).toHaveBeenCalledTimes(2);
+    });
+
+    it('calls hideFloatingItem on mouseleave and blur', async () => {
+      const anchor = wrapper.find('a');
+      await anchor.trigger('mouseleave');
+      await anchor.trigger('blur');
+      expect(hideFloatingItemMock).toHaveBeenCalledTimes(2);
+    });
+
+    it('emits click when anchor is clicked', async () => {
+      const anchor = wrapper.find('a');
+      await anchor.trigger('click');
+      expect(wrapper.emitted()).toHaveProperty('click');
+      expect(wrapper.emitted('click')?.[0]).toHaveLength(1);
+    });
+  });
+});

package/src/components/sidebarnavitem/MSidebarNavItem.vue

@@ -0,0 +1,113 @@
+<template>
+  <component
+    :is="tag || 'li'"
+    :class="{
+      'mc-sidebar__item': true,
+      'mc-sidebar__item--collapsed': !expanded && !isSubItem,
+      'mc-sidebar__item--sub': isSubItem,
+    }"
+  >
+    <component
+      :is="href ? 'a' : 'button'"
+      ref="trigger"
+      :href="href"
+      :target="external ? '_blank' : '_self'"
+      :class="{
+        'mc-sidebar__link': true,
+        'mc-sidebar__link--selected': active,
+        'mc-sidebar__link--locked': locked,
+      }"
+      :aria-label="label"
+      @mouseenter="showFloatingItem"
+      @focus="showFloatingItem"
+      @mouseleave="hideFloatingItem"
+      @blur="hideFloatingItem"
+      @click="emit('click', $event)"
+    >
+      <component :is="icon" class="mc-sidebar__icon" />
+
+      <span class="mc-sidebar__text">{{ label }}</span>
+
+      <component
+        v-if="locked || external"
+        :is="locked ? Lock20 : ExternalLink20"
+      />
+    </component>
+
+    <div
+      v-if="!expanded && !isSubItem"
+      ref="tooltip"
+      class="mc-sidebar__floating-item mc-sidebar__floating-item--tooltip mc-sidebar__floating-item--hidden"
+    >
+      <MTooltip :id="id" :text="label" standalone :pointer="false" />
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { Lock20, ExternalLink20 } from '@mozaic-ds/icons-vue';
+import {
+  inject,
+  useId,
+  useTemplateRef,
+  type Component,
+  type ShallowRef,
+} from 'vue';
+import MTooltip from '../tooltip/MTooltip.vue';
+import { SUB_ITEM_KEY, EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+import { useFloatingItem } from '../sidebar/use-floating-item.composable';
+/**
+ * SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.
+ */
+defineProps<{
+  tag?: string;
+  /**
+   * The text label displayed for the navigation item.
+   */
+  label: string;
+  /**
+   * Optional icon component displayed alongside the label.
+   */
+  icon?: Component;
+  /**
+   * The URL the navigation item links to.
+   */
+  href?: string;
+  /**
+   * Marks the item as locked. Shows a lock icon and prevents interaction.
+   */
+  locked?: boolean;
+  /**
+   * Indicates the link is external. Opens in a new tab and shows an external link icon.
+   */
+  external?: boolean;
+  /**
+   * Marks the item as active, applying the active styling.
+   */
+  active?: boolean;
+}>();
+
+const emit = defineEmits<{ (on: 'click', value: MouseEvent): void }>();
+
+const id = useId();
+
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+const isSubItem = inject(SUB_ITEM_KEY, false);
+
+const trigger = useTemplateRef(
+  'trigger',
+) as unknown as ShallowRef<HTMLElement | null>;
+const tooltip = useTemplateRef('tooltip');
+
+const { hideFloatingItem, showFloatingItem } = useFloatingItem(
+  trigger,
+  tooltip,
+  {
+    allowItemHover: false,
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarnavitem/README.md

@@ -0,0 +1,56 @@
+# MSidebarNavItem
+
+SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `tag` | - | `string` | - |
+| `label*` | The text label displayed for the navigation item. | `string` | - |
+| `icon` | Optional icon component displayed alongside the label. | `Component` | - |
+| `href` | The URL the navigation item links to. | `string` | - |
+| `locked` | Marks the item as locked. Shows a lock icon and prevents interaction. | `boolean` | - |
+| `external` | Indicates the link is external. Opens in a new tab and shows an external link icon. | `boolean` | - |
+| `active` | Marks the item as active, applying the active styling. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `click` | - | `[value: MouseEvent]` |
+
+## Dependencies
+
+### Depends on
+
+- [MTooltip](../tooltip)
+
+### Graph
+
+```mermaid
+graph TD;
+  MSidebarNavItem --> MTooltip
+style MSidebarNavItem fill:#008240,stroke:#333,stroke-width:4px
+```
+
+### Used By
+
+- [DefaultCase.stories](../sidebar/stories)
+- [WithExpandOnly.stories](../sidebar/stories)
+- [WithProfileInfoOnly.stories](../sidebar/stories)
+- [WithSingleLevel.stories](../sidebar/stories)
+- [_MSidebarFooterMenu](../sidebarfooter)
+
+### Graph
+
+```mermaid
+graph TD;
+  DefaultCase.stories --> MSidebarNavItem
+  WithExpandOnly.stories --> MSidebarNavItem
+  WithProfileInfoOnly.stories --> MSidebarNavItem
+  WithSingleLevel.stories --> MSidebarNavItem
+  _MSidebarFooterMenu --> MSidebarNavItem
+style MSidebarNavItem fill:#008240,stroke:#333,stroke-width:4px
+```