govuk_publishing_components 32.0.0 → 33.0.0

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

@@ -27,10 +27,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             schema_name: this.getMetaContent('schema-name'),
             content_id: this.getMetaContent('content-id'),
 
-            section: this.getMetaContent('section'),
+            browse_topic: this.getMetaContent('section'),
             taxon_slug: this.getMetaContent('taxon-slug'),
             taxon_id: this.getMetaContent('taxon-id'),
-            themes: this.getMetaContent('themes'),
+            taxonomy_level1: this.getMetaContent('themes'),
             taxon_slugs: this.getMetaContent('taxon-slugs'),
             taxon_ids: this.getMetaContent('taxon-ids'),
 

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

@@ -0,0 +1,140 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {};
+
+(function (analyticsModules) {
+  'use strict'
+
+  var Ga4SpecialistLinkTracker = {
+    init: function (config) {
+      if (window.dataLayer) {
+        config = config || {}
+        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/']
+        this.dedicatedDownloadDomains = config.dedicatedDownloadDomains || ['assets.publishing.service.gov.uk']
+        window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(this.dedicatedDownloadDomains)
+        this.handleClick = this.handleClick.bind(this)
+        this.handleMousedown = this.handleMousedown.bind(this)
+
+        document.querySelector('body').addEventListener('click', this.handleClick)
+        document.querySelector('body').addEventListener('contextmenu', this.handleClick)
+        document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
+      }
+    },
+
+    stopTracking: function () {
+      document.querySelector('body').removeEventListener('click', this.handleClick)
+      document.querySelector('body').removeEventListener('contextmenu', this.handleClick)
+      document.querySelector('body').removeEventListener('mousedown', this.handleMousedown)
+    },
+
+    handleClick: function (event) {
+      var element = event.target
+
+      if (element.tagName !== 'A') {
+        element = element.closest('a')
+      }
+
+      if (!element) {
+        return
+      }
+
+      // don't track this link if it's already being tracked by the other link tracker
+      if (element.closest('[data-ga4-link]')) {
+        return
+      }
+
+      var href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+      var clickData = {}
+      if (window.GOVUK.analyticsGa4.core.trackFunctions.isMailToLink(href)) {
+        clickData.event_name = 'navigation'
+        clickData.type = 'email'
+        clickData.external = 'true'
+      } else if (this.isDownloadLink(href)) {
+        clickData.event_name = 'file_download'
+        clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
+        clickData.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href) ? 'true' : 'false'
+      } else if (window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href)) {
+        clickData.event_name = 'navigation'
+        clickData.type = 'generic link'
+        clickData.external = 'true'
+      }
+
+      if (Object.keys(clickData).length > 0) {
+        clickData.url = href
+        if (clickData.url) {
+          clickData.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(clickData.url)
+          clickData.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(clickData.url)
+          clickData.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(clickData.url)
+        }
+
+        clickData.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(element.textContent)
+        clickData.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
+
+        var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
+        schema.event = 'event_data'
+
+        // get attributes from the clickData object to send to GA
+        // only allow it if it already exists in the schema
+        for (var property in clickData) {
+          if (property in schema.event_data) {
+            schema.event_data[property] = clickData[property]
+          }
+        }
+
+        window.GOVUK.analyticsGa4.core.sendData(schema)
+      }
+    },
+
+    handleMousedown: function (event) {
+      // 1 = middle mouse button
+      if (event.button === 1) {
+        this.handleClick(event)
+      }
+    },
+
+    isDownloadLink: function (href) {
+      if (window.GOVUK.analyticsGa4.core.trackFunctions.isInternalLink(href) && this.hrefPointsToDownloadPath(href)) {
+        return true
+      }
+
+      var result = false
+      for (var i = 0; i < this.dedicatedDownloadDomains.length; i++) {
+        var downloadDomain = this.dedicatedDownloadDomains[i]
+        if (window.GOVUK.analyticsGa4.core.trackFunctions.hrefPointsToDomain(href, downloadDomain)) {
+          result = true
+        }
+      }
+      return result
+    },
+
+    isPreviewLink: function (href) {
+      /*  Regex looks for:
+      1. The file extension period (the character '.')
+      2. any alphanumeric characters (so we can match any file type such as jpg, pdf, mp4.)
+      3. the presence of '/preview'.
+      For example, .csv/preview or .mp4/preview will be matched.
+      Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
+      */
+      var previewRegex = /\.\w+\/preview/i
+      return previewRegex.test(href)
+    },
+
+    hrefPointsToDownloadPath: function (href) {
+      var result = false
+      for (var i = 0; i < this.internalDownloadPaths.length; i++) {
+        var internalDownloadPath = this.internalDownloadPaths[i]
+        if (href.indexOf(internalDownloadPath) !== -1) {
+          result = true
+        }
+      }
+      return result
+    }
+  }
+
+  analyticsModules.Ga4SpecialistLinkTracker = Ga4SpecialistLinkTracker
+})(window.GOVUK.analyticsGa4.analyticsModules)

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

@@ -7,6 +7,9 @@ var initFunction = function () {
   var consentCookie = window.GOVUK.getConsentCookie()
 
   if (consentCookie && consentCookie.usage) {
+    window.GOVUK.analyticsGa4.vars.internalDomains = []
+    window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
+    window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
     window.GOVUK.analyticsGa4.core.load()
 
     var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules

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-specialist-link-tracker
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
 //= require ./analytics-ga4/ga4-ecommerce-tracker

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

@@ -43,9 +43,10 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
     // look for data attributes to put onto the 'show/hide all' link
     var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
+    var showAll
     if (showAllAttributes) {
       try {
-        var showAll = this.$module.querySelector(this.showAllControls)
+        showAll = this.$module.querySelector(this.showAllControls)
         var values = JSON.parse(showAllAttributes)
         var keys = Object.keys(values)
         for (var i = 0; i < keys.length; i++) {
@@ -55,6 +56,16 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
         console.error('Could not read accordion data attributes error: ' + e.message, window.location)
       }
     }
+
+    // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
+    var dataModule = this.$module.getAttribute('data-module')
+    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: 0, index_total: indexTotal }
+      showAll = this.$module.querySelector(this.showAllControls)
+      showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
+    }
   }
 
   // Navigate to and open accordions with anchored content on page load if a hash is present

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -98,13 +98,22 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return $menu.querySelectorAll('button[aria-expanded="true"]').length > 0
   }
 
-  // Returns what screen size the window is currently. Returns a string of
-  // either `desktop` or `mobile` so it can be interpolated to access the
+  // Detect the current viewport width. Return the string `desktop` or `mobile` so it can be interpolated to access the
   // `data-toggle-{desktop|mobile}-group` attribute.
+  //
+  // Use `matchedia` which mitigates issues in modern browsers when scrollbars are forced in MacOS (using `document.documentElement.clientWidth`
+  // for viewport width detection has issues in Chrome and Firefox, and `window.innerWidth` has issues in Safari).
+  //
+  //  Fall back to `document.documentElement.clientWidth` for legacy browsers.
   var windowSize = function () {
-    return document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
+    var viewport = false
+    if (typeof window.matchMedia === 'function') {
+      viewport = window.matchMedia('(min-width:' + SETTINGS.breakpoint.desktop + 'px)').matches
+    } else {
+      viewport = document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop
+    }
+    return viewport ? 'desktop' : 'mobile'
   }
-
   function SuperNavigationMegaMenu ($module) {
     this.$module = $module
     this.$navigationToggle = this.$module.querySelector('#super-navigation-menu-toggle')

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -28,15 +28,31 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           var responseText = xhr.responseText
-          // if response text exists and is JSON parse-able, parse the response and get the button html
+          // if response text exists and is JSON parse-able, parse the response and update the button html
           if (responseText && this.responseIsJSON(responseText)) {
-            var newButton = JSON.parse(responseText).button_html
-            var html = document.createElement('div')
-            html.innerHTML = newButton
-            // test that the html returned contains the button component; if yes, swap the button for the updated version
-            var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
-            if (responseButtonContainer) {
-              this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+            var active = JSON.parse(responseText).active
+
+            var customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
+            var customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
+            // Only set custom button text if both text items are provided
+            var customText = customSubscribeText && customUnsubscribeText
+
+            // Append '-[button-location]' to the tracking data attribute value if data-button-location is set
+            var optionalButtonLocation = this.$module.getAttribute('data-button-location') ? '-' + this.$module.getAttribute('data-button-location') : ''
+
+            // If response returns active, user has subscribed to notifications
+            if (active === true) {
+              this.$module.setAttribute('data-track-action', 'Unsubscribe-button' + optionalButtonLocation)
+
+              if (customText) {
+                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customUnsubscribeText
+              }
+            } else {
+              this.$module.setAttribute('data-track-action', 'Subscribe-button' + optionalButtonLocation)
+
+              if (customText) {
+                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customSubscribeText
+              }
             }
           }
         }

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

@@ -133,11 +133,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 +180,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 +192,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,72 +207,73 @@
   }
 
   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;
   }());
 
   var LUX = window.LUX || {};
