link_block:
  namespace: "Molecules/TM - Link Blocks"
  use: "@molecules/tm-lb/link-block/link-block.twig"
  label: Link Block
  description: A simple link block, that can contain text and image.
  libraries:
    - link_block_lib:
        css:
          component:
            ../styles/link-block.css: { weight: 10 }

  fields:
    image:
      type: text
      label: Image entity
      description: Image entity
    image_src:
      type: text
      label: Image src
      description: If not image provided, image source path for <img> tag eg 'https://picsum.photos/500/400'
      preview: "https://picsum.photos/500/400"
    image_alt:
      type: text
      label: Image alt
      description: If not image provided, image alt test for <img> tag e.g 'Person on a bike'
      preview: "Person on a bike"
    video:
      type: text
      label: Video embed
      description: Video iframe or embed code
    block_link:
      type: text
      label: Url
      description: Url
      preview: "/somewhere"
    title:
      type: text
      label: Title
      description: The title for the link block
      preview:
        faker: lorem.words
    subtitle:
      type: text
      label: Subtitle
      description: The sub title for the link block
      preview:
        faker: lorem.sentence
    body:
      type: text
      label: Body
      description: Any relevent text for this molecule
      preview:
        faker: lorem.sentences
    readmore:
      type: text
      label: Readmore
      description: The readmore for the link block
      preview: read more
    icon_left:
      type: text
      label: Left icon
      description: The left icon for your bookend link e.g 'fas fa-bell'
      default: "fas fa-lightbulb"
      preview: "fas fa-lightbulb"
    icon_right:
      type: text
      label: Right icon
      description: The right icon for your bookend link eg 'fas fa-chevron-right'
      default: "fas fa-chevron-right"
      preview: "fas fa-chevron-right"
    subtitle_icon_left:
      type: text
      label: Left icon
      description: The left icon for your bookend link e.g 'fas fa-bell'
      default: "fas fa-lightbulb"
      preview: "fas fa-lightbulb"
    subtitle_icon_right:
      type: text
      label: Right icon
      description: The right icon for your bookend link eg 'fas fa-chevron-right'
      default: "fas fa-chevron-right"
      preview: "fas fa-chevron-right"
    tags:
      type: object
      label: Label
      description: Link block tags
      preview:
        - name: "A tag"
          url: "/"
        - name: "Another tag"
          url: "/"
          color: blue
        - name: "Yet another tag"
          url: "/"
          color: green

  settings:
    block_class:
      type: textfield
      label: Block class
      description: The class for this block
      preview: "cbelianr"
      default: "cbelianr"
    title_display:
      type: select
      label: Level
      description: The display of the element, can be 'flex' for block or 'inline-flex' for inline
      options:
        flex: Block (flex)
        inline: Inline (flex)
        noflex: Inline (icon flush)
    header_tag:
      type: textfield
      label: Header level
      description: Heading level e.g 'h3'
      preview: "h3"
      default: "h3"
    subtitle_display:
      type: select
      label: Level
      description: The display of the element, can be 'flex' for block or 'inline-flex' for inline
      options:
        flex: Block
        inline: Inline
        noflex: Inline (icon flush)
    subtitle_tag:
      type: textfield
      label: Header level
      description: Heading level e.g 'h3'
      preview: "h4"
      default: "h4"
    text_class:
      type: textfield
      label: Text Class
      description: Text class
    image_fluid:
      type: boolean
      label: Image fluid
      preview: true
      default_value: true
    image_background:
      type: boolean
      label: Image background
      preview: false
      default_value: false
    link_classes:
      type: textfield
      label: Link classes
      description: Classes for the link e.g 'belianr'
      default: ""
      preview: ""
    layout:
      type: select
      label: Layout
      options:
        vert: Vertical
        hoz: Horizontal
      default: vert
      preview: vert
    order:
      type: select
      label: Image order
      options:
        fwd: Text first
        bwd: Image first
      default: fwd
      preview: fwd
    link_scope:
      type: select
      label: Link Scope
      default_value: block
      preview: block
      description: Link Scope. This can be whole card or a section. Often this is none as the link is in the readmore.
      options:
        block: Whole block
        title: Title only
        readmore: Read more only

  variants:

    __default:
      label: Default
      settings:
        block_class: 'bl-va cbelianr'
        header_tag: h2
      fields:
        image_src: https://picsum.photos/500/400
        subtitle_icon_left: false
        subtitle_icon_right: false

    version_a:
      label: Version A (GA home left)
      settings:
        link_scope: block
        block_class: 'bl-va cbelianr'
        header_tag: h2
        subtitle_tag: span
      fields:
        subtitle_icon_left: false
        subtitle_icon_right: false
        body: false
        readmore: false
        tags: false
        image_src: false
        image_alt: false

    version_b:
      label: Version B (GA home right)
      settings:
        link_scope: block
        block_class: 'bl-vb cbelianr'
        link_classes: 'belirf'
        header_tag: h3
      fields:
        icon_left: false
        subtitle: false
        body: false
        readmore: false
        tags: false
        image_src: false
        image_alt: false

    version_c:
      label: Version C (unused)
      settings:
        link_scope: block
        block_class: 'bl-vc cbelianr'
        header_tag: h2
      fields:
        subtitle: false
        readmore: false
        tags: false
        image_src: false
        image_alt: false

    version_d:
      label: Version D (GA home right)
      settings:
        link_scope: block
        block_class: 'bl-vd'
        header_tag: h2
      fields:
        icon_left: 'fas fa-newspaper'
        icon_right: false
        title: Latest news
        subtitle: false
        body: false
        readmore: See more
        tags: false
        image_src: false
        image_alt: false

    version_e:
      label: Version E (GA news)
      settings:
        link_scope: block
        block_class: 'bl-ve cbelianr'
        header_tag: h2
      fields:
        icon_left: false
        title: Latest news
        subtitle: 'Fri, 10/09/2021'
        subtitle_icon_left: false
        subtitle_icon_right: false
        readmore: false
        image_src: false
        image_alt: false

    version_f:
      label: Version F (WMR Newsdesk)
      settings:
        link_scope: block
        block_class: 'bl-vf cbelianr'
        header_tag: h2
        order: bwd
        layout: hoz
        image_fluid: false
      fields:
        image_src: https://picsum.photos/370/277
        icon_left: false
        title: Changing of the guard walking tour in London, Here is a longer title.
        subtitle: false
        readmore: false
        tags: false
        body: "Tuesday, 7 March 2023"

    version_g:
      label: Version G (Carousel slide)
      settings:
        link_scope: block
        block_class: 'bl-vg cbelianr'
        header_tag: h3
        subtitle_tag: h4
        title_display: inline
        subtitle_display: inline
      fields:
        icon_left: false
        icon_right: false
        subtitle_icon_left: false
        subtitle_icon_right: 'fas fa-chevron-right'
        readmore: false
        tags: false
        image_src: false

    version_h:
      label: Version H (WMT signup)
      settings:
        link_scope: block
        block_class: 'bl-vh cbelianr bg-green bl-lirfr'
        header_tag: h2
        title_display: noflex
      fields:
        icon_left: far fa-envelope
        title: 'Sign up <span class="ffn">to our newsletter now</span>'
        subtitle: false
        readmore: false
        tags: false
        body: false
        image_src: false
