Search

Information

Folder
src/components/patterns/search

Files

Schema
// 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
Mocks
// 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
Template
// 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 %}

Variants

default
Open
Educational materials
Open