govuk_publishing_components 57.1.0 → 57.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8767b5e700d2cf0da57d46943ed8ed4e645f510fb872ecc422293270abf339b
-  data.tar.gz: 375137a4c58f557ae925e83cb03bd59e80da2198f87c846c26ed608741e141fe
+  metadata.gz: fc35380bef3675b6001b4827358013c9c54218a696fbe7170625d5c0c9f33bdd
+  data.tar.gz: 77f96614f15a6e7978e3265bf3f3275e25826f7cd3a629cc90bbb55cb2675c30
 SHA512:
-  metadata.gz: 4d6b71754931f043138955f7762a252c0763cf5e59f01fa168589268586e92f83d2e50ec7908d249815ab0132467af7cbd4b6132ecbf8c67b62ba2012eb36cab
-  data.tar.gz: 93b9a850cef309bfb5f37ceef3e7716f958186c26bad463681a3f6419a9eb570209e75fe7c0361186aa1bf940868887e2719a0ed840fd1bf23a251c42c856009
+  metadata.gz: 765da3cf1fb7d292acb42f840bc373166360790f30cb869334629750042fe0e7869ff310115e21019757f8bce65f5b3ad6e2ecaca1ac5f06d39f93592370d4ac
+  data.tar.gz: fe864e55147fd9faf3986d951c5af9b91d96c218563b2a1a080fb742c14ed0aca1dddc3ec01e281259a32e628cc0745644c54ab7ed558c87e62066c44818d582

data/app/assets/images/govuk_publishing_components/intervention/hmrc.svg

@@ -0,0 +1,5 @@
+<svg width="480" height="480" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="480" height="480" fill="#008670"/>
+<circle cx="240" cy="240" r="175" stroke="white" stroke-width="22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M271.481 179.736C268.533 172.742 271.935 164.633 279.115 161.806C286.145 158.978 294.308 162.326 297.256 169.32C300.204 176.314 296.803 184.274 289.773 187.176C282.592 190.078 274.429 186.73 271.557 179.736H271.481ZM234.746 211.356C227.566 214.258 224.24 222.367 227.112 229.286C230.06 236.28 238.148 239.628 245.328 236.726C252.358 233.899 255.759 225.864 252.811 218.87C249.864 211.877 241.7 208.454 234.671 211.356H234.746ZM327.113 209.05C334.142 206.222 337.544 198.187 334.596 191.194C331.648 184.2 323.484 180.778 316.455 183.679C309.274 186.581 305.949 194.69 308.821 201.61C311.769 208.603 319.856 211.951 327.037 208.975L327.113 209.05ZM333.613 237.842C336.561 244.836 344.649 248.184 351.829 245.208C358.859 242.381 362.26 234.346 359.312 227.352C356.364 220.358 348.201 216.936 341.172 219.838C333.991 222.739 330.665 230.849 333.537 237.768L333.613 237.842ZM232.63 144.619C233.159 145.289 233.764 145.884 234.444 146.405L224.315 176.462V176.611C223.862 178.099 223.56 179.736 223.56 181.373C223.56 189.482 229.682 196.253 237.619 197.369H237.997C238.677 197.443 239.357 197.518 240.037 197.518C240.718 197.518 241.398 197.518 242.078 197.369H242.456C250.393 196.178 256.515 189.482 256.515 181.373C256.515 179.736 256.288 178.099 255.759 176.611V176.462L245.631 146.405C246.311 145.884 246.916 145.289 247.445 144.619C247.974 143.95 265.056 153.696 265.056 153.696V128.102L247.445 133.608C246.991 132.938 246.387 132.343 245.706 131.822C245.026 131.302 252.811 109.8 252.811 109.8H227.415L234.52 131.748C233.915 132.269 233.31 132.864 232.781 133.534C232.252 134.203 215.17 128.102 215.17 128.102V153.696L232.781 144.545L232.63 144.619ZM190.075 187.176C197.256 190.078 205.419 186.73 208.291 179.736C211.239 172.742 207.838 164.633 200.657 161.806C193.628 158.978 185.464 162.326 182.516 169.32C179.569 176.314 182.97 184.274 189.999 187.176H190.075ZM152.735 209.124C159.916 212.026 168.079 208.678 170.952 201.758C173.9 194.765 170.498 186.655 163.317 183.828C156.288 181.001 148.125 184.349 145.177 191.342C142.229 198.336 145.63 206.297 152.66 209.198L152.735 209.124ZM128.019 245.357C135.199 248.258 143.363 244.91 146.235 237.991C149.183 230.998 145.782 222.888 138.601 220.061C131.571 217.234 123.408 220.582 120.46 227.575C117.512 234.569 120.914 242.53 127.943 245.431L128.019 245.357ZM342.079 260.832C343.968 270.281 344.271 274.67 342.154 280.771C339.055 277.795 336.107 272.215 333.764 263.808L324.618 293.866C330.212 290.071 334.52 287.616 339.433 287.542C330.741 306.067 319.781 310.829 312.751 309.49C304.134 307.927 300.128 300.338 301.489 293.94C303.454 284.863 312.978 282.482 317.362 293.047C325.828 276.01 311.466 270.727 302.245 275.786C316.455 261.799 318.042 249.449 306.629 234.42C290.68 246.473 290.453 258.377 297.634 275.117C288.337 264.626 273.749 270.281 279.04 287.244C285.767 276.977 294.686 283.45 293.25 293.196C292.041 301.678 280.703 308.522 266.493 307.332C246.16 305.546 244.951 291.708 244.421 280.325C249.41 279.432 258.405 283.97 266.115 294.61L268.911 262.766C260.597 271.322 252.963 272.959 244.573 273.182C247.369 264.552 260.294 250.49 260.294 250.49H219.856C219.856 250.49 232.706 264.626 235.578 273.182C227.188 272.885 219.554 271.322 211.239 262.766L214.036 294.61C221.746 284.045 230.665 279.432 235.729 280.325C235.2 291.782 233.991 305.546 213.658 307.332C199.448 308.522 188.11 301.678 186.9 293.196C185.464 283.45 194.383 276.977 201.111 287.244C206.326 270.281 191.813 264.626 182.516 275.117C189.697 258.377 189.546 246.473 173.522 234.42C162.033 249.449 163.695 261.799 177.906 275.786C168.684 270.727 154.247 276.084 162.788 293.047C167.248 282.482 176.696 284.863 178.661 293.94C180.022 300.338 176.016 307.927 167.399 309.49C160.37 310.754 149.41 305.993 140.717 287.542C145.63 287.69 149.939 290.071 155.532 293.866L146.386 263.808C144.043 272.215 141.095 277.795 137.996 280.771C135.88 274.67 136.182 270.281 137.996 260.832L119.1 267.454C129.153 280.92 138.903 299.892 146.84 333C175.033 329.057 206.628 326.825 239.962 326.825C273.295 326.825 304.966 329.057 333.16 333C341.172 299.892 350.922 280.92 360.9 267.454L342.003 260.832H342.079Z" fill="white"/>
+</svg>

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

@@ -211,6 +211,10 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         return string.substring(string.length - stringToFind.length, string.length) === stringToFind
       },
 
