diff --git a/CHANGELOG.md b/CHANGELOG.md index 589daa188..6ef2e6281 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/demo/spec/components/previews/header_preview.rb b/demo/spec/components/previews/header_preview.rb index e3bbee31d..5a27c0213 100644 --- a/demo/spec/components/previews/header_preview.rb +++ b/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: { diff --git a/demo/spec/components/previews/header_preview/with_custom_search_form.html.haml b/demo/spec/components/previews/header_preview/with_custom_search_form.html.haml new file mode 100644 index 000000000..b83235395 --- /dev/null +++ b/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") diff --git a/engine/app/components/citizens_advice_components/header.html.erb b/engine/app/components/citizens_advice_components/header.html.erb index 488e9dc5e..2dcbfbe47 100644 --- a/engine/app/components/citizens_advice_components/header.html.erb +++ b/engine/app/components/citizens_advice_components/header.html.erb @@ -10,15 +10,14 @@ <% end %>
<%= logo %> - - <% if search_form.present? || header_button.present? %> + <% if search_form.present? || header_button.present? || custom_search_form.present? %>
<% if header_button.present? %>
<%= header_button %>
<% end %> - <% if search_form.present? %> + <% if search_form.present? || custom_search_form.present? %> + <% 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" + ) %> + + <% end %> <% end %> <% end %>
diff --git a/engine/app/components/citizens_advice_components/header.rb b/engine/app/components/citizens_advice_components/header.rb index d6c22c3c2..896e4ed63 100644 --- a/engine/app/components/citizens_advice_components/header.rb +++ b/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 diff --git a/engine/spec/components/citizens_advice_components/header_spec.rb b/engine/spec/components/citizens_advice_components/header_spec.rb index de23d0498..7220516ae 100644 --- a/engine/spec/components/citizens_advice_components/header_spec.rb +++ b/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 diff --git a/engine/spec/spec_helper.rb b/engine/spec/spec_helper.rb index 60312b918..a695bd5f9 100644 --- a/engine/spec/spec_helper.rb +++ b/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 diff --git a/website/content/components/header.md b/website/content/components/header.md index 8aab6fd84..1d89cfd52 100644 --- a/website/content/components/header.md +++ b/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`: