govuk_publishing_components 27.12.0 → 27.14.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd11f04405f2a42af38607551e706bf8587d8dab56687f9dd7f9f568a76ee9da
-  data.tar.gz: c365b23d1ce8a71ff06cc0fb2510a9c1f7aadb984a21ccb481256a441aaa0ef6
+  metadata.gz: 07e0c548e46fc4a7dcb04e7f2838f17b7fc6234804695cfbeca50d1aec4f4431
+  data.tar.gz: 33b0e798aed35a5ab8808ad6b6e0ee99a929c6d2b8da837d6acb156cf66d4f2c
 SHA512:
-  metadata.gz: d4a1581abd6a891e2473feffcdf0a15c18d11536438d89387a6bfff055fa1c874f0cc38ec6f9299fba4f4dcd30ed5d4239d6f5133fac4c0e47dfffb62eca8eea
-  data.tar.gz: 92c5a4c880e24c071d1ecec8a72fbe6ca1b852e23406e6cf61466930de1a21e49b086a98d12d60451a62b2fcad664ac2b0ea8b8918d8993ab4fb84b153df6ad1
+  metadata.gz: b48854f3ab1990a2166fbef3f8e57f2487778b7c9df6a0327e05318821b978ba3ef21f0a0865c6cc3cb714d0bff8a3fd6e102cd855fa1b28b78c32d66d92f0a0
+  data.tar.gz: 7bb47453cfc2208ffe22cb79c6493d85720a137b405709a545b3a6a6f37ee59e05b953a59c8cd067d2661038d3dbe323950b6662378ee24ee1ae8c14e98dbcd0

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/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/layout-super-navigation-header.js

@@ -102,7 +102,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // either `desktop` or `mobile` so it can be interpolated to access the
   // `data-toggle-{desktop|mobile}-group` attribute.
   var windowSize = function () {
-    return window.innerWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
+    return document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
   }
 
   function SuperNavigationMegaMenu ($module) {

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

@@ -0,0 +1,48 @@
+/* global XMLHttpRequest */
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SinglePageNotificationButton ($module) {
+    this.$module = $module
+    this.basePath = this.$module.querySelector('input[name="base_path"]').value
+    this.buttonLocation = this.$module.getAttribute('data-button-location')
+
+    this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
+    // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
+    if (this.buttonLocation) this.personalisationEndpoint += '&button_location=' + this.buttonLocation
+  }
+
+  SinglePageNotificationButton.prototype.init = function () {
+    var xhr = new XMLHttpRequest()
+    xhr.open('GET', this.personalisationEndpoint, true)
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var responseText = xhr.responseText
+        // if response text exists and is JSON parse-able, parse the response and get the button html
+        if (responseText && this.responseIsJSON(responseText)) {
+          var newButton = JSON.parse(responseText).button_html
+          var html = document.createElement('div')
+          html.innerHTML = newButton
+          // test that the html returned contains the button component; if yes, swap the button for the updated version
+          var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
+          if (responseButtonContainer) {
+            this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+          }
+        }
+      }
+    }.bind(this)
+    xhr.send()
+  }
+
+  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
+    try {
+      JSON.parse(string)
+    } catch (e) {
+      return false
+    }
+    return true
+  }
+  Modules.SinglePageNotificationButton = SinglePageNotificationButton
+})(window.GOVUK.Modules)

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

@@ -16,7 +16,6 @@
 @import "govspeak/place";
 @import "govspeak/stat-headline";
 @import "govspeak/steps";
-@import "govspeak/summary";
 @import "govspeak/tables";
 @import "govspeak/typography";
 @import "govspeak/warning-callout";

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

@@ -134,7 +134,7 @@ $search-width-or-height: $black-bar-height;
   background: none;
   bottom: 0;
   content: " ";
-  height: govuk-spacing(1);
+  height: 3px;
   left: govuk-spacing(3);
   position: absolute;
   right: govuk-spacing(3);
@@ -284,7 +284,7 @@ $search-width-or-height: $black-bar-height;
     font-size: govuk-px-to-rem(19px);
   }
   font-weight: bold;
-  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
+  margin: govuk-spacing(3) 0;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -480,7 +480,7 @@ $search-width-or-height: $black-bar-height;
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
       &:before {
-        @include prefixed-transform($rotate: 225deg, $translateY: 0);
+        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
       }
     }
 
@@ -617,6 +617,7 @@ $search-width-or-height: $black-bar-height;
   cursor: pointer;
   height: $black-bar-height;
   padding: 0;
+  margin: 0;
   position: absolute;
   right: (($search-width-or-height - govuk-spacing(3)) - 1px); // width of the search button (50px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
   top: 0;
@@ -656,6 +657,10 @@ $search-width-or-height: $black-bar-height;
     }
   }
 
+  &:after {
+    @include pseudo-underline;
+  }
+
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     // stylelint-disable max-nesting-depth
@@ -663,6 +668,10 @@ $search-width-or-height: $black-bar-height;
       @include govuk-focused-text;
       box-shadow: none;
 
+      &:after {
+        background-color: $govuk-focus-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
         border-color: $govuk-focus-colour;
@@ -670,7 +679,7 @@ $search-width-or-height: $black-bar-height;
         @include govuk-media-query($from: 360px) {
           &:before {
             @include chevron(govuk-colour("black"), true);
-            @include prefixed-transform($rotate: 225deg, $translateY: 0);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -679,14 +688,18 @@ $search-width-or-height: $black-bar-height;
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
+      &:after {
+        background-color: $govuk-link-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("black");
+        color: $govuk-link-colour;
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
           &:before {
-            @include chevron(govuk-colour("black"));
-            @include prefixed-transform($rotate: 225deg, $translateY: 0);
+            @include chevron($govuk-link-colour);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -825,96 +838,57 @@ $search-width-or-height: $black-bar-height;
 
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
-  margin: 0 0 0 $chevron-indent-spacing;
-  padding: govuk-spacing(2) 0;
+  box-sizing: border-box;
+  padding: 0 0 govuk-spacing(4) 0;
   position: relative;
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0;
-    padding: govuk-spacing(2) 0;
-  }
 }
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
-  margin: 0 auto;
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  list-style: none;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(4);
+
+  & > li {
+    margin: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin-left: (0 - govuk-spacing(3));
-    margin-right: (0 - govuk-spacing(3));
-    padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
 
     & > li {
-      box-sizing: border-box;
-      margin: 0 govuk-spacing(3) govuk-spacing(2) govuk-spacing(3);
+      margin: 0 govuk-spacing(3);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(18, 2, "li");
-    @include columns-children(18, 2, "li");
+    @include columns(17, 2, "li");
+    @include columns-children(17, 2, "li");
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
-  & > li:first-child {
-    margin-bottom: govuk-spacing(7);
-  }
-
   @include govuk-media-query($from: "desktop") {
-    @include columns(7, 2, "li");
+    @include columns(6, 2, "li");
+    @include columns-children(6, 2, "li");
     padding-bottom: 0;
 
-    & > li,
-    & > li:first-child {
-      margin-bottom: govuk-spacing(4);
-    }
-
-    @supports (display: grid) {
-      & > li:first-child {
-        grid-column: span 2;
-      }
-    }
-
-    & > li:first-child {
-      border-bottom: 1px solid $govuk-border-colour;
-      padding-bottom: 0;
-      -ms-grid-column-span: 2;
-      -ms-grid-column: 1;
-      -ms-grid-row: 1;
-    }
-
-    & > li:nth-child(2) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(3) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 3;
-    }
-
-    & > li:nth-child(4) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 4;
-    }
-
-    & > li:nth-child(5) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(6) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 3;
+    & > li {
+      box-sizing: border-box;
+      padding-bottom: govuk-spacing(4);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   &:after {
     @include make-selectable-area-bigger;
   }
@@ -930,9 +904,11 @@ $search-width-or-height: $black-bar-height;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
-  @include govuk-font($size: 19, $weight: bold);
-  margin-bottom: 0;
-  margin-top: govuk-spacing(2);
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: bold;
 }
 
 // Dropdown menu footer links.
@@ -944,28 +920,31 @@ $search-width-or-height: $black-bar-height;
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-list {
   list-style: none;
-  padding: 0 0 govuk-spacing(8) 0;
+  padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    margin: 0 (0 - govuk-spacing(3)) 0 (0 - govuk-spacing(3));
-    padding: govuk-spacing(8) 0 govuk-spacing(9) 0;
     @include columns(2, 2, "li");
     @include columns-children(2, 2, "li");
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-item {
-  padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
+  padding: govuk-spacing(2) 0;
   position: relative;
 
   @include govuk-media-query($from: "desktop") {
-    padding: 0 govuk-spacing(3) 0 govuk-spacing(3);
+    padding: 0 govuk-spacing(3);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
-  @include govuk-font($size: 19, $weight: normal);
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -974,11 +953,23 @@ $search-width-or-height: $black-bar-height;
 
   @include govuk-media-query($from: "desktop") {
     display: inline;
-    font-weight: bold;
     padding: 0;
+
+    &:after {
+      content: none;
+    }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: normal;
+  margin: govuk-spacing(1) 0 0 0;
+}
+
 // Search dropdown.
 .gem-c-layout-super-navigation-header__search-items {
   background: govuk-colour("light-grey");
@@ -1004,12 +995,34 @@ $search-width-or-height: $black-bar-height;
 }
 
 // Popular links.
+.gem-c-layout-super-navigation-header__popular-item {
+  position: relative;
+  padding: govuk-spacing(1) 0;
+}
+
 .gem-c-layout-super-navigation-header__popular-link {
-  padding: govuk-spacing(2) 0;
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  padding: 0;
+
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin: govuk-spacing(1) 0;
-    padding: 0;
+    &:after {
+      content: none;
+    }
+  }
+}
+
+// To be used with .govuk-width-container - we only need the margins from
+// desktop onwards.
+.gem-c-layout-super-navigation-header__width-container {
+  @include govuk-media-query($until: "desktop") {
+    margin: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss

@@ -2,7 +2,7 @@
   margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(6) * 1.5;
+    margin-bottom: govuk-spacing(7);
   }
 }
 
@@ -10,7 +10,7 @@
   margin-top: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-top: govuk-spacing(6) * 1.5;
+    margin-top: govuk-spacing(7);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss

@@ -17,3 +17,12 @@ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;
+
+$govuk-colours-organisations: map-merge(
+  $govuk-colours-organisations,
+  (
+    "department-for-levelling-up-housing-and-communities": (
+      colour: #012169,
+    ),
+  )
+);

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

@@ -133,7 +133,7 @@
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
                 id="super-navigation-menu__section-<%= unique_id %>"
               >
-                <div class="govuk-width-container">
+                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
                   <div class="govuk-grid-row">
                     <div class="govuk-grid-column-one-third-from-desktop">
                       <% if link[:description].present? %>
@@ -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?
@@ -163,7 +163,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
+                                <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                               </li>
                             <% end %>
                           </ul>

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

@@ -11,9 +11,11 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w(gem-c-metadata)
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
   classes << "gem-c-metadata--inverse" if inverse
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
   <dl data-module="gem-track-click">

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

@@ -1,23 +1,19 @@
 <%
-  page ||= ''
-  data_attributes ||= {}
-  base_path ||= nil
-  local_assigns[:margin_bottom] ||= 3
-  already_subscribed ||= false
-  text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
-
+  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
-  classes = "govuk-body-s gem-c-single-page-notification-button__submit"
 %>
 <% 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><%= text %>
+  <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: data_attributes do %>
-  <input type="hidden" name="base_path" value="<%= base_path %>">
-  <%= content_tag(:button, button_text, {
-    class: classes,
-    type: "submit",
-  }) %>
-<% end if base_path.presence %>
+<%= 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/docs/govspeak.yml

@@ -811,12 +811,6 @@ examples:
         <div class="place">
           <p>This is a place</p>
         </div>
-  summary:
-    data:
-      block: |
-        <div class="summary">
-          <p>This is a summary</p>
-        </div>
   buttons:
     data:
       block: |

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

@@ -357,3 +357,10 @@ examples:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
     context:
       dark_background: true
+  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). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)
+    data:
+      first_published: 14 June 2014
+      last_updated: 10 September 2015
+      margin_bottom: 2

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/single_page_notification_button.yml

@@ -1,9 +1,10 @@
 name: Single page notification button
 description: A button that subscribes the user to email notifications to a page
 body: |
-  By default, the component displays with the "Get emails about this page" state. The component does not render without the `base_path` parameter.
+  By default, the component displays with the "Get emails about this page" state.
+  If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
 
-  The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
+  The component does not render without the `base_path` parameter. The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
 
   When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
 accessibility_criteria: |
@@ -23,10 +24,27 @@ examples:
     data:
       base_path: '/current-page-path'
       data_attributes:
-        category: fancyButtons
+        test_attribute: "testing"
   with_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). It defaults to having a margin bottom of 15px.
     data:
       base_path: '/current-page-path'
       margin_bottom: 5
+  with_js_enhancement:
+    description: |
+      If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
+    data:
+      base_path: '/current-page-path'
+      js_enhancement: true
+  with_button_location:
+    description: |
+      When there is more than one button on a page, we should specify their location so that Analytics can differentiate between them.
+
+      The location should have one of two values: "top" or "bottom".
+
+      When this parameter is passed, its value is reflected in the `data-action` attribute (i.e "Unsubscribe-button-top"). When the flag is not present, `data-action` defaults to "Subscribe-button" or "Unsubscribe-button", depending on the state of the button.
+    data:
+      base_path: '/current-page-path'
+      js_enhancement: true
+      button_location: 'top'

data/config/locales/en.yml

@@ -87,7 +87,7 @@ en:
       statistics: Statistics
       worldwide: Worldwide
     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:
@@ -125,8 +125,6 @@ en:
           href: "/browse/benefits"
         - label: Births, death, marriages and care
           href: "/browse/births-deaths-marriages"
-        - label: Brexit
-          href: "/brexit"
         - label: Business and self-employed
           href: "/browse/business"
         - label: Childcare and parenting
@@ -179,7 +177,7 @@ en:
           description: Consultations and strategy
         - label: Transparency
           href: "/search/transparency-and-freedom-of-information-releases"
-          description: Government data, Freedom of Information releases and corporate reports
+          description: Data, Freedom of Information releases and corporate reports
         footer_links:
         - label: How government works
           href: "/government/how-government-works"

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -66,6 +66,7 @@ module GovukPublishingComponents
         options[:name] = name if name.present? && value.present?
         options[:value] = value if name.present? && value.present?
         options[:aria] = { label: aria_label } if aria_label
+        options[:draggable] = false if link?
         options
       end
 

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -111,10 +111,10 @@ module GovukPublishingComponents
       def show_brexit_related_links?
         # If tagged directly to /brexit or /world/brexit
         # Or if tagged to a taxon which has /brexit as a parent
-        # And is not the brexit checker start page
-        brexit_start_page_content_id = "58d093a1-787d-4f36-a568-86da23a7b884"
-        page_content_id = content_item["content_id"]
-        tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
+        # And is not the brexit hub pages
+        return false if brexit_hub_pages.include?(content_item["content_id"])
+
+        tagged_to_brexit?
       end
 
       def brexit_cta_document_exceptions

data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -0,0 +1,37 @@
+module GovukPublishingComponents
+  module Presenters
+    class SinglePageNotificationButtonHelper
+      attr_reader :already_subscribed, :data_attributes, :base_path, :js_enhancement, :button_type, :button_location
+
+      def initialize(local_assigns)
+        @local_assigns = local_assigns
+        @data_attributes = @local_assigns[:data_attributes] || {}
+        @js_enhancement = @local_assigns[:js_enhancement] || false
+        @already_subscribed = @local_assigns[:already_subscribed] || false
+        @base_path = @local_assigns[:base_path] || nil
+        @button_location = button_location_is_valid? ? @local_assigns[:button_location] : nil
+        @button_type = @local_assigns[:already_subscribed] ? "Unsubscribe" : "Subscribe"
+      end
+
+      def data
+        @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[: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
+      end
+
+      def button_location_is_valid?
+        %w[bottom top].include? @local_assigns[:button_location]
+      end
+
+      def button_text
+        @already_subscribed ? I18n.t("components.single_page_notification_button.unsubscribe_text") : I18n.t("components.single_page_notification_button.subscribe_text")
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.12.0".freeze
+  VERSION = "27.14.2".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -33,6 +33,7 @@ require "govuk_publishing_components/presenters/intervention_helper"
 require "govuk_publishing_components/presenters/organisation_logo_helper"
 require "govuk_publishing_components/presenters/highlight_boxes_helper"
 require "govuk_publishing_components/presenters/taxonomy_list_helper"
+require "govuk_publishing_components/presenters/single_page_notification_button_helper"
 
 require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
 require "govuk_publishing_components/app_helpers/table_helper"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.12.0
+  version: 27.14.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-11 00:00:00.000000000 Z
+date: 2021-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -501,6 +501,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
 - app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
 - app/assets/javascripts/govuk_publishing_components/components/show-password.js
+- app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
 - app/assets/javascripts/govuk_publishing_components/components/tabs.js
 - app/assets/javascripts/govuk_publishing_components/dependencies.js
@@ -624,7 +625,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss
-- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss
@@ -969,6 +969,7 @@ files:
 - lib/govuk_publishing_components/presenters/schema_org.rb
 - lib/govuk_publishing_components/presenters/select.rb
 - lib/govuk_publishing_components/presenters/shared_helper.rb
+- lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb
 - lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb
 - lib/govuk_publishing_components/presenters/subscription_links_helper.rb
 - lib/govuk_publishing_components/presenters/taxonomy_list_helper.rb

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

@@ -1,27 +0,0 @@
-.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
-.gem-c-govspeak {
-  .summary {
-    margin: 0 0 2em;
-    padding: 0;
-    color: $govuk-text-colour;
-
-    p {
-      @include govuk-font($size: 19);
-    }
-
-    @include govuk-media-query($until: tablet) {
-      margin: 0 0 2em;
-      padding: 0;
-    }
-
-    p,
-    h2 {
-      border: 0;
-      margin: 0 .75em 0 0;
-    }
-
-    h2 {
-      line-height: 1.35em;
-    }
-  }
-}