Donation examples

// src/components/patterns/donation-examples/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/donation-examples
additionalProperties: false
required:
  - items
properties:
  headline:
    type: string
  items:
    type: array
    items:
      $ref: /elements/donation-example

// src/components/patterns/donation-examples/mocks.yaml

headline: Das kann Ihre Spende bewirken
items:
  - $ref: /elements/donation-example#large
    image:
      id: 18
    headline: Aktivisten stärken
    copy:
      $tpl: elements/rte
      markup: >-
        Greenpeace Aktivisten kämpfen auf verschiedene Weisen für eine saubere
        Umwelt. Schon mit <strong>30 €</strong> können zwei Aktivisten im
        Einsatz einen Tag lang verpflegt werden.
    amount: 30 €
  - $ref: /elements/donation-example#large
    image:
      id: 19
    headline: Aktionsbanner erstellen
    copy:
      $tpl: elements/rte
      markup: >-
        Für das Design, die Produktion und Lieferung eines Greenpeace-Banners
        werden <strong>120 €</strong> benötigt. Damit Greenpeace vor Ort eine
        klare Botschaft kommunizieren kann.
    amount: 120 €
  - $ref: /elements/donation-example#large
    image:
      id: 20
    headline: Sicherungsseil für Aktivisten
    copy:
      $tpl: elements/rte
      markup: >-
        Um ihren Protest sichtbar zu machen, ist eine Greenpeace Aktivistin nach
        oben umgezogen. Ihre Sicherheit liegt auch in unserer Verantwortung: 100
        Meter Sicherungsseil kosten <strong>190 €</strong>.
    amount: 190 €

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

<div class="DonationExamples u-container{% if class %} {{ class }}{% endif %}">
  {% if headline %}
    <h2 class="DonationExamples-headline">{{ headline }}</h2>
  {% endif %}
  <div class="DonationExamples-itemsHolder u-grid">
    {% for item in items %}
      {% set item = item|merge({class: "DonationExamples-item"}) %}
      {% include "@elements/donation-example/donation-example.html.twig" with item only %}
    {% endfor %}
  </div>
</div>