src/components/patterns/search
// src/components/patterns/search/schema.yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/search
additionalProperties: false
required:
- filters
properties:
class:
type: string
query:
$ref: /patterns/search/query
sorting:
$ref: /patterns/search/sorting
results_amount:
$ref: /patterns/search/results-amount
filters:
$ref: /patterns/search/filters
is_drupal_form:
type: boolean
display_filters:
type: boolean
// src/components/patterns/search/mocks.yaml
$hidden: true
is_drupal_form: false
display_filters: true
$variants:
- $name: default
query:
$ref: /patterns/search/query
results_amount:
$ref: /patterns/search/results-amount
filters:
$ref: /patterns/search/filters#default
sorting:
$ref: /patterns/search/sorting#descending-(absteigend)
- $name: Educational materials
class: js-Search-educationMaterials
filters:
$ref: /patterns/search/filters#education-materials
sorting:
$ref: /patterns/search/sorting#with-search-results
// src/components/patterns/search/search.html.twig
{#
Attention: form element together with all classes will be generated directly in the Drupal.
Form tag in this template is needed only for miyagi.
#}
{% if not is_drupal_form %}
<form class="Search js-Search u-container{% if class %} {{ class }}{% endif %}">
{% endif %}
{% if query %}
{% include "@patterns/search/query/query.html.twig" with query|merge({class: "Search-query"}) only %}
{% endif %}
{% if results_amount %}
{% include "@patterns/search/results-amount/results-amount.html.twig" with results_amount|merge({class: "Search-resultsAmount"}) only %}
{% endif %}
{% if display_filters %}
{% if filters %}
{% include "@patterns/search/filters/filters.html.twig" with filters|merge({class: "Search-filters"}) only %}
{% endif %}
{% if sorting %}
{% include "@patterns/search/sorting/sorting.html.twig" with sorting|merge({class: "Search-resultsSorting"}) only %}
{% endif %}
{% endif %}
{% if not is_drupal_form %}
</form>
{% endif %}
Educational materials mock data
is_drupal_form: false
display_filters: true
class: js-Search-educationMaterials
filters:
$ref: /patterns/search/filters#education-materials
sorting:
$ref: /patterns/search/sorting#with-search-results