Progress tracker

// src/components/elements/progress-tracker/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/progress-tracker
additionalProperties: false
required:
  - progress
  - current_index
  - max_pages
properties:
  progress:
    type: array
    items:
      type: object
      properties:
        index:
          type: integer
        page:
          type: object
          properties:
            name:
              type: string
            type:
              type: string
            title:
              type: string
          required:
            - name
            - type
            - title
    required:
      - index
      - page
    minItems: 1
  current_index:
    type: integer
  max_pages:
    type: integer
    minimum: 1
    maximum: 10
  display:
    type: string
    enum:
      - grid
      - content

// src/components/elements/progress-tracker/mocks.yaml

progress:
  - name: Start
    type: start
    title: Start
  - name: Details
    type: details
    title: Enter Details
  - name: Confirm
    type: confirm
    title: Confirmation
  - name: Complete
    type: complete
    title: Completion
  - name: Complete
    type: complete
    title: Completion
current_index: 1
max_pages: 5
$variants:
  - $name: on donation teaser
    display: grid
  - $name: on review data page
    display: content

// src/components/elements/progress-tracker/progress-tracker.html.twig

{% set show_grid = display == "grid" or display == "content" %}

<div class="ProgressTracker{{ display == "content" ? " ProgressTracker--contentSize" : "" }}" style="--ProgressTracker-items: {{ progress|length }}">
  <p class="ProgressTracker-headline u-typo-copy-bold">{{ current_index + 1 }}. {{ progress[current_index].title }}</p>
  {% if show_grid %}<div class="u-grid">{% endif %}
    <ul class="ProgressTracker-list u-typo-copy-small webform-progress-tracker" data-webform-progress-steps>
      {% for index, page in progress %}
        {% set is_completed = index < current_index %}
        {% set is_active = index == current_index %}
        {% set classes = 'ProgressTracker-step' ~ (is_completed ? ' ProgressTracker-step--complete' : '') ~ (is_active ? ' ProgressTracker-step--active' : '') %}
        <li class="{{ classes }}" data-webform-{{ page.type }}="{{ page.name }}" title="{{ page.title }}"
            {% if is_active %}aria-current="step"{% endif %}>
          <div class="ProgressTracker-marker progress-marker" data-webform-progress-step data-webform-progress-link data-text="{{ index + 1 }}"></div>
          <div class="ProgressTracker-text">
            <div class="ProgressTracker-title progress-title" data-webform-progress-link>
              <span class="u-hiddenVisually" data-webform-progress-state>{% if is_active or is_completed %}{{ is_active ? "Aktuell" : "Fertiggestellt" }}{% endif %}</span>
              {{ page.title }}
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% if show_grid %}</div>{% endif %}
</div>