Authors list

// src/components/patterns/authors-list/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/authors-list
additionalProperties: false
required:
  - themes
properties:
  headline:
    type: string
  themes:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - headline
        - authors
      properties:
        headline:
          type: string
        authors:
          type: array
          items:
            type: object
            additionalProperties: false
            required:
              - image
              - name
              - url
              - position
            properties:
              image:
                type: string
                format: html
              name:
                type: string
              url:
                type: string
                format: uri-reference
              position:
                type: string

// src/components/patterns/authors-list/mocks.yaml

headline: Mitwirkende Expert:innen
themes:
  - headline: Für Ökologische Landwirtschaft
    authors:
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Kristina Oberhäuser von Herrendorf
        url: /
        position: Leitende Redakteurin in Agrarwissenschaften
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Albert Flores
        url: /
        position: Leitende Redakteurin
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Robert Fox
        url: /
        position: Leitende Redakteurin
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Robert Fox
        url: /
        position: Leitende Redakteurin
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Robert Fox
        url: /
        position: Leitende Redakteurin
  - headline: Für Wälder der Erde
    authors:
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Kristina Oberhäuser von Herrendorf
        url: /
        position: Leitende Redakteurin in Agrarwissenschaften
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Albert Flores
        url: /
        position: Leitende Redakteurin
      - image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/256
          alt: Bild von Erika Musterfrau
          width: 128
          height: 128
        name: Robert Fox
        url: /
        position: Leitende Redakteurin

// src/components/patterns/authors-list/authors-list.html.twig

<div class="AuthorsList u-container">
  {% if headline %}
    <h2 class="AuthorsList-headline u-typo-headline3">{{ headline }}</h2>
    {% for theme in themes %}
      <div class="AuthorsList-theme">
        {% if theme.headline %}
          <h3 class="AuthorsList-themeHeadline u-typo-headline5">{{ theme.headline }}</h3>
        {% endif %}
        <ul class="AuthorsList-themeList">
          {% if theme.authors %}
            {% for author in theme.authors %}
              <li class="AuthorsList-authorItem">
                <div class="AuthorsList-image">{{ author.image|raw }}</div>
                <p class="AuthorsList-authorPosition u-typo-copy-small">{{ author.position }}</p>
                <h4 class="AuthorsList-authorName u-typo-copy">
                  <a href="{{ author.url }}" class="AuthorsList-authorLink u-brandLink">{{ author.name }}</a>
                </h4>
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
    {% endfor %}
  {% endif %}
</div>