Donation info

// src/components/template-components/footer/donation-info/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/footer/donation-info
additionalProperties: false
properties:
  donation_url:
    type: string
    format: uri-reference
required:
  - donation_url

// src/components/template-components/footer/donation-info/mocks.yaml

donation_url: '#url'

// src/components/template-components/footer/donation-info/donation-info.html.twig

{% set seals_list = [
  {
    "image": {
      "width": 224,
      "height": 63,
      "src": asset_path().toString() ~ "images/logo-itz.svg",
      "alt": "Initiative Transparente Zivilgesellschaft"
    },
    "lightbox": {
      "title": "Initiative Transparente Zivilgesellschaft",
      "copy": 'Als Unterzeichner der <strong class="u-typo-copy-bold">"Initiative Transparente Zivilgesellschaft"</strong> verpflichtet sich Greenpeace aktuell und transparent auf seiner Homepage zu veröffentlichen, was die Organisation tut, woher die Mittel stammen, wie sie verwendet werden und wer die Entscheidungsträger sind.'
    },
    "link": {
      "url": "/spenden/initiative-transparente-zivilgesellschaft",
      "label": "– Mehr erfahren zu Transparenz und dieser Selbstverpflichtungserklärung"
    },
    "name": "itz"
  },
  {
    "image": {
      "width": 63,
      "height": 63,
      "src": asset_path().toString() ~ "images/logo-dfv.webp",
      "alt": "Deutscher Fundraising Verband"
    },
    "lightbox": {
      "title": "Deutscher Fundraising Verband",
      "copy": 'Als Mitglied im <strong class="u-typo-copy-bold">Deutschen Fundraising Verband</strong> und Träger des Ethik-Signets verpflichtet sich Greenpeace zur Einhaltung von Transparenz und Ethik beim Einwerben von Spenden.'
    },
    "link": {
      "url": "/spenden/ethikregeln-deutscher-fundraisingverband",
      "label": "– Mehr erfahren zu Transparenz und diesem Ethik-Signet"
    },
    "name": "dfv"
  },
  {
    "image": {
      "width": 63,
      "height": 63,
      "src": asset_path().toString() ~ "images/globe.svg",
      "alt": "Unsere Verantwortung im digitalen Raum"
    },
    "link": {
      "url": "/ueber-uns/organisation/greenpeace-deutschland/verantwortung-digitalen-raum",
      "label": "Unsere Verantwortung im digitalen Raum"
    },
  }
] %}

<div class="DonationInfo{% if class %} {{ class }}{% endif %}">
  <ul class="DonationInfo-seals">
    {% for item in seals_list %}
      <li class="DonationInfo-seal{% if item.name %} DonationInfo-seal--{{ item.name }}{% endif %}">
        {% if item.lightbox %}
          {% embed "@elements/lightbox/lightbox.html.twig" with {
            id: item.name,
            image: item.image,
            title: item.lightbox.title,
            copy: item.lightbox.copy,
            link: item.link,
            clickable_overlay: true
          } only %}
            {% block opener %}
              <button class="DonationInfo-button js-Lightbox-opener" type="button">
                <img class="DonationInfo-logo" src="{{ image.src }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">
              </button>
            {% endblock %}
          {% endembed %}
        {% else %}
          <a href="{{ item.link.url }}" class="DonationInfo-button" aria-label="{{ item.link.label }}">
            <img class="DonationInfo-logo" src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">
          </a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
  {% if not tenant %}
    <p class="DonationInfo-title u-typo-headline5">Spendenkonto</p>
    <div class="DonationInfo-columns">
      <div class="DonationInfo-details">
        <dl class="DonationInfo-bankInfo">
          <dt class="DonationInfo-bankLabel u-typo-copy-small-bold">IBAN</dt>
          {# &zwj; characters are needed to prevent mobile Safari from interpreting the IBAN number as a phone number #}
          <dd class="DonationInfo-bankValue u-typo-copy-small">DE49 4306&zwj; 0967&zwj; 0000&zwj; 0334 01</dd>
          <dt class="DonationInfo-bankLabel u-typo-copy-small-bold">BIC/Swift-Code</dt>
          <dd class="DonationInfo-bankValue u-typo-copy-small">GENODEM1GLS</dd>
          <dt class="DonationInfo-bankLabel u-typo-copy-small-bold"></dt>
          <dd class="DonationInfo-bankValue u-typo-copy-small">GLS Gemeinschaftsbank eG</dd>
        </dl>
      </div>
      <p class="DonationInfo-bankNote u-typo-copy-small">Bitte geben Sie - bei Überweisungen - Ihre vollständige Anschrift an, so dass wir Ihnen eine Spendenbescheinigung zusenden können.</p>
    </div>
    <a href="{{ donation_url }}" class="DonationInfo-donationLink u-typo-copy-bold u-brandLink Tracking--donationTextLinkFooter"> – Oder spenden Sie direkt online</a>
  {% endif %}
</div>