Revert "Revert "ISAICP-6729: Change search block in homepage.""

config/sync/block.block.globalsearch.yml → config/sync/block.block.exposed_search.yml

@@ -1,24 +1,26 @@
-uuid: 1ef39009-13ab-424a-a4cf-50cca466b674
+uuid: 07af8993-33e3-4053-bbf7-324d21a6f1a2
 langcode: en
 status: true
 dependencies:
+  config:
+    - views.view.search
   module:
-    - joinup_search
     - system
+    - views
   theme:
     - ventuno
-id: globalsearch
+id: exposed_search
 theme: ventuno
 region: featured
-weight: -26
+weight: -25
 provider: null
-plugin: joinup_search_global_search
+plugin: 'views_exposed_filter_block:search-page_1'
 settings:
-  id: joinup_search_global_search
-  label: 'Global search'
-  provider: joinup_search
+  id: 'views_exposed_filter_block:search-page_1'
+  label: ''
+  provider: views
   label_display: '0'
-  template_suggestion: homepage
+  views_label: ''
 visibility:
   request_path:
     id: request_path

config/sync/block.block.views_block__discover_topics_block.yml

@@ -12,7 +12,7 @@ dependencies:
 id: views_block__discover_topics_block
 theme: ventuno
 region: featured
-weight: -25
+weight: -24
 provider: null
 plugin: 'views_block:discover_topics-block'
 settings:

config/sync/views.view.search.yml

@@ -183,17 +183,19 @@ display:
             description: ''
             use_operator: false
             operator: search_api_fulltext_op
+            operator_limit_selection: false
+            operator_list: {  }
             identifier: keys
             required: false
             remember: false
             multiple: false
             remember_roles:
               authenticated: authenticated
+              licence_manager: '0'
               anonymous: '0'
               moderator: '0'
               administrator: '0'
-            operator_limit_selection: false
-            operator_list: {  }
+              rdf_graph_manager: '0'
           is_grouped: false
           group_info:
             label: ''

tests/src/Traits/TraversingTrait.php

@@ -568,11 +568,6 @@ protected function getSelectorsMatchingElementAlias(string $alias): array {
         'selectors' => [
           // The site-wide search field in the top right corner.
           ['css', 'input#search-bar__input'],
-          // The search field on the search result pages.
-          [
-            'css',
-            'div[data-drupal-selector="views-exposed-form-search-page-1"] input[data-drupal-selector="edit-keys"]',
-          ],
         ],
       ],
     ];

web/themes/ventuno/templates/block/block--exposed-search.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the global search bar.
+ *
+ * Available variables:
+ * - filters: the search filters, to be displayed as chips.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set search_url = path('view.search.page_1')
+%}
+<h2 class="display-6 mb-4 text-center text-lg-start">{{ 'Find the <strong>interoperability<br>resources</strong> you need'|trans }}</h2>
+{% block content %}
+  <div class="search-bar mb-3">
+    {{ content }}
+  </div>
+{% endblock %}
+<p class="text-center text-lg-start">{% trans %}<span class="d-block d-lg-inline">Need more search options?</span> <span class="d-block d-lg-inline">Use our <a class="text-primary text-decoration-underline" href="{{ search_url }}">advanced search</a></span>{% endtrans %}</p>

web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig

@@ -0,0 +1,102 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a form element views exposed form search block.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any errors for this form element, may not be set.
+ * - prefix: (optional) The form element prefix, may not be set.
+ * - suffix: (optional) The form element suffix, may not be set.
+ * - required: The required marker, or empty if the associated form element is
+ *   not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ *   - before: The label is output before the element. This is the default.
+ *     The label includes the #title and the required marker, if #required.
+ *   - after: The label is output after the element. For example, this is used
+ *     for radio and checkbox #type elements. If the #title is empty but the
+ *     field is #required, the label will contain only the required marker.
+ *   - invisible: Labels are critical for screen readers to enable them to
+ *     properly navigate through forms but can be visually distracting. This
+ *     property hides the label for everyone except screen readers.
+ *   - attribute: Set the title attribute on the element to create a tooltip but
+ *     output no label element. This is supported only for checkboxes and radios
+ *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ *     It is used where a visual label is not needed, such as a table of
+ *     checkboxes where the row and column provide the context. The tooltip will
+ *     include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ *    - content: A description of the form element, may not be set.
+ *    - attributes: (optional) A list of HTML attributes to apply to the
+ *      description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ *   - before: The description is output before the element.
+ *   - after: The description is output after the element. This is the default
+ *     value.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @see template_preprocess_form_element()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+  'input-group',
+  'js-form-item',
+  'form-item',
+  'js-form-type-' ~ type|clean_class,
+  'form-item-' ~ name|clean_class,
+  'js-form-item-' ~ name|clean_class,
+  title_display not in ['after', 'before'] ? 'form-no-label',
+  disabled == 'disabled' ? 'form-disabled',
+  errors ? 'form-item--error',
+  col_class ? col_class,
+  margin_class ? margin_class,
+]
+%}
+{%
+  set description_classes = [
+  'description',
+  'form-text',
+  'text-muted',
+  description_display == 'invisible' ? 'visually-hidden',
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {% if label_display in ['before', 'invisible'] %}
+    {{ label }}
+  {% endif %}
+  {% if prefix is not empty %}
+    <span class="field-prefix">{{ prefix }}</span>
+  {% endif %}
+  {% if description_display == 'before' and description.content %}
+    <small{{ description.attributes }}>
+      {{ description.content }}
+    </small>
+  {% endif %}
+  {{ children }}
+  {% if suffix is not empty %}
+    <span class="field-suffix">{{ suffix }}</span>
+  {% endif %}
+  {% if label_display == 'after' %}
+    {{ label }}
+  {% endif %}
+  {% if errors %}
+    <div class="form-item--error-message invalid-feedback d-block">
+      {{ errors }}
+    </div>
+  {% endif %}
+  {% if description_display in ['after', 'invisible'] and description.content %}
+    <small{{ description.attributes.addClass(description_classes) }}>
+      {{ description.content }}
+    </small>
+  {% endif %}
+  <button type="submit" class="btn btn-primary btn-search shadow"><span class="d-none d-lg-inline ms-lg-3">{{ 'Search'|trans }}</span></button>
+</div>

web/themes/ventuno/templates/form/input--search-expose-form.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme override for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ */
+#}
+{%
+  set classes = [
+  'search-bar__input',
+  'form-control',
+  'px-4',
+  'py-3',
+  'shadow',
+  attributes.hasClass('error') ? 'is-invalid',
+]
+%}
+
+<input{{ attributes.addClass(classes).removeClass('form-text') }} />{{ children }}

web/themes/ventuno/ventuno.theme

@@ -7,6 +7,7 @@
 
 declare(strict_types = 1);
 
+use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Menu\MenuLinkTreeElement;
 use Drupal\Core\Menu\MenuTreeParameters;
 use Drupal\Core\Url;
@@ -226,3 +227,32 @@ function ventuno_smart_trim(string $string, int $length, bool $ellipsis = TRUE):
   $truncate = new TruncateHTML();
   return $truncate->truncateChars($string, $length, $ellipsis ? '…' : '');
 }
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for form-element.html.twig.
+ */
+function ventuno_theme_suggestions_form_element_alter(array &$suggestions, array $variables): void {
+  if (isset($variables['element']['#joinup_parent'])) {
+    $suggestions[] = 'form_element__' . $variables['element']['#joinup_parent'];
+  }
+}
+
+/**
+ * Implements hook_form_alter().
+ */
+function ventuno_form_alter(&$form, FormStateInterface $form_state, $form_id): void {
+  // Check if the form contains exposed filter form element.
+  if ($form_id == 'views_exposed_form') {
+    // Here you can define the check for specific view so that
+    // it doesn't apply to all views.
+    $view = $form_state->get('view');
+    if ($view->id() === 'search') {
+      $form['keys']['#theme'] = 'input__search_expose_form';
+      $form['keys']['#title_display'] = 'invisible';
+      $form['keys']['#attributes']['id'] = 'search-bar__input';
+      $form['keys']['#attributes']['placeholder'] = t('Start typing to search…');
+      $form['keys']['#joinup_parent'] = $form_id . '_' . $view->id();
+      $form['sort_by']['#type'] = 'hidden';
+    }
+  }
+}