Sorting

// src/components/patterns/search/sorting/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/search/sorting
additionalProperties: false
required:
  - current_sorting
  - name
  - items
properties:
  current_sorting:
    type: string
  name:
    type: string
  items:
    type: array
    required:
      - value
    properties:
      value:
        type: string
        enum:
          - DESC
          - ASC
      active:
        type: boolean
  queries_amount:
    type: string

// src/components/patterns/search/sorting/mocks.yaml

$hidden: true
name: sort
$variants:
  - $name: Descending (absteigend)
    current_sorting: absteigend
    items:
      - value: DESC
        active: true
        accessible_text: In absteigender Reihenfolge sortieren
      - value: ASC
        accessible_text: In aufsteigender Reihenfolge sortieren
  - $name: Ascending (aufsteigend)
    current_sorting: aufsteigend
    items:
      - value: DESC
        accessible_text: In absteigender Reihenfolge sortieren
      - value: ASC
        active: true
        accessible_text: In aufsteigender Reihenfolge sortieren
  - $name: With search results
    current_sorting: absteigend
    queries_amount: 32 Suchergebnisse
    items:
      - value: DESC
        active: true
        accessible_text: In absteigender Reihenfolge sortieren
      - value: ASC
        accessible_text: In aufsteigender Reihenfolge sortieren

// src/components/patterns/search/sorting/sorting.html.twig

<div class="Sorting{% if class %} {{ class }}{% endif %}">
  {% if queries_amount %}
    <p class="Sorting-searchResultAmount u-typo-headline6">{{ queries_amount }}</p>
  {% endif %}
  <span class="Sorting-currentSort">{{ current_sorting }}</span>
  {% for item in items %}
    {% if item.value %}
      <button type="submit" name="{{ name }}" value="{{ item.value }}" class="Sorting-button{% if item.active %} is-active{% endif %}" aria-label="{{ item.accessible_text }}"{% if item.active %} aria-current="true"{% endif %}>
        {% include "@elements/icon/icon.html.twig" with {
          name: "chevron",
          class: "Sorting-icon Sorting-icon" ~ item.value
        } only %}
      </button>
    {% endif %}
  {% endfor %}
</div>