govuk_publishing_components 37.2.4 → 37.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 954001323bc3368084beb9aa38f8a4ddd3d5270befbb7a90099af0350e0e8334
-  data.tar.gz: 3d828c3d3262b055e3203554a21fccf2dccadb4f7ed32c24f53a1faaee8d08fb
+  metadata.gz: f7a4d71679bce34c3c53255372e12812f5908a8ffefa866b090b3072d41f3745
+  data.tar.gz: db303cecf8d41c5bc9034b456422391432194346d30ed7ba7c02327f90d32634
 SHA512:
-  metadata.gz: c9f683e2de4a2907806333a59f6d20aa3d236ee7f477749a617d68c64eecfff983f2dfd9dae9f752a83d803d3d9efd3bd55f43d665807246d2a8ddcca0c9f563
-  data.tar.gz: 39fd412b715129e7fa78f281cf4d33382e20e880c732515dd20f2807403e6e929decfb961a50ab6f6423f07cb2f1b7156254dbefb2107970c70cc731b83f8e3f
+  metadata.gz: a4d729e0d668e689eef1ab993ee9ab48e5a7bfd50876659175d9bee9377e46aac4ace318bd620842534f3cc05764eb850ec0103e6cc890fc3a942b3202f9788d
+  data.tar.gz: 52b24d45ec33e237f05defa2dc1fd0fc2bd93be96687f6ab9afb88e9a420ab48120a57bcc70f71fcb76163a3ab83dc330cbd53886e7bdab0ae8d2becfbc525bd

data/app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js

@@ -22,12 +22,13 @@ window.GOVUK.analyticsVars = window.GOVUK.analyticsVars || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
   AutoScrollTracker.prototype.startModule = function () {
+    window.removeEventListener('cookie-consent', this.start)
     if (window.GOVUK.analyticsVars.scrollTrackerStarted) {
       return
     }

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

@@ -11,25 +11,6 @@ var analyticsInit = function () {
     var crossDomainLinkedDomains = window.GOVUK.analyticsVars.linkedDomains || false
   }
 
-  window.GOVUK.Analytics.checkDigitalIdentityConsent = function (location) {
-    if (!location || !location.search) return
-    // this checks for the presence of the Digital Identity cookie consent query parameter and updates our consent cookie accordingly
-    // This is so that users don't see multiple cookie banners when they move between the different account management pages, as some will be on GOV.UK and others will be on the DI domain.
-    var digitalIdentityConsent = /([?&]cookie_consent=)(accept|reject)/.exec(location.search)
-    if (digitalIdentityConsent) {
-      if (digitalIdentityConsent[2] === 'accept') {
-        window.GOVUK.setConsentCookie({ usage: true })
-        // set cookies_preferences_set to true to prevent cookie banner showing
-        window.GOVUK.cookie('cookies_preferences_set', 'true')
-      } else if (digitalIdentityConsent[2] === 'reject') {
-        window.GOVUK.setConsentCookie({ usage: false })
-        window.GOVUK.cookie('cookies_preferences_set', 'true')
-      }
-    }
-  }
-
-  window.GOVUK.Analytics.checkDigitalIdentityConsent(window.location)
-
   var consentCookie = window.GOVUK.getConsentCookie()
   var dummyAnalytics = {
     addLinkedTrackerDomain: function () {},

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

@@ -16,8 +16,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
@@ -27,6 +27,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Ga4AutoTracker.prototype.sendEvent = function () {
     if (window.dataLayer) {
+      window.removeEventListener('cookie-consent', this.start)
       try {
         var data = this.module.getAttribute(this.trackingTrigger)
         data = JSON.parse(data) || {}

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

@@ -268,7 +268,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
         } catch (e) {
           // if there's a problem with the config, don't start the tracker
-          console.error('Unable to JSON.parse or JSON.stringify index: ' + e.message, window.location)
+          console.error('Unable to JSON.parse or JSON.stringify index: ', e, window.location)
         }
       },
 

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

@@ -16,14 +16,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
   // triggered by cookie-consent event, which happens when users consent to cookies
   Ga4EventTracker.prototype.startModule = function () {
     if (window.dataLayer) {
+      window.removeEventListener('cookie-consent', this.start)
       this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
     }
   }

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

@@ -18,14 +18,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
   // triggered by cookie-consent event, which happens when users consent to cookies
   Ga4FormTracker.prototype.startModule = function () {
     if (window.dataLayer) {
+      window.removeEventListener('cookie-consent', this.start)
       this.module.addEventListener('submit', this.trackFormSubmit.bind(this))
     }
   }
@@ -88,7 +89,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       } else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex].value) {
         input.answer = elem.options[elem.selectedIndex].text
       } else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
-        if (this.includeTextInputValues) {
+        if (this.includeTextInputValues || elem.hasAttribute('data-ga4-form-include-input')) {
           var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
           input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
         } else {

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

@@ -19,14 +19,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
   // triggered by cookie-consent event, which happens when users consent to cookies
   Ga4LinkTracker.prototype.startModule = function () {
     if (window.dataLayer) {
+      window.removeEventListener('cookie-consent', this.start)
       this.handleClick = this.handleClick.bind(this)
       this.handleMousedown = this.handleMousedown.bind(this)
 
@@ -47,8 +48,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     } else if (this.trackLinksOnly && target.closest('a')) {
       if (!this.limitToElementClass) {
         this.trackClick(event)
-      } else if (target.closest('.' + this.limitToElementClass)) {
-        this.trackClick(event)
+      } else {
+        var classes = this.limitToElementClass.split(',')
+
+        for (var i = 0; i < classes.length; i++) {
+          if (target.closest('.' + classes[i].trim())) {
+            // Stops the link tracker firing twice if the link itself has data-ga4-link, and the parent element does as well.
+            if (target.closest('[data-ga4-link]') !== target.closest('[data-ga4-limit-to-element-class]')) {
+              return
+            }
+            this.trackClick(event)
+          }
+        }
       }
     }
   }

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

@@ -22,12 +22,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
   Ga4ScrollTracker.prototype.startModule = function () {
+    window.removeEventListener('cookie-consent', this.start)
     if (window.GOVUK.analyticsGa4.vars.scrollTrackerStarted) {
       return
     }

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js

@@ -15,8 +15,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
     if (consentCookie && consentCookie.usage) {
       this.startModule()
     } else {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
     }
   }
 
@@ -25,6 +25,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
     // only run this code if the dataLayer exists and an element with a data-ga4-ecommerce-path
     // attribute exists as this indicates that ecommerce tracking is required
     if (window.dataLayer && this.module.querySelector('[data-ga4-ecommerce-path]')) {
+      window.removeEventListener('cookie-consent', this.start)
       this.trackResults()
       this.module.addEventListener('click', this.handleClick.bind(this))
     }

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

@@ -2,6 +2,7 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
 
 var initFunction = function () {
+  window.removeEventListener('cookie-consent', window.GOVUK.analyticsGa4.init)
   var consentCookie = window.GOVUK.getConsentCookie()
 
   if (consentCookie && consentCookie.usage) {

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

@@ -26,13 +26,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
     if (this.$acceptCookiesButton) {
-      this.$acceptCookiesButton.style.display = 'block'
       this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
     }
 
     this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
     if (this.$rejectCookiesButton) {
-      this.$rejectCookiesButton.style.display = 'block'
       this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
@@ -45,7 +43,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
-        this.$module.style.display = 'block'
+        this.$module.removeAttribute('hidden')
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
@@ -53,18 +51,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
 
         window.GOVUK.deleteUnconsentedCookies()
-      } else {
-        this.$module.style.display = 'none'
       }
-    } else {
-      this.$module.style.display = 'none'
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
       this.$module.hidden = true
-      this.$module.style.display = 'none'
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 

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

@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // if statements ensure these functions don't execute during testing
   if (typeof window.GOVUK.loadAnalytics !== 'undefined') {
+    window.GOVUK.loadAnalytics.loadExtraDomains()
     if (typeof window.GOVUK.analyticsGa4.vars === 'undefined') {
       window.GOVUK.loadAnalytics.loadGa4()
     }

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -10,15 +10,15 @@
 
   YoutubeLinkEnhancement.prototype.init = function () {
     if (!this.campaignCookiesAllowed()) {
-      this.startModule = this.startModule.bind(this)
-      window.addEventListener('cookie-consent', this.startModule)
+      this.start = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.start)
       return
     }
     this.startModule()
   }
 
   YoutubeLinkEnhancement.prototype.startModule = function () {
-    window.removeEventListener('cookie-consent', this.startModule)
+    window.removeEventListener('cookie-consent', this.start)
     var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
 
     if ($youtubeLinks.length > 0) {

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

@@ -70,6 +70,12 @@ window.GOVUK.loadAnalytics = {
     }
   ],
 
+  loadExtraDomains: function () {
+    if (Array.isArray(window.GOVUK.analyticsGa4Domains)) {
+      this.domains = this.domains.concat(window.GOVUK.analyticsGa4Domains)
+    }
+  },
+
   // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
   linkedDomains: window.GOVUK.analytics.linkedDomains,
 
@@ -99,18 +105,7 @@ window.GOVUK.loadAnalytics = {
 
   loadGa4: function (currentDomain) {
     currentDomain = currentDomain || window.location.hostname
-    var environment = false
-    // lots of dev domains, so simplify the matching process
-    if (currentDomain.match(/[a-zA-Z0-9.-]+dev\.gov\.uk/)) {
-      environment = this.domains[0]
-    } else {
-      for (var i = 0; i < this.domains.length; i++) {
-        if (this.arrayContains(currentDomain, this.domains[i].domains)) {
-          environment = this.domains[i]
-          break
-        }
-      }
-    }
+    var environment = this.getEnvironment(currentDomain)
 
     // If we recognise the environment (i.e. the string isn't empty), load in GA4
     if (environment) {
@@ -135,5 +130,18 @@ window.GOVUK.loadAnalytics = {
 
   arrayContains: function (valueToFind, array) {
     return array.indexOf(valueToFind) !== -1
+  },
+
+  getEnvironment: function (currentDomain) {
+    // lots of dev domains, so simplify the matching process
+    if (currentDomain.match(/[a-zA-Z0-9.-]+dev\.gov\.uk/)) {
+      return this.domains[0]
+    } else {
+      for (var i = 0; i < this.domains.length; i++) {
+        if (this.arrayContains(currentDomain, this.domains[i].domains)) {
+          return this.domains[i]
+        }
+      }
+    }
   }
 }

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

@@ -43,7 +43,7 @@
                 element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
               } catch (e) {
                 // if there's a problem with the module, catch the error to allow other modules to start
-                console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
+                console.error('Error starting ' + moduleName + ' component JS: ', e, window.location)
               }
             }
           }

data/app/assets/javascripts/govuk_publishing_components/rum-loader.js

@@ -19,6 +19,7 @@
   })()
 
   var insertScript = function () {
+    window.removeEventListener('cookie-consent', insertScript)
     var marker = document.querySelector('script[data-lux-reporter-script]')
 
     if (!marker) {
@@ -37,8 +38,6 @@
   if (parsedCookie.usage === true) {
     insertScript()
   } else {
-    window.addEventListener('cookie-consent', function () {
-      insertScript()
-    })
+    window.addEventListener('cookie-consent', insertScript)
   }
 })()

data/app/assets/stylesheets/component_guide/application.scss

@@ -165,7 +165,7 @@ $gem-guide-border-width: 1px;
   h3,
   h4 {
     margin-top: 0;
-    margin-bottom: $govuk-gutter / 2;
+    margin-bottom: calc($govuk-gutter / 2);
   }
 
   h3 a {

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -40,7 +40,7 @@
   list-style-type: none;
 
   @include govuk-media-query($from: tablet) {
-    padding-top: govuk-spacing(6) / 4;
+    padding-top: calc(govuk-spacing(6) / 4);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,25 +1,14 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/cookie-banner/cookie-banner";
 
-.gem-c-cookie-banner .govuk-button-group[hidden] {
-  display: none;
-}
-
-.govuk-cookie-banner .govuk-cookie-banner__heading[hidden] {
-  display: none;
-}
-
-.js-enabled {
-  .gem-c-cookie-banner {
-    display: none; // shown with JS, always on for non-JS
+.gem-c-cookie-banner {
+  [hidden],
+  .govuk-button-group[hidden],
+  .govuk-cookie-banner__heading[hidden] {
+    display: none;
   }
 }
 
-// can't be used without js so implement there
-.gem-c-cookie-banner .gem-c-button {
-  display: none;
-}
-
 .gem-c-cookie-banner__confirmation {
   // This element is focused using JavaScript so that it's being read out by screen readers
   // for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`

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

@@ -186,7 +186,7 @@
   @include govuk-font($size: false);
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
-  margin: 0 0 (govuk-spacing(3) / 2);
+  margin: 0 0 calc(govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
   @include govuk-media-query($from: tablet) {
@@ -196,7 +196,7 @@
 
 .gem-c-image-card__description {
   @include govuk-font($size: 19);
-  padding-top: (govuk-spacing(3) / 2);
+  padding-top: calc(govuk-spacing(3) / 2);
   word-wrap: break-word;
 }
 
@@ -204,7 +204,7 @@
   @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
-  padding: (govuk-spacing(3) / 2) 0 0 0;
+  padding: calc(govuk-spacing(3) / 2) 0 0 0;
   margin: 0;
   list-style: none;
 

data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss

@@ -46,7 +46,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
     bottom: inherit;
     left: inherit;
     width: auto;
-    max-width: $govuk-page-width * 2 / 3;
+    max-width: calc($govuk-page-width * (2 / 3));
     height: auto;
     margin: $govuk-modal-margin auto;
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -34,7 +34,7 @@ $gem-c-print-link-background-height: 18px;
 }
 
 .gem-c-print-link__link {
-  box-shadow: inset 0 0 0 1px $govuk-border-colour;
+  box-shadow: inset 0 0 0 1px govuk-colour("dark-grey");
 
   &:focus {
     border: 0;
@@ -43,7 +43,7 @@ $gem-c-print-link-background-height: 18px;
 }
 
 .gem-c-print-link__button {
-  border: 1px solid $govuk-border-colour;
+  border: 1px solid govuk-colour("dark-grey");
   color: $govuk-link-colour;
   cursor: pointer;
   margin: govuk-spacing(0);

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -108,7 +108,7 @@ $large-input-size: 50px;
 
 @mixin icon-positioning($container-size) {
   $icon-dimension: 20px;
-  $icon-position: ($container-size - $icon-dimension) / 2;
+  $icon-position: calc(($container-size - $icon-dimension) / 2);
 
   display: block;
   pointer-events: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -18,7 +18,7 @@ $share-button-height: 30px;
   padding-left: ($share-button-width + govuk-spacing(2));
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  font-size: $share-button-height / 2;
+  font-size: calc($share-button-height / 2);
 }
 
 .gem-c-share-links__link {

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -3,7 +3,7 @@
 .gem-c-single-page-notification-button__submit {
   padding: govuk-spacing(2);
   margin: govuk-spacing(0);
-  border: 1px solid $govuk-border-colour;
+  border: 1px solid govuk-colour("dark-grey");
   color: $govuk-link-colour;
   cursor: pointer;
   background: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -32,7 +32,7 @@
   }
 
   .gem-c-step-nav-related__pretitle {
-    margin-bottom: govuk-spacing(6) / 4;
+    margin-bottom: calc(govuk-spacing(6) / 4);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -260,8 +260,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     z-index: 6;
     bottom: 0;
     left: 0;
-    margin-left: $number-circle-size / 4;
-    width: $number-circle-size / 2;
+    margin-left: calc($number-circle-size / 4);
+    width: calc($number-circle-size / 2);
     height: 0;
     border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
   }
@@ -278,8 +278,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       &::before {
-        margin-left: $number-circle-size-large / 4;
-        width: $number-circle-size-large / 2;
+        margin-left: calc($number-circle-size-large / 4);
+        width: calc($number-circle-size-large / 2);
       }
 
       &::after {
@@ -508,9 +508,9 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     z-index: 5;
     top: .6em; // position the dot to align with the first row of text in the link
     left: -(govuk-spacing(6) + govuk-spacing(3));
-    margin-top: -($stroke-width / 2);
-    margin-left: ($number-circle-size / 2);
-    width: $number-circle-size / 2;
+    margin-top: - calc($stroke-width / 2);
+    margin-left: calc($number-circle-size / 2);
+    width: calc($number-circle-size / 2);
     height: $stroke-width;
     background: govuk-colour("black");
   }
@@ -519,7 +519,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     @include govuk-media-query($from: tablet) {
       &::before {
         left: -(govuk-spacing(9));
-        margin-left: ($number-circle-size-large / 2);
+        margin-left: calc($number-circle-size-large / 2);
       }
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss

@@ -8,7 +8,7 @@ $table-header-background-colour: govuk-colour("light-grey", $legacy: "grey-3");
 $sort-link-active-colour: govuk-colour("white");
 $sort-link-arrow-size: 14px;
 $sort-link-arrow-size-small: 8px;
-$sort-link-arrow-spacing: $sort-link-arrow-size / 2;
+$sort-link-arrow-spacing: calc($sort-link-arrow-size / 2);
 $table-row-hover-background-colour: rgba(43, 140, 196, .2);
 $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -23,10 +23,10 @@
     padding-left: $icon-size;
 
     // Center the icon around the baseline
-    padding-top: ($icon-size - $line-height-mobile) / 2;
+    padding-top: calc(($icon-size - $line-height-mobile) / 2);
 
     @include govuk-media-query($from: tablet) {
-      padding-top: ($icon-size - $line-height-tablet) / 2;
+      padding-top: calc(($icon-size - $line-height-tablet) / 2);
     }
 
     p {

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -3,7 +3,7 @@
 
   @include govuk-font($size: 16);
 
-  $gutter-two-thirds: $govuk-gutter - ($govuk-gutter / 3);
+  $gutter-two-thirds: $govuk-gutter - calc($govuk-gutter / 3);
 
   ol,
   ul,

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -14,7 +14,6 @@ module GovukPublishingComponents
           info-frontend
           service-manual-frontend
           smart-answers
-          whitehall
         ]
 
         @static_data = find_static(results)

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -7,6 +7,7 @@
   hide_order_copy_link ||= false
   attributes = []
   data_attributes ||= {}
+  details_ga4_attributes ||= {}
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   container_class_names = %w[gem-c-attachment govuk-!-display-none-print]
@@ -118,7 +119,8 @@
     <% if attachment.alternative_format_contact_email %>
       <%= tag.p t("components.attachment.request_format_text"), class: "gem-c-attachment__metadata" %>
       <%= render "govuk_publishing_components/components/details", {
-        title: t("components.attachment.request_format_cta")
+        title: t("components.attachment.request_format_cta"),
+        ga4_attributes: details_ga4_attributes,
       } do %>
         <%= t("components.attachment.request_format_details_html", alternative_format_contact_email: attachment.alternative_format_contact_email) %>
       <% end %>

data/app/views/govuk_publishing_components/components/_back_link.html.erb

@@ -2,11 +2,21 @@
   add_gem_component_stylesheet("back-link")
 
   text ||= t('components.back_link.back')
-  data_attributes ||= nil
+  data_attributes ||= {}
+  disable_ga4 ||= false
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-back-link govuk-back-link govuk-!-display-none-print")
+  unless disable_ga4
+    ga4_link = {
+      event_name: "navigation",
+      type: "back",
+      url: href,
+    }
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" })
+    component_helper.add_data_attribute({ ga4_link: ga4_link })
+  end
 %>
-<%= link_to(
-  text,
-  href,
-  class: %w(gem-c-back-link govuk-back-link govuk-!-display-none-print),
-  data: data_attributes
-) %>
+<%= tag.a(**component_helper.all_attributes.merge!({ href: href })) do %>
+  <%= text %>
+<% end %>

data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb

@@ -34,7 +34,7 @@
   disable_ga4 ||= false
 %>
 
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>" hidden>
   <div class="govuk-cookie-banner__message govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

data/app/views/govuk_publishing_components/components/_govspeak.html.erb

@@ -9,9 +9,24 @@
   classes << direction_class if direction_class
   classes << "disable-youtube" if disable_youtube_expansions
   classes << "gem-c-govspeak--inverse" if inverse
+
+  disable_ga4 ||= false
+
+  data_modules = "govspeak"
+  data_modules << " ga4-link-tracker" unless disable_ga4
+  data_attributes = { module: data_modules }
+
+  unless disable_ga4
+    data_attributes.merge!({
+      ga4_track_links_only: "",
+      ga4_limit_to_element_class: "call-to-action, info-notice, help-notice, advisory",
+      ga4_link: { "event_name": "navigation", "type": "callout" }.to_json,
+    })
+  end
+
 %>
 
-<div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>" data-module="govspeak">
+<%= tag.div(class: "gem-c-govspeak govuk-govspeak " + classes.join(" "), data: data_attributes) do %>
   <% if local_assigns.include?(:content) %>
     <% if content.html_safe? %>
       <%= content %>
@@ -32,4 +47,4 @@
   <% elsif block_given? %>
     <%= yield %>
   <% end %>
-</div>
+<% end %>

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -99,12 +99,10 @@
     <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     <% end -%>
+    <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
     <%= render "govuk_publishing_components/components/skip_link", {
       href: "#content"
     } %>
-
-    <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
-
     <% unless omit_header %>
       <% if show_explore_header %>
         <% if homepage %>

data/app/views/govuk_publishing_components/components/_share_links.html.erb

@@ -5,6 +5,7 @@
   title ||= false
   track_as_sharing ||= false
   track_as_follow ||= false
+  ga4_data ||= {}
   stacked ||= false
   columns ||= false
 
@@ -57,15 +58,15 @@
                 'index_link': index + 1,
                 'index_total': links.length,
                 'text': link[:icon],
-              }
+              }.merge(ga4_data)
             end
             if track_as_follow
               ga4_link_data = {
                 'event_name': 'navigation',
                 'type': 'follow us',
                 'index_link': index + 1,
-                'index_total': links.length
-              }
+                'index_total': links.length,
+              }.merge(ga4_data)
             end
           %>
           <%

data/app/views/govuk_publishing_components/components/docs/attachment.yml

@@ -76,6 +76,19 @@ examples:
         content_type: application/pdf
         file_size: 20000
         alternative_format_contact_email: defra.helpline@defra.gsi.gov.uk
+  with_contact_email_and_ga4_tracking:
+    description: The attachment component can contain the details component as shown. The details component provides all of its own GA4 tracking, but in most situations also requires an `index_section_count` attribute to be passed manually. This can be done via the attachment component as shown (along with any other needed GA4 attributes).
+    data:
+      attachment:
+        title: "Department for Transport information asset register"
+        url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv
+        filename: department-for-transport-information-asset-register.csv
+        content_type: application/pdf
+        file_size: 20000
+        alternative_format_contact_email: defra.helpline@defra.gsi.gov.uk
+      details_ga4_attributes: {
+        index_section_count: 4
+      }
   with_data_attributes:
     data:
       attachment:

data/app/views/govuk_publishing_components/components/docs/back_link.yml

@@ -6,6 +6,7 @@ shared_accessibility_criteria:
 - link
 govuk_frontend_components:
   - back-link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -14,8 +15,9 @@ examples:
     data:
       text: 'Back to document list'
       href: '#'
-  with_data_attributes:
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
     data:
       href: '#'
-      data_attributes:
-        an_attribute: the value
+      disable_ga4: true

data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml

@@ -1,11 +1,11 @@
 name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
-  By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
+  By default the cookie banner is hidden. If JavaScript is enabled, the banner is displayed if cookie preferences are not set. The banner will stay hidden if cookie preferences are already set.
 
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
 
-  If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
+  If the examples below are not showing the banner, make sure JS is enabled, and the `cookies_preferences_set` cookie is not present or is set to false.
 accessibility_criteria: |
   Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
 shared_accessibility_criteria:

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -914,3 +914,12 @@ examples:
             <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
           </figcaption>
         </figure>
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      block: |
+        <p>
+          <a href='https://www.gov.uk'>Hello World</a>
+        </p>
+      disable_ga4: true

data/app/views/govuk_publishing_components/components/docs/share_links.yml

@@ -107,9 +107,16 @@ examples:
         }
       ]
   track_as_sharing_links:
-    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+    description: |
+      Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA.
+      If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA.
+      In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+      Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object.
     data:
       track_as_sharing: true
+      ga4_data: {
+        optional_extra_values: "go here"
+      }
       links: [
         {
           href: 'share',
@@ -123,9 +130,15 @@ examples:
         },
       ]
   track_as_follow_links:
-    description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+    description: |
+      Where the component is used to allow users to follow us on social media, tracking can be added.
+      When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+      Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object.
     data:
       track_as_follow: true
+      ga4_data: {
+        optional_extra_values: "go here"
+      }
       links: [
         {
           href: 'follow',

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "37.2.4".freeze
+  VERSION = "37.3.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 37.2.4
+  version: 37.3.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-24 00:00:00.000000000 Z
+date: 2024-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -1497,7 +1497,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.5
+rubygems_version: 3.5.6
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications