@mozaic-ds/vue 2.10.0 → 2.12.0

package/src/components/statusmessage/MStatusMessage.spec.ts

@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MStatusMessage from './MStatusMessage.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';
+
+describe('MStatusMessage.vue', () => {
+  it('renders the label', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Hello world' },
+    });
+
+    expect(wrapper.find('.mc-status-message__description').text()).toBe(
+      'Hello world',
+    );
+  });
+
+  it('uses the info icon by default', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Info message' },
+    });
+
+    expect(wrapper.findComponent(InfoCircleFilled24).exists()).toBe(true);
+  });
+
+  it('renders the success icon when status is success', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { status: 'success', label: 'Success' },
+    });
+
+    expect(wrapper.findComponent(CheckCircleFilled24).exists()).toBe(true);
+  });
+
+  it('renders the warning icon when status is warning', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { status: 'warning', label: 'Warning' },
+    });
+
+    expect(wrapper.findComponent(WarningCircleFilled24).exists()).toBe(true);
+  });
+
+  it('renders the error icon when status is error', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { status: 'error', label: 'Error' },
+    });
+
+    expect(wrapper.findComponent(CrossCircleFilled24).exists()).toBe(true);
+  });
+
+  it('adds correct modifier class for non-info statuses', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { status: 'warning', label: 'Warn' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-status-message--warning');
+  });
+
+  it('does NOT add modifier class for info', () => {
+    const wrapper = mount(MStatusMessage, { props: { label: 'Info' } });
+
+    expect(wrapper.classes()).not.toContain('mc-status-message--info');
+  });
+
+  it('shows loader instead of icon when status is inprogress', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { status: 'inprogress', label: 'Loading' },
+    });
+
+    expect(wrapper.findComponent({ name: 'MLoader' }).exists()).toBe(true);
+
+    expect(wrapper.find('.mc-status-message__icon').exists()).toBe(false);
+  });
+});

package/src/components/statusmessage/MStatusMessage.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStatusMessage from './MStatusMessage.vue';
+
+const meta: Meta<typeof MStatusMessage> = {
+  title: 'Status/Status Message',
+  component: MStatusMessage,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '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.',
+      },
+    },
+  },
+  args: {
+    label: 'Brief status message',
+  },
+  render: (args) => ({
+    components: { MStatusMessage },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStatusMessage v-bind="args"></MStatusMessage>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusMessage>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Neutral: Story = {
+  args: { status: 'neutral' },
+};
+
+export const InProgress: Story = {
+  args: { status: 'inprogress' },
+};

package/src/components/statusmessage/MStatusMessage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="mc-status-message" :class="classObject">
+    <component
+      v-if="status != 'inprogress'"
+      :is="iconComponent"
+      class="mc-status-message__icon"
+      aria-hidden="true"
+    />
+    <MLoader v-else size="s" />
+    <p class="mc-status-message__description">{{ label }}</p>
+  </div>
+</template>
+
+<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 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.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the status message style.
+     */
+    status?:
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'error'
+      | 'neutral'
+      | 'inprogress';
+    /**
+     * Label of the status message.
+     */
+    label: string;
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-message--${props.status}`]:
+      props.status && props.status != 'info',
+  };
+});
+
+const iconComponent = computed(() => {
+  switch (props.status) {
+    case 'success':
+      return CheckCircleFilled24;
+    case 'warning':
+      return WarningCircleFilled24;
+    case 'error':
+      return CrossCircleFilled24;
+    case 'info':
+    default:
+      return InfoCircleFilled24;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-message';
+</style>

package/src/components/statusmessage/README.md

@@ -0,0 +1,11 @@
+# MStatusMessage
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
+| `label*` | Label of the status message. | `string` | - |

package/src/components/statusnotification/README.md

@@ -9,7 +9,7 @@ A Status Notification is used to draw the user’s attention to important inform
 | --- | --- | --- | --- | 
 | `title*` | Title of the status notification. | `string` | - |
 | `description*` | Description of the status notification. | `string` | - |
-| `status` | Allows to define the status notification type. | `"info"` `"success"` `"warning"` `"error"` | `"info"` |
+| `status` | Allows to define the status notification type. | `"info"` `"warning"` `"error"` `"success"` | `"info"` |
 | `closable` | if `true`, display the close button. | `boolean` | - |
 
 ## Slots

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

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MStepperCompact from './MStepperCompact.vue';
+
+describe('MStepperCompact component', () => {
+  it('renders with required label and optional description', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Current Step',
+      },
+    });
+
+    expect(wrapper.find('.mc-stepper-compact').exists()).toBe(true);
+    expect(wrapper.find('.mc-stepper-compact__progress').exists()).toBe(true);
+    expect(wrapper.find('.mc-stepper-compact__label').text()).toBe(
+      'Current Step',
+    );
+
+    // description should NOT be rendered by default
+    expect(wrapper.find('.mc-stepper-compact__description').exists()).toBe(
+      false,
+    );
+  });
+
+  it('calculates progress value correctly', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Current Step',
+        value: 2,
+        maxSteps: 5,
+      },
+    });
+
+    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });
+
+    expect(progressbar.props('value')).toBe(40); // (2/5) * 100
+  });
+
+  it('displays correct content value (current step / total)', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Current Step',
+        value: 3,
+        maxSteps: 7,
+      },
+    });
+
+    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });
+
+    expect(progressbar.props('contentValue')).toBe('3 / 7');
+  });
+
+  it('passes correct props to MCircularProgressbar', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Current Step',
+        value: 2,
+        maxSteps: 4,
+      },
+    });
+
+    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });
+
+    expect(progressbar.props('type')).toBe('content');
+    expect(progressbar.props('size')).toBe('m');
+    expect(progressbar.props('value')).toBe(50); // (2/4) * 100
+    expect(progressbar.props('contentValue')).toBe('2 / 4');
+  });
+
+  it('renders custom label and description when provided', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Custom Label',
+        description: 'Custom Description',
+      },
+    });
+
+    expect(wrapper.find('.mc-stepper-compact__label').text()).toBe(
+      'Custom Label',
+    );
+    expect(wrapper.find('.mc-stepper-compact__description').text()).toBe(
+      'Custom Description',
+    );
+  });
+
+  it('does not render description element when description is empty', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: {
+        label: 'Label Only',
+        description: undefined,
+      },
+    });
+
+    expect(wrapper.find('.mc-stepper-compact__description').exists()).toBe(
+      false,
+    );
+  });
+});

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStepperCompact from './MStepperCompact.vue';
+
+const meta: Meta<typeof MStepperCompact> = {
+  title: 'Indicators/Stepper Compact',
+  component: MStepperCompact,
+  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.',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 1, max: 10 },
+    },
+    maxSteps: {
+      control: { type: 'number', min: 2, max: 10 },
+    },
+  },
+  args: {
+    value: 1,
+    maxSteps: 4,
+    label: 'Current Step',
+    description: 'Next: Step label',
+  },
+  render: (args) => ({
+    components: { MStepperCompact },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStepperCompact v-bind="args"></MStepperCompact>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStepperCompact>;
+
+export const Default: Story = {};

package/src/components/steppercompact/MStepperCompact.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="mc-stepper-compact">
+    <div class="mc-circular-progressbar mc-stepper-compact__progress">
+      <MCircularProgressbar
+        aria-label="Progress bar"
+        type="content"
+        size="m"
+        :value="progressValue"
+        :content-value="contentValue"
+        class="mc-stepper-compact__indicator mc-stepper-compact__number"
+      />
+    </div>
+    <div class="mc-stepper-compact__label-container">
+      <p class="mc-stepper-compact__label">
+        {{ label }}
+      </p>
+      <p v-if="description" class="mc-stepper-compact__description">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MCircularProgressbar from '../circularprogressbar/MCircularProgressbar.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<{
+    /**
+     * Current step of the stepper compact.
+     */
+    value?: number;
+    /**
+     * Maximum number of steps for the stepper compact.
+     */
+    maxSteps?: number;
+    /**
+     * Label of the stepper compact.
+     */
+    label: string;
+    /**
+     * Description displayed below the label of the stepper compact.
+     */
+    description?: string;
+  }>(),
+  {
+    value: 1,
+    maxSteps: 4,
+  },
+);
+
+const progressValue = computed(() => {
+  const value = props.value ?? 0;
+  const max = props.maxSteps ?? 1;
+  return Math.round((value / max) * 100);
+});
+
+const contentValue = computed(() => {
+  return `${props.value} / ${props.maxSteps}`;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/stepper-compact';
+@use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar'
+  as *;
+
+.mc-stepper-compact__progress {
+  width: $spacing-600;
+  height: $spacing-600;
+
+  ::v-deep(.mc-circular-progressbar__content) {
+    display: block;
+    visibility: visible;
+  }
+
+  ::v-deep(.mc-circular-progressbar__number) {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  ::v-deep(.mc-circular-progressbar__number) {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  ::v-deep(.mc-circular-progressbar__indicator) {
+    @include calculate-border-width(4, 48, 100);
+    stroke: $stepper-color-progress-bar-indicator;
+    fill: none;
+    stroke-linecap: round;
+  }
+}
+</style>

package/src/components/steppercompact/README.md

@@ -0,0 +1,13 @@
+# MStepperCompact
+
+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 |
+| --- | --- | --- | --- | 
+| `value` | Current step of the stepper compact. | `number` | `1` |
+| `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` | - |

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