govuk_publishing_components 23.12.1 → 23.14.0

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -4,6 +4,11 @@
   border-top: govuk-spacing(2) solid govuk-colour("blue");
 }
 
+.govuk-footer__list-item {
+  display: inline-block;
+  width: 99%;
+}
+
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -14,6 +14,10 @@
     &:focus {
       z-index: 1;
     }
+
+    &::-ms-reveal {
+      display: none;
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -56,7 +56,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__controls {
   padding: 3px 3px 0 0;
-  text-align: right;
 }
 
 .gem-c-step-nav__button {
@@ -93,14 +92,27 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   @include step-nav-font(14, $line-height: 1);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
-  padding: .5em 0;
-  text-decoration: underline;
+  padding: .5em 0 1.5em;
+
+  &:hover {
+    text-decoration: underline;
+  }
 
   .gem-c-step-nav--large & {
     @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
   }
 }
 
+.gem-c-step-nav__title-text {
+  display: block;
+  margin-bottom: govuk-spacing(1);
+}
+
+.gem-c-step-nav__chevron {
+  vertical-align: text-top;
+  margin-right: govuk-spacing(1);
+}
+
 .gem-c-step-nav__steps {
   padding: 0;
   margin: 0;
@@ -181,7 +193,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   box-sizing: border-box;
   position: absolute;
   z-index: 5;
-  top: govuk-spacing(3);
+  top: govuk-spacing(1);
   left: 0;
   width: $number-circle-size;
   height: $number-circle-size;
@@ -192,7 +204,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      top: govuk-spacing(6);
+      top: govuk-spacing(3);
       width: $number-circle-size-large;
       height: $number-circle-size-large;
     }
@@ -240,7 +252,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__header {
-  padding: govuk-spacing(3) 0;
+  padding: govuk-spacing(1) 0 govuk-spacing(3);
   border-top: $top-border;
 
   .gem-c-step-nav--active & {
@@ -270,7 +282,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding: govuk-spacing(6) 0;
+      padding: govuk-spacing(2) 0 govuk-spacing(6);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -270,15 +270,26 @@
     text-align: left;
   }
 
-  .mc-toggle-link {
-    display: block;
-    margin-top: 30px;
+  .mc-toggle-button {
+    @extend %govuk-body-s;
+    border: 1px solid $govuk-border-colour;
+    color: $govuk-link-colour;
+    cursor: pointer;
+    margin: govuk-spacing(0);
+    padding: govuk-spacing(2);
+    background-color: govuk-colour("white");
+
+    &:focus {
+      @include govuk-focused-text;
+      background-color: $govuk-focus-colour;
+      border-color: transparent;
+    }
   }
 
   // Hides the original table
-  .visually-hidden,
-  .visually-hidden caption {
-    @include govuk-visually-hidden;
+  .mc-hidden,
+  .mc-hidden caption {
+    display: none;
 
     // It's reapplied to captions because Firefox can't hide
     // table captions unless it's applied directly to it. Go figure.

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -72,4 +72,9 @@
       list-style: none;
     }
   }
+
+  .mc-toggle-button,
+  .mc-chart-container {
+    display: none;
+  }
 }

data/app/views/govuk_publishing_components/components/_button.html.erb

@@ -1,4 +1,5 @@
 <%
+  # button_helper.css_classes generates "gem-c-button"
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   local_assigns[:classes] = shared_helper.classes
   button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns)

data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb

@@ -2,12 +2,6 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
 
 <div class="gem-c-contextual-sidebar">
-  <% 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/contextual_sidebar/brexit_cta' %>
-  <% end %>
-
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
     <%# Rendering step by step related items because there are a few but not too many of them %>
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links %>
@@ -30,7 +24,7 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_related_links? && navigation.step_by_step_count > 0 %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_related_links' %>
+  <% if navigation.show_brexit_cta? || navigation.show_brexit_related_links? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
   <% end %>
 </div>

data/app/views/govuk_publishing_components/components/_document_list.html.erb

@@ -50,7 +50,7 @@
         <% end %>
 
         <% if item[:link][:description] %>
-          <p class="gem-c-document-list__item-description" ><%= item[:link][:description] %></p>
+          <p class="gem-c-document-list__item-description <%= "gem-c-document-list__item-description--full-size" if item[:link][:full_size_description] %>"><%= item[:link][:description] %></p>
         <% end %>
 
         <% if item[:metadata] %>

data/app/views/govuk_publishing_components/components/_layout_footer.html.erb

@@ -2,8 +2,10 @@
   meta ||= []
   navigation ||= []
   with_border ||= false
+  classes = %w(gem-c-layout-footer govuk-footer)
+  classes << "gem-c-layout-footer--border" if with_border
 %>
-<footer class="gem-c-layout-footer govuk-footer <%= "gem-c-layout-footer--border" if with_border %> role="contentinfo">
+<%= tag.footer class: classes, role: "contentinfo" do %>
   <div class="govuk-width-container ">
     <% if navigation.any? %>
       <div class="govuk-footer__navigation">
@@ -80,4 +82,4 @@
       </div>
     </div>
   </div>
-</footer>
+<% end %>

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -5,6 +5,7 @@
   search ||= false
   search_left ||= false
   navigation_items ||= []
+  navigation_aria_label ||= "Top level"
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
@@ -28,7 +29,7 @@
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
         <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
       </div>
     <% else %>
@@ -37,7 +38,7 @@
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
         <div class="govuk-header__content gem-c-header__content">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">

data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb

@@ -24,8 +24,8 @@
     <%= "data-id=#{tracking_id}" if tracking_id %>
     data-show-text="<%= t("govuk_component.step_by_step_nav.show", default: "show") %>"
     data-hide-text="<%= t("govuk_component.step_by_step_nav.hide", default: "hide") %>"
-    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all") %>"
-    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all") %>"
+    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all steps") %>"
+    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all steps") %>"
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _subscription_links.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 

data/app/views/govuk_publishing_components/components/_subscription_links.html.erb

@@ -0,0 +1,82 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+
+  sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  local_assigns[:margin_bottom] ||= 0
+  local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
+
+  css_classes = %w( gem-c-subscription-links )
+  css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
+  css_classes << brand_helper.brand_class
+  css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
+
+  data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
+
+  hide_heading ||= false
+
+  email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale].presence
+  feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
+%>
+<% if sl_helper.component_data_is_valid? %>
+  <%= tag.section class: css_classes, data: data do %>
+    <% unless hide_heading %>
+      <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
+    <% end %>
+    <ul
+      class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
+      <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
+    >
+      <% if sl_helper.email_signup_link.present? %>
+        <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>" >
+          <% email_link_text = capture do %>
+           <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15.75" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M19.687 0H1.312C.589 0 0 .587 0 1.313v13.124c0 .726.588 1.313 1.313 1.313h18.374c.725 0 1.313-.587 1.313-1.313V1.313C21 .587 20.412 0 19.687 0zm-2.625 2.625L10.5 7.875l-6.563-5.25h13.126zm1.313 10.5H2.625V3.937L10.5 10.5l7.875-6.563v9.188z"/></svg>
+           <%= sl_helper.email_signup_link_text %>
+          <% end %>
+          <%= link_to email_link_text, sl_helper.email_signup_link, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            data: sl_helper.email_signup_link_data_attributes,
+            lang: email_signup_link_text_locale
+          } %>
+        </li>
+      <% end %>
+
+      <% if sl_helper.feed_link_box_value || sl_helper.feed_link %>
+        <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>">
+          <% feed_link_text = capture do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/></svg>
+           <%= sl_helper.feed_link_text %>
+          <% end %>
+          <%= tag.button feed_link_text, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            data: sl_helper.feed_link_data_attributes,
+            lang: feed_link_text_locale
+          } if sl_helper.feed_link_box_value %>
+          <%= link_to feed_link_text, sl_helper.feed_link,
+            {
+              class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+              data: sl_helper.feed_link_data_attributes,
+              lang: feed_link_text_locale
+            } unless sl_helper.feed_link_box_value %>
+        </li>
+      <% end %>
+    </ul>
+
+    <% if sl_helper.feed_link_box_value %>
+      <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
+        <h3 class="gem-c-subscription-links__feed-hidden-description visuallyhidden govuk-!-margin-top-0"><%= sl_helper.feed_link_text %></h3>
+        <div lang="en">
+          <%= render "govuk_publishing_components/components/input", {
+            label: {
+              text: "Copy and paste this URL into your feed reader"
+            },
+            name: "feed-reader-box",
+            value: feed_link_box_value
+          } %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_translation-nav.html.erb

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _translation_nav.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)

data/app/views/govuk_publishing_components/components/_translation_nav.html.erb

@@ -0,0 +1,30 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
+%>
+<% if translation_helper.has_translations? %>
+  <nav role="navigation"
+    class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
+    aria-label="<%= t("common.translations") %>"
+    <%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
+  >
+    <ul class="gem-c-translation-nav__list">
+      <% translation_helper.translations.each.with_index do |translation, i| %>
+        <li class="gem-c-translation-nav__list-item">
+          <% if translation[:active] %>
+            <span lang="<%= translation[:locale] %>"><%= translation[:text] %></span>
+          <% else %>
+            <%= link_to translation[:text], translation[:base_path],
+              hreflang: translation[:locale],
+              lang: translation[:locale],
+              rel: "alternate",
+              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
+              data: translation[:data_attributes]
+            %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+<% end %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -14,7 +14,28 @@
 <%= link_to link_path,
     class: "govuk-link gem-c-contextual-sidebar__brexit-cta",
     data: data_attributes,
+    aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
     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>
+  <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.red") %>
+      </span>
+    </li>
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-amber.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.amber") %>
+      </span>
+    </li>
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-green.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.green") %>
+      </span>
+    </li>
+  </ul>
   <p class="gem-c-contextual-sidebar__brexit-text"><%= link_text %></p>
 <% end %>

data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml

@@ -144,7 +144,33 @@ examples:
                       - text: Find out what you’ll get
                         href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
                     optional: false
-  transition_countdown_exception:
+  with_brexit_cta:
+    description: For documents tagged with certain taxons defined in `brexit_cta_taxon_allow_list` we show a custom Brexit call to action element.
+    data:
+      content_item:
+        title: "Transport news story"
+        content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+              title: "Transport"
+              phase: "live"
+  with_brexit_cta_document_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_document_type_exceptions`.
     data:
       content_item:
         title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
@@ -164,3 +190,36 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
+          taxons:
+            - content_id: "e2ca2f1a-0ff3-43ce-b813-16645ff27904"
+              title: "Society and culture"
+              phase: "live"
+  with_brexit_cta_taxon_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_taxon_exception_list`.
+    data:
+      content_item:
+        title: "Local transport news story"
+        content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "3b4d6319-fcef-4637-b35a-e3df76321894"
+              title: "Local transport"
+              phase: "live"
+              links:
+                parent_taxons:
+                  - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+                    title: "Transport"