govuk_publishing_components 40.1.0 → 41.1.0

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

@@ -22,6 +22,140 @@
 (function () {
   'use strict';
 
+  function floor(x) {
+    return Math.floor(x);
+  }
+  var max = Math.max;
+  var round = Math.round;
+  /**
+  * Clamp a number so that it is never less than 0
+  */
+  function clamp(x) {
+    return max(0, x);
+  }
+  function sortNumeric(a, b) {
+    return a - b;
+  }
+
+  function now() {
+    return Date.now ? Date.now() : +new Date();
+  }
+
+  var scriptStartTime = now();
+
+  var _a;
+  // If the various performance APIs aren't available, we export an empty object to
+  // prevent having to make regular typeof checks.
+  var performance = window.performance || {};
+  var timing = performance.timing || {
+    activationStart: 0,
+    // 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 navigationType() {
+    if (performance.navigation && typeof performance.navigation.type !== "undefined") {
+      return performance.navigation.type;
+    }
+    return "";
+  }
+  function getNavigationEntry() {
+    var navEntries = getEntriesByType("navigation");
+    if (navEntries.length) {
+      var nativeEntry = navEntries[0];
+      var entry_1 = {
+        navigationStart: 0,
+        activationStart: 0,
+      };
+      for (var key in nativeEntry) {
+        entry_1[key] = nativeEntry[key];
+      }
+      return entry_1;
+    }
+    var navType = navigationType();
+    var entry = {
+      navigationStart: 0,
+      activationStart: 0,
+      startTime: 0,
+      type: navType == 2 ? "back_forward" : navType === 1 ? "reload" : "navigate",
+    };
+    if (true) {
+      for (var key in timing) {
+        if (typeof timing[key] === "number" && key !== "navigationStart") {
+          entry[key] = floor(timing[key] - timing.navigationStart);
+        }
+      }
+    }
+    return entry;
+  }
+  /**
+  * 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);
+      if (entries && entries.length) {
+        return entries;
+      }
+    }
+    return [];
+  }
+  /**
+  * Simple wrapper around performance.getEntriesByName to provide fallbacks for
+  * legacy browsers, and work around edge cases where undefined is returned instead
+  * of an empty PerformanceEntryList.
+  */
+  function getEntriesByName(type) {
+    if (typeof performance.getEntriesByName === "function") {
+      var entries = performance.getEntriesByName(type);
+      if (entries && entries.length) {
+        return entries;
+      }
+    }
+    return [];
+  }
+
+  function isVisible() {
+    if (document.visibilityState) {
+      return document.visibilityState === "visible";
+    }
+    // For browsers that don't support document.visibilityState, we assume the page is visible.
+    return true;
+  }
+  function onVisible(cb) {
+    afterPrerender(function () {
+      if (isVisible()) {
+        cb();
+      }
+      else {
+        var onVisibleCallback_1 = function () {
+          if (isVisible()) {
+            cb();
+            removeEventListener("visibilitychange", onVisibleCallback_1);
+          }
+        };
+        addEventListener("visibilitychange", onVisibleCallback_1, true);
+      }
+    });
+  }
+  function afterPrerender(cb) {
+    if (document.prerendering) {
+      document.addEventListener("prerenderingchange", cb, true);
+    }
+    else {
+      cb();
+    }
+  }
+  function wasPrerendered() {
+    return document.prerendering || getNavigationEntry().activationStart > 0;
+  }
+  function wasRedirected() {
+    return getNavigationEntry().redirectCount > 0 || timing.redirectEnd > 0;
+  }
+
   var Flags = {
     InitCalled: 1 << 0,
     NavTimingNotSupported: 1 << 1,
@@ -64,10 +198,6 @@
     }
   }
 
-  function now() {
-    return Date.now ? Date.now() : +new Date();
-  }
-
   var LogEvent = {
     // Internal events
     EvaluationStart: 1,
@@ -136,98 +266,6 @@
   var END_MARK = "LUX_end";
   var BOOLEAN_TRUE = "true";
 
-  function floor(x) {
-    return Math.floor(x);
-  }
-  var max = Math.max;
-  var round = Math.round;
-  /**
-  * Clamp a number so that it is never less than 0
-  */
-  function clamp(x) {
-    return max(0, x);
-  }
-  function sortNumeric(a, b) {
-    return a - b;
-  }
-
-  var scriptStartTime = now();
-
-  var _a;
-  // If the various performance APIs aren't available, we export an empty object to
-  // prevent having to make regular typeof checks.
-  var performance = window.performance || {};
-  var timing = performance.timing || {
-    activationStart: 0,
-    // 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 navigationType() {
-    if (performance.navigation && typeof performance.navigation.type !== "undefined") {
-      return performance.navigation.type;
-    }
-    return "";
-  }
-  function getNavigationEntry() {
-    var navEntries = getEntriesByType("navigation");
-    if (navEntries.length) {
-      var nativeEntry = navEntries[0];
-      var entry_1 = {
-        navigationStart: 0,
-        activationStart: 0,
-      };
-      for (var key in nativeEntry) {
-        entry_1[key] = nativeEntry[key];
-      }
-      return entry_1;
-    }
-    var navType = navigationType();
-    var entry = {
-      navigationStart: 0,
-      activationStart: 0,
-      startTime: 0,
-      type: navType == 2 ? "back_forward" : navType === 1 ? "reload" : "navigate",
-    };
-    if (true) {
-      for (var key in timing) {
-        if (typeof timing[key] === "number" && key !== "navigationStart") {
-          entry[key] = floor(timing[key] - timing.navigationStart);
-        }
-      }
-    }
-    return entry;
-  }
-  /**
-  * 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);
-      if (entries && entries.length) {
-        return entries;
-      }
-    }
-    return [];
-  }
-  /**
-  * Simple wrapper around performance.getEntriesByName to provide fallbacks for
-  * legacy browsers, and work around edge cases where undefined is returned instead
-  * of an empty PerformanceEntryList.
-  */
-  function getEntriesByName(type) {
-    if (typeof performance.getEntriesByName === "function") {
-      var entries = performance.getEntriesByName(type);
-      if (entries && entries.length) {
-        return entries;
-      }
-    }
-    return [];
-  }
-
   /**
   * Milliseconds since navigationStart representing when the page was restored from the bfcache
   */
@@ -283,7 +321,7 @@
     return str;
   }
 
-  var VERSION = "4.0.23";
+  var VERSION = "4.0.25";
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -303,6 +341,13 @@
   };
   var sendBeacon = "sendBeacon" in navigator ? navigator.sendBeacon.bind(navigator) : sendBeaconFallback;
   /**
+  * Some values should only be reported if they are non-zero. The exception to this is when the page
+  * was prerendered or restored from BF cache
+  */
+  function shouldReportValue(value) {
+    return value > 0 || getPageRestoreTime() || wasPrerendered();
+  }
+  /**
   * 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.
   */
