tm_bits_badge:
  label: Badges
  namespace: Molecules/TM - Bits & Pieces
  use: '@molecules/tm-bits/tm-bits-badge.twig'
  description: Badges
  libraries:
    - tm_bits_badge_lib:
        css:
          component:
            ../styles/tm-bits-badge.css: {}
  fields:
    badge_text:
      type: text
      label: Badge text - Top
      preview: From Just
    badge_text_large:
      type: text
      label: Badge text - Bottom
      preview: £20.00
    badge_img_url:
      type: text
      label: Badge image URL
    badge_img_alt:
      type: text
      label: Badge image alt
  settings:
    floating:
      type: boolean
      label: Floating
      preview: false
      default: false
    badge_color:
      type: select
      label: Badge color
      options:
        red: red
        green: green
        blue: blue
        purple: purple
        yellow: yellow
        orange: orange
        grey: grey
        grey-light: grey-light
        grey-dark: grey-dark
  variants:
    __default:
      label: Default
      description: Default
    with_color:
      label: With color
      description: With color
      settings:
        badge_color: orange
    with_image:
      label: With image
      description: With image
      fields:
        badge_img_url: images/offers_image.png
        badge_img_alt: 2for1
        badge_text: false
        badge_text_large: false
      settings:
        badge_color:
