govuk_publishing_components 27.16.0 → 27.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 586ea5662dfd4f3951905b244afc78556dc687bf861a05e11e56ff7d2ee172eb
-  data.tar.gz: eab6ea6544883bc5fa511f29e589d996eabae18a6661f0772ac45356668f5396
+  metadata.gz: abe5f80412062a42d0581b1137f85d3c6932cb23e20d840d08a345b642133e65
+  data.tar.gz: 6b46ff356ab253ec47fb4ed7d67f4cd8b40c0024bedf4511e03e4416b2ee519d
 SHA512:
-  metadata.gz: f513e048959e7e81b753583f923772b590f5c4da1841e666f4131bc79e8dea9b8cd4571cba7bab859e0d1b4683a1b10ebaa17d56cd6d3ab3a4eff68090837a1c
-  data.tar.gz: 5f2d6aa1171a47b3074ba65b0dc5488b9269dc4f7781580df52d7d1c354559d19270bace849b39342c51e3e4ad9342a966354da39dabb6f52838de4c505f0f03
+  metadata.gz: 92c367ffdd7fc084e3b68fac798c1e1e51f3c37b361e6003c877b4c8839c40eaecb98ecbf20e5d65de3fe1aa8926167c557d6ef767516d3d9deacc64f32113c4
+  data.tar.gz: 971c347b11fdb3d12302e44deaa3bb77406b6b76d15c78e4af44c415b950aabfa688a1e9708de04eea09bf274b0484c30c27c2917392d862a1af10b013549380

data/app/assets/javascripts/govuk_publishing_components/analytics/explicit-cross-domain-links.js

@@ -6,33 +6,57 @@
 
   GOVUK.Modules.ExplicitCrossDomainLinks = function () {
     this.start = function ($module) {
-      var element = $module[0]
+      this.element = $module[0]
+      this.attribute = 'href'
+      this.attributeValue = this.element.getAttribute(this.attribute)
+      this.eventType = 'click'
+      if (!this.attributeValue) {
+        this.attribute = 'action'
+        this.attributeValue = this.element.getAttribute(this.attribute)
+        this.eventType = 'submit'
+      }
 
-      var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
+      this.handleEvent = this.handleEvent.bind(this)
+      this.handleCookiesAccepted = this.handleCookiesAccepted.bind(this)
+      // Listens for the 'submit' event if the element is a form, and the 'click' event if it is a link
+      this.element.addEventListener(this.eventType, this.handleEvent)
+    }
 
-      // If not engaged, append only ?cookie_consent=not-engaged
-      // If engaged and rejected, append only ?cookie_consent=reject
-      // If engaged and accepted usage, append ?_ga=clientid if available and cookie_consent=accept
+    this.handleEvent = function (e) {
+      //  prevent default: we want the link href and/or form action to be decorated before we navigate away
+      e.preventDefault()
+      var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
+      var cookieConsent = GOVUK.getConsentCookie()
 
       if (cookieBannerEngaged !== 'true') {
-        this.decorate(element, 'cookie_consent=not-engaged')
-        this.start = this.start.bind(this, $module)
-
-        // if the user has not engaged with the cookie banner yet, listen for the cookie consent accept/reject events
-        // re-start the module if cookies are accepted or rejected on the current page – setting cookie preferences does not reload the page
-        window.addEventListener('cookie-consent', this.start)
-        window.addEventListener('cookie-reject', this.start)
-        return
+        // If not engaged, append only ?cookie_consent=not-engaged
+        this.decorate(this.element, 'cookie_consent=not-engaged', this.attribute)
+      } else if (cookieConsent && cookieConsent.usage === true) {
+        this.handleCookiesAccepted()
+      } else {
+        this.decorate(this.element, 'cookie_consent=reject', this.attribute)
       }
-      var cookieConsent = GOVUK.getConsentCookie()
-      if (cookieConsent && cookieConsent.usage === false) {
-        this.decorate(element, 'cookie_consent=reject')
-        return
+
+      // remove the event listener to avoid an infinite loop
+      this.element.removeEventListener(this.eventType, this.handleEvent)
+
+      // if the element is a form, submit it. If it is a link, click it
+      if (this.eventType === 'submit') {
+        this.element.submit()
+      } else {
+        this.element.click()
       }
+    }
 
-      this.decorate(element, 'cookie_consent=accept')
+    this.handleCookiesAccepted = function () {
+      // If the cookie banner was engaged and usage cookie accepted, append ?_ga=clientid if available and cookie_consent=accept
+      var element = this.element
+      var attribute = this.attribute
+      this.decorate(element, 'cookie_consent=accept', attribute)
 
-      if (!global.ga) { return }
+      if (!global.ga) {
+        return
+      }
 
       global.ga(function () {
         var trackers = global.ga.getAll()
@@ -40,44 +64,21 @@
         if (!trackers.length) { return }
 
         var linker = new global.gaplugins.Linker(trackers[0])
+        var attrValue = element.getAttribute(attribute)
 
-        var attrAction = element.getAttribute('action')
-        if (attrAction) {
-          element.setAttribute('action', linker.decorate(attrAction))
-        }
-
-        var attrHref = element.getAttribute('href')
-        if (attrHref) {
-          element.href = linker.decorate(attrHref)
-        }
+        element.setAttribute(attribute, linker.decorate(attrValue))
       })
     }
 
-    this.decorate = function (element, param) {
-      var attribute = 'href'
+    this.decorate = function (element, param, attribute) {
       var attributeValue = element.getAttribute(attribute)
-      var cookieConsentParameterPattern = /cookie_consent=[^&]*/
-      var paramIsCookieConsent = param.match(cookieConsentParameterPattern)
-
-      if (!attributeValue) {
-        attribute = 'action'
-        attributeValue = element.getAttribute(attribute)
-      }
 
       if (!attributeValue) { return }
 
-      var attributeHasCookieConsent = attributeValue.match(cookieConsentParameterPattern)
-
-      if (attributeHasCookieConsent && paramIsCookieConsent) {
-        // if the decorate function has received a cookie_consent parameter, but the target element already has a cookie_consent parameter, replace the existing parameter with the new value
-        attributeValue = attributeValue.replace(cookieConsentParameterPattern, param)
+      if (attributeValue.indexOf('?') !== -1) {
+        attributeValue += '&' + param
       } else {
-        // otherwise, simply append the parameter to the target element href query string
-        if (attributeValue.includes('?')) {
-          attributeValue += '&' + param
-        } else {
-          attributeValue += '?' + param
-        }
+        attributeValue += '?' + param
       }
 
       element.setAttribute(attribute, attributeValue)

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -8,17 +8,17 @@
   PageContent.getNumberOfSections = function () {
     switch (true) {
       case isNavigationGridPage():
-        return 1 + $('.parent-topic-contents').length
+        return 1 + document.querySelectorAll('.parent-topic-contents').length
       case isNavigationAccordionPage():
-        return $('[data-track-count="accordionSection"]').length
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isDocumentCollectionPage():
-        return $('.document-collection .group-title').length
+        return document.querySelectorAll('.document-collection .group-title').length
       case isMainstreamBrowsePage():
-        return $('#subsection ul:visible').length || $('#section ul').length
+        return countVisible(document.querySelectorAll('#subsection ul')) || document.querySelectorAll('#section ul').length
       case isTopicPage():
-        return $('.topics-page nav.index-list').length
+        return document.querySelectorAll('.topics-page nav.index-list').length
       case isPolicyAreaPage():
-        return $('.topic section h1.label').length
+        return document.querySelectorAll('.topic section h1.label').length
       case isFinderPage():
       case isWhitehallFinderPage():
       case isNavigationLeafPage():
@@ -28,8 +28,8 @@
         return 1
       default:
         // It's a content page, not a "finding" page
-        var sidebarSections = $('[data-track-count="sidebarRelatedItemSection"]').length
-        var sidebarTaxons = $('[data-track-count="sidebarTaxonSection"]').length
+        var sidebarSections = document.querySelectorAll('[data-track-count="sidebarRelatedItemSection"]').length
+        var sidebarTaxons = document.querySelectorAll('[data-track-count="sidebarTaxonSection"]').length
 
         return sidebarSections || sidebarTaxons
     }
@@ -38,92 +38,101 @@
   PageContent.getNumberOfLinks = function () {
     switch (true) {
       case isNavigationGridPage():
-        return $('a[data-track-category="navGridLinkClicked"]').length +
-          $('a[data-track-category="navGridLeafLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="navGridLinkClicked"]').length +
+          document.querySelectorAll('a[data-track-category="navGridLeafLinkClicked"]').length
       case isNavigationAccordionPage():
-        return $('a[data-track-category="navAccordionLinkClicked"]').length
-      case isNavigationLeafPage():
-        return $('a[data-track-category="navLeafLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="navAccordionLinkClicked"]').length
       case isDocumentCollectionPage():
-        return $('.document-collection .group-document-list li a').length
+        return document.querySelectorAll('.document-collection .group-document-list li a').length
       case isMainstreamBrowsePage():
-        return $('#subsection ul a:visible').length ||
-          $('#section ul a').length
+        return countVisible(document.querySelectorAll('#subsection ul a')) || document.querySelectorAll('#section ul a').length
       case isTopicPage():
-        return $('.topics-page .index-list ul a').length ||
-          $('.topics-page .topics ul a').length
+        return document.querySelectorAll('.topics-page .index-list ul a').length ||
+          document.querySelectorAll('.topics-page .topics ul a').length
       case isPolicyAreaPage():
-        return $('section.document-block a').length +
-          $('section .collection-list h2 a').length
-      case isWhitehallFinderPage():
-        return $('.document-list .document-row h3 a').length
+        return document.querySelectorAll('section.document-block a').length +
+          document.querySelectorAll('section .collection-list h2 a').length
       case isFinderPage():
-        return $('.finder-frontend-content li.document a').length
+        return document.querySelectorAll('.finder-frontend-content li.document a').length
+      case isWhitehallFinderPage():
+        return document.querySelectorAll('.document-list .document-row h3 a').length
+      case isNavigationLeafPage():
+        return document.querySelectorAll('a[data-track-category="navLeafLinkClicked"]').length
       default:
         // It's a content page, not a "finding" page, count related links
-        return $('a[data-track-category="relatedLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="relatedLinkClicked"]').length
     }
   }
 
-  function getRenderingApplication () {
-    return $('meta[name="govuk:rendering-application"]').attr('content')
-  };
-
-  function getFormat () {
-    return $('meta[name="govuk:format"]').attr('content')
-  };
+  var metaApplicationSelector = 'meta[name="govuk:rendering-application"]'
+  var metaFormatSelector = 'meta[name="govuk:format"]'
+  var metaNavigationTypeSelector = 'meta[name="govuk:navigation-page-type"]'
 
-  function getNavigationPageType () {
-    return $('meta[name="govuk:navigation-page-type"]').attr('content')
-  };
+  function getMetaAttribute (selector) {
+    var element = document.querySelector(selector)
+    if (element) {
+      return element.getAttribute('content')
+    }
+  }
 
   function isNavigationGridPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'grid'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'grid'
+  }
 
   function isNavigationAccordionPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'accordion'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'accordion'
+  }
 
   function isNavigationLeafPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'leaf'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'leaf'
+  }
 
   function isMainstreamBrowsePage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'mainstream_browse_page'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'mainstream_browse_page'
+  }
 
   function isTopicPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'topic'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'topic'
+  }
 
   function isPolicyAreaPage () {
-    return getRenderingApplication() === 'whitehall' &&
-      getFormat() === 'placeholder_policy_area'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'whitehall' &&
+      getMetaAttribute(metaFormatSelector) === 'placeholder_policy_area'
+  }
 
   function isDocumentCollectionPage () {
-    return getRenderingApplication() === 'government-frontend' &&
-      getFormat() === 'document_collection'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'government-frontend' &&
+      getMetaAttribute(metaFormatSelector) === 'document_collection'
+  }
 
   function isFinderPage () {
-    return getRenderingApplication() === 'finder-frontend' &&
-      getFormat() === 'finder'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'finder-frontend' &&
+      getMetaAttribute(metaFormatSelector) === 'finder'
+  }
 
   function isWhitehallFinderPage () {
-    return getRenderingApplication() === 'whitehall' &&
-      getFormat() === 'finder'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'whitehall' &&
+      getMetaAttribute(metaFormatSelector) === 'finder'
+  }
+
+  function countVisible (elements) {
+    var count = 0
+    for (var i = 0; i < elements.length; i++) {
+      var style = window.getComputedStyle(elements[i])
+      if (!(style.display === 'none' || style.visibility === 'hidden')) {
+        count++
+      }
+    }
+    return count
+  }
 
   GOVUK.PageContent = PageContent
 })()

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

@@ -97,7 +97,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.cookieBannerConfirmationMessage.focus()
     window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     window.GOVUK.setDefaultConsentCookie()
-    window.GOVUK.triggerEvent(window, 'cookie-reject')
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -7,6 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module
     this.basePath = this.$module.querySelector('input[name="base_path"]').value
     this.buttonLocation = this.$module.getAttribute('data-button-location')
+    this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
 
     this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
     // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
@@ -16,21 +17,30 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   SinglePageNotificationButton.prototype.init = function () {
     var xhr = new XMLHttpRequest()
     xhr.open('GET', this.personalisationEndpoint, true)
+    // if XHR to the personalisation endpoint is taking an incredibly long time to complete, we are better off leaving the button in its default unpersonalised state. Content changing before the user's eyes while they are browsing can be jarring and should be avoided.
+    xhr.timeout = 10000
+
+    xhr.ontimeout = function () {
+      this.makeVisible(this.$module)
+    }.bind(this)
 
     xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4 && xhr.status === 200) {
-        var responseText = xhr.responseText
-        // if response text exists and is JSON parse-able, parse the response and get the button html
-        if (responseText && this.responseIsJSON(responseText)) {
-          var newButton = JSON.parse(responseText).button_html
-          var html = document.createElement('div')
-          html.innerHTML = newButton
-          // test that the html returned contains the button component; if yes, swap the button for the updated version
-          var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
-          if (responseButtonContainer) {
-            this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          var responseText = xhr.responseText
+          // if response text exists and is JSON parse-able, parse the response and get the button html
+          if (responseText && this.responseIsJSON(responseText)) {
+            var newButton = JSON.parse(responseText).button_html
+            var html = document.createElement('div')
+            html.innerHTML = newButton
+            // test that the html returned contains the button component; if yes, swap the button for the updated version
+            var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
+            if (responseButtonContainer) {
+              this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+            }
           }
         }
+        this.makeVisible(this.$module)
       }
     }.bind(this)
     xhr.send()
@@ -44,5 +54,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
     return true
   }
+
+  SinglePageNotificationButton.prototype.makeVisible = function (target) {
+    target.classList.add(this.buttonVisibleClass)
+  }
   Modules.SinglePageNotificationButton = SinglePageNotificationButton
 })(window.GOVUK.Modules)

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

@@ -68,6 +68,7 @@ $govuk-new-link-styles: true;
 @import "components/select";
 @import "components/share-links";
 @import "components/show-password";
+@import "components/signup-link";
 @import "components/single-page-notification-button";
 @import "components/skip-link";
 @import "components/step-by-step-nav-header";

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -15,12 +15,7 @@
 }
 
 .gem-c-big-number__label {
-  font-size: 16px;
-  @include govuk-typography-weight-bold;
-
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  @include govuk-font($size: 19, $weight: bold);
 
   // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
   // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,31 +1,36 @@
 $transition-campaign-red: #ff003b;
+$covid-colour: $govuk-link-colour;
 
-.gem-c-contextual-sidebar__brexit-related-links {
+.gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-heading {
+.gem-c-contextual-sidebar__heading {
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  color: $govuk-text-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-cta {
+.gem-c-contextual-sidebar__text {
+  @include govuk-font(16);
+  margin-bottom: govuk-spacing(1);
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-contextual-sidebar__cta {
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 2px solid $transition-campaign-red;
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
+}
 
-  .gem-c-contextual-sidebar__brexit-heading {
-    color: $govuk-text-colour;
-  }
+.gem-c-contextual-sidebar__cta--brexit {
+  border-top: 2px solid $transition-campaign-red;
+}
 
-  .gem-c-contextual-sidebar__brexit-text {
-    @include govuk-font(16);
-    margin-bottom: govuk-spacing(1);
-    @include govuk-media-query($from: tablet) {
-      margin-bottom: govuk-spacing(2);
-    }
-  }
+.gem-c-contextual-sidebar__cta--covid {
+  border-top: 2px solid $covid-colour;
 }

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

@@ -45,17 +45,21 @@
   }
 
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-third, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 }
 
 .gem-c-image-card__image {
   display: block;
   max-width: 100%;
+  border-top: 1px solid $govuk-border-colour;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
 }
 
 .gem-c-image-card__title {
@@ -100,7 +104,13 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  @include govuk-font(14);
+  @include govuk-font($size: false);
+  font-size: 16px;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
@@ -110,13 +120,13 @@
 }
 
 .gem-c-image-card__description {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   padding-top: (govuk-spacing(3) / 2);
   word-wrap: break-word;
 }
 
 .gem-c-image-card__list {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
   padding: (govuk-spacing(3) / 2) 0 0 0;
@@ -160,7 +170,7 @@
 
 .gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     margin-bottom: govuk-spacing(2);
     float: none;
@@ -175,7 +185,7 @@
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: one-third, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     padding: 0;
     overflow: hidden;