Tabs List

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tabs/tabs-list
additionalProperties: false
type: object
required:
  - tabs
properties:
  is_interactive:
    type: boolean
  tabs:
    type: array
    items:
      type: object
      additionalProperties: false
      properties:
        title:
          type: string
        id:
          type: string
        url:
          type: string
          format: uri-reference
        is_selected:
          type: boolean

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

tabs:
  - title: Transparenz
    url: url
    is_selected: true
  - url: url
    title: Kampagnen
  - url: url
    title: Erfolge
$variants:
  - $name: Interactive
    is_interactive: true

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

<ol class="TabsList"{% if is_interactive %} role="tablist"{% endif %}>
  {% for tab in tabs %}
    {% if is_interactive %}
      <li class="TabsList-item" role="presentation">
        <button
          type="button"
          class="TabsList-tab"
          role="tab"
          aria-controls="{{ tab.id }}"
          aria-selected="{% if tab.is_selected %}true{% else %}false{% endif %}"
          {% if not tab.is_selected %}tabindex="-1"{% endif %}
        >
          {{ tab.title }}
        </button>
      </li>
    {% else %}
      <li>
        <a
          class="TabsList-tab"
          href="{{ tab.url }}"
          aria-current="{% if tab.is_selected %}page{% else %}false{% endif %}"
        >
          {{ tab.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ol>