Merge pull request #1845 from alphagov/replace-countdown-component

Replace countdown component with sidebar partial
alphagov · Dec 31, 2020 · ca1fe91 · ca1fe91
2 parents e16a2b7 + 19e6225
commit ca1fe91
Show file tree

Hide file tree

Showing 17 changed files with 91 additions and 221 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unversioned
+
+* Replace transition countdown component with sidebar partial (PR [#1845](https://github.com/alphagov/govuk_publishing_components/pull/1845))
+
 ## 23.10.2
 
 * Fix Rails deprecation warning for autoloading during initialisation ([PR #1837](https://github.com/alphagov/govuk_publishing_components/pull/1837))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss
@@ -1,11 +1,51 @@
-@import 'transition-countdown';
+$transition-campaign-red: #ff003b;
+$transition-campaign-dark-blue: #1e1348;
 
-.gem-c-contextual-sidebar__brexit-cta {
+.gem-c-contextual-sidebar__brexit-related-links {
   border-top: 2px solid $govuk-brand-colour;
+
+  .gem-c-contextual-sidebar__brexit-heading {
+    @include govuk-font(19, $weight: bold);
+    padding-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-contextual-sidebar__brexit-cta {
+  @include govuk-font(19);
+  margin-bottom: govuk-spacing(6);
+  background-color: govuk-colour('light-grey', $legacy: 'grey-4');
+  border-top: 4px solid $transition-campaign-red;
+  display: block;
+  padding: govuk-spacing(3);
+  text-decoration: none;
+
+  .gem-c-contextual-sidebar__brexit-heading {
+    @extend %govuk-heading-m;
+    color: $transition-campaign-dark-blue;
+  }
+
+  .gem-c-contextual-sidebar__brexit-text {
+    @extend %govuk-link;
+
+    margin-top: 0;
+    margin-bottom: 0;
+    text-decoration: underline;
+
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: govuk-spacing(2);
+    }
+  }
+
+  @include govuk-compatibility(govuk_template) {
+    .gem-c-contextual-sidebar__brexit-title {
+      margin-bottom: govuk-spacing(3);
+    }
+  }
 }
 
-.gem-c-contextual-sidebar__brexit-heading {
-  @include govuk-font(19, $weight: bold);
-  padding-top: govuk-spacing(3);
-  margin-bottom: govuk-spacing(2);
+.gem-c-contextual-sidebar__brexit-cta:focus {
+  .gem-c-contextual-sidebar__brexit-text {
+    text-decoration: none;
+  }
 }
diff --git a/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb b/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb
@@ -2,23 +2,10 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
 
 <div class="gem-c-contextual-sidebar">
-  <% if navigation.show_brexit_cta? && navigation.step_by_step_count.zero? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
+  <% if navigation.show_brexit_related_links? && navigation.step_by_step_count.zero? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_related_links' %>
   <% elsif navigation.step_by_step_count.zero? && !navigation.transition_countdown_exception? %>
-    <%= render 'govuk_publishing_components/components/transition_countdown', {
-      title: t("components.related_navigation.transition.title"),
-      url: t("components.related_navigation.transition.link_path"),
-      text: t("components.related_navigation.transition.link_text"),
-      data_attributes: {
-        "module": "track-click",
-        "track-category": "relatedLinkClicked",
-        "track-action": "1.0 Transition",
-        "track-label": t("components.related_navigation.transition.link_path"),
-        "track-dimension": t("components.related_navigation.transition.link_text"),
-        "track-dimension-index": "29",
-      },
-      lang: shared_helper.t_locale("components.related_navigation.transition.title"),
-    } %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
   <% end %>
 
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
@@ -43,7 +30,7 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_cta? && navigation.step_by_step_count > 0 %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
+  <% if navigation.show_brexit_related_links? && navigation.step_by_step_count > 0 %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_related_links' %>
   <% end %>
 </div>
diff --git a/app/views/govuk_publishing_components/components/_transition_countdown.html.erb b/app/views/govuk_publishing_components/components/_transition_countdown.html.erb
diff --git a/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb b/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb
@@ -1,6 +1,20 @@
+<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
 <% link_text = t("components.related_navigation.transition.link_text") %>
 <% link_path = t("components.related_navigation.transition.link_path") %>
-<div class="gem-c-contextual-sidebar__brexit-cta govuk-!-margin-bottom-6" data-module="track-click" lang="en">
+
+<% data_attributes = {
+  "module": "track-click",
+  "track-category": "relatedLinkClicked",
+  "track-action": "1.0 Transition",
+  "track-label": link_path,
+  "track-dimension": link_text,
+  "track-dimension-index": "29",
+} %>
+
+<%= link_to link_path,
+    class: "govuk-link gem-c-contextual-sidebar__brexit-cta",
+    data: data_attributes,
+    lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
   <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
-  <a href="<%= link_path %>" class="govuk-link" data-track-category="relatedLinkClicked" data-track-action="1.0 Transition" data-track-label="<%= link_path %>" data-track-options='{"dimension29":"<%= link_text %>"}'><%= link_text %></a>
-</div>
+  <p class="gem-c-contextual-sidebar__brexit-text"><%= link_text %></p>
+<% end %>
diff --git a/.../govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb b/.../govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb
@@ -0,0 +1,6 @@
+<% link_text = t("components.related_navigation.transition.link_text") %>
+<% link_path = t("components.related_navigation.transition.link_path") %>
+<div class="gem-c-contextual-sidebar__brexit-related-links govuk-!-margin-bottom-6" data-module="track-click" lang="en">
+  <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
+  <a href="<%= link_path %>" class="govuk-link" data-track-category="relatedLinkClicked" data-track-action="1.0 Transition" data-track-label="<%= link_path %>" data-track-options='{"dimension29":"<%= link_text %>"}'><%= link_text %></a>
+</div>
diff --git a/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml b/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml
@@ -81,7 +81,7 @@ examples:
                       - text: The Highway Code
                         href: "/guidance/the-highway-code"
                     optional: false
-  with_brexit_cta_and_related_links:
+  with_brexit_and_other_related_links:
     data:
       content_item:
         title: "A content item"
@@ -108,7 +108,7 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
-  with_brexit_cta_and_step_by_steps:
+  with_brexit_related_links_and_step_by_steps:
     data:
       content_item:
         title: "A content item"

diff --git a/app/views/govuk_publishing_components/components/docs/transition_countdown.yml b/app/views/govuk_publishing_components/components/docs/transition_countdown.yml
diff --git a/config/locales/cy.yml b/config/locales/cy.yml
@@ -10,9 +10,6 @@ cy:
       contents: Cynnwys
     related_navigation:
       transition:
-        title: "Pontio Brexit"
+        title: "Brexit"
         link_path: "/transition.cy"
-        link_text: "Gwiriwch eich bod chi'n barod ar gyfer 2021"
-    transition_countdown:
-      day_to_go: "diwrnod i fynd"
-      days_to_go: "diwrnod i fynd"
+        link_text: "Darganfyddwch sut mae’r rheolau newydd yn effeithio arnoch chi"
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -77,9 +77,9 @@ en:
       topical_events: "Topical event"
       world_locations: "World locations"
       transition:
-        title: "Brexit transition"
+        title: "Brexit"
         link_path: "/transition"
-        link_text: "Check you’re ready for 2021"
+        link_text: "Check how the new rules affect you"
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"
@@ -103,6 +103,3 @@ en:
     summary_list:
       edit: "Change"
       delete: "Delete"
-    transition_countdown:
-      day_to_go: "day to go"
-      days_to_go: "days to go"
diff --git a/lib/govuk_publishing_components.rb b/lib/govuk_publishing_components.rb
@@ -34,7 +34,6 @@
 require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
 require "govuk_publishing_components/app_helpers/table_helper"
 require "govuk_publishing_components/app_helpers/brand_helper"
-require "govuk_publishing_components/app_helpers/countdown_helper"
 require "govuk_publishing_components/app_helpers/environment"
 
 # Add i18n paths and views for usage outside of a Rails app

diff --git a/lib/govuk_publishing_components/app_helpers/countdown_helper.rb b/lib/govuk_publishing_components/app_helpers/countdown_helper.rb
diff --git a/lib/govuk_publishing_components/presenters/contextual_navigation.rb b/lib/govuk_publishing_components/presenters/contextual_navigation.rb
@@ -104,7 +104,7 @@ def tagged_to_brexit?
         false
       end
 
-      def show_brexit_cta?
+      def show_brexit_related_links?
         # If tagged directly to /brexit or /world/brexit
         # Or if tagged to a taxon which has /brexit as a parent
         # And is not the brexit checker start page

diff --git a/spec/component_guide/component_index_spec.rb b/spec/component_guide/component_index_spec.rb
@@ -71,8 +71,8 @@
 @import 'govuk_publishing_components/components/step-by-step-nav-header';
 @import 'govuk_publishing_components/components/step-by-step-nav-related';
 @import 'govuk_publishing_components/components/tabs';
-@import 'govuk_publishing_components/components/title';
-@import 'govuk_publishing_components/components/transition-countdown';"
+@import 'govuk_publishing_components/components/title';"
+
     expected_print_sass = "@import 'govuk_publishing_components/govuk_frontend_support';
 @import 'govuk_publishing_components/components/print/back-link';
 @import 'govuk_publishing_components/components/print/button';

diff --git a/spec/components/transition_countdown_spec.rb b/spec/components/transition_countdown_spec.rb
diff --git a/spec/features/contextual_navigation_spec.rb b/spec/features/contextual_navigation_spec.rb
@@ -547,22 +547,21 @@ def and_i_see_the_transition_contextual_breadcrumbs
 
   def and_i_see_the_transition_related_links
     within ".gem-c-contextual-sidebar" do
-      expect(page).to have_css("h2", text: "Brexit transition")
+      expect(page).to have_css("h2", text: I18n.t("components.related_navigation.transition.title"))
       expect(page).to have_link(I18n.t("components.related_navigation.transition.link_text"), href: "/transition")
     end
   end
 
   def and_i_see_the_transition_call_to_action
     within ".gem-c-contextual-sidebar" do
-      expect(page).to have_selector(".gem-c-transition-countdown")
-      expect(page).to have_css(".gem-c-transition-countdown__title", text: I18n.t("components.related_navigation.transition.title"))
+      expect(page).to have_selector(".gem-c-contextual-sidebar__brexit-cta")
+      expect(page).to have_css(".gem-c-contextual-sidebar__brexit-heading", text: I18n.t("components.related_navigation.transition.title"))
     end
   end
 
   def and_i_do_not_see_the_transition_call_to_action
     within ".gem-c-contextual-sidebar" do
-      expect(page).not_to have_selector(".gem-c-transition-countdown")
-      expect(page).not_to have_css(".gem-c-transition-countdown__title", text: I18n.t("components.related_navigation.transition.title"))
+      expect(page).not_to have_selector(".gem-c-contextual-sidebar__brexit-cta")
     end
   end