@@ -338,7 +383,7 @@
         _this.logger.logEvent(LogEvent.PostBeaconTimeoutReached);
         _this.stopRecording();
         _this.send();
-      }, this.config.maxMeasureTime);
+      }, this.config.maxMeasureTime - msSincePageInit());
       addListener("securitypolicyviolation", function (e) {
         if (e.disposition !== "report" && e.blockedURI === _this.config.beaconUrlV2 && "URL" in self) {
           // Some websites might have CSP rules that allow the GET beacon, but not the POST beacon.
@@ -541,44 +586,6 @@
     return encodeURIComponent(strings.join(","));
   }
 
-  function isVisible() {
-    if (document.visibilityState) {
-      return document.visibilityState === "visible";
-    }
-    // For browsers that don't support document.visibilityState, we assume the page is visible.
-    return true;
-  }
-  function onVisible(cb) {
-    afterPrerender(function () {
-      if (isVisible()) {
-        cb();
-      }
-      else {
-        var onVisibleCallback_1 = function () {
-          if (isVisible()) {
-            cb();
-            removeEventListener("visibilitychange", onVisibleCallback_1);
-          }
-        };
-        addEventListener("visibilitychange", onVisibleCallback_1, true);
-      }
-    });
-  }
-  function afterPrerender(cb) {
-    if (document.prerendering) {
-      document.addEventListener("prerenderingchange", cb, true);
-    }
-    else {
-      cb();
-    }
-  }
-  function wasPrerendered() {
-    return document.prerendering || getNavigationEntry().activationStart > 0;
-  }
-  function wasRedirected() {
-    return getNavigationEntry().redirectCount > 0 || timing.redirectEnd > 0;
-  }
-
   function getClosestScTrackAttribute(el) {
     var _a;
     if (el.hasAttribute("data-sctrack")) {
@@ -603,7 +610,8 @@
   function getNodeSelector(node, selector) {
     if (selector === void 0) { selector = ""; }
     try {
-      if (selector && (node.nodeType === 9 || selector.length > MAX_SELECTOR_LENGTH || !node.parentNode)) {
+      if (selector &&
+        (node.nodeType === 9 || selector.length > MAX_SELECTOR_LENGTH || !node.parentNode)) {
         // Final selector.
         return selector;
       }
@@ -659,27 +667,27 @@
         elementSelector: getNodeSelector(source.node),
         elementType: source.node.nodeName,
       }); })
-      : [];
+    : [];
     if (sessionEntries.length &&
       (entry.startTime - latestEntry.startTime >= 1000 ||
         entry.startTime - firstEntry.startTime >= 5000)) {
-          sessionValue = entry.value;
-          sessionEntries = [entry];
-          sessionAttributions = sources;
-          largestEntry = entry;
-    }
-    else {
-      sessionValue += entry.value;
-      sessionEntries.push(entry);
-      sessionAttributions = sessionAttributions.concat(sources);
-      if (!largestEntry || entry.value > largestEntry.value) {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+        sessionAttributions = sources;
         largestEntry = entry;
       }
-    }
-    maximumSessionValue = max(maximumSessionValue, sessionValue);
+      else {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+        sessionAttributions = sessionAttributions.concat(sources);
+        if (!largestEntry || entry.value > largestEntry.value) {
+          largestEntry = entry;
+        }
+      }
+      maximumSessionValue = max(maximumSessionValue, sessionValue);
     }
   }
-  function reset$1() {
+  function reset$2() {
     sessionValue = 0;
     sessionEntries = [];
     maximumSessionValue = 0;
@@ -711,7 +719,7 @@
   var slowestEntriesMap = {};
   // The total number of interactions recorded on the page
   var interactionCountEstimate = 0;
-  function reset() {
+  function reset$1() {
     interactionCountEstimate = 0;
     slowestEntries = [];
     slowestEntriesMap = {};
@@ -808,6 +816,9 @@
       lcpEntry = entry;
     }
   }
+  function reset() {
+    lcpEntry = undefined;
+  }
   function getData() {
     if (!lcpEntry) {
       return undefined;
@@ -831,8 +842,14 @@
         };
       }
     }
+    var value = processTimeMetric(lcpEntry.startTime);
+    if (!shouldReportValue(value)) {
+      // It's possible the LCP entry we have occurred before the current page was initialised. In
+      // this case, we don't want to report the LCP value.
+      return undefined;
+    }
     return {
-      value: processTimeMetric(lcpEntry.startTime),
+      value: value,
       subParts: subParts,
       attribution: lcpEntry.element
       ? {
@@ -846,7 +863,7 @@
   var ALL_ENTRIES = [];
   function observe(type, callback, options) {
     if (typeof PerformanceObserver === "function" &&
-    PerformanceObserver.supportedEntryTypes.includes(type)) {
+      PerformanceObserver.supportedEntryTypes.includes(type)) {
       var po = new PerformanceObserver(function (list) {
         list.getEntries().forEach(function (entry) { return callback(entry); });
       });
@@ -1011,6 +1028,9 @@
     var gUid = refreshUniqueId(gSyncId); // cookie for this session ("Unique ID")
     var gCustomDataTimeout; // setTimeout timer for sending a Custom data beacon after onload
     var gMaxMeasureTimeout; // setTimeout timer for sending the beacon after a maximum measurement time
+    // Storing the customer ID in a local variable makes it possible to run multiple instances of lux.js
+    // on the same page.
+    var _thisCustomerId = LUX.customerid;
     var initPostBeacon = function () {
       return new Beacon({
         config: globalConfig,
@@ -1031,7 +1051,6 @@
     };
     try {
       observe("longtask", processAndLogEntry);
-      observe("largest-contentful-paint", processAndLogEntry);
       observe("element", processAndLogEntry);
       observe("paint", processAndLogEntry);
       observe("largest-contentful-paint", function (entry) {
@@ -1083,13 +1102,6 @@
     catch (e) {
       logger.logEvent(LogEvent.PerformanceObserverError, [e]);
     }
-    /**
-    * Some values should only be reported if they are non-zero. The exception to this is when the page
-    * was prerendered or restored from BF cache
-    */
-    var shouldReportValue = function (value) {
-      return value > 0 || getPageRestoreTime() || wasPrerendered();
-    };
     if (_sample()) {
       logger.logEvent(LogEvent.SessionIsSampled, [globalConfig.samplerate]);
     }
@@ -1263,8 +1275,8 @@
         var endTime = typeof endMarkName === "number" ? endMarkName : msSincePageInit();
         var throwError = function (missingMark) {
           throw new DOMException("Failed to execute 'measure' on 'Performance': The mark '" +
-          missingMark +
-          "' does not exist");
+            missingMark +
+            "' does not exist");
         };
         if (typeof startMarkName === "string") {
           var startMark = _getMark(startMarkName);
@@ -1531,7 +1543,7 @@
     // Track how long it took lux.js to load via Resource Timing.
     function selfLoading() {
       var sLuxjs = "";
-      if (performance.getEntriesByName) {
+      if (gbFirstPV && performance.getEntriesByName) {
         // Get the lux script URL (including querystring params).
         var aResources = performance.getEntriesByName(thisScript.src);
         if (aResources && aResources.length) {
@@ -1568,6 +1580,8 @@
           "";
         }
       }
+      // How long data was collected before the beacon was sent
+      sLuxjs += "m" + msSincePageInit();
       return sLuxjs;
     }
     // _clearIx
@@ -1632,6 +1646,11 @@
         _mark(START_MARK);
       }
       logger.logEvent(LogEvent.InitCalled);
+      // This is an edge case where LUX.auto = true but LUX.init() has been called. In this case, the
+      // POST beacon will not be sent automatically, so we need to send it here.
+      if (globalConfig.auto && !beacon.isSent) {
+        beacon.send();
+      }
       // Clear all interactions from the previous "page".
       _clearIx();
       // Since we actively disable IX handlers, we re-add them each time.
@@ -1644,8 +1663,9 @@
       gbFirstPV = 0;
       gSyncId = createSyncId();
       gUid = refreshUniqueId(gSyncId);
-      reset$1();
       reset();
+      reset$2();
+      reset$1();
       nErrors = 0;
       gFirstInputDelay = undefined;
       beacon = initPostBeacon();
@@ -1676,9 +1696,9 @@
           !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++;
+          // If the script has a SRC and async is false and it occurs BEFORE the last viewport element,
+          // then increment the counter.
+          num++;
         }
       }
       return num;
@@ -1697,7 +1717,7 @@
             "style" === e.as ||
             (typeof e.onload === "function" && e.media === "all")) ;
           else {
-              nBlocking++;
+            nBlocking++;
           }
         }
       }
@@ -2167,7 +2187,8 @@
       var metricsQueryString =
       // only send Nav Timing and lux.js metrics on initial pageload (not for SPA page views)
       (gbNavSent ? "" : "&NT=" + getNavTiming()) +
-      (gbFirstPV ? "&LJS=" + sLuxjs : "") +
+      "&LJS=" +
+      sLuxjs +
       // Page Stats
       "&PS=ns" +
       numScripts() +

data/app/assets/stylesheets/component_guide/application.scss

@@ -13,8 +13,8 @@ $gem-guide-border-width: 1px;
   @extend %govuk-list--bullet;
 
   li {
-    @include govuk-font($size: 19);
     margin-bottom: $govuk-gutter-half;
+    @include govuk-font($size: 19);
   }
 
   p {
@@ -44,28 +44,28 @@ $gem-guide-border-width: 1px;
 }
 
 .component-violation {
-  @include govuk-text-colour;
   border: 3px solid $govuk-error-colour;
   margin: 0 0 $govuk-gutter;
   padding: $govuk-gutter $govuk-gutter;
+  @include govuk-text-colour;
 
   .component-violation__title {
-    @include govuk-font($size: 24, $weight: bold);
     margin: 0;
+    @include govuk-font($size: 24, $weight: bold);
   }
 
   .component-violation__link {
     display: block;
-    @include govuk-font($size: 19, $weight: bold);
     color: $govuk-error-colour;
     margin: $govuk-gutter-half 0;
+    @include govuk-font($size: 19, $weight: bold);
   }
 }
 
 .component-doc-h2 {
+  margin: ($govuk-gutter * 1.5) 0 $govuk-gutter;
   @include govuk-text-colour;
   @include govuk-font($size: 27, $weight: bold);
-  margin: ($govuk-gutter * 1.5) 0 $govuk-gutter;
 
   small {
     @include govuk-font($size: 16, $weight: bold);
@@ -73,8 +73,8 @@ $gem-guide-border-width: 1px;
 }
 
 .component-doc-h3 {
-  @include govuk-text-colour;
   margin: $govuk-gutter 0 $govuk-gutter-half;
+  @include govuk-text-colour;
   @include govuk-font($size: 19, $weight: bold);
 }
 
@@ -149,9 +149,9 @@ $gem-guide-border-width: 1px;
 
 .component-guide-preview--violation,
 .component-guide-preview--warning {
-  @include govuk-text-colour;
   margin-top: -$gem-guide-border-width;
 
+  @include govuk-text-colour;
   @include govuk-font($size: 19);
 
   &:empty {
@@ -185,13 +185,12 @@ $gem-guide-border-width: 1px;
   }
 
   &::before {
-    @include govuk-font($size: 16);
     content: attr(data-content);
     position: absolute;
     top: 0;
     left: 0;
     padding: .2105em .7894em;
-    font-weight: bold;
+    @include govuk-font($size: 16, $weight: bold);
   }
 }
 
@@ -217,9 +216,9 @@ $gem-guide-border-width: 1px;
     margin: 0 0 $govuk-gutter * 1.5;
 
     .example-title {
+      margin: $govuk-gutter-half 0;
       @include govuk-text-colour;
       @include govuk-font($size: 24, $weight: bold);
-      margin: $govuk-gutter-half 0;
     }
 
     .example-title small {
@@ -508,8 +507,8 @@ $code-delete-bg: #fadddd;
 
 .component__application-name {
   display: block;
-  @include govuk-font($size: 16);
   font-weight: normal;
+  @include govuk-font($size: 16);
 }
 
 .component__count {

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

@@ -31,7 +31,7 @@
   // Change the summary subheading size.
   .govuk-accordion__section-summary {
     @include govuk-typography-common;
-    @include govuk-typography-responsive($size: 16, $important: true);
+    @include govuk-font-size($size: 16, $important: true);
   }
 
   // Hide the unusable "Show all" and "Show" sections.

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

@@ -26,9 +26,9 @@
 }
 
 .gem-c-action-link__link-wrapper {
-  @include govuk-font(19, $weight: bold, $line-height: 1.3);
   display: table-cell;
   vertical-align: middle;
+  @include govuk-font(19, $weight: bold, $line-height: 1.3);
 }
 
 .gem-c-action-link__link {
@@ -73,10 +73,9 @@
 }
 
 .gem-c-action-link__subtext {
-  @include govuk-font(19);
   display: block;
-  font-weight: normal;
   color: inherit;
+  @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
     position: relative;

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

@@ -10,9 +10,9 @@ $thumbnail-shadow-width: 0 2px 2px;
 $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 
 .gem-c-attachment {
+  position: relative;
   @include govuk-font(19);
   @include govuk-clearfix;
-  position: relative;
 
   .govuk-details {
     margin: govuk-spacing(3) 0;
@@ -51,8 +51,8 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 }
 
 .gem-c-attachment__title {
-  @include govuk-font($size: 27);
   margin: 0 0 govuk-spacing(3);
+  @include govuk-font($size: 27);
 }
 
 .gem-c-attachment__link {
@@ -60,9 +60,9 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 }
 
 .gem-c-attachment__metadata {
-  @include govuk-font($size: 19);
   margin: 0 0 govuk-spacing(3);
   color: $govuk-secondary-text-colour;
+  @include govuk-font($size: 19);
 
   &:last-of-type {
     margin-bottom: 0;

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

@@ -6,10 +6,10 @@
 }
 
 .gem-c-big-number__value {
-  @include govuk-font($size: false, $weight: bold);
   line-height: 1;
   font-size: 80px;
   font-size: govuk-px-to-rem(80px);
+  @include govuk-font($size: false, $weight: bold);
 }
 
 .gem-c-big-number__label {