govuk_publishing_components 32.1.0 → 33.1.0

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"),
@@ -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/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;
 }