govuk_publishing_components 35.19.0 → 35.20.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6d8b36d61c9301cb5d969679a14c93b6b43914a3a734d05e4ae5702b0fb0f79
-  data.tar.gz: 49e458e28c81c1368445b4e9948aa31614ec2a506f9f989083780a0ce6de885d
+  metadata.gz: '096ada32d1ecced73348563a12eaa51f1f722c75f11791baba32d24de329b4ad'
+  data.tar.gz: 7c905c2babbe3a999a4a44d2441506b5b38b48edbb78593a9b9212b55549d8da
 SHA512:
-  metadata.gz: 107aa5aee8b2c2c8268342683df0405cc071ada39032d723fd21299a0af1abc6bec4bb5fb7d89879775780bccc32d27b1ac9eb375e28cda218d0016b8cb843d1
-  data.tar.gz: 994233cc78dcaa2ce4a604f3cb2d3be54582bfcfa40b6df323929a808d8d7d56e30e6c1403422a71968d399e27dc6141534f49af06f5713198db721b91d461a1
+  metadata.gz: 7bca767187c1d88419a6c36c90a6cfb763773ef81cd1106bf24f2298142bf7f247ca293c05a4bc9c76fe567f326ff36a7cbb7986bc671995512c22b4f2f67461
+  data.tar.gz: 715869ba54a39828637ded7125d39462716247acec55b3c71507975fbcbb567a01dfd2ab152a2fe19fac3044ca4c7c0e0b1ea56c9dca6b074ac440abdf4c3e28

data/app/assets/images/govuk_publishing_components/icon-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="#0B0C0C" d="M2 15.435 15.435 2l2.121 2.121L4.121 17.556z"/><path fill="#0B0C0C" d="M15.436 17.557 2 4.122l2.12-2.121 13.436 13.435z"/></svg>

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

@@ -325,6 +325,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           var target = data.event.target
           ecommerceSchema.search_results.ecommerce.items.push({
             item_id: target.getAttribute('data-ga4-ecommerce-path'),
+            item_content_id: target.getAttribute('data-ga4-ecommerce-content-id') || undefined,
             item_name: target.textContent,
             item_list_name: listTitle,
             index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(target, startPosition)
@@ -351,6 +352,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
             ecommerceSchema.search_results.ecommerce.items.push({
               item_id: path,
+              item_content_id: item.getAttribute('data-ga4-ecommerce-content-id') || undefined,
               item_list_name: listTitle,
               index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(item, startPosition)
             })

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

@@ -95,6 +95,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       data.external = trackFunctions.isExternalLink(data.url) ? 'true' : 'false'
       data.index = this.setIndex(data.index, event.target)
 
+      // flatten the attributes in index into the main data
+      if (data.index) {
+        for (var prop in data.index) {
+          data[prop] = data.index[prop]
+        }
+        delete data.index
+      }
+
       if (data.type === 'smart answer' && data.action === 'change response') {
         data.section = this.PIIRemover.stripPIIWithOverride(data.section, true, true)
       }
@@ -117,7 +125,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (target.getAttribute('data-ga4-index')) {
       try {
         var indexLink = JSON.parse(target.getAttribute('data-ga4-index'))
-
         // Check whether the index object already exists on a parent element, as is the case with tracking accordion links.
         // If true, combine data-ga4-index with the index object. Otherwise, just return indexLink
         index = index ? window.GOVUK.extendObject(index, indexLink) : indexLink
@@ -126,7 +133,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         return
       }
     }
-
     return index
   }
 

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

@@ -0,0 +1,24 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {};
+
+(function (analyticsModules) {
+  'use strict'
+
+  var Ga4PrintIntentTracker = {
+    init: function () {
+      window.addEventListener('beforeprint', function () {
+        var data = {
+          event_name: 'print_page',
+          type: 'print page',
+          method: 'browser print'
+        }
+        var schema = new window.GOVUK.analyticsGa4.Schemas()
+        schema = schema.mergeProperties(data, 'event_data')
+        window.GOVUK.analyticsGa4.core.sendData(schema)
+      })
+    }
+  }
+
+  analyticsModules.Ga4PrintIntentTracker = Ga4PrintIntentTracker
+})(window.GOVUK.analyticsGa4.analyticsModules)

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

@@ -118,7 +118,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         // following will be undefined if tracking percentages
         data.text = node.eventData.text
         data.section = node.eventData.text
-        data.index = node.eventData.index
+        data.index_section = node.eventData.index_section
+        data.index_section_count = node.eventData.index_section_count
         // following will be undefined if tracking headings
         data.percent_scrolled = node.eventData.percent_scrolled
 
@@ -165,10 +166,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           eventData: {
             type: type,
             text: heading.textContent.replace(/\s+/g, ' ').trim(),
-            index: {
-              index_section: i + 1,
-              index_section_count: totalHeadings
-            }
+            index_section: i + 1,
+            index_section_count: totalHeadings
           }
         })
       }

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

