From fa5ccd39d2107ed7f118c9b7fdd4583b046359bd Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Fri, 10 Jan 2025 14:52:44 +0000 Subject: [PATCH] BREAKING: Use component wrapper on search component Breaking as it: - Renames the `id` option to `label_id` - Renames `data_attributes` to `button_data_attributes` --- CHANGELOG.md | 1 + .../components/_search.html.erb | 38 +++++++++---------- .../components/docs/search.yml | 4 +- .../components/layout_header/_search.html.erb | 2 +- spec/components/search_spec.rb | 21 +--------- 5 files changed, 22 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 394a714feb..a0c8ed5c08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ * **BREAKING** Change devolved nations component type option ([PR #4535](https://github.com/alphagov/govuk_publishing_components/pull/4535)) * **BREAKING** Add component wrapper helper to intervention component ([PR #4378](https://github.com/alphagov/govuk_publishing_components/pull/4378)) * **BREAKING** Add component wrapper helper to the list component ([PR #4441](https://github.com/alphagov/govuk_publishing_components/pull/4441)) +* **BREAKING** Add component wrapper helper to the search component ([PR #4540](https://github.com/alphagov/govuk_publishing_components/pull/4540)) * Use component wrapper on subscription links ([PR #4525](https://github.com/alphagov/govuk_publishing_components/pull/4525)) * Use component wrapper on success alert component ([PR #4527](https://github.com/alphagov/govuk_publishing_components/pull/4527)) * Use component wrapper on summary card component ([PR #4528](https://github.com/alphagov/govuk_publishing_components/pull/4528)) diff --git a/app/views/govuk_publishing_components/components/_search.html.erb b/app/views/govuk_publishing_components/components/_search.html.erb index 9f63d3fe6a..c1156a4afa 100644 --- a/app/views/govuk_publishing_components/components/_search.html.erb +++ b/app/views/govuk_publishing_components/components/_search.html.erb @@ -7,7 +7,7 @@ aria_controls ||= nil button_text ||= t("components.search_box.search_button") correction_value = "off" if local_assigns[:disable_corrections] - id ||= "search-main-" + SecureRandom.hex(4) + label_id ||= "search-main-" + SecureRandom.hex(4) wrap_label_in_a_heading ||= false label_margin_bottom ||= nil label_size ||= nil @@ -19,21 +19,17 @@ size ||= "" value ||= "" - data_attributes ||= {} - - classes = %w[gem-c-search govuk-!-display-none-print] - classes << shared_helper.get_margin_top - classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom] - classes << "gem-c-search--large" if size == "large" - classes << "gem-c-search--large-on-mobile" if size == "large-mobile" - classes << "gem-c-search--homepage" if homepage - classes << "gem-c-search--no-border" if no_border - if local_assigns[:on_govuk_blue].eql?(true) - classes << "gem-c-search--on-govuk-blue" - else - classes << "gem-c-search--on-white" - end - classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size) + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_data_attribute({ module: "gem-toggle-input-class-on-focus" }) + component_helper.add_class("gem-c-search govuk-!-display-none-print") + component_helper.add_class(shared_helper.get_margin_top) + component_helper.add_class("gem-c-search--large") if size == "large" + component_helper.add_class("gem-c-search--large-on-mobile") if size == "large-mobile" + component_helper.add_class("gem-c-search--homepage") if homepage + component_helper.add_class("gem-c-search--no-border") if no_border + component_helper.add_class("gem-c-search--on-govuk-blue") if local_assigns[:on_govuk_blue].eql?(true) + component_helper.add_class("gem-c-search--on-white") unless local_assigns[:on_govuk_blue].eql?(true) + component_helper.add_class("gem-c-search--separate-label") if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size) label_classes = [] if (shared_helper.valid_heading_size?(label_size)) @@ -46,12 +42,12 @@ label_classes << label_custom_class if label_custom_class tag_label = capture do - tag.label(for: id, class: label_classes) do + tag.label(for: label_id, class: label_classes) do label_text end end %> -
" data-module="gem-toggle-input-class-on-focus"> +<%= tag.div(**component_helper.all_attributes) do %> <% if wrap_label_in_a_heading %> <%= content_tag(shared_helper.get_heading_level, class: "govuk-!-margin-0") do %> <%= tag_label %> @@ -67,7 +63,7 @@ }, enterkeyhint: "search", class: "gem-c-search__item gem-c-search__input js-class-toggle", - id: id, + id: label_id, name: name, title: t("components.search_box.input_title"), type: "search", @@ -77,10 +73,10 @@ ) %>
- <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %> + <%= tag.button class: "gem-c-search__submit", type: "submit", enterkeyhint: "search" do %> <%= button_text %> <%= render "govuk_publishing_components/components/search/search_icon" %> <% end %>
- +<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/search.yml b/app/views/govuk_publishing_components/components/docs/search.yml index b8c4da6c54..5a2e4b4ab8 100644 --- a/app/views/govuk_publishing_components/components/docs/search.yml +++ b/app/views/govuk_publishing_components/components/docs/search.yml @@ -12,7 +12,7 @@ accessibility_criteria: | - be used inside a form with the role of 'search', to indicate it as a [search landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_search) - have a clear label to identify the search functionality, which is visible to all users - +uses_component_wrapper_helper: true examples: default: data: {} @@ -49,7 +49,7 @@ examples: label_text: "Search" set_id_for_search_input: data: - id: "my_unique_id" + label_id: "my_unique_id" large_version: data: size: "large" diff --git a/app/views/govuk_publishing_components/components/layout_header/_search.html.erb b/app/views/govuk_publishing_components/components/layout_header/_search.html.erb index 9bba2a26da..de1d18c530 100644 --- a/app/views/govuk_publishing_components/components/layout_header/_search.html.erb +++ b/app/views/govuk_publishing_components/components/layout_header/_search.html.erb @@ -21,7 +21,7 @@ > <%= render "govuk_publishing_components/components/search", { button_text: t("components.layout_header.search_button"), - id: "site-search-text", + label_id: "site-search-text", margin_bottom: 0, no_border: true, disable_corrections: true, diff --git a/spec/components/search_spec.rb b/spec/components/search_spec.rb index 8e39e04896..2692b198f7 100644 --- a/spec/components/search_spec.rb +++ b/spec/components/search_spec.rb @@ -45,7 +45,7 @@ def component_name end it "renders a search box with a custom id" do - render_component(id: "my-unique-id") + render_component(label_id: "my-unique-id") assert_select ".gem-c-search #my-unique-id.gem-c-search__input" end @@ -97,17 +97,6 @@ def component_name assert_select ".gem-c-search__submit", text: "Search please" end - it "applies data attributes when provided" do - render_component( - button_text: "Some test text", - data_attributes: { - an_attribute: "some_value", - }, - ) - - assert_select '.gem-c-search__submit[data-an-attribute="some_value"]' - end - it "renders the correct label size" do render_component(label_size: "xl") assert_select ".govuk-label.govuk-label--xl", text: "Search on GOV.UK" @@ -148,14 +137,6 @@ def component_name assert_select 'label.govuk-\!-margin-bottom-0', count: 0 end - it "defaults to no bottom margin if an incorrect value is passed" do - render_component({ - inline_label: false, - margin_bottom: 20, - }) - assert_select "label[class^='govuk-\!-margin-bottom-']", count: 0 - end - it "defaults to no bottom margin if inline_label is not passed" do render_component({ margin_bottom: 2,