govuk_publishing_components 27.14.2 → 27.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 07e0c548e46fc4a7dcb04e7f2838f17b7fc6234804695cfbeca50d1aec4f4431
-  data.tar.gz: 33b0e798aed35a5ab8808ad6b6e0ee99a929c6d2b8da837d6acb156cf66d4f2c
+  metadata.gz: 49373bd0b9e370b948f7c91c83647ca22f7f2e112bb0d12dee4686c980f831f4
+  data.tar.gz: 4868f4234fcf242d553c90ab60f35e2354480c30f6c44f3066b5fc60079175b7
 SHA512:
-  metadata.gz: b48854f3ab1990a2166fbef3f8e57f2487778b7c9df6a0327e05318821b978ba3ef21f0a0865c6cc3cb714d0bff8a3fd6e102cd855fa1b28b78c32d66d92f0a0
-  data.tar.gz: 7bb47453cfc2208ffe22cb79c6493d85720a137b405709a545b3a6a6f37ee59e05b953a59c8cd067d2661038d3dbe323950b6662378ee24ee1ae8c14e98dbcd0
+  metadata.gz: 7e68c23966e5498ca1ae0c386d2a91703b94bac02808fbae86755ca35b12d3fdd45859a2d3eaa6f052912890296554c0478c717354bd29fb1dd5336a8a3bad5e
+  data.tar.gz: ada5d7c714155391431943c17850d379e4bc9fce3e20fa35bff736b21b60b13d92140dbd7102237f2c64b9c0a948723954e677ef5935b4d91b7bc6a4014bfbd9

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -7,11 +7,11 @@
 
   CustomDimensions.getAndExtendDefaultTrackingOptions = function (extraOptions) {
     var trackingOptions = this.customDimensions()
-    return $.extend(trackingOptions, extraOptions)
+    return this.extend(trackingOptions, extraOptions)
   }
 
   CustomDimensions.customDimensions = function () {
-    var dimensions = $.extend(
+    var dimensions = this.extend(
       {},
       customDimensionsFromBrowser(),
       customDimensionsFromMetaTags(),
@@ -19,9 +19,28 @@
       abTestCustomDimensions()
     )
 
-    return $.each(dimensions, function (key, value) {
-      dimensions[key] = new GOVUK.Analytics.PIISafe(String(value))
-    })
+    for (var key in dimensions) {
+      dimensions[key] = new GOVUK.Analytics.PIISafe(String(dimensions[key]))
+    }
+    return dimensions
+  }
+
+  CustomDimensions.extend = function (out) {
+    out = out || {}
+
+    for (var i = 1; i < arguments.length; i++) {
+      if (!arguments[i]) {
+        continue
+      }
+
+      for (var key in arguments[i]) {
+        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
+          out[key] = arguments[i][key]
+        }
+      }
+    }
+
+    return out
   }
 
   function customDimensionsFromBrowser () {
@@ -70,52 +89,59 @@
       'spelling-suggestion': { dimension: 81 }
     }
 
-    var $metas = $('meta[name^="govuk:"]')
+    var metas = document.querySelectorAll("meta[name^='govuk']")
     var customDimensions = {}
     var tags = {}
 
-    $metas.each(function () {
-      var $meta = $(this)
-      var key = $meta.attr('name').split('govuk:')[1]
-
-      var dimension = dimensionMappings[key]
+    for (var i = 0; i < metas.length; i++) {
+      var meta = metas[i]
+      var metaKey = meta.getAttribute('name').split('govuk:')[1]
+      var dimension = dimensionMappings[metaKey]
       if (dimension) {
-        tags[key] = $meta.attr('content')
+        tags[metaKey] = meta.getAttribute('content')
       }
-    })
+    }
 
-    $.each(dimensionMappings, function (key, dimension) {
-      var value = tags[key] || dimension.defaultValue
+    for (var key in dimensionMappings) {
+      var value = tags[key] || dimensionMappings[key].defaultValue
       if (typeof value !== 'undefined') {
-        customDimensions['dimension' + dimension.dimension] = value
+        customDimensions['dimension' + dimensionMappings[key].dimension] = value
       }
-    })
+    }
 
     return customDimensions
   }
 
   function customDimensionsFromDom () {
+    var mainLang = document.getElementById('content')
+    if (mainLang) {
+      mainLang = mainLang.getAttribute('lang')
+    }
+    var globalBar = document.querySelector('[data-module="global-bar"]') || false
+    if (globalBar) {
+      globalBar = globalBar.style.display !== 'none'
+    }
     return {
       dimension26: GOVUK.PageContent.getNumberOfSections(),
       dimension27: GOVUK.PageContent.getNumberOfLinks(),
-      dimension23: $('main[id="content"]').attr('lang') || 'unknown',
-      dimension38: $('[data-module="global-bar"]').is(':visible') && 'Global Banner viewed'
+      dimension23: mainLang || 'unknown',
+      dimension38: globalBar && 'Global Banner viewed'
     }
   }
 
   function abTestCustomDimensions () {
-    var $abMetas = $('meta[name^="govuk:ab-test"]')
+    var abMetas = document.querySelectorAll("meta[name^='govuk:ab-test']")
     var customDimensions = {}
 
-    $abMetas.each(function () {
-      var $meta = $(this)
-      var dimension = parseInt($meta.data('analytics-dimension'))
-      var testNameAndBucket = $meta.attr('content')
+    for (var i = 0; i < abMetas.length; i++) {
+      var meta = abMetas[i]
+      var dimension = parseInt(meta.getAttribute('data-analytics-dimension'))
+      var testNameAndBucket = meta.getAttribute('content')
 
       if (dimension) {
         customDimensions['dimension' + dimension] = testNameAndBucket
       }
-    })
+    }
 
     return customDimensions
   }

