[R20-1952][R20-1954] add support for extending search bar

examples/nuxt-app/app.config.ts

@@ -75,6 +75,39 @@ export default defineAppConfig({
           }
         }
       },
+      queryConfigFunctions: {
+        exampleQueryFunction: ({ searchTerm, queryFilters }) => {
+          if (!searchTerm?.q) {
+            return {
+              bool: {
+                must: [{ match_all: {} }],
+                filter: queryFilters
+              }
+            }
+          }
+
+          const fieldMap = {
+            title: ['title'],
+            content: ['field_paragraph_body'],
+            title_content: ['title', 'field_paragraph_body']
+          }
+          const filter = !searchTerm?.queryType
+            ? 'title_content'
+            : searchTerm?.queryType
+
+          return {
+            bool: {
+              should: {
+                multi_match: {
+                  query: searchTerm?.q,
+                  fields: fieldMap[filter]
+                }
+              },
+              filter: queryFilters
+            }
+          }
+        }
+      },
       locationDSLTransformFunctions: {
         // DSL transform example for VSBA map tests
         schoolBuildings: async (location) => {

examples/nuxt-app/components/global/TideSearchBarComponentExample.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="tide-search-bar-component-example">
+    <RplSearchBar
+      :id="id"
+      :variant="variant"
+      :input-label="inputLabel"
+      :input-value="inputValue.q"
+      :placeholder="placeholder"
+      :suggestions="suggestions"
+      :global-events="globalEvents"
+      :show-clear-button="false"
+      @submit="handleSubmit"
+      @update:input-value="handleUpdate"
+    >
+      <template #afterInput>
+        <label for="query-type" class="rpl-u-visually-hidden">
+          Select a search type
+        </label>
+        <RplFormDropdown
+          id="query-type"
+          label-id="query-type-label-id"
+          :multiple="false"
+          :value="props.inputValue.queryType || 'title_content'"
+          :options="[
+            {
+              id: 'title_content',
+              label: 'Title and content',
+              value: 'title_content'
+            },
+            {
+              id: 'title',
+              label: 'Title',
+              value: 'title'
+            },
+            {
+              id: 'content',
+              label: 'Content',
+              value: 'content'
+            }
+          ]"
+          @onChange="handleChange"
+        />
+      </template>
+    </RplSearchBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  id: string
+  variant?: string
+  inputLabel: string
+  inputValue: Record<string, any>
+  placeholder: string
+  suggestions: any[]
+  globalEvents: boolean
+  handleSubmit: (event: any) => void
+  handleUpdate: (event: any) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default'
+})
+
+const handleChange = (value: string) => props.handleUpdate({ queryType: value })
+</script>
+
+<style>
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
+.tide-search-bar-component-example {
+  .rpl-search-bar__inner {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0 var(--rpl-sp-4);
+
+    @media (--rpl-bp-l) {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .rpl-form-dropdown {
+    order: 1;
+    grid-column: span 2;
+
+    @media (--rpl-bp-l) {
+      width: 210px;
+      order: initial;
+    }
+
+    .rpl-form-dropdown__chevron {
+      right: var(--local-search-bar-inline-padding);
+    }
+
+    &-input {
+      height: auto;
+      border-radius: 0;
+      padding-block: var(--local-search-bar-block-padding);
+      padding-inline: var(--local-search-bar-inline-padding);
+
+      &:not(:focus):not(.rpl-u-focusable--force-on) {
+        border-color: transparent;
+        border-top-color: var(--rpl-clr-neutral-200);
+      }
+
+      @media (--rpl-bp-l) {
+        padding: var(--rpl-sp-1) var(--rpl-sp-3);
+
+        &:not(:focus):not(.rpl-u-focusable--force-on) {
+          border-top-color: transparent;
+          border-left-color: var(--rpl-clr-neutral-300);
+          border-right-color: var(--rpl-clr-neutral-300);
+        }
+      }
+    }
+  }
+}
+</style>

examples/nuxt-app/test/features/data-table/custom-collection.feature → examples/nuxt-app/test/features/landingpage/custom-collection.feature

@@ -89,3 +89,25 @@ Feature: Custom Collection
     Given I visit the page "/custom-collection"
     Then the landing page component "TideCustomCollection" should exist
     And the custom collection component should display the error "Sorry, no results match your search. Try again with different search options or check back later."
+
+  @mockserver
+  Example: Should hide the search form when hideSearchForm is set
+    Given I load the page fixture with "/landingpage/custom-collection/page"
+    And the custom collection config has "hideSearchForm" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/no-search-form" returns the loaded fixture
+
+    When I visit the page "/no-search-form"
+    Then the custom collection component results count should read "Displaying 1-20 of 282 results"
+    And the search form should be hidden
+
+  @mockserver
+  Example: Should only show filters when showFiltersOnly is set
+    Given I load the page fixture with "/landingpage/custom-collection/page"
+    And the custom collection config has "showFiltersOnly" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/filter-only" returns the loaded fixture
+
+    When I visit the page "/filter-only"
+    Then the custom collection component results count should read "Displaying 1-20 of 282 results"
+    And only the search filters should be visible

examples/nuxt-app/test/features/search-listing/filters.feature

@@ -365,3 +365,13 @@ Feature: Search listing - Filter
     Then the search listing page should have 2 results
     And the search form should be hidden
 
+  @mockserver
+  Example: Should only show filters when showFiltersOnly is set
+    Given I load the page fixture with "/search-listing/filters/page"
+    And the search listing config has "showFiltersOnly" set to "true"
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+    Then the page endpoint for path "/no-search-input" returns the loaded fixture
+
+    When I visit the page "/no-search-input"
+    Then the search listing page should have 2 results
+    And only the search filters should be visible

examples/nuxt-app/test/features/search-listing/search-query.feature

@@ -0,0 +1,39 @@
+Feature: Search Queries
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And I am using a "macbook-16" device
+
+  @mockserver
+  Example: The search term query can be extended and a custom query config supplied
+    Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200
+
+    When I visit the page "/"
+    And the search network request should be called with the "/search-listing/search-query/request-initial" fixture
+    Then the search listing page should have 2 results
+
+    When I type "Demo" into the search input
+    And I click the search button
+    Then the URL should reflect that the current active filters are as follows:
+      | id | value |
+      | q  | Demo  |
+    And the search network request should be called with the "/search-listing/search-query/request-title-content" fixture
+
+    When I click the search listing dropdown field labelled "Select a search type"
+    Then the selected dropdown field should have the items:
+      | Title and content |
+      | Title             |
+      | Content           |
+    Then I click the option labelled "Content" in the selected dropdown
+    And I click the search button
+
+    Then the URL should reflect that the current active filters are as follows:
+      | id                | value   |
+      | q                 | Demo    |
+      | search[queryType] | content |
+    And the search network request should be called with the "/search-listing/search-query/request-content" fixture
+
+    When I toggle the search listing filters section
+    And I clear the search filters
+    And the search network request should be called with the "/search-listing/search-query/request-initial" fixture