List

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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/list
additionalProperties: false
required:
  - items
  - type
properties:
  headline:
    type: string
  type:
    type: string
    enum:
      - unordered
      - ordered
      - checked
      - unchecked
      - failed
  items:
    type: array
    items:
      type: object
      required:
        - markup
      properties:
        type:
          type: string
          enum:
            - checked
            - unchecked
            - failed
        markup:
          type: string

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

$hidden: true
$variants:
  - $name: unordered
    type: unordered
    headline: unordered
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>
  - $name: ordered
    type: ordered
    headline: ordered
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>
  - $name: checked
    type: checked
    headline: checked
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>
  - $name: unchecked
    type: unchecked
    headline: unchecked
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>
  - $name: failed
    type: failed
    headline: failed
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>
  - $name: checked with overwrites
    type: checked
    headline: checked with overwrites
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
        type: unchecked
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
        type: failed
  - $name: unchecked with overwrites
    type: unchecked
    headline: unchecked with overwrites
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
        type: checked
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
        type: failed
  - $name: failed with overwrites
    type: failed
    headline: failed with overwrites
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
        type: checked
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
        type: unchecked
  - $name: without headline
    type: unordered
    items:
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text <a href="#">mit Link</a>
      - markup: Dies ist ein Text ohne Verlinkung
      - markup: >-
          <p>Das ist ein etwas längerer Text ohne Verlinkung. Die Ausrichtung
          bei mehr als einer Zeile sieht so aus.</p>

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

{% set tag = type != "ordered" ? "ul" : "ol" %}

<div class="List u-container u-grid Rte">
  <div class="List-content">
    {% if headline %}
      <h2>{{ headline }}</h2>
    {% endif %}
    <{{ tag }} class="List-list List-list--{{ type }}">
      {% for item in items %}
        <li class="List-item {% if item.type %} List-item--{{ item.type }}{% endif %}">{{ item.markup }}</li>
      {% endfor %}
    </{{ tag }}>
  </div>
</div>