Testimonial

// src/components/patterns/testimonial/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/testimonial
additionalProperties: false
required:
  - items
properties:
  headline:
    type: string
  items:
    type: array
    items:
      type: object
      required:
        - name
        - quote
      properties:
        image:
          type: string
          format: html
        name:
          type: string
        quote:
          type: string
  button:
    type: object
    properties:
      label:
        type: string
      url:
        type: string
        format: uri-reference

// src/components/patterns/testimonial/mocks.yaml

$hidden: true
$variants:
  - $name: Three testimonials with button
    headline: Warum wir Greenpeace unterstützen?
    items:
      - name: Sabine
        quote: >-
          „Jede Spende hat eine direkte Wirkung. Ich sehe regelmäßig konkrete
          Erfolge, die Greenpeace erzielt – das macht meine Unterstützung
          greifbar und gibt mir das gute Gefühl, wirklich etwas zu bewegen.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Sabine
          width: 160
          height: 160
      - name: Martin
        quote: >-
          „Es motiviert mich unglaublich, Teil einer großen Gemeinschaft zu
          sein, die sich gemeinsam für den Planeten einsetzt. Zusammen schaffen
          wir Veränderungen, die keiner alleine erreichen könnte.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Martin
          width: 160
          height: 160
      - name: Inge
        quote: >-
          „Mir ist wichtig, konkrete Ergebnisse zu sehen. Greenpeace zeigt mir
          regelmäßig Erfolge wie neue Schutzgebiete – das gibt mir Gewissheit,
          dass meine Unterstützung wirkt.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Inge
          width: 160
          height: 160
    button:
      label: Jetzt unterstützen
      url: https://www.greenpeace.de/spenden
  - $name: Two testimonials without button
    headline: Stimmen unserer Förderinnen und Förderer
    items:
      - name: Klaus
        quote: >-
          „Seit über 10 Jahren unterstütze ich Greenpeace mit einer monatlichen
          Spende. Jeder Euro ist gut investiert.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Klaus
          width: 160
          height: 160
      - name: Anna
        quote: >-
          „Greenpeace ist die Organisation, der ich vertraue, wenn es um den
          Schutz unserer Meere und Wälder geht.“
  - $name: Seven testimonials with button
    headline: Warum wir Greenpeace unterstützen?
    items:
      - name: Maria
        quote: >-
          „Ich unterstütze Greenpeace, weil mir die Umwelt am Herzen liegt und
          ich aktiv etwas für unseren Planeten tun möchte. Es ist ein gutes
          Gefühl zu wissen, dass mein Beitrag zählt.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Maria
          width: 160
          height: 160
      - name: Thomas
        quote: >-
          „Greenpeace gibt mir die Möglichkeit, Teil einer Bewegung zu sein, die
          wirklich etwas verändert. Zusammen können wir die Welt ein Stück
          besser machen.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Thomas
          width: 160
          height: 160
      - name: Sabine
        quote: >-
          „Für meine Kinder und Enkel möchte ich eine lebenswerte Welt
          hinterlassen. Greenpeace kämpft genau dafür – mit Mut,
          Entschlossenheit und wissenschaftlicher Expertise.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Sabine
          width: 160
          height: 160
      - name: Klaus
        quote: >-
          „Seit über 10 Jahren unterstütze ich Greenpeace mit einer monatlichen
          Spende. Jeder Euro ist gut investiert – die Erfolge sprechen für
          sich.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Klaus
          width: 160
          height: 160
      - name: Anna
        quote: >-
          „Greenpeace ist die Organisation, der ich vertraue, wenn es um den
          Schutz unserer Meere und Wälder geht. Ihre Arbeit ist transparent und
          wirkungsvoll.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Anna
          width: 160
          height: 160
      - name: Peter
        quote: >-
          „Umweltschutz ist kein Luxus, sondern eine Notwendigkeit. Greenpeace
          setzt sich dort ein, wo es am dringendsten gebraucht wird.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Peter
          width: 160
          height: 160
      - name: Monika
        quote: >-
          „Jeden Tag lese ich über den Klimawandel und seine Folgen. Mit meiner
          Spende an Greenpeace kann ich einen konkreten Beitrag zum Klimaschutz
          leisten.“
        image:
          $tpl: elements/image
          src: https://placehold.co/160x160
          alt: Monika
          width: 160
          height: 160
    button:
      label: Jetzt Fördermitglied werden
      url: https://www.greenpeace.de/spenden

// src/components/patterns/testimonial/testimonial.html.twig

{% set id = "EndOfTestimonials-" ~ random() %}
{% set colors = ['green', 'orange', 'blue'] %}

<section class="Testimonial js-Testimonial">
  {% if headline %}
    <h2 class="Testimonial-headline u-typo-headline2 u-container">{{ headline }}</h2>
  {% endif %}
  <div class="Testimonial-content js-Testimonial-content">
    <div class="Testimonial-track js-Testimonial-track">
      <ul class="Testimonial-list js-Testimonial-list">
        {% for item in items %}
          {% set color = colors[loop.index0 % 3] %}
          <li class="Testimonial-slide js-Testimonial-slide Testimonial-slide--{{ color }}">
            <blockquote class="Testimonial-card">
              <div class="Testimonial-cardHead">
                {% if item.image %}
                  <div class="Testimonial-image">
                    {{ item.image|raw }}
                  </div>
                {% endif %}
                <span class="Testimonial-quoteIcon" aria-hidden="true">
                  {% include "@elements/icon/icon.html.twig" with {name: "apostrophe_" ~ color} only %}
                </span>
              </div>
              <footer class="Testimonial-author">
                <cite class="Testimonial-name u-typo-headline5">{{ item.name }}</cite>
              </footer>
              <p class="Testimonial-quote u-typo-copy">{{ item.quote }}</p>
              <div class="Testimonial-line"></div>
            </blockquote>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="Testimonial-arrows js-Testimonial-arrows" aria-hidden="true">
      <button tabindex="-1" class="Testimonial-arrow js-Testimonial-arrow Testimonial-arrow--prev js-Testimonial-arrow--prev" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow-left"} only %}
      </button>
      <button tabindex="-1" class="Testimonial-arrow js-Testimonial-arrow Testimonial-arrow--next js-Testimonial-arrow--next" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow"} only %}
      </button>
    </div>
  </div>
  {% if button and button.url and button.label %}
    <div class="Testimonial-button u-container">
      {% include "@elements/button/button.html.twig" with {
        label: button.label,
        url: button.url
      } only %}
    </div>
  {% endif %}
  <div id="{{ id }}" class="u-hiddenVisually">Ende der Testimonials</div>
</section>