@mozaic-ds/vue/src/components/phonenumber/MPhoneNumber.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

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,
  },
};

export const LimitedCountries: Story = {
  args: {
    countryCodes: ['FR', 'US', 'GB', 'DE', 'ES', 'IT'],
  },
  parameters: {
    docs: {
      description: {
        story:
          'Limit the country selector to only specific countries instead of showing all available countries.',
      },
    },
  },
};