govuk_publishing_components 27.14.1 → 27.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1de3732f2f8d07ca871687595bcc8ee4ce0ed90ce07fba59000f91399e543646
-  data.tar.gz: 5bc957d6e609ab9c946872b7260118aa3e8fb718b0d0fd1a01813c3542715e09
+  metadata.gz: 0d9ee129bde5e753f8180b3b8dfe7f2e4fe257558ac1a6fe40bb289242d849f2
+  data.tar.gz: 4c01bb1d55673a25eef1a408e5360da17b2d4e1a8dfc00291463ecc86dfcd81a
 SHA512:
-  metadata.gz: 8cffec1a9a81f634492fb7c47f95c9ffb6b2664c951b15bbfa1a6f790fa1fe2e3d9bdaed3910e6b5cbcebe6152e15ba60585bc9438951c205a72a662b0bb1fe1
-  data.tar.gz: bd6342f5215c706369f52a8461b756a203274253c15832dda29b3aa9b8d883ee48e5b52441e1fba95e9f798e4cb17a00830a8b61c85301b33e1287d039ec6ac1
+  metadata.gz: 5eac4c820f6c86caded7a9e994f1e9e15edbb6ab7fce003ae38f9919dcc6a23f3db7f9dfcd27e0204152e17daa35ccb741ce457b6c9c3c85a8ae51350362fe3c
+  data.tar.gz: b9e8068c2b0746134a37e21fefdd8cc6114055e133fa7240e801be587f34f8ff8a7dd218a71f34cda1fe8dce5c54da3109544d0775e103c2a90e9bec153cd018

data/app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js

@@ -31,9 +31,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       return
     }
 
+    this.trackType = this.$module.getAttribute('data-track-type')
+    var trackHeadings = this.$module.getAttribute('data-track-headings')
+    if (trackHeadings) {
+      try {
+        this.config.trackHeadings = JSON.parse(trackHeadings)
+      } catch (e) {
+        // if there's a problem with the config, don't start the tracker
+        console.error('Scroll tracker configuration error: ' + e.message, window.location)
+        window.GOVUK.analyticsVars.scrollTrackerStarted = false
+        return
+      }
+    }
+
     window.GOVUK.analyticsVars.scrollTrackerStarted = true
 
-    this.trackType = this.$module.getAttribute('data-track-type')
     if (this.trackType === 'headings') {
       this.track = new AutoScrollTracker.Heading(this.config)
     } else {
@@ -145,15 +157,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   // check heading is inside allowed elements, generally ignores everything outside of page content
   AutoScrollTracker.Heading.prototype.findAllowedHeadings = function () {
-    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
     var headingsFound = []
+    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    var trackHeadings = this.config.trackHeadings
 
+    // this is a loop that only happens once as we currently only have one
+    // allowed element for headings to be in - 'main'
     for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
       var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
       for (var e = 0; e < insideElements.length; e++) {
         var found = insideElements[e].querySelectorAll(headings)
         for (var f = 0; f < found.length; f++) {
-          headingsFound.push(found[f])
+          if (trackHeadings) {
+            if (trackHeadings.includes(found[f].textContent.trim())) {
+              headingsFound.push(found[f])
+            }
+          } else {
+            headingsFound.push(found[f])
+          }
         }
       }
     }

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -7,11 +7,11 @@
 
   CustomDimensions.getAndExtendDefaultTrackingOptions = function (extraOptions) {
     var trackingOptions = this.customDimensions()
-    return $.extend(trackingOptions, extraOptions)
+    return this.extend(trackingOptions, extraOptions)
   }
 
   CustomDimensions.customDimensions = function () {
-    var dimensions = $.extend(
+    var dimensions = this.extend(
       {},
       customDimensionsFromBrowser(),
       customDimensionsFromMetaTags(),
@@ -19,9 +19,28 @@
       abTestCustomDimensions()
     )
 
-    return $.each(dimensions, function (key, value) {
-      dimensions[key] = new GOVUK.Analytics.PIISafe(String(value))
-    })
+    for (var key in dimensions) {
+      dimensions[key] = new GOVUK.Analytics.PIISafe(String(dimensions[key]))
+    }
+    return dimensions
+  }
+
+  CustomDimensions.extend = function (out) {
+    out = out || {}
+
+    for (var i = 1; i < arguments.length; i++) {
+      if (!arguments[i]) {
+        continue
+      }
+
+      for (var key in arguments[i]) {
+        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
+          out[key] = arguments[i][key]
+        }
+      }
+    }
+
+    return out
   }
 
   function customDimensionsFromBrowser () {
@@ -70,52 +89,59 @@
       'spelling-suggestion': { dimension: 81 }
     }
 
-    var $metas = $('meta[name^="govuk:"]')
+    var metas = document.querySelectorAll("meta[name^='govuk']")
     var customDimensions = {}
     var tags = {}
 
-    $metas.each(function () {
-      var $meta = $(this)
-      var key = $meta.attr('name').split('govuk:')[1]
-
-      var dimension = dimensionMappings[key]
+    for (var i = 0; i < metas.length; i++) {
+      var meta = metas[i]
+      var metaKey = meta.getAttribute('name').split('govuk:')[1]
+      var dimension = dimensionMappings[metaKey]
       if (dimension) {
-        tags[key] = $meta.attr('content')
+        tags[metaKey] = meta.getAttribute('content')
       }
-    })
+    }
 
-    $.each(dimensionMappings, function (key, dimension) {
-      var value = tags[key] || dimension.defaultValue
+    for (var key in dimensionMappings) {
+      var value = tags[key] || dimensionMappings[key].defaultValue
       if (typeof value !== 'undefined') {
-        customDimensions['dimension' + dimension.dimension] = value
+        customDimensions['dimension' + dimensionMappings[key].dimension] = value
       }
-    })
+    }
 
     return customDimensions
   }
 
   function customDimensionsFromDom () {
+    var mainLang = document.getElementById('content')
+    if (mainLang) {
+      mainLang = mainLang.getAttribute('lang')
+    }
+    var globalBar = document.querySelector('[data-module="global-bar"]') || false
+    if (globalBar) {
+      globalBar = globalBar.style.display !== 'none'
+    }
     return {
       dimension26: GOVUK.PageContent.getNumberOfSections(),
       dimension27: GOVUK.PageContent.getNumberOfLinks(),
-      dimension23: $('main[id="content"]').attr('lang') || 'unknown',
-      dimension38: $('[data-module="global-bar"]').is(':visible') && 'Global Banner viewed'
+      dimension23: mainLang || 'unknown',
+      dimension38: globalBar && 'Global Banner viewed'
     }
   }
 
   function abTestCustomDimensions () {
-    var $abMetas = $('meta[name^="govuk:ab-test"]')
+    var abMetas = document.querySelectorAll("meta[name^='govuk:ab-test']")
     var customDimensions = {}
 
-    $abMetas.each(function () {
-      var $meta = $(this)
-      var dimension = parseInt($meta.data('analytics-dimension'))
-      var testNameAndBucket = $meta.attr('content')
+    for (var i = 0; i < abMetas.length; i++) {
+      var meta = abMetas[i]
+      var dimension = parseInt(meta.getAttribute('data-analytics-dimension'))
+      var testNameAndBucket = meta.getAttribute('content')
 
       if (dimension) {
         customDimensions['dimension' + dimension] = testNameAndBucket
       }
-    })
+    }
 
     return customDimensions
   }

data/app/assets/javascripts/govuk_publishing_components/analytics/ecommerce.js

@@ -1,5 +1,5 @@
 // https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce
-/* global GOVUK, $, ga */
+/* global GOVUK, ga */
 
 (function () {
   'use strict'
@@ -12,25 +12,25 @@
     this.init = function (element) {
       // Limiting to 100 characters to avoid noise from extra longs search queries
       // and to stop the size of the payload going over 8k limit.
-      var searchQuery = GOVUK.analytics.stripPII(element.attr('data-search-query')).substring(0, 100).toLowerCase()
-      var ecommerceRows = element.find('[data-ecommerce-row]')
-      var startPosition = parseInt(element.data('ecommerce-start-index'), 10)
-      var listTitle = element.data('list-title') || DEFAULT_LIST_TITLE
-      var variant = element.data('ecommerce-variant')
-      var trackClickLabel = element.data('track-click-label') || DEFAULT_TRACK_CLICK_LABEL
-
-      ecommerceRows.each(function (index, ecommerceRow) {
-        var $ecommerceRow = $(ecommerceRow)
-        var listSubheading = $ecommerceRow.data('ecommerce-subheading') || undefined
-        var contentId = $ecommerceRow.attr('data-ecommerce-content-id')
-        var path = $ecommerceRow.attr('data-ecommerce-path')
-
-        var indexOverride = $ecommerceRow.attr('data-ecommerce-index')
-        index = indexOverride ? parseInt(indexOverride, 10) - 1 : index
+      var searchQuery = GOVUK.analytics.stripPII(element.getAttribute('data-search-query')).substring(0, 100).toLowerCase()
+      var ecommerceRows = element.querySelectorAll('[data-ecommerce-row]')
+      var startPosition = parseInt(element.getAttribute('data-ecommerce-start-index'), 10)
+      var listTitle = element.getAttribute('data-list-title') || DEFAULT_LIST_TITLE
+      var variant = element.getAttribute('data-ecommerce-variant') || undefined
+      var trackClickLabel = element.getAttribute('data-track-click-label') || DEFAULT_TRACK_CLICK_LABEL
+
+      for (var i = 0; i < ecommerceRows.length; i++) {
+        var ecommerceRow = ecommerceRows[i]
+        var listSubheading = ecommerceRow.getAttribute('data-ecommerce-subheading') || undefined
+        var contentId = ecommerceRow.getAttribute('data-ecommerce-content-id') || undefined
+        var path = ecommerceRow.getAttribute('data-ecommerce-path')
+
+        var indexOverride = ecommerceRow.getAttribute('data-ecommerce-index')
+        var index = indexOverride ? parseInt(indexOverride, 10) - 1 : i
 
         addImpression(contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant)
-        trackProductOnClick($ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
-      })
+        trackProductOnClick(ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
+      }
     }
 
     function constructData (contentId, path, position, listTitle, listSubheading, searchQuery, variant) {
@@ -67,7 +67,7 @@
     }
 
     function trackProductOnClick (row, contentId, path, position, searchQuery, listTitle, listSubheading, variant, trackClickLabel) {
-      row.click(function () {
+      row.addEventListener('click', function () {
         if (contentId || path) {
           var clickData = constructData(contentId, path, position, listTitle, listSubheading, searchQuery, variant)
           ga('ec:addProduct', clickData)
@@ -82,18 +82,18 @@
   }
 
   Ecommerce.ecLoaded = false
-  Ecommerce.start = function (element) {
+  Ecommerce.start = function (elements) {
     if (!window.ga) { return }
-    element = element || $('[data-analytics-ecommerce]')
-    if (element.length > 0) {
+    elements = elements || document.querySelectorAll('[data-analytics-ecommerce]')
+    if (elements.length > 0) {
       if (!Ecommerce.ecLoaded) {
         ga('require', 'ec')
         Ecommerce.ecLoaded = true
       }
-      element.each(function (index) {
+      for (var i = 0; i < elements.length; i++) {
         var ecommerce = new Ecommerce()
-        ecommerce.init($(this))
-      })
+        ecommerce.init(elements[i])
+      }
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics/explicit-cross-domain-links.js

@@ -6,27 +6,57 @@
 
   GOVUK.Modules.ExplicitCrossDomainLinks = function () {
     this.start = function ($module) {
-      var element = $module[0]
+      this.element = $module[0]
+      this.attribute = 'href'
+      this.attributeValue = this.element.getAttribute(this.attribute)
+      this.eventType = 'click'
+      if (!this.attributeValue) {
+        this.attribute = 'action'
+        this.attributeValue = this.element.getAttribute(this.attribute)
+        this.eventType = 'submit'
+      }
 
-      var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
+      this.handleEvent = this.handleEvent.bind(this)
+      this.handleCookiesAccepted = this.handleCookiesAccepted.bind(this)
+      // Listens for the 'submit' event if the element is a form, and the 'click' event if it is a link
+      this.element.addEventListener(this.eventType, this.handleEvent)
+    }
 
-      // If not engaged, append only ?cookie-consent=not-engaged
-      // If engaged and rejected, append only ?cookie-consent=reject
-      // If engaged and accepted usage, append ?_ga=clientid if available and cookie-consent=accept
+    this.handleEvent = function (e) {
+      //  prevent default: we want the link href and/or form action to be decorated before we navigate away
+      e.preventDefault()
+      var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
+      var cookieConsent = GOVUK.getConsentCookie()
 
       if (cookieBannerEngaged !== 'true') {
-        this.decorate(element, 'cookie_consent=not-engaged')
-        return
+        // If not engaged, append only ?cookie_consent=not-engaged
+        this.decorate(this.element, 'cookie_consent=not-engaged', this.attribute)
+      } else if (cookieConsent && cookieConsent.usage === true) {
+        this.handleCookiesAccepted()
+      } else {
+        this.decorate(this.element, 'cookie_consent=reject', this.attribute)
       }
-      var cookieConsent = GOVUK.getConsentCookie()
-      if (cookieConsent && cookieConsent.usage === false) {
-        this.decorate(element, 'cookie_consent=reject')
-        return
+
+      // remove the event listener to avoid an infinite loop
+      this.element.removeEventListener(this.eventType, this.handleEvent)
+
+      // if the element is a form, submit it. If it is a link, click it
+      if (this.eventType === 'submit') {
+        this.element.submit()
+      } else {
+        this.element.click()
       }
+    }
 
-      this.decorate(element, 'cookie_consent=accept')
+    this.handleCookiesAccepted = function () {
+      // If the cookie banner was engaged and usage cookie accepted, append ?_ga=clientid if available and cookie_consent=accept
+      var element = this.element
+      var attribute = this.attribute
+      this.decorate(element, 'cookie_consent=accept', attribute)
 
-      if (!global.ga) { return }
+      if (!global.ga) {
+        return
+      }
 
       global.ga(function () {
         var trackers = global.ga.getAll()
@@ -34,37 +64,24 @@
         if (!trackers.length) { return }
 
         var linker = new global.gaplugins.Linker(trackers[0])
+        var attrValue = element.getAttribute(attribute)
 
-        var attrAction = element.getAttribute('action')
-        if (attrAction) {
-          element.setAttribute('action', linker.decorate(attrAction))
-        }
-
-        var attrHref = element.getAttribute('href')
-        if (attrHref) {
-          element.href = linker.decorate(attrHref)
-        }
+        element.setAttribute(attribute, linker.decorate(attrValue))
       })
     }
 
-    this.decorate = function (element, param) {
-      var attribute = 'href'
+    this.decorate = function (element, param, attribute) {
       var attributeValue = element.getAttribute(attribute)
 
-      if (!attributeValue) {
-        attribute = 'action'
-        attributeValue = element.getAttribute(attribute)
-      }
-
       if (!attributeValue) { return }
 
       if (attributeValue.includes('?')) {
         attributeValue += '&' + param
-        element.setAttribute(attribute, attributeValue)
       } else {
         attributeValue += '?' + param
-        element.setAttribute(attribute, attributeValue)
       }
+
+      element.setAttribute(attribute, attributeValue)
     }
   }
 

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

@@ -26,9 +26,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           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 responseHasButton = html.querySelector('form.gem-c-single-page-notification-button .gem-c-single-page-notification-button__submit')
-          if (responseHasButton) {
-            this.$module.outerHTML = newButton
+          var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
+          if (responseButtonContainer) {
+            this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
           }
         }
       }

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

@@ -1,13 +1,21 @@
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
+  @include govuk-typography-common;
+  @include govuk-text-colour;
 }
 
 .gem-c-big-number__value {
-  @include govuk-font($size: 80, $weight: bold);
+  font-size: 80px;
+  @include govuk-typography-weight-bold;
+  line-height: 1;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(80px);
+  }
 }
 
 .gem-c-big-number__label {
-  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+  @include govuk-font($size: 19, $weight: bold);
 
   // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
   // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element

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

@@ -102,6 +102,7 @@ $icon-size: 20px;
 $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
 $search-width-or-height: $black-bar-height;
+$pseudo-underline-height: 3px;
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
@@ -111,7 +112,7 @@ $search-width-or-height: $black-bar-height;
     @include prefixed-transform($rotate: 45deg, $translateY: -35%);
     border-bottom: 2px solid $colour;
     border-right: 2px solid $colour;
-    content: " ";
+    content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 2px;
@@ -123,21 +124,21 @@ $search-width-or-height: $black-bar-height;
 @mixin make-selectable-area-bigger {
   background: none;
   bottom: 0;
-  content: " ";
+  content: "";
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
 
-@mixin pseudo-underline {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
   background: none;
   bottom: 0;
-  content: " ";
-  height: 3px;
-  left: govuk-spacing(3);
+  content: "";
+  height: $pseudo-underline-height;
+  left: $left;
   position: absolute;
-  right: govuk-spacing(3);
+  right: $right;
   top: auto;
 }
 
@@ -384,7 +385,7 @@ $search-width-or-height: $black-bar-height;
       // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline;
+        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
       }
     }
   }
@@ -430,7 +431,7 @@ $search-width-or-height: $black-bar-height;
 
   @include govuk-media-query($from: "desktop") {
     &:after {
-      @include pseudo-underline;
+      @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
     }
 
     @include focus-not-focus-visible {
@@ -441,7 +442,7 @@ $search-width-or-height: $black-bar-height;
         font-size: govuk-px-to-rem(16px);
       }
       height: $black-bar-height;
-      padding: govuk-spacing(3);
+      padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(3) govuk-spacing(5);
       position: relative;
       text-decoration: none;
 
@@ -762,7 +763,7 @@ $search-width-or-height: $black-bar-height;
 
     &:hover {
       background: govuk-colour("black");
-      border-bottom: govuk-spacing(1) solid govuk-colour("mid-grey");
+      border-bottom: $pseudo-underline-height solid govuk-colour("mid-grey");
       color: govuk-colour("mid-grey");
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -14,7 +14,7 @@
     margin: govuk-spacing(6) 0;
     overflow-x: auto;
     width: 100%;
-    @include govuk-font($size: 14);
+    @include govuk-font($size: 19);
 
     caption {
       text-align: left;
@@ -24,12 +24,16 @@
     th,
     td {
       vertical-align: top;
-      padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
-      border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
+      padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+      border-bottom: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+
+      &:last-child {
+        padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
+      }
     }
 
     th {
-      @include govuk-font($size: 14, $weight: bold);
+      @include govuk-font($size: 19, $weight: bold);
       text-align: left;
       color: $govuk-text-colour;
     }

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

@@ -27,5 +27,5 @@
 <% end %>
 
 <% if button.info_text %>
-  <%= tag.span button.info_text, class: button.info_text_classes %>
+  <%= tag.span button.info_text, button.info_text_options %>
 <% end %>

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

@@ -14,7 +14,7 @@
   text = raw(text)
 
   cookie_preferences_href ||= "/help/cookies"
-  confirmation_message ||= raw(t("components.cookie_banner.confirmation_message",
+  confirmation_message ||= raw(t("components.cookie_banner.confirmation_message_html",
                                 link: link_to(
                                   t("components.cookie_banner.confirmation_message_link"),
                                   cookie_preferences_href,

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

@@ -3,6 +3,7 @@
   suggestion_link_text ||= false
   suggestion_link_url ||= false
   suggestion_text ||= nil
+  new_tab ||= false
 
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
@@ -13,17 +14,33 @@
   aria_attributes[:label] = 'Intervention'
 
   local_assigns[:query_string] ||= request.query_string
+  local_assigns[:suggestion_link_text] = suggestion_link_text
+  local_assigns[:suggestion_link_url] = suggestion_link_url
 
   intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(local_assigns)
   dismiss_href = intervention_helper.dismiss_link
+
+  suggestion_tag_options = {
+    class: "govuk-link gem-c-intervention__suggestion-link",
+    href: suggestion_link_url,
+    data: suggestion_data_attributes,
+  }
+
+  if new_tab && (suggestion_link_text && suggestion_link_url)
+    target = "_blank"
+    rel = intervention_helper.security_attr
+
+    suggestion_tag_options.merge!({ target: target, rel: rel })
+
+    suggestion_link_text = intervention_helper.accessible_text
+  end
 %>
-<% if suggestion_text or (suggestion_link_text and suggestion_link_text) %>
+<% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
   <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
-      <% if suggestion_link_text and suggestion_link_url %>
-        <%= tag.a suggestion_link_text, class: "govuk-link gem-c-intervention__suggestion-link", href: suggestion_link_url, data: suggestion_data_attributes %>
-
+      <% if suggestion_link_text && suggestion_link_url %>
+        <%= tag.a suggestion_link_text, suggestion_tag_options %>
       <% end %>
     </p>
 

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

@@ -1,9 +1,12 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
 
   aria_controls ||= nil
   button_text ||= t("components.search_box.search_button")
   id ||= "search-main-" + SecureRandom.hex(4)
+  wrap_label_in_a_heading ||= false
+  label_margin_bottom ||= nil
   label_size ||= nil
   label_text ||= t("components.search_box.label")
   name ||= "q"
@@ -14,13 +17,6 @@
   data_attributes ||= {}
   data_attributes[:module] = 'gem-track-click'
 
-  label_classes = []
-  if (shared_helper.valid_heading_size?(label_size))
-    label_classes << "govuk-label govuk-label--#{label_size}"
-  else
-    label_classes << "gem-c-search__label"
-  end
-
   classes = %w[gem-c-search govuk-!-display-none-print]
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
@@ -32,11 +28,31 @@
     classes << "gem-c-search--on-white"
   end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size)
+
+  label_classes = []
+  if (shared_helper.valid_heading_size?(label_size))
+    label_classes << "govuk-label govuk-label--#{label_size}"
+  else
+    label_classes << "gem-c-search__label"
+  end
+  label_classes << "govuk-!-margin-bottom-#{label_margin_bottom}" if [*1..9].include?(label_margin_bottom) and local_assigns.include?(:inline_label)
+
+  tag_label = capture do
+    tag.label({ for: id, class: label_classes }) do
+      label_text
+    end
+  end
 %>
 
 <div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
-  <%= tag.label({ for: id, class: label_classes }) do %>
-    <%= label_text %>
+  <% if wrap_label_in_a_heading %>
+    <%= content_tag(shared_helper.get_heading_level, {
+      class: "govuk-!-margin-0",
+    }) do %>
+      <%= tag_label %>
+    <% end %>
+  <% else %>
+    <%= tag_label %>
   <% end %>
   <div class="gem-c-search__item-wrapper">
     <%= tag.input(