govuk_publishing_components 38.1.1 → 38.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e957626449176c29e36bde0d645dda9a4dd296b7f06969cee8fb86c5c9bedd25
-  data.tar.gz: 7b8d2a6ea56fb37d014d01aa6cd5dc95fc0f62c99e36011ce8bea4183fd79c58
+  metadata.gz: 4a962544f5f3b684f7f946008d73fc0c4d266147adeb86761b2fafbdf9f77713
+  data.tar.gz: 3c14a82d4308f941d8dc7ac0990c8a504b1ada7dcd84666b2140a4bcdba01b79
 SHA512:
-  metadata.gz: 5e35fa964443be079e31839687e19811493fb76faa63ec948a619ca57a42cf611868fb590d16e1b92b40c3b2ec534ff94b6433ba6dd2b5cd7e0565ef07cbdcff
-  data.tar.gz: 6298895e8212651e27924b5dabe6e56f68ff8bab616051cb8c137e90e11f09b1ea5261a918de6b570729688ebc978cb40538235685525a9634e28425919d1ce7
+  metadata.gz: 2b237ac3408f80f1fd42d810e48a8d30e164d0fbd61b0e1e8314bf16d4b6e17809a0d3dc5a0c4ee4dbb4369a80f402244ed5ff6201779426e02e459c416567fe
+  data.tar.gz: 7c74c53993d223235c04646f52f5e894f077486ce04d7cf82ddedf73b3e0800d225ea69b75cb0516a6bdfa0c6bdabe1690594aef0643d55b1c1b88cc8db98960

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

@@ -371,11 +371,6 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           }
         } else {
           for (var i = 0; i < items.length; i++) {
-            // GA4 limits us to 200 items, so we should limit the array to this size.
-            if (i === 200) {
-              break
-            }
-
             var item = items[i]
             var path = item.getAttribute('data-ga4-ecommerce-path')
 
@@ -385,16 +380,28 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
               item.setAttribute('data-ga4-ecommerce-index', i + 1)
             }
 
-            ecommerceSchema.search_results.ecommerce.items.push({
+            var nextItem = {
               item_id: path,
               item_content_id: item.getAttribute('data-ga4-ecommerce-content-id') || undefined,
               item_list_name: listTitle,
               index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(item, startPosition)
-            })
+            }
+
+            // GA4 has a max payload, so ensure this array doesn't exceed 15,000 UTF-16 code units.
+            if ((this.getArraySize(ecommerceSchema.search_results.ecommerce.items) + this.getArraySize(nextItem)) >= 15000) {
+              break
+            }
+
+            ecommerceSchema.search_results.ecommerce.items.push(nextItem)
           }
         }
 
         return ecommerceSchema
+      },
+
+      getArraySize: function (array) {
+        // .length represents the number of UTF-16 code units in a string, so we can stringify the array then grab the length of the string to get an 'accurate enough' number representing the size.
+        return JSON.stringify(array).length
       }
     }
   }

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

@@ -65,17 +65,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.revealInitialPrompt()
     }.bind(this))
 
-    this.pageIsNotUsefulButton.addEventListener('click', function (e) {
-      var gaClientId
-      var dummyGaClientId = '111111111.1111111111'
-      if (window.GOVUK.cookie('_ga') === null || window.GOVUK.cookie('_ga') === '') {
-        gaClientId = dummyGaClientId
-      } else {
-        gaClientId = window.GOVUK.cookie('_ga').split('.').slice(-2).join('.')
-      }
-      this.setHiddenValuesNotUsefulForm(gaClientId)
-    }.bind(this))
-
     this.somethingIsWrongButton.addEventListener('click', function (e) {
       this.timerInterval = setInterval(function () {
         this.timer = this.timer + 1
@@ -162,33 +151,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.somethingIsWrongForm.appendChild(this.timerHoneyPot)
   }
 
-  Feedback.prototype.setHiddenValuesNotUsefulForm = function (gaClientId) {
-    var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
-    var finalPathName = encodeURI(currentPathName)
-    this.surveyForm.invalidInfoError = [
-      '<h2>Sorry, we’re unable to send your message as you haven’t given us a valid email address.</h2>',
-      ' <p>Enter an email address in the correct format, like name@example.com</p>'
-    ].join('')
-    if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
-      var hiddenInput = document.createElement('input')
-      hiddenInput.setAttribute('type', 'hidden')
-      hiddenInput.setAttribute('name', 'email_survey_signup[ga_client_id]')
-      hiddenInput.setAttribute('value', gaClientId || '0')
-      this.surveyForm.appendChild(hiddenInput)
-    }
-
-    if (document.querySelectorAll('.gem-c-feedback__email-link#take-survey').length === 0) {
-      var takeSurvey = document.createElement('a')
-      takeSurvey.setAttribute('href', 'https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId)
-      takeSurvey.setAttribute('class', 'gem-c-feedback__email-link govuk-link')
-      takeSurvey.setAttribute('id', 'take-survey')
-      takeSurvey.setAttribute('target', '_blank')
-      takeSurvey.setAttribute('rel', 'noopener noreferrer')
-      takeSurvey.innerHTML = 'Don’t have an email address?'
-      this.surveyWrapper.appendChild(takeSurvey)
-    }
-  }
-
   Feedback.prototype.updateAriaAttributes = function (linkClicked) {
     linkClicked.setAttribute('aria-expanded', true)
   }

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

@@ -192,5 +192,5 @@ try {
     }
   }
 } catch (e) {
-  console.error('Error in LUX reporting the HTTP protocol (' + window.location + '):', e)
+  console.error('Error in LUX reporting the HTTP protocol (%s):', window.location, e)
 }

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

@@ -46,6 +46,7 @@
       auto: autoMode,
       beaconUrl: getProperty(obj, "beaconUrl", luxOrigin + "/lux/"),
       conversions: getProperty(obj, "conversions"),
+      cookieDomain: getProperty(obj, "cookieDomain"),
       customerid: getProperty(obj, "customerid"),
       errorBeaconUrl: getProperty(obj, "errorBeaconUrl", luxOrigin + "/error/"),
       jspagelabel: getProperty(obj, "jspagelabel"),
@@ -120,6 +121,7 @@
     return Math.floor(x);
   }
   var max = Math.max;
+  var round = Math.round;
   /**
   * Clamp a number so that it is never less than 0
   */
@@ -178,7 +180,7 @@
       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);
@@ -240,6 +242,66 @@
     return getNavigationEntry().redirectCount > 0 || timing.redirectEnd > 0;
   }
 
+  function getClosestScTrackAttribute(el) {
+    var _a;
+    if (el.hasAttribute("data-sctrack")) {
+      var trackId = (_a = el.getAttribute("data-sctrack")) === null || _a === void 0 ? void 0 : _a.trim();
+      if (trackId) {
+        return trackId;
+      }
+    }
+    if (hasParentNode(el)) {
+      return getClosestScTrackAttribute(el.parentNode);
+    }
+    return null;
+  }
+
+  function hasParentNode(el) {
+    if (el.parentNode && el.parentNode.tagName) {
+      return true;
+    }
+    return false;
+  }
+  var MAX_SELECTOR_LENGTH = 100;
+  function getNodeSelector(node, selector) {
+    if (selector === void 0) {
+      selector = "";
+    }
+    try {
+      if (selector && (node.nodeType === 9 || selector.length > MAX_SELECTOR_LENGTH || !node.parentNode)) {
+        // Final selector.
+        return selector;
+      }
+      var el = node;
+      // Our first preference is to use the data-sctrack attribute from anywhere in the tree
+      var trackId = getClosestScTrackAttribute(el);
+      if (trackId) {
+        return trackId;
+      }
+      if (el.id) {
+        // Once we've found an element with ID we return the selector.
+        return "#" + el.id + (selector ? ">" + selector : "");
+      }
+      else {
+        // Otherwise attempt to get parent elements recursively
+        var name_1 = el.nodeType === 1 ? el.nodeName.toLowerCase() : el.nodeName.toUpperCase();
+        var classes = el.className ? "." + el.className.replace(/\s+/g, ".") : "";
+        var currentSelector = name_1 + classes + (selector ? ">" + selector : "");
+        if (el.parentNode) {
+          var selectorWithParent = getNodeSelector(el.parentNode, currentSelector);
+          if (selectorWithParent.length < MAX_SELECTOR_LENGTH) {
+            return selectorWithParent;
+          }
+        }
+        return currentSelector;
+      }
+    }
+    catch (error) {
+      // Do nothing.
+    }
+    return selector;
+  }
+
   var Flags = {
     InitCalled: 1 << 0,
     NavTimingNotSupported: 1 << 1,
@@ -258,56 +320,6 @@
     return flags | flag;
   }
 
-  function hasParentNode(el) {
-    if (el.parentNode && el.parentNode.tagName) {
-      return true;
-    }
-    return false;
-  }
-
-  /**
-  * 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);
-    if (trackId) {
-      return trackId;
-    }
-    // The second preference is to use the element's ID
-    if (el.id) {
-      return el.id;
-    }
-    // The third preference is to use the text content of a button or link
-    var isSubmitInput = el.tagName === "INPUT" && el.type === "submit";
-    var isButton = el.tagName === "BUTTON";
-    var isLink = el.tagName === "A";
-    if (isSubmitInput && el.value) {
-      return el.value;
-    }
-    if ((isButton || isLink) && el.innerText) {
-      return el.innerText;
-    }
-    if (hasParentNode(el)) {
-      return interactionAttributionForElement(el.parentNode);
-    }
-    // No suitable attribute was found
-    return "";
-  }
-  function getClosestScTrackAttribute(el) {
-    var _a;
-    if (el.hasAttribute("data-sctrack")) {
-      var trackId = (_a = el.getAttribute("data-sctrack")) === null || _a === void 0 ? void 0 : _a.trim();
-      if (trackId) {
-        return trackId;
-      }
-    }
-    if (hasParentNode(el)) {
-      return getClosestScTrackAttribute(el.parentNode);
-    }
-    return null;
-  }
-
   var LogEvent = {
     // Internal events
     EvaluationStart: 1,
@@ -358,7 +370,7 @@
       return this.events;
     };
     return Logger;
-  }());
+  })();
 
   var sessionValue = 0;
   var sessionEntries = [];
@@ -406,14 +418,33 @@
   }
   function addEntry$1(entry) {
     if (entry.interactionId || (entry.entryType === "first-input" && !entryExists(entry))) {
-      var duration = entry.duration, startTime = entry.startTime, interactionId = entry.interactionId;
+      var duration = entry.duration,
+        startTime = entry.startTime,
+        interactionId = entry.interactionId,
+        processingStart = entry.processingStart,
+        processingEnd = entry.processingEnd,
+        target = entry.target;
       var existingEntry = slowestEntriesMap[interactionId];
+      var selector = target ? getNodeSelector(target) : null;
       if (existingEntry) {
-        existingEntry.duration = max(duration, existingEntry.duration);
+        if (existingEntry.duration < duration) {
+          existingEntry.duration = duration;
+          existingEntry.startTime = startTime;
+          existingEntry.processingStart = processingStart;
+          existingEntry.processingEnd = processingEnd;
+          existingEntry.selector = selector;
+        }
       }
       else {
         interactionCountEstimate++;
-        slowestEntriesMap[interactionId] = { duration: duration, interactionId: interactionId, startTime: startTime };
+        slowestEntriesMap[interactionId] = {
+          duration: duration,
+          interactionId: interactionId,
+          startTime: startTime,
+          processingStart: processingStart,
+          processingEnd: processingEnd,
+          selector: selector,
+        };
         slowestEntries.push(slowestEntriesMap[interactionId]);
       }
       // Only store the longest <MAX_INTERACTIONS> interactions
@@ -430,10 +461,9 @@
   * Returns an estimated high percentile INP value based on the total number of interactions on the
   * current page.
   */
