govuk_publishing_components 28.0.0 → 28.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52ec5aa91a7d5060c6b29671f2206a967ab5af8a3891cb800c95d6b28eb09d15
-  data.tar.gz: 0bbf50f1bb6f0cd64af2986e72a612fe28a65df3987caf523939fcf87e3341ad
+  metadata.gz: a8d54dbd05dbbd81f32e589a912b1d606692599533e68b0ae4e0ff9dd44fbe45
+  data.tar.gz: e8fbb61474b105726f43d076accad977d0d43647e6877dc4f5f26968ae89de98
 SHA512:
-  metadata.gz: a144e7583969b1767bb25e64f64772d4c4e632814ba3863f6335570a3a83936eea4aa76daeb1b006f39910b5b6086f1f9f65ea63b3068f929bc167f2f5237ea2
-  data.tar.gz: 78e13b419fba7b1eac89947ca9891e87f4939ed27456e093c474fbeca3afb291c6c86b002fbed478630b78671bd061637a208cf5f043656631b5d12e7b5af72c
+  metadata.gz: 90d5e091ae34ba4f083e9f051896e9e1a2bcbd17d2afd0969bdca2bf2505f40441f74d81496fd63881e0f61002d7884dc32f0ef4e01b74b0e981287d67975b2d
+  data.tar.gz: b2eec023c7640b917b5331d5166083fdf7a5189fd010c4d98199668857a78e9158bdde0f700c6a6e2a29e3556e17fefa635ef9fc684e4eabada7951286577697

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/custom-dimensions.js

