@mozaic-ds/vue 2.9.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.9.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,8 +41,8 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.0.1",
-    "@mozaic-ds/web-fonts": "1.65.0",
+    "@mozaic-ds/styles": "^2.4.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/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',
+  },
+};