@mozaic-ds/vue 2.19.1 → 2.20.0

package/src/components/pageheaderfeature/MPageHeaderFeature.spec.ts

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { defineComponent } from 'vue';
+import MPageHeaderFeature from './MPageHeaderFeature.vue';
+
+const IconStub = defineComponent({
+  name: 'IconStub',
+  template: '<svg class="icon-stub" />',
+});
+
+describe('MPageHeaderFeature', () => {
+  it('renders label and icon', () => {
+    const wrapper = mount(MPageHeaderFeature, {
+      props: {
+        label: 'Search',
+        icon: IconStub,
+      },
+    });
+
+    expect(wrapper.find('.mc-page-header__feature-item').exists()).toBe(true);
+    expect(wrapper.find('.mc-page-header__feature-item-icon').exists()).toBe(
+      true,
+    );
+    expect(wrapper.text()).toContain('Search');
+  });
+
+  it('emits action when clicked', async () => {
+    const wrapper = mount(MPageHeaderFeature, {
+      props: {
+        label: 'Help',
+        icon: IconStub,
+      },
+    });
+
+    await wrapper.find('.mc-page-header__feature-item').trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('action');
+  });
+});

package/src/components/pageheaderfeature/MPageHeaderFeature.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    type="button"
+    class="mc-page-header__feature-item"
+    @click="emit('action')"
+  >
+    <component :is="props.icon" class="mc-page-header__feature-item-icon" />
+
+    <span>{{ props.label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { type Component } from 'vue';
+
+/**
+ * The Page Header Feature component renders a clickable feature item in the page header action area.
+ */
+const props = defineProps<{
+  /**
+   * Text label displayed for the feature item.
+   */
+  label: string;
+  /**
+   * Icon component displayed next to the feature label.
+   */
+  icon: Component;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits when the feature item is clicked.
+   */
+  (on: 'action'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/page-header';
+</style>

package/src/components/pageheaderfeature/README.md

@@ -0,0 +1,17 @@
+# MPageHeaderFeature
+
+The Page Header Feature component renders a clickable feature item in the page header action area.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Text label displayed for the feature item. | `string` | - |
+| `icon*` | Icon component displayed next to the feature label. | `Component` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `action` | Emits when the feature item is clicked. | [] |

package/src/components/radiogroup/MRadioGroup.stories.ts

@@ -59,3 +59,9 @@ export default meta;
 type Story = StoryObj<typeof MRadioGroup>;
 
 export const Default: Story = {};
+
+export const Inline: Story = {
+  args: {
+    inline: true,
+  },
+};

package/src/components/radiogroup/MRadioGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-field__container" :class="classObjectContainer">
+  <div class="mc-field__content" :class="classObjectContainer">
     <MRadio
       v-for="option in options"
       :id="option.id"
@@ -8,7 +8,6 @@
       :is-invalid="isInvalid"
       :name="name"
       class="mc-field__item"
-      :class="classObjectItem"
       :model-value="modelValue === option.value"
       :disabled="option.disabled"
       @update:model-value="
@@ -56,13 +55,7 @@ const props = defineProps<{
 
 const classObjectContainer = computed(() => {
   return {
-    'mc-field__container--inline': props.inline,
-  };
-});
-
-const classObjectItem = computed(() => {
-  return {
-    'mc-field__container--inline__item': props.inline,
+    'mc-field__content--inline': props.inline,
   };
 });
 

package/src/components/sidebar/MSidebar.const.ts

@@ -4,3 +4,5 @@ export const EXPANDED_SIDEBAR_KEY = Symbol() as InjectionKey<Ref<boolean>>;
 export const TOGGLE_SIDEBAR_KEY = Symbol() as InjectionKey<() => void>;
 export const SUB_ITEM_KEY = Symbol() as InjectionKey<boolean>;
 export const STACKED_SHORTCUTS_KEY = Symbol() as InjectionKey<boolean>;
+export const FOOTER_ITEM_KEY = Symbol() as InjectionKey<boolean>;
+export const HIDE_MENU_KEY = Symbol() as InjectionKey<() => void>;

package/src/components/sidebar/MSidebar.stories.ts

@@ -70,6 +70,17 @@ export const Default: Story = {};
 
 export const ExpandOnly: Story = {
   render: () => ({
+    setup() {
+      const handleClose = action('close');
+      const handleUpdateModelValue = action('update:modelValue');
+      const handleLogOut = action('log-out');
+
+      return {
+        handleClose,
+        handleUpdateModelValue,
+        handleLogOut,
+      };
+    },
     components: { WithExpandOnlyStory },
     template: `
       <WithExpandOnlyStory
@@ -83,6 +94,17 @@ export const ExpandOnly: Story = {
 
 export const ProfileInfoOnly: Story = {
   render: () => ({
+    setup() {
+      const handleClose = action('close');
+      const handleUpdateModelValue = action('update:modelValue');
+      const handleLogOut = action('log-out');
+
+      return {
+        handleClose,
+        handleUpdateModelValue,
+        handleLogOut,
+      };
+    },
     components: { WithProfileInfoOnlyStory },
     template: `
       <WithProfileInfoOnlyStory
@@ -96,6 +118,17 @@ export const ProfileInfoOnly: Story = {
 
 export const SingleLevel: Story = {
   render: () => ({
+    setup() {
+      const handleClose = action('close');
+      const handleUpdateModelValue = action('update:modelValue');
+      const handleLogOut = action('log-out');
+
+      return {
+        handleClose,
+        handleUpdateModelValue,
+        handleLogOut,
+      };
+    },
     components: { WithSingleLevelStory },
     template: `
       <WithSingleLevelStory

package/src/components/sidebar/MSidebar.vue

@@ -5,7 +5,12 @@
       `mc-sidebar--${expanded ? 'expanded' : 'collapsed'}`,
     ]"
   >
-    <div class="mc-sidebar__wrapper">
+    <div
+      :class="{
+        'mc-sidebar__wrapper': true,
+        'mc-sidebar__wrapper--divider': props.divider,
+      }"
+    >
       <slot name="header" />
 
       <slot name="shortcuts" />
@@ -55,6 +60,10 @@ const props = defineProps<{
    * the state of the expanded sidebar, bound via v-model.
    */
   modelValue: boolean;
+  /**
+   * Whether to display a right border on the sidebar.
+   */
+  divider?: boolean;
 }>();
 
 const emit = defineEmits<{

package/src/components/sidebar/README.md

@@ -8,6 +8,7 @@ A sidebar is a vertical navigation component that provides quick access to key s
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `modelValue*` | the state of the expanded sidebar, bound via v-model. | `boolean` | - |
+| `divider` | Whether to display a right border on the sidebar. | `boolean` | - |
 
 ## Slots
 

package/src/components/sidebar/stories/DefaultCase.stories.vue

@@ -1,6 +1,7 @@
 <template>
   <MSidebar
     v-model="expanded"
+    divider
     @update:model-value="emit('update:modelValue')"
     @close="emit('close')"
   >
@@ -96,25 +97,25 @@ const shortcutItems = [
 ];
 
 const navigationItems = [
-  { label: 'Get Started', href: '#', icon: Release24 },
+  { label: 'Get Started', to: 'get-started', icon: Release24 },
   {
     label: 'Design Tokens',
     icon: Sample24,
     items: [
-      { label: 'Subsection menu label 1', href: '#', locked: true },
-      { label: 'Subsection menu label 2', href: '#', external: true },
-      { label: 'Subsection menu label 2', href: '#' },
-      { label: 'Subsection menu label 2', href: '#' },
+      { label: 'Subsection menu label 1', to: 'subsection-1', locked: true },
+      { label: 'Subsection menu label 2', to: 'subsection-2', external: true },
+      { label: 'Subsection menu label 2', to: 'subsection-3' },
+      { label: 'Subsection menu label 2', to: 'subsection-4' },
     ],
   },
-  { label: 'Styles', href: '#', icon: Palette24 },
-  { label: 'Components', href: '#', icon: Pantone24 },
+  { label: 'Styles', to: 'styles', icon: Palette24 },
+  { label: 'Components', to: 'components', icon: Pantone24 },
 ];
 
 const footerMenuItems = [
-  { label: 'Action 01', icon: Admin24, href: '#' },
-  { label: 'Action 02', icon: Admin24, href: '#' },
-  { label: 'Action 03', icon: Admin24, href: '#' },
-  { label: 'Action 04', icon: Admin24, href: '#' },
+  { label: 'Action 01', icon: Admin24, to: 'action-01' },
+  { label: 'Action 02', icon: Admin24, to: 'action-02' },
+  { label: 'Action 03', icon: Admin24, to: 'action-03' },
+  { label: 'Action 04', icon: Admin24, to: 'action-04' },
 ];
 </script>

package/src/components/sidebar/use-floating-item.composable.ts

@@ -73,7 +73,7 @@ export const useFloatingItem = (
   }
 
   function showFloatingItem() {
-    floatingItem.value?.classList.toggle('mc-sidebar__floating-item--hidden');
+    floatingItem.value?.classList.remove('mc-sidebar__floating-item--hidden');
     floatingItemIsDisplayed.value = !floatingItem.value?.classList.contains(
       'mc-sidebar__floating-item--hidden',
     );

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue

@@ -11,12 +11,12 @@
         <ChevronDown20 />
       </summary>
       <ul class="mc-sidebar__sublist">
-        <slot name="default" />
+        <slot name="default" v-bind="{ close: hideFloatingItem }" />
       </ul>
     </details>
   </li>
 
-  <div v-else class="mc-sidebar__item">
+  <div v-else class="mc-sidebar__item mc-sidebar__item--collapsed">
     <button
       ref="trigger"
       class="mc-sidebar__trigger mc-sidebar__link"
@@ -47,7 +47,7 @@
       <div class="mc-sidebar__listbox">
         <h3 class="mc-sidebar__listbox-title">{{ props.menuLabel }}</h3>
         <ul class="mc-sidebar__list">
-          <slot name="default" />
+          <slot name="default" v-bind="{ close: hideFloatingItem }" />
         </ul>
       </div>
     </div>
@@ -65,7 +65,11 @@ import {
 } 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';
+import {
+  SUB_ITEM_KEY,
+  EXPANDED_SIDEBAR_KEY,
+  HIDE_MENU_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.
  */
@@ -87,12 +91,11 @@ const props = defineProps<{
 defineSlots<{
   /**
    * Contains one or more MSidebarNavItem components used to render the submenu items.
+   * The slot scope provides a `close` function that can be called to hide the floating menu.
    */
-  default: VNode[];
+  default(props: { close: () => void }): VNode[];
 }>();
 
-const expanded = inject(EXPANDED_SIDEBAR_KEY);
-
 const id = useId();
 
 const trigger = useTemplateRef('trigger');
@@ -106,6 +109,9 @@ const {
   onListboxKeydown,
 } = useFloatingItem(trigger, listbox);
 
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+
+provide(HIDE_MENU_KEY, hideFloatingItem);
 provide(SUB_ITEM_KEY, true);
 </script>
 

package/src/components/sidebarexpandableitem/README.md

@@ -15,7 +15,8 @@ SidebarExpandableItem is a component that renders a sidebar item which can eithe
 
 | Name | Description |
 | --- | --- |
-| `default` | Contains one or more MSidebarNavItem components used to render the submenu items. |
+| `default` | Contains one or more MSidebarNavItem components used to render the submenu items.
+The slot scope provides a `close` function that can be called to hide the floating menu. |
 
 ## Dependencies
 

package/src/components/sidebarfooter/MSidebarFooter.vue

@@ -39,7 +39,7 @@
           :hideFloatingItem="hideFloatingItem"
           @log-out="emit('log-out')"
         >
-          <slot />
+          <slot v-bind="{ close: hideFloatingItem }" />
         </MSidebarFooterMenu>
       </component>
 
@@ -77,7 +77,7 @@
           :hideFloatingItem="hideFloatingItem"
           @log-out="emit('log-out')"
         >
-          <slot />
+          <slot v-bind="{ close: hideFloatingItem }" />
         </MSidebarFooterMenu>
       </button>
     </div>
@@ -96,6 +96,8 @@ import {
 } from '@mozaic-ds/icons-vue';
 import {
   EXPANDED_SIDEBAR_KEY,
+  FOOTER_ITEM_KEY,
+  HIDE_MENU_KEY,
   SUB_ITEM_KEY,
   TOGGLE_SIDEBAR_KEY,
 } from '../sidebar/MSidebar.const';
@@ -136,8 +138,9 @@ withDefaults(
 defineSlots<{
   /**
    * Contains one or more MSidebarNavItem components used to render the profile items.
+   * The slot scope provides a `close` function that can be called to hide the floating menu.
    */
-  default: VNode[];
+  default(props: { close: () => void }): VNode[];
 }>();
 
 const emit = defineEmits<{
@@ -147,11 +150,6 @@ const emit = defineEmits<{
   (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');
 
@@ -171,6 +169,13 @@ const {
   position: 'top',
 });
 
+provide(SUB_ITEM_KEY, true);
+provide(FOOTER_ITEM_KEY, true);
+provide(HIDE_MENU_KEY, hideFloatingItem);
+
+const toggleSidebar = inject(TOGGLE_SIDEBAR_KEY);
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+
 const desktopTriggerAttrs = computed(() => {
   if (isMobile.value) return {};
 
@@ -182,7 +187,9 @@ const desktopTriggerAttrs = computed(() => {
   return expanded?.value
     ? {
         ...baseAttrs,
-        onClick: showFloatingItem,
+        onClick: floatingItemIsDisplayed.value
+          ? hideFloatingItem
+          : showFloatingItem,
       }
     : {
         ...baseAttrs,

package/src/components/sidebarfooter/_MSidebarFooterMenu.vue

@@ -8,6 +8,7 @@
       'mc-sidebar__floating-item mc-sidebar__floating-item--hidden': true,
       'mc-sidebar__floating-item--expanded': expanded,
     }"
+    @click.stop
     v-bind="
       expanded
         ? {}
@@ -23,7 +24,7 @@
         <slot name="default" />
       </ul>
 
-      <MDivider class="mc-sidebar__footer-menu-divider" />
+      <MDivider v-if="hasNavItems" class="mc-sidebar__footer-menu-divider" />
 
       <MSidebarNavItem
         tag="div"
@@ -36,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue';
+import { computed, useSlots, useTemplateRef, type VNode } from 'vue';
 import MDivider from '../divider/MDivider.vue';
 import MSidebarNavItem from '../sidebarnavitem/MSidebarNavItem.vue';
 import { LogOut24 } from '@mozaic-ds/icons-vue';
@@ -54,6 +55,13 @@ const emit = defineEmits<{
 
 const container = useTemplateRef('container');
 
+const slots = useSlots();
+
+const hasNavItems = computed(() => {
+  const content = slots.default?.() ?? [];
+  return content.some((vnode: VNode) => vnode.children?.length);
+});
+
 defineExpose({
   container,
 });

package/src/components/sidebarnavitem/MSidebarNavItem.vue

@@ -8,13 +8,14 @@
     }"
   >
     <component
-      :is="href ? 'a' : 'button'"
+      :is="itemTag"
       ref="trigger"
       :href="href"
+      :to="to"
       :target="external ? '_blank' : '_self'"
       :class="{
         'mc-sidebar__link': true,
-        'mc-sidebar__link--selected': active,
+        'mc-sidebar__link--selected': active && !isFooterItem,
         'mc-sidebar__link--locked': locked,
       }"
       :aria-label="label"
@@ -22,7 +23,8 @@
       @focus="showFloatingItem"
       @mouseleave="hideFloatingItem"
       @blur="hideFloatingItem"
-      @click="emit('click', $event)"
+      @click="handleClick"
+      v-bind="itemTag === 'button' ? { type: 'button' } : {}"
     >
       <component :is="icon" class="mc-sidebar__icon" />
 
@@ -47,6 +49,7 @@
 <script setup lang="ts">
 import { Lock20, ExternalLink20 } from '@mozaic-ds/icons-vue';
 import {
+  computed,
   inject,
   useId,
   useTemplateRef,
@@ -54,12 +57,17 @@ import {
   type ShallowRef,
 } from 'vue';
 import MTooltip from '../tooltip/MTooltip.vue';
-import { SUB_ITEM_KEY, EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+import {
+  SUB_ITEM_KEY,
+  EXPANDED_SIDEBAR_KEY,
+  FOOTER_ITEM_KEY,
+  HIDE_MENU_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<{
+const props = defineProps<{
   tag?: string;
   /**
    * The text label displayed for the navigation item.
@@ -73,6 +81,10 @@ defineProps<{
    * The URL the navigation item links to.
    */
   href?: string;
+  /**
+   * If defined, the item will act as a router-link to the specified route.
+   */
+  to?: string;
   /**
    * Marks the item as locked. Shows a lock icon and prevents interaction.
    */
@@ -93,6 +105,9 @@ const id = useId();
 
 const expanded = inject(EXPANDED_SIDEBAR_KEY);
 const isSubItem = inject(SUB_ITEM_KEY, false);
+const isFooterItem = inject(FOOTER_ITEM_KEY, false);
+
+const hideFooterMenu = inject(HIDE_MENU_KEY);
 
 const trigger = useTemplateRef(
   'trigger',
@@ -106,6 +121,22 @@ const { hideFloatingItem, showFloatingItem } = useFloatingItem(
     allowItemHover: false,
   },
 );
+
+const itemTag = computed(() => {
+  if (props.href) return 'a';
+  if (props.to) return 'router-link';
+  return 'button';
+});
+
+function handleClick(event: MouseEvent) {
+  if (props.locked) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+  emit('click', event);
+  hideFooterMenu?.();
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/sidebarnavitem/README.md

@@ -11,6 +11,7 @@ SidebarNavItem is a component that renders a sidebar navigation item with option
 | `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` | - |
+| `to` | If defined, the item will act as a router-link to the specified route. | `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` | - |

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.vue

@@ -8,14 +8,27 @@
     ]"
     role="menuitem"
   >
-    <a :href="props.href" class="mc-sidebar__shortcut-link">
+    <component
+      :is="props.to ? 'router-link' : 'a'"
+      :target="props.external ? '_blank' : '_self'"
+      class="mc-sidebar__shortcut-link"
+      v-bind="
+        props.to
+          ? {
+              to: props.to,
+            }
+          : {
+              href: props.href,
+            }
+      "
+    >
       <component
         v-if="props.icon"
         :is="props.icon"
         class="mc-sidebar__shortcut-icon"
       />
       <span class="mc-sidebar__shortcut-label">{{ props.label }}</span>
-    </a>
+    </component>
   </li>
 </template>
 
@@ -36,7 +49,15 @@ const props = defineProps<{
   /**
    * The URL the shortcut item links to.
    */
-  href: string;
+  href?: string;
+  /**
+   * If defined, the item will act as a router-link to the specified route.
+   */
+  to?: string;
+  /**
+   * Indicates the link is external and opens in a new tab.
+   */
+  external?: boolean;
   /**
    * Optional icon component displayed alongside the label.
    */

package/src/components/sidebarshortcutitem/README.md

@@ -8,7 +8,9 @@ SidebarShortcutItem is a component that renders a sidebar shortcut link with an
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `label*` | The text label displayed for the shortcut item. | `string` | - |
-| `href*` | The URL the shortcut item links to. | `string` | - |
+| `href` | The URL the shortcut item links to. | `string` | - |
+| `to` | If defined, the item will act as a router-link to the specified route. | `string` | - |
+| `external` | Indicates the link is external and opens in a new tab. | `boolean` | - |
 | `icon` | Optional icon component displayed alongside the label. | `Component` | - |
 
 ## Dependencies

package/src/components/sidebarshortcuts/MSidebarShortcuts.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="expanded">
+  <section v-if="expanded" class="mc-sidebar__shortcuts">
     <nav role="navigation" aria-label="shortcut items">
       <ul
         :class="{
@@ -12,6 +12,8 @@
         <slot name="default" />
       </ul>
     </nav>
+
+    <MDivider />
   </section>
 
   <div v-else class="mc-sidebar__shortcut-wrapper">
@@ -32,6 +34,8 @@
       <ViewGridX424 />
     </button>
 
+    <MDivider />
+
     <div
       ref="listbox"
       :id="`listbox-${id}`"
@@ -54,6 +58,7 @@
 </template>
 
 <script setup lang="ts">
+import MDivider from '../divider/MDivider.vue';
 import { ViewGridX424 } from '@mozaic-ds/icons-vue';
 import { inject, provide, useId, useTemplateRef, type VNode } from 'vue';
 import { useFloatingItem } from '../sidebar/use-floating-item.composable';