govuk_publishing_components 24.12.0 → 24.13.4

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -31,6 +31,16 @@
   &:hover,
   &:active {
     background-color: govuk-colour("light-grey", $legacy: "grey-4");
+
+    // Add govuk-link hover decoration to title if no label present
+    .gem-c-pagination__link-text--decorated {
+      @include govuk-link-decoration;
+    }
+
+    .gem-c-pagination__link-label,
+    .gem-c-pagination__link-text--decorated {
+      @include govuk-link-hover-decoration;
+    }
   }
 
   &:focus {
@@ -73,8 +83,8 @@
 .gem-c-pagination__link-label {
   display: inline-block;
   margin-top: .1em;
-  text-decoration: underline;
   margin-left: govuk-spacing(5);
+  @include govuk-link-decoration;
 
   @include govuk-media-query($from: tablet) {
     margin-left: govuk-spacing(6);

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -20,6 +20,7 @@ $gem-c-print-link-background-height: 18px;
   background: image-url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
   background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
   padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
+  text-decoration: none;
 
   @include govuk-device-pixel-ratio($ratio: 2) {
     background-image: image-url("govuk_publishing_components/icon-print-2x.png");
@@ -32,7 +33,6 @@ $gem-c-print-link-background-height: 18px;
 
 .gem-c-print-link__link {
   box-shadow: inset 0 0 0 1px $govuk-border-colour;
-  text-decoration: none;
 
   &:focus {
     border: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -22,7 +22,6 @@ $share-button-height: 32px;
 .gem-c-share-links__link {
   @include govuk-font(16, $weight: bold);
   margin-right: govuk-spacing(6);
-  text-decoration: none;
 
   @include govuk-template-link-focus-override;
 }

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

@@ -49,6 +49,7 @@
 
   &:hover {
     color: $govuk-link-hover-colour;
+    @include govuk-link-hover-decoration;
   }
 
   &:focus {

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

@@ -116,7 +116,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   padding: 0 0 govuk-spacing(1);
 
   &:hover .gem-c-step-nav__button-text {
-    text-decoration: underline;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
   }
 
   .gem-c-step-nav--large & {
@@ -125,6 +126,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
   &:focus {
     @include step-nav-chevron-focus-state;
+
+    .gem-c-step-nav__button-text {
+      text-decoration: none;
+    }
   }
 }
 
@@ -338,7 +343,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     }
 
     .gem-c-step-nav__button-text {
-      text-decoration: underline;
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -45,7 +45,6 @@
 
 .gem-c-subscription-links__item {
   display: inline-block;
-  text-decoration: none;
   background-repeat: no-repeat;
   background-position: 0 20%;
 
@@ -55,6 +54,7 @@
 }
 
 .gem-c-subscription-links__item--button {
+  cursor: pointer;
   display: none;
   font-size: inherit;
   font-weight: inherit;
@@ -71,6 +71,10 @@
     color: $govuk-link-colour;
   }
 
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
   &:visited,
   &:active,
   &:focus {
@@ -106,7 +110,7 @@
 }
 
 .gem-c-subscription-links__icon {
-  margin-right: .1em;
+  margin-right: govuk-spacing(1);
   color: govuk-colour("black");
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -75,6 +75,7 @@
   // Links
 
   a {
+    @include govuk-link-common;
     @include govuk-link-style-default;
 
     &:focus {

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

@@ -32,6 +32,7 @@
 
   link_classes = %w(govuk-link gem-c-action-link__link)
   link_classes << shared_helper.classes if classes
+  link_classes << "govuk-link--inverse" if light_text
 %>
 <% if text.present? %>
   <div class="<%= css_classes.join(' ') %>">
@@ -55,7 +56,7 @@
         <span class="gem-c-action-link__subtext-wrapper">
           <% if subtext_href %>
             <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") do %>
-              <%= link_to subtext, subtext_href, class: "gem-c-action-link__subtext-link govuk-link", data: data %>
+              <%= link_to subtext, subtext_href, class: link_classes, data: data %>
             <% end %>
           <% else %>
             <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>

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

@@ -1,12 +1,19 @@
 <%-
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
+  underline_links ||= false
   aria_label ||= t("components.contents_list.contents")
   format_numbers ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
-  classes = cl_helper.classes
+  classes = %w[gem-c-contents-list]
   classes << brand_helper.brand_class
+  link_classes = %w[
+    gem-c-contents-list__link
+    govuk-link
+  ]
+  link_classes << brand_helper.color_class
+  link_classes << "govuk-link--no-underline" unless underline_links
 -%>
 <% if cl_helper.contents.any? %>
   <%= content_tag(
@@ -31,7 +38,7 @@
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text] %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
-            class: "gem-c-contents-list__link govuk-link #{brand_helper.color_class}",
+            class:  link_classes,
             data: {
               track_category: 'contentsClicked',
               track_action: "content_item #{position}",
@@ -47,7 +54,7 @@
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],
-                    class: "gem-c-contents-list__link govuk-link #{brand_helper.color_class}",
+                    class: link_classes,
                     data: {
                       track_category: 'contentsClicked',
                       track_action: "nested_content_item #{position}:#{nested_position}",

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

@@ -25,6 +25,6 @@
   <% end %>
 
   <% if navigation.show_brexit_cta? || navigation.show_brexit_related_links? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
   <% end %>
 </div>

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

@@ -5,37 +5,79 @@
 <nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation" aria-label="Departments and policy navigation">
   <ul id="proposition-links">
     <li>
-      <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
+      <a class="<%= 'active' if active == 'departments' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="departmentsLink"
+         data-track-label="/government/organisations"
+         data-track-dimension="<%= t("components.government_navigation.departments") %>"
+         data-track-dimension-index="29"
+         href="/government/organisations">
         <%= t("components.government_navigation.departments") %>
       </a>
     </li>
     <li>
-      <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
+      <a class="<%= 'active' if active == 'worldwide' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="worldwideLink"
+         data-track-label="/world"
+         data-track-dimension="<%= t("components.government_navigation.worldwide") %>"
+         data-track-dimension-index="29"
+         href="/world">
         <%= t("components.government_navigation.worldwide") %>
       </a>
     </li>
     <li>
-      <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
+      <a class="<%= 'active' if active == 'how-government-works' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="governmentactivityLink"
+         data-track-label="/government/how-government-works"
+         data-track-dimension="<%= t("components.government_navigation.how-government-works") %>"
+         data-track-dimension-index="29"
+         href="/government/how-government-works">
         <%= t("components.government_navigation.how-government-works") %>
       </a>
     </li>
     <li>
-      <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
+      <a class="<%= 'active' if active == 'get-involved' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="governmentactivityLink"
+         data-track-label="/government/get-involved"
+         data-track-dimension="<%= t("components.government_navigation.get-involved") %>"
+         data-track-dimension-index="29"
+         href="/government/get-involved">
         <%= t("components.government_navigation.get-involved") %>
       </a>
     </li>
     <li class="clear-child">
-      <a class="<%= 'active' if active == 'consultations' %>" href="<%= CGI::escapeHTML('/search/policy-papers-and-consultations?content_store_document_type[]=open_consultations&content_store_document_type[]=closed_consultations') %>">
+      <a class="<%= 'active' if active == 'consultations' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="governmentactivityLink"
+         data-track-label="/government/get-involved"
+         data-track-dimension="<%= t("components.government_navigation.consultations") %>"
+         data-track-dimension-index="29"
+         href="<%= CGI::escapeHTML('/search/policy-papers-and-consultations?content_store_document_type[]=open_consultations&content_store_document_type[]=closed_consultations') %>">
         <%= t("components.government_navigation.consultations") %>
       </a>
     </li>
     <li>
-      <a class="<%= 'active' if active == 'statistics' %>" href="/search/research-and-statistics">
+      <a class="<%= 'active' if active == 'statistics' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="governmentactivityLink"
+         data-track-label="/government/research-and-statistics"
+         data-track-dimension="<%= t("components.government_navigation.statistics") %>"
+         data-track-dimension-index="29"
+      href="/search/research-and-statistics">
         <%= t("components.government_navigation.statistics") %>
       </a>
     </li>
     <li>
-      <a class="<%= 'active' if active == 'announcements' %>" href="/news-and-communications">
+      <a class="<%= 'active' if active == 'announcements' %> govuk-link govuk-link--no-underline govuk-link--inverse"
+         data-track-category="headerClicked"
+         data-track-action="governmentactivityLink"
+         data-track-label="/search/news-and-communications"
+         data-track-dimension="<%= t("components.government_navigation.news_and_communications") %>"
+         data-track-dimension-index="29"
+         href="/search/news-and-communications">
         <%= t("components.government_navigation.news_and_communications") %>
       </a>
     </li>

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

@@ -10,6 +10,19 @@
   font_size ||= card_helper.large ? 'm' : 's'
   heading_class = %w[gem-c-image-card__title]
   heading_class << shared_helper.get_heading_size(font_size, 's')
+
+  heading_link_classes = %w[
+    gem-c-image-card__title-link
+    govuk-link
+    govuk-link--no-underline
+  ] 
+  heading_link_classes << brand_helper.color_class
+  extra_link_classes = %w[
+    gem-c-image-card__list-item-link
+    govuk-link
+  ]
+  extra_link_classes << brand_helper.color_class
+
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -21,7 +34,7 @@
           <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
             <% if card_helper.href %>
               <%= link_to card_helper.heading_text, card_helper.href,
-                class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
+                class: heading_link_classes,
                 data: card_helper.href_data_attributes
               %>
             <% else %>
@@ -37,7 +50,7 @@
           <% card_helper.extra_links.each do |link| %>
             <li class="gem-c-image-card__list-item">
               <%= link_to link[:text], link[:href],
-                class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
+                class: extra_link_classes,
                 data: link[:data_attributes]
               %>
             </li>

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

@@ -4,6 +4,7 @@
   global_bar ||= nil
   html_lang ||= "en"
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  logo_link ||= "/"
   navigation_items ||= []
   omit_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
@@ -71,6 +72,7 @@
     <% unless omit_header %>
       <%= render "govuk_publishing_components/components/layout_header", {
         search: show_search,
+        logo_link: logo_link,
         navigation_items: navigation_items,
 
         # The (blue) bottom border needs to be underneath the emergency banner -

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

@@ -8,6 +8,7 @@
   search ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
+  logo_link ||= "/"
 
   header_classes = %w[gem-c-layout-header govuk-header]
   header_classes << "gem-c-layout-header--#{environment}" if environment
@@ -20,7 +21,11 @@
     <% if search_left %>
       <div class="govuk-grid-row">
         <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+            environment: environment,
+            logo_link: logo_link,
+            product_name: product_name,
+          } %>
         </div>
       </div>
       <div class="govuk-grid-row">
@@ -36,7 +41,11 @@
     <% else %>
       <div class="govuk-grid-row">
         <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+            environment: environment,
+            logo_link: logo_link,
+            product_name: product_name,
+          } %>
         </div>
         <% if navigation_items.any? %>
           <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">

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

@@ -6,16 +6,13 @@
   heading_level ||= false
   inline ||= false
 
-  # Check if `heading_level` is a number; if so, check if it's an appropriate
-  # number.
-  use_heading = heading_level.is_a?(Integer) ?
-                  (heading_level >= 1 && heading_level <= 6) :
-                  false
+  # Check if `heading_level` is an appropriate number:
+  use_heading = [*1..6].include?(heading_level)
 
-  # Set the wrapping element to be a heading or a `div`
-  wrapping_element = use_heading ? "h#{heading_level}" : "div"
+  # Set the wrapping element to be a heading or a `div`:
+  wrapping_element = (use_heading ? "h#{heading_level}" : "div").to_sym
 
-  wrapper_classes = %w(gem-c-organisation-logo)
+  wrapper_classes = %w[gem-c-organisation-logo]
   wrapper_classes << brand_helper.brand_class
 
   container_classes = [
@@ -24,10 +21,13 @@
   ]
   container_classes << "gem-c-organisation-logo__container--inline" if inline
 %>
-<<%= wrapping_element %>
-  class="<%= wrapper_classes.join(" ") %>"
-  <%= "data-module=gem-track-click" if organisation[:data_attributes] %>
->
+
+<%= content_tag(wrapping_element, {
+    class: wrapper_classes,
+    data: {
+      module: ("gem-track-click" if organisation[:data_attributes])
+    }
+  }) do %>
   <% if organisation[:url] %>
     <%= link_to organisation[:url],
       class: container_classes.join(" "),
@@ -39,4 +39,4 @@
       <%= logo_helper.logo_content %>
     </div>
   <% end %>
-</<%= wrapping_element %>>
+<% end %>

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

@@ -6,6 +6,10 @@
 >
   <ul class="gem-c-pagination__list" data-module="gem-track-click">
     <% if local_assigns.include?(:previous_page) %>
+      <%
+        link_text_classes = %w[gem-c-pagination__link-text]
+        link_text_classes << "gem-c-pagination__link-text--decorated" unless previous_page[:label].present?
+      %>
       <li class="gem-c-pagination__item gem-c-pagination__item--previous">
         <a href="<%= previous_page[:url] %>"
           class="govuk-link gem-c-pagination__link"
@@ -20,9 +24,7 @@
             <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
               <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
             </svg>
-            <span class="gem-c-pagination__link-text">
-              <%= previous_page[:title] %>
-            </span>
+            <%= tag.span(previous_page[:title], class: link_text_classes) %>
           </span>
           <% if previous_page[:label].present? %>
             <span class="gem-c-pagination__link-divider visually-hidden">:</span>
@@ -32,6 +34,10 @@
       </li>
     <% end %>
     <% if local_assigns.include?(:next_page) %>
+      <%
+        link_text_classes = %w[gem-c-pagination__link-text]
+        link_text_classes << "gem-c-pagination__link-text--decorated" unless next_page[:label].present?
+      %>
       <li class="gem-c-pagination__item gem-c-pagination__item--next">
         <a href="<%= next_page[:url] %>"
           class="govuk-link gem-c-pagination__link"
@@ -46,9 +52,7 @@
             <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
               <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
             </svg>
-            <span class="gem-c-pagination__link-text">
-              <%= next_page[:title] %>
-            </span>
+            <%= tag.span(next_page[:title], class: link_text_classes) %>
           </span>
           <% if next_page[:label].present? %>
             <span class="gem-c-pagination__link-divider visually-hidden">:</span>