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: This is the title of a tab
    url: url
    is_selected: true
  - url: url
    title: Another tab title
  - url: url
    title: The last tab title
$variants:
  - $name: Interactive
    is_interactive: true

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

<ol class="TabsList"{% if is_interactive %} role="tablist"{% endif %}>
	{% for tab in tabs %}
		{% if is_interactive %}
			<li 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>