Search results

// src/components/patterns/search-results/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/search-results
additionalProperties: false
required:
  - items
properties:
  items:
    type: array
    items:
      $ref: /elements/search-result
  endpoint_url:
    type: string
    format: uri-reference
  grid:
    type: boolean
  headline:
    type: string

// src/components/patterns/search-results/mocks.yaml

$variants:
  - $name: default
    items:
      - $ref: /elements/search-result#default
        updated_date: null
        position_index: 1
        context_size: 30
      - $ref: /elements/search-result#default
        position_index: 2
        context_size: 30
      - $ref: /elements/search-result#default
        updated_date: null
        position_index: 3
        context_size: 30
      - $ref: /elements/search-result#default
        position_index: 4
        context_size: 30
    endpoint_url: null
  - $name: Portrait results
    grid: true
    items:
      - $ref: /elements/search-result#portrait
        updated_date: null
        position_index: 1
        context_size: 30
      - $ref: /elements/search-result#portrait
        position_index: 2
        context_size: 30
      - $ref: /elements/search-result#portrait
        updated_date: null
        position_index: 3
        context_size: 30
      - $ref: /elements/search-result#portrait
        position_index: 4
        context_size: 30
    endpoint_url: null

// src/components/patterns/search-results/search-results.html.twig

<div class="SearchResults js-SearchResults u-container{% if class %} {{ class }}{% endif %}"{% if endpoint_url %} data-endpoint-url="{{ endpoint_url }}"{% endif %}>
  {% if headline %}
    <h2 class="SearchResults-headline u-typo-headline2">{{ headline }}</h2>
  {% endif %}
  <div class="SearchResults-items{% if grid %} SearchResults-items--grid{% endif %} js-SearchResults-items" role="feed">
    {% for item in items %}
      {% include "@elements/search-result/search-result.html.twig" with item only %}
    {% endfor %}
  </div>
  {% include "@elements/loading-animation/loading-animation.html.twig" with {
    text: "Weitere Suchergebnisse werden geladen. <br>Bitte haben Sie einen Moment Geduld.",
    class: "SearchResults-loading js-SearchResults-loading is-hidden"
  } only %}
</div>