styled-tags-element:
  label: Styled Tags
  namespace: Atoms/TM - Forms/Styled Tags
  use: '@atoms/tm-forms/styled-tags/_styled-tags-element.twig'
  description: Tags as radio checkboxes with images.
  visibility: storybook
  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

  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)

  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' />
    talk_cards:
      label: Image Tags C
      settings:
        style: talk-cards
      fields:
        elements:
          - fid: a
            title: Lorem ipsum dolor sit amet
            img: <img class='' src='https://picsum.photos/500/300?rnd=1' />
          - fid: b
            title: Consectetur adipiscing
            img: <img class='' src='https://picsum.photos/500/300?rnd=2' />
          - fid: c
            title: Sed do eiusmod
            img: <img class='' src='https://picsum.photos/500/300?rnd=3' />
          - fid: d
            title: Ut enim ad minim
            img: <img class='' src='https://picsum.photos/500/300?rnd=4' />
          - fid: e
            title: Duis aute irure dolor
            img: <img class='' src='https://picsum.photos/500/300?rnd=5' />
    button_group_hoz:
      label: Button group (hoz)
      settings:
        style: btn-grp-hoz
    button_group_vert:
      label: Button group (vert)
      settings:
        style: btn-grp-vert
