search

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

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/search
additionalProperties: false
type: object
required:
  - algolia_api_key
  - algolia_app_id
  - algolia_index_name
  - unsolicited_application_url
  - search_language
properties:
  algolia_api_key:
    type: string
  algolia_app_id:
    type: string
  algolia_index_name:
    type: string
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - estrichlight
      - leinen
      - sandstein
      - sandsteinlight
  unsolicited_application_url:
    format: uri-reference
    type: string
  search_language:
    type: string
  default_filters:
    type: array
    items:
      type: object
      properties:
        key:
          type: string
        values:
          type:
            - array
            - boolean
          items:
            type: string

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

algolia_api_key: d5466a7837b39e825fdf040697d3e9b1
algolia_app_id: 0NE8RBAOHA
algolia_index_name: finstral_job_dev
unsolicited_application_url: /unsolicited-application
default_filters:
  - key: is_partner_job
    values: false
search_language: de
$variants:
  - $name: prefiltered department
    color_scheme: sandsteinlight
    default_filters:
      - key: department
        values:
          - Montage & Kundendienst
  - $name: prefiltered department with partner jobs
    color_scheme: estrich
    default_filters:
      - key: department
        values:
          - Montage & Kundendienst
      - key: is_partner_job
        values: true
  - $name: prefiltered department and location
    color_scheme: sandsteinlight
    default_filters:
      - key: department
        values:
          - Montage & Kundendienst
      - key: location
        values:
          - Deutschland > Friedberg
          - Italien > Südtirol

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

{{ attach_library('finstral_global/template-components-search') }}

{% set translation_strings = {
	load_more_multiply: "search.load_more_multiply"|tc,
	load_more_single: "search.load_more_single"|tc,
	stats_results_multiply: "search.stats_results_multiply"|tc,
	stats_results_none: "search.stats_results_none"|tc,
	stats_results_single: "search.stats_results_single"|tc,
	show_results_multiply: "search.show_results_multiply"|tc,
	show_results_none: "search.show_results_none"|tc,
	show_results_single: "search.show_results_single"|tc,
} %}

<div class="u-breakout Search js-Search"
		 data-algolia-api-key="{{ algolia_api_key }}"
		 data-algolia-app-id="{{ algolia_app_id }}"
		 data-algolia-index-name="{{ algolia_index_name }}"
		 data-search-language="{{ search_language }}"
		 data-theme="{{ color_scheme }}"
>
	<div class="u-container">
		{% include "@elements/button/button.twig" with {
			classes: ["js-Search-mobileFiltersToggle", "js-Search-mobileFiltersOpener", "Search-mobileFiltersToggle"],
			label: "search.mobile_filters_toggle_button"|tc,
		} only %}
	</div>

	<form class="Search-bar js-Search-bar">
		<div class="u-container Search-barContent">
			<dialog class="Search-mobileFiltersOverlay js-Search-mobileFiltersOverlay">
				<div class="Search-mobileFiltersTitleContainer">
					<h2 class="Search-mobileFiltersTitle u-typo-TextM">{{ "search.mobile_filters_toggle_button"|tc }}</h2>
					<button class="js-Search-mobileFiltersToggle Search-mobileFiltersClose" type="button">
						{% include "@elements/icon/icon.twig" with {
							name: "close",
							classes: [""],
						} only %}
						<span class="u-hiddenVisually">Close filters</span>
					</button>
				</div>
				<div class="Search-mobileScrollContainer">
					<div class="Search-filter js-Search-filterDepartment">
						{% include "@template-components/search/dropdown/dropdown.twig" with {
							classes: ["js-Search-dropdownDepartment"],
							label: "search.label.department"|tc,
							tagsClasses: ["js-Search-tags"],
						} only %}
					</div>
					<div class="Search-filter js-Search-filterLocation">
						{% include "@template-components/search/dropdown/dropdown.twig" with {
							classes: ["js-Search-dropdownLocation"],
							label: "search.label.location"|tc,
							tagsClasses: ["js-Search-tags"],
						} only %}
					</div>
				</div>
				<div class="Search-mobileFiltersButtonContainer">
					{% include "@elements/button/button.twig" with {
						classes: ["js-Search-mobileFiltersToggle", "js-Search-showResultsButton", "Search-mobileFiltersToggle"],
						label: "search.show_results_multiply"|tc,
					} only %}
				</div>
			</dialog>
			<div class="Search-filter">
				{% include "@elements/icon/icon.twig" with {
					name: "search",
					classes: ["Search-queryInputIcon"],
				} only %}
				{% include "@elements/form-element/input/input.twig" with {
					classes: ["Search-query"],
					type: "search",
					name: "query",
					placeholder: "search.label.further_search_criteria"|tc,
				} only %}
			</div>
		</div>
		<div class="Search-mobileTagsContainer">
			<div class="Search-mobileTagsShadow">
				<div class="js-Search-mobileDepartmentTags Search-mobileTags"></div>
				<div class="js-Search-mobileLocationTags Search-mobileTags"></div>
			</div>
		</div>
		<button type="submit" class="Search-fakeSubmitButton">{{ "search.submit_button"|tc }}</button>
	</form>

	<div class="Search-results">
		<p class="Search-stats js-Search-stats u-typo-TextM"></p>

		{% include "@patterns/cards-list/cards-list.twig" with {
			items: [],
			classes: ["Search-cardsList"],
			heading: "search.results.title"|tc,
			hidden_heading: true,
		} only %}

		{% include "@elements/button/button.twig" with {
			modifiers: ["secondary"],
			classes: ["js-Search-loadMoreButton", "Search-loadMoreButton is-hidden"],
			label: "search.load_more_multiply"|tc,
		} only %}
	</div>

	<div class="u-container u-breakout Search-emptyState" tabindex="-1" hidden>
		<p>{{ "search.empty_state.no_vacancies"|t }}</p>
		<section class="u-breakout Search-emptyStateTeaser">
			<h2 class="u-typo-HeadlineXL">{{ "search.empty_state.teaser_title"|t }}</h2>
			<p class="u-typo-HeadlineS Search-emptyStateTeaserText">{{ "search.empty_state.teaser_text"|t }}</p>
			{% include "@elements/button/button.twig" with {
				label: "search.empty_state.teaser_button"|t,
				modifiers: ["secondary"],
				url: unsolicited_application_url,
			} only %}
		</section>
	</div>

	{% if default_filters %}
		{% set filters = {} %}
		{% for filter in default_filters %}
			{% set filters = filters|merge({
				(filter.key): filter.values
			}) %}
		{% endfor %}
		<script class="js-Search-default-filters" type="application/json">{{ filters|json_encode|raw }}</script>
	{% endif %}

	<script class="js-Search-strings" type="application/json">{{ translation_strings|json_encode|raw }}</script>
</div>