govuk_publishing_components 37.1.0 → 37.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43da95e575a63b626abef7368fbe99d286682778b3933f9b021768277b3a8d17
-  data.tar.gz: a2959e0efd156b0c5d5a70b61561725d55a4c67e58f0e60537970439af0088db
+  metadata.gz: 638e22aafc5fdc6f80b61babb5bcddf89bc41213e5e49afaf95c23a8ca62d5ea
+  data.tar.gz: 3af560c10c9beb1da8db5d930d5bd02b530f5ceeaa65734b5432baf2651a7e9b
 SHA512:
-  metadata.gz: 60593190a4219cf35788d97f6f491c9f36ad873772d2b3908bcb21c347fcadcd061e35c25225acaa89199f5cabb6f0769376847521738cc26ff23eb088febce5
-  data.tar.gz: 22a37d5ff61c2164ef441774aae4f9268a9a46b19e7d5dbc847b7e290af706ce038894cd70a992ffe525a17e61ad205476bdb1d4eedc5e486a9f006a38532183
+  metadata.gz: 3b4d262a5afcc7a3b436b9142daa46e994bbbda7bb5e780a8c98d95df894d9ae6d3a8ae46a62fac7daea39d33006311843d231f786f1b2ba5ebcd47c76a41d3d
+  data.tar.gz: f7274e4d9d134c750ae933b717b7a6efae8fb126c1c5c290646454ab35b153108d2ccda6971f702abea7e6554f079ce68e395fff789c2ff763d0f8a7df9c350f

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -11,5 +11,3 @@
 //= link govuk_publishing_components/vendor/modernizr.js
 //= link govuk_publishing_components/vendor/lux/lux-reporter.js
 //= link govuk_publishing_components/vendor/lux/lux-measurer.js
-
-//= link_tree ../builds

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

@@ -34,8 +34,14 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       return navigator.userAgent
     },
 
+    getTimestamp: function () {
+      return Date.now().toString()
+    },
+
     sendData: function (data) {
       data.govuk_gem_version = this.getGemVersion()
+      data.timestamp = this.getTimestamp()
+
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {
         if (data.event_data) {

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

@@ -75,14 +75,14 @@
   // given an object and a key, insert a value into object[key] if it exists
   Schemas.prototype.addToObject = function (obj, key, value) {
     if (key in obj) {
-      obj[key] = value
+      obj[key] = value + '' // ensure is a string
       return obj
     } else {
       // check for one level of nesting in the object
       for (var property in obj) {
         if (this.isAnObject(obj[property])) {
           if (key in obj[property]) {
-            obj[property][key] = value
+            obj[property][key] = value + '' // ensure is a string
             return obj
           }
         }

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-settings.js

@@ -0,0 +1,109 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function CookieSettings ($module) {
+    this.$module = $module
+  }
+
+  CookieSettings.prototype.init = function () {
+    this.$module.submitSettingsForm = this.submitSettingsForm.bind(this)
+
+    document.querySelector('form[data-module=cookie-settings]')
+      .addEventListener('submit', this.$module.submitSettingsForm)
+
+    this.setInitialFormValues()
+  }
+
+  CookieSettings.prototype.setInitialFormValues = function () {
+    if (!window.GOVUK.cookie('cookies_policy')) {
+      window.GOVUK.setDefaultConsentCookie()
+    }
+
+    var currentConsentCookie = window.GOVUK.cookie('cookies_policy')
+    var currentConsentCookieJSON = JSON.parse(currentConsentCookie)
+
+    // We don't need the essential value as this cannot be changed by the user
+    delete currentConsentCookieJSON.essential
+
+    for (var cookieType in currentConsentCookieJSON) {
+      var radioButton
+
+      if (currentConsentCookieJSON[cookieType]) {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
+      } else {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
+      }
+
+      if (radioButton) {
+        radioButton.checked = true
+      }
+    }
+  }
+
+  CookieSettings.prototype.submitSettingsForm = function (event) {
+    event.preventDefault()
+
+    var formInputs = event.target.getElementsByTagName('input')
+    var options = {}
+
+    for (var i = 0; i < formInputs.length; i++) {
+      var input = formInputs[i]
+      if (input.checked) {
+        var name = input.name.replace('cookies-', '')
+        var value = input.value === 'on'
+
+        options[name] = value
+      }
+    }
+
+    window.GOVUK.setConsentCookie(options)
+    window.GOVUK.setCookie('cookies_preferences_set', true, { days: 365 })
+
+    this.fireAnalyticsEvent(options)
+
+    this.showConfirmationMessage()
+
+    return false
+  }
+
+  CookieSettings.prototype.fireAnalyticsEvent = function (consent) {
+    var eventLabel = ''
+
+    for (var option in consent) {
+      var optionValue = consent[option] ? 'yes' : 'no'
+      eventLabel += option + '-' + optionValue + ' '
+    }
+
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent('cookieSettings', 'Save changes', { label: eventLabel })
+    }
+  }
+
+  CookieSettings.prototype.showConfirmationMessage = function () {
+    var confirmationMessage = document.querySelector('div[data-cookie-confirmation]')
+    // hide the message if already visible so assistive tech is triggered when it appears
+    confirmationMessage.style.display = 'none'
+    var previousPageLink = document.querySelector('.cookie-settings__prev-page')
+    var referrer = CookieSettings.prototype.getReferrerLink()
+
+    document.body.scrollTop = document.documentElement.scrollTop = 0
+
+    if (previousPageLink) {
+      if (referrer && referrer !== document.location.pathname) {
+        previousPageLink.href = referrer
+        previousPageLink.style.display = 'inline'
+      } else {
+        previousPageLink.style.display = 'none'
+      }
+    }
+
+    confirmationMessage.style.display = 'block'
+  }
+
+  CookieSettings.prototype.getReferrerLink = function () {
+    return document.referrer ? new URL(document.referrer).pathname : false
+  }
+
+  Modules.CookieSettings = CookieSettings
+})(window.GOVUK.Modules)

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

@@ -3,49 +3,75 @@
 //= require govuk_publishing_components/analytics/linked-domains
 
 window.GOVUK.loadAnalytics = {
-  productionDomains: [
-    'www.gov.uk',
-    'www-origin.publishing.service.gov.uk',
-    'assets.publishing.service.gov.uk'
-  ],
-  stagingDomains: [
-    'www.staging.publishing.service.gov.uk',
-    'www-origin.staging.publishing.service.gov.uk',
-    'assets.staging.publishing.service.gov.uk'
-  ],
-  integrationDomains: [
-    'www.integration.publishing.service.gov.uk',
-    'www-origin.integration.publishing.service.gov.uk',
-    'assets.integration.publishing.service.gov.uk'
-  ],
-  developmentDomains: [
-    'localhost', '127.0.0.1', '0.0.0.0'
-  ],
-
-  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
-  linkedDomains: window.GOVUK.analytics.linkedDomains,
-
-  ga4EnvironmentVariables: {
-    // initialiseGA4 is used to enable/disable GA4 on specific environments
-    production: {
-      initialiseGA4: true
+  domains: [
+    {
+      // need to have this one at the start, see loadGa4 function
+      name: 'development',
+      domains: [
+        'localhost',
+        '127.0.0.1',
+        '0.0.0.0',
+        'dev.gov.uk'
+      ],
+      initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
+      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
+      preview: 'env-3',
+      gaProperty: 'UA-UNSET',
+      gaPropertyCrossDomain: 'UA-UNSET'
+    },
+    {
+      name: 'production',
+      domains: [
+        'www.gov.uk',
+        'www-origin.publishing.service.gov.uk',
+        'assets.publishing.service.gov.uk'
+      ],
+      initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
+      gaProperty: 'UA-26179049-1',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    staging: {
+    {
+      name: 'staging',
+      domains: [
+        'www.staging.publishing.service.gov.uk',
+        'www-origin.staging.publishing.service.gov.uk',
+        'assets.staging.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
       auth: 'oJWs562CxSIjZKn_GlB5Bw',
-      preview: 'env-5'
+      preview: 'env-5',
+      gaProperty: 'UA-26179049-20',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    integration: {
+    {
+      name: 'integration',
+      domains: [
+        'www.integration.publishing.service.gov.uk',
+        'www-origin.integration.publishing.service.gov.uk',
+        'assets.integration.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
       auth: 'C7iYdcsOlYgGmiUJjZKrHQ',
-      preview: 'env-4'
+      preview: 'env-4',
+      gaProperty: 'UA-26179049-22',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    development: {
+    {
+      name: 'devdocs',
+      domains: [
+        'docs.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
-      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
-      preview: 'env-3'
+      id: 'GTM-TNKCK97'
     }
-  },
+  ],
+
+  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
+  linkedDomains: window.GOVUK.analytics.linkedDomains,
 
   loadUa: function (currentDomain) {
     currentDomain = currentDomain || window.location.hostname
@@ -57,17 +83,14 @@ window.GOVUK.loadAnalytics = {
     window.GOVUK.analyticsVars.gaProperty = 'UA-UNSET'
     window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-UNSET'
 
-    if (this.arrayContains(currentDomain, this.productionDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-1'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
-    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-20'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
-    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-22'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    for (var i = 0; i < this.domains.length; i++) {
+      var current = this.domains[i]
+      if (this.arrayContains(currentDomain, current.domains)) {
+        window.GOVUK.analyticsVars.gaProperty = current.gaProperty
+        window.GOVUK.analyticsVars.gaPropertyCrossDomain = current.gaPropertyCrossDomain
+        break
+      }
     }
-
     // Load universal analytics
     if (typeof window.GOVUK.analyticsInit !== 'undefined') {
       window.GOVUK.analyticsInit()
@@ -76,29 +99,29 @@ window.GOVUK.loadAnalytics = {
 
   loadGa4: function (currentDomain) {
     currentDomain = currentDomain || window.location.hostname
-    var environment = ''
-
-    // Categorise current environment
-    if (this.arrayContains(currentDomain, this.productionDomains)) {
-      environment = 'production'
-    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
-      environment = 'staging'
-    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
-      environment = 'integration'
-    } else if (this.arrayContains(currentDomain, this.developmentDomains) || currentDomain.indexOf('.dev.gov.uk') !== -1) {
-      environment = 'development'
+    var environment = false
+    // lots of dev domains, so simplify the matching process
+    if (currentDomain.match(/\/{2}[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
+        }
+      }
     }
 
     // If we recognise the environment (i.e. the string isn't empty), load in GA4
     if (environment) {
       // If analytics-ga4.js exists and our detected environment has 'initialiseGA4' set to true, load GA4.
-      if (typeof window.GOVUK.analyticsGa4.init !== 'undefined' && this.ga4EnvironmentVariables[environment].initialiseGA4) {
+      if (typeof window.GOVUK.analyticsGa4.init !== 'undefined' && environment.initialiseGA4) {
         window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
         window.GOVUK.analyticsGa4.vars = window.GOVUK.analyticsGa4.vars || {}
-        window.GOVUK.analyticsGa4.vars.id = 'GTM-MG7HG5W'
-        window.GOVUK.analyticsGa4.vars.auth = this.ga4EnvironmentVariables[environment].auth
-        window.GOVUK.analyticsGa4.vars.preview = this.ga4EnvironmentVariables[environment].preview
-        window.GOVUK.analyticsGa4.vars.environment = environment // Used for testing and debugging
+        window.GOVUK.analyticsGa4.vars.id = environment.id
+        window.GOVUK.analyticsGa4.vars.auth = environment.auth
+        window.GOVUK.analyticsGa4.vars.preview = environment.preview
+        window.GOVUK.analyticsGa4.vars.environment = environment.name // Used for testing and debugging
 
         window.GOVUK.analyticsGa4.vars.gem_version = 'not found'
         var gemMeta = document.querySelector('meta[name="govuk:components_gem_version"]')

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/_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: $govuk-page-width * calc(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/_search.scss

@@ -65,7 +65,7 @@ $large-input-size: 50px;
 }
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
-  @include govuk-font($size: 19, $line-height: (28 / 19));
+  @include govuk-font($size: 19, $line-height: calc(28 / 19));
   margin: 0;
   width: 100%;
   height: govuk-em(40, 16);
@@ -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/_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

@@ -17,12 +17,12 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(calc($number-circle-size / 2) - calc($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(calc($number-circle-size-large / 2) - calc($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -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/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss

@@ -48,7 +48,7 @@
 ///  }
 ///
 @mixin columns($items, $columns, $selector: "*", $flow: row) {
-  $rows: ceil($items / $columns);
+  $rows: ceil(calc($items / $columns));
 
   display: -ms-grid;
   display: grid;

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -157,7 +157,7 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      return clean_file_path(file) if regex.match?(src)
+      clean_file_path(file) if regex.match?(src)
     end
 
     def clean_file_path(file)

data/app/models/govuk_publishing_components/component_docs.rb

@@ -31,7 +31,7 @@ module GovukPublishingComponents
     end
 
     def component_in_use(component)
-      return true if @limit_to.include?(component)
+      true if @limit_to.include?(component)
     end
 
     def fetch_component_doc(id)

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

@@ -2,23 +2,39 @@
   add_gem_component_stylesheet("details")
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
   open ||= nil
+  disable_ga4 ||= false
+  @ga4 ||= OpenStruct.new(index_section: 0) unless disable_ga4
+  @ga4[:index_section] += 1 unless disable_ga4
+  ga4_attributes ||= {}
+
   margin_bottom ||= 3
   css_classes = %w(gem-c-details govuk-details)
   css_classes << shared_helper.get_margin_bottom
 
   details_data_attributes = {}
   details_data_attributes[:module] = 'govuk-details gem-details'
+  details_data_attributes[:module] = 'govuk-details gem-details ga4-event-tracker' unless disable_ga4
 
   data_attributes ||= {}
   data_attributes[:details_track_click] = ''
+  unless disable_ga4
+    ga4_event = {
+      event_name: "select_content",
+      type: "detail",
+      text: title,
+      section: title,
+      index_section: @ga4[:index_section],
+    }
+    ga4_event.merge!(ga4_attributes)
+    data_attributes[:ga4_event] = ga4_event
+  end
 
   summary_aria_attributes ||= {}
 %>
 <%= tag.details class: css_classes, data: details_data_attributes, open: open do %>
   <%= tag.summary class: "govuk-details__summary", data: data_attributes, aria: summary_aria_attributes do %>
-    <span class="govuk-details__summary-text">
+    <span class="govuk-details__summary-text" <% unless disable_ga4 %>data-ga4-expandable<% end %>>
       <%= title %>
     </span>
   <% end %>

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

@@ -7,13 +7,13 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
-  classes = %w[gem-c-image-card]
-  classes << "govuk-grid-row" if card_helper.two_thirds
-  classes << "gem-c-image-card--large" if card_helper.large
-  classes << "gem-c-image-card--two-thirds" if card_helper.two_thirds
-  classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
-  classes << brand_helper.brand_class if brand_helper.brand_class
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-image-card")
+  component_helper.add_class("govuk-grid-row") if card_helper.two_thirds
+  component_helper.add_class("gem-c-image-card--large") if card_helper.large
+  component_helper.add_class("gem-c-image-card--two-thirds") if card_helper.two_thirds
+  component_helper.add_class("gem-c-image-card--no-image") unless (card_helper.image_src || card_helper.youtube_video_id)
+  component_helper.add_class(brand_helper.brand_class) if brand_helper.brand_class
 
   text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
   text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
@@ -34,12 +34,12 @@
   ]
   extra_link_classes << brand_helper.color_class
 
-  data_modules = %w[]
-  data_modules << "gem-track-click ga4-link-tracker" if card_helper.is_tracking?
-  data_modules << "image-card" if card_helper.youtube_video_id
+  component_helper.add_data_attribute({ module: "gem-track-click" }) if card_helper.is_tracking?
+  component_helper.add_data_attribute({ module: "image-card" }) if card_helper.youtube_video_id
+  component_helper.set_lang(card_helper.lang)
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
-  <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <%= content_tag(:div, class: text_wrapper_classes) do %>
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>