govuk_publishing_components 27.17.0 → 27.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0d9ee129bde5e753f8180b3b8dfe7f2e4fe257558ac1a6fe40bb289242d849f2
-  data.tar.gz: 4c01bb1d55673a25eef1a408e5360da17b2d4e1a8dfc00291463ecc86dfcd81a
+  metadata.gz: 49373bd0b9e370b948f7c91c83647ca22f7f2e112bb0d12dee4686c980f831f4
+  data.tar.gz: 4868f4234fcf242d553c90ab60f35e2354480c30f6c44f3066b5fc60079175b7
 SHA512:
-  metadata.gz: 5eac4c820f6c86caded7a9e994f1e9e15edbb6ab7fce003ae38f9919dcc6a23f3db7f9dfcd27e0204152e17daa35ccb741ce457b6c9c3c85a8ae51350362fe3c
-  data.tar.gz: b9e8068c2b0746134a37e21fefdd8cc6114055e133fa7240e801be587f34f8ff8a7dd218a71f34cda1fe8dce5c54da3109544d0775e103c2a90e9bec153cd018
+  metadata.gz: 7e68c23966e5498ca1ae0c386d2a91703b94bac02808fbae86755ca35b12d3fdd45859a2d3eaa6f052912890296554c0478c717354bd29fb1dd5336a8a3bad5e
+  data.tar.gz: ada5d7c714155391431943c17850d379e4bc9fce3e20fa35bff736b21b60b13d92140dbd7102237f2c64b9c0a948723954e677ef5935b4d91b7bc6a4014bfbd9

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

@@ -75,7 +75,7 @@
 
       if (!attributeValue) { return }
 
