@mozaic-ds/vue 2.14.0 → 2.16.0

package/src/components/stepperstacked/MStepperStacked.spec.ts

@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MStepperStacked from './MStepperStacked.vue';
+
+const defaultSteps = [
+  { id: '1', label: 'Step 1' },
+  { id: '2', label: 'Step 2', additionalInfo: 'Additional info' },
+  { id: '3', label: 'Step 3' },
+];
+
+describe('MStepperStacked', () => {
+  describe('Basic rendering', () => {
+    it('renders as many li elements as there are steps', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps },
+      });
+      const items = wrapper.findAll('.mc-stepper-stacked__item');
+      expect(items).toHaveLength(defaultSteps.length);
+    });
+
+    it('renders the label of each step', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps },
+      });
+      defaultSteps.forEach((step) => {
+        expect(wrapper.text()).toContain(step.label);
+      });
+    });
+
+    it('renders step numbers (1, 2, 3...)', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '1' },
+      });
+      expect(wrapper.text()).toContain('2');
+      expect(wrapper.text()).toContain('3');
+    });
+
+    it('renders additionalInfo when provided', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps },
+      });
+      expect(wrapper.text()).toContain('Additional info');
+    });
+
+    it('adds the has-additional class on items with additionalInfo', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps },
+      });
+      const items = wrapper.findAll('.mc-stepper-stacked__item');
+      expect(items[1].classes()).toContain('has-additional');
+      expect(items[0].classes()).not.toContain('has-additional');
+    });
+  });
+
+  describe('Step states', () => {
+    it('marks the current step circle with the is-current class', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '2' },
+      });
+      const circles = wrapper.findAll('.mc-stepper-stacked__circle');
+      const currentCircle = circles.find((c) => c.classes('is-current'));
+      expect(currentCircle).toBeTruthy();
+      expect(currentCircle?.text()).toBe('2');
+    });
+
+    it('marks the current step label with the is-current class', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '2' },
+      });
+      const labels = wrapper.findAll('.mc-stepper-stacked__label');
+      expect(labels[1].classes()).toContain('is-current');
+      expect(labels[0].classes()).not.toContain('is-current');
+      expect(labels[2].classes()).not.toContain('is-current');
+    });
+
+    it('renders the Check icon for completed steps', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '3' },
+      });
+      const checkIcons = wrapper.findAll('.mc-stepper-stacked__icon--check');
+      expect(checkIcons).toHaveLength(2);
+    });
+
+    it('does not render the Check icon for the current step', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '1' },
+      });
+      const checkIcons = wrapper.findAll('.mc-stepper-stacked__icon--check');
+      expect(checkIcons).toHaveLength(0);
+    });
+
+    it('renders a numbered circle for non-completed steps', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '1' },
+      });
+      const circles = wrapper.findAll('.mc-stepper-stacked__circle');
+      expect(circles).toHaveLength(3);
+    });
+  });
+
+  describe('active step — string type', () => {
+    it('falls back to step 1 if currentStep is less than 1', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: 'unknown id' },
+      });
+      const labels = wrapper.findAll('.mc-stepper-stacked__label');
+      expect(labels[0].classes()).toContain('is-current');
+    });
+
+    it('works with no steps (default value)', () => {
+      const wrapper = mount(MStepperStacked);
+      expect(wrapper.findAll('.mc-stepper-stacked__item')).toHaveLength(0);
+    });
+  });
+
+  describe('active step — number type', () => {
+    it('clamps to step 1 when currentStep is 0 or less', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: 0 },
+      });
+      const labels = wrapper.findAll('.mc-stepper-stacked__label');
+      expect(labels[0].classes()).toContain('is-current');
+    });
+
+    it('clamps to the last step when currentStep exceeds steps length', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: 99 },
+      });
+      const labels = wrapper.findAll('.mc-stepper-stacked__label');
+      expect(labels[defaultSteps.length - 1].classes()).toContain('is-current');
+    });
+  });
+
+  describe('Default currentStep', () => {
+    it('defaults to currentStep=1', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps },
+      });
+      const labels = wrapper.findAll('.mc-stepper-stacked__label');
+      expect(labels[0].classes()).toContain('is-current');
+    });
+  });
+
+  describe('First and last step', () => {
+    it('has no completed steps when currentStep=1', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '1' },
+      });
+      expect(wrapper.findAll('.mc-stepper-stacked__icon--check')).toHaveLength(
+        0,
+      );
+    });
+
+    it('marks all previous steps as completed when on the last step', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '3' },
+      });
+      const checkIcons = wrapper.findAll('.mc-stepper-stacked__icon--check');
+      expect(checkIcons).toHaveLength(defaultSteps.length - 1);
+    });
+  });
+});

