From be80bb995b904760a4d1f8222120baf41de6d2a0 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Fri, 20 Dec 2024 13:35:27 +0000
Subject: [PATCH] Use component wrapper helper in banner

- previously using the responsive margin bottom mixin, but this doesn't provide enough spacing on consultation pages
- instead switch to using the component wrapper helper, which includes an option to set margin bottom
- set margin bottom to match existing (on desktop, better on mobile)
---
 .../stylesheets/components/_banner.scss       |  1 -
 app/views/components/_banner.html.erb         | 23 +++++++++++--------
 app/views/components/docs/banner.yml          |  1 +
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
index 67303f732..b9ce2252b 100644
--- a/app/assets/stylesheets/components/_banner.scss
+++ b/app/assets/stylesheets/components/_banner.scss
@@ -6,7 +6,6 @@
   color: govuk-colour("white");
   padding: govuk-spacing(3);
   clear: both;
-  @include responsive-bottom-margin;
   @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
diff --git a/app/views/components/_banner.html.erb b/app/views/components/_banner.html.erb
index 37eeedada..102370581 100644
--- a/app/views/components/_banner.html.erb
+++ b/app/views/components/_banner.html.erb
@@ -1,8 +1,19 @@
-<% add_app_component_stylesheet("banner") %>
 <%
+  add_app_component_stylesheet("banner")
+
   title ||= false
   aside ||= false
   large_text = !title && !aside
+  local_assigns[:margin_bottom] ||= 7
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("app-c-banner")
+  component_helper.add_class("app-c-banner--aside") if aside
+  component_helper.add_aria_attribute({ label: "Notice" })
+  component_helper.set_lang("en")
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" })
+  component_helper.add_data_attribute({ ga4_track_links_only: "" })
+  component_helper.add_data_attribute({ ga4_link: { event_name: "navigation", type: "callout" } })
 %>
 <% content_block = capture do %>
   <% if title %>
@@ -12,15 +23,9 @@
     <%= text %>
   </p>
 <% end %>
-<section
-  class="app-c-banner<% if aside %> app-c-banner--aside<% end %>" 
-  aria-label="Notice"
-  lang="en"
-  data-module="ga4-link-tracker"
-  data-ga4-track-links-only
-  data-ga4-link="<%= { event_name: "navigation", type: "callout" }.to_json %>">
+<%= tag.section(**component_helper.all_attributes) do %>
   <%= content_block %>
   <% if aside %>
     <p class="app-c-banner__desc"><%= aside %></p>
   <% end %>
-</section>
+<% end %>
diff --git a/app/views/components/docs/banner.yml b/app/views/components/docs/banner.yml
index 2da76371a..e97e7834c 100644
--- a/app/views/components/docs/banner.yml
+++ b/app/views/components/docs/banner.yml
@@ -10,6 +10,7 @@ accessibility_criteria: |
   - be visually distinct from other content on the page
   - have an accessible name that describes the banner as a notice
   - have a text 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)
+uses_component_wrapper_helper: true
 examples:
   default:
     data: