form-form:
  namespace: "Atoms/Form"
  use: "@atoms/form/_form.twig"
  label: Form
  description: Form.
  libraries:
    - form_lib:
        css:
          component:
            ../styles/forms.css: { weight: 7 }
            ../styles/forms-styled-tags.css: { weight: 8 }
            ../styles/forms-form.css: { weight: 9 }

  fields:
    children:
      label: Example form element
      type: pattern
      preview:
        id: 'form-element'
        variant: 'textfield'
        fields:
          suffix: "<i class='fas fa-map-marker-alt'></i>"
          label:
            id: 'form-label'
            fields:
              title: "Title"

  settings:
    attributes:
      type: attributes
      label: Attributes
    form_class:
      type: textfield
      label: Form class
    is_inline:
      type: boolean
      label: Inline

form-input:
  namespace: "Atoms/Form"
  use: "@atoms/form/_input.twig"
  label: Input
  description: Input form elements.

  variants:
    textfield:
      label: Textfield
      settings:
        type: text
        placeholder: Enter text
    password:
      label: Password
      settings:
        type: password
        placeholder: Password
    email:
      label: Email
      settings:
        type: email
        placeholder: Email address
    file:
      label: File
      settings:
        type: file
        placeholder: ""
    tel:
      label: Tel
      settings:
        type: tel
        placeholder: Telephone number
    date:
      label: Date
      settings:
        type: date
        placeholder: ""
    time:
      label: Time
      settings:
        type: time
        placeholder: ""
    url:
      label: URL
      settings:
        type: url
        placeholder: ""
    range:
      label: Range
      settings:
        type: range
        placeholder: ""
    color:
      label: Color
      settings:
        type: color
        placeholder: ""
    checkbox:
      label: Checkbox
      settings:
        type: checkbox
        placeholder: ""
    radio:
      label: Radio
      settings:
        type: radio
        placeholder: ""

  settings:
    type:
      type: select
      label: Type
      options:
        textfield: textfield
        password: password
        email: email
        file: file
        tel: tel
        date: date
      preview: textfield
    size:
      type: select
      label: size
      options:
        md: Normal
        lg: Large
        sm: Small
      preview: md
      default: md
    placeholder:
      type: textfield
      label: Placeholder
      preview: Placeholder
    attributes:
      type: attributes
      label: Attributes

  fields:
    children:
      type: pattern
      label: Children

form-element:
  namespace: "Atoms/Form"
  use: "@atoms/form/_form-element.twig"
  label: Form element
  description: Form element
  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"

  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"

  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"

form-label:
  use: "@atoms/form/_form-label.twig"
  namespace: "Atoms/Form"
  label: Label
  fields:
    title:
      type: text
      label: Title
      preview:
        faker: lorem.word

  settings:
    required:
      type: boolean
      label: Required

form-select:
  namespace: "Atoms/Form"
  use: "@atoms/form/_select.twig"
  label: Select
  settings:
    attributes:
      type: attributes
      label: Attributes
  fields:
    options:
      type: object
      label: Options
      preview:
        - label: Option 1
          type: "option"
          selected: true
        - label: Option 2
          type: "option"
        - label: Option 3
          type: "option"

form-textarea:
  use: "@atoms/form/_textarea.twig"
  namespace: "Atoms/Form"
  label: Textarea
  settings:
    wrapper_attributes:
      type: attributes
      label: Wrapper attributes
    attributes:
      type: attributes
      label: Attributes
  fields:
    value:
      type: text
      label: Value
      preview:
        faker: lorem.sentences

form-radios:
  use: "@atoms/form/_radios.twig"
  namespace: "Atoms/Form"
  label: Radios
  settings:
    attributes:
      type: attributes
      label: Attributes
    classes:
      type: textfield
      label: Classes
  fields:
    children:
      type: pattern
      label: Children
      preview:
        - id: form-element
          variant: "radio"
          fields:
            description_content: ""
            errors: ""
        - id: form-element
          variant: "radio"
          fields:
            description_content: ""
            errors: ""
        - id: form-element
          variant: "radio"
          fields:
            description_content: ""
            errors: ""

