@mozaic-ds/vue/src/components/pincode/MPincode.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 MPincode from './MPincode.vue';

const meta: Meta<typeof MPincode> = {
  title: 'Form Elements/Pincode',
  component: MPincode,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).',
      },
    },
  },
  args: {
    id: 'pincodeId',
    ariaLabel: 'enter your code',
  },
  render: (args) => ({
    components: { MPincode },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MPincode 
        v-bind="args"
        @update:modelValue="handleUpdate"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MPincode>;

export const WithValue: Story = {
  args: {
    id: 'valueId',
    modelValue: '123098',
  },
};

export const Default: Story = {};

export const Disabled: Story = {
  args: {
    id: 'disableId',
    disabled: true,
  },
};

export const ReadOnly: Story = {
  args: {
    id: 'readonlyId',
    modelValue: '123098',
    readonly: true,
  },
};

export const Invalid: Story = {
  args: {
    id: 'invalidId',
    isInvalid: true,
  },
};