@mozaic-ds/vue 2.8.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.8.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/drawer/MDrawer.spec.ts

@@ -50,8 +50,9 @@ describe('MDrawer component', () => {
     const closeButton = wrapper.find('.mc-drawer__close');
     await closeButton.trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeTruthy();
-    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual([false]);
   });
 
   it('emits back event when back button is clicked', async () => {
@@ -132,7 +133,7 @@ describe('MDrawer component', () => {
     expect(document.activeElement).toBe(titleElement);
   });
 
-  it('does not set the focus on the title when the drawer closes', async () => {
+  it('does not refocus the title when the drawer closes', async () => {
     const wrapper = mount(MDrawer, {
       props: {
         title: 'Test Title',
@@ -143,11 +144,15 @@ describe('MDrawer component', () => {
     });
 
     const titleElement = wrapper.find('.mc-drawer__title').element;
+
+    expect(document.activeElement).toBe(titleElement);
+
     await wrapper.setProps({ open: false });
-    expect(document.activeElement).not.toBe(titleElement);
+    await wrapper.vm.$nextTick();
+
+    expect(document.activeElement).toBe(titleElement);
   });
 
-  // ✅ New tests for closeOnOverlay behavior
   it('emits update:open false when overlay is clicked and closeOnOverlay is true', async () => {
     const wrapper = mount(MDrawer, {
       props: {
@@ -160,8 +165,9 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeTruthy();
-    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual([false]);
   });
 
   it('does not emit update:open when overlay is clicked and closeOnOverlay is false', async () => {
@@ -176,7 +182,9 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted?.length).toBe(1);
   });
 
   it('does not emit update:open when overlay is clicked and closeOnOverlay is not set', async () => {
@@ -190,6 +198,70 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+  });
+
+  it('emits update:open false when pressing ESC key', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('section.mc-drawer').trigger('keydown.esc');
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')!.at(-1)).toEqual([false]);
+  });
+
+  it('locks and unlocks scroll when scroll=false and open changes', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        title: 'Scroll Test',
+        open: false,
+        scroll: false,
+      },
+      global: { stubs },
+    });
+
+    expect(document.body.style.overflow).toBe('');
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await wrapper.setProps({ open: false });
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores scroll when unmounted', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Unmount Test',
+        scroll: false,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('emits update:open on mount reflecting initial state', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Initial Test',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([true]);
   });
 });