@mozaic-ds/vue 2.11.0 → 2.13.0

package/src/components/statusmessage/MStatusMessage.vue

@@ -13,10 +13,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import InfoCircleFilled24 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled24/InfoCircleFilled24.vue';
-import WarningCircleFilled24 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled24/WarningCircleFilled24.vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
-import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import {
+  InfoCircleFilled24,
+  WarningCircleFilled24,
+  CrossCircleFilled24,
+  CheckCircleFilled24,
+} from '@mozaic-ds/icons-vue';
 import MLoader from '../loader/MLoader.vue';
 /**
  * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.

package/src/components/statusmessage/README.md

@@ -9,3 +9,17 @@ A Status Message is a compact component that combines an icon and concise text t
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
 | `label*` | Label of the status message. | `string` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusMessage --> MLoader
+style MStatusMessage fill:#008240,stroke:#333,stroke-width:4px
+```

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

@@ -1,10 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MStatusNotification from './MStatusNotification.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 
 describe('MStatusNotification.vue', () => {
   it('should render correctly with the default props', () => {

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

@@ -3,7 +3,7 @@ import MStatusNotification from './MStatusNotification.vue';
 import { action } from 'storybook/actions';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
-import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
+import { ArrowNext20 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MStatusNotification> = {
   title: 'Status/Status Notification',

package/src/components/statusnotification/MStatusNotification.vue

@@ -34,11 +34,13 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
-import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  Cross20,
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.

package/src/components/statusnotification/README.md

@@ -23,3 +23,17 @@ A Status Notification is used to draw the user’s attention to important inform
 | Name | Description | Type |
 | --- | --- | --- |
 | `close` | Emits when closing the notification. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusNotification --> MIconButton
+style MStatusNotification fill:#008240,stroke:#333,stroke-width:4px
+```

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

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MStepperBottomBar from './MStepperBottomBar.vue';
+
+const globalStubs = {
+  MButton: {
+    emits: ['click'],
+    template: `<button @click="$emit('click', $event)"><slot /></button>`,
+  },
+  MDivider: {
+    template: `<hr />`,
+  },
+};
+
+describe('MStepperBottomBar component', () => {
+  it('renders cancel button by default', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Cancel');
+  });
+
+  it('does not render cancel button when cancel is false', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { cancel: false },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).not.toContain('Cancel');
+  });
+
+  it('does not render previous button when step is 0', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 0 },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).not.toContain('Previous');
+  });
+
+  it('renders previous button when step > 0', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 1 },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Previous');
+  });
+
+  it('emits update:modelValue with decremented value on previous click', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 2 },
+      global: { stubs: globalStubs },
+    });
+
+    const buttons = wrapper.findAll('button');
+    const previousButton = buttons.find((b) => b.text() === 'Previous')!;
+
+    await previousButton.trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue')!;
+    expect(emitted.at(-1)).toEqual([1]);
+  });
+
+  it('emits update:modelValue with incremented value on next click', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        modelValue: 1,
+        steps: 3,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    const nextButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Next')!;
+
+    await nextButton.trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue')!;
+    expect(emitted.at(-1)).toEqual([2]);
+  });
+
+  it('emits validate when clicking next on last step', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        modelValue: 3,
+        steps: 3,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    const validateButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Validate')!;
+
+    await validateButton.trigger('click');
+
+    expect(wrapper.emitted('validate')).toBeTruthy();
+  });
+
+  it('emits cancel when cancel button is clicked', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      global: { stubs: globalStubs },
+    });
+
+    const cancelButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Cancel')!;
+
+    await cancelButton.trigger('click');
+
+    expect(wrapper.emitted('cancel')).toBeTruthy();
+  });
+
+  it('renders custom labels', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        cancelLabel: 'Abort',
+        previousLabel: 'Back',
+        nextLabel: 'Continue',
+        validateLabel: 'Submit',
+        modelValue: 1,
+        steps: 1,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Abort');
+    expect(wrapper.text()).toContain('Back');
+    expect(wrapper.text()).toContain('Submit');
+  });
+});

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MStepperBottomBar from './MStepperBottomBar.vue';
+
+const meta: Meta<typeof MStepperBottomBar> = {
+  title: 'Structure/Stepper Bottom Bar',
+  component: MStepperBottomBar,
+  tags: ['v2'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '200px' },
+      description: {
+        component:
+          'A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.',
+      },
+    },
+  },
+  argTypes: {
+    // @ts-expect-error: custom css property
+    '--stepper-bottom-bar-z-index': {
+      description: 'Customise the z-index of the stepper bottom bar',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+  },
+  args: {
+    steps: 3,
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MStepperBottomBar },
+    setup() {
+      const onUpdate = action('update:modelValue');
+      const onCancel = action('cancel');
+      const onValidate = action('validate');
+
+      return { args, onUpdate, onCancel, onValidate };
+    },
+    template: `
+        <MStepperBottomBar
+          v-bind="args"
+          @update:modelValue="onUpdate"
+          @cancel="onCancel"
+          @validate="onValidate"
+        />
+    `,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MStepperBottomBar>;
+
+export const First: Story = {};
+
+export const Middle: Story = {
+  args: {
+    modelValue: 2,
+  },
+};
+
+export const Last: Story = {
+  args: {
+    modelValue: 3,
+  },
+};

package/src/components/stepperbottombar/MStepperBottomBar.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="mc-stepper-bottom-bar">
+    <MDivider class="mc-stepper-bottom-bar__divider" />
+    <div class="mc-stepper-bottom-bar__left">
+      <MButton
+        v-if="cancel"
+        type="button"
+        ghost
+        size="s"
+        @click="emit('cancel')"
+      >
+        {{ cancelLabel }}
+      </MButton>
+    </div>
+
+    <div class="mc-stepper-bottom-bar__right">
+      <MButton
+        v-if="currentStep > 0"
+        type="button"
+        outlined
+        size="s"
+        @click="onPrevious"
+      >
+        {{ previousLabel }}
+      </MButton>
+
+      <MButton type="button" appearance="accent" size="s" @click="onNext">
+        {{ currentStep < steps ? nextLabel : validateLabel }}
+      </MButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import MButton from '../button/MButton.vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current step of the stepper compact.
+     */
+    modelValue?: number;
+    /**
+     * Total number of steps of the stepper compact.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancelLabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previousLabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextLabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validateLabel?: string;
+  }>(),
+  {
+    steps: 0,
+    modelValue: 0,
+    cancel: true,
+    cancelLabel: 'Cancel',
+    previousLabel: 'Previous',
+    nextLabel: 'Next',
+    validateLabel: 'Validate',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the cancel button is clicked.
+   */
+  (on: 'cancel'): void;
+  /**
+   * Emits when the step change.
+   */
+  (on: 'update:modelValue', value: number): void;
+  /**
+   * Emits when the validate button is clicked.
+   */
+  (on: 'validate'): void;
+}>();
+
+const currentStep = ref(0);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value !== undefined) {
+      currentStep.value = value;
+    }
+  },
+  { immediate: true },
+);
+
+watch(currentStep, (value) => {
+  emit('update:modelValue', value);
+});
+
+const onPrevious = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+};
+
+const onNext = () => {
+  if (currentStep.value < props.steps) {
+    currentStep.value++;
+  } else {
+    emit('validate');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/stepper-bottom-bar';
+</style>

package/src/components/stepperbottombar/README.md

@@ -0,0 +1,40 @@
+# MStepperBottomBar
+
+A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Current step of the stepper compact. | `number` | `0` |
+| `steps` | Total number of steps of the stepper compact. | `number` | `0` |
+| `cancel` | If `true`, display the cancel button. | `boolean` | `true` |
+| `cancelLabel` | Label for the cancel button. | `string` | `"Cancel"` |
+| `previousLabel` | Label for the previous button. | `string` | `"Previous"` |
+| `nextLabel` | Label for the next button. | `string` | `"Next"` |
+| `validateLabel` | Label for the validate button. | `string` | `"Validate"` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the step change. | [value: number] |
+| `cancel` | Emits when the cancel button is clicked. | [] |
+| `validate` | Emits when the validate button is clicked. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperBottomBar --> MButton
+  MStepperBottomBar --> MDivider
+style MStepperBottomBar fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/steppercompact/README.md

@@ -11,3 +11,17 @@ A stepper is a navigation component that guides users through a sequence of step
 | `maxSteps` | Maximum number of steps for the stepper compact. | `number` | `4` |
 | `label*` | Label of the stepper compact. | `string` | - |
 | `description` | Description displayed below the label of the stepper compact. | `string` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MCircularProgressbar](../circularprogressbar)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperCompact --> MCircularProgressbar
+style MStepperCompact fill:#008240,stroke:#333,stroke-width:4px
+```

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' },
+    ],
+  },
+};