govuk_publishing_components 27.14.0 → 27.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 59c59e65f1434263c7e36d4d89029083fe241185daba81730010af5b865ccabc
-  data.tar.gz: c4b9a4d0a73f9e0dd3068aeade2e04565e2d69b4739c9dc00c3a820c631089b3
+  metadata.gz: 586ea5662dfd4f3951905b244afc78556dc687bf861a05e11e56ff7d2ee172eb
+  data.tar.gz: eab6ea6544883bc5fa511f29e589d996eabae18a6661f0772ac45356668f5396
 SHA512:
-  metadata.gz: 46b643cba9fcd36653300e4a11679f882eb1f1b5482e4811c38f580e6ad4526c60a3d2f61ecf9a4df13f5abef2c9d4b954ae4cec959159efced1c011b9dd458f
-  data.tar.gz: cd46ecdd5268be36578fecef171b2b86e7b000c750fbcc9e9000a51485e58559d14d9c9a32e9e623fff757f58559a90bab99f68aa87159bedc9737e3b29d082b
+  metadata.gz: f513e048959e7e81b753583f923772b590f5c4da1841e666f4131bc79e8dea9b8cd4571cba7bab859e0d1b4683a1b10ebaa17d56cd6d3ab3a4eff68090837a1c
+  data.tar.gz: 5f2d6aa1171a47b3074ba65b0dc5488b9269dc4f7781580df52d7d1c354559d19270bace849b39342c51e3e4ad9342a966354da39dabb6f52838de4c505f0f03

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

@@ -10,12 +10,18 @@
 
       var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
 
-      // 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
+      // 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
 
       if (cookieBannerEngaged !== 'true') {
         this.decorate(element, 'cookie_consent=not-engaged')
+        this.start = this.start.bind(this, $module)
+
+        // if the user has not engaged with the cookie banner yet, listen for the cookie consent accept/reject events
+        // re-start the module if cookies are accepted or rejected on the current page – setting cookie preferences does not reload the page
+        window.addEventListener('cookie-consent', this.start)
+        window.addEventListener('cookie-reject', this.start)
         return
       }
       var cookieConsent = GOVUK.getConsentCookie()
