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

const meta: Meta<typeof MTextArea> = {
  title: 'Form Elements/Textarea',
  component: MTextArea,
  parameters: {
    docs: {
      description: {
        component:
          'A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).',
      },
    },
  },
  args: {
    id: 'textareaId',
    placeholder: 'Placeholder',
  },
  render: (args) => ({
    components: { MTextArea },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const WithValue: Story = {
  args: {
    id: 'withValueId',
    modelValue: 'Value of the textarea component',
  },
};

export const Default: Story = {};

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

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

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