Layout super nav header: Add search autocomplete

This changes the layout super navigation header to use the new `search_with_autocomplete` component instead of the vanilla `search` one.
alphagov · Dec 10, 2024 · a0e6ada · a0e6ada
1 parent 4496b31
commit a0e6ada
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
@@ -317,7 +317,7 @@
                   label: "Site-wide",
                 }
               ) do %>
-                <%= render "govuk_publishing_components/components/search", {
+                <%= render "govuk_publishing_components/components/search_with_autocomplete", {
                   name: "keywords",
                   inline_label: false,
                   label_size: "m",
@@ -326,6 +326,8 @@
                   size: "large",
                   margin_bottom: 0,
                   disable_corrections: true,
+                  source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
+                  source_key: "suggestions"
                 } %>
               <% end %>
             </div>

diff --git a/spec/component_guide/component_index_spec.rb b/spec/component_guide/component_index_spec.rb
@@ -71,6 +71,7 @@
 @import 'govuk_publishing_components/components/print-link';
 @import 'govuk_publishing_components/components/related-navigation';
 @import 'govuk_publishing_components/components/search';
+@import 'govuk_publishing_components/components/search-with-autocomplete';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/step-by-step-nav';
 @import 'govuk_publishing_components/components/step-by-step-nav-header';
@@ -98,6 +99,7 @@
 //= require govuk_publishing_components/components/layout-header
 //= require govuk_publishing_components/components/layout-super-navigation-header
 //= require govuk_publishing_components/components/print-link
+//= require govuk_publishing_components/components/search-with-autocomplete
 //= require govuk_publishing_components/components/skip-link
 //= require govuk_publishing_components/components/step-by-step-nav
 //= require govuk_publishing_components/components/tabs"

diff --git a/spec/components/layout_super_navigation_header_spec.rb b/spec/components/layout_super_navigation_header_spec.rb
@@ -163,6 +163,11 @@ def component_name
     assert_select ".js-module-initialised[data-module=\"super-navigation-mega-menu\"]", false
   end
 
+  it "includes the search_with_autocomplete component with correct URL" do
+    render_component({})
+    assert_select ".gem-c-search-with-autocomplete[data-source-url='http://www.dev.gov.uk/api/search/autocomplete.json']"
+  end
+
   it "adds GA4 tracking" do
     render_component({})