package/src/components/stepperstacked/MStepperStacked.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStepperStacked from './MStepperStacked.vue';
+
+const meta: Meta<typeof MStepperStacked> = {
+  title: 'Indicators/Stepper Stacked',
+  component: MStepperStacked,
+  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: [
+      { id: '1', label: 'Cart' },
+      { id: '2', label: 'Delivery address' },
+      { id: '3', label: 'Payment' },
+      { id: '4', label: 'Order confirmation' },
+    ],
+  },
+  render: (args) => ({
+    components: { MStepperStacked },
+    setup() {
+      return { args };
+    },
+    template: `<MStepperStacked v-bind="args" />`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MStepperStacked>;
+
+export const Default: Story = {};
+
+export const AditionnalInfo: Story = {
+  args: {
+    currentStep: 2,
+    steps: [
+      { id: '1', label: 'Cart', additionalInfo: 'Additional information' },
+      {
+        id: '2',
+        label: 'Delivery address',
+        additionalInfo: 'Additional information',
+      },
+      { id: '3', label: 'Payment', additionalInfo: 'Additional information' },
+      {
+        id: '4',
+        label: 'Order confirmation',
+        additionalInfo: 'Additional information',
+      },
+    ],
+  },
+};

package/src/components/stepperstacked/MStepperStacked.vue

@@ -0,0 +1,106 @@
+<template>
+  <nav class="mc-stepper-stacked" aria-label="Stepper">
+    <ol class="mc-stepper-stacked__container">
+      <li
+        v-for="(step, index) in steps"
+        :key="index"
+        :class="{
+          'mc-stepper-stacked__item': true,
+          'has-additional': step.additionalInfo,
+        }"
+      >
+        <div class="mc-stepper-stacked__indicator">
+          <Check24
+            v-if="stepStates[index].completed"
+            class="mc-stepper-stacked__icon mc-stepper-stacked__icon--check"
+          />
+          <span
+            v-else
+            :class="{
+              'mc-stepper-stacked__circle': true,
+              'is-current': stepStates[index].current,
+            }"
+          >
+            {{ index + 1 }}
+          </span>
+        </div>
+        <div class="mc-stepper-stacked__content">
+          <span
+            :class="{
+              'mc-stepper-stacked__label': true,
+              'is-current': stepStates[index].current,
+            }"
+          >
+            {{ step.label }}
+          </span>
+          <span class="mc-stepper-stacked__additional">
+            {{ step.additionalInfo }}
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Check24 } from '@mozaic-ds/icons-vue';
+/**
+ * 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.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
+     */
+    currentStep?: string | number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+      /**
+       * Unique identifier for the step.
+       */
+      id?: string;
+      /**
+       * Label of the step.
+       */
+      label: string;
+      /**
+       * Optional additional information under the label.
+       */
+      additionalInfo?: string;
+    }>;
+  }>(),
+  {
+    currentStep: '1',
+    steps: () => [],
+  },
+);
+
+const activeStep = computed(() => {
+  if (typeof props.currentStep === 'number') {
+    return Math.min(Math.max(props.currentStep, 1), props.steps.length) - 1;
+  } else {
+    const activeIndex = props.steps.findIndex(
+      (step) => step.id === props.currentStep,
+    );
+    return activeIndex === -1 ? 0 : activeIndex;
+  }
+});
+
+const stepStates = computed(() =>
+  props.steps.map((_, i) => ({
+    completed: i < activeStep.value,
+    current: i === activeStep.value,
+  })),
+);
+</script>
+
+<style scoped lang="scss">
+@use '@mozaic-ds/styles/components/stepper-stacked';
+</style>

package/src/components/stepperstacked/README.md

@@ -0,0 +1,15 @@
+# MStepperStacked
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `currentStep` | Defines the currently active step.
+
+- If a `number` is provided, it represents the 1-based position of the step
+  in the `steps` array (e.g. `1` for the first step).
+- If a `string` is provided, it must match the `id` of one of the steps. | `string` `number` | `"1"` |
+| `steps` | Steps of the stepper inline. | `{ id?: string` `undefined; label: string; additionalInfo?: string` `undefined; }[]` | `[]` |

