govuk_publishing_components 25.3.0 → 25.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41273e4fba800fd43e808314fc1888f6dcfec744c7df9a6cfea11443d37d9493
-  data.tar.gz: 87fc6df908f19e12cc2bba6aafaf3e8eff479e33cfc59dcac05ffdb1639c9223
+  metadata.gz: b1b20d5bd22562106adb11d4dae477700ae7cf87c10e8113615ddccc43a57eee
+  data.tar.gz: 6c8cbab6a211c1d7192af9128ea910b9394702a7d369e1b48e29d74f541ce4a4
 SHA512:
-  metadata.gz: f9c9af6f11ff227c238b3e5256ee85f460f628f7ae8923835a56e33be33e87659f0ccf94d272ff559717bc7cd0179378a5141f9f76e406ea846249d56c5ae9f3
-  data.tar.gz: 165440177ebe3c307decae4789c93d6858c0925c26898c1c68901d72dc437448aed6b7e50a76123b4a17fea577f261262ae80fa245bb437b67b3dd72e139117e
+  metadata.gz: 298e4ac11183bbd0dc6dd364c9d831143c5b94e92b65e3afccad59269c1515e683834db2e3af528f7c2416c78a644cbd61aba803b66e65335195f8bc1e4dfd76
+  data.tar.gz: 71429d6099fcc7465c2fef3092fb9b586f385c399e1f90a71470a433d91d2f25314ed53e10b543a683cb3c94c7b8bcb44a272c5a3e479faab9a8f581e9405902

data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js

@@ -10,38 +10,46 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module[0]
     this.$module.handleClick = this.handleClick.bind(this)
     var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
+    var limitToElementClass = this.$module.getAttribute('data-limit-to-element-class')
 
     var that = this
     // add a listener to the whole element
     this.$module.addEventListener('click', function (e) {
+      var target = e.target
       if (!trackLinksOnly) {
-        that.$module.handleClick(e.target)
-      } else if (trackLinksOnly && e.target.tagName === 'A') {
-        that.$module.handleClick(e.target)
+        that.$module.handleClick(target)
+      } else if (trackLinksOnly && target.tagName === 'A') {
+        if (!limitToElementClass) {
+          that.$module.handleClick(target)
+        } else if (limitToElementClass && target.closest('.' + limitToElementClass)) {
+          that.$module.handleClick(target)
+        }
       }
     })
   }
 
   GemTrackClick.prototype.handleClick = function (target) {
     var options = { transport: 'beacon' }
-    var linkText
+    var linkUrl
 
     // if clicked element hasn't got the right attributes, look for a parent that matches
     if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) {
-      linkText = target.textContent || target.innerText
+      linkUrl = target.getAttribute('href')
       target = target.closest('[data-track-category][data-track-action]')
     }
 
     if (target) {
       var category = target.getAttribute('data-track-category')
       var action = target.getAttribute('data-track-action')
-      var label = target.getAttribute('data-track-label')
+      var label = target.getAttribute('data-track-label') || linkUrl
       var value = target.getAttribute('data-track-value')
       var dimension = target.getAttribute('data-track-dimension')
       var dimensionIndex = target.getAttribute('data-track-dimension-index')
       var extraOptions = target.getAttribute('data-track-options')
 
-      options.label = label || linkText
+      if (label) {
+        options.label = label
+      }
 
       if (value) {
         options.value = value

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -27,11 +27,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
     if (this.$acceptCookiesButton) {
+      this.$acceptCookiesButton.style.display = 'block'
       this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
     }
 
     this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
     if (this.$rejectCookiesButton) {
+      this.$rejectCookiesButton.style.display = 'block'
       this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
@@ -44,7 +46,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
-        this.$module.removeAttribute('hidden')
+        this.$module.style.display = 'block'
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
@@ -53,16 +55,17 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         window.GOVUK.deleteUnconsentedCookies()
       } else {
-        this.$module.setAttribute('hidden', '')
+        this.$module.style.display = 'none'
       }
     } else {
-      this.$module.setAttribute('hidden', '')
+      this.$module.style.display = 'none'
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.setAttribute('hidden', '')
+      this.$module.hidden = true
+      this.$module.style.display = 'none'
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -98,8 +101,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.setAttribute('hidden', '')
-    this.$module.cookieBannerConfirmationMessage.removeAttribute('hidden')
+    this.$cookieBannerMainContent.hidden = true
+    this.$module.cookieBannerConfirmationMessage.style.display = 'block'
+    this.$module.cookieBannerConfirmationMessage.hidden = false
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -155,10 +155,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
 
       this.$module.style.marginBottom = '0'
-
-      window.removeEventListener('resize', this.resizeHandler, { passive: true })
-
-      this.lastWindowSize = this.windowSize()
     }
 
     // Hide the navigation toggle button and show the navigation submenu:
@@ -166,10 +162,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$navigationToggle.setAttribute('hidden', 'hidden')
       this.$navigationMenu.removeAttribute('hidden')
 
-      window.addEventListener('resize', this.resizeHandler, { passive: true })
-
-      this.lastWindowSize = this.windowSize()
+      this.resizeHandler()
     }
+
+    this.lastWindowSize = this.windowSize()
   }
 
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -7,7 +7,7 @@
 
   GOVUK.modules = {
     find: function (container) {
-      container = container || $(document)
+      container = $(container || document)
 
       var modules
       var moduleSelector = '[data-module]'

data/app/assets/stylesheets/component_guide/application.scss

@@ -499,9 +499,3 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
-
-.gem-c-cookie-banner[hidden] {
-  .js-enabled & {
-    display: block;
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,10 +1,9 @@
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
-.gem-c-cookie-banner[hidden] {
-  display: block; // shown with JS, always on for non-JS
-  .js-enabled & {
-    display: none;
+.js-enabled {
+  .gem-c-cookie-banner {
+    display: none; // shown with JS, always on for non-JS
   }
 }
 
@@ -15,13 +14,9 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 // can't be used without js so implement there
 .gem-c-cookie-banner .gem-c-button {
   display: none;
-
-  .js-enabled & {
-    display: block;
-  }
 }
 
-.gem-c-cookie-banner__confirmation[hidden] {
+.gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
   padding: govuk-spacing(1);

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -269,7 +269,11 @@ $search-icon-size: 20px;
     color: $govuk-link-colour;
 
     &:hover {
-      color: govuk-colour("mid-grey");
+      color: $govuk-link-hover-colour;
+
+      @include govuk-media-query($from: "desktop") {
+        color: govuk-colour("mid-grey");
+      }
     }
 
     &:focus {
@@ -358,6 +362,10 @@ $search-icon-size: 20px;
   position: absolute;
   right: 45px;
 
+  &.gem-c-layout-super-navigation-header__open-button {
+    border-top-color: govuk-colour("black");
+  }
+
   @include govuk-media-query($from: 360px) {
     &:before {
       @include chevron("white");
@@ -388,8 +396,19 @@ $search-icon-size: 20px;
   position: absolute;
   right: (0 - govuk-spacing(3));
 
-  &:hover {
-    border-color: govuk-colour("black");
+  &:after {
+    background-color: $govuk-link-colour;
+    content: " ";
+    left: 0;
+    right: 0;
+  }
+
+  &:not(.gem-c-layout-super-navigation-header__open-button):focus {
+    &:hover,
+    &:after {
+      background-color: $govuk-focus-colour;
+      border-top-color: $govuk-focus-colour;
+    }
   }
 
   @include govuk-media-query($from: 360px) {
@@ -405,22 +424,6 @@ $search-icon-size: 20px;
     position: relative;
     float: right;
 
-    &:not(.gem-c-layout-super-navigation-header__open-button):hover {
-      background: none;
-      color: govuk-colour("light-grey");
-
-      &:after {
-        content: " ";
-        left: 0;
-        right: 0;
-      }
-    }
-
-    &:focus:hover:after,
-    &:after {
-      content: none;
-    }
-
     &.gem-c-layout-super-navigation-header__open-button {
       border-top-color: govuk-colour("black");
 
@@ -486,7 +489,6 @@ $search-icon-size: 20px;
 
     &:focus {
       color: $govuk-focus-text-colour;
-      // border-color: $govuk-focus-text-colour;
 
       &:after {
         background-color: $govuk-focus-text-colour;
@@ -501,10 +503,6 @@ $search-icon-size: 20px;
   &.gem-c-layout-super-navigation-header__open-button {
     border-top-color: govuk-colour("black");
 
-    &:focus {
-      border-top-color: $govuk-focus-colour;
-    }
-
     &:before {
       transform: translateY(20%) rotate(225deg);
     }

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

@@ -1,5 +1,7 @@
 .gem-c-step-nav-header {
+  @include govuk-font(24, $weight: bold);
   @include govuk-text-colour;
+
   position: relative;
   padding: 10px;
   background: govuk-colour("light-grey", $legacy: "grey-4");
@@ -15,7 +17,3 @@
   @include govuk-font(19, $weight: bold);
   display: block;
 }
-
-.gem-c-step-nav-header__title {
-  @include govuk-font(24, $weight: bold, $line-height: 1);
-}

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

@@ -29,7 +29,7 @@
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet hidden>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
     <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
       <div class="govuk-grid-row">

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

@@ -14,7 +14,6 @@
   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[

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

@@ -11,6 +11,7 @@
   omit_header ||= false
   product_name ||= nil
   show_explore_header ||= false
+  draft_watermark ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
@@ -39,6 +40,8 @@
 # when a) there's content for the emergency or global banner *and* b) when using
 # the contrained width layout.
   blue_bar_dedupe = !full_width && global_bar.present?
+  body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
+  body_css_classes << "draft" if draft_watermark
 -%>
 <!DOCTYPE html>
   <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
@@ -72,7 +75,7 @@
 
     <%= yield :head %>
   </head>
-  <body class="gem-c-layout-for-public govuk-template__body">
+  <%= tag.body class: body_css_classes do %>
     <script>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     </script>
@@ -147,5 +150,5 @@
       } %>
     <% end %>
     <%= javascript_include_tag 'application' %>
-  </body>
+  <% end %>
 </html>

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

@@ -35,6 +35,15 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "I am not a heading"
       heading_level: 0
+  with_lazy_loading:
+    description: The image can have an attribute of lazy loading. Defaults to auto if not passed.
+    data:
+      href: "/really-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      image_loading: "lazy"
+      heading_text: "I am not a heading"
+      heading_level: 0
   with_different_link_size:
     description: |
       Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang
+      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang, :image_loading
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
@@ -12,6 +12,7 @@ module GovukPublishingComponents
         @extra_links = local_assigns[:extra_links] || []
         @image_src = local_assigns[:image_src]
         @image_alt = local_assigns[:image_alt] || ""
+        @image_loading = local_assigns[:image_loading] || "auto"
         @context = local_assigns[:context]
         @description = local_assigns[:description]
         @large = local_assigns[:large]
@@ -35,7 +36,7 @@ module GovukPublishingComponents
       def image
         if @image_src
           content_tag(:figure, class: "gem-c-image-card__image-wrapper") do
-            image_tag(@image_src, class: "gem-c-image-card__image", alt: @image_alt)
+            image_tag(@image_src, class: "gem-c-image-card__image", alt: @image_alt, loading: @image_loading)
           end
         end
       end

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -353,6 +353,9 @@ module GovukPublishingComponents
           {
             href: "/cymraeg",
             text: "Rhestr o Wasanaethau Cymraeg",
+            attributes: {
+              lang: "cy",
+            },
           },
           {
             href: "/government/organisations/government-digital-service",

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.3.0".freeze
+  VERSION = "25.6.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1751,6 +1751,47 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
   }
 };
 
+/**
+ * Uncheck other checkboxes
+ *
+ * Find any other checkbox inputs with the same name value, and uncheck them.
+ * This is useful for when a “None of these" checkbox is checked.
+ */
+Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
+  var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
+
+  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+    var hasSameFormOwner = ($input.form === $inputWithSameName.form);
+    if (hasSameFormOwner && $inputWithSameName !== $input) {
+      $inputWithSameName.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
+/**
+ * Uncheck exclusive inputs
+ *
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
+ * "None of these" checkbox in the same fieldset.
+ */
+Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+  );
+
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+    var hasSameFormOwner = ($input.form === $exclusiveInput.form);
+    if (hasSameFormOwner) {
+      $exclusiveInput.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
 /**
  * Click event handler
  *
@@ -1762,12 +1803,29 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
-  // If a checkbox with aria-controls, handle click
-  var isCheckbox = $target.getAttribute('type') === 'checkbox';
+  // Ignore clicks on things that aren't checkbox inputs
+  if ($target.type !== 'checkbox') {
+    return
+  }
+
+  // If the checkbox conditionally-reveals some content, sync the state
   var hasAriaControls = $target.getAttribute('aria-controls');
-  if (isCheckbox && hasAriaControls) {
+  if (hasAriaControls) {
     this.syncConditionalRevealWithInputState($target);
   }
+
+  // No further behaviour needed for unchecking
+  if (!$target.checked) {
+    return
+  }
+
+  // Handle 'exclusive' checkbox behaviour (ie "None of these")
+  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive');
+  if (hasBehaviourExclusive) {
+    this.unCheckAllInputsExcept($target);
+  } else {
+    this.unCheckExclusiveInputs($target);
+  }
 };
 
 (function(undefined) {