accessible-astro-components/src/components/forms/Form.stories.ts

A comprehensive set of accessible, easy-to-use UI components for Astro websites, built with WCAG compliance and inclusive design principles.

import StorySlot from '../StorySlot.astro'
import Form from './Form.astro'
import Input from './Input.astro'
import Textarea from './Textarea.astro'
import Fieldset from './Fieldset.astro'
import Checkbox from './Checkbox.astro'
import Radio from './Radio.astro'

export default {
  component: StorySlot,
}

const baseArgs = {
  Component: Form,
}

export const Basic = {
  args: {
    ...baseArgs,
    children: [
      {
        Component: Input,
        props: {
          name: 'full-name',
          label: 'Full name',
          required: true,
          'data-validation': 'Please enter your full name',
        },
      },
      {
        Component: Input,
        props: {
          name: 'email',
          label: 'Email address',
          type: 'email',
          required: true,
          autocomplete: 'email',
          'data-validation': 'Please provide a valid email address',
        },
      },
      {
        Component: Textarea,
        props: {
          name: 'message',
          label: 'Message',
          required: true,
          rows: 4,
          placeholder: 'Tell us a little about your project...',
          'data-validation': 'Please add a short message',
        },
      },
      {
        Component: Fieldset,
        props: {
          name: 'updates',
          legend: 'Email preferences',
          required: true,
          'data-validation': 'Please select at least one option',
        },
        children: [
          {
            Component: Checkbox,
            props: {
              name: 'updates',
              label: 'Product updates',
              value: 'product',
            },
          },
          {
            Component: Checkbox,
            props: {
              name: 'updates',
              label: 'Security alerts',
              value: 'security',
            },
          },
        ],
      },
      {
        Component: Fieldset,
        props: {
          name: 'plan',
          legend: 'Plan type',
          required: true,
          variant: 'minimal',
          'data-validation': 'Please choose a plan',
        },
        children: [
          {
            Component: Radio,
            props: {
              name: 'plan',
              label: 'Starter',
              value: 'starter',
            },
          },
          {
            Component: Radio,
            props: {
              name: 'plan',
              label: 'Team',
              value: 'team',
            },
          },
        ],
      },
    ],
    afterIsHtml: true,
    after: '<button type="submit">Send message</button>',
  },
}

export const LocalizedGerman = {
  args: {
    ...baseArgs,
    errorSummaryMessage:
      'Es gab ein Problem mit Ihrer Eingabe. Die folgenden Felder benoetigen Aufmerksamkeit:',
    defaultFieldValidationMessage: 'Dieses Feld ist erforderlich',
    defaultFieldsetValidationMessage: 'Bitte waehlen Sie mindestens eine Option',
    children: [
      {
        Component: Input,
        props: {
          name: 'full-name',
          label: 'Vollstaendiger Name',
          required: true,
          requiredText: '(Pflichtfeld)',
          requiredValidationMessage: 'Bitte geben Sie Ihren vollstaendigen Namen ein',
        },
      },
      {
        Component: Input,
        props: {
          name: 'email',
          label: 'E-Mail-Adresse',
          type: 'email',
          required: true,
          requiredText: '(Pflichtfeld)',
          autocomplete: 'email',
          emailValidationMessage: 'Bitte geben Sie eine gueltige E-Mail-Adresse ein',
        },
      },
      {
        Component: Textarea,
        props: {
          name: 'message',
          label: 'Nachricht',
          required: true,
          requiredText: '(Pflichtfeld)',
          rows: 4,
          placeholder: 'Erzaehlen Sie uns etwas ueber Ihr Projekt...',
          requiredValidationMessage: 'Bitte fuegen Sie eine kurze Nachricht hinzu',
        },
      },
      {
        Component: Fieldset,
        props: {
          name: 'updates',
          legend: 'E-Mail-Einstellungen',
          required: true,
          requiredText: '(Pflichtfeld)',
          requiredValidationMessage: 'Bitte waehlen Sie mindestens eine Option',
        },
        children: [
          {
            Component: Checkbox,
            props: {
              name: 'updates',
              label: 'Produkt-Updates',
              value: 'product',
            },
          },
          {
            Component: Checkbox,
            props: {
              name: 'updates',
              label: 'Sicherheitsmeldungen',
              value: 'security',
            },
          },
        ],
      },
    ],
    afterIsHtml: true,
    after: '<button type="submit">Nachricht senden</button>',
  },
}