Amount

// src/components/patterns/form/payment/payment-amount/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/payment/payment-amount
additionalProperties: false
properties:
  interval:
    type: string
    format: html
  amount:
    type: string
    format: html
  hidden_fields:
    type: string
    format: html
  is_drupal_form:
    type: boolean
  has_flyout:
    type: boolean
  has_flyout_open:
    type: boolean
  donation_examples:
    type: object
    properties:
      id:
        type: string
      items:
        type: array
        items:
          type: string
          format: html
required:
  - interval
  - amount

// src/components/patterns/form/payment/payment-amount/mocks.yaml

$hidden: true
is_drupal_form: false
has_flyout: true
donation_examples:
  id: test1234
  items:
    - $ref: elements/donation-example#small
      $tpl: elements/donation-example
      is_template: true
      data_attributes:
        - key: interval-dependency
          value: '0'
        - key: amount-dependency
          value: '60'
      copy:
        $tpl: elements/rte
        markup: lorem ipsum 60€.
    - $ref: elements/donation-example#small
      $tpl: elements/donation-example
      is_template: true
      data_attributes:
        - key: interval-dependency
          value: '0'
        - key: amount-dependency
          value: '50'
      copy:
        $tpl: elements/rte
        markup: lorem ipsum 50€.
    - $ref: elements/donation-example#small
      $tpl: elements/donation-example
      is_template: true
      data_attributes:
        - key: interval-dependency
          value: '0'
        - key: amount-dependency
          value: donate_custom_amount
      copy:
        $tpl: elements/rte
        markup: lorem ipsum custom amount.
amount:
  $tpl: '@fsk/form/fieldset'
  $ref: '@fsk/form/fieldset'
  attributes:
    class: PaymentAmount-amount
  legend:
    title: mit einem Betrag von
  children:
    $render:
      - $tpl: '@fsk/form/radios'
        $ref: '@fsk/form/radios'
        layout: row
        children:
          $render:
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 50€
                attributes:
                  for: input50
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input50
                  value: 50
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 60€
                attributes:
                  for: input60
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input60
                  value: 60
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 70€
                attributes:
                  for: input70
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input70
                  value: 70
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#input'
$variants:
  - $name: default
    interval:
      $tpl: '@fsk/form/fieldset'
      $ref: '@fsk/form/fieldset'
      attributes:
        class: PaymentAmount-interval
      legend:
        title: Ich unterstütze Greenpeace e.V.
      children:
        $tpl: '@fsk/form/radios'
        $ref: '@fsk/form/radios'
        layout: row
        children:
          $render:
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: Einmalig
                attributes:
                  for: input100
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[interval_count]
                  id: input100
                  value: 0
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: Monatlich
                attributes:
                  for: input2
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[interval_count]
                  id: input2
                  value: 1
  - $name: with select
    interval:
      $tpl: '@fsk/form/fieldset'
      $ref: '@fsk/form/fieldset'
      attributes:
        class: PaymentAmount-interval
      legend:
        title: Ich unterstütze Greenpeace e.V.
      children:
        $render:
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#select'
            label:
              title: Ich unterstütze Greenpeace e.V. *
              attributes:
                for: input3
            children:
              $tpl: '@fsk/form/form-element/input/select'
              $ref: '@fsk/form/form-element/input/select'
              options:
                - type: option
                  value: 12
                  label: monatlich
                - type: option
                  value: 4
                  label: vierteljährlich
                - type: option
                  value: 2
                  label: halbjährlich
                - type: option
                  value: 1
                  label: jährlich
                - type: option
                  value: '0'
                  label: einmalig
              attributes: null
              id: input3

// src/components/patterns/form/payment/payment-amount/payment-amount.html.twig

{#
  Attention: form elements with all relevant classes will be rendered by Drupal and passed as rendered html strings.
  The form tag in this template is needed only for miyagi.
#}

{% if not is_drupal_form %}
<form class="PaymentForm js-PaymentForm">
{% endif %}
  <div class="PaymentAmount js-PaymentAmount">
    {% if interval %}
      {% if has_flyout %}
        <div class="PaymentAmount-intervalHolder js-PaymentAmount-intervalHolder{% if has_flyout_open %} is-flyoutOpened{% endif %}">
      {% endif %}
        {{ interval|raw }}
      {% if has_flyout %}
        {% include "@elements/flyout/flyout.html.twig" with {
          class: "PaymentAmount-flyout js-PaymentAmount-flyout",
          has_flyout_open: has_flyout_open,
        } only %}
        </div>
      {% endif %}
    {% endif %}
    {% if amount %}
      {{ amount|raw }}
    {% endif %}
    {% if hidden_fields %}
      {{ hidden_fields|raw }}
    {% endif %}
    {% if donation_examples %}
      <div class="PaymentAmount-examples js-PaymentAmount-examples"
        aria-live="polite"
        id="{{ donation_examples.id }}"
      >
        {% for example in donation_examples.items %}
          {{ example|raw }}
        {% endfor %}
      </div>
    {% endif %}
  </div>
  {# Just for normal forms see container--form-actions.html.twig for multistep forms. #}
  {% if donation_notice and gift_page_url %}
    {% include "@elements/gift-prompt/gift-prompt.html.twig" with {
      gift_page_url: gift_page_url,
      is_simple_version: true,
      is_hidden: is_hidden,
      form_wrapper_id: form_wrapper_id,
    } only %}
  {% endif %}
{% if not is_drupal_form %}
  <button type="submit" hidden>Submit</button>
</form>
{% endif %}