govuk_publishing_components 21.68.1 → 23.2.1

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/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

@@ -38,10 +38,9 @@ $gem-hover-dark-background: #dddcdb;
     text-decoration: underline;
   }
 
-  &:focus,
-  &:active {
+  &:focus {
     text-decoration: none;
-    color: govuk-colour("black");
+    color: $govuk-focus-text-colour;
   }
 }
 
@@ -115,6 +114,22 @@ $gem-hover-dark-background: #dddcdb;
   }
 }
 
+.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");
@@ -177,14 +192,9 @@ $gem-hover-dark-background: #dddcdb;
       color: $gem-hover-dark-background;
     }
 
-    &:focus,
-    &:active {
+    &:focus {
       text-decoration: none;
-      color: govuk-colour("black");
-
-      &:hover {
-        color: govuk-colour("black");
-      }
+      color: $govuk-focus-text-colour;
     }
   }
 

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

@@ -104,11 +104,16 @@
   }
 }
 
+.govuk-header__logotype {
+  vertical-align: middle;
+}
+
 .gem-c-header__product-name {
   display: none;
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
+    vertical-align: middle;
   }
 }
 

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

@@ -1,7 +1,8 @@
+$gem-c-print-link-background-width: 16px;
+$gem-c-print-link-background-height: 18px;
+
 .gem-c-print-link {
   display: none;
-  margin-bottom: 2em;
-  margin-top: 2em;
 }
 
 .gem-c-print-link.gem-c-print-link--show-without-js {
@@ -14,39 +15,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/_search.scss

@@ -36,7 +36,6 @@ $large-input-size: 50px;
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
-
   padding: 6px;
   margin: 0;
   width: 100%;
@@ -71,6 +70,13 @@ $large-input-size: 50px;
   }
 }
 
+@include govuk-compatibility(govuk_template) {
+  //  ultra specific rule overrides focus styling from govuk_template
+  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
+    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+  }
+}
+
 .gem-c-search__submit {
   border: 0;
   cursor: pointer;

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

@@ -120,7 +120,7 @@
   .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");
+    border-bottom: 1px solid govuk-colour("dark-grey", $legacy: "grey-1");
 
     &:focus {
       border-bottom-color: transparent;

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

@@ -58,6 +58,10 @@
 
   .footnotes {
     border-top: 1px solid $govuk-text-colour;
+
+    a[role="doc-backlink"] {
+      display: none;
+    }
   }
 
   .legislative-list {

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

@@ -10,6 +10,7 @@
   mobile_subtext ||= false
   light_text ||= false
   simple ||= false
+  simple_light ||= false
   dark_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
@@ -24,6 +25,7 @@
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
+  css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
   css_classes << (shared_helper.get_margin_bottom)

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

@@ -1,13 +1,10 @@
 <%-
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
-  aria_label ||= "Contents"
+  aria_label ||= t("components.contents_list.contents")
   format_numbers ||= false
-  title_lang ||= false
-  title = local_assigns[:title].presence || t("components.contents_list.contents")
-  hide_title ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-
+  title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
   classes = cl_helper.classes
   classes << brand_helper.brand_class
 -%>
@@ -21,14 +18,12 @@
       module: "track-click"
     }
   ) do %>
-    <% unless hide_title %>
-      <%= content_tag(
-        :h2,
-        class: "gem-c-contents-list__title",
-        lang: title_lang.presence
-      ) do %>
-        <%= title %>
-      <% end %>
+    <%= content_tag(
+      :h2, {class: "gem-c-contents-list__title"}.merge(
+        title_fallback == "en" ? {:lang => "en",} : {}
+      )
+    ) do %>
+      <%= t("components.contents_list.contents") %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">

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

@@ -12,22 +12,18 @@
     <% if content.html_safe? %>
       <%= content %>
     <% else %>
-      <% puts "
-        You've passed in unsanitised HTML into the govspeak component as the
-        `content` param.
+      <% raise "
+        You've passed in unsanitised HTML into the Govspeak component as the
+        `content` parameter.
 
-        Passing in unsafe HTML is deprecated and will be removed in a future
-        version. You need to pass in a block instead or use the `capture` helper.
-
-        See the component guide for examples.
-
-        If you're 100% sure there's no unsanitised user input in the string you
-        could also call `.html_safe` on the string or use the `raw` helper before
-        passing it in.
+        To fix this use a `do` block with the sanitize method - see
+        https://components.publishing.service.gov.uk/component-guide/govspeak/
+        for the updated documentation and
+        https://github.com/alphagov/govuk_publishing_components/pull/1632/
+        for further examples.
 
         Called from #{caller_locations.find { |l| l.to_s.include?('.erb') }}
         " %>
-      <%= raw content %>
     <% end %>
   <% elsif block_given? %>
     <%= yield %>