Expendable block

// src/components/patterns/expendable-block/schema.yaml

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

// src/components/patterns/expendable-block/mocks.yaml

button_label: Alle Artikel zu diesem Thema
headline: Alles zum Thema
url: url
items:
  - $ref: /elements/search-result#default-without-image
    updated_date: null
    position_index: 1
    context_size: 30
  - $ref: /elements/search-result#default-without-image
    position_index: 2
    context_size: 30
  - $ref: /elements/search-result#default-without-image
    updated_date: null
    position_index: 3
    context_size: 30
  - $ref: /elements/search-result#default-without-image
    position_index: 4
    context_size: 30
endpoint_url: endpoint_url

// src/components/patterns/expendable-block/expendable-block.html.twig

<div class="ExpendableBlock js-ExpendableBlock u-container">
  {% include "@elements/button/button.html.twig" with {
    class: "ExpendableBlock-button js-ExpendableBlock-button",
    label: button_label,
    mutation: "secondary",
    url: url,
  } only %}
  <div class="ExpendableBlock-content js-ExpendableBlock-content" aria-expanded="false">
    <h4 class="u-typo-headline3 ExpendableBlock-headline">{{ headline }}</h4>
    {% include "@patterns/search-results/search-results.html.twig" with {
      endpoint_url: endpoint_url,
      items: items,
    } only %}
  </div>
</div>