form-element:
  label: Form element
  namespace: Atoms/Form
  use: '@atoms/form/_form-element.twig'
  description: Form element
  dependencies:
    - form-label
    - form-input
  fields:
    description_content:
      type: text
      label: Description
      description: The form description.
      preview:
        faker: lorem.sentences
    errors:
      type: text
      label: Errors
      description: The error message.
      preview:
        faker: lorem.sentences
    prefix:
      type: text
      label: Prefix
      description: Input prefix. Can be text of FA icon
    suffix:
      type: text
      label: Suffix
      description: Input prefix. Can be text of FA icon
    label:
      type: pattern
      label: Label
      description: The form label.
      preview:
        - id: form-label
    children:
      type: pattern
      label: Children
      preview:
        - id: form-input
          variant: textfield
  settings:
    label_display:
      type: select
      label: Label display
      options:
        before: Before
        inline: Inline
        after: After
        invisible: Invisible
        hidden: Hidden
      preview: before
      default_value: before
    size:
      type: select
      label: size
      options:
        md: Normal
        lg: Large
        sm: Small
      preview: md
      default: md
    description_display:
      type: select
      label: Description display
      options:
        before: Before
        after: After
        invisible: Invisible
        hidden: Hidden
      preview: after
      default_value: after
    description_attributes:
      type: attributes
      label: Description attributes
    classes:
      type: textfield
      label: Classes
    attributes:
      type: attributes
      label: Attributes
    type:
      type: textfield
      label: Type
      description: Checkbox / Checkboxes / textfield etc
  variants:
    textfield:
      label: Textfield
      fields:
        children:
          id: form-input
          variant: textfield
        label:
          id: form-label
          fields:
            title: This is the form label
          settings:
            required: true
      settings:
        type: textfield
    password:
      label: Password
      fields:
        children:
          id: form-input
          variant: password
    email:
      label: Email
      fields:
        children:
          id: form-input
          variant: email
    file:
      label: File
      fields:
        children:
          id: form-input
          variant: file
    tel:
      label: Tel
      fields:
        children:
          id: form-input
          variant: tel
    date:
      label: Date
      fields:
        children:
          id: form-input
          variant: date
    time:
      label: Time
      fields:
        children:
          id: form-input
          variant: time
    url:
      label: URL
      fields:
        children:
          id: form-input
          variant: url
    range:
      label: Range
      fields:
        children:
          id: form-input
          variant: range
    color:
      label: Color
      fields:
        children:
          id: form-input
          variant: color
    checkbox:
      label: Checkbox
      fields:
        children:
          id: form-input
          variant: checkbox
      settings:
        label_display: after
        type: checkbox
    radio:
      label: Radio
      fields:
        children:
          id: form-input
          variant: radio
      settings:
        label_display: after
        type: radio
    select:
      label: Select
      fields:
        children:
          id: form-select
    textarea:
      label: Textarea
      fields:
        children:
          id: form-textarea
    radios:
      label: Radios
      fields:
        children:
          id: form-radios
      settings:
        type: radios
    checkboxes:
      label: Checkboxes
      fields:
        children:
          id: form-checkboxes
        label:
          id: form-label
          fields:
            title: This is the form label
          settings:
            required: true
      settings:
        type: radios
