@mozaic-ds/vue 2.7.0 → 2.9.0

package/src/components/field/MField.stories.ts

@@ -125,6 +125,22 @@ export const InputInvalid: Story = {
   },
 };
 
+export const InputLoading: Story = {
+  args: {
+    label: 'Label',
+    id: 'inputLoadingId',
+    isLoading: true,
+    message: 'Loading message (Be concise and use comprehensive words).',
+    default: `
+      <MTextInput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
 export const Textarea: Story = {
   args: {
     label: 'Label',

package/src/components/field/MField.vue

@@ -16,11 +16,12 @@
     </div>
 
     <span
-      v-if="(isValid || isInvalid) && message"
+      v-if="(isValid || isInvalid || isLoading) && message"
       class="mc-field__validation-message"
       :id="messageId"
       :class="classObjectValidation"
     >
+      <MLoader v-if="isLoading" size="xs"></MLoader>
       {{ message }}
     </span>
   </div>
@@ -28,6 +29,7 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
+import MLoader from '../loader/MLoader.vue';
 /**
  * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  */
@@ -60,6 +62,10 @@ const props = defineProps<{
    * If `true`, applies an invalid state to the form field.
    */
   isInvalid?: boolean;
+  /**
+   * If `true`, applies a loading state to the form field.
+   */
+  isLoading?: boolean;
   /**
    * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
    */
@@ -81,6 +87,7 @@ const classObjectValidation = computed(() => {
   return {
     'is-valid': props.isValid,
     'is-invalid': props.isInvalid,
+    'is-loading': props.isLoading,
   };
 });
 </script>

package/src/components/field/README.md

@@ -14,6 +14,7 @@ A field label is a text element that identifies the purpose of an input field, p
 | `helpId` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` | - |
 | `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
 | `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `isLoading` | If `true`, applies a loading state to the form field. | `boolean` | - |
 | `messageId` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` | - |
 | `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |
 

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/loader/MLoader.spec.ts

@@ -101,4 +101,45 @@ describe('MLoader component', () => {
     await wrapper.setProps({ size: 'l' });
     expect(circle.attributes('r')).toBe('19');
   });
+
+  it('applies mc-loader--text-visible class when text prop is provided', () => {
+    const wrapper = mount(MLoader, {
+      props: { text: 'Loading data...' },
+    });
+
+    const loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--text-visible');
+  });
+
+  it('does not apply mc-loader--text-visible class when no text is provided', () => {
+    const wrapper = mount(MLoader);
+    const loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).not.toContain('mc-loader--text-visible');
+  });
+
+  it('uses default props correctly (appearance=standard, size=m)', () => {
+    const wrapper = mount(MLoader);
+    const loader = wrapper.find('.mc-loader');
+
+    expect(loader.classes()).not.toContain('mc-loader--standard');
+    expect(loader.classes()).not.toContain('mc-loader--m');
+
+    const svg = wrapper.find('svg.mc-loader__icon');
+    expect(svg.attributes('viewBox')).toBe('0 0 32 32');
+
+    const circle = wrapper.find('circle.mc-loader__path');
+    expect(circle.attributes('r')).toBe('9');
+  });
+
+  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');
+  });
+
+  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');
+  });
 });

package/src/components/loader/MLoader.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
 
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
@@ -60,6 +60,9 @@ const setViewBox = computed(() => {
   let viewBox: string;
 
   switch (props.size) {
+    case 'xs':
+      viewBox = '0 0 24 24';
+      break;
     case 's':
       viewBox = '0 0 24 24';
       break;
@@ -76,6 +79,9 @@ const setCircleRadius = computed(() => {
   let circleRadius: number;
 
   switch (props.size) {
+    case 'xs':
+      circleRadius = 3;
+      break;
     case 's':
       circleRadius = 6;
       break;

package/src/components/loader/README.md

@@ -8,5 +8,5 @@ A loader is a visual indicator used to inform users that a process is in progres
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
-| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` | `"m"` |
+| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` `"xs"` | `"m"` |
 | `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |

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>`,
   },
 };
 
@@ -53,8 +54,9 @@ describe('MModal component', () => {
 
     await wrapper.find('button.mc-modal__close').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('renders slots content', () => {
@@ -100,4 +102,62 @@ 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');
+
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+
+    expect(emitted![emitted!.length - 1]).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');
+
+    const emitted = wrapper.emitted('update:open');
+
+    if (emitted) {
+      const lastValue = emitted[emitted.length - 1][0];
+      expect(lastValue).not.toBe(false);
+    } else {
+      expect(emitted).toBeFalsy();
+    }
+  });
+
+  it('locks scroll when open and unlocks when closed', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title', scroll: false },
+      global: { stubs },
+    });
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+    expect(document.documentElement.style.overflow).toBe('hidden');
+
+    await wrapper.setProps({ open: false });
+    expect(document.body.style.overflow).toBe('');
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+
+  it('does not lock scroll if scroll prop is true', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title', scroll: true },
+      global: { stubs },
+    });
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('');
+    expect(document.documentElement.style.overflow).toBe('');
+  });
 });

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"
@@ -10,6 +10,7 @@
       :aria-hidden="!open"
       v-bind="$attrs"
       @keydown.esc="onClose"
+      @click.stop
     >
       <div class="mc-modal__dialog" role="document">
         <header class="mc-modal__header">
@@ -47,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type VNode } from 'vue';
+import { computed, onMounted, onUnmounted, watch, type VNode } from 'vue';
 import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
@@ -72,9 +73,18 @@ const props = withDefaults(
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * if `false`, lock the scroll when open.
+     */
+    scroll?: boolean;
+    /**
+     * if `true`, close the modal when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
   }>(),
   {
     closable: true,
+    scroll: true,
   },
 );
 
@@ -103,12 +113,44 @@ const classObject = computed(() => {
   };
 });
 
-watch(
-  () => props.open,
-  (newValue) => {
-    emit('update:open', newValue);
-  },
-);
+const isClient =
+  typeof window !== 'undefined' && typeof document !== 'undefined';
+
+const lockScroll = () => {
+  if (!isClient) return;
+  document.body.style.overflow = 'hidden';
+  document.documentElement.style.overflow = 'hidden';
+};
+
+const unlockScroll = () => {
+  if (!isClient) return;
+  document.body.style.overflow = '';
+  document.documentElement.style.overflow = '';
+};
+
+onMounted(() => {
+  watch(
+    () => props.open,
+    (isOpen) => {
+      emit('update:open', isOpen);
+      if (props.scroll === false) {
+        if (isOpen) lockScroll();
+        else unlockScroll();
+      }
+    },
+    { immediate: true },
+  );
+});
+
+onUnmounted(() => {
+  unlockScroll();
+});
+
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
+  }
+};
 
 const onClose = () => {
   emit('update:open', false);

package/src/components/modal/README.md

@@ -11,6 +11,8 @@ 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` |
+| `scroll` | if `false`, lock the scroll when open. | `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');
+    });
+  });
+});