Merge pull request #3538 from alphagov/update-banner-component

Update banner component to reflect current usage

app/assets/stylesheets/components/_banner.scss

@@ -4,12 +4,12 @@
   direction: ltr;
   background: $govuk-brand-colour;
   color: govuk-colour("white");
-  padding: govuk-spacing(3);
+  padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(3);
   clear: both;
   @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(4) govuk-spacing(6);
+    padding: govuk-spacing(7) govuk-spacing(6) govuk-spacing(5);
   }
 
   a {
@@ -18,24 +18,17 @@
   }
 }
 
-.app-c-banner--aside {
-  @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(6);
-  }
-}
-
-.app-c-banner__text {
-  @include govuk-font(24);
-}
-
 .app-c-banner__title {
-  margin-bottom: govuk-spacing(2);
+  margin-bottom: govuk-spacing(6);
+  color: govuk-colour("white");
   @include govuk-font(27, $weight: bold);
 }
 
-.app-c-banner__desc {
+.app-c-banner__text {
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
-  padding-top: govuk-spacing(2);
+  padding: 0;
+  margin-bottom: govuk-spacing(4);
+
   @include govuk-font(19);
 }

app/views/components/_banner.html.erb

@@ -2,30 +2,26 @@
   add_app_component_stylesheet("banner")
 
   title ||= false
-  aside ||= false
-  large_text = !title && !aside
+  text ||= false
+  secondary_text ||= false
   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 %>
-    <h2 class="app-c-banner__title"><%= title %></h2>
-  <% end %>
-  <p class="app-c-banner__<% if large_text %>text<% else %>desc<% end %>">
-    <%= text %>
-  </p>
-<% end %>
-<%= tag.section(**component_helper.all_attributes) do %>
-  <%= content_block %>
-  <% if aside %>
-    <p class="app-c-banner__desc"><%= aside %></p>
+<% if title.present? && text.present? %>
+  <%= tag.section(**component_helper.all_attributes) do %>
+    <h2 class="app-c-banner__title govuk-heading-m"><%= title %></h2>
+    <p class="app-c-banner__text">
+      <%= text %>
+    </p>
+    <% if secondary_text %>
+      <p class="app-c-banner__text"><%= secondary_text %></p>
+    <% end %>
   <% end %>
 <% end %>

app/views/components/docs/banner.yml

@@ -1,9 +1,12 @@
 name: Banner
-description: A page banner, designed to highlight important information
+description: A page banner that is currently used on consultations and calls for evidence to display a summary or other important information. 
 body: |
-  Passing an aside to the banner will mean the banner renders in a grid layout.
+  This component requires title and text attribute values passed to it, otherwise it will not render. This reflects how the component is currently used. If the component needed to become more flexible and work for other use cases, we should consider moving it to the gem.
 
-  Real world example: [Consultation with history banner](/government/consultations/child-trust-fund-consultation-on-allowing-the-transfer-of-savings-from-a-child-trust-fund-to-a-junior-isa)
+  Real world examples: 
+
+  - [consultation](/government/consultations/environmental-assessment-levels-for-the-amine-based-carbon-capture-process)
+  - [call for evidence](/government/calls-for-evidence/financial-services-growth-and-competitiveness-strategy)
 accessibility_criteria: |
   The banner must:
 
@@ -14,21 +17,12 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
-      text: 'Text in a banner'
-  history_banner:
-    data:
-      text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government'
-  banner_with_title:
-    data:
-      title: 'Summary'
-      text: 'We are seeking external users’ views on a series of options for either reducing the scope of the annual Defence Inflation Estimates publication or ceasing it completely.'
-  banner_with_aside:
-    data:
-      title: 'Title'
-      text: 'Text'
-      aside: 'Aside'
-  consultation:
+      title: Summary
+      text: This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.
+  with_secondary_text:
+    description: This example shows how the consultation and call for evidence templates use the secondary text to display dates.
     data:
-      title: 'Summary'
-      text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government'
-      aside: 'This consultation ran from: <span class="consultation-date"><time datetime="2017-06-13T09:30:00.000+01:00">9:30am on 13 June 2017</time> to <time datetime="2017-07-11T23:45:00.000+01:00">11:45pm on 11 July 2017</time></span>'
+      title: Summary
+      text: This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.
+      secondary_text: This consultation ran from<br><strong class="consultation-date"><time datetime="2024-11-05T11:00:00.000+00:00">11am on 5 November 2024</time> to
+        <time datetime="2024-12-03T17:00:00.000+00:00">5pm on 3 December 2024</time></strong>

app/views/content_items/call_for_evidence.html.erb

@@ -88,7 +88,7 @@
     <% call_for_evidence_desc = capture do %>
       <%= @content_item.description %>
       <% if @content_item.held_on_another_website? %>
-        <p class="govuk-!-margin-top-2">
+        <p class="app-c-banner__text">
           <strong>
             <% if @content_item.closed? %>
               <%= t("call_for_evidence.another_website_html", closed: t("call_for_evidence.was"), url: @content_item.held_on_another_website_url) %>.
@@ -100,7 +100,7 @@
       <% end %>
     <% end %>
     <%= render 'components/banner', {
-      aside: call_for_evidence_date,
+      secondary_text: call_for_evidence_date,
       text: call_for_evidence_desc,
       title: t("call_for_evidence.summary"),
     } %>

app/views/content_items/consultation.html.erb

@@ -119,15 +119,15 @@
     <% consultation_desc = capture do %>
       <%= @content_item.description %>
       <% if @content_item.held_on_another_website? %>
-        <p class="govuk-!-margin-top-2">
+        <p class="app-c-banner__text">
           <strong>
             <%= t("consultation.another_website_html", closed: @content_item.closed? ? t("consultation.was") : t("consultation.is_being"), url: @content_item.held_on_another_website_url) %>.
           </strong>
         </p>
       <% end %>
     <% end %>
     <%= render 'components/banner', {
-      aside: consultation_date,
+      secondary_text: consultation_date,
       text: consultation_desc,
       title: t("consultation.summary"),
     } %>

test/components/banner_test.rb

@@ -5,54 +5,47 @@ def component_name
     "banner"
   end
 
-  test "fails to render a banner when no text is given" do
-    assert_raise do
-      render_component({})
-    end
+  test "fails to render a banner when nothing is passed to it" do
+    assert_empty render_component({})
   end
 
-  test "renders a banner with text correctly" do
-    render_component(title: "Summary", text: "This was published under the 2010 to 2015 Conservative government")
+  test "fails to render a banner when no title or no text is passed to it" do
+    assert_empty render_component(title: "Summary")
+    assert_empty render_component(text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.")
+  end
+
+  test "renders a banner with title and text correctly" do
+    render_component(title: "Summary", text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.")
 
-    assert_select ".app-c-banner--aside", false
-    assert_select ".app-c-banner__desc", text: "This was published under the 2010 to 2015 Conservative government"
+    assert_select ".app-c-banner__title", text: "Summary"
+    assert_select ".app-c-banner__text", text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy."
   end
 
   test "renders a banner with an aria label" do
     render_component(title: "Summary", text: "Text")
     assert_select "section[aria-label]"
   end
 
-  test "renders a banner with title and text correctly" do
-    render_component(title: "Summary", text: "This was published under the 2010 to 2015 Conservative government")
-
-    assert_select ".app-c-banner--aside", false
-    assert_select ".app-c-banner__title", text: "Summary"
-    assert_select ".app-c-banner__desc", text: "This was published under the 2010 to 2015 Conservative government"
-  end
-
-  test "renders a banner with title, text and aside correctly" do
+  test "renders a banner with title, text and secondary text correctly" do
     render_component(
       title: "Summary",
-      text: "This was published under the 2010 to 2015 Conservative government",
-      aside: "This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017",
+      text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.",
+      secondary_text: "This consultation ran from<br><strong class='consultation-date'><time datetime='2024-11-05T11:00:00.000+00:00'>11am on 5 November 2024</time> to <time datetime='2024-12-03T17:00:00.000+00:00'>5pm on 3 December 2024</time></strong>",
     )
 
-    assert_select ".app-c-banner--aside"
     assert_select ".app-c-banner__title", text: "Summary"
-    assert_select ".app-c-banner__desc", text: "This was published under the 2010 to 2015 Conservative government"
-    assert_select ".app-c-banner__desc", text: "This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017"
+    assert_select ".app-c-banner__text", text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy."
+    assert_select ".app-c-banner__text", text: "This consultation ran from<br><strong class='consultation-date'><time datetime='2024-11-05T11:00:00.000+00:00'>11am on 5 November 2024</time> to <time datetime='2024-12-03T17:00:00.000+00:00'>5pm on 3 December 2024</time></strong>"
   end
 
   test "renders a banner with GA4 tracking" do
     render_component(
       title: "Summary",
-      text: "This was published under the 2010 to 2015 Conservative government",
-      aside: "This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017",
+      text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.",
     )
 
-    assert_select ".app-c-banner--aside[data-module=ga4-link-tracker]"
-    assert_select ".app-c-banner--aside[data-ga4-track-links-only]"
-    assert_select ".app-c-banner--aside[data-ga4-link='{\"event_name\":\"navigation\",\"type\":\"callout\"}']"
+    assert_select ".app-c-banner[data-module=ga4-link-tracker]"
+    assert_select ".app-c-banner[data-ga4-track-links-only]"
+    assert_select ".app-c-banner[data-ga4-link='{\"event_name\":\"navigation\",\"type\":\"callout\"}']"
   end
 end