Teaser

// src/components/elements/teaser/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/teaser
additionalProperties: false
required:
  - url
  - headline
  - image
  - label
properties:
  url:
    type: string
    format: uri-reference
  headline:
    type: string
  copy:
    type: string
  format:
    type: object
    properties:
      label:
        type: string
      url:
        type: string
        format: uri-reference
  image:
    type: string
    format: html
  image_copyright:
    type: string
  date:
    type: string
  label:
    type: string
  teaser_type:
    type: string
    enum:
      - small
      - medium
      - landscape
  teaser_variant:
    type: string
    enum:
      - engagement
      - petition
  tenant:
    type: string
  teaser_tenant:
    type: string
  id:
    type: string
    description: The id of the petition, needed for the petition teaser type.
  datetime:
    type: string
    description: >-
      the date in a machine readable format, needed for the datetime attribute
      on the time element

// src/components/elements/teaser/mocks.yaml

url: '#url'
headline: Das Netz der Windkraftgegner
copy: >-
  Der Ausbau der Windkraft stockt. Nicht nur wegen unglücklicher
  Windparkanwohner – oft bremsen auch als Bürgerinitiative getarnte
  Industrievertreter, so eine  Greenpeace Recherche.
format:
  url: url
  label: format
image:
  $ref: elements/image#teaser
  $tpl: elements/image
image_copyright: © Jonas Wresch / Greenpeace
date: Datum
datetime: YYYY-MM-DD
label: mehr erfahren
$variants:
  - $name: Landscape
    teaser_type: landscape
    label: Mehr zum Thema lesen
    image:
      $ref: elements/image#teaser-medium
      $tpl: elements/image
  - $name: Landscape visual kids
    teaser_type: landscape
    teaser_tenant: kids
    label: Mehr zum Thema lesen
    image:
      $ref: elements/image#teaser-medium
      $tpl: elements/image
  - $name: Small
    teaser_type: small
  - $name: Kids
    teaser_type: small
    tenant: kids
    format: null
    date: null
  - $name: Visual kids
    teaser_type: small
    teaser_tenant: kids
    format: null
    date: null
  - $name: Engagement
    teaser_variant: engagement
    format: null
    date: null
    label: Petition unterzeichnen
  - $name: Engagement landscape
    teaser_variant: engagement
    teaser_type: landscape
    format: null
    date: null
    label: Petition unterzeichnen
  - $name: Petition
    teaser_variant: petition
    format: null
    date: null
    label: Petition unterzeichnen
    id: '29970'
  - $name: Petition landscape
    teaser_variant: petition
    teaser_type: landscape
    format: null
    date: null
    label: Petition unterzeichnen
    id: '29970'
  - $name: Petition without progress bar
    teaser_variant: petition

// src/components/elements/teaser/teaser.html.twig

{% if teaser_tenant == "kids" and tenant != "kids" %}
  {% set tenant = "visualKids" %}
{% endif %}

<article class="Teaser
  {%- if class %} {{ class }}{% endif -%}
  {%- if teaser_type %} Teaser--{{ teaser_type }}{% endif -%}
  {%- if teaser_variant %} Teaser--{{ teaser_variant }}{% endif -%}
  {%- if teaser_variant == "petition" %} js-Teaser--petition{% endif -%}
  {%- if tenant %} Teaser--{{ tenant }}{% endif -%}"
  {%- if teaser_variant == "petition" and id %} data-id="{{ id }}"{% endif -%}
>
  <div class="Teaser-image">
    {% if material_type %}<span class="Teaser-label u-typo-copy-bold">{{ material_type }}</span>{% endif %}
    {{ image|raw }}
    {% if image_copyright %}
      <span class="Teaser-copyright u-typo-copy-small">{{ image_copyright }}</span>
    {% endif %}
  </div>
  <div class="Teaser-text">
    <div class="Teaser-headlineContainer">
      {% if teaser_variant == "engagement" %}
        <span class="Teaser-engagementLabel u-typo-label-small">Petition</span>
      {% endif %}
      <h3 class="Teaser-headline {% if teaser_type == "small" %}u-typo-headline4-desktop-headline3-mobile{% else %}u-typo-headline3{% endif %}">
        <span class="u-paddedText">{{ headline }}</span>
      </h3>
    </div>
    <div class="Teaser-content">
      {% if tenant == "visualKids" %}
        {% include "@elements/icon/icon.html.twig" with {
          class: "Teaser-visualKidsLogo",
          name: "logo--kids",
        } only %}
      {% elseif format or date %}
        <div class="Teaser-metaInfo">
          {% if format %}
            <span class="Teaser-formatLink u-typo-label-small">{{ format.label }}</span>
          {% endif %}
          {% if date %}
            <time class="u-typo-copy-small" datetime="{{ datetime }}">{{ date }}</time>
          {% endif %}
        </div>
      {% endif %}
      {% if copy %}
        <p class="Teaser-copy">{{ copy|raw }}</p>
      {% endif %}
      {% if teaser_variant == "petition" and id %}
        {% include "@elements/progress-bar/progress-bar.html.twig" with {
          class: "js-Teaser-progressBar Teaser-progressBar",
          minimal: true,
        } only %}
      {% endif %}
      {% if not teaser_variant %}
      <a href="{{ url }}" class="Tracking--teaserLink Teaser-link u-brandLink u-typo-copy-bold">
        <span class="Teaser-linkIcons">
          <span class="Teaser-linkIcon Teaser-linkIcon--default"></span>
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Teaser-linkIcon Teaser-linkIcon--hover"
          } only %}
        </span>
        {{ label ? label : "Mehr erfahren" }} <span class="u-hiddenVisually"> über {{ headline }}</span>
      </a>
      {% else %}
        {% include "@elements/button/button.html.twig" with {
          label: label ? label : "Mehr erfahren",
          class: "Teaser-linkButton",
          icon: "edit",
          url: url,
        } only %}
      {% endif %}
    </div>
  </div>
</article>