Add new content and featured link

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

@@ -18,20 +18,21 @@
   padding: govuk-spacing(4);
 }
 
-.app-c-header-notice__description {
-  margin-bottom: 0;
+.app-c-header-notice__text {
+  margin-bottom: govuk-spacing(2);
 }
 
 .app-c-header-notice__links {
-  margin-top: govuk-spacing(2);
+  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 {

app/presenters/content_item/no_deal_notice.rb

@@ -15,6 +15,7 @@ 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
@@ -30,13 +31,27 @@ def no_deal_notice_title
     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
+      "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_links.map do |link|
         {

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

@@ -3,6 +3,7 @@
   description ||= false
   link_intro ||= false
   links ||= []
+  featured_link ||= false
 %>
 <% if title && description %>
   <section class="app-c-header-notice" aria-label="notice" role="region">
@@ -11,7 +12,7 @@
     </div>
 
     <div class="app-c-header-notice__content">
-      <p class="app-c-header-notice__description govuk-body"><%= description %></p>
+      <p class="app-c-header-notice__text govuk-body"><%= description %></p>
       <% if links.any? %>
         <div class="app-c-header-notice__links">
           <% if links.count == 1 %>
@@ -29,6 +30,10 @@
           <% end %>
         </div>
       <% end %>
+
+      <% if featured_link %>
+        <p class="app-c-header-notice__text govuk-body"><%= featured_link %></p>
+      <% end %>
     </div>
   </section>
 <% end %>

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 <a class='govuk-link' href='/transition'>the transition period</a>"
       link_intro: "Look at these links: "
       links:
         - title: "This is a link"
@@ -15,6 +16,7 @@ examples:
     data:
       title: "This is an important notice"
       description: "Here is a message about this notice"
+      featured_link: "You can also read about <a class='govuk-link' href='/transition'>the transition period</a>"
       link_intro: "Look at these links: "
       links:
         - title: "This is a link"
@@ -27,5 +29,6 @@ examples:
       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 <a class='govuk-link' href='/transition'>the transition period</a>"