Search result

// src/components/elements/search-result/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/search-result
additionalProperties: false
required:
  - url
  - headline
properties:
  url:
    type: string
    format: uri-reference
  headline:
    type: string
  copy:
    type: string
  image:
    type: string
    format: html
  updated_date:
    type: string
  updated_date_time:
    type: string
  tags:
    $ref: /elements/tags
  position_index:
    type: number
  context_size:
    type: number
  portrait:
    type: boolean
  type:
    type: string
  label:
    type: string
  without_image:
    type: boolean

// src/components/elements/search-result/mocks.yaml

$hidden: true
$variants:
  - $name: Default
    image:
      $ref: elements/image
      $tpl: elements/image
      width: 184
      height: 120
      src: https://via.placeholder.com/184x120
      alt: Alternative text
      sources:
        - width: 120
          height: 80
          srcset: >-
            https://via.placeholder.com/120x80 1x,
            https://via.placeholder.com/240x160 2x
          media: '(max-width: 35.5625rem)'
        - width: 120
          height: 80
          srcset: >-
            https://via.placeholder.com/120x80 1x,
            https://via.placeholder.com/240x160 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 184
          height: 120
          srcset: >-
            https://via.placeholder.com/184x120 1x,
            https://via.placeholder.com/368x240 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 184
          height: 120
          srcset: >-
            https://via.placeholder.com/184x120 1x,
            https://via.placeholder.com/368x240 2x
          media: '(min-width: 80rem)'
    headline: Hier steht die H1 der Seite
    url: url
    copy: >-
      Neun junge Menschen halten die deutschen Klimaschutzmaßnahmen für
      unzureichend und ziehen vor das Bundesverfassungsgericht. Greenpeace
      unterstützt die Verfassungsbeschwerde.
    tags:
      $ref: /elements/tags
    updated_date: 12.03.2021
    updated_date_time: '2021-03-12 00:00:01'
  - $name: default without image
    without_image: true
    headline: Hier steht die H1 der Seite
    url: url
    copy: >-
      Neun junge Menschen halten die deutschen Klimaschutzmaßnahmen für
      unzureichend und ziehen vor das Bundesverfassungsgericht. Greenpeace
      unterstützt die Verfassungsbeschwerde.
    updated_date: 12.03.2021
    updated_date_time: '2021-03-12 00:00:01'
  - $name: Portrait
    portrait: true
    image:
      $ref: elements/image
      $tpl: elements/image
      width: 360
      height: 183
      src: https://via.placeholder.com/360x183
      alt: Alternative text
      sources:
        - width: 505
          height: 337
          srcset: >-
            https://via.placeholder.com/505x337 1x,
            https://via.placeholder.com/1010x674 2x
          media: '(max-width: 35.5625rem)'
        - width: 895
          height: 597
          srcset: >-
            https://via.placeholder.com/895x597 1x,
            https://via.placeholder.com/1790x1194 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 360
          height: 183
          srcset: >-
            https://via.placeholder.com/360x183 1x,
            https://via.placeholder.com/720x366 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 360
          height: 183
          srcset: >-
            https://via.placeholder.com/360x183 1x,
            https://via.placeholder.com/720x366 2x
          media: '(min-width: 80rem)'
    headline: Mit dem KlimaKit auf Lernreise
    url: url
    copy: >-
      Eine Lernreise für die Schülerinnen und Schüler, inklusive Begegnungen mit
      inspirierenden Klimaaktivist*innen aus aller Welt. Vom Wissen, zum Planen,
      zum Handeln.
    label: Sek II
    updated_date: 12.03.2021
    updated_date_time: '2021-03-12 00:00:01'
    type: Digital/Print

// src/components/elements/search-result/search-result.html.twig

{% if position_index and context_size %}
  {% set headline_id = "headline_" ~ position_index ~ "_" ~ context_size %}
  {% set copy_id = "copy_" ~ position_index ~ "_" ~ context_size %}
  {%- set aria -%}
    aria-posinset="{{ position_index }}"
    aria-setsize="{{ context_size }}"
    aria-labelledby="{{ headline_id }}"
    aria-describedby="{{ copy_id }}"
  {%- endset -%}
{% endif %}

<article class="SearchResult{% if class %} {{ class }}{% endif %}{% if portrait %} SearchResult--portrait{% endif %}{% if without_image %} SearchResult--withoutImage{% endif %}" tabindex="0"{% if aria %} {{ aria }}{% endif %}>
  {% if not without_image %}
    <div class="SearchResult-image">
      {% if image %}
        {{ image|raw }}
      {% else %}
        <img class="SearchResult-defaultImage" src="{{ asset_path().toString() ~ "images/default-search.webp" }}" alt="Das Logo des Greenpeace-Segelschiffs 'Rainbow Warrior III'." width="184" height="120">
      {% endif %}
      {% if type %}
        <p class="SearchResult-type u-typo-copy-bold">{{ type }}</p>
      {% endif %}
    </div>
  {% endif %}
  <div class="SearchResult-text">
    <h3{% if headline_id %} id="{{ headline_id }}"{% endif %} class="SearchResult-headline u-typo-headline5">
      <a href="{{ url }}" class="SearchResult-link">{{ headline }}</a>
    </h3>
    {% if copy %}
      <p{% if copy_id %} id="{{ copy_id }}"{% endif %} class="SearchResult-copy">{{ copy }}</p>
    {% endif %}
    <div class="SearchResult-metaInformation">
      {% if tags %}
        <div class="SearchResult-tagsContainer">
          <span class="SearchResult-label">{{ label }}</span>
          <span class="SearchResult-tagsHeadline u-typo-copy-small-bold">Themen:</span>
          {% include "@elements/tags/tags.html.twig" with tags|merge({
            class: "SearchResult-tags"
          }) only %}
        </div>
      {% endif %}
      {% if label %}
        <span class="SearchResult-label u-typo-label-small">{{ label }}</span>
      {% endif %}
      {% if updated_date %}
        <p class="SearchResult-time u-typo-copy-small">
          {% if not portrait %}
            <span class="u-typo-copy-small-bold">Aktualisiert:</span>
          {% endif %}
          <time datetime="{{ updated_date_time|date("Y-m-d") }}">{{ updated_date }}</time></p>
      {% endif %}
    </div>
  </div>
</article>