+      toSnakeCase: function (str) {
+        return str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()
+      },
+
       populateLinkDomain: function (href) {
         // We always want mailto links to have an undefined link_domain
         if (this.isMailToLink(href)) {

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

@@ -28,6 +28,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  Ga4EventTracker.prototype.getTargetDatasetSchema = function (element) {
+    var targetDataset
+
+    try {
+      targetDataset = element.dataset
+    } catch (error) {
+      console.error(error)
+    }
+
+    var eventData = {}
+
+    Object.keys(targetDataset).forEach(function (key) {
+      var schemaKey = window.GOVUK.analyticsGa4.core.trackFunctions.toSnakeCase(key)
+
+      eventData[schemaKey] = targetDataset[key]
+    })
+
+    return eventData
+  }
+
   Ga4EventTracker.prototype.trackClick = function (event) {
     if (event.tracked) return
     var target = window.GOVUK.analyticsGa4.core.trackFunctions.findTrackingAttributes(event.target, this.trackingTrigger)
@@ -41,6 +61,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         return
       }
 
+      data = Object.assign(data, this.getTargetDatasetSchema(target))
+
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
 

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

@@ -8,6 +8,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.module = module
     this.trackingTrigger = 'data-ga4-form' // elements with this attribute get tracked
     this.includeTextInputValues = this.module.hasAttribute('data-ga4-form-include-text')
+    this.recordJson = this.module.hasAttribute('data-ga4-form-record-json')
+    this.useTextCount = this.module.hasAttribute('data-ga4-form-use-text-count')
     this.redacted = false
     this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
   }
@@ -84,19 +86,58 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var inputNodename = elem.nodeName
       var inputTypes = ['text', 'search', 'email', 'number']
 
-      if (inputType === 'checkbox' && elem.checked) {
+      input.section = labelText
+
+      var isTextField = inputTypes.indexOf(inputType) !== -1 || inputNodename === 'TEXTAREA'
+      var conditionalField = elem.closest('.govuk-checkboxes__conditional')
+      var conditionalCheckbox = conditionalField && conditionalField.querySelector('[aria-controls="' + conditionalField.id + '"]')
+      var conditionalCheckboxChecked = conditionalCheckbox && conditionalCheckbox.checked
+
+      if (conditionalField && conditionalCheckboxChecked) {
+        var conditionalCheckboxLabel = conditionalField.querySelector('[for="' + conditionalCheckbox.id + '"]')
+
+        if (conditionalCheckboxLabel) {
+          input.parentSection = conditionalCheckboxLabel.innerText
+        }
+      }
+
+      if (conditionalCheckbox && !conditionalCheckboxChecked) {
+        // don't include conditional field if condition not checked
+        inputs.splice(i, 1)
+      } else if (conditionalField && elem.hasAttribute('aria-controls')) {
+        // don't include conditional field control in text
+        inputs.splice(i, 1)
+      } else if (elem.checked) {
         input.answer = labelText
+
+        var fieldset = elem.closest('fieldset')
+
+        if (fieldset) {
+          var legend = fieldset.querySelector('legend')
+
+          if (legend) {
+            input.section = legend.innerText
+          }
+        }
       } else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex] && elem.options[elem.selectedIndex].value) {
         input.answer = elem.options[elem.selectedIndex].text
-      } else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
+      } else if (isTextField && elem.value) {
         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)
+          if (this.useTextCount) {
+            input.answer = elem.value.length
+          } else {
+            var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
+            input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
+          }
         } else {
-          this.redacted = true
+          // if recording JSON and text input not allowed
+          // set the specific answer to '[REDACTED]'
+          if (this.recordJson) {
+            input.answer = '[REDACTED]'
+          } else {
+            this.redacted = true
+          }
         }
-      } else if (inputType === 'radio' && elem.checked) {
-        input.answer = labelText
       } else {
         // remove the input from those gathered as it has no value
         inputs.splice(i, 1)
@@ -106,19 +147,38 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4FormTracker.prototype.combineGivenAnswers = function (data) {
-    var answers = []
+    var answers = this.recordJson ? {} : []
+
     for (var i = 0; i < data.length; i++) {
       var answer = data[i].answer
+
       if (answer) {
-        answers.push(answer)
+        if (this.recordJson) {
+          var fieldSection = data[i].section
+          var parentFieldSection = data[i].parentSection
+
+          if (fieldSection) {
+            if (parentFieldSection) {
+              answers[parentFieldSection] = answers[parentFieldSection] || {}
+              answers[parentFieldSection][fieldSection] = answer
+            } else {
+              answers[fieldSection] = answer
+            }
+          }
+        } else {
+          answers.push(answer)
+        }
       }
     }
-    if (this.redacted) {
+    // default behaviour for redacted text is to omit
+    // answer and append '[REDACTED]' to final joined text
+    // if JSON being recorded then prevent this as answer
+    // will be already redacted
+    if (this.redacted && !this.recordJson) {
       answers.push('[REDACTED]')
     }
 
-    answers = answers.join(',')
-    return answers
+    return this.recordJson ? JSON.stringify(answers) : answers.join(',')
   }
 
   Modules.Ga4FormTracker = Ga4FormTracker

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

@@ -9,7 +9,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     init: function (config) {
       if (window.dataLayer) {
         config = config || {}
-        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/', '/media/']
+        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/', '/media/', '/csv-preview/']
         this.dedicatedDownloadDomains = config.dedicatedDownloadDomains || ['assets.publishing.service.gov.uk']
         window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(this.dedicatedDownloadDomains)
         this.handleClick = this.handleClick.bind(this)
@@ -151,7 +151,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
       */
       var previewRegex = /\.\w+\/preview/i
-      return previewRegex.test(href)
+      return previewRegex.test(href) || href.startsWith('https://www.gov.uk/csv-preview/')
     },
 
     hrefPointsToDownloadPath: function (href) {

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

@@ -36,6 +36,11 @@
   // e.g. 'AB123456A', 'AB 12 34 56 A', 'ab 123456 a', 'ab 12 34 56 a', 'AB+12+34+56+A'
   var NATIONAL_INSURANCE_NUMBER = /[A-CEGHJ-OPR-TW-Z]{2}(\s+|\++)?(\d{2}(\s+|\++)?){3}[A-D]/gi
 
+  var UK_MOBILE_NUMBER = /07\d{9}/g
+  var UK_MOBILE_NUMBER_INTERNATIONAL = /\+447\d{9}/g
+  var UK_LANDLINE_NUMBER = /0[1246]\d{8,9}/g
+  var UK_LANDLINE_NUMBER_INTERNATIONAL = /\+44[1246]\d{8,9}/g
+
   function shouldStripDates () {
     var metas = document.querySelectorAll('meta[name="govuk:ga4-strip-dates"]')
     return metas.length > 0
@@ -109,6 +114,11 @@
     stripped = stripped.replace(VISA_PATTERN_GWF, '[gwf number]')
     stripped = stripped.replace(VISA_PATTERN_GB, '[gb eori number]')
     stripped = stripped.replace(NATIONAL_INSURANCE_NUMBER, '[ni number]')
+    stripped = stripped.replace(UK_LANDLINE_NUMBER, '[phone number]')
+    stripped = stripped.replace(UK_LANDLINE_NUMBER_INTERNATIONAL, '[phone number]')
+    stripped = stripped.replace(UK_MOBILE_NUMBER, '[phone number]')
+    stripped = stripped.replace(UK_MOBILE_NUMBER_INTERNATIONAL, '[phone number]')
+
     stripped = this.stripQueryStringParameters(stripped)
 
     if (this.stripDatePII === true) {

data/app/assets/javascripts/govuk_publishing_components/components/add-another.js

@@ -4,15 +4,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function AddAnother (module) {
     this.module = module
+    this.disableGa4 = this.module.dataset.disableGa4
     this.emptyFieldset = undefined
     this.addAnotherButton = undefined
   }
 
-  function createButton (textContent, additionalClass = '') {
+  function createButton (textContent, additionalClass = '', dataAttributes = {}) {
     var button = document.createElement('button')
     button.className = 'gem-c-button govuk-button ' + additionalClass
     button.type = 'button'
     button.textContent = textContent
+
+    Object.keys(dataAttributes).forEach(dataAttribute => {
+      button.dataset[dataAttribute] = dataAttributes[dataAttribute]
+    })
+
     return button
   }
 
@@ -23,21 +29,50 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.updateFieldsetsAndButtons()
   }
 
+  AddAnother.prototype.createEventData = function (data) {
+    var eventData = Object.assign({
+      event_name: 'select_content',
+      type: 'add another'
+    }, data)
+
+    var sectionElement = this.module.closest('[data-ga4-section]')
+
+    if (sectionElement) {
+      eventData.section = sectionElement.dataset.ga4Section
+    }
+
+    return JSON.stringify(eventData)
+  }
+
   AddAnother.prototype.createAddAnotherButton = function () {
+    var dataAttributes = {}
+
+    if (!this.disableGa4) {
+      dataAttributes.ga4Event = this.createEventData({ action: 'added' })
+    }
+
     this.addAnotherButton =
       createButton(
         this.module.dataset.addButtonText,
-        'js-add-another__add-button govuk-button--secondary'
+        'js-add-another__add-button govuk-button--secondary',
+        dataAttributes
       )
     this.addAnotherButton.addEventListener('click', this.addNewFieldset.bind(this))
     this.module.appendChild(this.addAnotherButton)
   }
 
   AddAnother.prototype.createRemoveButton = function (fieldset, removeFunction) {
+    var dataAttributes = {}
+
+    if (!this.disableGa4) {
+      dataAttributes.ga4Event = this.createEventData({ action: 'deleted' })
+    }
+
     var removeButton =
       createButton(
         'Delete',
-        'js-add-another__remove-button gem-c-add-another__remove-button govuk-button--warning'
+        'js-add-another__remove-button gem-c-add-another__remove-button govuk-button--warning',
+        dataAttributes
       )
     removeButton.addEventListener('click', function (event) {
       removeFunction(event)
@@ -62,10 +97,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   AddAnother.prototype.updateFieldsetsAndButtons = function () {
-    this.module.querySelectorAll('.js-add-another__fieldset:not([hidden]) > fieldset > legend')
-      .forEach(function (legend, index) {
-        legend.textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
-      }.bind(this))
+    var visibleFields = this.module.querySelectorAll('.js-add-another__fieldset:not([hidden]) > fieldset')
+
+    visibleFields.forEach(function (field, index) {
+      field.querySelector('legend').textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
+
+      var trackedRemoveButton = field.parentNode.querySelector('.js-add-another__remove-button[data-ga4-event]')
+
+      if (trackedRemoveButton) {
+        trackedRemoveButton.dataset.indexSection = index
+        trackedRemoveButton.dataset.indexSectionCount = visibleFields.length + 1
+      }
+    }.bind(this))
 
     if (this.module.dataset.emptyFields === 'false') {
       this.module.querySelector('.js-add-another__remove-button').classList.toggle(
@@ -73,6 +116,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
       )
     }
+
+    var trackedAddAnotherButton = this.module.querySelector('.js-add-another__add-button[data-ga4-event]')
+
+    if (trackedAddAnotherButton) {
+      trackedAddAnotherButton.dataset.indexSection = visibleFields.length
+      trackedAddAnotherButton.dataset.indexSectionCount = visibleFields.length + 1
+    }
   }
 
   AddAnother.prototype.addNewFieldset = function (event) {

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -16,6 +16,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       onSort: function () {
         this.updateOrderIndexes()
         this.triggerEvent(this.$module, 'reorder-drag')
+      }.bind(this),
+
+      onEnd: function (event) {
+        if (event.oldIndex !== event.newIndex) {
+          var item = event.item
+          var eventData = item.querySelector('[data-ga4-event]')
+
+          if (eventData) {
+            item.dataset.ga4Event = eventData.dataset.ga4Event
+            item.dataset.action = 'drag and drop'
+            item.dataset.text = event.newIndex > event.oldIndex ? 'Up' : 'Down'
+            this.triggerEvent(item, 'click')
+            delete item.dataset.ga4Event
+          }
+        }
       }.bind(this)
     })
 
@@ -84,10 +99,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   ReorderableList.prototype.updateOrderIndexes = function () {
-    var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
-    for (var i = 0; i < $orderInputs.length; i++) {
-      $orderInputs[i].setAttribute('value', i + 1)
-    }
+    var $actions = this.$module.querySelectorAll('.gem-c-reorderable-list__actions')
+
+    $actions.forEach(function ($action, index) {
+      $action.querySelector('input').value = index + 1
+
+      $action.querySelectorAll('button[data-ga4-event]').forEach(function ($trackButton) {
+        $trackButton.dataset.indexSection = index
+      })
+    })
   }
 
   ReorderableList.prototype.triggerEvent = function (element, eventName) {

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

@@ -12,6 +12,23 @@
   }
 }
 
+.gem-c-intervention--image {
+  border-left: 0;
+  display: flex;
+}
+
+.gem-c-intervention__image-container {
+  min-width: 50px;
+  height: 50px;
+  margin-right: govuk-spacing(4);
+  background-size: 50px;
+}
+
+.gem-c-intervention__image-container--hmrc {
+  background-image: url("govuk_publishing_components/intervention/hmrc.svg");
+  border-radius: 10px;
+}
+
 .gem-c-intervention__textwrapper {
   display: block;
 }

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -5,7 +5,6 @@ module GovukPublishingComponents
         account-api
         collections
         collections-publisher
-        contacts-admin
         content-data-admin
         content-publisher
         content-tagger

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

@@ -5,6 +5,7 @@
   fieldset_legend ||= ""
   add_button_text ||= "Add another"
   empty_fields ||= false
+  disable_ga4 ||= nil
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-add-another")
@@ -13,6 +14,7 @@
     add_button_text:,
     fieldset_legend:,
     empty_fields:,
+    disable_ga4:,
   })
 %>
 

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

@@ -8,6 +8,7 @@
   suggestion_text ||= nil
   hide ||= false
   new_tab ||= false
+  image ||= nil
 
   suggestion_data_attributes = {}
   dismiss_data_attributes = {}
@@ -51,6 +52,7 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-intervention")
+  component_helper.add_class("gem-c-intervention--image") if image
   component_helper.add_role("region")
   component_helper.add_aria_attribute({ label: "Intervention"})
   component_helper.add_data_attribute({ module: "intervention", intervention_name: name })
@@ -60,12 +62,15 @@
 %>
 <% if intervention_helper.show? %>
   <%= tag.section(**component_helper.all_attributes) do %>
-    <p class="govuk-body">
+    <% valid_image = %w[hmrc].include? image %>
+    <%= tag.span(class: "gem-c-intervention__image-container gem-c-intervention__image-container--#{image}") if valid_image %>
+
+    <%= tag.p(class: "govuk-body") do %>
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
       <% if suggestion_link_text && suggestion_link_url %>
         <%= tag.a suggestion_link_text, **suggestion_tag_options %>
       <% end %>
-    </p>
+    <% end %>
 
     <% if dismiss_text %>
       <%= tag.p class: "govuk-body govuk-!-display-none-print", data: dismiss_data_attributes do %>

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

@@ -3,14 +3,30 @@
 
   items ||= []
   input_name ||= "ordering"
+  disable_ga4 ||= false
+  ga4_attributes ||= {
+    event_name: 'select_content',
+    type: 'reorderable list',
+  }
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-reorderable-list")
   component_helper.add_data_attribute({ module: "reorderable-list" })
+  component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
 %>
 
 <%= tag.ol(**component_helper.all_attributes) do %>
   <% items.each_with_index do |item, index| %>
+
+    <%
+      ga4_event = nil
+
+      unless disable_ga4
+        ga4_event = ga4_attributes
+        ga4_event.merge!({ section: item[:title], index_section: index, index_section_count: items.length }) unless disable_ga4
+      end
+    %>
+
     <%= tag.li class: "gem-c-reorderable-list__item" do %>
       <%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
         <%= tag.div class: "gem-c-reorderable-list__content" do %>
@@ -33,14 +49,20 @@
             type: "button",
             aria_label: "Move \"#{item[:title]}\" up",
             classes: "js-reorderable-list-up",
-            secondary_solid: true
+            secondary_solid: true,
+            data_attributes: {
+              ga4_event: ga4_event && ga4_event.merge({ action: 'Up' }).as_json
+            }
           } %>
           <%= render "govuk_publishing_components/components/button", {
             text: "Down",
             type: "button",
             aria_label: "Move \"#{item[:title]}\" down",
             classes: "js-reorderable-list-down",
-            secondary_solid: true
+            secondary_solid: true,
+            data_attributes: {
+              ga4_event: ga4_event && ga4_event.merge({ action: 'Down' }).as_json
+            }
           } %>
         <% end %>
       <% end %>

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

@@ -46,6 +46,31 @@ examples:
           <label for="person_1_name" class="gem-c-label govuk-label">Full name</label>
           <input class="gem-c-input govuk-input" id="person_1_name" name="person[1]name">
         </div>
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the add another component. Tracking is enabled by default. This adds a data module and data-attributes with JSONs to the add another component buttons. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      fieldset_legend: "Item"
+      add_button_text: "Add another item"
+      disable_ga4: true
+      items:
+        - fields: >
+            <div class="govuk-form-group">
+              <label for="item_0_name" class="gem-c-label govuk-label">Full name</label>
+              <input class="gem-c-input govuk-input" id="item_0_name" name="item[0]name">
+            </div>
+          destroy_checkbox: >
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input type="checkbox" name="item[0][_destroy]" id="item_0__destroy" class="govuk-checkboxes__input">
+                <label for="item_0__destroy" class="govuk-label govuk-checkboxes__label">Delete</label>
+              </div>
+            </div>
+      empty:
+        <div class="govuk-form-group">
+          <label for="item_1_name" class="gem-c-label govuk-label">Full name</label>
+          <input class="gem-c-input govuk-input" id="item_1_name" name="item[1]name">
+        </div>        
   start_empty:
     description: By default no form fields are displayed when the component loads if no content is specified
     data:

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

@@ -74,3 +74,13 @@ examples:
       suggestion_link_url: /travel-abroad
       dismiss_text: Hide this suggestion
       name: another-campaign-name
+
+  with_image:
+    description: |
+      An image can be displayed as shown. Currently, this only supports `image: "hmrc"`.
+    data:
+      image: "hmrc"
+      suggestion_text: This is a promotion for an interesting product
+      suggestion_link_text: Get the interesting product
+      suggestion_link_url: www.gov.uk
+      new_tab: true

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

@@ -74,6 +74,22 @@ examples:
           title: "Table 2.1: Budget 2018 policy decisions"
         - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
           title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the reorderable list. Tracking is enabled by default. This adds a data module and data-attributes with JSONs to the reorderable list. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      disable_ga4: true
+      items:
+        - id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018"
+        - id: "d321cb86-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018 (web)"
+        - id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
+          title: "Impact on households: distributional analysis to accompany Budget 2018"
+        - id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
+          title: "Table 2.1: Budget 2018 policy decisions"
+        - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
+          title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
   with_custom_input_name:
     data:
       input_name: "attachments[ordering]"

data/config/locales/ar.yml

@@ -63,18 +63,27 @@ ar:
     devolved_nations:
       applies_to:
       aria_label:
-      connectors:
-        last_word:
-        two_words:
       england:
+        end:
+        middle:
+        start:
       northern_ireland:
+        end:
+        middle:
+        start:
       scotland:
+        end:
+        middle:
+        start:
       type:
         consultation:
         detailed_guide:
         guidance:
         publication:
       wales:
+        end:
+        middle:
+        start:
     feedback:
       close: إغلاق
       dont_include_personal_info: لا تقم بتضمين معلومات شخصية أو مالية مثل رقم التأمين الوطني أو تفاصيل بطاقة الائتمان الخاصة بك.

data/config/locales/az.yml

@@ -60,18 +60,27 @@ az:
     devolved_nations:
       applies_to:
       aria_label:
-      connectors:
-        last_word:
-        two_words:
       england:
+        end:
+        middle:
+        start:
       northern_ireland:
+        end:
+        middle:
+        start:
       scotland:
+        end:
+        middle:
+        start:
       type:
         consultation:
         detailed_guide:
         guidance:
         publication:
       wales:
+        end:
+        middle:
+        start:
     feedback:
       close: Bağla
       dont_include_personal_info: Sosial sığorta nömrəniz və ya kredit kartınızın məlumatları kimi şəxsi və ya maliyyə məlumatları daxil etməyin.