-      if (attributeValue.includes('?')) {
+      if (attributeValue.indexOf('?') !== -1) {
         attributeValue += '&' + param
       } else {
         attributeValue += '?' + param

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -8,17 +8,17 @@
   PageContent.getNumberOfSections = function () {
     switch (true) {
       case isNavigationGridPage():
-        return 1 + $('.parent-topic-contents').length
+        return 1 + document.querySelectorAll('.parent-topic-contents').length
       case isNavigationAccordionPage():
-        return $('[data-track-count="accordionSection"]').length
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isDocumentCollectionPage():
-        return $('.document-collection .group-title').length
+        return document.querySelectorAll('.document-collection .group-title').length
       case isMainstreamBrowsePage():
-        return $('#subsection ul:visible').length || $('#section ul').length
+        return countVisible(document.querySelectorAll('#subsection ul')) || document.querySelectorAll('#section ul').length
       case isTopicPage():
-        return $('.topics-page nav.index-list').length
+        return document.querySelectorAll('.topics-page nav.index-list').length
       case isPolicyAreaPage():
-        return $('.topic section h1.label').length
+        return document.querySelectorAll('.topic section h1.label').length
       case isFinderPage():
       case isWhitehallFinderPage():
       case isNavigationLeafPage():
@@ -28,8 +28,8 @@
         return 1
       default:
         // It's a content page, not a "finding" page
-        var sidebarSections = $('[data-track-count="sidebarRelatedItemSection"]').length
-        var sidebarTaxons = $('[data-track-count="sidebarTaxonSection"]').length
+        var sidebarSections = document.querySelectorAll('[data-track-count="sidebarRelatedItemSection"]').length
+        var sidebarTaxons = document.querySelectorAll('[data-track-count="sidebarTaxonSection"]').length
 
         return sidebarSections || sidebarTaxons
     }
@@ -38,92 +38,101 @@
   PageContent.getNumberOfLinks = function () {
     switch (true) {
       case isNavigationGridPage():
-        return $('a[data-track-category="navGridLinkClicked"]').length +
-          $('a[data-track-category="navGridLeafLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="navGridLinkClicked"]').length +
+          document.querySelectorAll('a[data-track-category="navGridLeafLinkClicked"]').length
       case isNavigationAccordionPage():
-        return $('a[data-track-category="navAccordionLinkClicked"]').length
-      case isNavigationLeafPage():
-        return $('a[data-track-category="navLeafLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="navAccordionLinkClicked"]').length
       case isDocumentCollectionPage():
-        return $('.document-collection .group-document-list li a').length
+        return document.querySelectorAll('.document-collection .group-document-list li a').length
       case isMainstreamBrowsePage():
-        return $('#subsection ul a:visible').length ||
-          $('#section ul a').length
+        return countVisible(document.querySelectorAll('#subsection ul a')) || document.querySelectorAll('#section ul a').length
       case isTopicPage():
-        return $('.topics-page .index-list ul a').length ||
-          $('.topics-page .topics ul a').length
+        return document.querySelectorAll('.topics-page .index-list ul a').length ||
+          document.querySelectorAll('.topics-page .topics ul a').length
       case isPolicyAreaPage():
-        return $('section.document-block a').length +
-          $('section .collection-list h2 a').length
-      case isWhitehallFinderPage():
-        return $('.document-list .document-row h3 a').length
+        return document.querySelectorAll('section.document-block a').length +
+          document.querySelectorAll('section .collection-list h2 a').length
       case isFinderPage():
-        return $('.finder-frontend-content li.document a').length
+        return document.querySelectorAll('.finder-frontend-content li.document a').length
+      case isWhitehallFinderPage():
+        return document.querySelectorAll('.document-list .document-row h3 a').length
+      case isNavigationLeafPage():
+        return document.querySelectorAll('a[data-track-category="navLeafLinkClicked"]').length
       default:
         // It's a content page, not a "finding" page, count related links
-        return $('a[data-track-category="relatedLinkClicked"]').length
+        return document.querySelectorAll('a[data-track-category="relatedLinkClicked"]').length
     }
   }
 
-  function getRenderingApplication () {
-    return $('meta[name="govuk:rendering-application"]').attr('content')
-  };
-
-  function getFormat () {
-    return $('meta[name="govuk:format"]').attr('content')
-  };
+  var metaApplicationSelector = 'meta[name="govuk:rendering-application"]'
+  var metaFormatSelector = 'meta[name="govuk:format"]'
+  var metaNavigationTypeSelector = 'meta[name="govuk:navigation-page-type"]'
 
-  function getNavigationPageType () {
-    return $('meta[name="govuk:navigation-page-type"]').attr('content')
-  };
+  function getMetaAttribute (selector) {
+    var element = document.querySelector(selector)
+    if (element) {
+      return element.getAttribute('content')
+    }
+  }
 
   function isNavigationGridPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'grid'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'grid'
+  }
 
   function isNavigationAccordionPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'accordion'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'accordion'
+  }
 
   function isNavigationLeafPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'taxon' &&
-      getNavigationPageType() === 'leaf'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'taxon' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'leaf'
+  }
 
   function isMainstreamBrowsePage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'mainstream_browse_page'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'mainstream_browse_page'
+  }
 
   function isTopicPage () {
-    return getRenderingApplication() === 'collections' &&
-      getFormat() === 'topic'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaFormatSelector) === 'topic'
+  }
 
   function isPolicyAreaPage () {
-    return getRenderingApplication() === 'whitehall' &&
-      getFormat() === 'placeholder_policy_area'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'whitehall' &&
+      getMetaAttribute(metaFormatSelector) === 'placeholder_policy_area'
+  }
 
   function isDocumentCollectionPage () {
-    return getRenderingApplication() === 'government-frontend' &&
-      getFormat() === 'document_collection'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'government-frontend' &&
+      getMetaAttribute(metaFormatSelector) === 'document_collection'
+  }
 
   function isFinderPage () {
-    return getRenderingApplication() === 'finder-frontend' &&
-      getFormat() === 'finder'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'finder-frontend' &&
+      getMetaAttribute(metaFormatSelector) === 'finder'
+  }
 
   function isWhitehallFinderPage () {
-    return getRenderingApplication() === 'whitehall' &&
-      getFormat() === 'finder'
-  };
+    return getMetaAttribute(metaApplicationSelector) === 'whitehall' &&
+      getMetaAttribute(metaFormatSelector) === 'finder'
+  }
+
+  function countVisible (elements) {
+    var count = 0
+    for (var i = 0; i < elements.length; i++) {
+      var style = window.getComputedStyle(elements[i])
+      if (!(style.display === 'none' || style.visibility === 'hidden')) {
+        count++
+      }
+    }
+    return count
+  }
 
   GOVUK.PageContent = PageContent
 })()

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