-  function getHighPercentileINP() {
-    var _a;
+  function getHighPercentileInteraction() {
     var index = Math.min(slowestEntries.length - 1, Math.floor(getInteractionCount() / 50));
-    return (_a = slowestEntries[index]) === null || _a === void 0 ? void 0 : _a.duration;
+    return slowestEntries[index];
   }
   function getInteractionCount() {
     if ("interactionCount" in performance) {
@@ -547,7 +577,7 @@
     // -------------------------------------------------------------------------
     /// End
     // -------------------------------------------------------------------------
-    var SCRIPT_VERSION = "313";
+    var SCRIPT_VERSION = "314";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION, globalConfig]);
@@ -661,7 +691,7 @@
     */
     var getZeroTime = function () {
       var _a;
-      return Math.max(pageRestoreTime || 0, getNavigationEntry().activationStart, ((_a = _getMark(START_MARK)) === null || _a === void 0 ? void 0 : _a.startTime) || 0);
+      return max(pageRestoreTime || 0, getNavigationEntry().activationStart, ((_a = _getMark(START_MARK)) === null || _a === void 0 ? void 0 : _a.startTime) || 0);
     };
     /**
     * Most time-based metrics that LUX reports should be relative to the "zero" marker, rounded down
@@ -792,7 +822,7 @@
         return performance.mark.apply(performance, args);
       }
       // ...Otherwise provide a polyfill
-      {
+      if (true) {
         var name_1 = args[0];
         var detail = ((_a = args[1]) === null || _a === void 0 ? void 0 : _a.detail) || null;
         var startTime = ((_b = args[1]) === null || _b === void 0 ? void 0 : _b.startTime) || _now();
@@ -855,7 +885,7 @@
         return performance.measure.apply(performance, args);
       }
       // ...Otherwise provide a polyfill
-      {
+      if (true) {
         var navEntry = getNavigationEntry();
         var startTime = typeof startMarkName === "number" ? startMarkName : 0;
         var endTime = typeof endMarkName === "number" ? endMarkName : _now();
@@ -1123,7 +1153,7 @@
       }
       else {
         // Return the average of the two middle values.
-        return Math.round((aValues[half - 1] + aValues[half]) / 2.0);
+        return round((aValues[half - 1] + aValues[half]) / 2.0);
       }
     }
     // Track how long it took lux.js to load via Resource Timing.
@@ -1176,7 +1206,7 @@
     function ixValues() {
       var aIx = [];
       for (var key in ghIx) {
-        aIx.push(key + "|" + ghIx[key]);
+        aIx.push(key + "|" + encodeURIComponent(ghIx[key]));
       }
       return aIx.join(",");
     }
@@ -1288,7 +1318,7 @@
             e.onloadcssdefined ||
             "print" === e.media ||
             "style" === e.as ||
-            (typeof e.onload === "function" && e.media === "all")) ;
+            (typeof e.onload === "function" && e.media === "all"));
           else {
             nBlocking++;
           }
@@ -1492,11 +1522,31 @@
       logger.logEvent(LogEvent.PaintTimingNotSupported);
       return undefined;
     }
-    function getINP() {
+    function getINPDetails() {
       if (!("PerformanceEventTiming" in self)) {
         return undefined;
       }
-      return getHighPercentileINP();
+      return getHighPercentileInteraction();
+    }
+    /**
+    * Build the query string for the INP parameters:
+    *
+    * - INP: The duration of the P98 interaction
+    * - INPs: The selector of the P98 interaction element
+    * - INPt: The timestamp of the P98 interaction start time
+    * - INPi: The input delay subpart of the P98 interaction
+    * - INPp: The processing time subpart of the P98 interaction
+    * - INPd: The presentation delay subpart of the P98 interaction
+    */
+    function getINPString(details) {
+      return [
+        "&INP=" + details.duration,
+        details.selector ? "&INPs=" + encodeURIComponent(details.selector) : "",
+        "&INPt=" + clamp(floor(details.startTime)),
+        "&INPi=" + clamp(floor(details.processingStart - details.startTime)),
+        "&INPp=" + clamp(floor(details.processingEnd - details.processingStart)),
+        "&INPd=" + clamp(floor(details.startTime + details.duration - details.processingEnd)),
+      ].join("");
     }
     function getCustomerId() {
       return LUX.customerid || "";
@@ -1508,7 +1558,7 @@
       while (i--) {
         totalParents += numParents(aElems[i]);
       }
-      var average = Math.round(totalParents / aElems.length);
+      var average = round(totalParents / aElems.length);
       return average;
     }
     function numParents(elem) {
@@ -1607,7 +1657,7 @@
       var vw = document.documentElement.clientWidth;
       // Return true if the top-left corner is in the viewport and it has width & height.
       var lt = findPos(e);
-      return (lt[0] >= 0 && lt[1] >= 0 && lt[0] < vw && lt[1] < vh && e.offsetWidth > 0 && e.offsetHeight > 0);
+      return lt[0] >= 0 && lt[1] >= 0 && lt[0] < vw && lt[1] < vh && e.offsetWidth > 0 && e.offsetHeight > 0;
     }
     // Return an array containing the top & left coordinates of the element.
     // from http://www.quirksmode.org/js/findpos.html
@@ -1689,14 +1739,14 @@
         _markLoadTime();
       }
       var sIx = "";
-      var INP = getINP();
-      // It's possible that the interaction beacon has been sent before the main beacon. We don't want
-      // to send the interaction metrics twice, so we only include them here if the interaction beacon
-      // has not been sent.
+      var INP = getINPDetails();
+      // If we haven't already sent an interaction beacon, check for interaction metrics and include
+      // them in the main beacon.
       if (!gbIxSent) {
         sIx = ixValues();
         if (sIx === "") {
-          // If there are no interaction metrics, we
+          // If there are no interaction metrics, we wait to send INP with the IX beacon to increase
+          // the chance that we capture a valid INP.
           INP = undefined;
         }
       }
@@ -1766,13 +1816,14 @@
       nErrors +
       "nt" +
       navigationType() +
-      (navigator.deviceMemory ? "dm" + Math.round(navigator.deviceMemory) : "") + // device memory (GB)
+      (navigator.deviceMemory ? "dm" + round(navigator.deviceMemory) : "") + // device memory (GB)
       (sIx ? "&IX=" + sIx : "") +
       (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +
       (sCPU ? "&CPU=" + sCPU : "") +
       (sET ? "&ET=" + sET : "") + // element timing
       (typeof CLS !== "undefined" ? "&CLS=" + CLS : "") +
-      (typeof INP !== "undefined" ? "&INP=" + INP : "");
+      // INP and sub-parts
+      (typeof INP !== "undefined" ? getINPString(INP) : "");
       // 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];
@@ -1788,7 +1839,7 @@
       gbIxSent = sIx ? 1 : 0;
       // Send other beacons for JUST User Timing.
       while (remainingUtValues.length) {
-        _a = fitUserTimingEntries(remainingUtValues, globalConfig, baseUrl), beaconUtValues = _a[0], remainingUtValues = _a[1];
+        (_a = fitUserTimingEntries(remainingUtValues, globalConfig, baseUrl)), (beaconUtValues = _a[0]), (remainingUtValues = _a[1]);
         var utBeaconUrl = baseUrl + "&UT=" + beaconUtValues.join(",");
         logger.logEvent(LogEvent.UserTimingBeaconSent, [utBeaconUrl]);
         _sendBeacon(utBeaconUrl);
@@ -1811,13 +1862,13 @@
         return;
       }
       var sIx = ixValues(); // Interaction Metrics
-      var INP = getINP();
+      var INP = getINPDetails();
       if (sIx) {
         var beaconUrl = _getBeaconUrl(getUpdatedCustomData()) +
         "&IX=" +
         sIx +
         (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +
-        (typeof INP !== "undefined" ? "&INP=" + INP : "");
+        (typeof INP !== "undefined" ? getINPString(INP) : "");
         logger.logEvent(LogEvent.InteractionBeaconSent, [beaconUrl]);
         _sendBeacon(beaconUrl);
         gbIxSent = 1;
@@ -1872,22 +1923,27 @@
       if (keyCode === 16 || keyCode === 17 || keyCode === 18 || keyCode === 20 || keyCode === 224) {
         return;
       }
-      _removeIxHandlers();
       if (typeof ghIx["k"] === "undefined") {
         ghIx["k"] = _now();
         if (e && e.target instanceof Element) {
-          var trackId = interactionAttributionForElement(e.target);
+          var trackId = getNodeSelector(e.target);
           if (trackId) {
             ghIx["ki"] = trackId;
           }
         }
+        // Only one interaction type is recorded. Scrolls are considered less important, so delete
+        // any scroll times if they exist.
+        delete ghIx["s"];
         _sendIxAfterDelay();
       }
+      _removeIxHandlers();
     }
     function _clickHandler(e) {
-      _removeIxHandlers();
       if (typeof ghIx["c"] === "undefined") {
         ghIx["c"] = _now();
+        // Only one interaction type is recorded. Scrolls are considered less important, so delete
+        // any scroll times if they exist.
+        delete ghIx["s"];
         var target = void 0;
         try {
           // Seeing "Permission denied" errors, so do a simple try-catch.
@@ -1904,13 +1960,14 @@
             ghIx["cx"] = e.clientX;
             ghIx["cy"] = e.clientY;
           }
-          var trackId = interactionAttributionForElement(target);
+          var trackId = getNodeSelector(target);
           if (trackId) {
             ghIx["ci"] = trackId;
           }
         }
         _sendIxAfterDelay();
       }
+      _removeIxHandlers();
     }
     // Wrapper to support older browsers (<= IE8)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1976,7 +2033,7 @@
         // "00" matches all sample rates
         return Number(new Date()) + "00000";
       }