@@ -7,11 +7,11 @@
 
   CustomDimensions.getAndExtendDefaultTrackingOptions = function (extraOptions) {
     var trackingOptions = this.customDimensions()
-    return this.extend(trackingOptions, extraOptions)
+    return GOVUK.extendObject(trackingOptions, extraOptions)
   }
 
   CustomDimensions.customDimensions = function () {
-    var dimensions = this.extend(
+    var dimensions = GOVUK.extendObject(
       {},
       customDimensionsFromBrowser(),
       customDimensionsFromMetaTags(),
@@ -25,24 +25,6 @@
     return dimensions
   }
 
-  CustomDimensions.extend = function (out) {
-    out = out || {}
-
-    for (var i = 1; i < arguments.length; i++) {
-      if (!arguments[i]) {
-        continue
-      }
-
-      for (var key in arguments[i]) {
-        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
-          out[key] = arguments[i][key]
-        }
-      }
-    }
-
-    return out
-  }
-
   function customDimensionsFromBrowser () {
     var customDimensions = {
       dimension15: window.httpStatusCode || 200,

data/app/assets/javascripts/govuk_publishing_components/analytics/mailto-link-tracker.js

@@ -1,36 +1,41 @@
+//= require ../vendor/polyfills/closest.js
 ;(function (global) {
   'use strict'
 
-  var $ = global.jQuery
   var GOVUK = global.GOVUK || {}
 
   GOVUK.analyticsPlugins = GOVUK.analyticsPlugins || {}
   GOVUK.analyticsPlugins.mailtoLinkTracker = function () {
-    var mailtoLinkSelector = 'a[href^="mailto:"]'
+    document.querySelector('body').addEventListener('click', function (event) {
+      var element = event.target
+      if (element.tagName !== 'A') {
+        element = element.closest('a')
+      }
 
-    $('body').on('click', mailtoLinkSelector, trackClickEvent)
+      if (!element) {
+        return
+      }
 
-    function trackClickEvent (evt) {
-      var $link = getLinkFromEvent(evt)
-      var options = { transport: 'beacon' }
-      var href = $link.attr('href')
-      var linkText = $.trim($link.text())
+      var href = element.getAttribute('href')
 
-      if (linkText) {
-        options.label = linkText
+      if (!href) {
+        return
       }
 
-      GOVUK.analytics.trackEvent('Mailto Link Clicked', href, options)
-    }
+      if (href.substring(0, 7) === 'mailto:') {
+        trackClickEvent(element, href)
+      }
+    })
 
-    function getLinkFromEvent (evt) {
-      var $target = $(evt.target)
+    function trackClickEvent (element, href) {
+      var options = { transport: 'beacon' }
+      var linkText = element.textContent
 
-      if (!$target.is('a')) {
-        $target = $target.parents('a')
+      if (linkText) {
+        options.label = linkText.trim()
       }
 
-      return $target
+      GOVUK.analytics.trackEvent('Mailto Link Clicked', href, options)
     }
   }
 

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/static-analytics.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $, ga */
+/* global GOVUK, ga */
 
 (function () {
   'use strict'
@@ -20,7 +20,7 @@
     ga(function (tracker) {
       this.gaClientId = tracker.get('clientId')
 
-      $(window).trigger('gaClientSet')
+      GOVUK.triggerEvent(window, 'gaClientSet')
 
       // Start up ecommerce tracking
       GOVUK.Ecommerce.start()
@@ -49,7 +49,7 @@
     // Add the cookie banner status as a custom dimension
     var cookieBannerShown = !this.getCookie('seen_cookie_message')
     var cookieBannerDimension = { dimension100: cookieBannerShown ? cookieBannerShown.toString() : 'false' }
-    $.extend(options, cookieBannerDimension)
+    options = GOVUK.extendObject(options, cookieBannerDimension)
 
     var trackingOptions = GOVUK.CustomDimensions.getAndExtendDefaultTrackingOptions(options)
     this.analytics.trackPageview(path, title, trackingOptions)
@@ -83,7 +83,7 @@
 
     var cookieOptions = getOptionsFromCookie()
 
-    $.extend(cookieOptions, options)
+    cookieOptions = GOVUK.extendObject(cookieOptions, options)
 
     this.setCookie('analytics_next_page_call', cookieOptions)
   }

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/analytics.js

@@ -1,4 +1,5 @@
 //= require govuk_publishing_components/lib/cookie-functions
+//= require govuk_publishing_components/lib/extend-object
 //= require ./analytics/pii
 //= require ./analytics/google-analytics-universal-tracker
 //= require ./analytics/analytics
@@ -13,7 +14,6 @@
 //= require ./analytics/static-analytics
 //= require ./analytics/ecommerce
 //= require ./analytics/init
-//= require ./analytics/scroll-tracker
 //= require ./analytics/auto-scroll-tracker
 //= require ./analytics/explicit-cross-domain-links
 //= require ./analytics/track-click

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/components/metadata.js

@@ -0,0 +1,27 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Metadata ($module) {
+    this.$module = $module
+  }
+
+  Metadata.prototype.init = function () {
+    var seeAllUpdates = this.$module.querySelector('.js-see-all-updates-link')
+
+    if (seeAllUpdates) {
+      var target = document.querySelector(seeAllUpdates.getAttribute('href'))
+
+      if (target) {
+        seeAllUpdates.addEventListener('click', function () {
+          var targetToggleTrigger = target.querySelector('[aria-expanded]')
+          if (targetToggleTrigger && targetToggleTrigger.getAttribute('aria-expanded') !== 'true') {
+            targetToggleTrigger.click()
+          }
+        })
+      }
+    }
+  }
+
+  Modules.Metadata = Metadata
+})(window.GOVUK.Modules)

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/_contextual-sidebar.scss

@@ -1,5 +1,4 @@
 $transition-campaign-red: #ff003b;
-$covid-colour: $govuk-link-colour;
 
 .gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
@@ -30,7 +29,3 @@ $covid-colour: $govuk-link-colour;
 .gem-c-contextual-sidebar__cta--brexit {
   border-top: 2px solid $transition-campaign-red;
 }
-
-.gem-c-contextual-sidebar__cta--covid {
-  border-top: 2px solid $covid-colour;
-}

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

@@ -141,9 +141,9 @@
   }
 }
 
-.gem-c-feedback__option-list-item:first-child {
+.gem-c-feedback__option-list-item:last-child {
   @include govuk-media-query($from: mobile) {
-    margin-right: govuk-spacing(4);
+    margin-left: govuk-spacing(4);
   }
 }
 

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/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -145,4 +145,10 @@
     margin-bottom: $govuk-gutter;
     border-top: 1px solid $govuk-border-colour;
   }
+
+  code {
+    padding: 0 5px;
+    color: govuk-colour("red");
+    background-color: govuk-colour("light-grey");
+  }
 }

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

@@ -1,19 +1,29 @@
 <%
-  number ||= nil
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  big_number_helper = GovukPublishingComponents::Presenters::BigNumberHelper.new(local_assigns)
+
+  number ||= false
   label ||= nil
   href ||= nil
   data_attributes ||= nil
   aria ||= nil
-  classes = ["gem-c-big-number__value"]
-  
-  if label.nil? && href
-    classes << "gem-c-big-number__value--decorated"
-  end
+  classes = ["gem-c-big-number"]
+  classes << shared_helper.get_margin_bottom
+
+  value_classes = big_number_helper.value_classes
 %>
 <% if number %>
   <% big_number_value = capture do %>
-    <%= tag.span class: classes, data: href ? nil : data_attributes do %>
-      <%= number %>
+    <%= tag.span class: value_classes, data: href ? nil : data_attributes do %>
+      <%
+        # 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? %>
@@ -25,7 +35,7 @@
     <% end %>
   <% end %>
   
-  <%= tag.div class: "gem-c-big-number", aria: aria do %>
+  <%= tag.div class: classes, aria: aria do %>
     <% unless href.nil? %>
       <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
     <% else %>

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

@@ -27,8 +27,4 @@
   <% if navigation.show_brexit_cta? %>
     <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
   <% end %>
-
-  <% if navigation.show_covid_booster_cta? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/covid_cta', content_item: content_item %>
-  <% end %>
 </div>