@@ -7,6 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module
     this.basePath = this.$module.querySelector('input[name="base_path"]').value
     this.buttonLocation = this.$module.getAttribute('data-button-location')
+    this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
 
     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
@@ -16,21 +17,30 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   SinglePageNotificationButton.prototype.init = function () {
     var xhr = new XMLHttpRequest()
     xhr.open('GET', this.personalisationEndpoint, true)
+    // if XHR to the personalisation endpoint is taking an incredibly long time to complete, we are better off leaving the button in its default unpersonalised state. Content changing before the user's eyes while they are browsing can be jarring and should be avoided.
+    xhr.timeout = 10000
+
+    xhr.ontimeout = function () {
+      this.makeVisible(this.$module)
+    }.bind(this)
 
     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)
+      if (xhr.readyState === 4) {
+        if (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)
+            }
           }
         }
+        this.makeVisible(this.$module)
       }
     }.bind(this)
     xhr.send()
@@ -44,5 +54,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
     return true
   }
+
+  SinglePageNotificationButton.prototype.makeVisible = function (target) {
+    target.classList.add(this.buttonVisibleClass)
+  }
   Modules.SinglePageNotificationButton = SinglePageNotificationButton
 })(window.GOVUK.Modules)

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

@@ -1,102 +1,5 @@
 @import "mixins/prefixed-transform";
-
-/// Set grid row or column value using the fraction unit.
-///
-/// @param {Integer} $number - number of fractions that the grid row or column
-///   needs to be divided into.
-/// @returns {String} - the value
-///
-/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
-///  .container {
-///    grid-template-rows: fractions(5);
-///  }
-///
-@function fractions($number) {
-  $fractions: "1fr";
-
-  @for $i from 1 to $number {
-    $fractions: $fractions + " 1fr";
-  }
-
-  @return unquote($fractions);
-}
-
-/// Arrange items into vertical columns
-///
-/// @param {Integer} $items - number of items that need to be arranged
-/// @param {Integer} $columns - number of columns required
-/// @param {String} $selector - (optional) the inner element to be targeted.
-///
-/// @example scss - A 7 item 2 column layout.
-///  .container {
-///    @include columns(7, 2);
-///  }
-
-/// @example scss - A 9 item 3 column layout that has `div`s as the inner
-///   elements.
-///  .container {
-///    @include columns(9, 3, "div");
-///  }
-///
-@mixin columns($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  display: -ms-grid;
-  display: grid;
-  grid-auto-flow: column;
-  -ms-grid-columns: fractions($columns);
-  grid-template-columns: fractions($columns);
-  -ms-grid-rows: fractions($rows);
-  grid-template-rows: fractions($rows);
-}
-
-@mixin columns-children($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  // Internet Explorer 10-11 require each element to be placed in the grid -
-  // the `grid-auto-flow` property isn't supported. This means that both the
-  // column and row needs to be set for every element.
-
-  // This creates a list of lists to represent the columns and rows; for
-  // example, a 7 item 2 column list would create this:
-  //   [
-  //     [1, 2, 3, 4 ] // column one
-  //     [5, 6, 7] // column two
-  //   ]
-  $grid: ();
-  $counter: 0;
-
-  @for $column from 1 through $columns {
-    $this-row: ();
-
-    @for $row from 1 through $rows {
-      $counter: $counter + 1;
-
-      @if $counter <= $items {
-        $this-row: append($this-row, $counter);
-      }
-    }
-
-    $grid: append($grid, $this-row, "comma");
-  }
-
-  // Now we can loop through the list of lists to create the rules needed for
-  // the older grid syntax; fist looping through the list to get the number
-  // needed for the column, then looping again to get the number for the grid
-  // row:
-  @for $column_index from 1 through length($grid) {
-    $this-row: nth($grid, $column_index);
-
-    @for $item-index from 1 through length($this-row) {
-      $this-item: nth($this-row, $item-index);
-
-      & > #{$selector}:nth-child(#{$this-item}) {
-        -ms-grid-column: $column_index;
-        -ms-grid-row: $item-index;
-      }
-    }
-  }
-}
+@import "mixins/grid-helper";
 
 $icon-size: 20px;
 $chevron-indent-spacing: 7px;
@@ -866,15 +769,13 @@ $pseudo-underline-height: 3px;
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(17, 2, "li");
-    @include columns-children(17, 2, "li");
+    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
   @include govuk-media-query($from: "desktop") {
-    @include columns(6, 2, "li");
-    @include columns-children(6, 2, "li");
+    @include columns($items: 6, $columns: 2, $selector: "li", $flow: column);
     padding-bottom: 0;
 
     & > li {
@@ -924,8 +825,7 @@ $pseudo-underline-height: 3px;
   padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    @include columns(2, 2, "li");
-    @include columns-children(2, 2, "li");
+    @include columns($items: 2, $columns: 2, $selector: "li");
     margin: 0 (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
@@ -963,6 +863,7 @@ $pseudo-underline-height: 3px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
+  @include govuk-typography-common;
   font-size: 16px;
   @if $govuk-typography-use-rem {
     font-size: govuk-px-to-rem(16px);

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

@@ -1,6 +1,25 @@
 $input-size: 40px;
 $large-input-size: 50px;
 
+@mixin large-mode {
+  .gem-c-search__label {
+    @include govuk-font($size: 19, $line-height: $large-input-size);
+  }
+
+  .gem-c-search__input[type="search"] {
+    height: $large-input-size;
+  }
+
+  .gem-c-search__submit {
+    width: $large-input-size;
+    height: $large-input-size;
+
+    .gem-c-search__icon {
+      @include icon-positioning($large-input-size);
+    }
+  }
+}
+
 .gem-c-search {
   position: relative;
   margin-bottom: 30px;
@@ -220,21 +239,12 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--large {
-  .gem-c-search__label {
-    @include govuk-font($size: 19, $line-height: $large-input-size);
-  }
-
-  .gem-c-search__input[type="search"] {
-    height: $large-input-size;
-  }
-
-  .gem-c-search__submit {
-    width: $large-input-size;
-    height: $large-input-size;
+  @include large-mode;
+}
 
-    .gem-c-search__icon {
-      @include icon-positioning($large-input-size);
-    }
+.gem-c-search--large-on-mobile {
+  @include govuk-media-query($until: "tablet") {
+    @include large-mode;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -28,3 +28,11 @@
   vertical-align: top;
   margin-right: govuk-spacing(1);
 }
+
+.js-enabled .gem-c-single-page-notification-button.js-personalisation-enhancement {
+  opacity: 0;
+
+  &.gem-c-single-page-notification-button--visible {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss

@@ -0,0 +1,141 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into columns
+///
+/// The items can flow from horizontally or vertically.
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+/// @param {String} $direction - (optional) the flow of the items in the grid:
+///   * `row` goes from the left to right, top to bottom one row at a time
+///   * `column` goes from the top to bottom, left to right one column at a time
+///
+/// @example scss - A 7 item 2 column layout going left to right, top to bottom.
+///  .container {
+///    @include columns($items: 7, $columns: 2);
+///  }
+///
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $selector:"div");
+///  }
+///
+/// @example scss - A 16 item 2 column layout going from top to bottom
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $flow:"column");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*", $flow: row) {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: $flow;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every child element.
+  @if $flow == "row" {
+    $grid: ();
+    $counter: 0;
+
+    @for $row from 1 through $rows {
+      $this-row: ();
+
+      @for $column from 1 through $columns {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    @for $row-count from 1 through length($grid) {
+      $this-column: nth($grid, $row-count);
+
+      @for $item-index from 1 through length($this-column) {
+        $this-item: nth($this-column, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $item-index;
+          -ms-grid-row: $row-count;
+        }
+      }
+    }
+  }
+
+  @if $flow == "column" {
+    // This creates a list of lists to represent the columns and rows; for
+    // example, a 7 item 2 column list would create this:
+    //   [
+    //     [1, 2, 3, 4 ] // column one
+    //     [5, 6, 7] // column two
+    //   ]
+    $grid: ();
+    $counter: 0;
+
+    @for $column from 1 through $columns {
+      $this-row: ();
+
+      @for $row from 1 through $rows {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    // Now we can loop through the list of lists to create the rules needed for
+    // the older grid syntax; fist looping through the list to get the number
+    // needed for the column, then looping again to get the number for the grid
+    // row:
+    @for $column_index from 1 through length($grid) {
+      $this-row: nth($grid, $column_index);
+
+      @for $item-index from 1 through length($this-row) {
+        $this-item: nth($this-row, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $column_index;
+          -ms-grid-row: $item-index;
+        }
+      }
+    }
+  }
+}

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

@@ -21,6 +21,7 @@
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
   classes << "gem-c-search--large" if size == "large"
+  classes << "gem-c-search--large-on-mobile" if size == "large-mobile"
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"

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

@@ -9,7 +9,7 @@
   <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.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 %>
+  <%= tag.form class: component_helper.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",

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

@@ -44,6 +44,9 @@ examples:
   large_version:
     data:
       size: "large"
+  large_version_on_mobile_only:
+    data:
+      size: "large-mobile"
   change_field_name:
     description: To be used if you need to change the default name 'q'
     data:

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,6 +1,6 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
-    <span class="govuk-header__logotype gem-c-header__logotype">
+    <span class="govuk-header__logotype gem-c-header__logotype header-logo">
       <!--[if gt IE 8]><!-->
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
         <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>

data/config/locales/en.yml

@@ -185,15 +185,17 @@ en:
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
       popular_links:
-      - label: 'Coronavirus (COVID-19): guidance'
-        href: "/guidance/covid-19-coronavirus-restrictions-what-you-can-and-cannot-do"
+      - label: 'Coronavirus (COVID-19)'
+        href: "/coronavirus"
       - label: 'Brexit: check what you need to do'
         href: "/brexit"
       - label: Sign in to your personal tax account
         href: "/personal-tax-account"
       - label: Find a job
         href: "/find-a-job"
-      - label: Sign in to your Universal Credit account
+      - label: 'Personal tax account: sign in'
+        href: "/personal-tax-account"
+      - label: 'Universal Credit account: sign in'
         href: "/sign-in-universal-credit"
       popular_links_heading: Popular on GOV.UK
       search_text: Search GOV.UK

data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -1,7 +1,7 @@
 module GovukPublishingComponents
   module Presenters
     class SinglePageNotificationButtonHelper
-      attr_reader :already_subscribed, :data_attributes, :base_path, :js_enhancement, :button_type, :button_location
+      attr_reader :already_subscribed, :data_attributes, :base_path, :js_enhancement, :button_type, :button_location, :classes
 
       def initialize(local_assigns)
         @local_assigns = local_assigns
@@ -11,6 +11,8 @@ module GovukPublishingComponents
         @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"
+        @classes = %w[gem-c-single-page-notification-button]
+        @classes << "js-personalisation-enhancement" if js_enhancement
       end
 
       def data

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.17.0".freeze
+  VERSION = "27.18.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.17.0
+  version: 27.18.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-12-09 00:00:00.000000000 Z
+date: 2021-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -635,6 +635,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss
+- app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss