@mozaic-ds/vue 2.6.1 → 2.8.0

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

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import { ref } from 'vue';
+
+import MPhoneNumber from './MPhoneNumber.vue';
+
+const meta: Meta<typeof MPhoneNumber> = {
+  title: 'Form Elements/Phone Number',
+  component: MPhoneNumber,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MPhoneNumber },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(false);
+
+      const handleUpdate = (val: string) => {
+        modelValue.value = val;
+        action('update:modelValue')(val);
+      };
+
+      const handleValid = (valid: boolean) => {
+        isValid.value = valid;
+        action('valid')(valid);
+      };
+
+      return { args, modelValue, isValid, handleUpdate, handleValid };
+    },
+    template: `
+      <MPhoneNumber 
+        v-bind="{ ...args, modelValue }"
+        @update:modelValue="handleUpdate"
+        @valid="handleValid"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPhoneNumber>;
+
+export const Default: Story = {};
+
+export const Size: Story = {
+  args: {
+    size: 's',
+  },
+};
+
+export const IsInvalid: Story = {
+  args: {
+    isInvalid: true,
+    modelValue: '1912',
+  },
+};
+
+export const NoPrefix: Story = {
+  args: {
+    prefix: false,
+  },
+};
+
+export const NoFlag: Story = {
+  args: {
+    flag: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    modelValue: '0103948374',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    modelValue: '0103948374',
+    readonly: true,
+  },
+};

package/src/components/phonenumber/MPhoneNumber.vue

@@ -0,0 +1,271 @@
+<template>
+  <div id="mc-phone-number-input" class="mc-phone-number-input">
+    <div
+      class="mc-phone-number-input__select-wrapper"
+      :class="selectWrapperClass"
+    >
+      <select
+        id="selectComponentId"
+        v-model="selectedCountry"
+        name="selectComponentName"
+        class="mc-select mc-phone-number-input__select"
+        :class="sizeSelectClass"
+        :disabled="isDisabled"
+        :readonly="isReadOnly"
+      >
+        <option value="" selected hidden></option>
+        <option
+          v-for="country in countries"
+          :key="country"
+          :value="country"
+          :data-flag="country.toLowerCase()"
+        >
+          {{ getCountryName(country) }} (+{{ getCountryCallingCode(country) }})
+        </option>
+      </select>
+
+      <div class="mc-phone-number-input__select-display">
+        <div class="mc-phone-number-input__flag">
+          <img
+            class="mc-phone-number-input__flag-image"
+            :src="getFlagUrl(selectedCountry)"
+            :alt="getCountryName(selectedCountry)"
+            width="20"
+          />
+        </div>
+        <ChevronDown20
+          class="mc-phone-number-input__chevron"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+
+    <div class="mc-text-input mc-phone-number-input__input" :class="inputClass">
+      <span v-if="prefix" class="mc-phone-number-input__country-code">
+        +{{ getCountryCallingCode(selectedCountry) }}
+      </span>
+      <input
+        v-model="phoneNumber"
+        type="tel"
+        :id="id"
+        class="mc-phone-number-input__control mc-text-input__control"
+        :placeholder="dynamicPlaceholder"
+        name="phone-number"
+        :aria-invalid="isInvalid"
+        :disabled="isDisabled"
+        :readonly="isReadOnly"
+        @input="handleInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import parsePhoneNumberFromString, {
+  isValidPhoneNumber,
+  getCountries,
+  getCountryCallingCode,
+  getExampleNumber,
+  type CountryCode,
+} from 'libphonenumber-js';
+import examples from 'libphonenumber-js/mobile/examples';
+import ChevronDown20 from '@mozaic-ds/icons-vue/src/components/ChevronDown20/ChevronDown20.vue';
+/**
+ * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the phone number input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The current value of the phone number input field.
+     */
+    modelValue?: string;
+    /**
+     * Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
+     */
+    defaultCountry?: CountryCode;
+    /**
+     * A placeholder text to show in the phone number input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Determines the size of the phone number input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, display the country calling code prefix (+33, +1, etc.).
+     */
+    prefix?: boolean;
+    /**
+     * If `true`, display the country flag selector
+     */
+    flag?: boolean;
+  }>(),
+  {
+    modelValue: '',
+    defaultCountry: 'FR' as CountryCode,
+    size: 'm',
+    prefix: true,
+    flag: true,
+  },
+);
+
+const phoneNumber = ref(props.modelValue);
+const selectedCountry = ref<CountryCode>(props.defaultCountry);
+const countries = getCountries();
+
+const dynamicPlaceholder = computed(() => {
+  if (props.placeholder && props.placeholder.length > 0) {
+    return props.placeholder;
+  }
+  return getExampleNumber(selectedCountry.value, examples)?.formatNational();
+});
+
+const isValid = computed(() => {
+  if (!phoneNumber.value) return false;
+  try {
+    return isValidPhoneNumber(phoneNumber.value, selectedCountry.value);
+  } catch {
+    return false;
+  }
+});
+
+const parsedNumber = computed(() => {
+  if (!phoneNumber.value) return null;
+  try {
+    return parsePhoneNumberFromString(phoneNumber.value, selectedCountry.value);
+  } catch {
+    return null;
+  }
+});
+
+const getCountryName = (
+  countryCode: CountryCode,
+  locale: string = 'fr',
+): string => {
+  try {
+    const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
+    return regionNames.of(countryCode) || countryCode;
+  } catch {
+    return countryCode;
+  }
+};
+
+watch(
+  [phoneNumber, selectedCountry],
+  () => {
+    // Auto-format input when number is valid
+    if (isValid.value && parsedNumber.value) {
+      const formattedNational = parsedNumber.value.formatNational();
+      if (formattedNational !== phoneNumber.value) {
+        phoneNumber.value = formattedNational;
+      }
+    }
+
+    // Emit international format for v-model
+    const fullNumber = parsedNumber.value?.number || phoneNumber.value;
+    emit('update:modelValue', fullNumber);
+    emit('valid', isValid.value);
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue && newValue !== phoneNumber.value) {
+      if (newValue.startsWith('+')) {
+        try {
+          const parsed = parsePhoneNumberFromString(
+            newValue,
+            selectedCountry.value,
+          );
+          if (parsed) {
+            phoneNumber.value = parsed.formatNational();
+          } else {
+            phoneNumber.value = newValue;
+          }
+        } catch {
+          phoneNumber.value = newValue;
+        }
+      } else {
+        phoneNumber.value = newValue;
+      }
+    } else if (!newValue) {
+      phoneNumber.value = '';
+    }
+  },
+  { immediate: true },
+);
+
+const sizeSelectClass = computed(() => {
+  return props.size !== 'm' ? `mc-select--${props.size}` : '';
+});
+
+const sizeInputClass = computed(() => {
+  return props.size !== 'm' ? `mc-text-input--${props.size}` : '';
+});
+
+const isDisabled = computed(() => props.disabled);
+const isReadOnly = computed(() => props.readonly);
+
+const selectWrapperClass = computed(() => {
+  return { 'mc-phone-number-input__select-wrapper--hidden': !props.flag };
+});
+
+const inputClass = computed(() => {
+  const hasValue = phoneNumber.value && phoneNumber.value.trim().length > 0;
+  const isInvalidState = props.isInvalid || (hasValue && !isValid.value);
+  return [sizeInputClass.value, { 'is-invalid': isInvalidState }];
+});
+
+const getFlagUrl = (countryCode: CountryCode): string => {
+  return `https://flagcdn.com/${countryCode.toLowerCase()}.svg`;
+};
+
+const handleInput = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const value = input.value;
+  const sanitized = value.replace(/[^0-9+\s()-]/g, '');
+
+  phoneNumber.value = sanitized;
+  if (value !== sanitized) {
+    input.value = sanitized;
+  }
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  'update:modelValue': [value: string];
+  /**
+   * Emits when the validation state of the phone number changes.
+   */
+  valid: [isValid: boolean];
+}>();
+</script>
+
+<style lang="scss">
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/button';
+@use '@mozaic-ds/styles/components/listbox';
+@use '@mozaic-ds/styles/components/select';
+@use '@mozaic-ds/styles/components/phone-number-input';
+</style>

