search

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

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/search
additionalProperties: false
required:
  - action
  - content
properties:
  action:
    type: string
    format: uri-reference
  content:
    type: string
    format: html
  attributes:
    type: string

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

action: action
content:
  $render:
    - $tpl: template-components/header/search/input
      $ref: template-components/header/search/input
    - $tpl: elements/button
      $ref: elements/button
      label: Search
      type: submit
      icon: search
      icon_only: true
      modifiers:
        - secondary

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

{% set content %}
	<form class="HeaderSearch-form" action="{{ action }}" {{ attributes }}>
		{{ content }}
	</form>
{% endset %}

<div class="HeaderSearch js-HeaderSearch">
	{% include "@template-components/header/_overlay/_overlay.twig" with {
		label_open: "Open search"|t,
		label_close: "Close search"|t,
		content: content,
		alias: "search",
	} only %}
</div>