From f080c25df5bb810f59583aaa14481c91d7bdca4b Mon Sep 17 00:00:00 2001 From: Andy Sellick 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 %>

<% end %> -
"> +<%= tag.section(**component_helper.all_attributes) do %> <%= content_block %> <% if aside %>

<%= aside %>

<% end %> -
+<% 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 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 @@
<%= 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, + } %>
<%= 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"), } %>
@@ -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"), } %> @@ -136,7 +139,7 @@
<%= 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? %>
- <%= 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 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, + } %>
<%= render 'govuk_publishing_components/components/govspeak', { direction: page_text_direction, @@ -61,7 +64,7 @@
<%= 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"), } %>
@@ -108,11 +111,13 @@
<%= 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? %>
- <%= 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 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 @@
<%= render "govuk_publishing_components/components/heading", { text: t("publication.details"), - mobile_top_margin: true, + margin_bottom: 4 } %> <%= render "govuk_publishing_components/components/govspeak", {