Add component wrapper to contextual guidance component

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Update accessibility criteria in component docs ([PR #4242](https://github.com/alphagov/govuk_publishing_components/pull/4242))
 * Show all big_number symbol types in our docs ([PR #4271](https://github.com/alphagov/govuk_publishing_components/pull/4271))
 * Remove incorrect search component example ([PR #4253](https://github.com/alphagov/govuk_publishing_components/pull/4253))
+* Add component wrapper to contextual guidance component ([PR #4282](https://github.com/alphagov/govuk_publishing_components/pull/4277))
 
 ## 43.5.0
 

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

@@ -4,12 +4,16 @@
   id ||= nil
   title ||= nil
   content ||= nil
-  data_attributes ||= {}
-  data_attributes[:module] = "contextual-guidance"
   guidance_id ||= nil
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-contextual-guidance")
+  component_helper.add_data_attribute({ module: "contextual-guidance" })
+
 %>
 
-<%= tag.div class: "gem-c-contextual-guidance", id: id, data: data_attributes do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.div class: "govuk-grid-row" do %>
     <%= tag.div class: "govuk-grid-column-two-thirds" do %>
       <%= tag.div class: "gem-c-contextual-guidance__input-field" do %>

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

@@ -11,6 +11,7 @@ accessibility_criteria: |
   * be hidden by default
   * be visible when the associated input field if focused
   * stay visible until another input field with guidance is being focused
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 examples: