govuk_publishing_components 33.0.0 → 34.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72c594630cfc9f9359ae29eaff51094d512f4060cff0ad23e96319f264b0bae6
-  data.tar.gz: d074f64d7b59bd3657e0e84c2a44f9de23a8a5db99e71e832b2eab98a617fb8e
+  metadata.gz: d27a853451e7e5d792f6d4844c3192d325093a13bb352e726a7d5917186d9207
+  data.tar.gz: f564406c3fe69d492b3c1f86713b0d8e7fd4f9bba214e3056fa4de42cea452b4
 SHA512:
-  metadata.gz: 77cde1c322a721bc97a30a348e53b84d369c029afa32cd81fc7def30577aea67324f4c60ecc5c6f03e1c77dc3697d6a2ab5339a177c3946276ddcaa26bb72303
-  data.tar.gz: 7134f8030b4d16a4b4e38dc5ba6aa8d9c08aa0bc2ef319e7710b407685a8cbace2ce9c32c5330883cd93412690687387f5960246667a63a8808cc20949c02de1
+  metadata.gz: e4323ecea03126f79bf1dc2e173a6c19504341b956a92bd8bcf85dd82bcd6003fe68dec8a835f3c35874044b4e7bd6542b029ad885976fc6efc18527ab6e707a
+  data.tar.gz: f5463262a5c4069311287fd9ba13f36191a4675bcc6c70e0c6b36d0a04f7c3a11d4229bc2f5caa9d194194dbda264264723d0d65846b85aa62b29c289892f716

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -12,4 +12,3 @@
 //= link govuk_publishing_components/vendor/lux/lux-reporter.js
 //= link govuk_publishing_components/vendor/lux/lux-measurer.js
 //= link component_guide/application.css
-//= link component_guide/print.css

data/app/assets/javascripts/component_guide/accessibility-test.js

@@ -24,7 +24,6 @@
     })
 
     var axeOptions = {
-      include: [selector],
       rules: axeRules
     }
 

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

@@ -50,7 +50,7 @@
       var schema = this.populateEcommerceSchema(searchResultsBlock, false, null)
 
       this.clearPreviousEcommerceObject()
-      window.dataLayer.push(schema)
+      GOVUK.analyticsGa4.core.sendData(schema)
     },
 
     handleClick: function (event) {
@@ -62,7 +62,7 @@
         var schema = this.populateEcommerceSchema(searchResultsBlock, true, searchResult)
 
         this.clearPreviousEcommerceObject()
-        window.dataLayer.push(schema)
+        GOVUK.analyticsGa4.core.sendData(schema)
       }
     },
 
@@ -127,7 +127,7 @@
     },
 
     clearPreviousEcommerceObject: function () {
-      window.dataLayer.push({ search_results: { ecommerce: null } })
+      GOVUK.analyticsGa4.core.sendData({ search_results: { ecommerce: null } })
     },
 
     getResultsCount: function (searchResultsBlock) {

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

@@ -36,6 +36,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$module.uniqueId = this.$module.getAttribute('data-id') || false
 
+    this.$module.dataModule = this.$module.getAttribute('data-module')
+    this.$module.isGa4Enabled = this.$module.dataModule ? this.$module.dataModule.indexOf('ga4-event-tracker') !== -1 : false
+
     if (this.$module.uniqueId) {
       this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
     }
@@ -78,6 +81,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$module.insertBefore(showAll, steps)
     this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
+
+    // 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: 0, index_total: this.$module.totalSteps }
+      this.$module.showOrHideAllButton.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
+    }
   }
 
   Gemstepnav.prototype.addShowHideToggle = function () {
@@ -169,12 +178,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var title = thisel.querySelectorAll('.js-step-title')[0]
       var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
       var titleText = title.textContent || title.innerText // IE8 fallback
+      var ga4Data = ''
+
+      if (this.$module.isGa4Enabled) {
+        var ga4JSON = {
+          event_name: 'select_content',
+          type: 'step by step',
+          text: titleText.trim(),
+          index: i + 1,
+          index_total: this.$module.totalSteps
+        }
+        ga4Data = "data-ga4-event='" + JSON.stringify(ga4JSON) + "'" // Construct GA4 data-attributes for ga4-event-tracker.
+      }
 
       title.outerHTML =
         '<span class="js-step-title">' +
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
-            'aria-expanded="false" aria-controls="' + contentId + '">' +
+            'aria-expanded="false" aria-controls="' + contentId + '" ' + ga4Data + '>' +
               '<span class="gem-c-step-nav____title-text-focus">' +
                   '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
                   '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +

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

@@ -38,6 +38,8 @@
       errorBeaconUrl: getProperty(obj, "errorBeaconUrl", "https://lux.speedcurve.com/error/"),
       jspagelabel: getProperty(obj, "jspagelabel", undefined),
       label: getProperty(obj, "label", undefined),
+      maxBeaconUrlLength: getProperty(obj, "maxBeaconUrlLength", 8190),
+      maxBeaconUTEntries: getProperty(obj, "maxBeaconUTEntries", 20),
       maxErrors: getProperty(obj, "maxErrors", 5),
       maxMeasureTime: getProperty(obj, "maxMeasureTime", 60000),
       measureUntil: getProperty(obj, "measureUntil", "onload"),
@@ -276,6 +278,23 @@
     return Matching;
   }());
 
+  /**
+  * Fit an array of user timing delimited strings into a URL and return both the entries that fit and
+  * the remaining entries that didn't fit.
+  */
+  function fitUserTimingEntries(utValues, config, url) {
+    // Start with the maximum allowed UT entries per beacon
+    var beaconUtValues = utValues.slice(0, config.maxBeaconUTEntries);
+    var remainingUtValues = utValues.slice(config.maxBeaconUTEntries);
+    // Trim UT entries until they fit within the maximum URL length, ensuring at least one UT entry
+    // is included.
+    while ((url + "&UT=" + beaconUtValues.join(",")).length > config.maxBeaconUrlLength &&
+    beaconUtValues.length > 1) {
+      remainingUtValues.unshift(beaconUtValues.pop());
+    }
+    return [beaconUtValues, remainingUtValues];
+  }
+
   var LUX = window.LUX || {};
   var scriptEndTime = scriptStartTime;
   LUX = (function () {
@@ -288,7 +307,7 @@
     /// End
     // -------------------------------------------------------------------------
 
-    var SCRIPT_VERSION = "304";
+    var SCRIPT_VERSION = "305";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION]);
@@ -382,7 +401,6 @@
     var gUid = refreshUniqueId(gSyncId); // cookie for this session ("Unique ID")
     var gCustomerDataTimeout; // setTimeout timer for sending a Customer Data beacon after onload
     var gMaxMeasureTimeout; // setTimeout timer for sending the beacon after a maximum measurement time
-    var gMaxQuerystring = 8190; // split the beacon querystring if it gets longer than this
     if (_sample()) {
       logger.logEvent(LogEvent.SessionIsSampled, [globalConfig.samplerate]);
     }
@@ -701,7 +719,7 @@
         }
         aUT.push(utParts.join("|"));
       }
-      return aUT.join(",");
+      return aUT;
     }
     // Return a string of Element Timing Metrics formatted for beacon querystring.
     function elementTimingValues() {
@@ -1406,8 +1424,28 @@
         clearTimeout(gMaxMeasureTimeout);
       }
     }
