From f080c25df5bb810f59583aaa14481c91d7bdca4b 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 1/4] 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:

From 32a0dd8d4520a603044b8f48cca4759be66af67a Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Fri, 20 Dec 2024 13:39:31 +0000
Subject: [PATCH 2/4] Stop using mobile_top_margin in consultations

- headings have this unusual behaviour where the mobile top margin is much larger
- this is slightly odd and inconsistent behaviour, so we're removing this option from the heading component and applying custom spacing in these pages instead using existing component options
---
 .../content_items/_attachments_list.html.erb    |  2 +-
 app/views/content_items/consultation.html.erb   | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/views/content_items/_attachments_list.html.erb b/app/views/content_items/_attachments_list.html.erb
index 384bca740..4e5765098 100644
--- a/app/views/content_items/_attachments_list.html.erb
+++ b/app/views/content_items/_attachments_list.html.erb
@@ -2,7 +2,7 @@
   <section id="<%= title.parameterize %>">
     <%= render 'govuk_publishing_components/components/heading',
       text: title,
-      mobile_top_margin: true
+      margin_bottom: 4
     %>
     <% add_gem_component_stylesheet("details") %>
     <% attachments_for_components.each do |details| %>
diff --git a/app/views/content_items/consultation.html.erb b/app/views/content_items/consultation.html.erb
index 1230c28c6..f0fef6e40 100644
--- a/app/views/content_items/consultation.html.erb
+++ b/app/views/content_items/consultation.html.erb
@@ -57,7 +57,10 @@
         title: t("consultation.download_outcome"),
         attachments_for_components: @content_item.final_outcome_attachments_for_components
       %>
-      <%= render 'govuk_publishing_components/components/heading', text: t("consultation.detail_of_outcome"), mobile_top_margin: true %>
+      <%= render 'govuk_publishing_components/components/heading', {
+        text: t("consultation.detail_of_outcome"),
+        margin_bottom: 4,
+      } %>
       <div class="consultation-outcome-detail">
         <%= render 'govuk_publishing_components/components/govspeak', {
           direction: page_text_direction,
@@ -73,7 +76,7 @@
     %>
     <% if @content_item.public_feedback_detail %>
       <%= render 'govuk_publishing_components/components/heading', {
-        mobile_top_margin: true,
+        margin_bottom: 4,
         text: t("consultation.detail_of_feedback_received"),
       } %>
       <div class="consultation-feedback">
@@ -92,7 +95,7 @@
           <%= render 'govuk_publishing_components/components/heading', {
             heading_level: 2,
             id: "original-consultation-title",
-            mobile_top_margin: true,
+            margin_bottom: 4,
             text: t("consultation.original_consultation"),
           } %>
         </header>
@@ -136,7 +139,7 @@
 
     <div class="consultation-description">
       <%= render 'govuk_publishing_components/components/heading', {
-        mobile_top_margin: true,
+        margin_bottom: 4,
         text: t("consultation.description"),
       } %>
 
@@ -152,8 +155,10 @@
 
     <% if @content_item.ways_to_respond? %>
       <div id="ways-to-respond" class="consultation-ways-to-respond">
-        <%= render 'govuk_publishing_components/components/heading', text: t("consultation.ways_to_respond"), mobile_top_margin: true %>
-
+        <%= render 'govuk_publishing_components/components/heading', {
+          text: t("consultation.ways_to_respond"),
+          margin_bottom: 4
+        } %>
         <%= render 'govuk_publishing_components/components/govspeak', {
           direction: page_text_direction,
         } do %>

From ce7d871975296275ef3697eb840045b3c83877fe Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Fri, 20 Dec 2024 13:55:25 +0000
Subject: [PATCH 3/4] Stop using mobile_top_margin in call for evidence

- headings have this unusual behaviour where the mobile top margin is much larger
- this is slightly odd and inconsistent behaviour, so we're removing this option from the heading component and applying custom spacing in these pages instead using existing component options
---
 .../content_items/call_for_evidence.html.erb  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/views/content_items/call_for_evidence.html.erb b/app/views/content_items/call_for_evidence.html.erb
index b786a8cb6..755c3f860 100644
--- a/app/views/content_items/call_for_evidence.html.erb
+++ b/app/views/content_items/call_for_evidence.html.erb
@@ -47,7 +47,10 @@
         attachments_for_components: @content_item.outcome_documents
       %>
 
-      <%= render 'govuk_publishing_components/components/heading', text: t("call_for_evidence.detail_of_outcome"), mobile_top_margin: true %>
+      <%= render 'govuk_publishing_components/components/heading', {
+        text: t("call_for_evidence.detail_of_outcome"),
+        margin_bottom: 4,
+      } %>
       <div class="call-for-evidence-outcome-detail">
         <%= render 'govuk_publishing_components/components/govspeak', {
           direction: page_text_direction,
@@ -61,7 +64,7 @@
         <header>
           <%= render 'govuk_publishing_components/components/heading', {
             heading_level: 2,
-            mobile_top_margin: true,
+            margin_bottom: 4,
             text: t("call_for_evidence.original_call_for_evidence"),
           } %>
         </header>
@@ -108,11 +111,13 @@
 
     <div class="call-for-evidence-description">
       <%= render 'govuk_publishing_components/components/heading', {
-        mobile_top_margin: true,
+        margin_bottom: 4,
         text: t("call_for_evidence.description"),
       } %>
 
-      <%= render 'govuk_publishing_components/components/govspeak', {} do %>
+      <%= render 'govuk_publishing_components/components/govspeak', {
+        margin_bottom: 8,
+      } do %>
         <%= raw(@content_item.govspeak_body[:content]) %>
       <% end %>
 
@@ -124,8 +129,10 @@
 
     <% if @content_item.ways_to_respond? %>
       <div id="ways-to-respond" class="call-for-evidence-ways-to-respond">
-        <%= render 'govuk_publishing_components/components/heading', text: t("call_for_evidence.ways_to_respond"), mobile_top_margin: true %>
-
+        <%= render 'govuk_publishing_components/components/heading', {
+          text: t("call_for_evidence.ways_to_respond"),
+          margin_bottom: 4,
+        } %>
         <%= render 'govuk_publishing_components/components/govspeak', {
           direction: page_text_direction,
         } do %>

From c96d79fbf6502704514c776fd0ad4c5ec1614043 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Fri, 20 Dec 2024 14:01:45 +0000
Subject: [PATCH 4/4] Stop using mobile_top_margin in publications

- headings have this unusual behaviour where the mobile top margin is much larger
- this is slightly odd and inconsistent behaviour, so we're removing this option from the heading component and applying custom spacing in these pages instead using existing component options
---
 app/views/content_items/publication.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/content_items/publication.html.erb b/app/views/content_items/publication.html.erb
index 8664712da..42b213e9d 100644
--- a/app/views/content_items/publication.html.erb
+++ b/app/views/content_items/publication.html.erb
@@ -52,7 +52,7 @@
         <section id="details">
           <%= render "govuk_publishing_components/components/heading", {
             text: t("publication.details"),
-            mobile_top_margin: true,
+            margin_bottom: 4
           } %>
 
           <%= render "govuk_publishing_components/components/govspeak", {