govuk_publishing_components 29.6.0 → 29.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e3f8aaf064237fbd67e4b472e5e57dcafeb3a16ed3228c7b0b45114d7f68257
-  data.tar.gz: dc5d297b2e7d409277024778eabc48a9faf2a8b68bff7f309426d028b4736f2b
+  metadata.gz: d0d30bd1a2b86ab711560f26438e2ba7907402831cc617b752d3e1fb05c2e6cc
+  data.tar.gz: e13d38616b71e39a1e3e23df2999eb88f9824a668dc8347a4b914a58e86bf2bb
 SHA512:
-  metadata.gz: 38c1773770dc36ecce0857dd4516d8f6aa350542b25d3d0f946d56d664eb5661d3c53da68286b6a5a9c51344c6cd5c927a4206a9d0a2350cd47e737277e7dfb0
-  data.tar.gz: 9b5f523c0cacffa3f6f12858dfce51f1f770000447e6d29d83d47856d2a22b51e493b64fcd930755a893293566260ade49d9b295bfb31976c946120ca9e06923
+  metadata.gz: d91d69b91a14c9f6acaf230a32c9c75385f54cd7c2ff924860f87e3578ea32f58726d16e0de1d5ccbfbeb808da0ceba804adc9827cd5ae2370dae3b6b478090b
+  data.tar.gz: 036b79310b2cef0189a2536eab0d70bdf0d293cd079533da198f666c00ee04ddc7f34a22468ad4b853d2875fe1d44ec8ec305157c115ea19e0b2760e21ccd401

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

@@ -1,89 +1,88 @@
-;(function (global) {
-  'use strict'
-
-  var GOVUK = global.GOVUK || {}
-  GOVUK.Modules = GOVUK.Modules || {}
-
-  GOVUK.Modules.ExplicitCrossDomainLinks = function () {
-    this.start = function ($module) {
-      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'
-      }
-
-      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)
-    }
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ExplicitCrossDomainLinks ($module) {
+    this.$module = $module
+  }
 
-    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') {
-        // 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)
-      }
-
-      // 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()
-      }
+  ExplicitCrossDomainLinks.prototype.init = function () {
+    this.attribute = 'href'
+    this.attributeValue = this.$module.getAttribute(this.attribute)
+    this.eventType = 'click'
+    if (!this.attributeValue) {
+      this.attribute = 'action'
+      this.attributeValue = this.$module.getAttribute(this.attribute)
+      this.eventType = 'submit'
     }
 
-    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)
+    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.$module.addEventListener(this.eventType, this.handleEvent)
+  }
 
-      if (!global.ga) {
-        return
-      }
+  ExplicitCrossDomainLinks.prototype.decorate = function (element, param, attribute) {
+    var attributeValue = element.getAttribute(attribute)
 
-      global.ga(function () {
-        var trackers = global.ga.getAll()
+    if (!attributeValue) { return }
 
-        if (!trackers.length) { return }
+    if (attributeValue.indexOf('?') !== -1) {
+      attributeValue += '&' + param
+    } else {
+      attributeValue += '?' + param
+    }
 
-        var linker = new global.gaplugins.Linker(trackers[0])
-        var attrValue = element.getAttribute(attribute)
+    element.setAttribute(attribute, attributeValue)
+  }
 
-        element.setAttribute(attribute, linker.decorate(attrValue))
-      })
+  ExplicitCrossDomainLinks.prototype.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 = window.GOVUK.cookie('cookies_preferences_set')
+    var cookieConsent = window.GOVUK.getConsentCookie()
+
+    if (cookieBannerEngaged !== 'true') {
+      // If not engaged, append only ?cookie_consent=not-engaged
+      this.decorate(this.$module, 'cookie_consent=not-engaged', this.attribute)
+    } else if (cookieConsent && cookieConsent.usage === true) {
+      this.handleCookiesAccepted()
+    } else {
+      this.decorate(this.$module, 'cookie_consent=reject', this.attribute)
     }
 
-    this.decorate = function (element, param, attribute) {
-      var attributeValue = element.getAttribute(attribute)
+    // remove the event listener to avoid an infinite loop
+    this.$module.removeEventListener(this.eventType, this.handleEvent)
 
-      if (!attributeValue) { return }
+    // if the element is a form, submit it. If it is a link, click it
+    if (this.eventType === 'submit') {
+      this.$module.submit()
+    } else {
+      this.$module.click()
+    }
+  }
 
-      if (attributeValue.indexOf('?') !== -1) {
-        attributeValue += '&' + param
-      } else {
-        attributeValue += '?' + param
-      }
+  ExplicitCrossDomainLinks.prototype.handleCookiesAccepted = function () {
+    // If the cookie banner was engaged and usage cookie accepted, append ?_ga=clientid if available and cookie_consent=accept
+    var element = this.$module
+    var attribute = this.attribute
+    this.decorate(element, 'cookie_consent=accept', attribute)
 
-      element.setAttribute(attribute, attributeValue)
+    if (!window.ga) {
+      return
     }
+
+    window.ga(function () {
+      var trackers = window.ga.getAll()
+
+      if (!trackers.length) { return }
+
+      var linker = new window.gaplugins.Linker(trackers[0])
+      var attrValue = element.getAttribute(attribute)
+
+      element.setAttribute(attribute, linker.decorate(attrValue))
+    })
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  Modules.ExplicitCrossDomainLinks = ExplicitCrossDomainLinks
+})(window.GOVUK.Modules)

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

@@ -13,6 +13,10 @@
         return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-title').length
+      case isNewBrowsePageLevelTwo():
+        // if there are no accordion sections on the browse level 2 page
+        // then it is a default page with only one section
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length || 1
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardList"]').length
       case isMainstreamBrowsePage():
@@ -46,6 +50,8 @@
         return document.querySelectorAll('a[data-track-category="navAccordionLinkClicked"]').length
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-document-list li a').length
+      case isNewBrowsePageLevelTwo():
+        return document.querySelectorAll('[data-track-count="contentLink"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardLink"]').length
       case isMainstreamBrowsePage():
@@ -98,6 +104,11 @@
       getMetaAttribute(metaNavigationTypeSelector) === 'leaf'
   }
 
+  function isNewBrowsePageLevelTwo () {
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'browse level 2'
+  }
+
   function isNewBrowsePage () {
     return getMetaAttribute(metaApplicationSelector) === 'collections' &&
       getMetaAttribute(metaSectionSelector) === 'new_browse_page' &&

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js

@@ -0,0 +1,49 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  function GtmClickTracking (module) {
+    this.module = module
+    this.trackingTrigger = 'data-gtm-event-name' // elements with this attribute get tracked
+  }
+
+  GtmClickTracking.prototype.init = function () {
+    var trackClicksOn = [this.module]
+    if (!this.module.getAttribute(this.trackingTrigger)) {
+      trackClicksOn = this.module.querySelectorAll('[' + this.trackingTrigger + ']')
+    }
+
+    for (var i = 0; i < trackClicksOn.length; i++) {
+      trackClicksOn[i].addEventListener('click', this.trackClick.bind(this))
+    }
+  }
+
+  GtmClickTracking.prototype.trackClick = function (event) {
+    if (window.dataLayer) {
+      var target = event.currentTarget
+      var data = {
+        event: 'analytics',
+        event_name: target.getAttribute('data-gtm-event-name'),
+        // get entire URL apart from domain
+        link_url: window.location.href.substring(window.location.origin.length),
+        ui: JSON.parse(target.getAttribute('data-gtm-attributes'))
+      }
+      var ariaExpanded = this.checkExpandedState(target)
+      if (ariaExpanded) {
+        data.ui.state = ariaExpanded === 'false' ? 'opened' : 'closed'
+      }
+      window.dataLayer.push(data)
+    }
+  }
+
+  GtmClickTracking.prototype.checkExpandedState = function (clicked) {
+    var expanded = clicked.querySelector('[aria-expanded]')
+    if (expanded) {
+      return expanded.getAttribute('aria-expanded')
+    }
+  }
+
+  Modules.GtmClickTracking = GtmClickTracking
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js

@@ -0,0 +1 @@
+//= require ./analytics-ga4/gtm-click-tracking

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -131,7 +131,6 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
       window.GOVUK.analytics.trackEvent('pageElementInteraction', action, options)
-      console.log('pageElementInteraction', action, options)
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -51,6 +51,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // giving the table a class of mc-stacked
     this.options.stacked = this.$table.classList.contains('mc-stacked')
 
+    // stacked charts require tables to use the th element in the table header
+    // if the th element is not included, then the ENABLED flag is set to false
+    // this will stop the chart and toggleLink from being rendered
+    if (this.options.stacked) {
+      var allTheTHsInTableHead = this.$table.querySelectorAll('thead th')
+      if (allTheTHsInTableHead.length === 0) {
+        this.ENABLED = false
+      }
+    }
+
     // set the negative option based on
     // giving the table a class of mc-negative
     this.options.negative = this.$table.classList.contains('mc-negative')
@@ -106,12 +116,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   MagnaCharta.prototype.apply = function () {
     if (this.ENABLED) {
-      this.constructChart()
-      this.addClassesToHeader()
-      this.applyWidths()
-      this.insert()
-      this.$table.classList.add('mc-hidden')
-      this.applyOutdent()
+      try {
+        this.constructChart()
+        this.addClassesToHeader()
+        this.applyWidths()
+        this.insert()
+        this.$table.classList.add('mc-hidden')
+        this.applyOutdent()
+      } catch (error) {
+        console.error('MagnaCharta error:', error)
+      }
     }
   }
 

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

@@ -35,7 +35,6 @@
         for (var j = 0, k = moduleNames.length; j < k; j++) {
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
           var started = element.getAttribute('data-' + moduleNames[j] + '-module-started')
-
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js

@@ -157,3 +157,40 @@ if (
     LongTaskObserver.observe({ type: ["longtask"] });
   } catch (e) {}
 }
+
+// As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
+// is used when a browser loads a page.
+//
+// The User Timing API (aka window.performance) is used to record the data - to
+// avoid the use of this from breaking the JavaScript for the small number of
+// browsers that don't support it, it's been wrapped in a try/catch block plus a
+// couple of checks to prevent "is not defined" errors.
+//
+// Because the `nextHopProtocol` isn't immediately available - it seems to need
+// a request to be made before it's populated - we need to wait for the
+// `DOMContentReady` event before we can see what the HTTP version is.
+//
+// [1]: https://github.com/alphagov/govuk-rfcs/pull/148
+
+var measureHTTPProtocol = function () {
+  var getEntriesByType = performance.getEntriesByType('navigation')
+
+  if (getEntriesByType.length > 0) {
+    var httpProtocol = JSON.parse(JSON.stringify(performance.getEntriesByType('navigation')[0].nextHopProtocol))
+    LUX.addData("http-protocol", httpProtocol)
+  }
+}
+
+try {
+  if (typeof performance !== 'undefined' && typeof performance.getEntriesByType !== 'undefined') {
+    if (document.readyState === 'complete') {
+      measureHTTPProtocol()
+    } else {
+      window.addEventListener('load', function() {
+        measureHTTPProtocol()
+      })
+    }
+  }
+} catch (e) {
+  console.error('Error in LUX reporting the HTTP protocol (' + window.location + '):', e)
+}