govuk_publishing_components 25.3.1 → 25.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a7604846e82e7d5741665c02447fd53ed8b8e144b93764dffaedf745a4751a4
-  data.tar.gz: bcb4e7566730869377d7c1570acc4dce95200267a3d3f79567d82a266d878d61
+  metadata.gz: 4abd01ab2cfef631996c10f29cc13080322cb8df58ebd7da2eccd2c310c26d8b
+  data.tar.gz: 6707f734f671ba73b7e8350b033c0a7ba91562ad8fd05a2b8f62f649e2fcbb2a
 SHA512:
-  metadata.gz: 40cf20a95a9129391d7395f71421ebfcf38656427a2b2f6f9e309164513751080bbb5eee944633c5d42a4ab7051ac1a26215fce1e97f45d0c97bff5017dcb602
-  data.tar.gz: 3c2673f73683ca6375a62ec8c94ac7ee79bfd9a965cff5ba008d56f93a3c3fff41c473f2f9e79b74d0f2ba40fa23c093b805a782375b5030b1dc3eddd87404d2
+  metadata.gz: 0be2f94551c472261bb6bf1b2f0e4adb0e1a2b60ab764ae99976c3b4fe0f6413e601d9c465e990da5a329aa276030f810cf40f63a23678b7864ca64f764d5685
+  data.tar.gz: 8e9bfa9e1c683d9211c2a8a796f353dfeb834c3e56c14123ac5ef7268c9eafd378fc0cdd06ea14afaddbe6ae92f3fbbbdaa511462d0b6b9386c4bd5473db43b7

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

@@ -10,14 +10,20 @@ 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)
+        }
       }
     })
   }

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/govuk_publishing_components/components/_image-card.scss

@@ -127,6 +127,10 @@
     margin-bottom: govuk-spacing(1);
   }
 
+  .gem-c-image-card__list-item--text {
+    color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+
   .gem-c-image-card__list-item-link {
     line-height: 1.35em;
   }

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/_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[
@@ -48,12 +47,16 @@
       <% if card_helper.extra_links.any? %>
         <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
           <% card_helper.extra_links.each do |link| %>
-            <li class="gem-c-image-card__list-item">
-              <%= link_to link[:text], link[:href],
-                class: extra_link_classes,
-                data: link[:data_attributes]
-              %>
-            </li>
+            <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
+              <% if link[:href].present? %>
+                <%= link_to link[:text], link[:href],
+                  class: extra_link_classes,
+                  data: link[:data_attributes]
+                %>
+              <% else %>
+                <%= link[:text] %>
+              <% end %>  
+            </li>    
           <% end %>
         </ul>
       <% end %>

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`.
@@ -94,6 +103,22 @@ examples:
         }
       ]
       extra_links_no_indent: true
+  extra_links_with_no_links:
+    description: If `extra_links` are passed to the component without `href` attributes, they are displayed as a simple text list.
+    data:
+      href: "/government/people/"
+      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"
+      heading_text: "John Whiskers MP"
+      extra_links: [
+        {
+          text: "Conservative 2010 to 2016",
+        },
+        {
+          text: "Labour 2007 to 2010",
+        }
+      ]
+      extra_links_no_indent: true
   extra_links_with_no_main_link:
     description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
     data:

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/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.3.1".freeze
+  VERSION = "25.7.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) {

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss

@@ -129,6 +129,7 @@
 
       .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -241,6 +241,8 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -248,6 +250,8 @@
 
     -webkit-box-pack: center;
 
+    -webkit-justify-content: center;
+
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -260,10 +264,12 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
   }
 
   @if $govuk-use-legacy-font {