@mozaic-ds/vue 2.11.0 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -41,7 +41,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.4.0",
+    "@mozaic-ds/styles": "^2.6.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"

package/src/components/builtinmenu/MBuiltInMenu.spec.ts

@@ -0,0 +1,111 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MBuiltInMenu, { type MenuItem } from './MBuiltInMenu.vue';
+import { defineComponent } from 'vue';
+
+// Dummy icon component to simulate passed icon
+const DummyIcon = defineComponent({
+  name: 'DummyIcon',
+  template: '<svg class="dummy-icon" />',
+});
+
+const items: MenuItem[] = [
+  { label: 'Item 1', icon: DummyIcon },
+  { label: 'Item 2', href: '/foo', target: '_blank' },
+  { label: 'Item 3' },
+];
+
+describe('MBuiltInMenu', () => {
+  it('renders all item labels', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const labels = wrapper.findAll('.mc-built-in-menu__label');
+    expect(labels.length).toBe(3);
+    expect(labels[0].text()).toBe('Item 1');
+    expect(labels[1].text()).toBe('Item 2');
+    expect(labels[2].text()).toBe('Item 3');
+  });
+
+  it('uses correct tags for link and buttons', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    expect(wrapper.findAll('a').length).toBe(1);
+    expect(wrapper.findAll('button').length).toBe(2);
+
+    const links = wrapper.findAll('.mc-built-in-menu__link');
+    const buttons = wrapper.findAll('.mc-built-in-menu__button');
+    expect(links.length).toBe(1);
+    expect(buttons.length).toBe(2);
+  });
+
+  it('renders an anchor with href and provided target', () => {
+    const items: MenuItem[] = [
+      { label: 'Anchor', href: '/path', target: '_blank' },
+    ];
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+
+    const a = wrapper.find('a');
+    expect(a).not.toBeNull();
+    expect(a?.attributes('href')).toBe('/path');
+    expect(a?.attributes('target')).toBe('_blank');
+  });
+
+  it('renders a router-link with to and default target when target omitted', () => {
+    const items: MenuItem[] = [{ label: 'Router', to: '/route' }];
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+
+    const routerLink = wrapper.find('router-link');
+    expect(routerLink).not.toBeNull();
+    expect(routerLink?.attributes('to')).toBe('/route');
+    expect(routerLink?.attributes('target')).toBe('_self');
+  });
+
+  it('emits update:modelValue when an item is clicked', async () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const menuItems = wrapper.findAll(
+      '.mc-built-in-menu__button, .mc-built-in-menu__link',
+    );
+
+    await menuItems[1].trigger('click');
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0][0]).toBe(1);
+  });
+
+  it('marks the selected item with aria-current and selected class', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: 2 },
+    });
+    const lis = wrapper.findAll('li');
+    const selectedItem = lis[2];
+    expect(selectedItem.attributes('aria-current')).toBe('true');
+    expect(selectedItem.classes()).toContain(
+      'mc-built-in-menu__item--selected',
+    );
+  });
+
+  it('renders provided icon component inside the item', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const firstItem = wrapper.findAll('li')[0];
+    expect(firstItem.find('.dummy-icon').exists()).toBe(true);
+  });
+
+  it('applies outlined class when outlined prop is true', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined, outlined: true },
+    });
+    expect(wrapper.find('nav').classes()).toContain(
+      'mc-built-in-menu--outlined',
+    );
+  });
+});

package/src/components/builtinmenu/MBuiltInMenu.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MBuiltInMenu from './MBuiltInMenu.vue';
+import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
+import { action } from 'storybook/actions';
+
+const meta: Meta<typeof MBuiltInMenu> = {
+  title: 'Navigation/Built-in menu',
+  component: MBuiltInMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.',
+      },
+    },
+  },
+  args: {
+    items: [
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label' },
+    ],
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MBuiltInMenu },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MBuiltInMenu v-model="args.modelValue" v-bind="args" @update:modelValue="handleUpdate"></MBuiltInMenu>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBuiltInMenu>;
+
+export const Default: Story = {};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+    ],
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    outlined: true,
+  },
+};

package/src/components/builtinmenu/MBuiltInMenu.vue

@@ -0,0 +1,110 @@
+<template>
+  <nav
+    :class="{
+      'mc-built-in-menu': true,
+      'mc-built-in-menu--outlined': props.outlined,
+    }"
+    aria-label="menu"
+  >
+    <ul class="mc-built-in-menu__list">
+      <li
+        v-for="(item, index) in props.items"
+        :key="index"
+        :class="{
+          'mc-built-in-menu__item': true,
+          'mc-built-in-menu__item--selected': currentMenuItem === index,
+        }"
+        v-bind="currentMenuItem === index ? { 'aria-current': true } : {}"
+      >
+        <component
+          :is="getItemTag(item)"
+          :class="{
+            'mc-built-in-menu__button': getItemTag(item) === 'button',
+            'mc-built-in-menu__link': isLink(item),
+          }"
+          v-bind="isLink(item) ? getLinkAttrs(item) : {}"
+          @click="currentMenuItem = index"
+        >
+          <component
+            v-if="item.icon"
+            :is="item.icon"
+            class="mc-built-in-menu__icon"
+          />
+
+          <span class="mc-built-in-menu__label">{{ item.label }}</span>
+
+          <ChevronRight20 class="mc-built-in-menu__icon" />
+        </component>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+import { computed, type Component } from 'vue';
+
+/**
+ * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+ */
+
+export type MenuItem = {
+  label: string;
+  icon?: Component;
+  href?: string;
+  to?: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
+};
+
+const props = defineProps<{
+  /**
+   * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+   */
+  modelValue?: number;
+  /**
+   * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
+   */
+  items: MenuItem[];
+  /**
+   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+   */
+  outlined?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected item changes, providing the updated selected value.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+
+const currentMenuItem = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+
+function getItemTag(item: MenuItem) {
+  if (item.href) return 'a';
+  if (item.to) return 'router-link';
+  return 'button';
+}
+
+function isLink(item: MenuItem) {
+  return getItemTag(item) === 'a' || getItemTag(item) === 'router-link';
+}
+
+function getLinkAttrs(item: MenuItem) {
+  return {
+    ...(getItemTag(item) === 'a' ? { href: item.href } : { to: item.to }),
+    target: item.target || '_self',
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/built-in-menu';
+</style>

package/src/components/builtinmenu/README.md

@@ -0,0 +1,18 @@
+# MBuiltInMenu
+
+A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
+| `items*` | Defines the menu items, each of which can include an icon and act as a button, link, or router-link. | `MenuItem[]` | - |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |

package/src/components/checklistmenu/MCheckListMenu.spec.ts

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MCheckListMenu, { type CheckListMenuItem } from './MCheckListMenu.vue';
+import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
+
+const StubMBuiltInMenu = {
+  name: 'MBuiltInMenu',
+  props: ['modelValue', 'items', 'outlined'],
+  emits: ['update:modelValue'],
+  template: '<div />',
+};
+
+describe('MCheckListMenu', () => {
+  it('maps items and sets icon for checked items', () => {
+    const items: CheckListMenuItem[] = [
+      {
+        label: 'One',
+        checked: true,
+        href: '/one',
+        to: undefined,
+        target: undefined,
+      },
+      {
+        label: 'Two',
+        checked: false,
+        href: undefined,
+        to: '/two',
+        target: '_blank',
+      },
+    ];
+
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    const passedItems = builtIn.props('items') as MenuItem[];
+
+    expect(passedItems).toHaveLength(2);
+    expect(passedItems[0].label).toBe('One');
+    expect(passedItems[0].icon).toBe(CheckCircleFilled24);
+    expect(passedItems[0].href).toBe('/one');
+
+    expect(passedItems[1].label).toBe('Two');
+    expect(passedItems[1].icon).toBeUndefined();
+    expect(passedItems[1].to).toBe('/two');
+    expect(passedItems[1].target).toBe('_blank');
+  });
+
+  it('forwards outlined prop to MBuiltInMenu', () => {
+    const items = [{ label: 'A', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined, outlined: true },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    expect(builtIn.props('outlined')).toBe(true);
+  });
+
+  it('emits update:modelValue when inner menu updates modelValue', async () => {
+    const items = [{ label: 'X', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    await builtIn.vm.$emit('update:modelValue', 3);
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual([3]);
+  });
+});

package/src/components/checklistmenu/MCheckListMenu.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCheckListMenu from './MCheckListMenu.vue';
+import { action } from 'storybook/actions';
+
+const meta: Meta<typeof MCheckListMenu> = {
+  title: 'Navigation/Check-list menu',
+  component: MCheckListMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.',
+      },
+    },
+  },
+  args: {
+    items: [
+      { label: 'Label', checked: true },
+      { label: 'Label', checked: true },
+      { label: 'Label', checked: false },
+      { label: 'Label', checked: true },
+    ],
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MCheckListMenu },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MCheckListMenu v-model="args.modelValue" v-bind="args" @update:modelValue="handleUpdate"></MCheckListMenu>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCheckListMenu>;
+
+export const Default: Story = {};
+
+export const Outlined: Story = {
+  args: {
+    outlined: true,
+  },
+};

package/src/components/checklistmenu/MCheckListMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <MBuiltInMenu
+    v-model="currentMenuItem"
+    :items="menuItems"
+    :outlined="props.outlined"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MBuiltInMenu from '../builtinmenu/MBuiltInMenu.vue';
+import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
+import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+
+/**
+ * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+ */
+
+export type CheckListMenuItem = Omit<MenuItem, 'icon'> & { checked: boolean };
+
+const props = defineProps<{
+  /**
+   * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+   */
+  modelValue?: number;
+  /**
+   * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.
+   */
+  items: CheckListMenuItem[];
+  /**
+   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+   */
+  outlined?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected item changes, providing the updated selected value.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+
+const currentMenuItem = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+
+const menuItems = computed<MenuItem[]>(() =>
+  props.items.map((item) => ({
+    label: item.label,
+    icon: item.checked ? CheckCircleFilled24 : undefined,
+    href: item.href,
+    to: item.to,
+    target: item.target,
+  })),
+);
+</script>

package/src/components/checklistmenu/README.md

@@ -0,0 +1,18 @@
+# MCheckListMenu
+
+A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
+| `items*` | Defines the menu items, each of which sets a checked state and act as a button, link, or router-link. | `CheckListMenuItem[]` | - |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |

package/src/components/stepperinline/MStepperInline.spec.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import MStepperInline from './MStepperInline.vue';
+import { describe, it, expect } from 'vitest';
+
+describe('MStepperInline', () => {
+  const defaultSteps = [
+    { label: 'Step 1' },
+    { label: 'Step 2' },
+    { label: 'Step 3' },
+  ];
+
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MStepperInline, {
+      props: {
+        currentStep: 1,
+        steps: defaultSteps,
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findAll('.mc-stepper-inline__item').length).toBe(
+      defaultSteps.length,
+    );
+    expect(wrapper.find('.mc-stepper-inline__label').text()).toContain(
+      'Step 1',
+    );
+  });
+
+  it('displays additional information when provided', () => {
+    const stepsWithInfo = [
+      { label: 'Step 1', additionalInfo: 'Info 1' },
+      { label: 'Step 2', additionalInfo: 'Info 2' },
+    ];
+    const wrapper = mount(MStepperInline, {
+      props: {
+        currentStep: 1,
+        steps: stepsWithInfo,
+      },
+    });
+
+    expect(wrapper.findAll('.mc-stepper-inline__additional').length).toBe(
+      stepsWithInfo.length,
+    );
+    expect(wrapper.find('.mc-stepper-inline__additional').text()).toBe(
+      'Info 1',
+    );
+  });
+
+  it('marks the correct step as active', async () => {
+    const wrapper = mount(MStepperInline, {
+      props: {
+        currentStep: 2,
+        steps: defaultSteps,
+      },
+    });
+
+    const labels = wrapper.findAll('.mc-stepper-inline__label');
+    expect(labels[1].classes()).toContain('is-current');
+    expect(labels[0].classes()).not.toContain('is-current');
+
+    await wrapper.setProps({ currentStep: 3 });
+    expect(labels[2].classes()).toContain('is-current');
+  });
+
+  it('marks completed steps', () => {
+    const wrapper = mount(MStepperInline, {
+      props: {
+        currentStep: 3,
+        steps: defaultSteps,
+      },
+    });
+
+    const items = wrapper.findAll('.mc-stepper-inline__item');
+    expect(items[0].classes()).toContain('is-completed');
+    expect(items[1].classes()).toContain('is-completed');
+    expect(items[2].classes()).not.toContain('is-completed');
+  });
+});

package/src/components/stepperinline/MStepperInline.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStepperInline from './MStepperInline.vue';
+
+const meta: Meta<typeof MStepperInline> = {
+  title: 'Indicators/Stepper Inline',
+  component: MStepperInline,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.',
+      },
+    },
+  },
+  args: {
+    currentStep: 1,
+    steps: [
+      { label: 'Cart' },
+      { label: 'Delivery address' },
+      { label: 'Payment' },
+      { label: 'Order confirmation' },
+    ],
+  },
+  render: (args) => ({
+    components: { MStepperInline },
+    setup() {
+      return { args };
+    },
+    template: `<MStepperInline v-bind="args" />`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MStepperInline>;
+
+export const Default: Story = {};
+
+export const AditionnalInfo: Story = {
+  args: {
+    currentStep: 2,
+    steps: [
+      { label: 'Cart', additionalInfo: 'Additional information' },
+      { label: 'Delivery address', additionalInfo: 'Additional information' },
+      { label: 'Payment', additionalInfo: 'Additional information' },
+      { label: 'Order confirmation', additionalInfo: 'Additional information' },
+    ],
+  },
+};