@mozaic-ds/vue 2.15.0 → 2.17.0

package/src/components/statusmessage/README.md

@@ -8,6 +8,8 @@ A Status Message is a compact component that combines an icon and concise text t
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
+| `appearance` | Allows to define the status message appearance.
+The accent status is used to highlight a specific message. | `"standard"` `"accent"` | `"standard"` |
 | `label*` | Label of the status message. | `string` | - |
 
 ## Dependencies

package/src/components/statusnotification/MStatusNotification.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MStatusNotification
+ * Links Figma Status notification (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-21600',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+      }),
+    },
+    example: ({ status }) =>
+      html`<script setup>
+        import { MStatusNotification } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusNotification
+        title="Notification title"
+        description="Notification description"
+        status=${status}
+      ></MStatusNotification>`,
+  },
+);

package/src/components/stepperbottombar/MStepperBottomBar.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MStepperBottomBar
+ * Links Figma Stepper bottom bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=10726-18528',
+  {
+    props: {
+      cancel: figma.boolean('Has cancel action'),
+    },
+    example: ({ cancel }) =>
+      html`<script setup>
+        import { MStepperBottomBar } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperBottomBar cancel=${cancel} :steps="3" />`,
+  },
+);

package/src/components/steppercompact/MStepperCompact.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MStepperCompact
+ * Links Figma Stepper (Compact) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13297-24864',
+  {
+    props: {
+      label: figma.string('Step label'),
+      description: figma.string('Next step label'),
+    },
+    example: ({ label, description }) =>
+      html`<script setup>
+        import { MStepperCompact } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperCompact label=${label} :description=${description} :value="1" :max-steps="4"></MStepperCompact>`,
+  },
+);

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

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperInline
+ * Links Figma Stepper (Inline) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13050-10371',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperInline } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperInline :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperInline>`,
+  },
+);

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

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperStacked
+ * Links Figma Stepper (Stacked) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13179-6447',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperStacked } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperStacked :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperStacked>`,
+  },
+);

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.figma.ts

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MTabs
+ * Links Figma Tabs (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11474',
+  {
+    props: {
+      divider: figma.boolean('Show divider'),
+      centered: figma.enum('Centered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ divider, centered }) =>
+      html`<script setup>
+        import { MTabs } from '@mozaic-ds/vue';
+      </script>
+
+      <MTabs
+        :divider=${divider}
+        centered=${centered}
+        model-value="label1"
+        :tabs="[
+          { id: 'label1', label: 'Label' },
+          { id: 'label2', label: 'Label' },
+          { id: 'label3', label: 'Label' },
+        ]"
+      ></MTabs>`,
+  },
+);

package/src/components/tag/MTag.figma.ts

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MTag
+ * Links Figma Tag to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5730-15694',
+  {
+    props: {
+      type: figma.enum('Type', {
+        'Informative (Read-only)': 'informative',
+        'Interactive (as link or button)': 'interactive',
+        Contextualised: 'contextualised',
+        Removable: 'removable',
+        Selectable: 'selectable',
+      }),
+    },
+    example: ({ type }) =>
+      html`<script setup>
+        import { MTag } from '@mozaic-ds/vue';
+      </script>
+
+      <MTag type=${type} label="Tag label"></MTag>`,
+  },
+);

package/src/components/tag/MTag.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
+import { FeelingSatisfied20 } from '@mozaic-ds/icons-vue';
 import MTag from './MTag.vue';
 
 const meta: Meta<typeof MTag> = {
@@ -17,7 +18,7 @@ const meta: Meta<typeof MTag> = {
     label: 'Tag label',
   },
   render: (args) => ({
-    components: { MTag },
+    components: { MTag, FeelingSatisfied20 },
     setup() {
       const handleUpdate = action('update:modelValue');
       const handleRemoveTag = action('remove-tag');
@@ -25,11 +26,14 @@ const meta: Meta<typeof MTag> = {
       return { args, handleUpdate, handleRemoveTag };
     },
     template: `
-      <MTag 
+      <MTag
         v-bind="args"
         @update:modelValue="handleUpdate"
         @remove-tag="handleRemoveTag"
-      ></MTag>
+        v-model="args.modelValue"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+      </MTag>
     `,
   }),
 };
@@ -42,6 +46,12 @@ export const Size: Story = {
   args: { size: 's' },
 };
 
+export const Icon: Story = {
+  args: {
+    icon: '<FeelingSatisfied20/>',
+  },
+};
+
 export const Interactive: Story = {
   args: { type: 'interactive' },
 };

package/src/components/tag/MTag.vue

@@ -17,6 +17,7 @@
       "
       v-bind="$attrs"
     />
+    <slot v-if="!modelValue" name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </label>
 
@@ -28,6 +29,7 @@
     :disabled="disabled"
     v-bind="$attrs"
   >
+    <slot name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </button>
 
@@ -66,12 +68,13 @@
 
   <!-- informative -->
   <span v-else class="mc-tag" :class="classObject" v-bind="$attrs">
+    <slot name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type VNode } from 'vue';
 import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
@@ -128,6 +131,13 @@ const props = withDefaults(
   },
 );
 
+defineSlots<{
+  /**
+   * Use this slot to insert an icon in the tag.
+   */
+  icon?: VNode;
+}>();
+
 const classObject = computed(() => {
   return {
     [`mc-tag-${props.type}`]: props.type && props.type != 'informative',

package/src/components/tag/README.md

@@ -17,6 +17,12 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | `contextualisedNumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
 | `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | `"Remove"` |
 
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon in the tag. |
+
 ## Events
 
 | Name | Description | Type |

package/src/components/textarea/MTextArea.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MTextArea
+ * Links Figma _text area / base to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=4544-28487',
+  {
+    props: {
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ isInvalid }) =>
+      html`<script setup>
+        import { MTextArea } from '@mozaic-ds/vue';
+      </script>
+
+      <MTextArea
+        id="textarea-id"
+        :is-invalid=${isInvalid}
+        placeholder="Placeholder"
+        model-value=""
+      ></MTextArea>`,
+  },
+);