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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tabs
additionalProperties: false
type: object
required:
  - tabs
  - content
properties:
  is_interactive:
    $ref: /patterns/tabs/tabs-list#/properties/is_interactive
  tabs:
    $ref: /patterns/tabs/tabs-list#/properties/tabs
  content:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - content
        - id
      properties:
        content:
          type: string
          format: html
          description: patterns/*
        id:
          type: string
        is_selected:
          type: boolean

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

$ref: patterns/tabs/tabs-list#interactive
content:
  - content:
      $tpl: patterns/tabs/tabs-content
      $ref: patterns/tabs/tabs-content#graph
    id: tab-1
    is_selected: true
  - content:
      $tpl: patterns/tabs/tabs-content
      $ref: patterns/tabs/tabs-content#teasers
    id: tab-2
  - content:
      $tpl: patterns/tabs/tabs-content
      $ref: patterns/tabs/tabs-content#stats
    id: tab-3

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

<div class="Tabs u-pageMainChild u-container js-Tabs" data-js="false">
  {% if heading %}
    <div class="Tabs-heading">
      {{ heading }}
    </div>
  {% endif %}
  {% include "@patterns/tabs/tabs-list/tabs-list.html.twig" with {
    is_interactive: is_interactive,
    tabs: tabs,
  } only %}
  <div class="Tabs-tabpanels">
    {% for item in content %}
      <div class="Tabs-tabpanel" role="tabpanel" tabindex="-1" id="{{ item.id }}" aria-labelledby="{{ item.id }}"{% if not item.is_selected %} hidden{% endif %}>
        {{ item.content|raw }}
      </div>
    {% endfor %}
  </div>
</div>