Buttons

// src/components/patterns/buttons/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/buttons
additionalProperties: false
required:
  - buttons
properties:
  class:
    type: string
  embedded:
    type: boolean
  donation_tracking_class:
    type: string
  buttons:
    type: array
    items:
      type: object
      properties:
        type:
          type: string
          enum:
            - button
            - link
        mutation:
          type: string
          enum:
            - primary
            - secondary
            - donation
        label:
          type: string
        url:
          type: string
          format: uri-reference
        target:
          type: string
      required:
        - type
        - label
        - url
  tenant:
    type: string

// src/components/patterns/buttons/mocks.yaml

$variants:
  - $name: Button primary
    buttons:
      - type: button
        label: Primary Btn zentriert
        url: url
  - $name: Button secondary
    buttons:
      - type: button
        mutation: secondary
        label: Secondary Btn zentriert
        url: url
  - $name: Button tertiary link
    buttons:
      - type: link
        label: Das ist ein tertiärer Link
        url: url
  - $name: Button primary and Link
    buttons:
      - type: button
        label: Primary Btn zentriert
        url: '#url'
      - type: link
        label: Das ist ein alternativer Link
        url: '#url'
  - $name: Button secondary and Link
    buttons:
      - type: button
        label: Secondary Btn zentriert
        url: url
        mutation: secondary
      - type: link
        label: Das ist ein alternativer Link
        url: url
  - $name: Button donation
    buttons:
      - type: button
        label: Secondary Btn zentriert
        url: url
        mutation: donation
  - $name: Button donation and Link
    buttons:
      - type: button
        label: Secondary Btn zentriert
        url: '#url'
        mutation: donation
      - type: link
        label: Das ist ein alternativer Link
        url: '#url'
  - $name: Kids Button primary and Link
    tenant: kids
    buttons:
      - type: button
        label: Primary Btn zentriert
        url: url
      - type: link
        label: Das ist ein alternativer Link
        url: url

// src/components/patterns/buttons/buttons.html.twig

<div class="Buttons Tracking--buttons{% if not embedded %} u-container{% endif %}{% if class %} {{ class }}{% endif %}">
  {% for item in buttons %}
    {% if item.type == "button" %}
      {% include "@elements/button/button.html.twig" with {
        class: item.class ? "Buttons-button " ~ item.class : "Buttons-button",
        label: item.label,
        mutation: item.mutation,
        target: item.target,
        tenant: tenant,
        url: item.url
      } only %}
    {% elseif item.type == "link" %}
      {% include "@elements/link/link.html.twig" with {
        class: item.class ? "Buttons-button " ~ item.class : "Buttons-button",
        icon: "minus",
        icon_left: true,
        label: item.label,
        target: item.target,
        tenant: tenant,
        url: item.url
      } only %}
    {% endif %}
  {% endfor %}
</div>