govuk_publishing_components 25.4.0 → 26.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8c8ce0242fc9e1dac0d594933ea4f0edc235315a3fbc1e021d38e000ba28326
-  data.tar.gz: 36e25da868ef4303c553bf2bbca204a0b765ac87e4b84921984dd2c0da4217e1
+  metadata.gz: 5c3fd9e474526fc795f4e36972c920118b87ea55a36296a4b5ed63e5e6fdc116
+  data.tar.gz: 84373dc03aa19d36852a9d7766924a42c2a1e97704f23f0829b1723d1bf46e33
 SHA512:
-  metadata.gz: 100b3c1fc07b20fedb2acb1d4e2993b8f8bf38e8ab725b3af0d8f409ce71ba6d7c50953b76757852b59429e6b4cf5acaaea0827571279944b585cb3ecd76c3ea
-  data.tar.gz: 21e3f30700778d5d1b021294a366c00b6c9a407232184201eac41145c415c052432ae05d35e9905721b1ee91e851761de6191ab5c56919177b31f49bc7c2de65
+  metadata.gz: e997a780198073f264b340747df742bf7b9540e2f8106f9f29afb16028ea95533a22d4bf1403aa2b027785a9298585ac7700865ede41d7ab42dd1c00c6fcee70
+  data.tar.gz: 1d38aaaff509242556aebea94b66fe42001345f93f15513ee42c27f1f71d105e8a2f49e7b2e110f1ca317f5ffbf769e4cc4bc3fb00113a9ca88a00eb1fb28cad

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/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

@@ -103,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/app/views/govuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb

@@ -9,7 +9,7 @@
 
     <p class="govuk-body govuk-!-margin-bottom-0">
       <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
-      <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
+      <a href="<%= GovukPersonalisation::Urls.feedback %>" class="govuk-link">
         <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
       </a>
       <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -1,7 +1,7 @@
 <div class="govuk-width-container">
   <% message = capture do %>
     <%= t("components.layout_for_public.account_layout.feedback.banners.phase_intro") %>
-    <a class="govuk-link" href=<%= "#{Plek.find('account-manager')}/feedback" %>>
+    <a class="govuk-link" href=<%= GovukPersonalisation::Urls.feedback %>>
       <%= t("components.layout_for_public.account_layout.feedback.banners.phase_link") %>
     </a>
     <%= t("components.layout_for_public.account_layout.feedback.banners.phase_outro") %>

data/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb

@@ -5,7 +5,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "your-account" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.account.link_text"),
-        "#{Plek.find('account-manager')}",
+        GovukPersonalisation::Urls.your_account,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "your-account" ? "page" : nil,
       ) %>
@@ -13,7 +13,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "manage" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.manage.link_text"),
-        "#{Plek.find('account-manager')}/account/manage",
+        GovukPersonalisation::Urls.manage,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "manage" ? "page" : nil,
       ) %>
@@ -21,7 +21,7 @@
     <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "security" %>">
       <%= link_to(
         t("components.layout_for_public.account_layout.navigation.menu_bar.security.link_text"),
-        "#{Plek.find('account-manager')}/account/security",
+        GovukPersonalisation::Urls.security,
         class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
         'aria-current': page_is == "security" ? "page" : nil,
       ) %>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.4.0".freeze
+  VERSION = "26.0.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -1,6 +1,7 @@
 require "active_support"
 require "action_controller"
 require "action_view"
+require "govuk_personalisation"
 require "govuk_publishing_components/config"
 require "govuk_publishing_components/engine"
 require "govuk_publishing_components/presenters/shared_helper"

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 {