diff --git a/drupal_cms_olivero/components/search-narrow/images/search--white.svg b/drupal_cms_olivero/components/search-narrow/images/search--white.svg new file mode 100644 index 0000000000000000000000000000000000000000..81730452219f3196d8c00ed75ec812c52eba9db9 --- /dev/null +++ b/drupal_cms_olivero/components/search-narrow/images/search--white.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27.2" viewBox="0 0 26 27.2"> + <path fill="#fff" d="M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z"/> +</svg> diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.component.yml b/drupal_cms_olivero/components/search-narrow/search-narrow.component.yml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.css b/drupal_cms_olivero/components/search-narrow/search-narrow.css new file mode 100644 index 0000000000000000000000000000000000000000..88cc5f93bd443203ce71465773ed9e923c94c226 --- /dev/null +++ b/drupal_cms_olivero/components/search-narrow/search-narrow.css @@ -0,0 +1,99 @@ +.block-search-narrow { + margin-inline: calc(-1 * var(--sp)); + margin-block-end: var(--sp2); + background: var(--color--black); + + form { + display: flex; + } + + .form-item { + flex-grow: 1; + margin: 0; + } + + .form-actions { + margin: 0; + } + + input:is([type="search"],[type="text"]) { + width: calc(100% + var(--sp2)); + height: var(--sp3); + padding-block: 0; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + transition: background-size 0.4s; + color: var(--color--white); + border: solid 1px transparent; + background-color: transparent; + background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); + background-repeat: no-repeat; + background-position: bottom left; /* LTR */ + background-size: 0% 5px; + box-shadow: none; + font-family: var(--font-serif); + font-size: 16px; + -webkit-appearance: none; + + &:focus { + outline: solid 4px transparent; + outline-offset: -4px; + background-size: 100% 5px; + } + + @media (min-width: 43.75rem) { + height: var(--sp4); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp2); + } + } + + [type="submit"][class] { + position: relative; + overflow: hidden; + align-self: stretch; + width: var(--sp3); + height: auto; + margin: 0; + padding: 0; + cursor: pointer; + border-color: transparent; + background-color: transparent; + background-image: url('images/search--white.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: auto; + text-indent: -999px; + + &:focus { + outline: solid 2px var(--color--white); + outline-offset: -4px; + box-shadow: none; + } + + @media (min-width: 43.75rem) { + width: 80px; + } + } + + /* 500px is the width of the primary nav at mobile. */ + @media (min-width: 500px) { + margin-inline: 0; + } +} + +body:not(.is-always-mobile-nav) .block-search-narrow { + @media (min-width: 75rem) { + display: none; + } +} + +[dir="rtl"] .block-search-narrow { + & input[type="search"] { + background-position: bottom right; + } + + & .search-form__submit .icon--search::after { + transform-origin: right; + } +} diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.twig b/drupal_cms_olivero/components/search-narrow/search-narrow.twig new file mode 100644 index 0000000000000000000000000000000000000000..e8735e9098a67eec6f841f0f96e16127735957fb --- /dev/null +++ b/drupal_cms_olivero/components/search-narrow/search-narrow.twig @@ -0,0 +1,18 @@ +{% + set classes = [ + 'block', + 'block-search-narrow', + ] +%} +<div{{ attributes.addClass(classes) }}> + {{ title_prefix }} + {% if label %} + <h2{{ title_attributes }}>{{ label }}</h2> + {% endif %} + {{ title_suffix }} + {% block content %} + <div{{ content_attributes.addClass('content') }}> + {{ content }} + </div> + {% endblock %} +</div> diff --git a/drupal_cms_olivero/components/search-wide/images/search--white.svg b/drupal_cms_olivero/components/search-wide/images/search--white.svg new file mode 100644 index 0000000000000000000000000000000000000000..81730452219f3196d8c00ed75ec812c52eba9db9 --- /dev/null +++ b/drupal_cms_olivero/components/search-wide/images/search--white.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27.2" viewBox="0 0 26 27.2"> + <path fill="#fff" d="M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z"/> +</svg> diff --git a/drupal_cms_olivero/components/search-wide/images/search.svg b/drupal_cms_olivero/components/search-wide/images/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..fb9341ceafbd25e05dfa22dcaf17cde1131ee1ea --- /dev/null +++ b/drupal_cms_olivero/components/search-wide/images/search.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23"> + <path fill="currentColor" d="M21.7,21.3l-4.4-4.4C19,15.1,20,12.7,20,10c0-5.5-4.5-10-10-10S0,4.5,0,10s4.5,10,10,10c2.1,0,4.1-0.7,5.8-1.8l4.5,4.5c0.4,0.4,1,0.4,1.4,0S22.1,21.7,21.7,21.3z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S14.4,18,10,18z"/> +</svg> diff --git a/drupal_cms_olivero/components/search-wide/search-wide.component.yml b/drupal_cms_olivero/components/search-wide/search-wide.component.yml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/drupal_cms_olivero/components/search-wide/search-wide.css b/drupal_cms_olivero/components/search-wide/search-wide.css new file mode 100644 index 0000000000000000000000000000000000000000..34898ecd6208b67365ca15e86dc2b6a8f1c152c9 --- /dev/null +++ b/drupal_cms_olivero/components/search-wide/search-wide.css @@ -0,0 +1,267 @@ +/** + * @file + * Header Search Wide Block. + */ + +.block-search-wide.contextual-region { + position: static; +} + +.block-search-wide__wrapper { + position: absolute; + z-index: 1; /* Ensure left border shows above social region in IE11. */ + inset-block-start: 100%; + inset-inline-start: calc(-1 * var(--content-left)); + display: none; + visibility: hidden; + overflow: hidden; + width: calc(100% + var(--content-left)); + max-width: var(--max-bg-color); + height: var(--sp8); + max-height: 0; + margin: 0; + padding: 0; + transition: all 0.2s; + border-inline-start: solid var(--content-left) var(--color--gray-20); + background: var(--color--black); +} + +.block-search-wide__wrapper.is-active { + visibility: visible; + max-height: var(--sp8); +} + +.block-search-wide__wrapper form { + display: flex; + grid-column: 1 / 14; +} + +.block-search-wide__wrapper .form-item { + margin: 0; +} + +.block-search-wide__wrapper :is([type="search"], [type="text"]) { + width: calc(100% + var(--sp2)); + height: var(--sp8); + padding-block: 0; + padding-inline: var(--sp12) 0; + border: 0; + background: transparent; + transition: background-size 0.4s; + color: var(--color--white); + border: solid 1px transparent; + box-shadow: none; + font-family: var(--font-serif); + font-size: 2rem; + -webkit-appearance: none; + + &.form-autocomplete { + background-image: none; + } +} + +.block-search-wide__wrapper :is([type="search"], [type="text"]):focus { + border-color: transparent; + outline: solid 4px transparent; + outline-offset: -4px; +} + +.block-search-wide__wrapper .form-item-keys { + flex-grow: 1; + margin: 0; +} + +.block-search-wide__wrapper .form-actions { + display: flex; + margin: 0; +} + +.block-search-wide__wrapper .form-submit[class] { + position: relative; + overflow: hidden; + align-self: stretch; + width: 6.25rem; + height: auto; + margin: 0; + padding: 0; + cursor: pointer; + border-color: transparent; + background-color: transparent; + background-image: url('images/search--white.svg'); + background-position: center; + background-repeat: no-repeat; + text-indent: -999px; + overflow: clip; + + &:focus { + outline: solid 2px var(--color--white); + outline-offset: -4px; + } + + @media (forced-colors: active) { + background: revert; + text-indent: revert; + } +} + +.block-search-wide__container { + max-width: var(--max-width); + padding-inline-end: var(--sp2); +} + +.block-search-wide__grid { + display: grid; + grid-template-columns: repeat(var(--grid-col-count), 1fr); + grid-column-gap: var(--grid-gap); +} + +/* Override specificity from container-inline.module.css */ + +.container-inline .block-search-wide__container { + display: block; +} + +.container-inline .block-search-wide__grid { + display: grid; +} + +.block-search-wide__button { + position: relative; + display: none; + width: var(--sp3); + height: var(--sp6); + cursor: pointer; + color: var(--color-text-neutral-loud); /* Affects SVG search icon. */ + border: 0; + background: transparent; + -webkit-appearance: none; +} + +.block-search-wide__button:focus { + position: relative; + outline: 0; +} + +.block-search-wide__button:focus::after { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + height: var(--sp3); + content: ""; + transform: translate(-50%, -50%); + border: solid 2px var(--color--primary-50); + border-radius: 0.25rem; +} + +.block-search-wide__button[aria-expanded="true"] { + background: var(--color--black); +} + +.block-search-wide__button[aria-expanded="true"]:focus::after { + border-color: var(--color--white); +} + +.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before, +.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after { + position: absolute; + top: 50%; + left: 50%; + width: var(--sp1-5); + height: 0; + content: ""; + border-block-start: solid 2px var(--color--white); +} + +.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before { + transform: translate(-50%, -50%) rotate(-45deg); +} + +.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after { + transform: translate(-50%, -50%) rotate(45deg); +} + +.block-search-wide__button[aria-expanded="true"] svg { + display: none; +} + +.block-search-wide__button svg { + margin-inline-start: auto; + margin-inline-end: auto; +} + +@media (forced-colors: active) { + .block-search-wide__button { + background: ButtonFace; + } + + .block-search-wide__button path { + fill: ButtonText; + } +} + +/* Provide rudimentary access to site search if JS is disabled. */ + +html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper { + visibility: visible; + max-height: var(--sp8); +} + +/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */ + +[dir] .block-search-wide__wrapper input[type="search"] { + background-color: transparent; + background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ + background-repeat: no-repeat; + background-position: bottom left; /* LTR */ + background-size: 0% 0.625rem; +} + +[dir] .block-search-wide__wrapper input[type="search"]:focus { + background-size: 100% var(--sp0-5); +} + +[dir="rtl"] .block-search-wide__wrapper input[type="search"] { + background-position: bottom right; +} + +[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after { + transform-origin: right; +} + +@media (min-width: 75rem) { + body:not(.is-always-mobile-nav) .block-search-wide__wrapper, + body:not(.is-always-mobile-nav) .block-search-wide__button { + display: block; + } +} + +/* + * Autocomplete styles. + */ + .search-api-autocomplete-search { + .ui-menu-item { + .ui-menu-item-wrapper { + display: block; + padding-block: var(--sp); + padding-inline: var(--sp12) var(--sp); + background-color: var(--color--gray-20); + color: var(--color--white); + font-size: var(--font-size-l); + + .search-api-autocomplete-suggestion { + all: revert; + } + + &.ui-state-active { + background-color: var(--color--gray-45); + outline: solid 2px transparent; + outline-offset: -6px; + + .search-api-autocomplete-suggestion { + all: revert; + } + } + } + } +} diff --git a/drupal_cms_olivero/components/search-wide/search-wide.js b/drupal_cms_olivero/components/search-wide/search-wide.js new file mode 100644 index 0000000000000000000000000000000000000000..2413c4ba5eba07fffc45392811c6a02a7da2c024 --- /dev/null +++ b/drupal_cms_olivero/components/search-wide/search-wide.js @@ -0,0 +1,160 @@ +/** + * @file + * Wide viewport search bar interactions. + */ + +((Drupal) => { + const searchWideButtonSelector = '[data-drupal-selector="block-search-wide-button"]'; + const searchWideWrapperSelector = '[data-drupal-selector="block-search-wide-wrapper"]'; + let searchWideButton; + let searchWideWrapper; + + /** + * Determine if search is visible. + * + * @return {boolean} + * True if the search wrapper contains "is-active" class, false if not. + */ + function searchIsVisible() { + return searchWideWrapper.classList.contains('is-active'); + } + Drupal.drupal_cms_olivero = Drupal.drupal_cms_olivero || {}; + Drupal.drupal_cms_olivero.searchIsVisible = searchIsVisible; + + /** + * Closes search bar when a click event does not happen at an (x,y) coordinate + * that does not overlap with either the search wrapper or button. + * + * @see https://bugs.webkit.org/show_bug.cgi?id=229895 + * + * @param {Event} e click event + */ + function watchForClickOut(e) { + const clickInSearchArea = e.target.matches(` + ${searchWideWrapperSelector}, + ${searchWideWrapperSelector} *, + ${searchWideButtonSelector}, + ${searchWideButtonSelector} * + `); + if (!clickInSearchArea && searchIsVisible()) { + // eslint-disable-next-line no-use-before-define + toggleSearchVisibility(false); + } + } + + /** + * Closes search bar when focus moves to another target. + * Avoids closing search bar if event does not have related target - required for Safari. + * + * @see https://bugs.webkit.org/show_bug.cgi?id=229895 + * + * @param {Event} e focusout event + */ + function watchForFocusOut(e) { + if (e.relatedTarget) { + const inSearchBar = e.relatedTarget.matches( + `${searchWideWrapperSelector}, ${searchWideWrapperSelector} *`, + ); + const inSearchButton = e.relatedTarget.matches( + `${searchWideButtonSelector}, ${searchWideButtonSelector} *`, + ); + + if (!inSearchBar && !inSearchButton) { + // eslint-disable-next-line no-use-before-define + toggleSearchVisibility(false); + } + } + } + + /** + * Closes search bar on escape keyup, if open. + * + * @param {Event} e keyup event + */ + function watchForEscapeOut(e) { + if (e.key === 'Escape') { + // eslint-disable-next-line no-use-before-define + toggleSearchVisibility(false); + } + } + + /** + * Set focus for the search input element. + */ + function handleFocus() { + if (searchIsVisible()) { + searchWideWrapper.querySelector('input:is([type="search"],[type="text"])').focus(); + } else if (searchWideWrapper.contains(document.activeElement)) { + // Return focus to button only if focus was inside of the search wrapper. + searchWideButton.focus(); + } + } + + /** + * Toggle search functionality visibility. + * + * @param {boolean} visibility + * True if we want to show the form, false if we want to hide it. + */ + function toggleSearchVisibility(visibility) { + searchWideButton.setAttribute('aria-expanded', visibility === true); + searchWideWrapper.classList.toggle('is-active', visibility === true); + searchWideWrapper.addEventListener('transitionend', handleFocus, { + once: true, + }); + + if (visibility === true) { + if (typeof Drupal.olivero.closeAllSubNav === 'function') { + Drupal.olivero.closeAllSubNav(); + } + + document.addEventListener('click', watchForClickOut, { capture: true }); + document.addEventListener('focusout', watchForFocusOut, { + capture: true, + }); + document.addEventListener('keyup', watchForEscapeOut, { capture: true }); + } else { + document.removeEventListener('click', watchForClickOut, { + capture: true, + }); + document.removeEventListener('focusout', watchForFocusOut, { + capture: true, + }); + document.removeEventListener('keyup', watchForEscapeOut, { + capture: true, + }); + } + } + + Drupal.drupal_cms_olivero.toggleSearchVisibility = toggleSearchVisibility; + + function init() { + searchWideButton = document.querySelector(searchWideButtonSelector); + searchWideWrapper = document.querySelector(searchWideWrapperSelector); + } + + /** + * Initializes the search wide button. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Adds aria-expanded attribute to the search wide button. + */ + Drupal.behaviors.searchWide = { + attach(context) { + const searchWideButtonEl = once( + 'search-wide', + searchWideButtonSelector, + context, + ).shift(); + if (searchWideButtonEl) { + init(); + searchWideButtonEl.setAttribute('aria-expanded', searchIsVisible()); + searchWideButtonEl.addEventListener('click', () => { + toggleSearchVisibility(!searchIsVisible()); + }); + } + }, + }; +})(Drupal); diff --git a/drupal_cms_olivero/components/search-wide/search-wide.twig b/drupal_cms_olivero/components/search-wide/search-wide.twig new file mode 100644 index 0000000000000000000000000000000000000000..3e05ee32cf8ea19591bf7ae8fb1b34a53fa9e81d --- /dev/null +++ b/drupal_cms_olivero/components/search-wide/search-wide.twig @@ -0,0 +1,32 @@ +{% + set classes = [ + 'block', + 'block-search-wide', + ] +%} +<div{{ attributes.addClass(classes) }}> + {{ title_prefix }} + {% if label %} + <h2{{ title_attributes }}>{{ label }}</h2> + {% endif %} + {{ title_suffix }} + {% block content %} + <button class="block-search-wide__button" aria-label="{{ 'Search Form'|t }}" data-drupal-selector="block-search-wide-button"> + {% include "@olivero/../images/search.svg" %} + <span class="block-search-wide__button-close"></span> + </button> + + {# + Add tabindex=“-1†to prevent Safari from closing search bar when the submit button is clicked with a mouse. + @see https://www.drupal.org/project/drupal/issues/3269716 + @see https://bugs.webkit.org/show_bug.cgi?id=229895 + #} + <div{{ content_attributes.addClass('block-search-wide__wrapper').setAttribute('data-drupal-selector', 'block-search-wide-wrapper').setAttribute('tabindex', '-1') }}> + <div class="block-search-wide__container"> + <div class="block-search-wide__grid"> + {{ content }} + </div> + </div> + </div> + {% endblock %} +</div> diff --git a/drupal_cms_olivero/css/components/form.css b/drupal_cms_olivero/css/components/form.css new file mode 100644 index 0000000000000000000000000000000000000000..3698c1bfcca9373009f04fc4d6639254bd13f232 --- /dev/null +++ b/drupal_cms_olivero/css/components/form.css @@ -0,0 +1,4 @@ +/* Very specific selector to align search result page form. */ +[data-drupal-selector*="views-exposed-form-search-page"] .form-item__label { + margin-top: 10px; +} diff --git a/drupal_cms_olivero/drupal_cms_olivero.info.yml b/drupal_cms_olivero/drupal_cms_olivero.info.yml index 9191a56bb665f8e06082f21ea2a297e073d905e6..93ceaed6c4e73f0bef8a076254296f872b1c87e4 100644 --- a/drupal_cms_olivero/drupal_cms_olivero.info.yml +++ b/drupal_cms_olivero/drupal_cms_olivero.info.yml @@ -9,6 +9,8 @@ description: 'A variant of the Olivero front-end theme, optimized for Drupal CMS type: theme base theme: olivero core_version_requirement: ^11 +libraries: + - drupal_cms_olivero/global-styling regions: header: Header primary_menu: Primary menu @@ -23,8 +25,6 @@ regions: content_below: Content Below footer_top: Footer Top footer_bottom: Footer Bottom -libraries: - - drupal_cms_olivero/global-styling libraries-extend: views/views.module: - drupal_cms_olivero/views diff --git a/drupal_cms_olivero/drupal_cms_olivero.libraries.yml b/drupal_cms_olivero/drupal_cms_olivero.libraries.yml index a7690584b499a17f57aaf90805ddd6bb810de171..bb82b26ec748e4a0689adc85547f804884463497 100644 --- a/drupal_cms_olivero/drupal_cms_olivero.libraries.yml +++ b/drupal_cms_olivero/drupal_cms_olivero.libraries.yml @@ -1,5 +1,8 @@ global-styling: + version: VERSION css: + component: + css/components/form.css: {} layout: css/layout/layout.css: { } views: diff --git a/drupal_cms_olivero/drupal_cms_olivero.theme b/drupal_cms_olivero/drupal_cms_olivero.theme new file mode 100644 index 0000000000000000000000000000000000000000..5997ab2dcf62d7a739d1d3a4c694e6b3ea8b3ba3 --- /dev/null +++ b/drupal_cms_olivero/drupal_cms_olivero.theme @@ -0,0 +1,14 @@ +<?php +/** + * Implements hook_theme_suggestions_HOOK_alter(). + */ +function drupal_cms_olivero_theme_suggestions_form_alter(array &$suggestions, array $variables) { + if (isset($variables['element']['#theme']) && is_array($variables['element']['#theme'])) { + foreach ($variables['element']['#theme'] as $theme) { + if (strpos($theme, '_edit_') !== FALSE) { + $suggestions[] = 'form__' . str_replace('_edit_', '_', $theme); + } + $suggestions[] = 'form__' . $theme; + } + } +} diff --git a/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig b/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..4a310b5ea5045bc5404094041d752201ec93618b --- /dev/null +++ b/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig @@ -0,0 +1 @@ +{{ include('drupal_cms_olivero:search-narrow') }} diff --git a/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig b/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..b77a2476c37b07f7cbfba209a0eb7fdd8d8be78b --- /dev/null +++ b/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig @@ -0,0 +1 @@ +{{ include('drupal_cms_olivero:search-wide') }} diff --git a/recipes/drupal_cms_search/config/views.view.search.yml b/recipes/drupal_cms_search/config/views.view.search.yml index 34191dd11c44d3b6102e2e4f0b1d1fa2ac5b63f2..b5ed94722b0d01d74f41e1a3c91ccab914308ee4 100644 --- a/recipes/drupal_cms_search/config/views.view.search.yml +++ b/recipes/drupal_cms_search/config/views.view.search.yml @@ -143,7 +143,7 @@ display: exposed: true expose: operator_id: search_api_fulltext_op - label: '' + label: 'Search keywords' description: '' use_operator: false operator: search_api_fulltext_op diff --git a/recipes/drupal_cms_search/recipe.yml b/recipes/drupal_cms_search/recipe.yml index 7f5c75fb672bf53cbd3389ad25941eae480657c6..fadda9eec72cbbe2f52333e35d46a2d83652ba7e 100644 --- a/recipes/drupal_cms_search/recipe.yml +++ b/recipes/drupal_cms_search/recipe.yml @@ -43,11 +43,45 @@ config: options: weight: 0 region: content - # Add the search form to the header of the page. + # Add the desktop search form to the secondary menu of the page (there are + # two because of accessibility reasons). block.block.search_form: placeBlockInDefaultTheme: id: search_form # The region accepts an array keyed by theme name. + region: + olivero: secondary_menu + drupal_cms_olivero: secondary_menu + # A fallback used if no match found in the region array. + default_region: content + # Place the block before any blocks already in the region. + position: first + plugin: simple_search_form_block + settings: + label: 'Search form' + label_display: '0' + provider: simple_search_form + action_path: /search + get_parameter: text + input_type: search_api_autocomplete + search_api_autocomplete: + search_id: content_autocomplete + display: page_1 + arguments: '' + filter: text + input_label: Search + input_label_display: invisible + input_placeholder: 'Enter search keywords' + input_css_classes: '' + submit_display: true + submit_label: Search + input_keep_value: false + preserve_url_query_parameters: { } + # Add the mobile search form to the primary menu region of the page. + block.block.search_form_primary: + placeBlockInDefaultTheme: + id: search_form_primary + # The region accepts an array keyed by theme name. region: olivero: primary_menu drupal_cms_olivero: primary_menu @@ -73,7 +107,7 @@ config: input_placeholder: 'Enter search keywords' input_css_classes: '' submit_display: true - submit_label: Find + submit_label: Search input_keep_value: false preserve_url_query_parameters: { } user.role.anonymous: