donation-teaser

// src/components/patterns/donation-teaser/donation-teaser.html.twig

<div class="DonationTeaser u-grid
  {%- if small_donation_teaser %} DonationTeaser--small{% endif -%}
  {%- if counter_state_endpoint %} DonationTeaser--progress{% endif -%}
  {%- if class %} {{ class }}{% endif -%}
  {%- if is_first_on_page %} DonationTeaser--firstOnPage{% endif -%}
  {{- is_on_donation_form ? " DonationTeaser--inDonationForm" : " u-container" -}}
">

  <div class="DonationTeaser-imageContainer">
    {{ image|raw }}
    {% if image_copyright %}
      <span class="DonationTeaser-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</span>
    {% endif %}
  </div>
  {% if not small_donation_teaser %}
    <div class="DonationTeaser-formHolder">
  {% endif %}
    <div class="DonationTeaser-text">
      <{{ h1_headline ? 'h1' : 'h3' }} class="DonationTeaser-headline u-typo-headline3">{{ headline|german_quotes }}</{{ h1_headline ? 'h1' : 'h3' }}>
      {% if counter_end_timestamp %}
        {% include "@elements/countdown/countdown.html.twig" with {
          counter_end_timestamp: counter_end_timestamp,
          class: "DonationTeaser-countdown",
        } only %}
      {% endif %}
      {% if copy %}
        <p class="DonationTeaser-copy">{{ copy|german_quotes }}</p>
      {% endif %}
      {% if progress %}
        <div class="DonationTeaser-progressTracker">
          {{ progress|raw }}
        </div>
      {% endif %}
      {% if counter_state_endpoint %}
        {% include "@elements/progress/progress.html.twig" with {
          class: "DonationTeaser-progress",
          counter_rule_id: counter_rule_id,
          counter_state_endpoint: counter_state_endpoint,
          counter_target: counter_target,
          limited_webform: limited_webform,
          limited_webform_page: limited_webform_page,
        } only %}
      {% endif %}
    </div>
    {% if not is_on_donation_form  %}
      <form action="{{ endpoint_url }}" class="DonationTeaser-form js-DonationTeaser-form" method="get">
      {# this link is only relevant for SEO reasons. Please do not delete #}
      <a href="{{ endpoint_url }}" aria-hidden="true" class="u-hiddenVisually">Jetzt spenden</a>
    {% endif %}
    {% if alternative_teaser_body %}
      {% include "@patterns/donation-teaser/teaser-body/teaser-body.html.twig" with alternative_teaser_body|merge({
        has_flyout: payment_amount.has_flyout,
        has_flyout_open: payment_amount.has_flyout_open|default(FALSE),
      }) only %}
    {% else %}
      {% include "@patterns/form/payment/payment-amount/payment-amount.html.twig" with {
        interval: payment_amount.interval,
        amount: payment_amount.amount,
        has_flyout: payment_amount.has_flyout,
        hidden_fields: payment_amount.hidden,
        has_flyout_open: payment_amount.has_flyout_open|default(FALSE),
        is_drupal_form: TRUE,
        donation_examples: donation_examples,
        donation_notice: payment_amount.donation_notice,
        gift_page_url: payment_amount.gift_page_url,
        is_simple_version: payment_amount.is_simple_version,
        form_wrapper_id: payment_amount.form_wrapper_id,
        is_hidden: payment_amount.is_hidden
      } only %}
    {% endif %}

    {% if not is_on_donation_form  %}
      {% if not alternative_teaser_body %}
        {{ submit_button }}
      {% endif %}
      </form>
    {% endif %}
  {% if not small_donation_teaser %}
    </div>
  {% endif %}
</div>