govuk_publishing_components 43.4.1 → 44.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac704d6393454fd55a51395e672359ee86f2fbd731c4570bf8052f9444e14d73
-  data.tar.gz: ff7cfc46ec1fb8663116a6926bcd4323d87d8a20ba004f0683bcecabaa18488f
+  metadata.gz: f13f23ec1562e63350f590b579c1acecdc4da57c4fe96449c727abce1cd91002
+  data.tar.gz: a4e52c344237096f770b2867dd4a478bcf815be3cbbbeba01554984bd4d10e7e
 SHA512:
-  metadata.gz: bed10adab8a2ed2a3b571ee8b0290fc7380a2725aee1a04fe905d7799d46142455e14c7b4f7152a8bb3f6d521a273aa7de36f648036e89f20e302e0cd3093f38
-  data.tar.gz: 7dbcd83b8b7443f2906fb4bbfd9c8abe26a234d9bd3acd2c6d986625264f5bffcdf4d6ccadc9ed1c099e0f886863bfd3676ba562dee4b116139bc4ab37b3d7cf
+  metadata.gz: 63e41b4da0785b914d0fe04409e4aa45cca913c6cebdd41c411b59d7bf413e4c1d16970fcc397becb3d8fcb80c0b06a9c700565075630095216cef109ebd451d
+  data.tar.gz: 7358a4951fddd6e5dc43fc7c17aa87511024bbb518e8c57e69874a5dea1d4245f763454986029301f3d9f7c39f099277f922e3d666e7c38a77d074add9e4b93c

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -8,6 +8,5 @@
 //= link_directory ../javascripts/govuk_publishing_components
 
 // Pre-compile these specific files
-//= link govuk_publishing_components/vendor/modernizr.js
 //= link govuk_publishing_components/vendor/lux/lux-reporter.js
 //= link govuk_publishing_components/vendor/lux/lux-measurer.js

data/app/assets/javascripts/govuk_publishing_components/components/option-select.js

@@ -190,7 +190,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var element = document.createElement('div')
     element.setAttribute('class', 'gem-c-option-select__selected-counter js-selected-counter')
     element.innerHTML = checkedString
-    this.$optionSelect.querySelector('.js-container-button').insertAdjacentElement('afterend', element)
+    this.$optionSelect.querySelector('.js-container-toggle').insertAdjacentElement('afterend', element)
   }
 
   OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () {

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -336,7 +336,7 @@
     return str;
   }
 
-  var VERSION = "4.0.26";
+  var VERSION = "4.0.27";
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -564,7 +564,8 @@
   var updatedCustomData = {};
   function addCustomDataValue(name, value) {
     var typeV = typeof value;
-    if (customDataValues[name] !== value) {
+    var valueIsEmpty = typeV === "undefined" || value === null;
+    if (!valueIsEmpty && customDataValues[name] !== value) {
       // If the value is new or different to the previous value, record it so that later we can send
       // only the values that have changed.
       updatedCustomData[name] = value;
@@ -572,7 +573,7 @@
     if (typeV === "string" || typeV === "number" || typeV === "boolean") {
       customDataValues[name] = value;
     }
-    if (typeV === "undefined" || value === null) {
+    if (valueIsEmpty) {
       delete customDataValues[name];
     }
   }
@@ -681,25 +682,25 @@
         startTime: processTimeMetric(entry.startTime),
         elementSelector: getNodeSelector(source.node),
         elementType: source.node.nodeName,
-    }); })
-    : [];
-    if (sessionEntries.length &&
-      (entry.startTime - latestEntry.startTime >= 1000 ||
+      }); })
+      : [];
+      if (sessionEntries.length &&
+        (entry.startTime - latestEntry.startTime >= 1000 ||
         entry.startTime - firstEntry.startTime >= 5000)) {
-      sessionValue = entry.value;
-      sessionEntries = [entry];
-      sessionAttributions = sources;
-      largestEntry = entry;
-    }
-    else {
-      sessionValue += entry.value;
-      sessionEntries.push(entry);
-      sessionAttributions = sessionAttributions.concat(sources);
-      if (!largestEntry || entry.value > largestEntry.value) {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+        sessionAttributions = sources;
         largestEntry = entry;
       }
-    }
-    maximumSessionValue = max(maximumSessionValue, sessionValue);
+      else {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+        sessionAttributions = sessionAttributions.concat(sources);
+        if (!largestEntry || entry.value > largestEntry.value) {
+          largestEntry = entry;
+        }
+      }
+      maximumSessionValue = max(maximumSessionValue, sessionValue);
     }
   }
   function reset$2() {

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

@@ -169,7 +169,7 @@
   }
 }
 
-.gem-c-action-link--light-text {
+.gem-c-action-link--inverse {
   color: govuk-colour("white");
 
   .gem-c-action-link__subtext {
@@ -188,12 +188,5 @@
     &::before {
       display: none;
     }
-
-    .gem-c-action-link__link {
-      &::after {
-        display: block;
-        font-size: 12pt;
-      }
-    }
   }
 }

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

@@ -155,7 +155,6 @@
   }
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-cards__list {
     display: block;
@@ -174,23 +173,12 @@
   }
 
   .gem-c-cards__link {
-    &,
-    &:link,
-    &:link:visited {
-      color: $govuk-print-text-colour !important;
-    }
-
     &::before {
       display: none;
     }
 
     &::after {
       position: static;
-      display: block;
-      margin: 1mm auto;
-      font-size: 12pt !important;
-      color: $govuk-print-text-colour;
     }
   }
 }
-// stylelint-enable declaration-no-important

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

@@ -88,10 +88,4 @@
   .gem-c-contents-list__list-item--parent {
     list-style-type: none;
   }
-
-  .gem-c-contents-list__link {
-    &.govuk-link {
-      color: $govuk-print-text-colour;
-    }
-  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss

@@ -11,25 +11,17 @@
   }
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-devolved-nations {
     border: 2pt solid $govuk-print-text-colour;
     margin: 0 0 5mm;
 
     * {
-      color: $govuk-print-text-colour !important;
+      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
     }
 
     .govuk-list li {
       margin-bottom: 2mm;
     }
-
-    .govuk-link::after {
-      display: block;
-      margin: 1mm auto;
-      font-size: 12pt;
-    }
   }
 }
-// stylelint-enable declaration-no-important

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

@@ -35,6 +35,13 @@
   }
 }
 
+.gem-c-document-list--equal-item-spacing {
+  .gem-c-document-list__item {
+    margin-top: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+  }
+}
+
 .gem-c-document-list__item-title--context {
   margin-right: govuk-spacing(2);
 
@@ -162,21 +169,16 @@
   }
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-document-list__item {
     break-inside: avoid;
-  }
 
-  .gem-c-document-list__item-title {
-    .govuk-link {
-      color: $govuk-print-text-colour !important;
+    * {
+      color: $govuk-print-text-colour;
     }
+  }
 
-    .govuk-link::after {
-      display: block;
-      margin: 1mm auto;
-    }
+  .gem-c-document-list__item-context {
+    display: block;
   }
 }
-// stylelint-enable declaration-no-important

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

@@ -355,13 +355,8 @@
   }
 
   .gem-c-image-card__title-link {
-    color: $govuk-print-text-colour !important;
-
     &::after {
-      display: block;
       position: static;
-      margin-top: 2mm;
-      font-size: 12pt !important;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss

@@ -1,25 +1,8 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/inset-text/inset-text";
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-inset-text {
     break-inside: avoid;
   }
-
-  .gem-c-inset-text .govuk-link {
-    &,
-    &:link,
-    &:link:visited {
-      color: $govuk-print-text-colour !important;
-    }
-
-    &::after {
-      display: block;
-      margin: 1mm auto;
-      font-size: 12pt !important;
-      color: $govuk-print-text-colour;
-    }
-  }
 }
-// stylelint-enable declaration-no-important

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

@@ -22,7 +22,6 @@
   margin-bottom: -2px;
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-intervention {
     break-inside: avoid;
@@ -33,20 +32,4 @@
       margin: 0;
     }
   }
-
-  .gem-c-intervention .govuk-link {
-    &,
-    &:link,
-    &:link:visited {
-      color: $govuk-print-text-colour !important;
-    }
-
-    &::after {
-      display: block;
-      margin: 1mm auto;
-      font-size: 12pt !important;
-      color: $govuk-print-text-colour;
-    }
-  }
 }
-// stylelint-enable declaration-no-important

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -76,11 +76,10 @@
 
 .gem-c-option-select__icon {
   display: none;
-  position: absolute;
-  top: 0;
-  left: 9px;
+  flex-shrink: 0;
   width: 30px;
   height: 40px;
+  margin-inline: 10px 4px;
   fill: govuk-colour("black");
 }
 
@@ -126,8 +125,14 @@
 .govuk-frontend-supported {
   .gem-c-option-select__heading {
     position: relative;
-    padding: 10px 8px 5px 43px;
-    margin: 0;
+    margin: 0 0 govuk-spacing(1);
+  }
+
+  .gem-c-option-select__toggle {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    align-items: center;
   }
 
   [aria-expanded="true"] ~ .gem-c-option-select__icon--up {
@@ -152,9 +157,9 @@
 }
 
 .gem-c-option-select__selected-counter {
+  margin-left: 44px;
   color: $govuk-text-colour;
-  margin-top: 3px;
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 16, $line-height: 1);
 }
 
 .gem-c-option-select.js-closed {

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

@@ -32,17 +32,5 @@
 
   .gem-c-step-nav-header__title {
     @include govuk-font(24, $weight: bold);
-
-    &,
-    &:link,
-    &:link:visited {
-      color: $govuk-print-text-colour;
-    }
-
-    &::after {
-      display: block;
-      margin: 1mm auto;
-      font-size: 12pt !important; // stylelint-disable-line declaration-no-important
-    }
   }
 }

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

@@ -45,26 +45,9 @@
   margin-top: govuk-spacing(3);
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-step-nav-related {
     background: none;
     border-color: $govuk-print-text-colour;
   }
-
-  .gem-c-step-nav-related__heading,
-  .gem-c-step-nav-related__link-item {
-    .govuk-link,
-    .govuk-link:link,
-    .govuk-link:link:visited {
-      color: $govuk-print-text-colour !important;
-
-      &::after {
-        display: block;
-        margin: 1mm auto;
-        font-size: 12pt !important;
-      }
-    }
-  }
 }
-// stylelint-enable declaration-no-important

data/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss

@@ -25,3 +25,48 @@
     }
   }
 }
+
+// Two helper classes to ensure that all printed links
+// receive consistent formatting. Most links inherit
+// styles from govuk-frontend, including the printing
+// of the href that a link contains. This makes printed
+// links more useful, but they can take up a lot of space
+// on the page in the default font size and will print
+// in blue by default. These helpers set the printed colour
+// to black, reduce the font size, and improve the layout
+// of the printed href.
+//
+// .gem-print-link
+// ----------------------------------------------------------
+// Typically this class will be applied to existing
+// elements that have the `govuk-link` class but it can
+// also be used on other link elements.
+//
+// .gem-print-links-within
+// ----------------------------------------------------------
+// A variation of the previous print style, to be used on
+// parent elements that contain links with the `govuk-link`
+// class. This is typically only required for views where
+// the `govuk-link` element is not exposed in the markup
+// of the view as it's coming from a self-contained helper.
+
+// stylelint-disable declaration-no-important
+@include govuk-media-query($media-type: print) {
+  .gem-print-link,
+  .gem-print-links-within .govuk-link {
+    &,
+    &:link,
+    &:visited {
+      color: $govuk-print-text-colour !important;
+    }
+
+    &::after {
+      display: block;
+      margin: 1mm auto;
+      font-size: 12pt;
+      font-weight: normal;
+      color: $govuk-print-text-colour !important;
+    }
+  }
+}
+// stylelint-enable declaration-no-important

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -11,6 +11,7 @@ This component uses the component wrapper helper. It accepts the following optio
 - `role` - accepts a space separated string of roles
 - `lang` - accepts a language attribute value
 - `open` - accepts an open attribute value (true or false)
+- `hidden` - accepts an empty string, 'hidden', or 'until-found'
       "
     end
   end

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

@@ -10,7 +10,7 @@
   subtext ||= false
   subtext_href ||= false
   mobile_subtext ||= false
-  light_text ||= false
+  inverse ||= false
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
@@ -18,7 +18,7 @@
   light_icon ||= false
 
   css_classes = %w(gem-c-action-link)
-  css_classes << "gem-c-action-link--light-text" if light_text
+  css_classes << "gem-c-action-link--inverse" if inverse
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
   css_classes << "gem-c-action-link--light-icon" if light_icon
@@ -28,8 +28,8 @@
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
   css_classes << shared_helper.get_margin_bottom
 
-  link_classes = %w(govuk-link gem-c-action-link__link)
-  link_classes << "govuk-link--inverse" if light_text
+  link_classes = %w(govuk-link gem-c-action-link__link gem-print-link)
+  link_classes << "govuk-link--inverse" if inverse
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(css_classes.join(" "))

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

@@ -38,7 +38,7 @@
             <%= content_tag("h#{sub_heading_level}", class: "gem-c-cards__sub-heading govuk-heading-s") do %>
               <%=
                 link_to link[:text], link[:path],
-                class: "govuk-link gem-c-cards__link",
+                class: "govuk-link gem-c-cards__link gem-print-link",
                 data: link[:data_attributes]
               %>
             <% end %>

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

@@ -8,7 +8,7 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
   classes = %w[gem-c-contents-list]
-  link_classes = %w[gem-c-contents-list__link govuk-link]
+  link_classes = %w[gem-c-contents-list__link govuk-link gem-print-link]
   link_classes << brand_helper.color_class
   link_classes << "govuk-link--no-underline" unless underline_links
 

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

@@ -4,12 +4,16 @@
   id ||= nil
   title ||= nil
   content ||= nil
-  data_attributes ||= {}
-  data_attributes[:module] = "contextual-guidance"
   guidance_id ||= nil
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-contextual-guidance")
+  component_helper.add_data_attribute({ module: "contextual-guidance" })
+
 %>
 
-<%= tag.div class: "gem-c-contextual-guidance", id: id, data: data_attributes do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.div class: "govuk-grid-row" do %>
     <%= tag.div class: "govuk-grid-column-two-thirds" do %>
       <%= tag.div class: "gem-c-contextual-guidance__input-field" do %>

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

@@ -23,13 +23,21 @@
                                   class: "govuk-link",
                                 )))
   services_cookies ||= nil
-  css_classes = %w(gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper)
-  css_classes << "gem-c-cookie-banner--services" if services_cookies
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper")
+  component_helper.add_class("gem-c-cookie-banner--services") if services_cookies
+
+  component_helper.add_data_attribute({ module: "cookie-banner", nosnippet: "" })
+  component_helper.add_role("region")
+  component_helper.add_aria_attribute(label: title)
+  component_helper.set_hidden("hidden")
 
   disable_ga4 ||= false
 %>
 
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>" hidden>
+<%= tag.div(**component_helper.all_attributes) do %>
   <div class="govuk-cookie-banner__message govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
@@ -100,4 +108,4 @@
         </button>
     </div>
   </div>
-</div>
+<% end %>

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

@@ -7,23 +7,27 @@
   applies_to ||= t("components.devolved_nations.applies_to")
   heading_level ||= 2
   disable_ga4 ||= false
-  data_attributes = {}
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-devolved-nations")
 
   unless disable_ga4
-    data_attributes[:ga4_devolved_nations_banner] = devolved_nations_helper.ga4_applicable_nations_title_text(true)
-    data_attributes[:module] = "ga4-link-tracker"
-    data_attributes[:ga4_track_links_only] = ""
-    data_attributes[:ga4_set_indexes] = ""
-    data_attributes[:ga4_link] = {
-      event_name: "navigation",
-      type: "devolved nations banner",
-      section: t("components.devolved_nations.applies_to", locale: :en) + " " + devolved_nations_helper.ga4_applicable_nations_title_text,
-    }.to_json
+    component_helper.add_data_attribute({
+      ga4_devolved_nations_banner: devolved_nations_helper.ga4_applicable_nations_title_text(true),
+      module: "ga4-link-tracker",
+      ga4_track_links_only: "",
+      ga4_set_indexes: "",
+      ga4_link: {
+        event_name: "navigation",
+        type: "devolved nations banner",
+        section: t("components.devolved_nations.applies_to", locale: :en) + " " + devolved_nations_helper.ga4_applicable_nations_title_text,
+      }.to_json
+    })
   end
 %>
 
 <% if national_applicability.any? { |k,v| v[:applicable] == true } %>
-  <%= tag.section class: "gem-c-devolved-nations", data: data_attributes do %>
+  <%= tag.section(**component_helper.all_attributes) do %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
       <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
     <% end %>
@@ -31,7 +35,7 @@
     <% if devolved_nations_helper.nations_with_urls.any? %>
       <%= content_tag :ul, class: "govuk-list govuk-!-margin-top-1 govuk-!-margin-bottom-0" do -%>
         <% devolved_nations_helper.nations_with_urls.each do |k, v| %>
-          <%= content_tag(:li, link_to(devolved_nations_helper.alternative_content_text(k), v[:alternative_url], class: "govuk-link")) %>
+          <%= content_tag(:li, link_to(devolved_nations_helper.alternative_content_text(k), v[:alternative_url], class: "govuk-link gem-print-link")) %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -9,6 +9,7 @@
   component_helper.add_class("gem-c-document-list")
   component_helper.add_class("gem-c-document-list--no-top-border") if local_assigns[:remove_top_border]
   component_helper.add_class("gem-c-document-list--no-top-border-first-child") if local_assigns[:remove_top_border_from_first_child]
+  component_helper.add_class("gem-c-document-list--equal-item-spacing") if local_assigns[:equal_item_spacing]
   component_helper.add_class(shared_helper.get_margin_bottom)
 
   extra_link_classes = "govuk-link--no-underline" if local_assigns[:remove_underline]
@@ -56,7 +57,7 @@
                 item[:link][:text],
                 item[:link][:path],
                 data: item[:link][:data_attributes],
-                class: "#{item_classes} govuk-link #{extra_link_classes}",
+                class: "#{item_classes} govuk-link gem-print-link #{extra_link_classes}",
                 lang: item[:link][:locale].presence,
                 rel: rel,
               )
@@ -117,7 +118,7 @@
                       part[:link][:text],
                       part[:link][:path],
                       data: part[:link][:data_attributes],
-                      class: "gem-c-document-list-child__heading gem-c-document-list-child__link #{brand_helper.color_class} govuk-link #{extra_link_classes}",
+                      class: "gem-c-document-list-child__heading gem-c-document-list-child__link #{brand_helper.color_class} govuk-link gem-print-link #{extra_link_classes}",
                     )
                   else
                     content_tag(

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

@@ -25,12 +25,14 @@
   heading_link_classes = %w[
     gem-c-image-card__title-link
     govuk-link
+    gem-print-link
   ]
   heading_link_classes << brand_helper.color_class
   heading_link_classes << "gem-c-image-card__title-link--large-font-size-mobile" if card_helper.large_mobile_font_size?
   extra_link_classes = %w[
     gem-c-image-card__list-item-link
     govuk-link
+    gem-print-link
   ]
   extra_link_classes << brand_helper.color_class
 

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

@@ -10,7 +10,7 @@
     margin_bottom: margin_bottom
   })
 
-  classes = %w[gem-c-inset-text govuk-inset-text]
+  classes = %w[gem-c-inset-text govuk-inset-text gem-print-links-within]
   classes << shared_helper.get_margin_top
   classes << shared_helper.get_margin_bottom
 %>