diff --git a/app/assets/stylesheets/components/_header-notice.scss b/app/assets/stylesheets/components/_header-notice.scss index 61c8a6e55..aa47791d9 100644 --- a/app/assets/stylesheets/components/_header-notice.scss +++ b/app/assets/stylesheets/components/_header-notice.scss @@ -18,12 +18,21 @@ padding: govuk-spacing(4); } +.app-c-header-notice__text { + margin-bottom: govuk-spacing(2); +} + +.app-c-header-notice__links { + margin-bottom: govuk-spacing(2); +} + .app-c-header-notice__list { + margin-top: -5px; margin-bottom: 0; } .app-c-header-notice__link-intro { - margin-bottom: govuk-spacing(1); + margin-bottom: govuk-spacing(2); } .app-c-header-notice__link { diff --git a/app/presenters/content_item/no_deal_notice.rb b/app/presenters/content_item/no_deal_notice.rb index a06d70f01..e3beca5b1 100644 --- a/app/presenters/content_item/no_deal_notice.rb +++ b/app/presenters/content_item/no_deal_notice.rb @@ -5,7 +5,7 @@ module NoDealNotice include ActionView::Context def has_no_deal_notice? - no_deal_notice.present? + content_item.dig("details").has_key?("brexit_no_deal_notice") end def no_deal_notice_component @@ -15,13 +15,14 @@ def no_deal_notice_component description: no_deal_notice_description, link_intro: no_deal_notice_link_intro, links: no_deal_links, + featured_link: no_deal_landing_page_cta, } end end private - def no_deal_notice + def no_deal_notice_links content_item.dig("details", "brexit_no_deal_notice") end @@ -30,15 +31,29 @@ def no_deal_notice_title end def no_deal_notice_description - "This page tells you what you will need to do from January 2021. Sign up for email alerts to find out when it is updated.".html_safe + "This page tells you what you'll need to do from 1 January 2021. It'll be updated if anything changes. " end def no_deal_notice_link_intro "For current information, read: " end + def no_deal_landing_page_cta + data_attributes = { + "module": "track-click", + "track-category": "no_deal_notice", + "track-action": "/transition", + "track-label": "the transition period", + } + + featured_link = link_to("the transition period", "/transition", data: data_attributes, class: "govuk-link") + featured_link_intro = no_deal_notice_links.any? ? "You can also read about" : "You can read about" + + (featured_link_intro + " " + featured_link + ".").html_safe + end + def no_deal_links - no_deal_notice.map do |link| + no_deal_notice_links.map do |link| { title: link["title"], href: link["href"], diff --git a/app/views/components/_header-notice.html.erb b/app/views/components/_header-notice.html.erb index d77da2fcf..3b5c2a62c 100644 --- a/app/views/components/_header-notice.html.erb +++ b/app/views/components/_header-notice.html.erb @@ -3,6 +3,7 @@ description ||= false link_intro ||= false links ||= [] + featured_link ||= false %> <% if title && description %>
@@ -11,19 +12,27 @@
-

<%= description %>

- <% if links.count == 1 %> -

- <% if link_intro %><%= link_intro %><% end %> - <%= link_to(links[0][:title], links[0][:href], data: links[0][:data_attributes], class: "app-c-header-notice__link") %> -

- <% else %> - <% if link_intro %><% end %> - +
+ <% end %> + + <% if featured_link %> +

<%= featured_link %>

<% end %>
diff --git a/app/views/components/docs/header-notice.yml b/app/views/components/docs/header-notice.yml index b013d7de9..853b999e1 100644 --- a/app/views/components/docs/header-notice.yml +++ b/app/views/components/docs/header-notice.yml @@ -7,6 +7,7 @@ examples: data: title: "This is an important notice" description: "Here is a message about this notice" + featured_link: "You can also read about the transition period" link_intro: "Look at these links: " links: - title: "This is a link" @@ -15,10 +16,19 @@ examples: data: title: "This is an important notice" description: "Here is a message about this notice" + featured_link: "You can also read about the transition period" link_intro: "Look at these links: " links: - title: "This is a link" href: "/this-is-a-link" - title: "This is a second link" href: "/this-is-a-link" + without_links: + description: The link intro does not render if there are no links, even if it has been provided + data: + title: "This is an important notice" + description: "Here is a message about this notice" + link_intro: "Look at these links: " + featured_link: "You can also read about the transition period" + diff --git a/test/components/header_notice_test.rb b/test/components/header_notice_test.rb index e82daec3f..93a0309eb 100644 --- a/test/components/header_notice_test.rb +++ b/test/components/header_notice_test.rb @@ -29,6 +29,14 @@ def component_name assert_select "section[aria-label=notice]" end + test "renders a header notice with no link" do + render_component(title: "This is an important notice", description: "This is a description", link_intro: "This should not be shown", links: []) + + assert_select ".app-c-header-notice__title", text: "This is an important notice" + assert_select ".app-c-header-notice__content p", text: "This is a description" + assert_select ".app-c-header-notice__link-intro", false, "A link intro shouldn't be shown when no links are provided" + end + test "renders a header notice with one link" do render_component(title: "This is an important notice", description: "This is a description", links: [{ title: "test", href: "/test" }])