govuk_publishing_components 32.1.0 → 35.0.0

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

@@ -38,8 +38,13 @@
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName](element).init()
-              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              try {
+                new GOVUK.Modules[moduleName](element).init()
+                element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              } catch (e) {
+                // if there's a problem with the module, catch the error to allow other modules to start
+                console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
+              }
             }
           }
         }

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"),
@@ -133,11 +135,8 @@
   }
 
   /**
-   * Get the interaction attribution name for an element
-   *
-   * @param {HTMLElement} el
-   * @returns string
-   */
+  * Get the interaction attribution name for an element
+  */
   function interactionAttributionForElement(el) {
     // Our first preference is to use the data-sctrack attribute from anywhere in the tree
     var trackId = getClosestScTrackAttribute(el);
@@ -183,10 +182,10 @@
   // prevent having to make regular typeof checks.
   var performance = window.performance || {};
   var timing = performance.timing || {
-      // If performance.timing isn't available, we attempt to polyfill the navigationStart value.
-      // Our first attempt is from LUX.ns, which is the time that the snippet execution began. If this
-      // is not available, we fall back to the time that the current script execution began.
-      navigationStart: ((_a = window.LUX) === null || _a === void 0 ? void 0 : _a.ns) || scriptStartTime,
+    // If performance.timing isn't available, we attempt to polyfill the navigationStart value.
+    // Our first attempt is from LUX.ns, which is the time that the snippet execution began. If this
+    // is not available, we fall back to the time that the current script execution began.
+    navigationStart: ((_a = window.LUX) === null || _a === void 0 ? void 0 : _a.ns) || scriptStartTime,
   };
   function msSinceNavigationStart() {
     if (performance.now) {
@@ -195,10 +194,10 @@
     return now() - timing.navigationStart;
   }
   /**
-   * Simple wrapper around performance.getEntriesByType to provide fallbacks for
-   * legacy browsers, and work around edge cases where undefined is returned instead
-   * of an empty PerformanceEntryList.
-   */
+  * Simple wrapper around performance.getEntriesByType to provide fallbacks for
+  * legacy browsers, and work around edge cases where undefined is returned instead
+  * of an empty PerformanceEntryList.
+  */
   function getEntriesByType(type) {
     if (typeof performance.getEntriesByType === "function") {
       var entries = performance.getEntriesByType(type);
@@ -210,74 +209,92 @@
   }
 
   var Matching = /** @class */ (function () {
-      function Matching() {
+    function Matching() {
+    }
+    Matching.isMatching = function (pattern, url) {
+      var regexp = Matching.createRegexpFromPattern(pattern);
+      return url.match(regexp) ? true : false;
+    };
+    /**
+    * Converts string pattern to RegExp object
+    * @return RegExp
+    */
+    Matching.createRegexpFromPattern = function (pattern) {
+      var regexp;
+      if (pattern == "/") {
+        regexp = this.getRegexpForHostnameRoot();
       }
-      Matching.isMatching = function (pattern, url) {
-          var regexp = Matching.createRegexpFromPattern(pattern);
-          return url.match(regexp) ? true : false;
-      };
-      /**
-       * Converts string pattern to RegExp object
-       * @return RegExp
-       */
-      Matching.createRegexpFromPattern = function (pattern) {
-          var regexp;
-          if (pattern == "/") {
-              regexp = this.getRegexpForHostnameRoot();
-          }
-          else if (!pattern.includes(Matching.wildcard)) {
-              regexp = this.getRegexpForExactString(pattern);
-          }
-          else if (pattern.charAt(0) == "/") {
-              regexp = this.createRegexpFromPathname(pattern);
-          }
-          else {
-              regexp = this.createRegexpFromPathname(pattern, false);
-          }
-          return regexp;
-      };
-      /**
-       * Converts URL pathname string pattern to RegExp object
-       * Multile wildcards (*) are supported
-       * @return RegExp
-       */
-      Matching.createRegexpFromPathname = function (pattern, anyDomain) {
-          if (anyDomain === void 0) { anyDomain = true; }
-          pattern = this.escapeStringForRegexp(pattern);
-          var expression = "^" +
-              (anyDomain ? Matching.domainExpression : "") +
-              pattern.replaceAll(Matching.wildcard, ".*?") +
-              "$";
-          return new RegExp(expression, "i");
-      };
-      /**
-       * Matches hostname root (e.g. "/", "somedomain.com/", "www.somedomain.co.nz/")
-       * Trailing slash is mandatory
-       * @return RegExp
-       */
-      Matching.getRegexpForHostnameRoot = function () {
-          return new RegExp("^" + Matching.domainExpression + "/$", "i");
-      };
-      /**
-       * Matches exact string (no wildcard provided)
-       * @return RegExp
-       */
-      Matching.getRegexpForExactString = function (string) {
-          return new RegExp("^" + this.escapeStringForRegexp(string) + "/?$", "i");
-      };
-      /**
-       * Escape special symbols in regexp string
-       * @param string
-       */
-      Matching.escapeStringForRegexp = function (string) {
-          // we don't escape * because it's our own special symbol!
-          return string.replace(/[-/\\^$+?.()|[\]{}]/g, "\\$&");
-      };
-      Matching.wildcard = "*";
-      Matching.domainExpression = "[a-zA-Z0-9-.]{1,61}[a-zA-Z0-9]\\.[a-zA-Z]{2,}";
-      return Matching;
+      else if (!pattern.includes(Matching.wildcard)) {
+        regexp = this.getRegexpForExactString(pattern);
+      }
+      else {
+        regexp = this.createRegexpFromPathname(pattern);
+      }
+      return regexp;
+    };
+    /**
+    * Converts URL pathname string pattern to RegExp object
+    * Multile wildcards (*) are supported
+    * @return RegExp
+    */
+    Matching.createRegexpFromPathname = function (pattern) {
+      var anyDomain = pattern.charAt(0) == "/";
+      pattern = this.escapeStringForRegexp(pattern);
+      var expression = "^" +
+      (anyDomain ? Matching.domainExpression : "") +
+      pattern.replaceAll(Matching.wildcard, ".*?") +
+      "$";
+      return new RegExp(expression, "i");
+    };
+    /**
+    * Matches hostname root (e.g. "/", "somedomain.com/", "www.somedomain.co.nz/")
+    * Trailing slash is mandatory
+    * @return RegExp
+    */
+    Matching.getRegexpForHostnameRoot = function () {
+      return new RegExp("^" + Matching.domainExpression + "/$", "i");
+    };
+    /**
+    * Matches exact string (no wildcard provided)
+    * @return RegExp
+    */
+    Matching.getRegexpForExactString = function (string) {
+      var anyDomain = string.charAt(0) == "/";
+      return new RegExp("^" +
+      (anyDomain ? Matching.domainExpression : "") +
+      this.escapeStringForRegexp(string) +
+      "/?$", "i");
+    };
+    /**
+    * Escape special symbols in regexp string
+    * @param string
+    */
+    Matching.escapeStringForRegexp = function (string) {
+      // we don't escape * because it's our own special symbol!
+      return string.replace(/[-/\\^$+?.()|[\]{}]/g, "\\$&");
+    };
+    Matching.wildcard = "*";
+    Matching.domainExpression = "[a-zA-Z0-9-.]{1,61}[a-zA-Z0-9]\\.[a-zA-Z]{2,}";
+    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 () {
@@ -290,7 +307,7 @@
     /// End
     // -------------------------------------------------------------------------
 
-    var SCRIPT_VERSION = "302";
+    var SCRIPT_VERSION = "305";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION]);
@@ -384,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]);
     }
@@ -703,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() {
@@ -787,8 +803,8 @@
         ",x|" +
         hStats["max"] +
         (0 === hStats["fci"] ? "" : ",i|" + hStats["fci"]); // only add FCI if it is non-zero
-        sCPU += "s|" + hCPU[jsType] + sStats + hCPUDetails[jsType];
-        return sCPU;
+      sCPU += "s|" + hCPU[jsType] + sStats + hCPUDetails[jsType];
+      return sCPU;
     }
     // Return a hash of "stats" about the CPU details incl. count, max, and median.
     function cpuStats(sDetails) {
@@ -1408,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 ||
@@ -1427,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.
@@ -1444,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 : "") +
@@ -1499,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.
@@ -1531,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);
       }
