@mozaic-ds/vue/src/components/field/MField.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 MField from './MField.vue';
import MTextInput from '../textinput/MTextInput.vue';
import MTextArea from '../textarea/MTextArea.vue';
import MSelect from '../select/MSelect.vue';

const meta: Meta<typeof MField> = {
  title: 'Form Elements/Field',
  component: MField,
  parameters: {
    docs: {
      description: {
        component:
          '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.',
      },
    },
  },
  args: {
    label: 'Label',
    id: 'ReplaceByInputId',
    default: `
      <!-- All the code below must be replaced by a form element. -->
      <div class="content-slot">
        Insert a form element here to replace this slot.
      </div>
    `,
  },
  render: (args) => ({
    components: { MField, MTextInput },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MField>;

export const Default: Story = {
  render: (args) => ({
    components: { MField },
    setup() {
      return { args };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const Input: Story = {
  args: {
    label: 'Label',
    id: 'inputId',
    default: `
      <MTextInput
        id="inputId"
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const InputFull: Story = {
  args: {
    label: 'Label',
    requirementText: 'optional',
    helpText: 'Help text',
    id: 'inputFullId',
    default: `
      <MTextInput
        id="inputFullId"
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const InputValid: Story = {
  args: {
    label: 'Label',
    requirementText: 'required',
    helpText: 'Help text',
    id: 'inputvalidId',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MTextInput
        id="inputvalidId"
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const InputInvalid: Story = {
  args: {
    label: 'Label',
    requirementText: 'required',
    helpText: 'Help text',
    id: 'inputInvalidId',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MTextInput
        id="inputInvalidId"
        placeholder="Placeholder"
        isInvalid
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

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',
    id: 'textareaId',
    default: `
      <MTextArea
        id="textareaId"
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MTextArea },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const TextareaValid: Story = {
  args: {
    label: 'Label',
    id: 'textareaValidId',
    requirementText: 'required',
    helpText: 'Help text',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MTextArea
        id="textareaValidId"
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MTextArea },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const TextareaInvalid: Story = {
  args: {
    label: 'Label',
    id: 'textareaValidId',
    requirementText: 'required',
    helpText: 'Help text',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MTextArea
        id="textareaValidId"
        isInvalid
        placeholder="Placeholder"
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MTextArea },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const Select: Story = {
  args: {
    label: 'Label',
    id: 'selectId',
    default: `
      <MSelect
        id="selectId"
        name="selectName"
        placeholder="Choose an option"
        :options="
          [
            {
              text: 'Option 1',
              value: 'option1',
            },
            {
              text: 'Option 2',
              value: 'option2',
            },
            {
              text: 'Option 3',
              value: 'option3',
            },
            {
              text: 'Option 4',
              value: 'option4',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MSelect },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const SelectValid: Story = {
  args: {
    label: 'Label',
    id: 'selectValidId',
    requirementText: 'required',
    helpText: 'Help text',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MSelect
        id="selectValidId"
        name="selectValidName"
        placeholder="Choose an option"
        :options="
          [
            {
              text: 'Option 1',
              value: 'option1',
            },
            {
              text: 'Option 2',
              value: 'option2',
            },
            {
              text: 'Option 3',
              value: 'option3',
            },
            {
              text: 'Option 4',
              value: 'option4',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MSelect },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};

export const SelectInvalid: Story = {
  args: {
    label: 'Label',
    id: 'selectInvalidId',
    requirementText: 'required',
    helpText: 'Help text',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MSelect
        id="selectInvalidId"
        name="selectInvalidName"
        isInvalid
        placeholder="Choose an option"
        :options="
          [
            {
              text: 'Option 1',
              value: 'option1',
            },
            {
              text: 'Option 2',
              value: 'option2',
            },
            {
              text: 'Option 3',
              value: 'option3',
            },
            {
              text: 'Option 4',
              value: 'option4',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MField, MSelect },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MField v-bind="args">
        ${args.default}
      </MField>
    `,
  }),
};