package/src/components/tabs/MTabs.stories.ts

@@ -16,17 +16,22 @@ const meta: Meta<typeof Mtabs> = {
     },
   },
   args: {
+    modelValue: 'label1',
     tabs: [
       {
+        id: 'label1',
         label: 'Label',
       },
       {
+        id: 'label2',
         label: 'Label',
       },
       {
+        id: 'label3',
         label: 'Label',
       },
       {
+        id: 'label4',
         label: 'Label',
       },
     ],
@@ -41,6 +46,7 @@ const meta: Meta<typeof Mtabs> = {
     template: `
       <Mtabs
         v-bind="args"
+        v-model="args.modelValue"
         @update:modelValue="handleUpdate"
       ></Mtabs>
     `,
@@ -55,18 +61,22 @@ export const Icons: Story = {
   args: {
     tabs: [
       {
+        id: 'label1',
         label: 'Label',
         icon: ChevronRight24,
       },
       {
+        id: 'label2',
         label: 'Label',
         icon: ChevronRight24,
       },
       {
+        id: 'label3',
         label: 'Label',
         icon: ChevronRight24,
       },
       {
+        id: 'label4',
         label: 'Label',
         icon: ChevronRight24,
       },
@@ -86,16 +96,20 @@ export const Disabled: Story = {
   args: {
     tabs: [
       {
+        id: 'label1',
         label: 'Label',
       },
       {
+        id: 'label2',
         label: 'Label',
       },
       {
+        id: 'label3',
         label: 'Label',
         disabled: true,
       },
       {
+        id: 'label4',
         label: 'Label',
         disabled: true,
       },
@@ -107,17 +121,21 @@ export const WithBadges: Story = {
   args: {
     tabs: [
       {
+        id: 'label1',
         label: 'Label',
         badge: 3,
       },
       {
+        id: 'label2',
         label: 'Label',
       },
       {
+        id: 'label3',
         label: 'Label',
         badge: 99,
       },
       {
+        id: 'label4',
         label: 'Label',
         badge: 100,
       },

package/src/components/tabs/MTabs.vue

@@ -12,12 +12,12 @@
           role="tab"
           class="mc-tabs__tab"
           :class="{
-            'mc-tabs__tab--selected': isTabSelected(index),
+            'mc-tabs__tab--selected': isTabSelected(index, tab.id),
             'mc-tabs__tab--disabled': tab.disabled,
           }"
-          :aria-selected="isTabSelected(index)"
+          :aria-selected="isTabSelected(index, tab.id)"
           type="button"
-          @click="onClickTab(index)"
+          @click="onClickTab(index, tab.id)"
         >
           <span v-if="tab.icon" class="mc-tabs__icon">
             <component :is="tab.icon" />
@@ -57,13 +57,20 @@ const props = withDefaults(
      */
     centered?: boolean;
     /**
-     * The selected tab index, bound via v-model.
+     * Defines the currently active tab.
+     *
+     * - If a `number` is provided, it represents the index of the tab.
+     * - If a `string` is provided, it must match the `id` of one of the tabs.
      */
-    modelValue?: number;
+    modelValue?: string | number;
     /**
      * An array of objects that allows you to provide all the data needed to generate the content for each tab.
      */
     tabs: Array<{
+      /**
+       * Unique identifier for the tab.
+       */
+      id?: string;
       /**
        * The icon displayed for the tab from Mozaic-icon-vue.
        */
@@ -94,25 +101,34 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref(props.modelValue);
+const modelValue = ref<string | number | undefined>(props.modelValue);
+
+const onClickTab = (index: number, id?: string) => {
+  const tab =
+    typeof props.modelValue === 'string'
+      ? props.tabs.find((tab) => tab.id === id)
+      : props.tabs[index];
 
-const onClickTab = (index: number) => {
-  if (props.tabs[index].disabled) return;
-  if (index !== modelValue.value) {
-    modelValue.value = index;
-    emit('update:modelValue', index);
+  const value = typeof props.modelValue === 'string' ? id : index;
+
+  if (tab?.disabled) return;
+  if (value !== modelValue.value) {
+    modelValue.value = value;
+    emit('update:modelValue', value);
   }
 };
 
-const isTabSelected = (index: number) => {
-  return modelValue.value === index;
+const isTabSelected = (index: number, id?: string) => {
+  const value = typeof props.modelValue === 'string' ? id : index;
+
+  return modelValue.value === value;
 };
 
 const emit = defineEmits<{
   /**
    * Emits when the selected tab changes, updating the modelValue prop.
    */
-  (on: 'update:modelValue', value: number): void;
+  (on: 'update:modelValue', value?: string | number): void;
 }>();
 </script>
 

package/src/components/tabs/Mtabs.spec.ts

@@ -4,7 +4,11 @@ import MTabs from './MTabs.vue';
 import { defineComponent, h, markRaw } from 'vue';
 
 describe('MTabs.vue', () => {
-  const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];
+  const tabs = [
+    { id: '1', label: 'Tab 1' },
+    { id: '2', label: 'Tab 2' },
+    { id: '3', label: 'Tab 3' },
+  ];
 
   it('renders tabs with correct labels', () => {
     const wrapper = mount(MTabs, {
@@ -21,7 +25,46 @@ describe('MTabs.vue', () => {
     });
   });
 
-  it('applies selected class and aria-selected attribute based on modelValue and updates on tab click', async () => {
+  it('applies selected class and aria-selected attribute based on modelValue and updates on tab click - string type model', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+
+    buttons.forEach((button, i) => {
+      if (i === 0) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
+
+    await buttons[1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['2']);
+
+    await wrapper.setProps({ modelValue: '2' });
+
+    const updatedButtons = wrapper.findAll('button.mc-tabs__tab');
+    updatedButtons.forEach((button, i) => {
+      if (i === 1) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
+  });
+
+  it('applies selected class and aria-selected attribute based on modelValue and updates on tab click - number type model', async () => {
     const wrapper = mount(MTabs, {
       props: {
         tabs,
@@ -100,11 +143,11 @@ describe('MTabs.vue', () => {
     const wrapper = mount(MTabs, {
       props: {
         tabs: [
-          { label: 'Tab 1' },
-          { label: 'Tab 2', disabled: true },
-          { label: 'Tab 3' },
+          { id: '1', label: 'Tab 1' },
+          { id: '2', label: 'Tab 2', disabled: true },
+          { id: '3', label: 'Tab 3' },
         ],
-        modelValue: 0,
+        modelValue: '1',
       },
     });
 
@@ -112,7 +155,7 @@ describe('MTabs.vue', () => {
 
     await buttons[2].trigger('click');
     expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['3']);
 
     await buttons[1].trigger('click');
     expect(wrapper.emitted('update:modelValue')!.length).toBe(1);
@@ -131,8 +174,8 @@ describe('MTabs.vue', () => {
     );
 
     const tabsWithIcon = [
-      { label: 'Tab 1', icon: DummyIcon },
-      { label: 'Tab 2' },
+      { id: '1', label: 'Tab 1', icon: DummyIcon },
+      { id: '2', label: 'Tab 2' },
     ];
 
     const wrapper = mount(MTabs, {
@@ -150,7 +193,10 @@ describe('MTabs.vue', () => {
   });
 
   it('renders badge when badge prop is provided', () => {
-    const tabsWithBadges = [{ label: 'Tab 1', badge: 5 }, { label: 'Tab 2' }];
+    const tabsWithBadges = [
+      { id: '1', label: 'Tab 1', badge: 5 },
+      { id: '2', label: 'Tab 2' },
+    ];
 
     const wrapper = mount(MTabs, {
       props: {

package/src/components/tabs/README.md

@@ -10,14 +10,17 @@ Tabs are a navigation component that allows users to switch between different se
 | `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` | - |
 | `divider` | If `true`, the divider will appear. | `boolean` | `true` |
 | `centered` | If `true`, the tabs of the component will be centered. | `boolean` | - |
-| `modelValue` | The selected tab index, bound via v-model. | `number` | `0` |
-| `tabs*` | An array of objects that allows you to provide all the data needed to generate the content for each tab. | `{ icon?: Component` `undefined; badge?: number` `undefined; label: string; disabled?: boolean` `undefined; }[]` | - |
+| `modelValue` | Defines the currently active tab.
+
+- If a `number` is provided, it represents the index of the tab.
+- If a `string` is provided, it must match the `id` of one of the tabs. | `string` `number` | `0` |
+| `tabs*` | An array of objects that allows you to provide all the data needed to generate the content for each tab. | `{ id?: string` `undefined; icon?: Component` `undefined; badge?: number` `undefined; label: string; disabled?: boolean` `undefined; }[]` | - |
 
 ## Events
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value: number] |
+| `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value?: string | number] |
 
 ## Dependencies