Layout Buttons

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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/layout/layout-buttons
additionalProperties: false
required:
  - attributes
  - children
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  is_checkout:
    type: boolean
  is_inline:
    type: boolean
  no_grid:
    type: boolean

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

$hidden: true
attributes:
  $drupal: true
  value: Jetzt spenden
$variants:
  - $name: default
    children:
      $render:
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button#as-link'
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button#as-donation'
  - $name: checkout
    is_checkout: true
    children:
      $render:
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button#as-link'
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button#as-donation'
  - $name: inline buttons
    is_inline: true
    children:
      $render:
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button'
          attributes:
            $drupal: true
            value: Zuruck
        - $tpl: '@patterns/form/layout/layout-button'
          $ref: '@patterns/form/layout/layout-button#default'

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

<div {{ attributes|without("class") }} class="LayoutButtons {{ no_grid ? "" : "u-grid" }} {{ attributes.class }}{% if is_checkout %} LayoutButtons--checkout{% endif %}">
  {% if is_inline and not is_checkout %}<div class="LayoutButtons-holder">{% endif %}
    {{ children }}
  {% if is_inline and not is_checkout %}</div>{% endif %}
</div>