styled-tags-element:
  namespace: "Atoms/TM - Forms/Styled Tags"
  use: "@atoms/tm-forms/styled-tags/_styled-tags-element.twig"
  label: Styled Tags
  description: Tags as radio checkboxes with images.
  visibility: storybook

  settings:

    input_type:
      type: select
      label: Radios or Checkbox
      default_value: radio
      preview: radio
      options:
        radio: Radios
        checkbox: Checkboxes

    inverted:
      type: boolean
      label: Inverted
      default_value: false
      preview: false

    style:
      type: select
      label: Style
      default_value: tags
      preview: tags
      options:
        tags: Tags
        image-tags: Image Tags
        image-offers: Image Offers
        btn-grp-hoz: Button group (hoz)
        btn-grp-vert: Button group (vert)

  fields:
    elements:
      type: object
      label: Children
      preview:
        - fid: 'a'
          title: "Lorem ipsum dolor sit amet"
          img: "<img class='' src='https://picsum.photos/400/200/' />"

        - fid: 'b'
          title: "Consectetur adipiscing"
          img: "<img class='' src='https://picsum.photos/400/200/' />"
          color: purple

        - fid: 'c'
          title: "Sed do eiusmod"
          img: "<img class='' src='https://picsum.photos/400/200/' />"
          color: orange

        - fid: 'd'
          title: "Ut enim ad minim"
          img: "<img class='' src='https://picsum.photos/400/200/' />"
          color: red

        - fid: 'e'
          title: "Duis aute irure dolor"
          img: "<img class='' src='https://picsum.photos/400/200/' />"
          color: blue

        - fid: 'f'
          title: "In voluptate "
          img: "<img class='' src='https://picsum.photos/400/200/' />"
          color: green

  variants:
    __default:
      label: Default
    tags:
      label: Standard tags
      settings:
        style: tags
    image_tags:
      label: Image Tags A
      settings:
        style: image-tags
      fields:
        elements:
          - fid: 'a'
            title: "Lorem ipsum dolor sit amet"
            img: "<img class='' src='https://picsum.photos/400/200?rnd=1' />"
          - fid: 'b'
            title: "Consectetur adipiscing"
            img: "<img class='' src='https://picsum.photos/400/200?rnd=2' />"
          - fid: 'c'
            title: "Sed do eiusmod"
            img: "<img class='' src='https://picsum.photos/400/200?rnd=3' />"
          - fid: 'd'
            title: "Ut enim ad minim"
            img: "<img class='' src='https://picsum.photos/400/200?rnd=4' />"
          - fid: 'e'
            title: "Duis aute irure dolor"
            img: "<img class='' src='https://picsum.photos/400/200?rnd=5' />"
          - fid: 'f'
            title: "In voluptate "
            img: "<img class='' src='https://picsum.photos/400/200?rnd=6' />"
    image_offers:
      label: Image Tags B
      settings:
        style: image-offers
      fields:
        elements:
          - fid: 'a'
            title: "Lorem ipsum dolor sit amet"
            img: "<img class='' src='https://picsum.photos/200/200?rnd=1' />"
          - fid: 'b'
            title: "Consectetur adipiscing"
            img: "<img class='' src='https://picsum.photos/200/200?rnd=2' />"
          - fid: 'c'
            title: "Sed do eiusmod"
            img: "<img class='' src='https://picsum.photos/200/200?rnd=3' />"
          - fid: 'd'
            title: "Ut enim ad minim"
            img: "<img class='' src='https://picsum.photos/200/200?rnd=4' />"
          - fid: 'e'
            title: "Duis aute irure dolor"
            img: "<img class='' src='https://picsum.photos/200/200?rnd=5' />"
          - fid: 'f'
            title: "In voluptate "
            img: "<img class='' src='https://picsum.photos/200/200?rnd=6' />"
    button_group_hoz:
      label: Button group (hoz)
      settings:
        style: btn-grp-hoz
    button_group_vert:
      label: Button group (vert)
      settings:
        style: btn-grp-vert