@@ -3,6 +3,7 @@
 //= require ./analytics-ga4/ga4-schemas
 //= require ./analytics-ga4/pii-remover
 //= require ./analytics-ga4/ga4-page-views
+//= require ./analytics-ga4/ga4-print-intent-tracker
 //= require ./analytics-ga4/ga4-specialist-link-tracker
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker

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

@@ -62,7 +62,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var isGa4Enabled = dataModule ? dataModule.indexOf('ga4-event-tracker') !== -1 : false
     if (isGa4Enabled) {
       var indexTotal = this.$module.querySelectorAll('.govuk-accordion__section').length
-      var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index: { index_section: 0, index_section_count: indexTotal } }
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index_section: 0, index_section_count: indexTotal }
       showAll = this.$module.querySelector(this.showAllControls)
       showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
     }

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -84,7 +84,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
     if (this.$module.isGa4Enabled) {
-      var showAllAttributesGa4 = { event_name: 'select_content', type: 'step by step', index: { index_section: 0, index_section_count: this.$module.totalSteps } }
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'step by step', index_section: 0, index_section_count: this.$module.totalSteps }
       this.$module.showOrHideAllButton.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
     }
   }
@@ -196,10 +196,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           event_name: 'select_content',
           type: 'step by step',
           text: titleText.trim(),
-          index: {
-            index_section: i + 1,
-            index_section_count: this.$module.totalSteps
-          },
+          index_section: i + 1,
+          index_section_count: this.$module.totalSteps,
           index_total: thisel.querySelectorAll('a').length
         }
 

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

@@ -366,11 +366,9 @@
     if (!entry.hadRecentInput) {
       var firstEntry = sessionEntries[0];
       var latestEntry = sessionEntries[sessionEntries.length - 1];
-      if (sessionEntries.length &&
-        (entry.startTime - latestEntry.startTime >= 1000 ||
-          entry.startTime - firstEntry.startTime >= 5000)) {
-          sessionValue = entry.value;
-          sessionEntries = [entry];
+      if (sessionEntries.length && (entry.startTime - latestEntry.startTime >= 1000 || entry.startTime - firstEntry.startTime >= 5000)) {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
       }
       else {
         sessionValue += entry.value;
@@ -445,7 +443,8 @@
 
   var ALL_ENTRIES = [];
   function observe(type, callback, options) {
-    if (typeof PerformanceObserver === "function" && PerformanceObserver.supportedEntryTypes.includes(type)) {
+    if (typeof PerformanceObserver === "function" &&
+    PerformanceObserver.supportedEntryTypes.includes(type)) {
       var po = new PerformanceObserver(function (list) {
         list.getEntries().forEach(function (entry) { return callback(entry); });
       });
@@ -547,7 +546,7 @@
     // -------------------------------------------------------------------------
     /// End
     // -------------------------------------------------------------------------
-    var SCRIPT_VERSION = "311";
+    var SCRIPT_VERSION = "312";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION]);
@@ -695,7 +694,7 @@
     // Record the FIRST input delay.
     function recordDelay(delay) {
       if (!gFirstInputDelay) {
-        gFirstInputDelay = delay;
+        gFirstInputDelay = floor(delay);
         // remove event listeners
         gaEventTypes.forEach(function (eventType) {
           removeEventListener(eventType, onInput, ghListenerOptions);
@@ -1265,10 +1264,7 @@
       var num = 0;
       for (var i = 0, len = aElems.length; i < len; i++) {
         var e = aElems[i];
-        if (e.src &&
-          !e.async &&
-          !e.defer &&
-          0 !== (e.compareDocumentPosition(lastViewportElem) & 4)) {
+        if (e.src && !e.async && !e.defer && 0 !== (e.compareDocumentPosition(lastViewportElem) & 4)) {
           // If the script has a SRC and async is false and it occurs BEFORE the last viewport element,
           // then increment the counter.
           num++;
@@ -1498,8 +1494,6 @@
       }
       return getHighPercentileINP();
     }
-    // function simplified for our use, original would get the customerid from the script src URL
-    // but we set it inside the code in this file, so this function just returns that
     function getCustomerId() {
       return LUX.customerid || "";
     }
@@ -1609,12 +1603,7 @@
       var vw = document.documentElement.clientWidth;
       // Return true if the top-left corner is in the viewport and it has width & height.
       var lt = findPos(e);
-      return (lt[0] >= 0 &&
-        lt[1] >= 0 &&
-        lt[0] < vw &&
-        lt[1] < vh &&
-        e.offsetWidth > 0 &&
-        e.offsetHeight > 0);
+      return (lt[0] >= 0 && lt[1] >= 0 && lt[0] < vw && lt[1] < vh && e.offsetWidth > 0 && e.offsetHeight > 0);
     }
     // Return an array containing the top & left coordinates of the element.
     // from http://www.quirksmode.org/js/findpos.html
@@ -1838,7 +1827,7 @@
         !gSyncId ||
         !_sample() || // OUTSIDE the sampled range
         !gbLuxSent // LUX has NOT been sent yet, so wait to include it there
-        ) {
+      ) {
         return;
       }
       var sCustomerData = valuesToString(getUpdatedCustomData());
@@ -2083,6 +2072,14 @@
     // Set "LUX.auto=false" to disable send results automatically and
     // instead you must call LUX.send() explicitly.
     if (globalConfig.auto) {
+      var sendBeaconWhenVisible_1 = function () {
+        if (globalConfig.trackHiddenPages) {
+          _sendLux();
+        }
+        else {
+          onVisible(_sendLux);
+        }
+      };
       var sendBeaconAfterMinimumMeasureTime_1 = function () {
         var elapsedTime = _now();
         var timeRemaining = globalConfig.minMeasureTime - elapsedTime;
@@ -2093,12 +2090,12 @@
           ]);
           if (document.readyState === "complete") {
             // If onload has already passed, send the beacon now.
-            _sendLux();
+            sendBeaconWhenVisible_1();
           }
           else {
             // Ow, send the beacon slightly after window.onload.
             addListener("load", function () {
-              setTimeout(_sendLux, 200);
+              setTimeout(sendBeaconWhenVisible_1, 200);
             });
           }
         }
@@ -2107,14 +2104,7 @@
           setTimeout(sendBeaconAfterMinimumMeasureTime_1, timeRemaining);
         }
       };
-      if (globalConfig.trackHiddenPages) {
-        // The trackHiddenPages config forces the beacon to be sent even when the page is not visible.
-        sendBeaconAfterMinimumMeasureTime_1();
-      }
-      else {
-        // Otherwise we only send the beacon when the page is visible.
-        onVisible(sendBeaconAfterMinimumMeasureTime_1);
-      }
+      sendBeaconAfterMinimumMeasureTime_1();
     }
     // When newBeaconOnPageShow = true, we initiate a new page view whenever a page is restored from
     // bfcache. Since we have no "onload" event to hook into after a bfcache restore, we rely on the

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

@@ -41,13 +41,6 @@
   }
 }
 
-@include govuk-media-query($from: tablet) {
-  .gem-c-image-card.gem-c-image-card--two-thirds {
-    margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
-    display: block;
-  }
-}
-
 @include govuk-media-query($from: mobile, $until: tablet) {
   .gem-c-image-card {
     margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
@@ -77,7 +70,6 @@
 
   .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
     @include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
-    padding-left: 0;
   }
 }
 
@@ -91,6 +83,37 @@
   border-bottom: none;
 }
 
+.gem-c-image-card.gem-c-image-card--two-thirds {
+  // Change default flex-direction from column-reverse
+  // so that the image and text appear in the same row,
+  // with the image to the left
+  flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  // Wrap flex items onto a new line and ensure
+  // that items are aligned correctly
+  flex-wrap: wrap-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+  // The first two values set flex-grow and flex-basis to 0
+  // This ensures that the flex item does not grow or shrink
+  // The the last value, sets flex-basis to 95px
+  // padding-left is set to 15px and the image used is 80px wide
+  flex: 0 0 95px;
+  padding-right: 0;
+}
+
+.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
+  // The first two values set flex-grow and flex-basis to 1
+  // This allows the flex item contain the image card text to grow or shrink
+  // The last value, sets flex-basis to 70%
+  // If the width of the flex-item shrinks below 70%, it will wrap onto a new line
+  flex: 1 1 70%;
+}
+
 .gem-c-image-card__title {
   margin: 0;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -8,7 +8,7 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
-$large-navbar-height: 86px;
+$large-navbar-height: 72px;
 
 $pale-blue-colour: #d2e2f1;
 
@@ -630,6 +630,12 @@ $after-button-padding-left: govuk-spacing(4);
     color: govuk-colour("white");
   }
 
