-<% end %>
-<%= tag.section(**component_helper.all_attributes) do %>
- <%= content_block %>
- <% if aside %>
-
<%= aside %>
+<% if title.present? && text.present? %>
+ <%= tag.section(**component_helper.all_attributes) do %>
+
<%= title %>
+
+ <%= text %>
+
+ <% if secondary_text %>
+
<%= secondary_text %>
+ <% end %>
<% end %>
<% end %>
diff --git a/app/views/components/docs/banner.yml b/app/views/components/docs/banner.yml
index e97e7834c..09cfb96af 100644
--- a/app/views/components/docs/banner.yml
+++ b/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: to '
+ 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 to
+
\ No newline at end of file
diff --git a/app/views/content_items/call_for_evidence.html.erb b/app/views/content_items/call_for_evidence.html.erb
index bc440941b..042bbeb1f 100644
--- a/app/views/content_items/call_for_evidence.html.erb
+++ b/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? %>
-
<%= t("consultation.another_website_html", closed: @content_item.closed? ? t("consultation.was") : t("consultation.is_being"), url: @content_item.held_on_another_website_url) %>.
@@ -127,7 +127,7 @@
<% end %>
<% end %>
<%= render 'components/banner', {
- aside: consultation_date,
+ secondary_text: consultation_date,
text: consultation_desc,
title: t("consultation.summary"),
} %>
diff --git a/test/components/banner_test.rb b/test/components/banner_test.rb
index 5e848b078..cf3f15255 100644
--- a/test/components/banner_test.rb
+++ b/test/components/banner_test.rb
@@ -5,17 +5,20 @@ 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
@@ -23,36 +26,26 @@ def component_name
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 to ",
)
- 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 to "
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