Merge pull request #4446 from alphagov/notice-component-wrapper

Use component wrapper on notice component

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Use component wrapper on panel component ([PR #4459](https://github.com/alphagov/govuk_publishing_components/pull/4459))
 * Add a `glance_metric` component ([PR #4452](https://github.com/alphagov/govuk_publishing_components/pull/4452))
 * Use component wrapper on org logo component ([PR #4458](https://github.com/alphagov/govuk_publishing_components/pull/4458))
+* Use component wrapper on notice component ([PR #4444](https://github.com/alphagov/govuk_publishing_components/pull/4444))
 
 ## 46.0.0
 

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

@@ -16,13 +16,16 @@
   heading_level = show_banner_title ? "h3" : "h2"
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-notification-banner gem-c-notice")
+  component_helper.add_class(shared_helper.get_margin_bottom)
 
-  css_classes = %w[govuk-notification-banner gem-c-notice]
-  css_classes << shared_helper.get_margin_bottom
+  component_helper.add_aria_attribute({ label: "Notice" })
+  component_helper.add_aria_attribute({ live: "polite" }) if aria_live
+  component_helper.add_aria_attribute({ labelledby: banner_title_id }) if show_banner_title
 
-  aria_attributes = {label: 'Notice'}
-  aria_attributes[:live] = 'polite' if aria_live
-  aria_attributes[:labelledby] = banner_title_id if show_banner_title
+  component_helper.set_lang(lang)
+  component_helper.add_role("region")
 
   description_present = description.present? || description_text.present? || description_govspeak.present?
 
@@ -33,7 +36,7 @@
   end
 %>
 <% if title || description_present %>
-  <%= tag.section class: css_classes, aria: aria_attributes, lang: lang, role: "region" do %>
+  <%= tag.section(**component_helper.all_attributes) do %>
     <%= tag.div class: "govuk-notification-banner__header" do %>
       <%= tag.h2 banner_title, class: "govuk-notification-banner__title", id: banner_title_id %>
     <% end if show_banner_title %>

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

@@ -4,6 +4,7 @@ body: |
   The notice component replaces the notice and withdrawal notice patterns on GOV.UK.
 
   The component accepts either a simple string `description_text` parameter that it wraps in a paragraph, or a `description_govspeak` parameter that is rendered through govspeak for more complex HTML layout.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   The notice must: