Filters

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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/search/filters
additionalProperties: false
required:
  - selects
properties:
  selects:
    type: array
    items:
      type: string
      format: html
  kids_checkbox:
    $ref: /fsk/form/form-element
  submit_button:
    $ref: /fsk/form/form-element
  extendable:
    type: boolean

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

$hidden: true
$variants:
  - $name: default
    selects:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: 2020
              label: 2020
            - type: option
              value: 2021
              label: 2022
          attributes:
            id: date
            name: date
        label:
          title: Zeitraum einschränken
          attributes:
            for: date
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: topic
            name: topic
        label:
          title: Thema einschränken
          attributes:
            for: topic
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: select-format
              label: Format auswählen
            - type: option
              value: article
              label: Article
            - type: option
              value: post
              label: Post
          attributes:
            id: limit-format
            name: limit-format
        label:
          title: Format einschränken
          attributes:
            for: limit-format
      - $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        legend:
          title: Sortieren nach
        children:
          $tpl: '@fsk/form/radios'
          $ref: '@fsk/form/radios'
          layout: column
          children:
            $render:
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: Relevanz
                  attributes:
                    for: relevance
                children:
                  attributes:
                    name: sorting
                    id: relevance
                    value: relevance
                    class: FskRadio--native
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: Aktualität
                  attributes:
                    for: topicality
                children:
                  attributes:
                    name: sorting
                    id: topicality
                    value: topicality
                    class: FskRadio--native
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - secondary
          attributes:
            class: Filters-submitButton
            value: Jetzt filtern
    kids_checkbox:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#checkbox'
        label:
          title: Nur Kids-Inhalte anzeigen
          attributes:
            for: kids-content
        children:
          attributes:
            name: kids-content
            id: kids-content
            value: kids-content
  - $name: Education materials
    extendable: true
    selects:
      - $tpl: '@elements/multiselect'
        $ref: '@elements/multiselect'
        class: js-Search-multiselect
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: school_type
            name: school_type
        label:
          title: Schulform
          attributes:
            for: school_type
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: grade-level
            name: grade-level
        label:
          title: Klassenstufe
          attributes:
            for: grade-level
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: subject
            name: subject
        label:
          title: Fach
          attributes:
            for: subject
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: language
            name: language
        label:
          title: Sprache
          attributes:
            for: language
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        children:
          options:
            - type: option
              value: all
              label: alle
            - type: option
              value: topic1
              label: Thema 1
            - type: option
              value: topic2
              label: Thema 2
          attributes:
            id: format
            name: format
        label:
          title: Format
          attributes:
            for: format
      - $tpl: '@elements/button'
        $ref: '@elements/button'
        class: Filters-searchButton
        icon: search
        label: Suchen
        type: submit

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

<div class="Filters{% if class %} {{ class }}{% endif %}{% if extendable %} js-Filters{% endif %}">
  {% if extendable %}
    <template class="js-Filters-toggleTemplate">
      <button class="Filters-toggle js-Filters-toggle u-typo-copy-bold" aria-expanded="false" aria-controls="Filters-extendableArea" type="button">
        {% include "@elements/icon/icon.html.twig" with {
          name: "filter",
          class: "Filters-icon"
        } only %}
        <span class="Filters-toggleLabel Filters-toggleLabel--open">Filter einblenden</span>
        <span class="Filters-toggleLabel Filters-toggleLabel--close">Filter ausblenden</span>
      </button>
    </template>
    <div class="Filters-extendableArea js-Filters-extendableArea" id="Filters-extendableArea">
  {% endif %}
  <div class="u-grid Filters-row Filters-row--general">
    {% for select in selects %}
      {{ select|raw }}
    {% endfor %}
  </div>
  {% if kids_checkbox %}
    <div class="Filters-row Filters-row--kids">
      {{ kids_checkbox|raw }}
    </div>
  {% endif %}
  {% if submit_button %}
    <div class="Filters-row Filters-row--button">
      {{ submit_button|raw }}
    </div>
  {% endif %}
  {% if extendable %}
    </div>
  {% endif %}
</div>