data/app/assets/javascripts/govuk_publishing_components/analytics/ecommerce.js

@@ -1,5 +1,5 @@
 // https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce
-/* global GOVUK, $, ga */
+/* global GOVUK, ga */
 
 (function () {
   'use strict'
@@ -12,25 +12,25 @@
     this.init = function (element) {
       // Limiting to 100 characters to avoid noise from extra longs search queries
       // and to stop the size of the payload going over 8k limit.
-      var searchQuery = GOVUK.analytics.stripPII(element.attr('data-search-query')).substring(0, 100).toLowerCase()
-      var ecommerceRows = element.find('[data-ecommerce-row]')
-      var startPosition = parseInt(element.data('ecommerce-start-index'), 10)
-      var listTitle = element.data('list-title') || DEFAULT_LIST_TITLE
-      var variant = element.data('ecommerce-variant')
-      var trackClickLabel = element.data('track-click-label') || DEFAULT_TRACK_CLICK_LABEL
-
-      ecommerceRows.each(function (index, ecommerceRow) {
-        var $ecommerceRow = $(ecommerceRow)
-        var listSubheading = $ecommerceRow.data('ecommerce-subheading') || undefined
-        var contentId = $ecommerceRow.attr('data-ecommerce-content-id')
-        var path = $ecommerceRow.attr('data-ecommerce-path')
-
-        var indexOverride = $ecommerceRow.attr('data-ecommerce-index')
-        index = indexOverride ? parseInt(indexOverride, 10) - 1 : index
+      var searchQuery = GOVUK.analytics.stripPII(element.getAttribute('data-search-query')).substring(0, 100).toLowerCase()
+      var ecommerceRows = element.querySelectorAll('[data-ecommerce-row]')
+      var startPosition = parseInt(element.getAttribute('data-ecommerce-start-index'), 10)
+      var listTitle = element.getAttribute('data-list-title') || DEFAULT_LIST_TITLE
+      var variant = element.getAttribute('data-ecommerce-variant') || undefined
+      var trackClickLabel = element.getAttribute('data-track-click-label') || DEFAULT_TRACK_CLICK_LABEL
+
+      for (var i = 0; i < ecommerceRows.length; i++) {
+        var ecommerceRow = ecommerceRows[i]
+        var listSubheading = ecommerceRow.getAttribute('data-ecommerce-subheading') || undefined
+        var contentId = ecommerceRow.getAttribute('data-ecommerce-content-id') || undefined
+        var path = ecommerceRow.getAttribute('data-ecommerce-path')
+
+        var indexOverride = ecommerceRow.getAttribute('data-ecommerce-index')
+        var index = indexOverride ? parseInt(indexOverride, 10) - 1 : i
 
         addImpression(contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant)
-        trackProductOnClick($ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
-      })
+        trackProductOnClick(ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
+      }
     }
 
     function constructData (contentId, path, position, listTitle, listSubheading, searchQuery, variant) {
@@ -67,7 +67,7 @@
     }
 
     function trackProductOnClick (row, contentId, path, position, searchQuery, listTitle, listSubheading, variant, trackClickLabel) {
-      row.click(function () {
+      row.addEventListener('click', function () {
         if (contentId || path) {
           var clickData = constructData(contentId, path, position, listTitle, listSubheading, searchQuery, variant)
           ga('ec:addProduct', clickData)
@@ -82,18 +82,18 @@
   }
 
   Ecommerce.ecLoaded = false
-  Ecommerce.start = function (element) {
+  Ecommerce.start = function (elements) {
     if (!window.ga) { return }
-    element = element || $('[data-analytics-ecommerce]')
-    if (element.length > 0) {
+    elements = elements || document.querySelectorAll('[data-analytics-ecommerce]')
+    if (elements.length > 0) {
       if (!Ecommerce.ecLoaded) {
         ga('require', 'ec')
         Ecommerce.ecLoaded = true
       }
-      element.each(function (index) {
+      for (var i = 0; i < elements.length; i++) {
         var ecommerce = new Ecommerce()
-        ecommerce.init($(this))
-      })
+        ecommerce.init(elements[i])
+      }
     }
   }
 

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/components/_big-number.scss

@@ -1,13 +1,21 @@
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
+  @include govuk-typography-common;
+  @include govuk-text-colour;
 }
 
 .gem-c-big-number__value {
-  @include govuk-font($size: 80, $weight: bold);
+  font-size: 80px;
+  @include govuk-typography-weight-bold;
+  line-height: 1;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(80px);
+  }
 }
 
 .gem-c-big-number__label {
-  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+  @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