package/src/components/phonenumber/README.md

@@ -0,0 +1,26 @@
+# MPhoneNumber
+
+A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the phone number input element, used to associate the label with the form element. | `string` | - |
+| `modelValue` | The current value of the phone number input field. | `string` | `""` |
+| `defaultCountry` | Default country code for phone number formatting (e.g., 'FR', 'US', 'PT'). | `CountryCode` | `"FR" as CountryCode` |
+| `placeholder` | A placeholder text to show in the phone number input when it is empty. | `string` | - |
+| `size` | Determines the size of the phone number input. | `"s"` `"m"` | `"m"` |
+| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
+| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
+| `prefix` | If `true`, display the country calling code prefix (+33, +1, etc.). | `boolean` | `true` |
+| `flag` | If `true`, display the country flag selector | `boolean` | `true` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string]` |
+| `valid` | - | `[isValid: boolean]` |

package/src/components/pincode/MPincode.spec.ts

@@ -93,7 +93,10 @@ describe('MPincode component', () => {
       },
     });
 
-    expect(wrapper.classes()).toContain('is-invalid');
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.classes()).toContain('is-invalid');
+    }
   });
 
   it('disables inputs when disabled is true', () => {

package/src/components/pincode/MPincode.stories.ts

@@ -6,6 +6,7 @@ import MPincode from './MPincode.vue';
 const meta: Meta<typeof MPincode> = {
   title: 'Form Elements/Pincode',
   component: MPincode,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {