Overlay Teaser Content

// src/components/template-components/overlay-teaser/overlay-teaser-content/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/overlay-teaser/overlay-teaser-content
additionalProperties: false
required:
  - image
  - headline
  - buttons
properties:
  is_open:
    type: boolean
  image:
    type: string
    format: html
  headline:
    type: object
    properties:
      opened:
        type: string
      closed:
        type: string
  copy:
    type: string
  buttons:
    $ref: /patterns/buttons
  one_click:
    type: boolean

// src/components/template-components/overlay-teaser/overlay-teaser-content/mocks.yaml

$hidden: true
image:
  $ref: elements/image
  $tpl: elements/image
  width: 193
  height: 128
  src: https://via.placeholder.com/193x128
headline:
  closed: TV-Spot gesehen?
  opened: TV-Spot gesehen?
copy: >-
  Werden Sie jetzt Fördermitglied! Schon kleine Beiträge im Monat können helfen,
  unseren Planeten zu schützen.
buttons:
  - type: button
    mutation: donation
    label: Jetzt Spenden
    url: url
  - type: link
    label: Nein, mehr erfahren
    url: url
    class: is-light
$variants:
  - $name: Closed
    is_open: false
  - $name: Opened
    is_open: true
  - $name: One click
    is_open: false
    one_click: true

// src/components/template-components/overlay-teaser/overlay-teaser-content/overlay-teaser-content.html.twig

{#
 ATTENTION:
 Drupal never renders this template directly on the page because of caching reasons.
 Therefore it gets getting prerendered on the Backend and served by an API endpoint.
 The Frontend is going to consume the rendered markup via XHR.
#}

<div class="OverlayTeaser-content js-OverlayTeaser-content{% if one_click %} OverlayTeaser-content--oneClick{% endif %}">
  <div class="OverlayTeaser-closed js-OverlayTeaser-closed{% if is_open %} is-hidden{% endif %}">
    {% if one_click %}
      <button class="OverlayTeaser-closeButton OverlayTeaser-closeButton--textLess js-OverlayTeaser-closeButton" type="button">
        <span class="u-hiddenVisually">Schließen </span>
        {% include "@elements/icon/icon.html.twig" with {name: "cross", class: "OverlayTeaser-icon"} only %}
      </button>
    {% endif %}
    <div class="OverlayTeaser-image">{{ image }}</div>
    <div class="OverlayTeaser-text">
      <h2 class="OverlayTeaser-headline u-typo-headline3">{{ headline.closed }}</h2>
      {% if one_click %}
        <a href="{{ buttons|first.url }}" class="OverlayTeaser-openButton Tracking--overlayTeaserOpenButton">
          <span class="u-hiddenVisually">Weitere Informationen über "{{ headline.closed }}" anzeigen</span>
          {% include "@elements/icon/icon.html.twig" with {name: "double-arrow-right"} only %}
        </a>
      {% else %}
        <button class="OverlayTeaser-openButton js-OverlayTeaser-openButton Tracking--overlayTeaserOpenButton" aria-expanded="false" aria-controls="OverlayTeaser-opened" type="button">
          <span class="u-hiddenVisually">Weitere Informationen anzeigen</span>{% include "@elements/icon/icon.html.twig" with {name: "double-arrow-down"} only %}
        </button>
      {% endif %}
    </div>
  </div>
  {% if not one_click %}
    <div id="OverlayTeaser-opened" class="OverlayTeaser-opened js-OverlayTeaser-opened{% if not is_open %} is-hidden{% endif %}">
      <div class="OverlayTeaser-openedContent">
        <button class="OverlayTeaser-closeButton js-OverlayTeaser-closeButton u-typo-copy-bold is-light" type="button">
          Schließen {% include "@elements/icon/icon.html.twig" with {name: "cross", class: "OverlayTeaser-icon"} only %}
        </button>
        <div class="OverlayTeaser-image">{{ image }}</div>
        <div class="OverlayTeaser-text">
          {% if headline.opened %}
            <h3 class="OverlayTeaser-headline u-typo-headline4">{{ headline.opened }}</h3>
          {% endif %}
          {% if copy %}
            <p class="OverlayTeaser-copy">{{ copy }}</p>
          {% endif %}
          {% if buttons %}
            {% include "@patterns/buttons/buttons.html.twig" with {buttons: buttons, class: "OverlayTeaser-buttons Tracking--overlayTeaserButtons", embedded: true} only %}
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
</div>