@@ -290,7 +288,7 @@
     /// End
     // -------------------------------------------------------------------------
 
-    var SCRIPT_VERSION = "302";
+    var SCRIPT_VERSION = "304";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION]);
@@ -787,8 +785,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) {
@@ -1657,7 +1655,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 +1668,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 +1684,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/components/_big-number.scss

@@ -5,12 +5,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/_image-card.scss

@@ -107,11 +107,7 @@
 .gem-c-image-card__metadata {
   @include govuk-font($size: false);
   font-size: 16px;
-
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
-
+  font-size: govuk-px-to-rem(16px);
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 

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

@@ -4,14 +4,12 @@ $search-icon-size: 40px;
 .gem-c-input__search-icon {
   display: block;
   position: relative;
-  margin-bottom: -$search-icon-size;
   z-index: 1;
+  margin-bottom: -$search-icon-size;
+  margin-bottom: -(govuk-px-to-rem($search-icon-size));
   width: $search-icon-size;
   height: $search-icon-size;
-  @if $govuk-typography-use-rem {
-    margin-bottom: -(govuk-px-to-rem($search-icon-size));
-    height: govuk-px-to-rem($search-icon-size);
-  }
+  height: govuk-px-to-rem($search-icon-size);
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") no-repeat -3px center;
 }
 

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

@@ -201,9 +201,7 @@ $after-button-padding-left: govuk-spacing(5);
 
   display: inline-block;
   font-size: 19px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(19px);
-  }
+  font-size: govuk-px-to-rem(19px);
   font-weight: bold;
   margin: govuk-spacing(3) 0;
 
@@ -242,14 +240,10 @@ $after-button-padding-left: govuk-spacing(5);
     }
 
     @include govuk-media-query($from: "desktop") {
+      // stylelint-disable max-nesting-depth
       float: left;
       font-size: 16px;
-
-      // stylelint-disable max-nesting-depth
-      @if $govuk-typography-use-rem {
-        font-size: govuk-px-to-rem(16px);
-      }
-
+      font-size: govuk-px-to-rem(16px);
       height: govuk-spacing(4);
       position: relative;
 
@@ -394,9 +388,7 @@ $after-button-padding-left: govuk-spacing(5);
       color: govuk-colour("white");
       float: left;
       font-size: 16px;
-      @if $govuk-typography-use-rem {
-        font-size: govuk-px-to-rem(16px);
-      }
+      font-size: govuk-px-to-rem(16px);
       height: $black-bar-height;
       position: relative;
       text-decoration: none;
@@ -604,9 +596,7 @@ $after-button-padding-left: govuk-spacing(5);
   @include govuk-link-style-no-underline;
 
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: 700;
   background: govuk-colour("black");
   border: 0;
@@ -878,9 +868,7 @@ $after-button-padding-left: govuk-spacing(5);
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
 
   &:after {
     @include make-selectable-area-bigger;
@@ -898,9 +886,7 @@ $after-button-padding-left: govuk-spacing(5);
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 }
 
@@ -934,9 +920,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
   display: inline-block;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -956,9 +940,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
   @include govuk-typography-common;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: normal;
   margin: govuk-spacing(1) 0 0 0;
 }
@@ -996,9 +978,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__popular-link {
   display: inline-block;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   padding: 0;
 
   &:after {