form-checkboxes:
  use: "@atoms/form/_checkboxes.twig"
  namespace: "Atoms/Form"
  label: Checkboxes
  settings:
    attributes:
      type: attributes
      label: Attributes
    classes:
      type: textfield
      label: Classes
  fields:
    children:
      type: pattern
      label: Children
      multi_value_type: single_value
      preview:
        - id: form-element
          variant: "checkbox"
          fields:
            description_content: ""
            errors: ""
          settings:
            type: checkbox
        - id: form-element
          variant: "checkbox"
          fields:
            description_content: ""
            errors: ""
          settings:
            type: checkbox
        - id: form-element
          variant: "checkbox"
          fields:
            description_content: ""
            errors: ""
          settings:
            type: checkbox

form_checkboxes_fieldst:
  use: "@atoms/form/_fieldset_checkboxes.twig"
  namespace: "Atoms/Form"
  label: Checkboxes fieldset

  fields:
    children:
      type: pattern
      label: Children
      preview:
        id: form-checkboxes
    legend_title:
      type: text
      label: Label
      preview: Checkboxes field label
    errors:
      type: text
      label: Errors
      preview:
        faker: lorem.sentences
    description_content:
      type: text
      label: Description
      preview:
        faker: lorem.sentences

form_radios_fieldst:
  use: "@atoms/form/_fieldset_radios.twig"
  namespace: "Atoms/Form"
  label: Radios fieldset

  fields:
    children:
      type: pattern
      label: Children
      preview:
        id: form-radios
    legend_title:
      type: text
      label: Label
      preview: Radios field label
    errors:
      type: text
      label: Errors
      preview:
        faker: lorem.sentences
    description_content:
      type: text
      label: Description
      preview:
        faker: lorem.sentences

  settings:
    title_display:
      type: select
      label: Label display
      options:
        before: Before
        inline: Inline
        invisible: Invisible
        hidden: Hidden


form-submit:
  use: "@atoms/form/_submit.twig"
  namespace: "Atoms/Form"
  label: Submit
  settings:
    size:
      type: select
      label: size
      options:
        md: Normal
        lg: Large
        sm: Small
      preview: md
      default: md
    attributes:
      type: attributes
      label: Attributes
  fields:
    value:
      type: text
      label: Value
      preview:
        faker: lorem.words

form-fieldset:
  use: "@atoms/form/_fieldset.twig"
  namespace: "Atoms/Form"
  label: Fieldset
  settings:
    attributes:
      type: attributes
      label: Attributes
    legend_attributes:
      type: attributes
      label: Legend attributes
    content_attributes:
      type: attributes
      label: Content attributes
    required:
      type: boolean
      label: Required
    no_card:
      type: boolean
      label: No card styling
    title_display:
      type: select
      label: Label display
      options:
        before: Before
        inline: Inline
        invisible: Invisible
        hidden: Hidden
      preview: before
      default_value: before
    description_display:
      type: select
      label: Description display
      options:
        before: Before
        after: After
        invisible: Invisible
        hidden: Hidden
      preview: after
      default_value: after
  fields:
    legend_title:
      type: text
      label: Legend title
      preview:
        faker: lorem.words
    description_content:
      type: text
      label: Description
      description: The form description.
      preview:
        faker: lorem.sentences
    children:
      type: pattern
      label: Children
      preview:
        - id: form-element
          variant: "select"
          fields:
            errors: ""
        - id: form-element
          variant: "textfield"
          fields:
            errors: ""
        - id: form-element
          variant: "checkbox"
          fields:
            errors: ""
        - id: form-element
          variant: "textarea"
          fields:
            errors: ""
        - id: form-submit

form-details:
  use: "@atoms/form/_details.twig"
  namespace: "Atoms/Form"
  label: Details
  settings:
    attributes:
      type: attributes
      label: Attributes
    summary_attributes:
      type: attributes
      label: Summary attributes
    required:
      type: boolean
      label: Required
    description_display:
      type: select
      label: Description display
      options:
        before: Before
        after: After
        invisible: Invisible
        hidden: Hidden
      preview: after
      default_value: after
  fields:
    summary_title:
      type: text
      label: Summary title
      preview:
        faker: lorem.words
    description_content:
      type: text
      label: Description
      description: The form description.
      preview:
        faker: lorem.sentences
    children:
      type: pattern
      label: Children
      preview:
        - id: form-element
          variant: "select"
          fields:
            errors: ""
        - id: form-element
          variant: "textfield"
          fields:
            errors: ""
        - id: form-element
          variant: "checkbox"
          fields:
            errors: ""
        - id: form-element
          variant: "textarea"
          fields:
            errors: ""
        - id: form-submit

form_examples:
  namespace: "Atoms/Form"
  use: "@atoms/form/_xamples.twig"
  label: Xamples
  description: Non template widgets and items uings CSS.
