govuk_publishing_components 21.67.1 → 23.0.0

data/app/assets/javascripts/govuk_publishing_components/analytics/static-analytics.js

@@ -0,0 +1,132 @@
+/* global GOVUK, $, ga */
+
+(function () {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+  var StaticAnalytics = function (config) {
+    // Create universal tracker
+    // https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/analytics.md
+    // https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/analytics/analytics.js
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (!consentCookie || consentCookie.usage) {
+      this.analytics = new GOVUK.Analytics(config)
+    }
+
+    var trackingOptions = getOptionsFromCookie()
+
+    // We're setting the client ID inside a callback function because
+    // we don't have access to the client ID until GA returns a tracker object.
+    ga(function (tracker) {
+      this.gaClientId = tracker.get('clientId')
+
+      $(window).trigger('gaClientSet')
+
+      // Start up ecommerce tracking
+      GOVUK.Ecommerce.start()
+
+      // Track initial pageview
+      this.trackPageview(null, null, trackingOptions)
+
+      // Begin error and print tracking
+      GOVUK.analyticsPlugins.error({ filenameMustMatch: /gov\.uk/ })
+      GOVUK.analyticsPlugins.printIntent()
+      GOVUK.analyticsPlugins.mailtoLinkTracker()
+      GOVUK.analyticsPlugins.externalLinkTracker({
+        externalLinkUploadCustomDimension: 36
+      })
+      GOVUK.analyticsPlugins.downloadLinkTracker({
+        selector: 'a[href*="/government/uploads"], a[href*="assets.publishing.service.gov.uk"]'
+      })
+    }.bind(this))
+  }
+
+  StaticAnalytics.load = function () {
+    GOVUK.Analytics.load()
+  }
+
+  StaticAnalytics.prototype.trackPageview = function (path, title, options) {
+    // 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)
+
+    var trackingOptions = GOVUK.CustomDimensions.getAndExtendDefaultTrackingOptions(options)
+    this.analytics.trackPageview(path, title, trackingOptions)
+  }
+
+  StaticAnalytics.prototype.trackEvent = function (category, action, options) {
+    var trackingOptions = GOVUK.CustomDimensions.getAndExtendDefaultTrackingOptions(options)
+    this.analytics.trackEvent(category, action, trackingOptions)
+  }
+
+  StaticAnalytics.prototype.setDimension = function (index, value, name, scope) {
+    if (typeof value === 'undefined') {
+      return
+    }
+    this.analytics.setDimension(index, value, name, scope)
+  }
+
+  StaticAnalytics.prototype.trackShare = function (network) {
+    var trackingOptions = GOVUK.CustomDimensions.getAndExtendDefaultTrackingOptions()
+    this.analytics.trackShare(network, trackingOptions)
+  }
+
+  StaticAnalytics.prototype.addLinkedTrackerDomain = function (trackerId, name, domain, sendPageView) {
+    this.analytics.addLinkedTrackerDomain(trackerId, name, domain, sendPageView)
+  }
+
+  StaticAnalytics.prototype.setOptionsForNextPageview = function (options) {
+    if (typeof options !== 'object') {
+      return
+    }
+
+    var cookieOptions = getOptionsFromCookie()
+
+    $.extend(cookieOptions, options)
+
+    this.setCookie('analytics_next_page_call', cookieOptions)
+  }
+
+  StaticAnalytics.prototype.setCookie = function (cookieName, object) {
+    if (!GOVUK.cookie) {
+      return
+    }
+
+    if (!object) {
+      GOVUK.cookie(cookieName, null)
+    } else {
+      // Singly-stringified JSON sometimes gets escaped when put into a cookie, but inconsistently. The command-line
+      // tests will escape, but browser tests will not. Double-stringify in order to get consistently-escaped strings.
+      GOVUK.cookie(cookieName, JSON.stringify(JSON.stringify(object)))
+    }
+  }
+
+  StaticAnalytics.prototype.getCookie = function (cookieName) {
+    if (!GOVUK.cookie) {
+      return
+    }
+
+    try {
+      return JSON.parse(JSON.parse(GOVUK.cookie(cookieName)))
+    } catch (error) {
+      return null
+    }
+  }
+
+  StaticAnalytics.prototype.stripPII = function (value) {
+    return this.analytics.pii.stripPII(value)
+  }
+
+  function getOptionsFromCookie () {
+    try {
+      var cookie = StaticAnalytics.prototype.getCookie('analytics_next_page_call')
+      StaticAnalytics.prototype.setCookie('analytics_next_page_call', null)
+      return cookie || {}
+    } catch (e) {
+      return {}
+    }
+  }
+
+  GOVUK.StaticAnalytics = StaticAnalytics
+})()

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -80,9 +80,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       if (!thisel.querySelectorAll('.js-toggle-link').length) {
         var span = document.createElement('span')
-        span.className = 'gem-c-step-nav__toggle-link js-toggle-link'
-        span.setAttribute('aria-hidden', true)
-        span.setAttribute('hidden', 'hidden')
+        var showHideSpan = document.createElement('span')
+        var commaSpan = document.createElement('span')
+        var thisSectionSpan = document.createElement('span')
+
+        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        commaSpan.className = 'govuk-visually-hidden'
+        thisSectionSpan.className = 'govuk-visually-hidden'
+
+        commaSpan.innerHTML = ', '
+        thisSectionSpan.innerHTML = ' this section'
+
+        span.appendChild(commaSpan)
+        span.appendChild(showHideSpan)
+        span.appendChild(thisSectionSpan)
+
         thisel.querySelectorAll('.js-step-title-button')[0].appendChild(span)
       }
     }

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

