Progress bar

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/progress-bar
additionalProperties: false
properties:
  minimal:
    type: boolean
    default: false
    description: >-
      Short variant of the progress bar. Shows only the progress bar and the
      absolute value.

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

$variants:
  - $name: default
  - $name: minimal
    minimal: true

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

<div class="ProgressBar {{ class ? class : "" }}{{ minimal ? " ProgressBar--minimal" : "" }}">
  <div class="ProgressBar-numbers">
    {%  if not minimal %}
      <div class="ProgressBar-countRelative u-typo-headline3">
        <span class="js-ProgressBar-countRelative">0</span>%
        <div class="u-typo-copy">vom Ziel erreicht</div>
      </div>
      <div class="ProgressBar-countAbsolute">
        <div class="u-typo-headline3 js-ProgressBar-countAbsolute">0</div>
        <div class="u-typo-copy">haben mitgemacht</div>
      </div>
    {% else %}
      <div class="ProgressBar-countAbsolute">
        <div class="u-typo-copy-bold js-ProgressBar-countAbsolute">0</div>
        <div class="u-typo-copy-small-bold">haben unterzeichnet</div>
      </div>
    {% endif %}
  </div>
  <progress class="ProgressBar-progress js-ProgressBar-progress" value="0" max="100">0%</progress>
</div>