Merge pull request #2691 from ONSdigital/enhancement/2177/update-sear…

…ch-macro-implementation Enhancement/2177/update search macro implementation
ONSdigital · Jun 26, 2023 · 3c4d2b0 · 3c4d2b0
2 parents 1a9d818 + 26a04e8
commit 3c4d2b0
Show file tree

Hide file tree

Showing 25 changed files with 39 additions and 174 deletions.
diff --git a/...-character-check_0_document_0_desktop.png → ...-character-check_0_document_0_desktop.png b/...-character-check_0_document_0_desktop.png → ...-character-check_0_document_0_desktop.png
diff --git a/...h-character-check_0_document_1_tablet.png → ...h-character-check_0_document_1_tablet.png b/...h-character-check_0_document_1_tablet.png → ...h-character-check_0_document_1_tablet.png
diff --git a/...h-character-check_0_document_2_mobile.png → ...h-character-check_0_document_2_mobile.png b/...h-character-check_0_document_2_mobile.png → ...h-character-check_0_document_2_mobile.png
diff --git a/...with-placeholder_0_document_0_desktop.png → ...with-placeholder_0_document_0_desktop.png b/...with-placeholder_0_document_0_desktop.png → ...with-placeholder_0_document_0_desktop.png
diff --git a/...-with-placeholder_0_document_1_tablet.png → ...-with-placeholder_0_document_1_tablet.png b/...-with-placeholder_0_document_1_tablet.png → ...-with-placeholder_0_document_1_tablet.png
diff --git a/..._components_input_example-input-search-with-placeholder_0_document_2_mobile.png b/..._components_input_example-input-search-with-placeholder_0_document_2_mobile.png
diff --git a/...h_example-search_0_document_0_desktop.png → ...ple-input-search_0_document_0_desktop.png b/...h_example-search_0_document_0_desktop.png → ...ple-input-search_0_document_0_desktop.png
diff --git a/...ch_example-search_0_document_1_tablet.png → ...mple-input-search_0_document_1_tablet.png b/...ch_example-search_0_document_1_tablet.png → ...mple-input-search_0_document_1_tablet.png
diff --git a/...rence/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png b/...rence/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png
diff --git a/...test__components_search_example-search-with-placeholder_0_document_2_mobile.png b/...test__components_search_example-search-with-placeholder_0_document_2_mobile.png
diff --git a/..._reference/ds-vr-test__components_search_example-search_0_document_2_mobile.png b/..._reference/ds-vr-test__components_search_example-search_0_document_2_mobile.png
diff --git a/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
diff --git a/...e/ds-vr-test__foundations_page-template_example-custom_0_document_0_desktop.png b/...e/ds-vr-test__foundations_page-template_example-custom_0_document_0_desktop.png
diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss
@@ -137,6 +137,12 @@
   }
 }
 
+.ons-input_search-button {
+  display: flex;
+  flex-flow: row nowrap !important;
+  gap: 0.5rem;
+}
+
 .ons-input-search {
   @extend .ons-input--block;
   @extend .ons-input--ghost;

diff --git a/src/components/input/_macro.njk b/src/components/input/_macro.njk
@@ -1,9 +1,9 @@
 {% macro onsInput(params) %}
     {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
     {% from "components/char-check-limit/_macro.njk" import onsCharLimit %}
-    {% from "components/search/_macro.njk" import onsSearch %}
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
+    {% from "components/button/_macro.njk" import onsButton %}
 
     {% if params.type == "number" %}
         {# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered -
@@ -100,21 +100,28 @@
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex ons-search">
-                {% call onsSearch({
-                    "accessiblePlaceholder": params.accessiblePlaceholder,
-                    "searchButton": {
+            <span class="ons-grid--flex ons-input_search-button">
+                {{ input | safe }}
+                {%- set buttonLabel -%}
+                    {%- if params.searchButton.visuallyHideButtonText == true -%}
+                        <span class="ons-u-vh">{{ params.searchButton.text }}</span>
+                    {%- else -%}
+                        {{ params.searchButton.text }}
+                    {%- endif -%}
+                {%- endset -%}
+                {{
+                    onsButton({
                         "type": params.searchButton.type,
+                        "html": buttonLabel,
                         "text": params.searchButton.text,
-                        "visuallyHideButtonText": params.searchButton.visuallyHideButtonText,
                         "id": params.searchButton.id,
+                        "variants": 'small',
+                        "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                         "attributes": params.searchButton.attributes,
-                        "classes": params.searchButton.classes,
-                        "iconType": params.searchButton.iconType
-                    }
-                }) %}
-                    {{ input | safe }}
-                {% endcall %}
+                        "iconType": params.searchButton.iconType,
+                        "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
+                    })
+                }}
             </span>
         {% else %}
             {{ input | safe }}

diff --git a/src/components/input/_macro.spec.js b/src/components/input/_macro.spec.js
@@ -535,26 +535,6 @@ describe('macro: input', () => {
   });
 
   describe('search', () => {
-    it('renders `search` component', () => {
-      const faker = templateFaker();
-      const searchSpy = faker.spy('search');
-
-      faker.renderComponent('input', EXAMPLE_WITH_SEARCH);
-
-      expect(searchSpy.occurrences[0]).toEqual({
-        accessiblePlaceholder: true,
-        searchButton: {
-          type: 'button',
-          text: 'Search for address',
-          id: 'search-for-address',
-          attributes: { a: 42 },
-          classes: 'extra-search-button-class',
-          iconType: 'search',
-          visuallyHideButtonText: true,
-        },
-      });
-    });
-
     it.each('outputs `type` attribute of "search"', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_WITH_SEARCH));
 

diff --git a/...h/example-search-with-character-check.njk → ...ple-input-search-with-character-check.njk b/...h/example-search-with-character-check.njk → ...ple-input-search-with-character-check.njk
@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -20,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}
diff --git a/...earch/example-search-with-placeholder.njk → ...example-input-search-with-placeholder.njk b/...earch/example-search-with-placeholder.njk → ...example-input-search-with-placeholder.njk
@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}
diff --git a/src/components/search/example-search.njk → ...components/input/example-input-search.njk b/src/components/search/example-search.njk → ...components/input/example-input-search.njk
@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}
diff --git a/src/components/search/_macro-options.md b/src/components/search/_macro-options.md
diff --git a/src/components/search/_macro.njk b/src/components/search/_macro.njk
diff --git a/src/components/search/_macro.spec.js b/src/components/search/_macro.spec.js
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -47,7 +47,6 @@
 @import '../components/radios/radios';
 @import '../components/related-content/related-content';
 @import '../components/relationships/relationships';
-@import '../components/search/search';
 @import '../components/section-navigation/section-navigation';
 @import '../components/skip-to-content/skip';
 @import '../components/status/status';

diff --git a/yarn.lock b/yarn.lock
@@ -13278,4 +13278,4 @@ yup@^0.27.0:
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==