@mozaic-ds/vue 2.9.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -41,8 +41,8 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.0.1",
-    "@mozaic-ds/web-fonts": "1.65.0",
+    "@mozaic-ds/styles": "^2.1.0",
+    "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
   },
@@ -52,22 +52,24 @@
     "@mozaic-ds/css-dev-tools": "1.75.0",
     "@mozaic-ds/icons-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^10.0.1",
-    "@storybook/addon-a11y": "^9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-themes": "^9.0.18",
-    "@storybook/vue3-vite": "^9.0.18",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-themes": "^10.0.4",
+    "@storybook/vue3-vite": "^10.0.4",
     "@types/jsdom": "^27.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/coverage-v8": "^4.0.7",
     "@vitest/eslint-plugin": "^1.1.38",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.22.0",
+    "eslint-plugin-storybook": "^10.0.5",
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "husky": "^9.1.7",
     "jsdom": "^27.0.0",
+    "libphonenumber-js": "^1.12.23",
     "lint-staged": "^16.1.5",
     "mdx-mermaid": "^2.0.3",
     "mermaid": "^11.5.0",
@@ -75,15 +77,14 @@
     "prettier": "^3.5.3",
     "release-it": "^19.0.4",
     "sass": "^1.86.0",
-    "storybook": "^9.0.18",
-    "storybook-addon-tag-badges": "^2.0.2",
+    "storybook": "^10.0.4",
+    "storybook-addon-tag-badges": "^3.0.2",
     "typescript": "^5.7.2",
     "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^4.0.7",
     "vue-component-meta": "^3.0.8",
-    "vue-eslint-parser": "^10.1.1",
-    "libphonenumber-js": "^1.12.23"
+    "vue-eslint-parser": "^10.1.1"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/carousel/MCarousel.spec.ts

@@ -0,0 +1,138 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import MCarousel from './MCarousel.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import ChevronLeft20 from '@mozaic-ds/icons-vue/src/components/ChevronLeft20/ChevronLeft20.vue';
+import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+class MockIntersectionObserver {
+  callback: any;
+  options: any;
+  constructor(callback: any, options?: any) {
+    this.callback = callback;
+    this.options = options;
+  }
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+}
+
+describe('MCarousel component', () => {
+  let originalObserver: any;
+
+  beforeAll(() => {
+    originalObserver = global.IntersectionObserver;
+    global.IntersectionObserver = MockIntersectionObserver as any;
+
+    Object.defineProperty(window.HTMLElement.prototype, 'scrollIntoView', {
+      value: vi.fn(),
+      writable: true,
+    });
+  });
+
+  afterAll(() => {
+    global.IntersectionObserver = originalObserver;
+  });
+
+  const mockChildren = [
+    '<div class="slide">Slide 1</div>',
+    '<div class="slide">Slide 2</div>',
+    '<div class="slide">Slide 3</div>',
+  ];
+
+  const mountCarousel = (options = {}) =>
+    mount(MCarousel, {
+      attachTo: document.body,
+      slots: {
+        default: mockChildren.join(''),
+        header: '<h2 id="mc-carousel__title">Carousel Header</h2>',
+      },
+      ...options,
+    });
+
+  it('renders correctly with header and default slot', () => {
+    const wrapper = mountCarousel();
+    expect(wrapper.find('.mc-carousel__headings').text()).toContain(
+      'Carousel Header',
+    );
+    expect(wrapper.findAll('.slide')).toHaveLength(3);
+  });
+
+  it('renders navigation buttons with correct aria labels', () => {
+    const wrapper = mountCarousel({
+      props: {
+        previousButtonAriaLabel: 'Go back',
+        nextButtonAriaLabel: 'Go forward',
+      },
+    });
+
+    const buttons = wrapper.findAllComponents(MIconButton);
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].attributes('aria-label')).toBe('Go back');
+    expect(buttons[1].attributes('aria-label')).toBe('Go forward');
+  });
+
+  it('renders default aria labels when not provided', () => {
+    const wrapper = mountCarousel();
+    const buttons = wrapper.findAllComponents(MIconButton);
+    expect(buttons[0].attributes('aria-label')).toBe('previous');
+    expect(buttons[1].attributes('aria-label')).toBe('next');
+  });
+
+  it('renders icon components inside navigation buttons', () => {
+    const wrapper = mountCarousel();
+    expect(wrapper.findComponent(ChevronLeft20).exists()).toBe(true);
+    expect(wrapper.findComponent(ChevronRight20).exists()).toBe(true);
+  });
+
+  it('disables the previous button when on the first slide', () => {
+    const wrapper = mountCarousel();
+    const [prevButton] = wrapper.findAllComponents(MIconButton);
+    expect(prevButton.props('disabled')).toBe(true);
+  });
+
+  it('scrolls to next slide when goNext is called', async () => {
+    const scrollIntoViewMock = vi.fn();
+    (window.HTMLElement.prototype.scrollIntoView as any) = scrollIntoViewMock;
+
+    const wrapper = mountCarousel();
+    const vm = wrapper.vm as any;
+    vi.spyOn(vm, 'getCarouselChildren').mockReturnValue([
+      { scrollIntoView: scrollIntoViewMock },
+      { scrollIntoView: scrollIntoViewMock },
+      { scrollIntoView: scrollIntoViewMock },
+    ]);
+
+    vm.goNext();
+    expect(scrollIntoViewMock).toHaveBeenCalled();
+  });
+
+  it('scrolls to previous slide when goPrevious is called', async () => {
+    const scrollIntoViewMock = vi.fn();
+    (window.HTMLElement.prototype.scrollIntoView as any) = scrollIntoViewMock;
+
+    const wrapper = mountCarousel();
+    const vm = wrapper.vm as any;
+    vi.spyOn(vm, 'getCarouselChildren').mockReturnValue([
+      { scrollIntoView: scrollIntoViewMock },
+      { scrollIntoView: scrollIntoViewMock },
+      { scrollIntoView: scrollIntoViewMock },
+    ]);
+
+    vm.goNext();
+    vm.goNext();
+    vm.goPrevious();
+
+    expect(scrollIntoViewMock).toHaveBeenCalled();
+  });
+
+  it('sets correct ARIA attributes on main container', () => {
+    const wrapper = mountCarousel();
+    const container = wrapper.find('.mc-carousel');
+    expect(container.attributes('role')).toBe('group');
+    expect(container.attributes('aria-roledescription')).toBe('carousel');
+    expect(container.attributes('aria-labelledby')).toBe('mc-carousel__title');
+  });
+});

