govuk_publishing_components 24.12.0 → 24.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9bf26b097c1773c4126687d518e698357b3c57425cc63f3b55788ed58e211019
-  data.tar.gz: 8a016b8a8d05b0805600eb6770fd401e8af63a8086bc077ed1cdc9c2816a64f2
+  metadata.gz: 1a7412745cae4dbe87f20efe5c2b982af372122cae8564c4f7279f17ea16f82a
+  data.tar.gz: 8f52c319afd75c6744c17b39719624bdda2888908d481291fc7fe34e51fb604d
 SHA512:
-  metadata.gz: e32f62161f041f1614788acb40837ac1d535a90721de924bd1d86ce8e4abff8be1051fe10742042347fcb22982f45b35cba12e8f8eb2f3e07690cd57c5f78644
-  data.tar.gz: 57329b331cd9939c9f00c08b216c30b8b7ae1349ba1a2aa881ff488b14a49c795a7fcf2dc287243aa80f50159899bdfa1e9aa69677a39f3fe46cc8144ae2f91f
+  metadata.gz: ee916cc182125dc67fab048c61b9647434141a8a28832015d1d2f2159cf329506375fe136e8f46b8989a00f8c7f7ae7c7fabeec0e6195eae9b6eb0c9114ea644
+  data.tar.gz: a0bdb49b4a265e2054a05121d0d1f6c0cf0c79d5aaa3c0d0d390e90712b9935cd484cbe3cb0cc62ab2b5c2ac43ce9784b24ea4475791e32ed6b9aa2d322b6e34

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -1,6 +1,9 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
+// feature flag for accessible link styles
+$govuk-new-link-styles: true;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -40,6 +40,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-font($size: 16);
     @include govuk-link-common;
     @include govuk-link-style-default;
+
     // Remove default button focus outline in Firefox
     &::-moz-focus-inner {
       padding: 0;
@@ -47,21 +48,6 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__open-all:hover,
-  .gem-c-accordion__open-all-text:hover {
-    text-decoration: underline;
-    color: $govuk-link-colour;
-  }
-
-  // Focus state, also to change chervon icon to black
-  .gem-c-accordion__open-all:focus {
-    .gem-c-accordion__open-all-text,
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
-  }
-
   // Create Chervon icon align with text
   .gem-c-accordion-nav__chevron {
     vertical-align: text-top;
@@ -73,6 +59,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     margin-left: govuk-em(5, 14);
     border: govuk-em(1, 14) solid;
     border-radius: govuk-em(100, 14);
+
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
       width: govuk-em(20, 16);
@@ -94,6 +81,7 @@ $gem-c-accordion-bottom-border-width: 1px;
       transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
+
       @include govuk-media-query($from: tablet) {
         width: govuk-em(6, 16);
         height: govuk-em(6, 16);
@@ -105,6 +93,22 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
+  .gem-c-accordion__open-all:hover,
+  .gem-c-accordion__section-button:hover {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-link-hover-colour;
+      text-decoration: none;
+    }
+  }
+
+  // Focus state, also to change chervon icon to black
+  .gem-c-accordion__open-all:focus {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+    }
+  }
+
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
     transform: rotate(180deg);
@@ -150,6 +154,10 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-typography-common;
     width: 100%;
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
     &:active {
       z-index: 1;
       color: $govuk-link-active-colour;
@@ -163,26 +171,12 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__section-button:hover {
-    color: $govuk-link-colour;
-    // On hover, add underline to toggle link
-    .gem-c-accordion__toggle-text {
-      text-decoration: underline;
-      color: $govuk-link-colour;
-    }
-  }
-
   .gem-c-accordion__section-button:focus {
     @include govuk-focused-text;
     // Overwrite focus border to top
     box-shadow: 0 0, 0 -4px;
     border-top: 1px solid transparent;
 
-    // Focus state to change the toggle link within individual sections
-    .gem-c-accordion__toggle-text {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
     // Focus state to change chervon icon colour within individual sections
     .gem-c-accordion-nav__chevron {
       color: $govuk-text-colour;
@@ -225,10 +219,24 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: govuk-em(40, 16);
     display: inline-block;
+    // Setting width of the text so the icon doesn't shift left or right when
+    // toggled:
+    min-width: govuk-em(40, 16);
+  }
+
+  // On hover add underline to toggle link only:
+  .gem-c-accordion__section-button:hover .gem-c-accordion__toggle-text {
+    color: $govuk-link-hover-colour;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
+  }
+
+  // Ensure the correct focus sstate text colour and no underline:
+  .gem-c-accordion__section-button:focus .gem-c-accordion__toggle-text {
+    color: $govuk-focus-text-colour;
+    text-decoration: none;
   }
 
   .gem-c-accordion__open-all-text {
@@ -237,6 +245,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     text-align: left;
   }
 
+  .gem-c-accordion__open-all:hover {
+    .gem-c-accordion__open-all-text {
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
+    }
+  }
+
+  .gem-c-accordion__open-all:focus .gem-c-accordion__open-all-text {
+    text-decoration: none;
+  }
+
   // Change the summary subheading size.
   .gem-c-accordion__section-summary {
     @include govuk-responsive-margin(1, "top");

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

@@ -32,10 +32,6 @@
 .gem-c-action-link__link {
   color: inherit;
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
     color: $govuk-focus-text-colour;
@@ -106,10 +102,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--simple-light {
@@ -122,10 +114,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--dark-icon {
@@ -150,10 +138,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--transparent-icon {
@@ -177,25 +161,6 @@
 .gem-c-action-link--light-text {
   color: govuk-colour("white");
 
-  .gem-c-action-link__link,
-  .gem-c-action-link__subtext-link {
-    text-decoration: underline;
-
-    &:link,
-    &:visited {
-      color: govuk-colour("white");
-    }
-
-    &:hover {
-      color: $gem-hover-dark-background;
-    }
-
-    &:focus {
-      text-decoration: none;
-      color: $govuk-focus-text-colour;
-    }
-  }
-
   .gem-c-action-link__subtext {
     &:before {
       border-color: govuk-colour("white");

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -25,19 +25,6 @@
   list-style-type: none;
 }
 
-.gem-c-contents-list--no-underline {
-  .gem-c-contents-list__link {
-    text-decoration: none;
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
-    }
-
-    @include govuk-template-link-focus-override;
-  }
-}
-
 .gem-c-contents-list__link {
   .gem-c-contents-list__list-item--parent > & {
     font-weight: bold;

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -63,12 +63,6 @@
 }
 
 .gem-c-image-card__title-link {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -7,10 +7,6 @@
   box-sizing: border-box;
 }
 
-.gem-c-inverse-header a {
-  color: govuk-colour("white");
-}
-
 .gem-c-inverse-header .gem-c-inverse-header__supplement,
 .gem-c-inverse-header .publication-header__last-changed {
   // This publication-header class is injected on publication pages, really

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -1,12 +1,14 @@
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
   font-size: 13px;
-  line-height: (15 / 13);
   font-weight: 400;
+  line-height: 1.35;
+  // When this is a heading the margin needs to be set to stop it from
+  // inheriting the browser's default margin:
+  margin: 0;
 
   @include govuk-media-query($from: tablet) {
     font-size: 18px;
-    line-height: 20px;
   }
 }
 
@@ -62,7 +64,12 @@
   font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
   &:hover {
-    text-decoration: underline;
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: govuk-colour("black");
+    @include govuk-link-hover-decoration;
   }
 
   &:focus {

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/_government_navigation.html.erb

@@ -5,37 +5,37 @@
 <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" 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" href="/government/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" 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" 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" 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" 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" href="/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/_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>

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

@@ -52,7 +52,7 @@
               'track-action': link[:icon],
               'track-options': track_options
             },
-            class: "govuk-link gem-c-share-links__link #{brand_helper.color_class}" do %>
+            class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">

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

@@ -32,11 +32,11 @@
       <% 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 %>
+            <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: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link govuk-link--no-underline 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
           } %>
@@ -46,17 +46,17 @@
       <% 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 %>
+            <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: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            class: "govuk-link govuk-link--no-underline 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: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+              class: "govuk-link govuk-link--no-underline 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 %>

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

@@ -2,6 +2,8 @@ name: Government navigation
 description: Navigation placed in the header by Slimmer and used by pages which sit
   under the /government path. This is a markup only component and is not available
   for preview here. It can be passed a string to mark a link as being active.
+body: | 
+  Please note: because the markup on this component is currently tied to styles that aren't present in the components gem, they will appear "broken". This is because they are intended to be used in the [header component](/component-guide/layout_header/with_left_search_and_navigation) as white links against a black background. You can see a styled example of this component in use on the ['Counter-Fraud Standards and Profession' page](https://www.gov.uk/government/groups/counter-fraud-standards-and-profession).
 accessibility_criteria: |
   The government navigation component must:
 

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

@@ -15,6 +15,6 @@ examples:
     data:
       block: |
         <div>
-          <h2 id='heading'>To publish this step by step you need to</h2>
-          <a href='/foo'>Check for broken links</a>
+          <h2 class="govuk-heading-m" id='heading'>To publish this step by step you need to</h2>
+          <a class="govuk-link" href='/foo'>Check for broken links</a>
         </div>

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

@@ -3,6 +3,8 @@ description: A wrapper to contain header content in white text
 body: |
   This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overriden where unwanted. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.
 
+  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
+
 accessibility_criteria: |
   The component must:
 
@@ -16,7 +18,7 @@ examples:
     data:
       block: |
         <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text ">
+          <h1 class="gem-c-title__text govuk-heading-l">
             Education, Training and Skills
           </h1>
         </div>
@@ -26,7 +28,7 @@ examples:
       full_width: true
       block: |
         <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text ">
+          <h1 class="gem-c-title__text govuk-heading-l">
             Education, Training and Skills
           </h1>
         </div>
@@ -35,8 +37,8 @@ examples:
     data:
       block: |
         <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
-          <p class="gem-c-title__context">Notice</p>
-          <h1 class="gem-c-title__text">
+          <p class="gem-c-title__context govuk-caption-m">Notice</p>
+          <h1 class="gem-c-title__text govuk-heading-l">
             LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
           </h1>
         </div>
@@ -45,21 +47,22 @@ examples:
     data:
       padding_top: false
       block: |
-        <div class="gem-c-breadcrumbs " data-module="gem-track-click">
-          <ol>
-            <li class="">
-                <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="gem-c-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>
+        <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
+          <ol class="govuk-breadcrumbs__list">
+            <li class="govuk-breadcrumbs__list-item">
+              <a href="/section" class="govuk-breadcrumbs__link">Section</a>
             </li>
-            <li class="">
-                <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="gem-c-breadcrumbs--inverse gem-c-breadcrumbs--current " aria-current="page" href="#content">Education of disadvantaged children</a>
+            <li class="govuk-breadcrumbs__list-item">
+              <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
             </li>
           </ol>
         </div>
-        <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text ">
-            Education, Training and Skills
-          </h1>
-        </div>
         <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
           Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
         </p>
+  with_link:
+    data:
+      block: |
+        <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
+          Schools and academies, further and higher education, apprenticeships and <a href="#other-skills" class="govuk-link govuk-link--inverse">other skills</a> training, student funding, early years.
+        </p>

data/lib/govuk_publishing_components/presenters/content_item.rb

@@ -26,11 +26,9 @@ module GovukPublishingComponents
       end
 
       def parent_taxons
-        @parent_taxons ||= begin
-          taxon_links
+        @parent_taxons ||= taxon_links
             .select { |t| phase_is_live?(t) }
             .map { |taxon| ContentItem.new(taxon) }.sort_by(&:title)
-        end
       end
 
       def phase_is_live?(taxon)

data/lib/govuk_publishing_components/presenters/contents_list_helper.rb

@@ -11,9 +11,6 @@ module GovukPublishingComponents
         @contents = options[:contents] || []
         @nested = @contents.any? { |c| c[:items] && c[:items].any? }
         @format_numbers = options[:format_numbers]
-
-        @classes = %w[gem-c-contents-list]
-        @classes << " gem-c-contents-list--no-underline" unless options[:underline_links]
       end
 
       def list_item_classes(list_item, nested)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.12.0".freeze
+  VERSION = "24.13.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.12.0
+  version: 24.13.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-06-01 00:00:00.000000000 Z
+date: 2021-06-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -272,16 +272,16 @@ dependencies:
   name: rubocop-govuk
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 4.0.0.pre.1
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 4.0.0.pre.1
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sassc-rails
   requirement: !ruby/object:Gem::Requirement