@mozaic-ds/vue 2.7.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -82,7 +82,8 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "vue-component-meta": "^3.0.8",
-    "vue-eslint-parser": "^10.1.1"
+    "vue-eslint-parser": "^10.1.1",
+    "libphonenumber-js": "^1.12.23"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/drawer/MDrawer.spec.ts

@@ -2,6 +2,19 @@ import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MDrawer from '@/components/drawer/MDrawer.vue';
 
+// Stubs for child components
+const stubs = {
+  ArrowBack24: { template: '<svg />' },
+  Cross24: { template: '<svg />' },
+  MIconButton: {
+    template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
+  },
+  MOverlay: {
+    name: 'MOverlay',
+    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
+  },
+};
+
 describe('MDrawer component', () => {
   it('renders title and contentTitle when provided', () => {
     const wrapper = mount(MDrawer, {
@@ -13,6 +26,7 @@ describe('MDrawer component', () => {
       slots: {
         default: '<p>Drawer content</p>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
@@ -30,6 +44,7 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     const closeButton = wrapper.find('.mc-drawer__close');
@@ -46,6 +61,7 @@ describe('MDrawer component', () => {
         title: 'Test Title',
         back: true,
       },
+      global: { stubs },
     });
 
     const backButton = wrapper.find('.mc-drawer__back');
@@ -63,6 +79,7 @@ describe('MDrawer component', () => {
       slots: {
         footer: '<button>Footer Button</button>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
@@ -79,6 +96,7 @@ describe('MDrawer component', () => {
         extended: true,
         position: 'left',
       },
+      global: { stubs },
     });
 
     const section = wrapper.find('section.mc-drawer');
@@ -93,6 +111,7 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
@@ -104,6 +123,7 @@ describe('MDrawer component', () => {
         title: 'Test Title',
       },
       attachTo: document.body,
+      global: { stubs },
     });
 
     const titleElement = wrapper.find('.mc-drawer__title').element;
@@ -116,13 +136,60 @@ describe('MDrawer component', () => {
     const wrapper = mount(MDrawer, {
       props: {
         title: 'Test Title',
-        open: true
+        open: true,
       },
       attachTo: document.body,
+      global: { stubs },
     });
 
     const titleElement = wrapper.find('.mc-drawer__title').element;
     await wrapper.setProps({ open: false });
     expect(document.activeElement).not.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: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: true,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is false', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: false,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is not set', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
 });

package/src/components/drawer/MDrawer.vue

@@ -1,5 +1,9 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="drawerTitle">
+  <MOverlay
+    :is-visible="open"
+    dialogLabel="drawerTitle"
+    @click="onClickOverlay"
+  >
     <section
       class="mc-drawer"
       :class="classObject"
@@ -24,7 +28,14 @@
               <ArrowBack24 aria-hidden="true" />
             </template>
           </MIconButton>
-          <h2 class="mc-drawer__title" tabindex="-1" id="drawerTitle" ref="titleRef">{{ title }}</h2>
+          <h2
+            class="mc-drawer__title"
+            tabindex="-1"
+            id="drawerTitle"
+            ref="titleRef"
+          >
+            {{ title }}
+          </h2>
           <MIconButton
             class="mc-drawer__close"
             aria-label="Close"
@@ -86,6 +97,10 @@ const props = defineProps<{
    * Title of the content of the drawer.
    */
   contentTitle?: string;
+  /**
+   * if `true`, close the drawer when clicking the overlay.
+   */
+  closeOnOverlay?: boolean;
 }>();
 
 defineSlots<{
@@ -116,11 +131,20 @@ watch(
 );
 
 const titleRef = ref<HTMLElement | null>(null);
-watch(() => props.open, (newValue) => {
-  if (newValue && titleRef.value) {
-    titleRef.value.focus();
+watch(
+  () => props.open,
+  (newValue) => {
+    if (newValue && titleRef.value) {
+      titleRef.value.focus();
+    }
+  },
+);
+
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
   }
-});
+};
 
 const onClose = () => {
   emit('update:open', false);

package/src/components/drawer/README.md

@@ -13,6 +13,7 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 | `back` | If `true`, display the back button. | `boolean` | - |
 | `title*` | Title of the drawer. | `string` | - |
 | `contentTitle` | Title of the content of the drawer. | `string` | - |
+| `closeOnOverlay` | if `true`, close the drawer when clicking the overlay. | `boolean` | - |
 
 ## Slots
 

package/src/components/iconbutton/MIconButton.vue

@@ -70,4 +70,9 @@ const classObject = computed(() => {
 
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/button';
+
+.mc-button__icon::v-deep(svg) {
+  width: 100%;
+  height: 100%;
+}
 </style>

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -44,7 +44,7 @@ type Story = StoryObj<typeof MLoadingOverlay>;
 
 export const Default: Story = {};
 
-export const text: Story = {
+export const Text: Story = {
   args: {
     text: 'Insert your text here',
   },

package/src/components/modal/MModal.spec.ts

@@ -8,7 +8,8 @@ const stubs = {
     template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
   },
   MOverlay: {
-    template: `<div class="overlay"><slot/></div>`,
+    name: 'MOverlay',
+    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
   },
 };
 
@@ -100,4 +101,38 @@ describe('MModal component', () => {
 
     expect(wrapper.find('.mc-modal').classes()).toContain('is-open');
   });
+
+  it('emits update:open with false when overlay clicked and closeOnOverlay is true', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closeOnOverlay: true },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('does not emit update:open when overlay clicked and closeOnOverlay is false', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closeOnOverlay: false },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
+
+  it('does not emit update:open when overlay clicked and closeOnOverlay is not set', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title' },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
 });

package/src/components/modal/MModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="modalTitle">
+  <MOverlay :is-visible="open" dialogLabel="modalTitle" @click="onClickOverlay">
     <section
       class="mc-modal"
       :class="classObject"
@@ -72,6 +72,10 @@ const props = withDefaults(
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * if `true`, close the modal when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
   }>(),
   {
     closable: true,
@@ -110,6 +114,12 @@ watch(
   },
 );
 
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
+  }
+};
+
 const onClose = () => {
   emit('update:open', false);
 };

package/src/components/modal/README.md

@@ -11,6 +11,7 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | `title*` | Title of the modal. | `string` | - |
 | `description` | Description of the modal. | `string` | - |
 | `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `closeOnOverlay` | if `true`, close the modal when clicking the overlay. | `boolean` | - |
 
 ## Slots
 

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

@@ -0,0 +1,294 @@
+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';
+
+vi.mock('libphonenumber-js', () => ({
+  default: vi.fn(),
+  isValidPhoneNumber: vi.fn(),
+  getCountries: vi.fn(() => ['FR', 'US', 'PT', 'DE', 'ES']),
+  getCountryCallingCode: vi.fn((country) => {
+    const codes = { FR: '33', US: '1', PT: '351', DE: '49', ES: '34' };
+    return codes[country as keyof typeof codes] || '33';
+  }),
+  getExampleNumber: vi.fn(() => ({
+    formatNational: () => '01 23 45 67 89',
+  })),
+  parsePhoneNumberFromString: vi.fn((value) => {
+    if (!value) return null;
+    return {
+      formatNational: () => {
+        if (value === '+33123456789') return '01 23 45 67 89';
+        return value;
+      },
+      number: value.startsWith('+') ? value : `+${value}`,
+    };
+  }),
+}));
+
+vi.mock(
+  '@mozaic-ds/icons-vue/src/components/ChevronDown20/ChevronDown20.vue',
+  () => ({
+    default: {
+      name: 'ChevronDown20',
+      template: '<svg data-testid="chevron-icon" aria-hidden="true"></svg>',
+    },
+  }),
+);
+
+describe('MPhoneNumber', () => {
+  let wrapper: VueWrapper<InstanceType<typeof MPhoneNumber>>;
+
+  const defaultProps = {
+    id: 'phone-input',
+    defaultCountry: 'FR' as const,
+    modelValue: '',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(MPhoneNumber, {
+      props: defaultProps,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.mc-phone-number-input').exists()).toBe(true);
+    });
+  });
+
+  describe('Country Selection', () => {
+    it('should render country selector and flag by default', () => {
+      expect(
+        wrapper.find('select.mc-phone-number-input__select').exists(),
+      ).toBe(true);
+      expect(wrapper.find('.mc-phone-number-input__flag').exists()).toBe(true);
+    });
+
+    it('should hide country selector when flag prop is false', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, flag: false },
+      });
+
+      expect(
+        wrapper.find('.mc-phone-number-input__select-wrapper').classes(),
+      ).toContain('mc-phone-number-input__select-wrapper--hidden');
+    });
+
+    it('should render all country options', () => {
+      const options = wrapper.findAll('option');
+      expect(options.length).toBeGreaterThan(1);
+      expect(options.some((opt) => opt.text().includes('+33'))).toBe(true);
+      expect(options.some((opt) => opt.text().includes('+1'))).toBe(true);
+    });
+
+    it('should display correct flag image and alt attribute', () => {
+      const flagImage = wrapper.find('img.mc-phone-number-input__flag-image');
+      expect(flagImage.exists()).toBe(true);
+      expect(flagImage.attributes('src')).toContain('flagcdn.com/fr.svg');
+      expect(flagImage.attributes('alt')).toBeDefined();
+    });
+
+    it('should render chevron icon with aria-hidden true', () => {
+      const chevron = wrapper.find('[data-testid="chevron-icon"]');
+      expect(chevron.exists()).toBe(true);
+      expect(chevron.attributes('aria-hidden')).toBe('true');
+    });
+  });
+
+  describe('Phone Input', () => {
+    it('should render phone input field with correct id', () => {
+      const input = wrapper.find('input[type="tel"]');
+      expect(input.exists()).toBe(true);
+      expect(input.attributes('id')).toBe(defaultProps.id);
+    });
+
+    it('should display country calling code prefix by default', () => {
+      expect(
+        wrapper.find('.mc-phone-number-input__country-code').exists(),
+      ).toBe(true);
+      expect(wrapper.find('.mc-phone-number-input__country-code').text()).toBe(
+        '+33',
+      );
+    });
+
+    it('should hide prefix when prefix prop is false', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, prefix: false },
+      });
+      expect(
+        wrapper.find('.mc-phone-number-input__country-code').exists(),
+      ).toBe(false);
+    });
+
+    it('should set custom placeholder if provided', () => {
+      const placeholder = 'Enter your phone number';
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, placeholder },
+      });
+      expect(wrapper.find('input[type="tel"]').attributes('placeholder')).toBe(
+        placeholder,
+      );
+    });
+
+    it('should use dynamic placeholder when no custom placeholder provided', () => {
+      expect(wrapper.find('input[type="tel"]').attributes('placeholder')).toBe(
+        '01 23 45 67 89',
+      );
+    });
+  });
+
+  describe('States', () => {
+    it('should be enabled by default', () => {
+      const input = wrapper.find('input[type="tel"]');
+      const select = wrapper.find('select');
+      expect(input.attributes('disabled')).toBeUndefined();
+      expect(input.attributes('readonly')).toBeUndefined();
+      expect(select.attributes('disabled')).toBeUndefined();
+      expect(select.attributes('readonly')).toBeUndefined();
+    });
+
+    it('should be disabled when disabled prop is true', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, disabled: true },
+      });
+      expect(
+        wrapper.find('input[type="tel"]').attributes('disabled'),
+      ).toBeDefined();
+      expect(wrapper.find('select').attributes('disabled')).toBeDefined();
+    });
+
+    it('should be readonly when readonly prop is true', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, readonly: true },
+      });
+      expect(
+        wrapper.find('input[type="tel"]').attributes('readonly'),
+      ).toBeDefined();
+      expect(wrapper.find('select').attributes('readonly')).toBeDefined();
+    });
+
+    it('should apply invalid class when isInvalid is true', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, isInvalid: true },
+      });
+      expect(wrapper.find('.mc-phone-number-input__input').classes()).toContain(
+        'is-invalid',
+      );
+    });
+  });
+
+  describe('Sizes', () => {
+    it('should have medium size by default', () => {
+      expect(wrapper.find('select').classes()).not.toContain('mc-select--s');
+      expect(
+        wrapper.find('.mc-phone-number-input__input').classes(),
+      ).not.toContain('mc-text-input--s');
+    });
+
+    it('should apply small size when size prop is s', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, size: 's' },
+      });
+      expect(wrapper.find('select').classes()).toContain('mc-select--s');
+      expect(wrapper.find('.mc-phone-number-input__input').classes()).toContain(
+        'mc-text-input--s',
+      );
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit update:modelValue with international format on input', async () => {
+      const input = wrapper.find('input[type="tel"]');
+
+      await input.setValue('+33123456789');
+      await nextTick();
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+
+      const emittedVal = wrapper.emitted('update:modelValue')?.[0][0] as string;
+      expect(emittedVal.startsWith('+')).toBe(true);
+    });
+
+    it('should emit valid event on input', async () => {
+      const input = wrapper.find('input[type="tel"]');
+      await input.setValue('+33123456789');
+      await nextTick();
+      expect(wrapper.emitted('valid')).toBeTruthy();
+    });
+
+    it('should sanitize input removing invalid characters', async () => {
+      const input = wrapper.find('input[type="tel"]');
+      await input.setValue('123abc456def+() -');
+
+      expect((input.element as HTMLInputElement).value).toBe('123456+() -');
+    });
+  });
+
+  describe('Validation', () => {
+    beforeEach(() => {
+      vi.mocked(isValidPhoneNumber).mockImplementation((number: string) => {
+        const digits = number.replace(/\D/g, '');
+        return digits.length >= 10;
+      });
+    });
+
+    it('should mark input invalid if phone number is invalid', async () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, modelValue: '123' },
+      });
+      await nextTick();
+      expect(wrapper.find('.mc-phone-number-input__input').classes()).toContain(
+        'is-invalid',
+      );
+    });
+
+    it('should not mark input invalid if empty', async () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, modelValue: '' },
+      });
+      await nextTick();
+      expect(
+        wrapper.find('.mc-phone-number-input__input').classes(),
+      ).not.toContain('is-invalid');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should set aria-invalid attribute correctly', async () => {
+      await wrapper.setProps({ isInvalid: true });
+      const input = wrapper.find('input[type="tel"]');
+      expect(input.attributes('aria-invalid')).toBeDefined();
+    });
+
+    it('should use provided id on input', () => {
+      const input = wrapper.find('input[type="tel"]');
+      expect(input.attributes('id')).toBe(defaultProps.id);
+    });
+
+    it('should set alt attribute on flag image', () => {
+      const flagImg = wrapper.find('img.mc-phone-number-input__flag-image');
+      expect(flagImg.attributes('alt')).toBeTruthy();
+    });
+
+    it('should mark chevron icon aria-hidden as true', () => {
+      const chevron = wrapper.find('[data-testid="chevron-icon"]');
+      expect(chevron.attributes('aria-hidden')).toBe('true');
+    });
+  });
+
+  describe('Props reactivity', () => {
+    it('should update input when modelValue changes', async () => {
+      await wrapper.setProps({ modelValue: '+33123456789' });
+      await nextTick();
+      const input = wrapper.find('input[type="tel"]');
+      expect((input.element as HTMLInputElement).value).toBe('+33123456789');
+    });
+  });
+});