The refinements component is a wrapper for search refinement elements. Namely refinement-list and sort-by, both in turn using the finstral-custom-disclosre component.
On desktop refinements is displayed between the searchbar (searchbox) and the result-bar. sort-by is visually hidden and instead displayed inside the result-bar.
On mobile refinements is initially hidden and becomes visible fullscreen (like a dialog) via the Refinements-openButton button inside the template.
src/components/apps/extranet/components/search/refinements// src/components/apps/extranet/components/search/refinements/refinements.twig
{{ attach_library('finstral_global/apps-extranet-refinements') }}
{% include "@elements/button/button.twig" with {
label: label,
modifiers: ["secondary"],
icon: {name: "filter"},
classes: ["Refinements-openButton"],
} only %}
<finstral-refinements class="Refinements">
<header class="Refinements-header">
{{ label }}
{% include "@elements/button/button.twig" with {
label: "global.close_button"|tc,
modifiers: ["secondary"],
icon: {name: "close"},
icon_only: true,
classes: ["Refinements-close"],
} only %}
</header>
<div class="Refinements-content">
<div>
<div class="SortBy--mobile">
{% include "@apps/extranet/components/search/sort-by/sort-by.twig" %}
</div>
<div class="Refinements-filters"></div>
</div>
{% include "@elements/button/button.twig" with {
label: "search.refinements.submit"|tc,
classes: ["Refinements-submitButton", "Refinements-close"]
} only %}
</div>
</finstral-refinements>