tm_bits_badge:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-badge.twig"
  label: Badges
  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: null

tm_bits_date:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-date.twig"
  label: Date single

  fields:
    datetime:
      type: text
      label: Date time value
      preview: "2022-12-31T00:00:00+00:00"
    date_format:
      type: text
      label: Date format
      preview: 'D, d M Y'

tm_bits_tags:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-tags.twig"
  label: Tags
  libraries:
    - tm_bits_tags_lib:
        css:
          component:
            ../styles/tm-bits-tags.css: { }

  fields:
    tags:
      type: object
      label: Tags
      preview:
        - name: "A tag"
          url: "/"
        - name: "Another tag"
          url: "/"
          color: blue
        - name: "Yet another tag"
          url: "/"
          color: green

  settings:

    not_links:
      type: boolean
      label: Not links
      description: Override links if in data
      preview: false
      default_vlaue: false

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

tm_bits_hotlink:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-hotlink.twig"
  label: Share link
  libraries:
    - tm_bits_hotlink_lib:
        css:
          component:
            ../styles/tm-bits-hotlink.css: { }

  fields:
    url:
      type: text
      label: Link
      preview: 'https://this.com#123'
    button_text:
      type: text
      label: Button text
      preview: 'Share'
    lid:
      type: text
      label: ID
      preview: '123'
  settings:
    btn_class:
      type: textfield
      label: Button class
      preview: btn-outline-default btn-sm btn

tm_bits_ajax:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-ajax.twig"
  label: Ajax fullscreen
  description: Ajax fullscreen
  libraries:
    - tm_bits_ajax_lib:
        css:
          component:
            ../styles/tm-bits-ajax.css: { }

tm_bits_timeago:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-timeago.twig"
  label: Time ago
  description: Time ago

tm_bits_more_less:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-more-less.twig"
  label: More & Less
  description: More & Less
  libraries:
    - tm_bits_more_less_lib:
        css:
          component:
            ../styles/tm-bits-more-less.css: { }

  fields:
    content:
      type: text
      label: Content
      preview:
        faker: lorem.paragraphs
    more_str:
      type: text
      label: More string
      preview: 'More '
    less_str:
      type: text
      label: Less string
      preview: 'Less '

tm_bits_scroller:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-scroller.twig"
  label: Scroller
  description: Scroller
  libraries:
    - tm_bits_scroller_lib:
        js:
          ../behaviors/tm-bits-scroller.js: { }
        css:
          component:
            ../styles/tm-bits-scroller.css: { }

  fields:
    content:
      type: text
      label: Content
      preview:
        faker: lorem.paragraphs

  settings:
    class:
      type: textfield
      label: Class
      preview: col-md-4

tm_bits_scroller_block:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-scroller-block.twig"
  label: Scroller Block
  description: Scroller Block

  fields:
    title:
      type: pattern
      label: Title
      preview:
        id: icon-bookended
        fields:
          text: Latest News
          icon_right: fal fa-angle-right
          icon_left: fas fa-cogs
          class: belianr

    content:
      type: pattern
      label: Content
      preview:
        id: list
        fields:
          list:
            - "<a href='#'>Something Something Something Something Something</a>"
            - "<a href='#'>Some thing Some thing Some thing Some thing Something</a>"
            - "<a href='#'>Something Some thing Something Some thing Something</a>"
            - "<a href='#'>Some thing Something Something Something Some thing</a>"
            - "<a href='#'>Something Some thing Some thing Some thing Something</a>"
            - "<ah ref='#'>Something Something Something Something Something</a>"

        settings:
          list_class: ulc scroll-list

  settings:
    class:
      type: textfield
      label: Class
      preview: col-md-4

tm_bits_img_blk:
  namespace: "Molecules/TM - Bits & Pieces"
  use: "@molecules/tm-bits/tm-bits-img-blk.twig"
  label: Sidebar image block
  description: Sidebar image block
  libraries:
    - tm_bits_img_blk_lib:
        css:
          component:
            ../styles/tm-bits-img-blk.css: { }