+  &:focus-visible {
+    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+      border-bottom: $pseudo-underline-height solid govuk-colour("black");
+    }
+  }
+
   @include govuk-media-query($from: "desktop") {
     border: 0;
     margin: 0;
@@ -654,15 +660,21 @@ $after-button-padding-left: govuk-spacing(4);
 
       // stylelint-disable max-nesting-depth
       @include focus-not-focus-visible {
-        border-bottom: none;
+        border-bottom: $pseudo-underline-height solid $govuk-brand-colour;
+
+        &:hover {
+          border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        }
       }
       // stylelint-enable max-nesting-depth
     }
 
     &:focus-visible {
       &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+        color: govuk-colour("black");
+
         &:hover {
-          border-bottom: $pseudo-underline-height solid $govuk-focus-colour;
+          border-bottom: $pseudo-underline-height solid govuk-colour("black");
           color: govuk-colour("black");
         }
       }
@@ -679,9 +691,14 @@ $after-button-padding-left: govuk-spacing(4);
   &.gem-c-layout-super-navigation-header__open-button {
     &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
       &:hover {
-        border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
         color: govuk-colour("white");
       }
+
+      &:focus-visible {
+        border-bottom: $pseudo-underline-height solid govuk-colour("black");
+        color: govuk-colour("black");
+      }
     }
 
     @include focus-and-focus-visible {
@@ -704,6 +721,10 @@ $after-button-padding-left: govuk-spacing(4);
       border-bottom-color: govuk-colour("light-grey");
       color: govuk-colour("light-grey");
       outline: 1px solid govuk-colour("light-grey"); // overlap the border of the nav menu so it won't appear when menu open
+
+      &:hover {
+        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
+      }
     }
   }
 }
@@ -726,7 +747,7 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__search-container {
-  padding-bottom: govuk-spacing(3);
+  padding-bottom: govuk-spacing(7);
 }
 
 // Dropdown menu.
@@ -740,7 +761,23 @@ $after-button-padding-left: govuk-spacing(4);
   padding-top: govuk-spacing(6);
 
   @include govuk-media-query($from: "desktop") {
-    padding-top: govuk-spacing(5);
+    padding-top: govuk-spacing(8);
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar {
+  @include govuk-media-query($until: "desktop") {
+    .gem-c-layout-super-navigation-header__search-items {
+      margin: 0 24px;
+    }
+  }
+}
+
+@include govuk-media-query($until: "tablet") {
+  // padding to make it the same as the padding for the redesign of the homepage
+  .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__column--services-and-information,
+  .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__column--government-activity {
+    padding: 0 24px;
   }
 }
 
@@ -814,6 +851,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
@@ -825,16 +867,27 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.gem-c-layout-super-navigation-header__navigation-second-item-description {
-  @include govuk-typography-common;
-  font-size: 16px;
-  font-size: govuk-px-to-rem(16px);
-  font-weight: normal;
-  margin: govuk-spacing(1) 0 0 0;
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar {
+  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+    padding-left: 26px;
+    padding-right: 26px;
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
+  padding-left: 24px;
+  padding-right: 24px;
+  width: 68px;
+}
+
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+  margin-top: govuk-spacing(2);
 }
 
 .gem-c-layout-super-navigation-header__search-form {
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  padding: 0 0 govuk-spacing(8) 0;
 }
 
 // Popular links.
@@ -854,6 +907,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__popular-link {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+}
+
 .gem-c-layout-super-navigation-header__width-container {
   @include govuk-media-query($until: "desktop") {
     margin: 0;
@@ -894,12 +952,12 @@ $after-button-padding-left: govuk-spacing(4);
   }
 
   .gem-c-layout-super-navigation-header__logotype-crown--large-navbar {
-    height: 36px;
-    width: 49px;
+    height: 32px;
+    width: 44px;
   }
 
   .gem-c-header__link--large-navbar:focus {
-    box-shadow: 0 -4px 0 18px $govuk-focus-colour;
+    box-shadow: 0 -6px 0 12px $govuk-focus-colour;
     border-bottom: $govuk-focus-width solid govuk-colour("black");
     padding-bottom: 10px;
   }
@@ -909,17 +967,14 @@ $after-button-padding-left: govuk-spacing(4);
   }
 
   .gem-c-layout-super-navigation-header__header-logo--large-navbar {
-    height: 35px;
-    padding-bottom: govuk-spacing(5);
-    padding-top: govuk-spacing(5);
+    height: 32px;
+    padding-bottom: govuk-spacing(4);
+    padding-top: govuk-spacing(4);
   }
 
   .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
     height: $large-navbar-height;
-  }
-
-  // to stop the search icon moving on hover
-  .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar:hover {
+    // to stop the search icon moving on hover
     padding-bottom: 12px;
   }
 
@@ -931,3 +986,19 @@ $after-button-padding-left: govuk-spacing(4);
     height: $large-navbar-height;
   }
 }
+
+@include govuk-media-query($until: tablet) {
+  .gem-c-layout-super-navigation-header__popular-links-heading--large-navbar {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24px);
+  }
+
+  // can't disable responsive styling because using override classes
+  // from govuk-frontend which are all responsive so have to supply
+  // custom class to the label of the search component to turn off
+  // the responsive font size
+  .gem-c-layout-super-navigation-header__search-label--large-navbar {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24px);
+  }
+}

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

@@ -91,6 +91,19 @@ $large-input-size: 50px;
   &:focus {
     @include gem-c-search-input-focus;
   }
+
+  // Note: this is a non-standard CSS feature and will not do anything in Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1417753
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    background-image: image-url("govuk_publishing_components/icon-close.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    height: 20px;
+    margin-left: 0;
+    margin-right: 0;
+    width: 20px;
+  }
 }
 
 @mixin icon-positioning($container-size) {

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

@@ -46,14 +46,12 @@
             event_name: "select_content",
             type: "accordion",
             text: heading_text,
-            index: {
-              index_section: index,
-              index_section_count: items.length,
-            },
+            index_section: index,
+            index_section_count: items.length,
           }.to_json
 
-          # These attributes have been created separately from the item[:data_attributes] 
-          # object in order to keep them from colliding with GA4 event tracking and UA 
+          # These attributes have been created separately from the item[:data_attributes]
+          # object in order to keep them from colliding with GA4 event tracking and UA
           # tracking attributes
           ga4_link_data_attributes = {}
           ga4_link_data_attributes[:module] = "ga4-link-tracker"
@@ -63,10 +61,8 @@
             event_name: "navigation",
             type: "accordion",
             section: heading_text,
-            index: {
-              index_section: index,
-              index_section_count: (items.length),
-            }
+            index_section: index,
+            index_section_count: (items.length),
           }.to_json
         end
 
@@ -94,9 +90,9 @@
           <%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
         <% end %>
         <%= tag.div(
-          item[:content][:html], 
-          id: "#{id}-content-#{index}", 
-          class: "govuk-accordion__section-content", 
+          item[:content][:html],
+          id: "#{id}-content-#{index}",
+          class: "govuk-accordion__section-content",
           'aria-labelledby': "#{id}-heading-#{index}",
           data: ga4_link_data_attributes
         ) %>

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

@@ -44,9 +44,7 @@
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
             if ga4_tracking
               ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
-              ga4_data[:index] = {
-                "index_link": index_link,
-              }
+              ga4_data[:index_link] = index_link
             end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
@@ -69,9 +67,7 @@
                   <%
                     if ga4_tracking
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]
-                      ga4_data[:index] = {
-                        "index_link": index_link,
-                      }
+                      ga4_data[:index_link] = index_link
                     end
                   %>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],

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

@@ -34,7 +34,7 @@
 
   ga4_tracking ||= false
   suggestion_data_attributes[:module] = "#{suggestion_data_attributes[:module]} ga4-link-tracker".strip if ga4_tracking
-  suggestion_data_attributes[:ga4_link] = { event_name: "navigation", type: "intervention", section: suggestion_text, index: 1, index_total: 1 }.to_json if ga4_tracking
+  suggestion_data_attributes[:ga4_link] = { event_name: "navigation", type: "intervention", section: suggestion_text, index_link: 1, index_total: 1 }.to_json if ga4_tracking
   data_attributes[:ga4_intervention_banner] = "" if ga4_tracking # Added to the parent element for the GA4 pageview object to use
 
   suggestion_tag_options = {

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

@@ -107,11 +107,9 @@
           data-ga4-link="<%= {
             "event_name": "navigation",
             "section": "Licence",
-            "index": {
-              "index_section": layout_footer_helper.ga4_ogl_link_index_section.to_s,
-              "index_link": "1",
-              "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
-            },
+            "index_section": layout_footer_helper.ga4_ogl_link_index_section.to_s,
+            "index_link": "1",
+            "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
             "text": "Open Government Licence v3.0",
             "index_total": "1",
             "type": "footer",
@@ -132,11 +130,9 @@
         data-ga4-link="<%= {
           "event_name": "navigation",
           "section": "Copyright",
-          "index": {
-            "index_section": layout_footer_helper.ga4_copyright_link_index_section.to_s,
-            "index_link": "1",
-            "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
-          },
+          "index_section": layout_footer_helper.ga4_copyright_link_index_section.to_s,
+          "index_link": "1",
+          "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
           "text": "© Crown copyright",
           "index_total": "1",
           "type": "footer",

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

@@ -65,7 +65,11 @@
   button_container_classes = %w(gem-c-layout-super-navigation-header__button-container)
   button_container_classes << "gem-c-layout-super-navigation-header__button-container--large-navbar" if large_navbar
 
+  dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
+  dropdown_menu_classes << "gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar" if large_navbar
 
+  popular_links_heading_classes = %w(govuk-heading-m)
+  popular_links_heading_classes << "gem-c-layout-super-navigation-header__popular-links-heading--large-navbar" if large_navbar
 %>
 <%= content_tag("header",
   {
@@ -96,11 +100,9 @@
               "external": "false",
               "text": "GOV.UK",
               "section": "Logo",
-              "index": {
-                "index_link": 1,
-                "index_section": 0,
-                "index_section_count": 2,
-              },
+              "index_link": 1,
+              "index_section": 0,
+              "index_section_count": 2,
               "index_total": 1
             }.to_json
           },
@@ -109,6 +111,11 @@
             label: logo_link_title,
           }
         } do %>
+          <% if hide_logo_text %>
+            <span class="govuk-visually-hidden">
+              <%= logo_text %>
+            </span>
+          <% end %>
           <span class="govuk-header__logotype">
             <!--[if gt IE 8]><!-->
             <%= content_tag(:svg, {
@@ -117,7 +124,7 @@
               },
               class: logotype_classes,
               height: "30",
-              width: "36",    
+              width: "36",
               focusable: "false",
               viewBox: "0 0 132 97",
               xmlns: "http://www.w3.org/2000/svg",
@@ -198,10 +205,8 @@
                   event_name: "select_content",
                   type: "header menu bar",
                   text: link[:label],
-                  index: {
-                    index_section: 1,
-                    index_section_count: 2,
-                  },
+                  index_section: 1,
+                  index_section_count: 2,
                   section: link[:label]
                 }
               },
@@ -232,10 +237,8 @@
                   "event_name": "select_content",
                   "type": "header menu bar",
                   "text": "Search",
-                  "index": {
-                    "index_section": 2,
-                    "index_section_count": 2,
-                  },
+                  "index_section": 2,
+                  "index_section_count": 2,
                   "section": "Search"
                   }.to_json
                 }"
@@ -276,10 +279,11 @@
         <% end %>
       </div>
 
-      <div
-        id="super-navigation-menu-<%= unique_id %>" hidden
-        class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
-      >
+      <%= content_tag(:div, {
+        id: "super-navigation-menu-#{unique_id}",
+        hidden: "",
+        class: dropdown_menu_classes,
+      }) do %>
         <div class="govuk-width-container">
           <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
 
@@ -320,11 +324,9 @@
                             ga4_link: {
                               "event_name": "navigation",
                               "type": "header menu bar",
-                              "index": {
-                                "index_section": column_index + 1,
-                                "index_link": index + 1,
-                                "index_section_count": 4,
-                              },
+                              "index_section": column_index + 1,
+                              "index_link": index + 1,
+                              "index_section_count": 4,
                               "index_total": index_total,
                               "section": column[:label],
                             }
@@ -338,9 +340,13 @@
             <% end %>
           </div>
         </div>
-      </div>
+      <% end %>
 
-      <div id="super-search-menu" hidden class="gem-c-layout-super-navigation-header__navigation-dropdown-menu">
+      <%= content_tag(:div, {
+        id: "super-search-menu",
+        hidden: "",
+        class: dropdown_menu_classes,
+      }) do %>        
         <div class="govuk-width-container gem-c-layout-super-navigation-header__search-container gem-c-layout-super-navigation-header__search-items">
           <h3 class="govuk-visually-hidden">
             <%= navigation_search_subheading %>
@@ -353,6 +359,7 @@
                 data-module="ga4-form-tracker"
                 data-ga4-form='{ "event_name": "search", "type": "header menu bar", "section": "Search GOV.UK", "action": "search", "url": "/search/all" }'
                 data-ga4-form-include-text
+                data-ga4-form-no-answer-undefined
                 action="/search"
                 method="get"
                 role="search"
@@ -362,7 +369,9 @@
                   inline_label: false,
                   label_size: "m",
                   label_text: search_text,
+                  label_custom_class: "gem-c-layout-super-navigation-header__search-label--large-navbar",
                   size: "large",
