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

@@ -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))

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,23 @@
   size ||= ""
   value ||= ""
 
-  data_attributes ||= {}
+  button_data_attributes ||= {}
+
+  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
 
-  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"
+    component_helper.add_class("gem-c-search--on-govuk-blue")
   else
-    classes << "gem-c-search--on-white"
+    component_helper.add_class("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.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 +48,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
 %>
-<div class="<%= classes.join(" ") %>" 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 +69,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 +79,10 @@
       ) %>
     </div>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>
+      <%= tag.button class: "gem-c-search__submit", type: "submit", data: button_data_attributes, enterkeyhint: "search" do %>
         <%= button_text %>
         <%= render "govuk_publishing_components/components/search/search_icon" %>
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

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"
@@ -123,3 +123,9 @@ examples:
       engines such as that currently used by Search API v2.
     data:
       disable_corrections: true
+  with_button_data_attributes:
+    description: |
+      Allows data attributes to be set on the button.
+    data:
+      button_data_attributes:
+        module: hello

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,

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
 
@@ -100,7 +100,7 @@ def component_name
   it "applies data attributes when provided" do
     render_component(
       button_text: "Some test text",
-      data_attributes: {
+      button_data_attributes: {
         an_attribute: "some_value",
       },
     )
@@ -148,14 +148,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,