Teaser body

// src/components/patterns/donation-teaser/teaser-body/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/donation-teaser/teaser-body
additionalProperties: false
properties:
  copy_for_one_time:
    type: string
    format: html
  copy_for_other_intervals:
    type: string
    format: html
  headline:
    type: string
  interval:
    $ref: /fsk/form/fieldset
    format: html
  amount:
    $ref: /fsk/form/fieldset
    format: html
  is_drupal_form:
    type: boolean
  submit_button:
    $ref: /fsk/form/form-element
required:
  - copy_for_one_time
  - copy_for_other_intervals
  - headline
  - interval
  - amount
  - submit_button

// src/components/patterns/donation-teaser/teaser-body/mocks.yaml

is_drupal_form: false
copy_for_one_time: >-
  Durch Ihre <strong>Spende</strong> unterstützen Sie Greenpeace dabei, Umwelt-
  und Klimaschutzprojekte umzusetzen. So können wir Tieren und Menschen helfen,
  ein besseres Leben zu haben. Greenpeace finanziert sich zu 100% aus
  Privatspenden!
copy_for_other_intervals: >-
  Durch Ihre <strong>monatliche Spende</strong> unterstützen Sie Greenpeace
  dabei, Umwelt- und Klimaschutzprojekte umzusetzen. So können wir Tieren und
  Menschen helfen, ein besseres Leben zu haben. Greenpeace finanziert sich zu
  100% aus Privatspenden!
headline: Ich unterstütze Greenpeace e.V.
interval:
  $tpl: '@fsk/form/fieldset'
  $ref: '@fsk/form/fieldset'
  attributes:
    class: TeaserBody-interval
  legend:
    title: Ich unterstütze Greenpeace e.V.
  children:
    $render:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        attributes:
          class: js-TeaserBody-intervalSelect
        label:
          title: Ich unterstütze Greenpeace e.V. *
          attributes:
            for: input3
        label_display: invisible
        children:
          $tpl: '@fsk/form/form-element/input/select'
          $ref: '@fsk/form/form-element/input/select'
          options:
            - type: option
              value: 12
              label: monatlich
              selected: true
            - 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:
            id: input3
amount:
  $tpl: '@fsk/form/fieldset'
  $ref: '@fsk/form/fieldset'
  attributes:
    class: TeaserBody-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: 10€
                attributes:
                  for: input10
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input10
                  value: 10
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 15€
                attributes:
                  for: input15
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input15
                  value: 15
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 40€
                attributes:
                  for: input40
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input40
                  value: 40
                  checked: true
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#input'
        label_display: invisible
        children:
          attributes:
            class: TeaserBody-amountInput
            placeholder: oder eigener Betrag
submit_button:
  $tpl: '@elements/button'
  $ref: '@elements/button#donation-button-with-icon-left'
  label: Jetzt spenden
  icon: heart
  class: TeaserBody-submit
$variants:
  - $name: with radio buttons
    $opts:
      interval: overwrite
    interval:
      $tpl: '@fsk/form/fieldset'
      $ref: '@fsk/form/fieldset'
      attributes:
        class: js-TeaserBody-intervalRadios TeaserBody-intervalRadios
      legend:
        title: Ich unterstütze Greenpeace
      children:
        $tpl: '@fsk/form/radios'
        $ref: '@fsk/form/radios'
        layout: row
        children:
          $render:
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              attributes:
                class: FskFormElement--switcher
              label:
                title: Monatlich
                attributes:
                  for: input2
                  data-text: Monatlich
              children:
                attributes:
                  name: spendenbetrag[interval_count]
                  id: input2
                  value: 1
                  class: FskRadio--switcher
                  checked: true
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              attributes:
                class: FskFormElement--switcher
              label:
                title: Einmalig
                attributes:
                  for: input100
                  data-text: Einmalig
              children:
                attributes:
                  name: spendenbetrag[interval_count]
                  id: input100
                  value: 0
                  class: FskRadio--switcher

// src/components/patterns/donation-teaser/teaser-body/teaser-body.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>
{% endif %}
  <div class="TeaserBody js-TeaserBody js-PaymentAmount">
    <div class="TeaserBody-topRow">
      {# The following <div> is populated with a paragraph via JS with the proper copy text #}
      <div
        data-copy-for-one-time="{{ copy_for_one_time }}"
        data-copy-for-other-intervals="{{ copy_for_other_intervals }}"
        class="TeaserBody-copy js-TeaserBody-copy u-typo-copy"
        aria-live="polite"
      ></div>
      {% include "@elements/icon/icon.html.twig" with {
        name: "green-arrow",
        class: "TeaserBody-arrow",
      } only %}
      <p class="TeaserBody-headline u-typo-headline6">{{ headline }}</p>
    </div>

    <div class="TeaserBody-middleRow">
      <div class="TeaserBody-intervalWrapper js-DonationTeaser-interval">
        {{ interval|raw }}
      </div>
      <div class="TeaserBody-amountWrapper js-DonationTeaser-amount">
        {{ amount|raw }}
      </div>
    </div>

    {% if donation_examples %}
      <div
        class="TeaserBody-examples js-PaymentAmount-examples"
        aria-live="polite"
        id="{{ donation_examples.id }}"
      >
        {% for example in donation_examples.items %}
          {{ example|raw }}
        {% endfor %}
      </div>
    {% endif %}

    <div class="TeaserBody-bottomRow">
      {{ submit_button }}

      <div class="TeaserBody-checks">
        <div class="TeaserBody-check">
          {% include "@elements/icon/icon.html.twig" with {
            name: "check-circle",
          } only %}
          <p class="u-typo-copy-small">Jederzeit kündbar - ohne Frist</p>
        </div>

        <div class="TeaserBody-check">
          {% include "@elements/icon/icon.html.twig" with {
            name: "check-circle",
          } only %}
          <p class="u-typo-copy-small">Steuerlich absetzbar</p>
        </div>
      </div>

      <div class="TeaserBody-paymentMethods">
        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "paypal",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "visa",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "mastercard",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          <span class="TeaserBody-paymentText">Lastschrift</span>
        </span>
      </div>
    </div>
  </div>
{% if not is_drupal_form %}
</form>
{% endif %}