@mozaic-ds/vue 2.9.0 → 2.11.0

package/src/components/starrating/MStarRating.vue

@@ -0,0 +1,187 @@
+<template>
+  <component
+    class="mc-star-rating"
+    :class="classObject"
+    :is="rootTag"
+    :href="props.href"
+    :to="props.href"
+    :target="props.target"
+  >
+    <div
+      class="mc-star-rating__wrapper"
+      :tabindex="isReadonly ? -1 : 0"
+      :role="isReadonly ? 'img' : 'slider'"
+      :aria-label="`Note ${displayValue} sur ${maxValue}`"
+      v-bind="
+        !isReadonly
+          ? {
+              'aria-valuemin': 0,
+              'aria-valuemax': maxValue,
+              'aria-valuenow': rating,
+              'aria-readonly': false,
+            }
+          : {}
+      "
+      v-on="
+        isReadonly
+          ? {}
+          : {
+              keydown: onKeydown,
+              mouseleave: clearHover,
+              blur: clearHover,
+            }
+      "
+    >
+      <component
+        v-for="(_, index) in maxValue"
+        :key="index"
+        :is="getStarComponent(index)"
+        class="mc-star-rating__icon"
+        v-on="
+          !isReadonly
+            ? {
+                mousemove: () => onHover(index),
+                click: () => onClick(index),
+              }
+            : {}
+        "
+      />
+    </div>
+
+    <span v-if="props.text || props.href" class="mc-star-rating__info">
+      {{ text || href }}
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import Star24 from '@mozaic-ds/icons-vue/src/components/Star24/Star24.vue';
+import StarFilled24 from '@mozaic-ds/icons-vue/src/components/StarFilled24/StarFilled24.vue';
+import StarHalf24 from '@mozaic-ds/icons-vue/src/components/StarHalf24/StarHalf24.vue';
+
+/**
+ * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Determines whether the rating is interactive or read-only.
+     * When true, all user interactions (click, hover, keyboard) are disabled.
+     * Automatically set to true when `compact`, `href`, or `information` are provided.
+     *
+     */
+    readonly?: boolean;
+    /**
+     * Defines the visual size of the star icons and the accompanying text.
+     *
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Enables a compact display mode that shows only one star instead of five.
+     * Typically used for summaries or quick visual cues.
+     * When enabled, the component automatically becomes read-only.
+     *
+     */
+    compact?: boolean;
+    /**
+     * Specifies the color scheme of the stars.
+     *
+     */
+    appearance?: 'standard' | 'accent';
+    /**
+     * Optional text displayed next to the star rating.
+     * If provided, the component automatically becomes read-only.
+     */
+    text?: string;
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+  }>(),
+  {
+    readonly: true,
+    size: 's',
+    compact: false,
+    appearance: 'accent',
+  },
+);
+
+const hover = ref<number | null>(null);
+
+/**
+ * The current rating value of the component.
+ * Used with `v-model` for two-way data binding.
+ * When the rating changes (via click or keyboard), an `update:modelValue` event is emitted.
+ */
+const rating = defineModel<number>({ required: true });
+
+const rootTag = computed(() => {
+  if (props.href) return props.router ? 'router-link' : 'a';
+  return 'div';
+});
+
+const isReadonly = computed(() =>
+  [props.readonly, props.compact, props.href, props.text].some(Boolean),
+);
+
+const classObject = computed(() => ({
+  'mc-star-rating--link': props.href,
+  'mc-star-rating--slider': !isReadonly.value,
+  [`mc-star-rating--${props.size}`]: props.size,
+  [`mc-star-rating--${props.appearance}`]: props.appearance,
+}));
+
+const displayValue = computed(() => hover.value ?? rating.value);
+const maxValue = computed(() => (props.compact ? 1 : 5));
+
+function getStarComponent(index: number) {
+  if (props.compact || displayValue.value >= index + 1) {
+    return StarFilled24;
+  } else if (isReadonly.value && displayValue.value >= index + 0.5) {
+    return StarHalf24;
+  } else {
+    return Star24;
+  }
+}
+
+function onHover(index: number) {
+  hover.value = index + 1;
+}
+
+function clearHover() {
+  hover.value = null;
+}
+
+function onClick(index: number) {
+  rating.value = index + 1;
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const key = e.key;
+  let newValue = Math.floor(rating.value);
+
+  if (key === 'ArrowRight') {
+    newValue = Math.min(maxValue.value, newValue + 1);
+  } else if (key === 'ArrowLeft') {
+    newValue = Math.max(1, newValue - 1);
+  } else return;
+
+  rating.value = newValue;
+
+  e.preventDefault();
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/star-rating';
+</style>

package/src/components/starrating/README.md

@@ -0,0 +1,31 @@
+# MStarRating
+
+A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `readonly` | Determines whether the rating is interactive or read-only.
+When true, all user interactions (click, hover, keyboard) are disabled.
+Automatically set to true when `compact`, `href`, or `information` are provided. | `boolean` | `true` |
+| `size` | Defines the visual size of the star icons and the accompanying text. | `"s"` `"m"` `"l"` | `"s"` |
+| `compact` | Enables a compact display mode that shows only one star instead of five.
+Typically used for summaries or quick visual cues.
+When enabled, the component automatically becomes read-only. | `boolean` | `false` |
+| `appearance` | Specifies the color scheme of the stars. | `"standard"` `"accent"` | `"accent"` |
+| `text` | Optional text displayed next to the star rating.
+If provided, the component automatically becomes read-only. | `string` | - |
+| `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - |
+| `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
+| `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - |
+| `modelValue*` | The current rating value of the component.
+Used with `v-model` for two-way data binding.
+When the rating changes (via click or keyboard), an `update:modelValue` event is emitted. | `number` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: number]` |

package/src/components/statusbadge/README.md

@@ -8,4 +8,4 @@ A Status Badge is used to indicate the current status of an element, providing a
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `label*` | Content of the status badge | `string` | - |
-| `status` | Allows to define the status badge type | `"info"` `"success"` `"warning"` `"error"` `"neutral"` | `"info"` |
+| `status` | Allows to define the status badge type | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |

package/src/components/statusdot/README.md

@@ -7,5 +7,5 @@ A Status dot is a small visual indicator used to represent the state or conditio
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `status` | Allows to define the status dot type. | `"info"` `"success"` `"warning"` `"error"` `"neutral"` | `"info"` |
+| `status` | Allows to define the status dot type. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |
 | `size` | Determines the size of the status dot. | `"s"` `"m"` `"l"` | - |

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 = {};