@mozaic-ds/vue 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -41,7 +41,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.1.0",
+    "@mozaic-ds/styles": "^2.4.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"

package/src/components/kpiitem/MKpiItem.spec.ts

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import KpiItem from './MKpiItem.vue';
+
+describe('MKpiItem component', () => {
+  it('renders the large size correctly', () => {
+    const wrapper = mount(KpiItem, {
+      props: {
+        value: '85%',
+        label: 'Completion Rate',
+        trend: 'increasing',
+        information: 'Above target',
+        size: 'l',
+      },
+    });
+    expect(wrapper.text()).toContain('85%');
+    expect(wrapper.text()).toContain('Completion Rate');
+    expect(wrapper.text()).toContain('Above target');
+    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
+  });
+
+  it('renders the medium size component correctly', () => {
+    const wrapper = mount(KpiItem, {
+      props: {
+        value: '85%',
+        label: 'Completion Rate',
+        information: 'Above target',
+        trend: 'increasing',
+        size: 'm',
+      },
+    });
+    expect(wrapper.text()).toContain('85%');
+    expect(wrapper.text()).toContain('Completion Rate');
+    expect(wrapper.text()).not.toContain('Above target');
+    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
+  });
+
+  it('renders the small size component correctly', () => {
+    const wrapper = mount(KpiItem, {
+      props: {
+        value: '85%',
+        label: 'Completion Rate',
+        information: 'Above target',
+        trend: 'increasing',
+        size: 's',
+      },
+    });
+    expect(wrapper.text()).toContain('85%');
+    expect(wrapper.text()).not.toContain('Completion Rate');
+    expect(wrapper.text()).not.toContain('Above target');
+    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
+  });
+
+  describe('trend icon', () => {
+    it('does not render the icon when trend prop is not provided', () => {
+      const wrapper = mount(KpiItem, {
+        props: { value: '123' },
+      });
+
+      expect(wrapper.find('.mc-kpi__icon').exists()).toBe(false);
+    });
+
+    it('renders the icon when trend prop is  provided', () => {
+      const wrapper = mount(KpiItem, {
+        props: { value: '123', trend: 'increasing' },
+      });
+
+      expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
+    });
+  });
+});

package/src/components/kpiitem/MKpiItem.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MKpiItem from './MKpiItem.vue';
+
+const meta: Meta<typeof MKpiItem> = {
+  title: 'Status/Kpi Item',
+  component: MKpiItem,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '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.',
+      },
+    },
+  },
+  args: {
+    value: '99.99%',
+    label: 'Label',
+    size: 's',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['s', 'm', 'l'],
+    },
+    trend: {
+      control: { type: 'radio' },
+      options: ['increasing', 'decreasing', 'stable', undefined],
+    },
+    status: {
+      control: { type: 'radio' },
+      options: ['info', 'warning', 'error', 'success', 'neutral'],
+    },
+  },
+  render: (args) => ({
+    components: { MKpiItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MKpiItem v-bind="args"></MKpiItem>
+    `,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MKpiItem>;
+
+export const LargeWithIconAndInformation: Story = {
+  args: {
+    trend: 'increasing',
+    information: '> 10% expected',
+    size: 'l',
+  },
+};
+
+export const MediumWithIconAndLabel: Story = {
+  args: {
+    trend: 'increasing',
+    size: 'm',
+  },
+};
+
+export const SmallWithIcon: Story = {
+  args: {
+    trend: 'increasing',
+    size: 's',
+  },
+};

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