Greenwire Teaser

// src/components/patterns/greenwire-teaser/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/greenwire-teaser
additionalProperties: false
required:
  - headline
  - content_headline
  - image
properties:
  headline:
    type: string
  content_headline:
    type: string
  details:
    type: object
    properties:
      group_form:
        type: string
      topic:
        type: string
  copy:
    type: string
  button:
    $ref: /elements/button
  additionalInfo:
    type: object
    properties:
      label:
        type: string
      date:
        type: string
      place:
        type: string
      time:
        type: string
      copy:
        type: string
  image:
    $ref: /elements/image
  donation_examples:
    type: object
    properties:
      id:
        type: string
      items:
        type: array
        items:
          type: string
          format: html
  submit_button:
    $ref: /fsk/form/form-element

// src/components/patterns/greenwire-teaser/mocks.yaml

$hidden: true
$variants:
  - $name: default
    headline: Jetzt mitmachen
    content_headline: Was ein Müll!
    details:
      group_form: Projekt/Kampagne
      topic: Plastik
    copy: >-
      Wer will kann sich mir gern anschließen, über Ideen wo man noch am besten
      Müll sammeln kann freue ich mich jederzeit!
    button:
      $ref: /elements/button#default-link
      label: Jetzt auf Greenwire beitreten
      icon: external-link
      target: _blank
      attributes: rel="noopener"
    additionalInfo:
      label: Themengruppe auf
      logo: true
    image:
      $ref: elements/image
      $tpl: elements/image
      width: 720
      height: 720
      src: https://via.placeholder.com/720x720
  - $name: full
    headline: Jetzt mitmachen
    content_headline: Veganer Stammtisch
    details:
      topic: Ernährung
    copy: >-
      Es soll eine ganz lockere Runde werden (keine Ernährungsberatung!), die
      vielleicht Hilfestellung geben und Mut machen kann etwas zu ändern. Die
      sich vielleicht gegenseitig unterstützt und Tipps austauscht. Es sind alle
      Menschen willkommen, die sich für die vegane Ernährungsweise
      interessieren. Dabei ist es egal, ob du dich bereits vegan ernährst, oder
      (erstmal) nur "veganer" essen möchtest.
    button:
      $ref: /elements/button#default-link
      label: Jetzt auf Greenwire anmelden
      icon: external-link
      target: _blank
      attributes: rel="noopener"
    additionalInfo:
      label: Veranstaltung auf
      date: 17.03.2021
      place: Online/Skype
      time: 19:00 - 20:30
      copy: >-
        Verantstaltung von Mareike Drosselmeier | Öffentlichkeitskoordination,
        u.a. • Greenpeace Bielefeld
    image:
      $tpl: elements/image
      width: 720
      height: 720
      src: https://via.placeholder.com/720x720
      alt: Alternative text
      id: 14
      sources:
        - width: 240
          height: 240
          srcset: https://via.placeholder.com/240x240
          media: '(max-width: 35.5625rem)'
        - width: 240
          height: 240
          srcset: https://via.placeholder.com/240x240
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 732
          height: 732
          srcset: https://via.placeholder.com/732x732
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 720
          height: 720
          srcset: https://via.placeholder.com/720x720
          media: '(min-width: 80rem)'

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

<article class="GreenwireTeaser">
  {%- if headline %}
    <h2 class="GreenwireTeaser-headline u-container u-typo-headline3">
      <span class="GreenwireTeaser-headlineBackground">{{ headline }}</span>
    </h2>
  {% endif -%}
  <div class="GreenwireTeaser-content">
    <div class="u-container u-grid">
      <div class="GreenwireTeaser-mainInfo">
        <div class="GreenwireTeaser-mobileContainer">
          <div class="GreenwireTeaser-mobileHolder">
            {% if content_headline %}
              <h3 class="GreenwireTeaser-contentHeadline u-typo-headline4">{{ content_headline }}</h3>
            {% endif %}
            {% if details %}
              <div class="GreenwireTeaser-details">
                {% if details.group_form %}
                  <span class="u-typo-label-small">Gruppenform: {{ details.group_form }}</span>
                {% endif %}
                {% if details.topic %}
                  <span class="GreenwireTeaser-topic {{ details.group_form ? "u-typo-copy-small" : "u-typo-label-small GreenwireTeaser-topic--withoutGroupForm" }}">Thema: {{ details.topic }}</span>
                {% endif %}
              </div>
            {% endif %}
          </div>
          <div class="GreenwireTeaser-image GreenwireTeaser-image--mobile">
            <span class="GreenwireTeaser-decoration"></span>
            <span class="GreenwireTeaser-decoration"></span>
            {{ image|raw }}
          </div>
        </div>
        {% if copy %}
          <p class="GreenwireTeaser-copy">{{ copy }}</p>
        {% endif %}
        {% if button %}
          {% include "@elements/button/button.html.twig" with button|merge({
            class: "GreenwireTeaser-button",
            target: "_blank",
            icon: "external-link",
          }) only %}
        {% endif %}
      </div>
      <div class="GreenwireTeaser-additionalInfo{% if additionalInfo|length < 3  %} GreenwireTeaser-additionalInfo--middleAligment{% endif %}">
        {% if additionalInfo.label %}
          <h4 class="GreenwireTeaser-additionalInfolabel u-typo-label-small">{{ additionalInfo.label }}</h4>
          <img class="GreenwireTeaser-logo" src="{{ asset_path().toString() ~ "images/greenwire.png" }}" alt="Greenpeace Greenwire logo" width="300" height="63">
          {% if additionalInfo.date or additionalInfo.place or additionalInfo.time %}
            <dl class="GreenwireTeaser-moreDetails">
              {% if additionalInfo.date %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Datum:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.date }}</dd>
              {% endif %}
              {% if additionalInfo.place %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Ort:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.place }}</dd>
              {% endif %}
              {% if additionalInfo.time %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Zeit:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.time }}</dd>
              {% endif %}
            </dl>
          {% endif %}
          {% if additionalInfo.copy %}
            <p class="GreenwireTeaser-additionalInfoCopy u-typo-copy-small">{{ additionalInfo.copy }}</p>
          {% endif %}
        {% endif %}
      </div>
      <div class="GreenwireTeaser-imageContainer GreenwireTeaser-image--desktop">
        <div class="GreenwireTeaser-image">
          <span class="GreenwireTeaser-decoration"></span>
          <span class="GreenwireTeaser-decoration"></span>
          {{ image|raw }}
        </div>
      </div>
    </div>
  </div>
</article>