Progress

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/progress
additionalProperties: false
required:
  - limited_webform_page
  - limited_webform
  - counter_state_endpoint
  - counter_target
  - counter_rule_id
properties:
  limited_webform_page:
    type: number
  limited_webform:
    type: string
  counter_state_endpoint:
    type: string
    format: html
  counter_target:
    type: number
  counter_rule_id:
    type: number

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

limited_webform_page: 12
limited_webform: form_1
counter_state_endpoint: /api/limited-webform-state
counter_target: 1000
counter_rule_id: 1225

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

<div
  class="Progress js-Progress{%- if class %} {{ class }}{% endif -%}"
  data-limited-webform-page="{{ limited_webform_page }}"
  data-limited-webform="{{ limited_webform }}"
  data-counter-state-endpoint="{{ counter_state_endpoint }}"
  data-counter-rule-id="{{ counter_rule_id }}"
>
  <p class="Progress-percentage">
    <span class="Progress-percentageNumber u-typo-headline4">
      <span class="js-Progress-item--countPercentage">0</span>%
    </span>
    <span class="Progress-reachedTargetText u-typo-copy">vom Ziel erreicht</span>
  </p>
  <progress class="Progress-progressBar js-Progress-progressBar" value="0" max="100">0%</progress>
  <p class="Progress-current">
    <span class="u-typo-copy-bold js-Progress-item--countCurrent">0</span>
    <span class="u-typo-copy">Spender:innen</span>
  </p>
  <p class="Progress-target">
    <span class="Progress-targetNumber u-typo-copy-bold">
      <span class="js-Progress-item--countTarget">{{ counter_target }}</span> Spender:innen
    </span>
    <span class="Progress-targetText u-typo-copy">sind das Ziel</span>
  </p>
</div>