package/src/components/carousel/MCarousel.stories.ts

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCarousel from './MCarousel.vue';
+import MLink from '../link/MLink.vue';
+import ArrowNext24 from '@mozaic-ds/icons-vue/src/components/ArrowNext24/ArrowNext24.vue';
+
+const meta: Meta<typeof MCarousel> = {
+  title: 'Content/Carousel',
+  component: MCarousel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.',
+      },
+    },
+  },
+  argTypes: {
+    'aria-labelledby': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    'aria-labelledby': 'defaultCarousel',
+    header:
+      '<h2 class="mc-carousel__title mt-title--m" id="defaultCarousel">Title of the carousel</h2>',
+    default: `
+        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__1">
+          <img class="free-content__image"
+                src="https://picsum.photos/id/1/600/300" alt="card 1">
+          <div id="free-content__1" class="free-content__title">my card1</div>
+        </div>
+        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__2">
+          <img class="free-content__image"
+                src="https://picsum.photos/id/12/600/300" alt="card 2">
+          <div id="free-content__2" class="free-content__title">my card2</div>
+        </div>
+        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__3">
+          <img class="free-content__image"
+                src="https://picsum.photos/id/23/600/300" alt="card 3">
+          <div id="free-content__3" class="free-content__title">my card3</div>
+        </div>
+        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__4">
+          <img class="free-content__image"
+                src="https://picsum.photos/id/34/600/300" alt="card 4">
+          <div id="free-content__4" class="free-content__title">my card4</div>
+        </div>
+    `,
+  },
+  render: (args) => ({
+    components: {
+      MCarousel,
+      MLink,
+      ArrowNext24,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MCarousel v-bind="args">
+        <template v-if="${'header' in args}" v-slot:header>${args.header}</template>
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MCarousel>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCarousel>;
+
+export const Default: Story = {};
+
+export const Subtitle: Story = {
+  args: {
+    'aria-labelledby': 'subtitleCarousel',
+    header: `
+      <h2 class="mc-carousel__title mt-title--m" id="subtitleCarousel">Title of the carousel</h2>
+      <p class="mc-carousel__sub-title mt-body-m">Longer description of the carousel</p>
+    `,
+  },
+};
+
+export const Link: Story = {
+  'aria-labelledby': 'linkCarousel',
+  args: {
+    header: `
+      <h2 class="mc-carousel__title mt-title--m" id="linkCarousel">Title of the carousel</h2>
+      <MLink href="#" iconPosition="right">
+        Stand-alone link
+        <template #icon><ArrowNext24/></template>
+      </MLink>
+    `,
+  },
+};

package/src/components/carousel/MCarousel.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    class="mc-carousel"
+    role="group"
+    aria-roledescription="carousel"
+    aria-labelledby="mc-carousel__title"
+  >
+    <div class="mc-carousel__header">
+      <div class="mc-carousel__headings">
+        <slot name="header" />
+      </div>
+      <div class="mc-carousel__controls">
+        <MIconButton
+          size="s"
+          outlined
+          @click="goPrevious"
+          :disabled="isFirstChildActive"
+          :aria-label="previousButtonAriaLabel"
+        >
+          <template #icon>
+            <ChevronLeft20 />
+          </template>
+        </MIconButton>
+        <MIconButton
+          size="s"
+          outlined
+          @click="goNext"
+          :disabled="isLastChildActive"
+          :aria-label="nextButtonAriaLabel"
+        >
+          <template #icon>
+            <ChevronRight20 />
+          </template>
+        </MIconButton>
+      </div>
+    </div>
+    <div class="mc-carousel__content" ref="contentContainer">
+      <template
+        v-for="(child, index) in $slots.default?.()"
+        :key="`carousel-slide-${index}`"
+      >
+        <component :is="child" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, type VNode } from 'vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import ChevronLeft20 from '@mozaic-ds/icons-vue/src/components/ChevronLeft20/ChevronLeft20.vue';
+import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+/**
+ * A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Aria label for the previous button.
+     */
+    previousButtonAriaLabel?: string;
+    /**
+     * Aria label for the next button.
+     */
+    nextButtonAriaLabel?: string;
+  }>(),
+  {
+    previousButtonAriaLabel: 'previous',
+    nextButtonAriaLabel: 'next',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert a list of components to be displayed in the carousel.
+   */
+  default: () => VNode[];
+  /**
+   * Use this slot to insert the title, subtitle or link of the carousel.
+   */
+  header: VNode;
+}>();
+
+const activeIndex = ref<number>(0);
+const contentContainer = ref<HTMLElement | null>(null);
+
+let observer: IntersectionObserver;
+
+const scrollOptions: ScrollIntoViewOptions = {
+  behavior: 'smooth',
+  block: 'nearest',
+  inline: 'center',
+};
+
+function getCarouselChildren() {
+  return contentContainer.value ? [...contentContainer.value.children] : [];
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries: IntersectionObserverEntry[]) => {
+      const entry = entries.find(
+        (e: IntersectionObserverEntry) => e.isIntersecting,
+      );
+      if (entry) {
+        activeIndex.value = getCarouselChildren().findIndex(
+          (e) => e === entry.target,
+        );
+      }
+    },
+    {
+      root: contentContainer.value,
+      threshold: 0.9,
+    },
+  );
+
+  getCarouselChildren().forEach((el) => {
+    observer.observe(el);
+  });
+});
+
+function scrollToChild(index: number) {
+  getCarouselChildren()[index].scrollIntoView(scrollOptions);
+}
+
+function goPrevious() {
+  if (activeIndex.value > 0) {
+    scrollToChild(activeIndex.value - 1);
+  }
+}
+
+function goNext() {
+  if (activeIndex.value < getCarouselChildren().length - 1) {
+    scrollToChild(activeIndex.value + 1);
+  }
+}
+
+const isFirstChildActive = computed(() => activeIndex.value === 0);
+const isLastChildActive = computed(
+  () => activeIndex.value === getCarouselChildren().length - 1,
+);
+</script>
+
+<style scoped lang="scss">
+@use '@mozaic-ds/styles/components/carousel';
+
+::v-deep(.mc-carousel__title) {
+  margin: 0;
+}
+
+::v-deep(.mc-carousel__sub-title) {
+  margin: 0;
+}
+</style>

package/src/components/carousel/README.md

@@ -0,0 +1,18 @@
+# MCarousel
+
+A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `previousButtonAriaLabel` | Aria label for the previous button. | `string` | `"previous"` |
+| `nextButtonAriaLabel` | Aria label for the next button. | `string` | `"next"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert a list of components to be displayed in the carousel. |
+| `header` | Use this slot to insert the title, subtitle or link of the carousel. |

package/src/components/flag/MFlag.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MFlag from './MFlag.vue';
 
 const meta: Meta<typeof MFlag> = {

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