Layout Button

// src/components/patterns/form/layout/layout-button/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/layout/layout-button
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  has_loading:
    type: boolean
  mutation:
    type: string
  button_modifiers:
    type: array
  icon:
    type: string

// src/components/patterns/form/layout/layout-button/mocks.yaml

$hidden: true
attributes:
  $drupal: true
  value: Jetzt spenden
$variants:
  - $name: default
    icon: arrow
    attributes:
      value: Abschicken
  - $name: default with loading
    icon: arrow
    has_loading: true
    attributes:
      value: Weiter zur Datenüberprüfung
  - $name: as link
    mutation: link
    attributes:
      value: Daten bearbeiten
  - $name: as donation
    button_modifiers:
      - donation
    has_loading: true
    attributes:
      value: Jetzt spenden

// src/components/patterns/form/layout/layout-button/layout-button.html.twig

{% set classes = [
  has_loading ? 'js-FskButton' : ''
] %}

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

<div class="LayoutButton {% if mutation %} LayoutButton--{{ mutation }}{% endif %}">
  <div class="LayoutButton-wrapper">
    {% include "@fsk/form/form-element/input/input--submit/input--submit.html.twig" with {
      attributes: attributes.addClass(classes),
      modifiers: button_modifiers,
      icon: icon_html
    } only %}
    {% if children %}
      {{ children }}
    {% endif %}
    {% if has_loading %}
      {% include "@elements/loading-animation/loading-animation.html.twig" with {
        text: "Ihre Daten werden übertragen. <br>Bitte haben Sie einen Moment Geduld.",
        class: "is-hidden"
      } only %}
    {% endif %}
  </div>
</div>