+                  margin_bottom: 0,
                   data_attributes: {
                     track_category: "headerClicked",
                     track_action: "searchSubmitted",
@@ -376,7 +385,11 @@
           </div>
           <div class="govuk-grid-row">
             <div class="govuk-grid-column-full">
-              <h3 class="govuk-heading-m"><%= popular_links_heading %></h3>
+              <%= content_tag(:h3, {
+                class: popular_links_heading_classes
+              }) do %>
+                <%= popular_links_heading %>
+              <% end %>
               <ul class="govuk-list">
                 <% index_total = popular_links.length %>
                 <% popular_links.each_with_index do | popular_link, index | %>
@@ -395,11 +408,9 @@
                         ga4_link: {
                           "event_name": "navigation",
                           "type": "header menu bar",
-                          "index": {
-                            "index_section": 4,
-                            "index_link": index + 1,
-                            "index_section_count": 4,
-                          },
+                          "index_section": 4,
+                          "index_link": index + 1,
+                          "index_section_count": 4,
                           "index_total": index_total,
                           "section": popular_links_heading,
                         }
@@ -411,7 +422,7 @@
             </div>
           </div>
         </div>
-      </div>
+      <% end %>
     </nav>
   </div>
 <% end %>

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

@@ -11,6 +11,7 @@
   label_margin_bottom ||= nil
   label_size ||= nil
   label_text ||= t("components.search_box.label")
+  label_custom_class ||= nil
   name ||= "q"
   homepage ||= false
   no_border ||= false
@@ -42,6 +43,7 @@
     label_classes << "gem-c-search__label"
   end
   label_classes << "govuk-!-margin-bottom-#{label_margin_bottom}" if [*1..9].include?(label_margin_bottom) and local_assigns.include?(:inline_label)
+  label_classes << label_custom_class if label_custom_class
 
   tag_label = capture do
     tag.label(for: id, class: label_classes) do

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

@@ -54,9 +54,7 @@
               ga4_link_data = {
                 'event_name': 'navigation',
                 'type': 'share page',
-                'index': {
-                  'index_link': index + 1,
-                },
+                'index_link': index + 1,
                 'index_total': links.length,
                 'text': link[:icon],
               }
@@ -65,9 +63,7 @@
               ga4_link_data = {
                 'event_name': 'navigation',
                 'type': 'follow us',
-                'index': {
-                  'index_link': index + 1,
-                },
+                'index_link': index + 1,
                 'index_total': links.length
               }
             end

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

@@ -84,10 +84,8 @@
                 "ga4-link": {
                   "event_name": "navigation",
                   "type": "step by step",
-                  "index": {
-                    "index_section": step_index + 1,
-                    "index_section_count": steps.length
-                  },
+                  "index_section": step_index + 1,
+                  "index_section_count": steps.length,
                   "section": step[:title]
                 }.to_json
               }

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

@@ -26,6 +26,15 @@
     tracking_options ||= ({ dimension96: tracking_id }).to_json
   end
 
+  if ga4_tracking
+    ga4_data = {
+      event_name: "navigation",
+      type: "super breadcrumb",
+      index_link: "1",
+      index_total: "1",
+    }.to_json
+  end
+
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w[gem-c-step-nav-header]
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
@@ -44,7 +53,7 @@
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"
         <% if ga4_tracking %>
-          data-ga4-link='{"event_name":"navigation", "type":"super breadcrumb", "index":{"index_link": "1"}, "index_total":"1"}'
+          data-ga4-link='<%= ga4_data %>'
         <% end %>
         <% if tracking_dimension_enabled %>
           data-track-dimension="<%= tracking_dimension %>"

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

@@ -23,13 +23,11 @@
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
             data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'
-            <% if ga4_tracking 
+            <% if ga4_tracking
               ga4_attributes = {
                 event_name: "navigation",
                 type: "part of",
-                index:{
-                  "index_link": "1"
-                },
+                "index_link": "1",
                 index_total: "1",
                 section: pretitle,
               }.to_json
@@ -53,13 +51,11 @@
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
                 data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'
-                <% if ga4_tracking 
+                <% if ga4_tracking
                   ga4_attributes = {
                     event_name: "navigation",
                     type: "part of",
-                    index:{
-                      "index_link": (index + 1).to_s
-                    },
+                    index_link: (index + 1).to_s,
                     index_total: (links.length).to_s,
                     section: pretitle,
                   }.to_json

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

@@ -34,10 +34,8 @@
               event_name: "select_content",
               type: "tabs",
               text: tab[:label],
-              index: {
-                index_section: index + 1,
-                index_section_count: tabs.length,
-              },
+              index_section: index + 1,
+              index_section_count: tabs.length,
             }
             ga4_attributes[:event_name] = "navigation" if as_links
             tab[:tab_data_attributes][:ga4_link] = ga4_attributes if as_links

data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb

@@ -1,4 +1,4 @@
-<% 
+<%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   title = t("components.related_navigation.ukraine.title")
   lang = shared_helper.t_locale("components.related_navigation.ukraine.title")
@@ -15,11 +15,9 @@
           ga4_attributes = {
             event_name: "navigation",
             type: "related content",
-            index: {
-              index_section: "#{ga4_tracking_counts.index_section_count}",
-              index_link: "#{index + 1}",
-              index_section_count: "#{ga4_tracking_counts.index_section_count}",
-            },
+            index_section: "#{ga4_tracking_counts.index_section_count}",
+            index_link: "#{index + 1}",
+            index_section_count: "#{ga4_tracking_counts.index_section_count}",
             index_total: "#{index_total}",
             section: title,
           } if ga4_tracking

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

@@ -205,8 +205,8 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
-  two_thirds_column:
-    description: This variant is used for the featured section on the homepage, the aspect ratio used is 1:1
+  two_thirds:
+    description: This variant is used for the featured section on the homepage. The aspect ratio used is 1:1 and the width of the image is constrained to 80px wide.
     data:
       two_thirds: true
       href: "/still-not-a-page"

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

@@ -108,3 +108,8 @@ examples:
     data:
       label_margin_bottom: 9
       inline_label: false
+  with_custom_label_class:
+    description: |
+      Allows adding a custom class to the label of the component.
+    data:
+      label_custom_class: "govuk-heading-xl"

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -24,7 +24,7 @@
   <% end %>
 
   <ul class="gem-c-related-navigation__link-list">
-    <% 
+    <%
       constructed_link_array = []
       section_link_limit = related_nav_helper.calculate_section_link_limit(links)
       index_total = links.length
@@ -35,11 +35,9 @@
         ga4_attributes = {
           event_name: "navigation",
           type: ga4_type,
-          index: {
-            index_section: "#{section_index}",
-            index_link: "#{index}",
-            index_section_count: "#{section_count}",
-          },
+          index_section: "#{section_index}",
+          index_link: "#{index}",
+          index_section_count: "#{section_count}",
           index_total: "#{index_total}",
           section: ga4_heading_text,
         } if ga4_tracking
@@ -70,7 +68,7 @@
 
     <% if links.length > section_link_limit %>
       <%
-        classes = "gem-c-related-navigation__link toggle-wrap"      
+        classes = "gem-c-related-navigation__link toggle-wrap"
         data_attributes_li = { module: "ga4-event-tracker" } if ga4_tracking
         data_attributes_link = {
           controls: "toggle_#{section_title}",
@@ -83,7 +81,7 @@
         <%= link_to("#", class: "gem-c-related-navigation__toggle", data: data_attributes_link) do %>
           <%= t("common.toggle_more",
             show: t('common.show'),
-            number: related_nav_helper.remaining_link_count(links)) %>        
+            number: related_nav_helper.remaining_link_count(links)) %>
         <% end %>
       <% end %>
 

data/lib/govuk_publishing_components/presenters/breadcrumbs_helper.rb

@@ -61,9 +61,7 @@ module GovukPublishingComponents
           ga4_link: {
             event_name: "navigation",
             type: "breadcrumb",
-            index: {
-              index_link: index.to_s,
-            },
+            index_link: index.to_s,
             index_total: breadcrumbs_length.to_s,
           },
         }

data/lib/govuk_publishing_components/presenters/layout_footer_helper.rb

@@ -23,11 +23,9 @@ module GovukPublishingComponents
         {
           "event_name": "navigation",
           "type": "footer",
-          "index": {
-            "index_link": (index_link + 1).to_s,
-            "index_section": (index_section + 1).to_s,
-            "index_section_count": @ga4_index_section_count.to_s,
-          },
+          "index_link": (index_link + 1).to_s,
+          "index_section": (index_section + 1).to_s,
+          "index_section_count": @ga4_index_section_count.to_s,
           "index_total": index_total.to_s,
           "section": section,
         }

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.19.0".freeze
+  VERSION = "35.20.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.19.0
+  version: 35.20.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-10-18 00:00:00.000000000 Z
+date: 2023-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -418,6 +418,7 @@ files:
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-16x9.png
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-1x1.png
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-4x3.png
+- app/assets/images/govuk_publishing_components/icon-close.svg
 - app/assets/images/govuk_publishing_components/icon-file-download.svg
 - app/assets/images/govuk_publishing_components/icon-important.svg
 - app/assets/images/govuk_publishing_components/icon-print-2x.png
@@ -450,6 +451,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-print-intent-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-scroll-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js