@mozaic-ds/vue 2.10.0 → 2.12.0

package/src/components/kpiitem/MKpiItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="mc-kpi" :class="rootClasses">
+    <span v-if="isMedium && label" class="mc-kpi__label">
+      {{ label }}
+    </span>
+    <div class="mc-kpi__content">
+      <div class="mc-kpi__main">
+        <span v-if="isLarge && label" class="mc-kpi__label">
+          {{ label }}
+        </span>
+        <span class="mc-kpi__value">{{ value }}</span>
+      </div>
+      <div v-if="trend || information" class="mc-kpi__aside">
+        <span v-if="isLarge && information" class="mc-kpi__detail">
+          {{ information }}
+        </span>
+
+        <component v-if="trend" :is="getIconComponent" class="mc-kpi__icon" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue';
+import ArrowBottomRight24 from '@mozaic-ds/icons-vue/src/components/ArrowBottomRight24/ArrowBottomRight24.vue';
+import ArrowTopRight24 from '@mozaic-ds/icons-vue/src/components/ArrowTopRight24/ArrowTopRight24.vue';
+import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
+/**
+ * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current value of the kpi item.
+     */
+    value: string;
+    /**
+     * Defines the evolution of the kpi.
+     */
+    trend?: 'increasing' | 'decreasing' | 'stable';
+    /**
+     * Label of the kpi item.
+     */
+    label?: string;
+    /**
+     * Allows to define the kpi item status.
+     */
+    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';
+    /**
+     * The evolution information defining the kpi.
+     */
+    information?: string;
+    /**
+     * Allows to define the kpi item size.
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    size: 's',
+    status: 'info',
+  },
+);
+
+const isMedium = computed(() => props.size === 'm');
+const isLarge = computed(() => props.size === 'l');
+
+const iconMap: Record<
+  NonNullable<Exclude<typeof props.trend, undefined>>,
+  Component
+> = {
+  increasing: ArrowTopRight24,
+  decreasing: ArrowBottomRight24,
+  stable: Less24,
+};
+
+const getIconComponent = computed<Component | undefined>(() =>
+  props.trend ? iconMap[props.trend] : undefined,
+);
+
+const rootClasses = computed(() => [
+  `mc-kpi--${props.size}`,
+  `mc-kpi--${props.status}`,
+]);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/kpi-item';
+</style>

package/src/components/kpiitem/README.md

@@ -0,0 +1,15 @@
+# MKpiItem
+
+A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `value*` | The current value of the kpi item. | `string` | - |
+| `trend` | Defines the evolution of the kpi. | `"increasing"` `"decreasing"` `"stable"` | - |
+| `label` | Label of the kpi item. | `string` | - |
+| `status` | Allows to define the kpi item status. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |
+| `information` | The evolution information defining the kpi. | `string` | - |
+| `size` | Allows to define the kpi item size. | `"s"` `"m"` `"l"` | `"s"` |

package/src/components/phonenumber/README.md

@@ -17,6 +17,8 @@ A phone number input is a specialized input field designed to capture and valida
 | `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
 | `prefix` | If `true`, display the country calling code prefix (+33, +1, etc.). | `boolean` | `true` |
 | `flag` | If `true`, display the country flag selector | `boolean` | `true` |
+| `locale` | Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt'). | `string` | `"en"` |
+| `countryCodes` | List of country codes to display in the selector. If not provided, all countries will be shown. | `CountryCode[]` | - |
 
 ## Events
 

package/src/components/starrating/MStarRating.spec.ts

@@ -0,0 +1,203 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { nextTick } from 'vue';
+import MStarRating from './MStarRating.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';
+
+function mockRect(el: Element, { left = 0, width = 100 } = {}) {
+  Object.defineProperty(el, 'getBoundingClientRect', {
+    value: () => ({
+      left,
+      width,
+      top: 0,
+      bottom: 0,
+      right: left + width,
+      height: 0,
+    }),
+    configurable: true,
+  });
+}
+
+describe('MStarRating', () => {
+  it('renders 5 stars by default', () => {
+    const wrapper = shallowMount(MStarRating, { props: { modelValue: 0 } });
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    expect(stars.length).toBe(5);
+  });
+
+  it('renders 1 star when compact mode is enabled', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 0, compact: true },
+    });
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    expect(stars.length).toBe(1);
+  });
+
+  it('does not render half star on input mode', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 0, readonly: false },
+    });
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const first = stars[0];
+    mockRect(first.element, { left: 0, width: 100 });
+    await first.trigger('mousemove', { clientX: 10 });
+    expect(wrapper.findComponent(StarHalf24).exists()).toBe(false);
+  });
+
+  it('render half star on readonly mode if possible', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 1.5, readonly: true },
+    });
+    const filledStars = wrapper.findAllComponents(StarFilled24);
+    const halfStars = wrapper.findAllComponents(StarHalf24);
+    expect(filledStars.length).toBe(1);
+    expect(halfStars.length).toBe(1);
+  });
+
+  it('emits update:modelValue with the correct value when clicking a star', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, readonly: false },
+    });
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const first = stars[0];
+    mockRect(first.element, { left: 0, width: 100 });
+    await first.trigger('click', { clientX: 10 });
+    const emitted = wrapper.emitted('update:modelValue') || [];
+    expect(emitted.length).toBe(1);
+    expect(emitted[0][0]).toBe(1);
+  });
+
+  it('emits the correct values when pressing ArrowRight', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, readonly: false },
+    });
+
+    const ratingInput = wrapper.find('.mc-star-rating__wrapper');
+
+    await ratingInput.trigger('keydown', { key: 'ArrowRight' });
+    const emitted = wrapper.emitted('update:modelValue') || [];
+    expect(emitted.length).toBe(1);
+    expect(emitted[0][0]).toBe(3);
+  });
+
+  it('emits the correct values when pressing ArrowLeft', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, readonly: false },
+    });
+
+    const ratingInput = wrapper.find('.mc-star-rating__wrapper');
+    await ratingInput.trigger('keydown', { key: 'ArrowLeft' });
+    const emitted = wrapper.emitted('update:modelValue') || [];
+    expect(emitted.length).toBe(1);
+    expect(emitted[0][0]).toBe(1);
+  });
+
+  it('does not do anything if the wrong key is pressed', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, readonly: false },
+    });
+    const ratingInput = wrapper.find('.mc-star-rating__wrapper');
+    await ratingInput.trigger('keydown', { key: 'ArrowUp' });
+    const emitted = wrapper.emitted('update:modelValue') || [];
+    expect(emitted.length).toBe(0);
+  });
+
+  it('resets hover to null on mouseleave (aria-label falls back to modelValue)', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, size: 'm', readonly: false },
+    });
+
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const first = stars[0];
+    mockRect(first.element, { left: 0, width: 100 });
+
+    await first.trigger('mousemove', { clientX: 10 });
+    await nextTick();
+
+    // aria-label should reflect hovered value (0.5) not modelValue (2)
+    const root = wrapper.find('[role="slider"]');
+    expect(root.attributes('aria-label')).toContain('1');
+
+    // trigger mouseleave on root, hover should be cleared and aria-label revert to modelValue
+    await root.trigger('mouseleave');
+    await nextTick();
+    expect(root.attributes('aria-label')).toContain('2');
+  });
+
+  it('resets hover to null on blur (aria-label falls back to modelValue)', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 3, size: 'm', readonly: false },
+    });
+
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const secondStar = stars[1];
+    mockRect(secondStar.element, { left: 0, width: 100 });
+
+    const root = wrapper.find('[role="slider"]');
+
+    await root.trigger('focus');
+    await secondStar.trigger('mousemove', { clientX: 10 });
+    await nextTick();
+    expect(root.attributes('aria-label')).toContain('2');
+
+    // blur should clear hover and revert aria-label to modelValue (3)
+    await root.trigger('blur');
+    await nextTick();
+    expect(root.attributes('aria-label')).toContain('3');
+  });
+
+  it('renders information text when text prop is provided', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 3, text: 'Note publique' },
+    });
+
+    const info = wrapper.find('.mc-star-rating__info');
+    expect(info.exists()).toBe(true);
+    expect(info.text()).toBe('Note publique');
+  });
+
+  it('renders href when href prop is provided and text is not', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, href: '/voir' },
+    });
+
+    const info = wrapper.find('.mc-star-rating__info');
+    expect(info.exists()).toBe(true);
+    expect(info.text()).toBe('/voir');
+  });
+
+  it('does not render info span when neither text nor href is provided', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 1 },
+    });
+
+    const info = wrapper.find('.mc-star-rating__info');
+    expect(info.exists()).toBe(false);
+  });
+
+  it('renders router-link when href and router are provided', () => {
+    const wrapper = mount(MStarRating, {
+      props: { modelValue: 3, href: '/path', router: true },
+      global: { stubs: ['router-link'] },
+    });
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('router-link-stub');
+  });
+
+  it('renders an anchor when href is provided and router is falsy', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 2, href: '#', router: false },
+    });
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('a');
+  });
+
+  it('renders a div when no href is provided', () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 1 },
+    });
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('div');
+  });
+});

package/src/components/starrating/MStarRating.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStarRating from './MStarRating.vue';
+
+const meta: Meta<typeof MStarRating> = {
+  title: 'Indicators/Star rating',
+  component: MStarRating,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '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.',
+      },
+    },
+  },
+  args: {
+    modelValue: 3.5,
+    appearance: 'accent',
+    readonly: true,
+  },
+  render: (args) => ({
+    components: { MStarRating },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStarRating v-model="args.modelValue" v-bind="args"></MStarRating>
+    `,
+  }),
+};
+export default meta;
+
+type Story = StoryObj<typeof MStarRating>;
+
+export const Default: Story = {};
+
+export const AsInput: Story = {
+  args: {
+    readonly: false,
+    modelValue: 0,
+  },
+};
+
+export const SizeM: Story = {
+  args: {
+    size: 'm',
+  },
+};
+
+export const SizeL: Story = {
+  args: {
+    size: 'l',
+  },
+};
+
+export const StandardAppearance: Story = {
+  args: {
+    appearance: 'standard',
+  },
+};
+
+export const WithText: Story = {
+  args: {
+    appearance: 'accent',
+    text: 'Additional text',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    appearance: 'accent',
+    text: 'Additional text',
+    href: '#',
+  },
+};
+
+export const CompactModeWithText: Story = {
+  args: {
+    compact: true,
+    appearance: 'accent',
+    text: '(35)',
+  },
+};

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"` | - |