Merge pull request #4451 from alphagov/autocomp-layout-super-header

[DO NOT MERGE] Layout super nav header: Add search autocomplete
alphagov · Dec 10, 2024 · 364e6bb · 364e6bb
2 parents 4496b31 + 4ddb299
commit 364e6bb
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Add search autocomplete to layout super navigation header ([PR #4451](https://github.com/alphagov/govuk_publishing_components/pull/4451))
 * Use component wrapper on reorderable list component ([PR #4474](https://github.com/alphagov/govuk_publishing_components/pull/4474))
 * Use "button" button type for copy to clipboard component ([PR #4480](https://github.com/alphagov/govuk_publishing_components/pull/4480))
 * Use component wrapper on signup link component ([PR #4481](https://github.com/alphagov/govuk_publishing_components/pull/4481))

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -105,6 +105,7 @@ GEM
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     chartkick (5.1.2)
+    climate_control (1.2.0)
     coderay (1.1.3)
     concurrent-ruby (1.3.4)
     connection_pool (2.4.1)
@@ -614,6 +615,7 @@ PLATFORMS
 
 DEPENDENCIES
   capybara
+  climate_control
   dartsass-rails
   faker
   gds-api-adapters

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", {
+                <% search_options = {
                   name: "keywords",
                   inline_label: false,
                   label_size: "m",
@@ -327,6 +327,14 @@
                   margin_bottom: 0,
                   disable_corrections: true,
                 } %>
+                <% if ENV["GOVUK_DISABLE_SEARCH_AUTOCOMPLETE"] %>
+                  <%= render "govuk_publishing_components/components/search", search_options %>
+                <% else %>
+                  <%= render "govuk_publishing_components/components/search_with_autocomplete", search_options.merge({
+                    source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
+                    source_key: "suggestions",
+                  }) %>
+                <% end %>
               <% end %>
             </div>
           </div>

diff --git a/govuk_publishing_components.gemspec b/govuk_publishing_components.gemspec
@@ -28,6 +28,7 @@ Gem::Specification.new do |s|
   s.add_dependency "sprockets-rails"
 
   s.add_development_dependency "capybara"
+  s.add_development_dependency "climate_control"
   s.add_development_dependency "dartsass-rails"
   s.add_development_dependency "faker"
   s.add_development_dependency "gds-api-adapters"

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
@@ -175,4 +175,19 @@ def component_name
     assert_select 'a[data-ga4-link=\'{"event_name":"navigation","type":"header menu bar","index_section":2,"index_link":6,"index_section_count":3,"index_total":6,"section":"Government activity"}\']'
     assert_select "form[data-module='ga4-search-tracker']"
   end
+
+  describe "search autocomplete" do
+    it "includes the search_with_autocomplete component by default" do
+      render_component({})
+      assert_select ".gem-c-search-with-autocomplete[data-source-url='http://www.dev.gov.uk/api/search/autocomplete.json']"
+    end
+
+    it "allows the GOVUK_DISABLE_SEARCH_AUTOCOMPLETE env var presence to fallback to search without autocomplete" do
+      ClimateControl.modify GOVUK_DISABLE_SEARCH_AUTOCOMPLETE: "1" do
+        render_component({})
+        assert_select ".gem-c-search-autocomplete", false
+        assert_select ".gem-c-search"
+      end
+    end
+  end
 end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
@@ -5,6 +5,7 @@
 require "rspec/rails"
 require "capybara/rails"
 require "govuk_test"
+require "climate_control"
 
 GovukTest.configure
 Selenium::WebDriver::Options.chrome(loggingPrefs: { browser: "ALL" })