@@ -50,6 +56,8 @@
     this.decorate = function (element, param) {
       var attribute = 'href'
       var attributeValue = element.getAttribute(attribute)
+      var cookieConsentParameterPattern = /cookie_consent=[^&]*/
+      var paramIsCookieConsent = param.match(cookieConsentParameterPattern)
 
       if (!attributeValue) {
         attribute = 'action'
@@ -58,13 +66,21 @@
 
       if (!attributeValue) { return }
 
-      if (attributeValue.includes('?')) {
-        attributeValue += '&' + param
-        element.setAttribute(attribute, attributeValue)
+      var attributeHasCookieConsent = attributeValue.match(cookieConsentParameterPattern)
+
+      if (attributeHasCookieConsent && paramIsCookieConsent) {
+        // if the decorate function has received a cookie_consent parameter, but the target element already has a cookie_consent parameter, replace the existing parameter with the new value
+        attributeValue = attributeValue.replace(cookieConsentParameterPattern, param)
       } else {
-        attributeValue += '?' + param
-        element.setAttribute(attribute, attributeValue)
+        // otherwise, simply append the parameter to the target element href query string
+        if (attributeValue.includes('?')) {
+          attributeValue += '&' + param
+        } else {
+          attributeValue += '?' + param
+        }
       }
+
+      element.setAttribute(attribute, attributeValue)
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -97,6 +97,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.cookieBannerConfirmationMessage.focus()
     window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     window.GOVUK.setDefaultConsentCookie()
+    window.GOVUK.triggerEvent(window, 'cookie-reject')
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {

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,26 @@
 .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);
+  font-size: 16px;
+  @include govuk-typography-weight-bold;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
 
   // 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,7 +124,7 @@ $search-width-or-height: $black-bar-height;
 @mixin make-selectable-area-bigger {
   background: none;
   bottom: 0;
-  content: " ";
+  content: "";
   left: 0;
   position: absolute;
   right: 0;
@@ -133,11 +134,11 @@ $search-width-or-height: $black-bar-height;
 @mixin pseudo-underline {
   background: none;
   bottom: 0;
-  content: " ";
-  height: 3px;
-  left: govuk-spacing(3);
+  content: "";
+  height: $pseudo-underline-height;
+  left: govuk-spacing(5);
   position: absolute;
-  right: govuk-spacing(3);
+  right: govuk-spacing(6);
   top: auto;
 }
 
@@ -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");
     }
 
@@ -845,6 +846,7 @@ $search-width-or-height: $black-bar-height;
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
+  list-style: none;
   margin: 0;
   padding: govuk-spacing(6) govuk-spacing(4);
 

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

@@ -1,5 +1,4 @@
 <%
-  href ||= nil
   number ||= nil
   label ||= nil
   href ||= nil

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/_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/_layout_super_navigation_header.html.erb

@@ -144,7 +144,7 @@
                     </div>
                     <div class="govuk-grid-column-two-thirds-from-desktop">
                       <% if link[:menu_contents].present? %>
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
+                          <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?

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(

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

@@ -2,16 +2,18 @@
   component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
+  wrapper_classes = %w(govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
 %>
 <% button_text = capture do %>
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
-  <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
-  <%= content_tag(:button, button_text, {
-    class: "govuk-body-s gem-c-single-page-notification-button__submit",
-    type: "submit",
-  }) %>
+<%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
+  <%= tag.form class: "gem-c-single-page-notification-button", action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+    <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
+    <%= content_tag(:button, button_text, {
+      class: "govuk-body-s gem-c-single-page-notification-button__submit",
+      type: "submit",
+    }) %>
+  <% end %>
 <% end if component_helper.base_path %>

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

@@ -1,9 +1,12 @@
 <%
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = %w(gem-c-success-alert govuk-notification-banner govuk-notification-banner--success)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 
-<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+<%= tag.div class: classes,
   role: "alert",
   tabindex: "-1",
   aria: {

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

@@ -38,6 +38,17 @@ examples:
       suggestion_link_text: "You can now apply for a permit online."
       suggestion_link_url: "/permit"
 
+  open_suggestion_link_in_new_tab:
+    description: |
+      When sending users to another online task, you don't want to completely hijack
+      their original flow on GOV.UK. Adding the option to open links in a new tab helps to address this.
+      Link text should tell the user that the link opens in a new tab.
+      Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
+    data:
+      suggestion_link_text: "You can now apply for a permit online"
+      suggestion_link_url: "www.google.com/permit"
+      new_tab: true
+
   with_data_attributes:
     description: |
       This example shows the use of `suggestion_data_attributes` and

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

@@ -69,7 +69,7 @@ examples:
         <h2 class="govuk-heading-l">This is a title</h2>
         <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
   with_current_account_navigation:
-    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
+    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account` and `manage`."
     data:
       show_account_layout: true
       account_nav_location: "manage"

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

@@ -37,6 +37,7 @@ govuk_frontend_components:
 examples:
   default:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       items:
       - value: "government-gateway"
@@ -45,6 +46,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_small_radios:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       small: true
       items:
@@ -52,9 +54,10 @@ examples:
         text: "Use Government Gateway"
       - value: "govuk-verify"
         text: "Use GOV.UK Verify"
-  with_bold:
-    description: Used to provide better contrast between long labels and hint text, Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)
+  with_bold_labels:
+    description: Used to provide better contrast between long labels and hint text.
     data:
+      heading: How do you want to sign in?
       name: "radio-group-bold"
       items:
       - value: "government-gateway"
@@ -65,9 +68,10 @@ examples:
         text: "Use GOV.UK Verify"
         hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office."
         bold: true
-  with_bottom_margin:
+  with_custom_bottom_margin:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of `30px` (`6`).
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       margin_bottom: 9
       items:
@@ -77,6 +81,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_hint_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "hint"
       hint: "You’ll need to prove your identity using one of the following methods"
@@ -97,10 +102,10 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
-  with_heading:
+  with_custom_heading_size:
     description: |
-      By default, text supplied for the `legend` is wrapped inside a `h2`. 
-      
+      By default, text supplied for the `legend` is wrapped inside a `h2`.
+
       The font size of this heading can be changed using the `heading_size` option. Valid options are `s`, `m`, `l`, `xl`, defaulting to `m` if no option is passed.
     data:
       name: "radio-group-description"
@@ -113,10 +118,10 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
-  with_different_heading_level:
+  with_custom_heading_level:
     description: |
       By default, text supplied for the `legend` is wrapped inside a `h2`. This can be changed using the `heading_level` option.
-        
+
       If `heading_level` is `1` and `heading_size` is not set, the text size will be `xl`.
     data:
       name: "radio-group-description"
@@ -129,22 +134,10 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
-  with_heading_and_hint:
-    data:
-      name: "radio-group-heading"
-      heading: "What is your favourite colour?"
-      hint: "If your favourite is not below, pick the colour closest to it."
-      items:
-      - value: "red"
-        text: "Red"
-      - value: "green"
-        text: "Green"
-      - value: "blue"
-        text: "Blue"
-  with_page_header_and_caption:
+  with_page_heading_and_caption:
     description: |
       A caption can be added using the `heading_caption` option. Captions will only be displayed if text for the heading option is present.
-      
+
       The pattern is used across GOV.UK to show a high-level section that this page belongs to.
     data:
       name: "radio-group-heading"
@@ -167,7 +160,7 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
-  with_description_only:
+  with_description:
     data:
       name: "radio-group-description"
       heading: "What is your favourite colour?"
@@ -217,6 +210,7 @@ examples:
         text: "Blue"
   with_hint_text_on_radios:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-hint-text"
       items:
       - value: "government-gateway"
@@ -227,6 +221,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_checked_option:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-checked"
       items:
       - value: "government-gateway"
@@ -236,15 +231,17 @@ examples:
         checked: true
   with_data_attributes:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-data-attributes"
       items:
-      - value: "cool-button"
-        text: "Best button in town"
-        data_attributes: { "contextual-guidance": "cool-buttons-guidance" }
-      - value: "no-data-attributes-button"
-        text: "Worst button in town"
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
+        data_attributes: { "contextual-guidance": "government-gateway" }
   with_custom_id_prefix:
     data:
+      heading: How do you want to sign in?
       id_prefix: 'custom'
       name: "radio-custom-id-prefix"
       items:
@@ -255,6 +252,7 @@ examples:
   with_or_divider:
     description: "See [related service manual guidance for this pattern](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)"
     data:
+      heading: How do you want to sign in?
       name: "radio-group-or-divider"
       items:
       - value: "government-gateway"
@@ -267,6 +265,7 @@ examples:
   extreme:
     description: 'Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
     data:
+      heading: How do you want to sign in?
       id_prefix: 'extreme'
       name: "radio-custom-extreme"
       items:
@@ -289,6 +288,7 @@ examples:
         bold: true
   with_error_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_message: "Please select one option"
@@ -300,6 +300,7 @@ examples:
   with_error_and_hint_on_form_group:
     description: ""
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_message: "Please select one option"
@@ -311,6 +312,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_error_items_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_items:
@@ -325,6 +327,7 @@ examples:
         text: "Use GOV.UK Verify"
   conditional:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-conditional"
       id_prefix: "conditional"
       items:
@@ -336,7 +339,8 @@ examples:
         conditional: "You’ll need to prove your identity using GOV.UK Verify"
   conditional_checked:
     data:
-      name: "radio-group-conditional"
+      heading: How do you want to sign in?
+      name: "radio-group-conditional-checked"
       id_prefix: "conditional-checked"
       items:
       - value: "government-gateway"
@@ -348,6 +352,7 @@ examples:
         conditional: "You’ll need to prove your identity using GOV.UK Verify"
   tracking-url:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-tracking-url"
       id_prefix: "tracking-url"
       items:
@@ -360,15 +365,17 @@ examples:
   inline:
     description: "When providing few options, radio buttons should be inline rather than stacked. We recommend this for two small options like yes and no, on and off"
     data:
+      heading: Have you changed your name?
       name: "inline-radios"
       inline: true
       items:
-        - value: "on"
-          text: "On"
-        - value: "off"
-          text: "Off"
+        - value: "yes"
+          text: "Yes"
+        - value: "no"
+          text: "No"
   with_custom_id_attribute:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       id: "radio-group"
       items:

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

@@ -69,3 +69,28 @@ examples:
       Allows the label text size to be set to `xl`, `l`, `m`, or `s`. If this is set, then `inline_label` is automatically set to `false`.
     data:
       label_size: "xl"
+  wrap_label_inside_a_heading:
+    description: |
+      Puts the label inside a heading; heading level defaults to 2 if not set.
+
+      (The size of the label can still be set with `label_size` to appear more like a heading.)
+    data:
+      wrap_label_in_a_heading: true
+      heading_level: 1
+  with_margin_bottom:
+    description: |
+      Allows the spacing at the bottom of the component to be adjusted.
+
+      This accepts a number from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
+    data:
+      margin_bottom: 9
+  with_margin_bottom_for_the_label:
+    description: |
+      Allows the spacing between the label and the input be adjusted.
+
+      Requires `inline_label` to be false.
+
+      This accepts a number from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
+    data:
+      label_margin_bottom: 9
+      inline_label: false

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

@@ -37,3 +37,9 @@ examples:
         orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
         Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
         Nullam sed neque quis turpis.
+  with_custom_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). The default margins for the component are inherited from the [notification-banner](https://github.com/alphagov/govuk-frontend/blob/main/package/govuk/components/notification-banner/_index.scss) styles defined in the Design System.
+    data:
+      message: Message to alert the user to a successful action goes here
+      margin_bottom: 3

data/config/locales/en.yml

@@ -86,8 +86,10 @@ en:
       news_and_communications: News and communications
       statistics: Statistics
       worldwide: Worldwide
+    intervention:
+      accessible_link_text_suffix: " (opens in a new tab)"
     layout_footer:
-      copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+      copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
       support_links: Support links
     layout_for_public:

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -11,6 +11,7 @@ module GovukPublishingComponents
                   :rel,
                   :data_attributes,
                   :margin_bottom,
+                  :id,
                   :inline_layout,
                   :target,
                   :type,
@@ -49,16 +50,39 @@ module GovukPublishingComponents
         @value = local_assigns[:value]
         @classes = local_assigns[:classes]
         @aria_label = local_assigns[:aria_label]
+        @info_text_id = "info-text-id-#{SecureRandom.hex(4)}"
+        @button_id = "button-id-#{SecureRandom.hex(4)}"
       end
 
       def link?
         href.present?
       end
 
+      def info_text?
+        info_text.present?
+      end
+
+      def aria_labelledby
+        if info_text?
+          text = "#{@button_id} "
+          text << @info_text_id
+          text
+        end
+      end
+
+      def info_text_options
+        options = { class: info_text_classes }
+        options[:aria] = { hidden: true } if info_text?
+        options[:id] = @info_text_id if info_text?
+        options
+      end
+
       def html_options
         options = { class: css_classes }
         options[:role] = "button" if link?
         options[:type] = button_type
+        options[:id] = @button_id if info_text?
+        options[:aria] = { labelledby: aria_labelledby }
         options[:rel] = rel if rel
         options[:data] = data_attributes if data_attributes
         options[:title] = title if title

data/lib/govuk_publishing_components/presenters/intervention_helper.rb

@@ -1,10 +1,17 @@
 module GovukPublishingComponents
   module Presenters
     class InterventionHelper
-      attr_reader :query_string
-
       def initialize(local_assigns)
+        @accessible_text_suffix = I18n.t("components.intervention.accessible_link_text_suffix")
         @query_string = local_assigns[:query_string]
+        @suggestion_link_text = local_assigns[:suggestion_link_text]
+        @suggestion_link_url = local_assigns[:suggestion_link_url]
+      end
+
+      def accessible_text
+        @suggestion_link_text << @accessible_text_suffix unless @suggestion_link_text.include?(@accessible_text_suffix)
+
+        @suggestion_link_text
       end
 
       def dismiss_link
@@ -14,6 +21,17 @@ module GovukPublishingComponents
           "?hide-intervention=true"
         end
       end
+
+      def security_attr
+        rel = "noopener noreferrer"
+        rel << " external" unless @suggestion_link_url.start_with?("/", "https://gov.uk", "https://www.gov.uk")
+
+        rel
+      end
+
+    private
+
+      attr_reader :accessible_text_suffix, :query_string, :suggestion_link_text, :suggestion_link_url
     end
   end
 end

data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -14,15 +14,12 @@ module GovukPublishingComponents
       end
 
       def data
-        module_names = %w[gem-track-click]
-        module_names << "single-page-notification-button" if js_enhancement
-
-        @data_attributes[:label] = base_path
+        @data_attributes[:track_label] = base_path
         # data-action for tracking should have the format of e.g. "Unsubscribe-button-top", or "Subscribe-button-bottom"
         # when button_location is not present data-action will fall back to "Unsubscribe-button"/"Subscribe-button"
-        @data_attributes[:action] = [button_type, "button", button_location].compact.join("-")
-        @data_attributes[:module] = module_names.join(" ")
-        @data_attributes[:category] = "Single-page-notification-button"
+        @data_attributes[:track_action] = [button_type, "button", button_location].compact.join("-")
+        @data_attributes[:module] = "single-page-notification-button" if js_enhancement
+        @data_attributes[:track_category] = "Single-page-notification-button"
         # This attribute is passed through to the personalisation API to ensure when a new button is returned from the API, it has the same button_location
         @data_attributes[:button_location] = button_location
         @data_attributes

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.14.0".freeze
+  VERSION = "27.16.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.14.0
+  version: 27.16.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-18 00:00:00.000000000 Z
+date: 2021-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config