@@ -0,0 +1,61 @@
+//= require ../vendor/polyfills/closest.js
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function GemTrackClick () { }
+
+  GemTrackClick.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.handleClick = this.handleClick.bind(this)
+
+    var that = this
+    // add a listener to the whole element
+    this.$module.addEventListener('click', function (e) {
+      that.$module.handleClick(e.target)
+    })
+  }
+
+  GemTrackClick.prototype.handleClick = function (target) {
+    var options = { transport: 'beacon' }
+
+    // if clicked element hasn't got the right attributes, look for a parent that matches
+    if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) {
+      target = target.closest('[data-track-category][data-track-action]')
+    }
+
+    if (target) {
+      var category = target.getAttribute('data-track-category')
+      var action = target.getAttribute('data-track-action')
+      var label = target.getAttribute('data-track-label')
+      var value = target.getAttribute('data-track-value')
+      var dimension = target.getAttribute('data-track-dimension')
+      var dimensionIndex = target.getAttribute('data-track-dimension-index')
+      var extraOptions = target.getAttribute('data-track-options')
+
+      if (label) {
+        options.label = label
+      }
+
+      if (value) {
+        options.value = value
+      }
+
+      if (dimension && dimensionIndex) {
+        options['dimension' + dimensionIndex] = dimension
+      }
+
+      if (extraOptions) {
+        extraOptions = JSON.parse(extraOptions)
+        for (var k in extraOptions) options[k] = extraOptions[k]
+      }
+
+      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+        window.GOVUK.analytics.trackEvent(category, action, options)
+      }
+    }
+  }
+
+  Modules.GemTrackClick = GemTrackClick
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -1,3 +1,5 @@
+$gem-hover-dark-background: #dddcdb;
+
 .gem-c-action-link {
   display: table;
 
@@ -36,10 +38,9 @@
     text-decoration: underline;
   }
 
-  &:focus,
-  &:active {
+  &:focus {
     text-decoration: none;
-    color: govuk-colour("black");
+    color: $govuk-focus-text-colour;
   }
 }
 
@@ -113,6 +114,22 @@
   }
 }
 
+.gem-c-action-link--simple-light {
+  &:before {
+    width: 30px;
+    height: 30px;
+    background: image-url("govuk_publishing_components/action-link-arrow--simple-light.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-size: 25px auto;
+    background-position: 0 2px;
+  }
+
+  .gem-c-action-link__link {
+    text-decoration: none;
+  }
+}
+
 .gem-c-action-link--dark-icon {
   &:before {
     background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
@@ -171,10 +188,13 @@
       color: govuk-colour("white");
     }
 
-    &:focus,
-    &:active {
+    &:hover {
+      color: $gem-hover-dark-background;
+    }
+
+    &:focus {
       text-decoration: none;
-      color: govuk-colour("black");
+      color: $govuk-focus-text-colour;
     }
   }
 

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

@@ -90,7 +90,7 @@
 }
 
 .gem-c-feedback__prompt-question {
-  vertical-align: text-top;
+  vertical-align: top;
   display: inline-block;
   margin: govuk-spacing(2) govuk-spacing(4);
 
@@ -113,9 +113,17 @@
 
 .gem-c-feedback__prompt-link {
   @include govuk-font(19);
-  box-shadow: 0 2px 0 govuk-colour("black");
+  background: transparent;
+  box-shadow: 0 2px 0 govuk-colour("white");
+  border: 1px govuk-colour("white") solid;
   min-width: 100%;
 
+  &:hover {
+    // backup style for browsers that don't support rgba
+    background: govuk-colour("black");
+    background: rgba(govuk-colour("black"), .2);
+  }
+
   @include govuk-media-query($from: mobile) {
     min-width: 100px;
     margin-bottom: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -1,3 +1,6 @@
+$gem-c-print-link-background-width: 16px;
+$gem-c-print-link-background-height: 18px;
+
 .gem-c-print-link {
   display: none;
   margin-bottom: 2em;
@@ -14,39 +17,41 @@
   }
 }
 
-.gem-c-print-link__link {
-  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
-
-  margin-left: -10px;
-  padding: .5em .5em .5em 38px;
+.gem-c-print-link__link,
+.gem-c-print-link__button {
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
+  background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
+  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
 
   @include govuk-device-pixel-ratio($ratio: 2) {
     background-image: image-url("govuk_publishing_components/icon-print-2x.png");
-    background-size: 16px 18px;
   }
 
+  &:hover {
+    background-color: govuk-colour("light-grey");
+  }
+}
+
+.gem-c-print-link__link {
+  box-shadow: inset 0 0 0 1px $govuk-border-colour;
+  text-decoration: none;
+
   &:focus {
-    @include govuk-focused-text;
+    border: 0;
+    box-shadow: 0 $govuk-focus-width $govuk-text-colour;
   }
 }
 
 .gem-c-print-link__button {
   @extend %govuk-body-s;
-  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
-  border: 0;
+  border: 1px solid $govuk-border-colour;
   color: $govuk-link-colour;
   cursor: pointer;
-  margin: 0;
-  margin-left: -10px;
-  padding: .5em .5em .5em 38px;
-  text-decoration: underline;
-
-  @include govuk-device-pixel-ratio($ratio: 2) {
-    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
-    background-size: 16px 18px;
-  }
+  margin: govuk-spacing(0);
 
   &:focus {
     @include govuk-focused-text;
+    background-color: $govuk-focus-colour;
+    border-color: transparent;
   }
 }

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

@@ -1,79 +1,129 @@
 .gem-c-subscription-links {
   @include govuk-text-colour;
   @include govuk-font(19, $weight: bold);
+}
 
-  .gem-c-subscription-links__hidden-header {
-    @include govuk-visually-hidden;
+.gem-c-subscription-links__hidden-header {
+  @include govuk-visually-hidden;
+}
+
+.gem-c-subscription-links__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gem-c-subscription-links__list--small {
+  @include govuk-font(16);
+}
+
+.gem-c-subscription-links__list-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: govuk-spacing(4);
+  margin-bottom: govuk-spacing(3);
+
+  &:last-child {
+    margin-right: 0;
   }
+}
+
+.gem-c-subscription-links__list-item--small {
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: govuk-spacing(2);
 
-  .gem-c-subscription-links__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  &:first-child {
+    margin-right: govuk-spacing(2);
   }
 
-  .gem-c-subscription-links__list--small {
-    @include govuk-font(16);
+  &:only-child {
+    margin-right: 0;
   }
+}
 
-  .gem-c-subscription-links__list-item {
-    display: inline-block;
-    margin-right: govuk-spacing(4);
-    margin-bottom: govuk-spacing(3);
+.gem-c-subscription-links__item {
+  @extend %govuk-link;
+  display: inline-block;
+  text-decoration: none;
+  background-repeat: no-repeat;
+  background-position: 0 20%;
 
-    &:last-child {
-      margin-right: 0;
-    }
+  @include govuk-media-query($from: tablet) {
+    background-position: 0 35%;
   }
+}
 
-  .gem-c-subscription-links__list-item--small {
-    display: inline-block;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: govuk-spacing(2);
+.gem-c-subscription-links__item--button {
+  display: none;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  padding: govuk-spacing(2);
+  border: 1px solid $gem-quiet-button-colour;
+  background-color: $gem-secondary-button-background-colour;
 
-    &:first-child {
-      margin-right: govuk-spacing(2);
-    }
+  .js-enabled & {
+    display: inline-block;
+  }
 
-    &:only-child {
-      margin-right: 0;
-    }
+  &:not(.brand__color) {
+    color: $govuk-link-colour;
   }
 
-  .gem-c-subscription-links__link {
-    @extend %govuk-link;
+  &:visited,
+  &:active,
+  &:focus {
     text-decoration: none;
-    background-repeat: no-repeat;
-    background-position: 0 20%;
+  }
 
-    @include govuk-media-query($from: tablet) {
-      background-position: 0 35%;
-    }
+  &:focus {
+    color: $govuk-focus-text-colour;
+    border: 1px solid $govuk-focus-colour;
+    outline: 3px solid transparent;
+  }
+
+  &:hover:not(:focus) {
+    background-color: $gem-secondary-button-hover-background-colour;
+    text-decoration: none;
   }
+}
 
-  .gem-c-subscription-links__feed-box {
-    padding: govuk-spacing(3);
-    margin-bottom: govuk-spacing(3);
-    background: govuk-colour("light-grey", $legacy: "grey-3");
+.gem-c-subscription-links__feed-box {
+  padding: govuk-spacing(3);
+  margin-bottom: govuk-spacing(3);
+  background: govuk-colour("light-grey", $legacy: "grey-3");
 
-    .js-enabled &.js-hidden {
-      display: none;
-    }
+  .js-enabled &.js-hidden {
+    display: none;
   }
+}
 
-  .gem-c-subscription-links__feed-hidden-description {
+.gem-c-subscription-links__feed-hidden-description {
+  .js-enabled & {
     @include govuk-visually-hidden;
   }
 }
 
 .gem-c-subscription-links__icon {
   margin-right: .1em;
+  color: govuk-colour("black");
 }
 
-.gem-c-subscription-links__list-item--small {
-  .gem-c-subscription-links__icon {
-    @include scale(.9);
-    transform-origin: bottom left;
+.gem-c-subscription-links__list-item--small .gem-c-subscription-links__icon {
+  @include scale(.9);
+  transform-origin: bottom left;
+}
+
+.gem-c-subscription-links--with-feed-box {
+  .gem-c-subscription-links__item--link {
+    padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
+    border: 1px solid transparent;
+    border-bottom: 1px solid govuk-colour("dark-grey", $legacy: "grey-1");
+
+    &:focus {
+      border-bottom-color: transparent;
+    }
   }
 }