feat: introducing custom_search_form slot in the header component

CHANGELOG.md

@@ -1,6 +1,7 @@
 **New**
 
 - Support Date-like objects in date fields
+- Add support for `custom_search_form` to the header component
 
 ## v9.1.0
 

demo/spec/components/previews/header_preview.rb

@@ -38,6 +38,16 @@ def with_custom_account_link
     )
   end
 
+  def with_custom_search_form
+    render_with_template(
+      locals: {
+        skip_links:,
+        header_links:,
+        navigation_links:
+      }
+    )
+  end
+
   def with_navigation
     render_with_template(
       locals: {

demo/spec/components/previews/header_preview/with_custom_search_form.html.haml

@@ -0,0 +1,8 @@
+= render CitizensAdviceComponents::Header.new do |c|
+  - c.with_logo(title: "Citizens Advice homepage", url: "/")
+  - c.with_skip_links(skip_links)
+  - c.with_header_links(header_links)
+  - c.with_custom_search_form do
+    = form_tag("/test-search", method: :get, role: "search") do
+      = render CitizensAdviceComponents::Search.new(value: "")
+  - c.with_account_link(title: "Sign in", url: "/sign-in")

engine/app/components/citizens_advice_components/header.html.erb

@@ -10,15 +10,14 @@
       <% end %>
       <div class="cads-grid-col-md-2 cads-header__logo-row">
         <%= logo %>
-
-        <% if search_form.present? || header_button.present? %>
+        <% if search_form.present? || header_button.present? || custom_search_form.present? %>
           <div class="cads-header__actions">
             <% if header_button.present? %>
               <div class="cads-header__button">
                 <%= header_button %>
               </div>
             <% end %>
-            <% if search_form.present? %>
+            <% if search_form.present? || custom_search_form.present? %>
               <button
                 class="cads-header__search-reveal js-cads-search-reveal"
                 type="button"
@@ -45,36 +44,40 @@
               <li class="cads-header__links-item"><%= account_link %></li>
             <% end %>
           </ul>
-          <% if search_form.present? || header_button.present? %>
+          <% if search_form.present? || header_button.present? || custom_search_form.present? %>
             <div class="cads-header__actions">
               <% if header_button.present? %>
                 <div class="cads-header__button">
                   <%= header_button %>
                 </div>
               <% end %>
               <div class="cads-header__search-form" id="header-search-form">
-                <% if search_form.present? %>
-                  <%= form_tag(
-                    search_form.search_action_url,
-                    method: :get,
-                    role: "search",
-                    class: "cads-search cads-search--icon-only"
-                  ) do %>
-                    <%= search_field_tag(
-                      search_form.search_param.to_sym, nil,
-                      id: "search-query",
-                      "aria-label": t("citizens_advice_components.search.input_aria_label"),
-                      class: "cads-search__input cads-input",
-                      autocomplete: "off"
-                    ) %>
-                    <button
-                      type="submit"
-                      title="<%= t("citizens_advice_components.search.submit_title") %>"
-                      data-testid="search-button"
-                      class="cads-search__button">
-                      <%= render CitizensAdviceComponents::Icons::Search.new %>
-                      <%= tag.span(t("citizens_advice_components.search.submit_label"), class: "cads-search__button-label") %>
-                    </button>
+                <% if custom_search_form.present? %>
+                  <%= custom_search_form %>
+                <% else %>
+                  <% if search_form.present? %>
+                    <%= form_tag(
+                          search_form.search_action_url,
+                          method: :get,
+                          role: "search",
+                          class: "cads-search cads-search--icon-only"
+                        ) do %>
+                      <%= search_field_tag(
+                            search_form.search_param.to_sym, nil,
+                            id: "search-query",
+                            "aria-label": t("citizens_advice_components.search.input_aria_label"),
+                            class: "cads-search__input cads-input",
+                            autocomplete: "off"
+                          ) %>
+                      <button
+                        type="submit"
+                        title="<%= t("citizens_advice_components.search.submit_title") %>"
+                        data-testid="search-button"
+                        class="cads-search__button">
+                        <%= render CitizensAdviceComponents::Icons::Search.new %>
+                        <%= tag.span(t("citizens_advice_components.search.submit_label"), class: "cads-search__button-label") %>
+                      </button>
+                    <% end %>
                   <% end %>
                 <% end %>
               </div>

engine/app/components/citizens_advice_components/header.rb

@@ -10,12 +10,14 @@ class Header < Base
     renders_one :header_button, "HeaderButton"
     renders_one :search_form, "HeaderSearch"
 
+    renders_one :custom_search_form
+
     def render?
       logo.present?
     end
 
     def show_right_column?
-      header_links.any? || header_button.present? || account_link.present? || search_form.present?
+      header_links.any? || header_button.present? || account_link.present? || search_form.present? || custom_search_form.present?
     end
 
     def skip_links_to_show

engine/spec/components/citizens_advice_components/header_spec.rb

@@ -138,4 +138,19 @@
       it { is_expected.to have_button "Ymchwiliad agored" }
     end
   end
+
+  describe "custom_search_form slot" do
+    before do
+      render_inline(described_class.new) do |c|
+        c.with_logo(title: "Logo title", url: "/")
+        c.with_custom_search_form do
+          form_tag("/test-search", method: :get, role: "search") do
+            render_inline CitizensAdviceComponents::Search.new(value: "")
+          end
+        end
+      end
+    end
+
+    it { is_expected.to have_css "form[action='/test-search']" }
+  end
 end

engine/spec/spec_helper.rb

@@ -31,6 +31,7 @@ def without_fetch_or_fallback_raises
 
 RSpec.configure do |config|
   config.include ActiveSupport::Testing::TimeHelpers
+  config.include ActionView::Helpers::FormTagHelper
   config.include ViewComponent::TestHelpers, type: :component
   config.include Capybara::RSpecMatchers, type: :component
   config.include TestHelpers

website/content/components/header.md

@@ -113,6 +113,21 @@ The search form is optional. In order to configure it you need to provide a `sea
 end %>
 ```
 
+### Custom search form slot
+
+The custom search form is optional. It can be used in cases where the search form needs more options or a different input component than the default search form. For example, it can be used when introducing an autocomplete field.
+If the custom search form slot is used, then the default search form will not appear.
+
+```erb
+<%%= render CitizensAdviceComponents::Header.new do |c|
+      c.with_custom_search_form do
+        form_tag(search_action_url: "/test-search", method: :get, role: "search") do
+          render CitizensAdviceComponents::Search.new(value: "")
+        end
+      end
+end %>
+```
+
 ### Account link slot
 
 The account link slot can be configured in two different ways. Either as a plain link accepting a `title` and `url`: