Merge pull request #3489 from alphagov/reconfigure-headings

Stop using mobile_top_margin with heading component

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) {

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 %>

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:

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| %>

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 %>

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 %>

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", {