@@ -1576,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;
@@ -1614,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);
       }
@@ -1657,7 +1607,7 @@
       _removeIxHandlers();
       if (typeof ghIx["k"] === "undefined") {
         ghIx["k"] = Math.round(_now());
-        if (e && e.target) {
+        if (e && e.target instanceof Element) {
           var trackId = interactionAttributionForElement(e.target);
           if (trackId) {
             ghIx["ki"] = trackId;
@@ -1670,16 +1620,15 @@
       _removeIxHandlers();
       if (typeof ghIx["c"] === "undefined") {
         ghIx["c"] = Math.round(_now());
-        var target = null;
+        var target = void 0;
         try {
           // Seeing "Permission denied" errors, so do a simple try-catch.
-          if (e && e.target) {
+          if (e && e.target instanceof Element) {
             target = e.target;
           }
         }
         catch (e) {
           logger.logEvent(LogEvent.EventTargetAccessError);
-          target = null;
         }
         if (target) {
           if (e.clientX) {
@@ -1687,7 +1636,7 @@
             ghIx["cx"] = e.clientX;
             ghIx["cy"] = e.clientY;
           }
-          var trackId = interactionAttributionForElement(e.target);
+          var trackId = interactionAttributionForElement(target);
           if (trackId) {
             ghIx["ci"] = trackId;
           }

data/app/assets/stylesheets/govuk_publishing_components/_individual_component_support.scss

@@ -0,0 +1,10 @@
+$govuk-new-link-styles: true;
+
+// This flag stops the font from being included in this components's
+// stylesheet - the font is being served by Static across all of GOV.UK, so is
+// not needed here.
+$govuk-include-default-font-face: false;
+
+// Each component needs access to the variables, functions, and mixins from
+// GOVUK Frontend.
+@import "govuk_frontend_support";

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "mixins/prefixed-transform";
 @import "govuk/components/accordion/accordion";
 
@@ -5,3 +6,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/_action-link.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-action-link {
   display: table;
 

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 $thumbnail-width: 99px;
 $thumbnail-height: 140px;
 $thumbnail-border-width: 5px;

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/back-link/back-link";

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
   @include govuk-text-colour;
@@ -5,12 +7,9 @@
 
 .gem-c-big-number__value {
   @include govuk-font($size: false, $weight: bold);
-  font-size: 80px;
   line-height: 1;
-
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(80px);
-  }
+  font-size: 80px;
+  font-size: govuk-px-to-rem(80px);
 }
 
 .gem-c-big-number__label {

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/breadcrumbs/breadcrumbs";
 
 .gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item .govuk-breadcrumbs__link {

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/button/button";
 
 // Because govuk-frontend adds a responsive bottom margin by default for each component
@@ -100,3 +101,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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "mixins/grid-helper";
 @import "mixins/prefixed-transform";
 
@@ -107,3 +108,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/_character-count.scss

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/character-count/character-count";

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/checkboxes/checkboxes";
 
 .govuk-checkboxes--nested {