Button

// src/components/elements/button/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/button
required:
  - label
properties:
  label:
    type: string
  icon:
    type: string
  icon_left:
    type: boolean
  class:
    type: string
  target:
    type: string
    enum:
      - _blank
      - _self
  mutation:
    type: string
    enum:
      - secondary
      - donation
  reduced:
    type: boolean
  hidden:
    type: boolean
  type:
    type: string
    enum:
      - button
      - submit
      - reset
  url:
    type: string
    format: uri-reference
  disabled:
    type: boolean
  tenant:
    type: string

// src/components/elements/button/mocks.yaml

attributes:
  $drupal: true
label: Label Button
$hidden: true
$variants:
  - $name: Primary Button
    label: Label Button
  - $name: Primary Button Disabled
    disabled: true
  - $name: Primary Button with Icon right
    icon: arrow
  - $name: Primary Button with Icon left
    icon: arrow-left
    icon_left: true
  - $name: Primary Button with Icon and reduced on mobile
    icon: arrow
    reduced: true
  - $name: Secondary Button
    mutation: secondary
  - $name: Secondary Button Disabled
    mutation: secondary
    disabled: true
  - $name: Secondary Button with Icon Right
    mutation: secondary
    icon: arrow
  - $name: Secondary Button with Icon Left
    mutation: secondary
    icon: arrow-left
    icon_left: true
  - $name: Secondary Button with Icon and reduced on mobile
    mutation: secondary
    icon: arrow
    reduced: true
  - $name: Donation Button
    mutation: donation
  - $name: Donation Button Disabled
    mutation: donation
    disabled: true
  - $name: Donation Button with Icon right
    icon: arrow
    mutation: donation
  - $name: Donation Button with Icon left
    icon: arrow-left
    mutation: donation
    icon_left: true
  - $name: Donation Button with Icon and reduced on mobile
    icon: arrow
    reduced: true
    mutation: donation
  - $name: Default Link
    label: Label Link
    url: url
  - $name: Link with Icon right
    label: Label Link
    icon: arrow
    url: url
  - $name: Link with Icon left
    label: Label Link
    icon: arrow
    icon_left: true
    url: url
  - $name: Link with Icon and reduced on mobile
    reduced: true
    url: url
    icon: arrow
  - $name: Kids Primary Button
    tenant: kids
  - $name: Kids Secondary Button
    tenant: kids
    mutation: secondary

// src/components/elements/button/button.html.twig

{% set modifiers = [] %}
{% if mutation %}
  {% set modifiers = modifiers|merge([mutation]) %}
{% endif %}
{% if tenant %}
  {% set modifiers = modifiers|merge([tenant]) %}
{% endif %}
{% if reduced %}
  {% set modifiers = modifiers|merge(["reduced"]) %}
{% endif %}
{% if icon_left %}
  {% set modifiers = modifiers|merge(["iconLeft"]) %}
{% endif %}

{% set icon_html %}
{% if icon %}{% include "@elements/icon/icon.html.twig" with {name: icon} only %}{% endif %}
{% endset %}

{% include "@fsk/form/button/button.html.twig" with {
  attributes: attributes,
  icon: icon_html,
  classes: [class],
  disabled: disabled,
  hidden: hidden,
  label: label,
  modifiers: modifiers,
  target: target,
  type: type,
  url: url,
} only %}