Use component wrapper in hint component

This adds the component wrapper to the hint component in order to
provide additional options to a hint.

The primary motivation of this was that we want to dynamically change
the value of a hint in GOV.UK Chat and thus want to set a .js-class to
act as a selector [1] (private repo) and instead are using a custom id
to work around it.

Looking at other components it seemed that using the component wrapper
was a more conventional approach than just utilising the shared helper
to add only classes.

[1]: alphagov/govuk-chat#660 (comment)

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Use component wrapper in hint component ([PR #4214](https://github.com/alphagov/govuk_publishing_components/pull/4214))
 * Hide printed URLs when printing tables ([PR #4209](https://github.com/alphagov/govuk_publishing_components/pull/4209))
 
 ## 43.1.0

app/views/govuk_publishing_components/components/_hint.html.erb

@@ -1,18 +1,17 @@
 <%
   add_gem_component_stylesheet("hint")
 
-  id ||= "hint-#{SecureRandom.hex(4)}"
+  local_assigns[:id] ||= "hint-#{SecureRandom.hex(4)}"
   is_radio_label_hint ||= false
   right_to_left ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  css_classes = %w( gem-c-hint govuk-hint )
-  css_classes << "govuk-radios__hint" if is_radio_label_hint
-
-  custom_margin_bottom_class = shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
-  css_classes << custom_margin_bottom_class if local_assigns[:margin_bottom]
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-hint govuk-hint")
+  component_helper.add_class("govuk-radios__hint") if is_radio_label_hint
+  component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
 %>
 
-<%= tag.div id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>
+<%= tag.div(**component_helper.all_attributes, dir: right_to_left ? "rtl" : nil) do %>
   <%= text %>
 <% end %>

app/views/govuk_publishing_components/components/docs/hint.yml

@@ -2,6 +2,7 @@ name: Form hint text
 description: Use hints for any form fields.
 govuk_frontend_components:
   - hint
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
 

spec/components/hint_spec.rb

@@ -11,6 +11,18 @@ def component_name
     assert_select ".govuk-hint", text: "For example, ‘QQ 12 34 56 C’."
   end
 
+  it "sets a default id" do
+    render_component(text: "For example, ‘QQ 12 34 56 C’.")
+
+    assert_select ".govuk-hint[id^=hint-]"
+  end
+
+  it "accepts a custom id" do
+    render_component(text: "For example, ‘QQ 12 34 56 C’.", id: "special-hint")
+
+    assert_select ".govuk-hint[id=special-hint]"
+  end
+
   it "applies a specified bottom margin" do
     render_component(text: "For example, ‘QQ 12 34 56 C’.", margin_bottom: 7)
 
@@ -29,6 +41,12 @@ def component_name
     assert_select '.govuk-hint.govuk-\!-margin-bottom-3', false
   end
 
+  it "accepts js classes" do
+    render_component(text: "For example, ‘QQ 12 34 56 C’.", classes: "js-class-one js-class-two")
+
+    assert_select ".govuk-hint.js-class-one.js-class-two"
+  end
+
   it "renders the component with the correct `dir` attribute" do
     render_component(
       text: "العربيَّة",