-      return Number(new Date()) + _padLeft(String(Math.round(100000 * Math.random())), "00000");
+      return Number(new Date()) + _padLeft(String(round(100000 * Math.random())), "00000");
     }
     // Unique ID (also known as Session ID)
     // We use this to track all the page views in a single user session.
@@ -2063,6 +2120,8 @@
         "=" +
         escape(value) +
         (seconds ? "; max-age=" + seconds : "") +
+        (globalConfig.cookieDomain ? "; domain=" +
+        globalConfig.cookieDomain : "") +
         "; path=/; SameSite=Lax";
       }
       catch (e) {

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -104,6 +104,10 @@
   @include tall-crest;
 }
 
+.gem-c-organisation-logo__crest--no10 {
+  @include crest("no10_crest", $xpos: 8px);
+}
+
 .gem-c-organisation-logo__crest--single-identity,
 .gem-c-organisation-logo__crest--eo,
 .gem-c-organisation-logo__crest--org {

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -17,6 +17,7 @@
   omit_footer_navigation ||= false
   omit_footer_border ||= false
   omit_header ||= false
+  custom_layout ||= false
   product_name ||= nil
   show_explore_header ||= false
   show_cross_service_header ||= false
@@ -120,6 +121,8 @@
           service_navigation_items: service_navigation_items,
           product_name: product_name,
         } %>
+      <% elsif content_for?(:custom_header) %>
+        <%= yield :custom_header %>
       <% else %>
         <%= render "govuk_publishing_components/components/layout_header", {
           search: show_search,
@@ -159,6 +162,8 @@
         <%= yield :before_content %>
         <%= yield %>
       <% end %>
+    <% elsif custom_layout %>
+      <%= yield %>
     <% else %>
       <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
         <%= yield :before_content %>

data/app/views/govuk_publishing_components/components/_share_links.html.erb

@@ -87,8 +87,8 @@
                   <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                 </svg>
               <% elsif link[:icon] == 'twitter' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
-                  <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
+                  <path fill="currentColor" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
                 </svg>
               <% elsif link[:icon] == 'email' %>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml

@@ -123,3 +123,19 @@ examples:
           cookie_preferences:
             text: How GOV.UK accounts use cookies
             href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
+  with_custom_layout:
+    description: Yields a custom layout for the content.
+    data:
+      custom_layout: true
+      block: |
+        <main id="custom-layout">
+          <h1>This is a custom layout</h1>
+        </main>
+  with_custom_header:
+    description: Allows the header to be replaced with HTML injected by the calling application in a `content_for` tag named `:custom_header`.
+    embed: |
+      <% content_for(:custom_header) do %>
+        <header id="custom-header">I'm a custom header</header>
+      <% end %>
+      <%= render "govuk_publishing_components/components/layout_for_public", {
+      } %>

data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml

@@ -51,8 +51,8 @@ examples:
   executive_office:
     data:
       organisation:
-        name: Prime Minister's Office, 10 Downing Street
-        url: '/government/organisations/prime-ministers-office-10-downing-street'
+        name: Example
+        url: '/government/organisations/'
         brand: 'executive-office'
         crest: 'eo'
   home_office:
@@ -69,6 +69,13 @@ examples:
         url: '/government/organisations/ministry-of-defence'
         brand: 'ministry-of-defence'
         crest: 'mod'
+  prime_ministers_office_10_downing_street:
+    data:
+      organisation:
+        name: "Prime Minister's Office,<br>10 Downing Street"
+        url: '/government/organisations/prime-ministers-office-10-downing-street'
+        brand: 'prime-ministers-office-10-downing-street'
+        crest: 'no10'
   office_of_the_advocate_general_for_scotland:
     data:
       organisation: