govuk_publishing_components 28.2.0 → 28.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0989b4b0c9bafbc71f0347de67fb337acee0cfb13da092fae2be8c6c35122d32'
-  data.tar.gz: e56b816c73f788ca8bfd9383fe39db912a84f5a14b141bb258cd7e7fcc526919
+  metadata.gz: 1cdf4c30d55a0c5ec9b7708ecc5866d5f554ed0be27ffe9f23df9ae3a8862ac9
+  data.tar.gz: a2183c0f935738d9bedafae81ce3f1e5b0715ceeebe3b8eb301b7c7a79d0f56b
 SHA512:
-  metadata.gz: 384f96c451155a016bbfea69596892e4ed287afa095a0780570d07842c62498f3de4890819e1d87e173a856178e74d34e3f6561562aa8b5e9e2fe7a5974a2380
-  data.tar.gz: b8e6166d94e9536640edca9e877f8bec63429596dfe7c563f2521b2254b4acbcadd7decf26ffbc64ca28b14a8a5bd2b02d8fb7ceba35a2d523c3c65641b8d3fb
+  metadata.gz: aa3b9eeccbbfe40a2c2a304bd28bce06e4f52d2154ef5ea2affb22792d90a3964da0f6d542be541ee04bef5818a5c62e50220f69b626827ba5066192cd78a7b7
+  data.tar.gz: 2eaca61cd01cc1a788c5f6ac3668c60a36ebb1fe82befecc56fa90f7181b3a1142b7559c07bd9d809bb176e1969de6c820582d4ac5f0a05ab3304e9df3e91caa

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

@@ -199,7 +199,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     for (var i = 0; i < this.config.percentages.length; i++) {
       var percent = this.config.percentages[i]
-      var pos = (pageHeight / 100) * percent
+      // subtract 1 pixel to solve a bug where 100% can't be reached in some cases
+      var pos = ((pageHeight / 100) * percent) - 1
       var alreadySeen = false
       if (trackedNodes.length) {
         alreadySeen = trackedNodes[i].alreadySeen

data/app/assets/javascripts/govuk_publishing_components/analytics/auto-track-event.js

@@ -1,30 +1,30 @@
-;(function (global) {
-  'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.Modules = GOVUK.Modules || {}
+(function (Modules) {
+  function AutoTrackEvent ($module) {
+    this.$module = $module
+  }
 
-  GOVUK.Modules.AutoTrackEvent = function () {
-    this.start = function (element) {
-      var options = { nonInteraction: 1 } // automatic events shouldn't affect bounce rate
-      var category = element.data('track-category')
-      var action = element.data('track-action')
-      var label = element.data('track-label')
-      var value = element.data('track-value')
+  AutoTrackEvent.prototype.init = function () {
+    var options = { nonInteraction: 1 } // automatic events shouldn't affect bounce rate
+    var category = this.$module.getAttribute('data-track-category')
+    var action = this.$module.getAttribute('data-track-action')
+    var label = this.$module.getAttribute('data-track-label')
+    var value = parseInt(this.$module.getAttribute('data-track-value'))
 
-      if (typeof label === 'string') {
-        options.label = label
-      }
+    if (typeof label === 'string') {
+      options.label = label
+    }
 
-      if (value || value === 0) {
-        options.value = value
-      }
+    if (value || value === 0) {
+      options.value = value
+    }
 
-      if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
-        GOVUK.analytics.trackEvent(category, action, options)
-      }
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent(category, action, options)
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  Modules.AutoTrackEvent = AutoTrackEvent
+})(window.GOVUK.Modules)

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

@@ -1,5 +1,3 @@
-/* global $ */
-
 ;(function (global) {
   'use strict'
 
@@ -15,15 +13,21 @@
   var STATE_PATTERN = /state=.[^&]+/g
 
   function shouldStripDates () {
-    return ($('meta[name="govuk:static-analytics:strip-dates"]').length > 0)
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-dates"]')
+    return metas.length > 0
   }
 
   function shouldStripPostcodes () {
-    return ($('meta[name="govuk:static-analytics:strip-postcodes"]').length > 0)
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-postcodes"]')
+    return metas.length > 0
   }
 
   function queryStringParametersToStrip () {
-    var value = $('meta[name="govuk:static-analytics:strip-query-string-parameters"]').attr('content')
+    var meta = document.querySelector('meta[name="govuk:static-analytics:strip-query-string-parameters"]')
+    var value = false
+    if (meta) {
+      value = meta.getAttribute('content')
+    }
     var parameters = []
 
     if (value) {

data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js

@@ -4,10 +4,11 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function GemTrackClick () { }
+  function GemTrackClick ($module) {
+    this.$module = $module
+  }
 
-  GemTrackClick.prototype.start = function ($module) {
-    this.$module = $module[0]
+  GemTrackClick.prototype.init = function () {
     this.$module.handleClick = this.handleClick.bind(this)
     var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
     var limitToElementClass = this.$module.getAttribute('data-limit-to-element-class')

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

@@ -1,4 +1,3 @@
-/* eslint-env jquery */
 // = require govuk/vendor/polyfills/Element/prototype/closest.js
 // = require govuk/components/checkboxes/checkboxes.js
 window.GOVUK = window.GOVUK || {}

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

@@ -1,4 +1,3 @@
-/* eslint-env jquery */
 // = require govuk/components/details/details.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
@@ -15,8 +14,8 @@ window.GOVUK.Modules.GovukDetails = window.GOVUKFrontend;
 
   GemDetails.prototype.init = function () {
     if (this.customTrackLabel) { // If a custom label has been provided, we can simply call the tracking module
-      var trackDetails = new window.GOVUK.Modules.GemTrackClick()
-      trackDetails.start($(this.$summary))
+      var trackDetails = new window.GOVUK.Modules.GemTrackClick(this.$summary)
+      trackDetails.init()
     } else if (this.detailsClick) { // If no custom label is set, we use the open/close status as the label
       this.detailsClick.addEventListener('click', function (event) {
         this.trackDefault(this.$summary)

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js

@@ -2,7 +2,7 @@
 
 window.GOVUK = window.GOVUK || {};
 
-(function (GOVUK, $) {
+(function (GOVUK) {
   'use strict'
 
   var BarchartEnhancement = function ($element) {
@@ -30,4 +30,4 @@ window.GOVUK = window.GOVUK || {};
   }
 
   GOVUK.GovspeakBarchartEnhancement = BarchartEnhancement
-}(window.GOVUK, window.jQuery))
+}(window.GOVUK))

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

@@ -1,12 +1,11 @@
 .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: false, $weight: bold);
   font-size: 80px;
-  @include govuk-typography-weight-bold;
   line-height: 1;
 
   @if $govuk-typography-use-rem {
@@ -55,3 +54,7 @@
     }
   }
 }
+
+.gem-c-big-number__suffix {
+  vertical-align: middle;
+}

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

@@ -6,6 +6,7 @@ $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
 $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
+$button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
@@ -18,7 +19,7 @@ $pseudo-underline-height: 3px;
     content: "";
     display: inline-block;
     height: 8px;
-    margin: 0 8px 0 2px;
+    margin: 0 10px 0 2px;
     vertical-align: middle;
     width: 8px;
   }
@@ -172,6 +173,15 @@ $pseudo-underline-height: 3px;
   @include govuk-media-query($from: "desktop") {
     border-bottom: 0;
     padding: 0;
+
+    &:first-of-type {
+      margin-right: -1px;
+
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-left: 1px solid $button-pipe-colour;
+        border-right: 1px solid $button-pipe-colour;
+      }
+    }
   }
 }
 
@@ -313,22 +323,28 @@ $pseudo-underline-height: 3px;
   padding: 0;
 
   @include focus-not-focus-visible {
-    &:before {
-      @include chevron($govuk-link-colour);
+    .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      &:before {
+        @include chevron($govuk-link-colour);
+      }
     }
   }
 
   @include focus-not-focus-visible {
     &:hover {
-      &:before {
-        @include chevron($govuk-link-hover-colour, true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        &:before {
+          @include chevron($govuk-link-hover-colour, true);
+        }
       }
     }
   }
 
   &:focus {
-    &:before {
-      @include chevron($govuk-focus-text-colour, true);
+    .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      &:before {
+        @include chevron($govuk-focus-text-colour, true);
+      }
     }
   }
 
@@ -345,12 +361,15 @@ $pseudo-underline-height: 3px;
         font-size: govuk-px-to-rem(16px);
       }
       height: $black-bar-height;
-      padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(3) govuk-spacing(5);
       position: relative;
       text-decoration: none;
 
-      &:before {
-        @include chevron(govuk-colour("white"), true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-color: $button-pipe-colour;
+
+        &:before {
+          @include chevron(govuk-colour("white"), true);
+        }
       }
     }
     @include focus-not-focus-visible {
@@ -362,8 +381,12 @@ $pseudo-underline-height: 3px;
           background: govuk-colour("mid-grey");
         }
 
-        &:before {
-          @include chevron(govuk-colour("mid-grey"), true);
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: $button-pipe-colour;
+
+          &:before {
+            @include chevron($button-pipe-colour, true);
+          }
         }
       }
     }
@@ -375,16 +398,22 @@ $pseudo-underline-height: 3px;
         background: $govuk-focus-text-colour;
       }
 
-      &:before {
-        @include chevron($govuk-focus-text-colour, true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-color: $govuk-focus-colour;
+
+        &:before {
+          @include chevron($govuk-focus-text-colour, true);
+        }
       }
     }
   }
 
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
-      &:before {
-        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        &:before {
+          @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+        }
       }
     }
 
@@ -393,8 +422,13 @@ $pseudo-underline-height: 3px;
         background: govuk-colour("light-grey");
         color: $govuk-link-colour;
 
-        &:before {
-          @include chevron($govuk-link-colour, true);
+        // stylelint-disable max-nesting-depth
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: govuk-colour("light-grey");
+
+          &:before {
+            @include chevron($govuk-link-colour, true);
+          }
         }
 
         &:after {
@@ -406,8 +440,12 @@ $pseudo-underline-height: 3px;
         background-color: $govuk-focus-colour;
         color: $govuk-focus-text-colour;
 
-        &:before {
-          @include chevron($govuk-focus-text-colour, true);
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: $govuk-focus-colour;
+
+          &:before {
+            @include chevron($govuk-focus-text-colour, true);
+          }
         }
 
         &:after {
@@ -416,12 +454,20 @@ $pseudo-underline-height: 3px;
       }
     }
   }
+  // stylelint-enable max-nesting-depth
 
   .js-module-initialised & {
     @include govuk-link-style-no-underline;
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+  @include govuk-media-query($from: "desktop") {
+    display: inline-block;
+    padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) govuk-spacing(5);
+  }
+}
+
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
   &:link,
@@ -550,7 +596,7 @@ $pseudo-underline-height: 3px;
     box-shadow: none;
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      border-color: govuk-colour("white");
+      border-color: $button-pipe-colour;
       color: govuk-colour("white");
 
       @include govuk-media-query($from: 360px) {

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -1,5 +1,5 @@
-$share-button-width: 32px;
-$share-button-height: 32px;
+$share-button-width: 30px;
+$share-button-height: 30px;
 
 .gem-c-share-links__list {
   list-style: none;

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

@@ -1,7 +1,8 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  big_number_helper = GovukPublishingComponents::Presenters::BigNumberHelper.new(local_assigns)
 
-  number ||= nil
+  number ||= false
   label ||= nil
   href ||= nil
   data_attributes ||= nil
@@ -9,17 +10,20 @@
   classes = ["gem-c-big-number"]
   classes << shared_helper.get_margin_bottom
 
-  value_classes = ["gem-c-big-number__value"]
-  
-  if label.nil? && href
-    value_classes << "gem-c-big-number__value--decorated"
-  end
-
+  value_classes = big_number_helper.value_classes
 %>
 <% if number %>
   <% big_number_value = capture do %>
     <%= tag.span class: value_classes, data: href ? nil : data_attributes do %>
-      <%= number %>
+      <%
+        # The below check is to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony
+        # Currently the only small symbol used with big numbers are pluses so they are specifically applied in the below code
+      %>
+      <% if big_number_helper.number_has_plus_suffix? %>
+        <%= number[0...-1] %><%= tag.span "+", class: "gem-c-big-number__suffix" %>
+      <% else %>
+        <%= number %>
+      <% end %>
     <% end %>
 
     <% unless label.nil? %>

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

@@ -108,24 +108,28 @@
                   track_dimension_index: "29",
                 }
               } %>
-              <%= content_tag(:button, link[:label], {
-                aria: {
-                  controls: "super-navigation-menu__section-#{unique_id}",
-                  expanded: false,
-                  label: show_menu_text,
-                },
-                class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
-                data: {
-                  text_for_hide: hide_menu_text,
-                  text_for_show: show_menu_text,
-                  toggle_desktop_group: "top",
-                  toggle_mobile_group: "second",
-                  tracking_key: tracking_label,
-                },
-                hidden: true,
-                id: "super-navigation-menu__section-#{unique_id}-toggle",
-                type: "button",
-              }) if has_children %>
+              <% if has_children %>
+                <%= content_tag(:button, {
+                  aria: {
+                    controls: "super-navigation-menu__section-#{unique_id}",
+                    expanded: false,
+                    label: show_menu_text,
+                  },
+                  class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
+                  data: {
+                    text_for_hide: hide_menu_text,
+                    text_for_show: show_menu_text,
+                    toggle_desktop_group: "top",
+                    toggle_mobile_group: "second",
+                    tracking_key: tracking_label,
+                  },
+                  hidden: true,
+                  id: "super-navigation-menu__section-#{unique_id}-toggle",
+                  type: "button",
+                }) do %>
+                  <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner" %>
+                <% end %>
+              <% end %>
             </div>
             <% if has_children %>
               <div

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

@@ -55,38 +55,41 @@
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-                  <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
-                  <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                 </svg>
-
               <% elsif link[:icon] == 'twitter' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-                  <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
-                  <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                 </svg>
-
               <% elsif link[:icon] == 'email' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M34.983 18.76v12.48H15.016V18.76h19.967m2.496-2.496H12.52v17.472h24.959V16.264z"/><path fill="none" stroke="#FFF" stroke-width="2.496" stroke-miterlimit="10" d="M14.59 18.963L25 26.945l10.263-7.869"/></svg>
-
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM58.37,21,36.92,39.45,15.47,21ZM11.65,23.66,26.27,36.23,11.65,49.9ZM15.1,52.83,29.7,39.18l7.22,6.21,7.22-6.21,14.6,13.65ZM62.19,49.9,47.57,36.23,62.19,23.66Z"/>
+                </svg>
               <% elsif link[:icon] == 'flickr' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M23.72 25a5.76 5.76 0 1 1-11.52 0 5.76 5.76 0 1 1 11.52 0m14.08 0c0 3.182-2.578 5.76-5.76 5.76s-5.76-2.578-5.76-5.76a5.76 5.76 0 1 1 11.52 0"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/>
+                </svg>
               <% elsif link[:icon] == 'instagram' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M25 28.2a3.204 3.204 0 0 1-3.2-3.2c0-1.764 1.436-3.2 3.2-3.2 1.765 0 3.2 1.436 3.2 3.2 0 1.765-1.435 3.2-3.2 3.2"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" fill="#FFF" d="M25 22.44c1.412 0 2.56 1.148 2.56 2.56s-1.147 2.56-2.56 2.56a2.561 2.561 0 0 1 0-5.12m0-1.28A3.844 3.844 0 0 0 21.16 25 3.844 3.844 0 0 0 25 28.84 3.845 3.845 0 0 0 28.84 25 3.844 3.844 0 0 0 25 21.16"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#e" overflow="visible"/></clipPath><path clip-path="url(#f)" fill="#FFF" d="M17.32 35.24c-1.555 0-2.56-1.005-2.56-2.561V17.373c0-1.611.981-2.613 2.56-2.613h15.36c1.58 0 2.561 1.002 2.561 2.613v15.36c0 1.522-1.005 2.507-2.561 2.507H17.32zM25 17.96c-3.881 0-7.04 3.159-7.04 7.04 0 3.881 3.159 7.04 7.04 7.04 3.881 0 7.04-3.159 7.04-7.04 0-3.881-3.159-7.04-7.04-7.04m7.36-2.56a2.243 2.243 0 0 0-2.24 2.24 2.243 2.243 0 0 0 2.24 2.24 2.241 2.241 0 0 0 0-4.48"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#g" overflow="visible"/></clipPath><path clip-path="url(#h)" fill="#FFF" d="M30.552 15.4a2.873 2.873 0 0 0-.704 3.648A7.64 7.64 0 0 0 25 17.319c-4.235 0-7.68 3.445-7.68 7.68 0 4.235 3.445 7.68 7.68 7.68 4.235 0 7.68-3.444 7.68-7.68a7.642 7.642 0 0 0-1.728-4.848 2.876 2.876 0 0 0 3.647-.703v13.285c0 1.169-.717 1.866-1.92 1.866H17.32c-1.22 0-1.92-.699-1.92-1.92V17.373c0-1.254.7-1.973 1.92-1.973h13.232m2.128-1.28H17.32c-1.92 0-3.2 1.28-3.2 3.253V32.68c0 1.92 1.28 3.2 3.2 3.2h15.36c1.92 0 3.2-1.28 3.2-3.146v-15.36c0-1.974-1.28-3.254-3.2-3.254m-.32 5.12a1.6 1.6 0 1 1-.001-3.2 1.6 1.6 0 0 1 .001 3.2M25 31.4a6.4 6.4 0 1 1 .002-12.802A6.4 6.4 0 0 1 25 31.4"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
+                </svg>
               <% elsif link[:icon] == 'linkedin' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.24 35.24V21.8h-4.48v13.44h4.48z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M26.28 35.24V28.2c0-1.92.64-3.2 1.92-3.2h.64c1.28 0 1.92 1.28 1.92 4.48v5.76h4.48V28.2c0-4.48-1.28-6.4-4.48-6.4-3.84 0-4.479 1.92-4.479 1.92V21.8H21.8v13.44h4.48zm-6.72-17.92a2.56 2.56 0 1 1-5.12 0 2.56 2.56 0 0 1 5.12 0"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
               <% elsif link[:icon] == 'youtube' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.88 33.32V16.68L33.32 25l-13.44 8.32z"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                </svg>
               <% elsif link[:icon] == 'whatsapp' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true"><path d="M0 32V0h32v32H0zm20.839-13.894c-.263-.131-1.555-.766-1.796-.854-.24-.088-.416-.132-.59.131-.176.263-.68.855-.833 1.03-.153.176-.307.198-.57.066-.262-.131-1.109-.41-2.113-1.304-.78-.697-1.308-1.557-1.461-1.82-.153-.263-.016-.406.115-.536.118-.118.263-.308.394-.46.131-.154.175-.264.263-.44.088-.174.044-.328-.022-.46-.066-.131-.591-1.424-.81-1.95-.214-.513-.43-.443-.59-.452a10.506 10.506 0 0 0-.505-.009.964.964 0 0 0-.7.329c-.241.263-.92.899-.92 2.192 0 1.293.942 2.542 1.073 2.718.131.176 1.852 2.83 4.489 3.967.626.27 1.116.433 1.497.554.63.2 1.202.172 1.655.104.505-.075 1.555-.636 1.774-1.25.219-.613.219-1.14.153-1.25-.066-.108-.24-.174-.503-.306zm-4.795 6.547h-.003a8.73 8.73 0 0 1-4.449-1.219l-.319-.19-3.308.869.883-3.226-.208-.33a8.718 8.718 0 0 1-1.336-4.652c.001-4.819 3.922-8.74 8.744-8.74a8.68 8.68 0 0 1 6.179 2.564 8.686 8.686 0 0 1 2.557 6.183c-.002 4.82-3.922 8.74-8.74 8.74zm7.44-16.18a10.449 10.449 0 0 0-7.44-3.084c-5.796 0-10.513 4.717-10.516 10.516 0 1.853.484 3.662 1.404 5.256l-1.492 5.45 5.574-1.463a10.504 10.504 0 0 0 5.026 1.28h.004c5.796 0 10.514-4.717 10.516-10.515a10.455 10.455 0 0 0-3.077-7.44z" fill="currentColor"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
+                </svg>
               <% else %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M12.84 14.12v19.2h5.76l5.76 5.76v-5.76h12.8v-19.2H12.84zm3.2 8.32H28.2V25H16.04v-2.56zm16 7.68h-16v-2.56h16v2.56zm1.92-10.24H16.04v-2.56h17.92v2.56z"/></svg>
-
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>
+                </svg>
               <% end %>
             </span><%= link_text %><% end %>
         </li>

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -23,6 +23,12 @@
       <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
       <p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info") %></p>
 
+      <% # Added for spam bots only %>
+      <div class="govuk-visually-hidden" aria-hidden="true">
+        <label for="feedback_maybe">This field is for robots only. Please leave blank</label>
+        <input id="feedback_maybe" type="text" pattern=".{0}" tabindex="-1" autocomplete="off" >
+      </div>
+
       <%= render "govuk_publishing_components/components/textarea", {
         label: {
           text: t("components.feedback.what_doing")
@@ -46,3 +52,23 @@
     </div>
   </div>
 </form>
+
+<%
+  # I've added the following script inline in case of a scenario where a bot is able to parse the page, 
+  # without downloading any of the external scripts. 
+  # This seems to be a more reliable way to make sure the script is executed.
+%>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var input = document.querySelector("#feedback_maybe"),
+      form = document.querySelector("#something-is-wrong")
+
+    form.addEventListener("submit", spamCapture);
+
+    function spamCapture(e) {
+      if (input.value.length !== 0) return;
+      e.preventDefault();
+    }
+  });
+</script>

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -1,17 +1,23 @@
-<%
-  contact_govuk_path = "/contact/govuk"
-%>
-
 <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
   <div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
     <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
     
     <ul class="gem-c-feedback__option-list">
-      <li class="gem-c-feedback__option-list-item" style="display: none" hidden="hidden">
-        <!-- Maybe button exists only to try and capture clicks by bots -->
-        <button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
+      <li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
+        <% # Maybe button exists only to try and capture clicks by bots %>
+        <%= link_to "/contact/govuk", {
+          class: 'gem-c-feedback__prompt-link',
+          data: {
+            'track-category' => 'yesNoFeedbackForm',
+            'track-action' => 'ffMaybeClick'
+          },
+          role: 'button',
+          style: 'display: none',
+          hidden: 'hidden',
+          'aria-hidden': 'true',
+        } do %>
           <%= t("components.feedback.maybe") %>
-        </button>
+        <% end %>
       </li>
       <li class="gem-c-feedback__option-list-item">
         <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">

data/lib/govuk_publishing_components/presenters/big_number_helper.rb

@@ -0,0 +1,30 @@
+module GovukPublishingComponents
+  module Presenters
+    class BigNumberHelper
+      def initialize(local_assigns)
+        @label = local_assigns[:label]
+        @href = local_assigns[:href]
+        @number = local_assigns[:number] || nil
+      end
+
+      def value_classes
+        class_list = ["gem-c-big-number__value"]
+
+        if @label.nil? && @href
+          class_list << "gem-c-big-number__value--decorated"
+        end
+
+        class_list
+      end
+
+      # This function is to check for small symbols which alter how the number is rendered lightly
+      # We do this to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony
+      # Currently the only small symbol used with big numbers are pluses so they are specifically targetted in the below code
+      def number_has_plus_suffix?
+        if @number.is_a? String
+          @number.ends_with?("+")
+        end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "28.2.0".freeze
+  VERSION = "28.3.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -6,6 +6,7 @@ require "govuk_publishing_components/config"
 require "govuk_publishing_components/engine"
 require "govuk_publishing_components/presenters/shared_helper"
 require "govuk_publishing_components/presenters/attachment"
+require "govuk_publishing_components/presenters/big_number_helper"
 require "govuk_publishing_components/presenters/breadcrumbs"
 require "govuk_publishing_components/presenters/breadcrumb_selector"
 require "govuk_publishing_components/presenters/button_helper"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 28.2.0
+  version: 28.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-12 00:00:00.000000000 Z
+date: 2022-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -931,6 +931,7 @@ files:
 - lib/govuk_publishing_components/engine.rb
 - lib/govuk_publishing_components/minitest/component_guide_test.rb
 - lib/govuk_publishing_components/presenters/attachment.rb
+- lib/govuk_publishing_components/presenters/big_number_helper.rb
 - lib/govuk_publishing_components/presenters/breadcrumb_selector.rb
 - lib/govuk_publishing_components/presenters/breadcrumbs.rb
 - lib/govuk_publishing_components/presenters/button_helper.rb