bs-collapse:
  namespace: "Molecules/Bootstrap"
  use: "@molecules/tm-bs/collapse/collapse.twig"
  label: Collapse Item
  description: A collapsible item.
  libraries:
    - collapse_lib:
        css:
          component:
            ../styles/collapse.css: { weight: 10 }
  fields:
    label:
      type: text
      label: Label
      description: The collapse trigger content.
      preview:
        faker: lorem.word
    content:
      type: text
      label: Content
      description: The collapsed content.
      preview:
        faker: lorem.paragraph
    aiid:
      type: text
      label: Item ID
      description: ID of the collapse
      preview: 'abc'
  settings:
    toggle:
      type: select
      label: Toggle
      description: The icon used for collapse.
      options:
        sign: Sign
        chevron: Chevron
    active:
      type: boolean
      label: Active
      description: Whether the item is open or not.
      default_value: false
      preview: false
    level:
      type: select
      label: Level
      description: Block or inline (flex or inline-flex).
      default_value: block
      preview: inline
      options:
        block: Block
        inline: inline
    content_class:
      type: textfield
      label: Content class
      description: Content class
    content_attributes:
      type: attributes
      label: Content attributes
      description: Content attributes
    link_attributes:
      type: attributes
      label: Link attributes
      description: Link attributes
    link_class:
      type: textfield
      label: Link class
      description: Link class
    tag_name:
      type: textfield
      label: Tag name
      description: Tag name
      default_value: span
      preview: span

  variants:
    __default:
      label: Default
      description: Default
    simple:
      label: Simple with chevron
      description: Simple with chevron
      settings:
        toggle: chevron
        level: inline
    c_sign:
      label: With sign toggle
      description:  With sign toggle
      settings:
        toggle: sign
        link_class: aci-a-link
        content_class: aci-a-content
        tag_name: h3
    c_chevron:
      label: With chevron toggle
      description: With chevron toggle
      settings:
        toggle: chevron
        link_class: aci-a-link
        content_class: aci-a-content
        tag_name: h3
