Search bar

// src/components/template-components/header/search-bar/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/search-bar
additionalProperties: false
properties:
  endpoint_url:
    type: string
    format: uri-reference
  search_input_name:
    type: string
  tenant:
    type: string
required:
  - endpoint_url

// src/components/template-components/header/search-bar/mocks.yaml

endpoint_url: search
search_input_name: query

// src/components/template-components/header/search-bar/search-bar.html.twig

<div class="SearchBar js-SearchBar{% if class %} {{ class }}{% endif %}" data-endpoint-url="/gpde-search/autocomplete">
  <button class="SearchBar-openButton js-SearchBar-openButton" type="button">
    {% include "@elements/icon/icon.html.twig" with {
      name: "search",
      class: "SearchBar-openButtonIcon"
    } only %}
    <span class="u-typo-copy-small">Suchen</span>
  </button>
  <form class="SearchBar-form" role="search" action="{{ endpoint_url }}" method="get">
    <div class="SearchBar-inputHolder">
    <input type="text" class="SearchBar-input js-SearchBar-input u-typo-copy" placeholder="Suchbegriff eingeben ..." aria-label="Suchbegriff eingeben" name="{{ search_input_name }}" required>
      <div class="js-SearchBar-autocompleteResults SearchBar-autocompleteResults"></div>
    </div>
    {% include "@elements/button/button.html.twig" with {
      class: "SearchBar-searchButton js-SearchBar-searchButton",
      icon: "search",
      label: "Suchen",
      reduced: true,
      type: "submit"
    } only %}
    <button type="button" class="SearchBar-closeButton js-SearchBar-closeButton u-typo-copy-small-bold u-brandLink">
      Suche verlassen
      {% include "@elements/icon/icon.html.twig" with {
        name: "cross",
        class: "SearchBar-closeButtonIcon"
      } only %}
    </button>
  </form>
</div>