alert:
  label: Alert
  namespace: Molecules/TM - Messages
  use: '@molecules/tm-message/alert/alert.twig'
  description: Colorful status, warning and error messages for every situation.
  libraries:
    - alert_lib:
        css:
          component:
            ../styles/alert.css: { weight: 10 }

  fields:
    header:
      type: text
      label: Header
      preview:
        faker: lorem.word
    content:
      type: text
      label: Content
      preview:
        faker: lorem.paragraphs
    icon:
      type: text
      label: Icon

  settings:
    status:
      label: Status
      desciption: Bootstrap status
      type: select
      options:
        default: Default
        primary: Primary
        secondary: Secondary
        success: Success
        danger: Danger
        warning: Warning
        info: Info
        light: Light
        dark: Dark
      default_value: default
      preview: default
    item_layout:
      type: select
      label: Layout
      options:
        standard: Standard
        side_icon: Side icon
      default: standard
      preview: standard
    icon_set:
      type: select
      label: Icon set
      options:
        solid: Solid
        outline: Outline
      default: solid
      preview: solid
    custom_colours:
      type: boolean
      label: Custom colours
      default: false
      preview: false

  variants:
    __default:
      label: Default
    status:
      label: Status message
      settings:
        status: success
    error:
      label: Error message
      settings:
        status: danger
    warning:
      label: Warning message
      settings:
        status: warning
    info:
      label: Info message
      settings:
        status: info
    light:
      label: Light message
      settings:
        status: light
    dark:
      label: Dark message
      settings:
        status: dark
    side_icon:
      label: Side icon
      settings:
        item_layout: side_icon
