@mozaic-ds/vue 2.9.0 → 2.11.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/loader/MLoader.spec.ts

@@ -134,12 +134,12 @@ describe('MLoader component', () => {
   it('sets correct viewBox for xs size', async () => {
     const wrapper = mount(MLoader, { props: { size: 'xs' } });
     const svg = wrapper.find('svg.mc-loader__icon');
-    expect(svg.attributes('viewBox')).toBe('0 0 24 24');
+    expect(svg.attributes('viewBox')).toBe('0 0 20 20');
   });
 
   it('sets correct circle radius for xs size', async () => {
     const wrapper = mount(MLoader, { props: { size: 'xs' } });
     const circle = wrapper.find('circle.mc-loader__path');
-    expect(circle.attributes('r')).toBe('3');
+    expect(circle.attributes('r')).toBe('6');
   });
 });

package/src/components/loader/MLoader.vue

@@ -61,7 +61,7 @@ const setViewBox = computed(() => {
 
   switch (props.size) {
     case 'xs':
-      viewBox = '0 0 24 24';
+      viewBox = '0 0 20 20';
       break;
     case 's':
       viewBox = '0 0 24 24';
@@ -80,7 +80,7 @@ const setCircleRadius = computed(() => {
 
   switch (props.size) {
     case 'xs':
-      circleRadius = 3;
+      circleRadius = 6;
       break;
     case 's':
       circleRadius = 6;

package/src/components/phonenumber/MPhoneNumber.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import MPhoneNumber from './MPhoneNumber.vue';
-import { isValidPhoneNumber } from 'libphonenumber-js';
+import { isValidPhoneNumber, type CountryCode } from 'libphonenumber-js';
 
 vi.mock('libphonenumber-js', () => ({
   default: vi.fn(),
@@ -291,4 +291,113 @@ describe('MPhoneNumber', () => {
       expect((input.element as HTMLInputElement).value).toBe('+33123456789');
     });
   });
+
+  describe('Locale', () => {
+    it('should use French locale by default', () => {
+      const options = wrapper.findAll('option');
+      const franceOption = options.find(
+        (opt) => opt.attributes('value') === 'FR',
+      );
+      expect(franceOption?.text()).toContain('France');
+    });
+
+    it('should display country names in specified locale', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, locale: 'en' },
+      });
+      const options = wrapper.findAll('option');
+      const franceOption = options.find(
+        (opt) => opt.attributes('value') === 'FR',
+      );
+      // Country names should be translated according to the locale
+      expect(franceOption?.text()).toBeTruthy();
+    });
+
+    it('should update country names when locale prop changes', async () => {
+      await wrapper.setProps({ locale: 'es' });
+      await nextTick();
+      const options = wrapper.findAll('option');
+      expect(options.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('Country Codes', () => {
+    it('should display all countries by default', () => {
+      const options = wrapper.findAll('option');
+      // Minus 1 for the empty hidden option
+      expect(options.length - 1).toBe(5); // Mocked to return 5 countries
+    });
+
+    it('should display only specified countries when countryCodes prop is provided', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          countryCodes: ['FR', 'US', 'GB'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(4);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'US')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'GB')).toBe(
+        true,
+      );
+    });
+
+    it('should update available countries when countryCodes prop changes', async () => {
+      await wrapper.setProps({ countryCodes: ['FR', 'DE'] as CountryCode[] });
+      await nextTick();
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(3);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'DE')).toBe(
+        true,
+      );
+    });
+
+    it('should work with single country in countryCodes', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          countryCodes: ['FR'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(2);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+    });
+
+    it('should combine locale and countryCodes props', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          locale: 'en',
+          countryCodes: ['US', 'GB', 'CA'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(4);
+      expect(options.some((opt) => opt.attributes('value') === 'US')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'GB')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'CA')).toBe(
+        true,
+      );
+    });
+  });
 });

package/src/components/phonenumber/MPhoneNumber.stories.ts

@@ -86,3 +86,17 @@ export const ReadOnly: Story = {
     readonly: true,
   },
 };
+
+export const LimitedCountries: Story = {
+  args: {
+    countryCodes: ['FR', 'US', 'GB', 'DE', 'ES', 'IT'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Limit the country selector to only specific countries instead of showing all available countries.',
+      },
+    },
+  },
+};

package/src/components/phonenumber/MPhoneNumber.vue

@@ -116,6 +116,14 @@ const props = withDefaults(
      * If `true`, display the country flag selector
      */
     flag?: boolean;
+    /**
+     * Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt').
+     */
+    locale?: string;
+    /**
+     * List of country codes to display in the selector. If not provided, all countries will be shown.
+     */
+    countryCodes?: CountryCode[];
   }>(),
   {
     modelValue: '',
@@ -123,12 +131,15 @@ const props = withDefaults(
     size: 'm',
     prefix: true,
     flag: true,
+    locale: 'en',
   },
 );
 
 const phoneNumber = ref(props.modelValue);
 const selectedCountry = ref<CountryCode>(props.defaultCountry);
-const countries = getCountries();
+const countries = computed(() => {
+  return props.countryCodes || getCountries();
+});
 
 const dynamicPlaceholder = computed(() => {
   if (props.placeholder && props.placeholder.length > 0) {
@@ -155,12 +166,11 @@ const parsedNumber = computed(() => {
   }
 });
 
-const getCountryName = (
-  countryCode: CountryCode,
-  locale: string = 'fr',
-): string => {
+const getCountryName = (countryCode: CountryCode): string => {
   try {
-    const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
+    const regionNames = new Intl.DisplayNames([props.locale], {
+      type: 'region',
+    });
     return regionNames.of(countryCode) || countryCode;
   } catch {
     return countryCode;

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