+    function _getBeaconUrl() {
+      var queryParams = [
+        "v=" + SCRIPT_VERSION,
+        "id=" + getCustomerId(),
+        "sid=" + gSyncId,
+        "uid=" + gUid,
+        "l=" + encodeURIComponent(_getPageLabel()),
+        "HN=" + encodeURIComponent(document.location.hostname),
+        "PN=" + encodeURIComponent(document.location.pathname),
+      ];
+      if (gFlags) {
+        queryParams.push("fl=" + gFlags);
+      }
+      var customerData = customerDataValues();
+      if (customerData) {
+        queryParams.push("CD=" + customerData);
+      }
+      return globalConfig.beaconUrl + "?" + queryParams.join("&");
+    }
     // Beacon back the LUX data.
     function _sendLux() {
+      var _a;
       clearMaxMeasureTimeout();
       var customerid = getCustomerId();
       if (!customerid ||
@@ -1425,9 +1463,7 @@
         // with LUX.markLoadTime()
         _markLoadTime();
       }
-      var sUT = userTimingValues(); // User Timing data
       var sET = elementTimingValues(); // Element Timing data
-      var sCustomerData = customerDataValues(); // customer data
       var sIx = ""; // Interaction Metrics
       if (!gbIxSent) {
         // It is possible for the IX beacon to be sent BEFORE the "main" window.onload LUX beacon.
@@ -1442,21 +1478,10 @@
       }
       // We want ALL beacons to have ALL the data used for query filters (geo, pagelabel, browser, & customerdata).
       // So we create a base URL that has all the necessary information:
-      var baseUrl = globalConfig.beaconUrl +
-        "?v=" +
-        SCRIPT_VERSION +
-        "&id=" +
-        customerid +
-        "&sid=" +
-        gSyncId +
-        "&uid=" +
-        gUid +
-        (sCustomerData ? "&CD=" + sCustomerData : "") +
-        "&l=" +
-        encodeURIComponent(_getPageLabel());
+      var baseUrl = _getBeaconUrl();
       var is = inlineTagSize("script");
       var ic = inlineTagSize("style");
-      var querystring =
+      var metricsQueryString =
         // only send Nav Timing and lux.js metrics on initial pageload (not for SPA page views)
         (gbNavSent ? "" : "&NT=" + getNavTiming()) +
         (gbFirstPV ? "&LJS=" + sLuxjs : "") +
@@ -1497,31 +1522,15 @@
         (sIx ? "&IX=" + sIx : "") +
         (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +
         (sCPU ? "&CPU=" + sCPU : "") +
-        (gFlags ? "&fl=" + gFlags : "") +
         (sET ? "&ET=" + sET : "") + // element timing
-        "&HN=" +
-        encodeURIComponent(document.location.hostname) +
-        (DCLS !== false ? "&CLS=" + DCLS : "") +
-        "&PN=" +
-        encodeURIComponent(document.location.pathname);
-      // User Timing marks & measures
-      var sUT_remainder = "";
-      if (sUT) {
-        var curLen = baseUrl.length + querystring.length;
-        if (curLen + sUT.length <= gMaxQuerystring) {
-          // Add all User Timing
-          querystring += "&UT=" + sUT;
-        }
-        else {
-          // Only add a substring of User Timing
-          var avail_1 = gMaxQuerystring - curLen; // how much room is left in the querystring
-          var iComma = sUT.lastIndexOf(",", avail_1); // as many UT tuples as possible
-          querystring += "&UT=" + sUT.substring(0, iComma);
-          sUT_remainder = sUT.substring(iComma + 1);
-        }
-      }
+        (DCLS !== false ? "&CLS=" + DCLS : "");
+      // We add the user timing entries last so that we can split them to reduce the URL size if necessary.
+      var utValues = userTimingValues();
+      var _b = fitUserTimingEntries(utValues, globalConfig, baseUrl + metricsQueryString), beaconUtValues = _b[0], remainingUtValues = _b[1];
       // Send the MAIN LUX beacon.
-      var mainBeaconUrl = baseUrl + querystring;
+      var mainBeaconUrl = baseUrl +
+      metricsQueryString +
+      (beaconUtValues.length > 0 ? "&UT=" + beaconUtValues.join(",") : "");
       logger.logEvent(LogEvent.MainBeaconSent, [mainBeaconUrl]);
       _sendBeacon(mainBeaconUrl);
       // Set some states.
@@ -1529,34 +1538,9 @@
       gbNavSent = 1;
       gbIxSent = sIx ? 1 : 0;
       // Send other beacons for JUST User Timing.
-      var avail = gMaxQuerystring - baseUrl.length;
-      while (sUT_remainder) {
-        var sUT_cur = "";
-        if (sUT_remainder.length <= avail) {
-          // We can fit ALL the remaining UT params.
-          sUT_cur = sUT_remainder;
-          sUT_remainder = "";
-        }
-        else {
-          // We have to take a subset of the remaining UT params.
-          var iComma = sUT_remainder.lastIndexOf(",", avail); // as many UT tuples as possible
-          if (-1 === iComma) {
-            // Trouble: we have SO LITTLE available space we can not fit the first UT tuple.
-            // Try it anyway but find it by searching from the front.
-            iComma = sUT_remainder.indexOf(",");
-          }
-          if (-1 === iComma) {
-            // The is only one UT tuple left, but it is bigger than the available space.
-            // Take the whole tuple even tho it is too big.
-            sUT_cur = sUT_remainder;
-            sUT_remainder = "";
-          }
-          else {
-            sUT_cur = sUT_remainder.substring(0, iComma);
-            sUT_remainder = sUT_remainder.substring(iComma + 1);
-          }
-        }
-        var utBeaconUrl = baseUrl + "&UT=" + sUT_cur;
+      while (remainingUtValues.length) {
+        _a = fitUserTimingEntries(remainingUtValues, globalConfig, baseUrl), beaconUtValues = _a[0], remainingUtValues = _a[1];
+        var utBeaconUrl = baseUrl + "&UT=" + beaconUtValues.join(",");
         logger.logEvent(LogEvent.UserTimingBeaconSent, [utBeaconUrl]);
         _sendBeacon(utBeaconUrl);
       }
@@ -1574,26 +1558,10 @@
       }
       var sIx = ixValues(); // Interaction Metrics
       if (sIx) {
-        var sCustomerData = customerDataValues(); // customer data
-        var querystring = "?v=" +
-          SCRIPT_VERSION +
-          "&id=" +
-          customerid +
-          "&sid=" +
-          gSyncId +
-          "&uid=" +
-          gUid +
-          (sCustomerData ? "&CD=" + sCustomerData : "") +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          "&IX=" +
-          sIx +
-          (gFirstInputDelay ? "&FID=" + gFirstInputDelay : "") +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
-        var beaconUrl = globalConfig.beaconUrl + querystring;
+        var beaconUrl = _getBeaconUrl() +
+        "&IX=" +
+        sIx +
+        (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "");
         logger.logEvent(LogEvent.InteractionBeaconSent, [beaconUrl]);
         _sendBeacon(beaconUrl);
         gbIxSent = 1;
@@ -1612,23 +1580,7 @@
       }
       var sCustomerData = customerDataValues(); // customer data
       if (sCustomerData) {
-        var querystring = "?v=" +
-          SCRIPT_VERSION +
-          "&id=" +
-          customerid +
-          "&sid=" +
-          gSyncId +
-          "&uid=" +
-          gUid +
-          "&CD=" +
-          sCustomerData +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
-        var beaconUrl = globalConfig.beaconUrl + querystring;
+        var beaconUrl = _getBeaconUrl();
         logger.logEvent(LogEvent.CustomDataBeaconSent, [beaconUrl]);
         _sendBeacon(beaconUrl);
       }

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

@@ -5,3 +5,31 @@
 .gem-c-accordion__show-all > * {
   pointer-events: none;
 }
+
+// This is in place until a proper fix comes through from GOV.UK Frontend.
+//
+// TODO: Replace with the print styles that will come from GOV.UK Frontend.
+
+@include govuk-media-query($media-type: print) {
+  // Open all of the accordion sections.
+  .govuk-accordion__section-content {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+
+  // Change the colour from the blue link colour to black.
+  .govuk-accordion__section-button {
+    color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
+  }
+
+  // Change the summary subheading size.
+  .govuk-accordion__section-summary {
+    @include govuk-typography-common;
+    @include govuk-typography-responsive($size: 16, $important: true);
+  }
+
+  // Hide the unusable "Show all" and "Show" sections.
+  .govuk-accordion__show-all,
+  .govuk-accordion__section-toggle {
+    display: none !important; // stylelint-disable-line declaration-no-important
+  }
+}

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

@@ -100,3 +100,14 @@
     content: none;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-button {
+    @include govuk-font(14);
+    display: inline-block;
+    padding: govuk-spacing(1);
+    border: solid 1px govuk-colour("black");
+    color: $govuk-text-colour;
+    text-decoration: none;
+  }
+}

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

@@ -107,3 +107,22 @@
 .gem-c-cards__description {
   margin: 0 govuk-spacing(-6) 0 0;
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-cards__list {
+    display: block;
+  }
+
+  .gem-c-cards__list-item {
+    padding-bottom: 0;
+  }
+
+  .gem-c-cards__sub-heading {
+    margin-top: govuk-spacing(4);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .gem-c-cards__link:before {
+    display: none;
+  }
+}

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

@@ -74,3 +74,23 @@
     vertical-align: top;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  // Override default browser indentation
+  .gem-c-contents-list__list,
+  .gem-c-contents-list__nested-list {
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  // Put indentation back where we use list style types
+  .gem-c-contents-list__list-item--dashed {
+    margin-left: govuk-spacing(3);
+    list-style-type: disc;
+  }
+
+  .gem-c-contents-list__list-item--numbered,
+  .gem-c-contents-list__list-item--parent {
+    list-style-type: none;
+  }
+}

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

@@ -77,3 +77,9 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     margin-bottom: - govuk-spacing(2);
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-cookie-banner {
+    display: none !important; // stylelint-disable-line declaration-no-important
+  }
+}

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

@@ -74,3 +74,9 @@
   // the contrast was too low with white text
   background-color: #00847d;
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-emergency-banner {
+    display: none;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -137,3 +137,11 @@
     // stylelint-enable selector-no-qualifying-type
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-govspeak-html-publication {
+    .govuk-sticky-element {
+      display: none;
+    }
+  }
+}

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

@@ -27,3 +27,86 @@
     text-align: start;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  // stylelint-disable max-nesting-depth
+
+  .gem-c-govspeak {
+    .media-player {
+      display: none;
+    }
+
+    .info-notice,
+    .help-notice,
+    .call-to-action {
+      margin: govuk-spacing(3) 0;
+    }
+
+    .call-to-action {
+      background: none;
+      border: 1pt solid $govuk-border-colour;
+      padding: govuk-spacing(3);
+    }
+
+    .help-notice p {
+      font-weight: 700;
+    }
+
+    .fraction {
+      img {
+        display: inline-block;
+        margin-bottom: -7px;
+      }
+    }
+
+    .attachment {
+      margin: govuk-spacing(6) 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      .attachment-thumb {
+        display: none;
+      }
+
+      .attachment-details {
+        .download {
+          display: block;
+        }
+      }
+
+      .accessibility-warning {
+        h2 {
+          @include govuk-font(14);
+        }
+
+        .toggler {
+          display: none;
+        }
+      }
+    }
+
+    .footnotes {
+      border-top: 1px solid $govuk-text-colour;
+
+      a[role="doc-backlink"] {
+        display: none;
+      }
+    }
+
+    .legislative-list {
+      padding-left: 0;
+
+      &,
+      ol {
+        list-style: none;
+      }
+    }
+
+    .mc-toggle-button,
+    .mc-chart-container {
+      display: none;
+    }
+  }
+}

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

@@ -999,3 +999,9 @@ $after-button-padding-left: govuk-spacing(5);
     margin: 0;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-layout-super-navigation-header__content {
+    display: none;
+  }
+}

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

@@ -17,3 +17,18 @@
   @include govuk-font(19, $weight: bold);
   display: block;
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-step-nav-header {
+    padding: 0 0 govuk-spacing(4) 0;
+    background: none;
+  }
+
+  .gem-c-step-nav-header__part-of {
+    display: block;
+  }
+
+  .gem-c-step-nav-header__title {
+    @include govuk-font(24, $weight: bold);
+  }
+}

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

@@ -532,3 +532,9 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     content: " \2013\00a0"; // dash followed by  
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-step-nav__panel {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}

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

@@ -9,3 +9,19 @@
     }
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-textarea {
+    .gem-c-label,
+    .gem-c-error-message,
+    .govuk-hint,
+    .govuk-character-count__message {
+      display: block;
+    }
+
+    .govuk-textarea {
+      width: 400px;
+      height: 40px;
+    }
+  }
+}

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

@@ -28,3 +28,13 @@
 .gem-c-title__text {
   margin: 0;
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-title__context {
+    margin: 0;
+  }
+
+  .gem-c-title__text {
+    margin-top: 0;
+  }
+}

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

@@ -1,4 +1,3 @@
-// Contents list helper is used in both print and screen stylesheets
 .gem-c-contents-list__list-item--numbered {
   .gem-c-contents-list__link {
     display: table;