Donation Example

// src/components/elements/donation-example/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/donation-example
additionalProperties: false
properties:
  headline:
    type: string
  copy:
    type: string
  image:
    type: string
    format: html
  amount:
    type: string
  small:
    type: boolean
  data_attributes:
    type: array
    items:
      type: object
      properties:
        key:
          type: string
        value:
          type: string
  is_template:
    type: boolean

// src/components/elements/donation-example/mocks.yaml

$hidden: true
data_attributes:
  - key: test
    value: '123'
$variants:
  - $name: large
    headline: Das Netz der Windkraftgegner
    amount: 30€
    image:
      $ref: elements/image#teaser
      $tpl: elements/image
    copy:
      $tpl: elements/rte
      markup: >-
        Der Ausbau der Windkraft stockt. Nicht nur wegen unglücklicher
        Windparkanwohner – oft bremsen auch als Bürgerinitiative getarnte
        Industrievertreter, so eine  Greenpeace Recherche.
  - $name: small
    small: true
    image:
      $tpl: elements/image
      width: 104
      height: 104
      src: https://via.placeholder.com/104x104
      alt: Alternative text
      is_eager: true
    copy:
      $tpl: elements/rte
      markup: >-
        Das Durchführen einer Forschungsreihe - frei von industrieller
        Einflussnahme - hat seinen Preis. <strong>Schon 60 €</strong>
        unterstützen die Durchführung von unabhängigen wissenschaftlichen
        Studien in der Arktis.
  - $name: small without image
    small: true
    copy:
      $tpl: elements/rte
      markup: >-
        Das Durchführen einer Forschungsreihe - frei von industrieller
        Einflussnahme - hat seinen Preis. <strong>Schon 60 €</strong>
        unterstützen die Durchführung von unabhängigen wissenschaftlichen
        Studien in der Arktis.

// src/components/elements/donation-example/donation-example.html.twig

{% if is_template %}
  <template class="js-DonationExampleTemplate"
    {%- for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor -%}
  >
{% endif %}
  <article class="DonationExample js-DonationExample
    {%- if class %} {{ class }}{% endif -%}
    {%- if small %} DonationExample--small{% endif -%}" 
    {%- for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor -%}
  >
    {% if image %}
      <div class="DonationExample-image">
        {{ image|raw }}
      </div>
    {% endif %}
    <div class="DonationExample-text">
      {% if amount %}
        <span class="DonationExample-amount u-typo-headline4-desktop-headline3-mobile">{{ amount }}</span>
      {% endif %}
      {% if headline %}
        <h3 class="DonationExample-headline u-typo-headline4-desktop-headline3-mobile">
          <span class="u-paddedText">{{ headline }}</span>
        </h3>
      {% endif %}
      {% if copy %}
        <div class="DonationExample-copy{%- if small %} u-typo-copy-desktop-copy-small-mobile{% endif %}">{{ copy|raw }}</div>
      {% endif %}
    </div>
  </article>
{% if is_template %}
  </template>
{% endif %}