Add no deal notice

app/assets/stylesheets/components/_header-notice.scss

@@ -0,0 +1,32 @@
+.app-c-header-notice {
+  margin-bottom: govuk-spacing(8);
+}
+
+.app-c-header-notice__header {
+  background-color: govuk-colour("black");
+  padding: govuk-spacing(4);
+}
+
+.app-c-header-notice__title {
+  @extend %govuk-heading-m;
+  color: govuk-colour("white");
+  margin: 0;
+}
+
+.app-c-header-notice__content {
+  border: $govuk-border-width solid govuk-colour("black");
+  padding: govuk-spacing(4);
+}
+
+.app-c-header-notice__list {
+  margin-bottom: 0;
+}
+
+.app-c-header-notice__link-intro {
+  margin-bottom: govuk-spacing(1);
+}
+
+.app-c-header-notice__link {
+  @extend %govuk-link;
+  font-weight: bold;
+}

app/presenters/content_item/no_deal_notice.rb

@@ -0,0 +1,55 @@
+module ContentItem
+  module NoDealNotice
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::UrlHelper
+    include ActionView::Context
+
+    def has_no_deal_notice?
+      no_deal_notice.present?
+    end
+
+    def no_deal_notice_component
+      if has_no_deal_notice?
+        {
+          title: no_deal_notice_title,
+          description: no_deal_notice_description,
+          link_intro: no_deal_notice_link_intro,
+          links: no_deal_links,
+        }
+      end
+    end
+
+  private
+
+    def no_deal_notice
+      content_item.dig("details", "brexit_no_deal_notice")
+    end
+
+    def no_deal_notice_title
+      "The UK is leaving the EU"
+    end
+
+    def no_deal_notice_description
+      "This page tells you what you will need to do from January 2021. <a class='govuk-link' href='/email-signup?topic=%2Ftransition'>Sign up for email alerts</a> to find out when it is updated.".html_safe
+    end
+
+    def no_deal_notice_link_intro
+      "For current information, read: "
+    end
+
+    def no_deal_links
+      no_deal_notice.map do |link|
+        {
+          title: link["title"],
+          href: link["href"],
+          data_attributes: {
+            "module": "track-click",
+            "track-category": "no_deal_notice",
+            "track-action": link["href"],
+            "track-label": link["title"],
+          },
+        }
+      end
+    end
+  end
+end

app/presenters/content_item_presenter.rb

@@ -1,5 +1,6 @@
 class ContentItemPresenter
   include ContentItem::Withdrawable
+  include ContentItem::NoDealNotice
   include ApplicationHelper
 
   attr_reader :content_item,

app/views/components/_header-notice.html.erb

@@ -0,0 +1,30 @@
+<%
+  title ||= false
+  description ||= false
+  link_intro ||= false
+  links ||= []
+%>
+<% if title && description %>
+  <section class="app-c-header-notice" aria-label="notice" role="region">
+    <div class="app-c-header-notice__header">
+      <h2 class="app-c-header-notice__title"><%= title %></h2>
+    </div>
+
+    <div class="app-c-header-notice__content">
+      <p class="govuk-body"><%= description %></p>
+      <% if links.count == 1 %>
+        <p class="govuk-body">
+          <% 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") %>
+        </p>
+      <% else %>
+        <% if link_intro %><p class="govuk-body app-c-header-notice__link-intro"><%= link_intro %></p><% end %>
+        <ul class="app-c-header-notice__list govuk-list">
+          <% links.each do |link| %>
+            <li><%= link_to(link[:title], link[:href], data: link[:data_attributes], class: "app-c-header-notice__link") %></li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+  </section>
+<% end %>

app/views/components/docs/header-notice.yml

@@ -0,0 +1,24 @@
+name: Header Notice
+description: A bolder style of notice
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      title: "This is an important notice"
+      description: "Here is a message about this notice"
+      link_intro: "Look at these links: "
+      links:
+        - title: "This is a link"
+          href: "/this-is-a-link"
+  multiple_links:
+    data:
+      title: "This is an important notice"
+      description: "Here is a message about this notice"
+      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"
+

app/views/content_items/case_study.html.erb

@@ -16,6 +16,7 @@
 
 <%= render 'shared/publisher_metadata_with_logo' %>
 <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
+<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds content-bottom-margin">

app/views/content_items/detailed_guide.html.erb

@@ -17,6 +17,7 @@
 <%= render 'shared/publisher_metadata_with_logo' %>
 <%= render 'shared/history_notice', content_item: @content_item %>
 <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
+<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/views/content_items/document_collection.html.erb

@@ -15,6 +15,7 @@
   <div class="govuk-grid-column-two-thirds">
     <%= render 'govuk_publishing_components/components/lead_paragraph', text: @content_item.description %>
     <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
+    <%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
     <%= render 'shared/history_notice', content_item: @content_item %>
   </div>
 </div>

app/views/content_items/html_publication.html.erb

@@ -35,6 +35,7 @@
 <% end %>
 
 <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
+<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
 
 <div
   class="govuk-grid-row sidebar-with-body"

app/views/content_items/publication.html.erb

@@ -21,7 +21,9 @@
 
 <%= render 'shared/publisher_metadata_with_logo' %>
 <%= render 'shared/history_notice', content_item: @content_item %>
+
 <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
+<%= render 'components/header-notice', @content_item.no_deal_notice_component unless @content_item.withdrawal_notice_component %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds responsive-bottom-margin">

test/components/header_notice_test.rb

@@ -0,0 +1,49 @@
+require "component_test_helper"
+
+class HeaderNoticeTest < ComponentTestCase
+  def component_name
+    "header-notice"
+  end
+
+  test "doesn't render a header notice when no params are given" do
+    assert_empty render_component({})
+  end
+
+  test "doesn't render a header notice when no title is given" do
+    assert_empty render_component(links: [{ title: "test", href: "/test" }], description: "description")
+  end
+
+  test "doesn't render a header notice when no description is given" do
+    assert_empty render_component(links: [{ title: "test", href: "/test" }], title: "title")
+  end
+
+  test "renders a header notice with text correctly" do
+    render_component(title: "This is an important notice", description: "This is some important information about the content.")
+
+    assert_select ".app-c-header-notice__title", text: "This is an important notice"
+    assert_select ".app-c-header-notice__content p", text: "This is some important information about the content."
+  end
+
+  test "renders a header notice with an aria label" do
+    render_component(title: "This is an important notice", description: "This is some important information about the content.")
+    assert_select "section[aria-label=notice]"
+  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" }])
+
+    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[href='/test']", text: "test"
+  end
+
+  test "renders a header notice with multiple links" do
+    render_component(title: "This is an important notice", description: "This is a description", link_intro: "Look at these links: ", links: [{ title: "test", href: "/test" }, { title: "test2", href: "/test2" }])
+
+    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", text: "Look at these links:"
+    assert_select ".app-c-header-notice__list .app-c-header-notice__link[href='/test']", text: "test"
+    assert_select ".app-c-header-notice__list .app-c-header-notice__link[href='/test2']", text: "test2"
+  end
+end