govuk_publishing_components 27.15.0 → 27.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e405833a40d51e34a480d411380a552a68d49a9c398fa89fa694716e0a22131f
-  data.tar.gz: c6f710970b8ecae4c214851ee2e250b80673e38ec004bf161a1ca1042a44af3b
+  metadata.gz: 586ea5662dfd4f3951905b244afc78556dc687bf861a05e11e56ff7d2ee172eb
+  data.tar.gz: eab6ea6544883bc5fa511f29e589d996eabae18a6661f0772ac45356668f5396
 SHA512:
-  metadata.gz: a24c9485202f161b46daff7ec6b081148c8e58d52f8fed9cab8ab6f2d90b016b1d06e81abf0ffd157b75c7331d7b5151b018bbe58f580c6d8bdf94f23ee0dcab
-  data.tar.gz: b63635bfda7d6ccb8ee7e88d810f19e97343d6cb7a08075bba620764cfd609ad0b1043361e1a5b84b49c1787263119b521316b44435dd8c6566754e5635c7b0c
+  metadata.gz: f513e048959e7e81b753583f923772b590f5c4da1841e666f4131bc79e8dea9b8cd4571cba7bab859e0d1b4683a1b10ebaa17d56cd6d3ab3a4eff68090837a1c
+  data.tar.gz: 5f2d6aa1171a47b3074ba65b0dc5488b9269dc4f7781580df52d7d1c354559d19270bace849b39342c51e3e4ad9342a966354da39dabb6f52838de4c505f0f03

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -7,11 +7,11 @@
 
   CustomDimensions.getAndExtendDefaultTrackingOptions = function (extraOptions) {
     var trackingOptions = this.customDimensions()
-    return $.extend(trackingOptions, extraOptions)
+    return this.extend(trackingOptions, extraOptions)
   }
 
   CustomDimensions.customDimensions = function () {
-    var dimensions = $.extend(
+    var dimensions = this.extend(
       {},
       customDimensionsFromBrowser(),
       customDimensionsFromMetaTags(),
@@ -19,9 +19,28 @@
       abTestCustomDimensions()
     )
 
-    return $.each(dimensions, function (key, value) {
-      dimensions[key] = new GOVUK.Analytics.PIISafe(String(value))
-    })
+    for (var key in dimensions) {
+      dimensions[key] = new GOVUK.Analytics.PIISafe(String(dimensions[key]))
+    }
+    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 () {
@@ -70,52 +89,59 @@
       'spelling-suggestion': { dimension: 81 }
     }
 
-    var $metas = $('meta[name^="govuk:"]')
+    var metas = document.querySelectorAll("meta[name^='govuk']")
     var customDimensions = {}
     var tags = {}
 
-    $metas.each(function () {
-      var $meta = $(this)
-      var key = $meta.attr('name').split('govuk:')[1]
-
-      var dimension = dimensionMappings[key]
+    for (var i = 0; i < metas.length; i++) {
+      var meta = metas[i]
+      var metaKey = meta.getAttribute('name').split('govuk:')[1]
+      var dimension = dimensionMappings[metaKey]
       if (dimension) {
-        tags[key] = $meta.attr('content')
+        tags[metaKey] = meta.getAttribute('content')
       }
-    })
+    }
 
-    $.each(dimensionMappings, function (key, dimension) {
-      var value = tags[key] || dimension.defaultValue
+    for (var key in dimensionMappings) {
+      var value = tags[key] || dimensionMappings[key].defaultValue
       if (typeof value !== 'undefined') {
-        customDimensions['dimension' + dimension.dimension] = value
+        customDimensions['dimension' + dimensionMappings[key].dimension] = value
       }
-    })
+    }
 
     return customDimensions
   }
 
   function customDimensionsFromDom () {
+    var mainLang = document.getElementById('content')
+    if (mainLang) {
+      mainLang = mainLang.getAttribute('lang')
+    }
+    var globalBar = document.querySelector('[data-module="global-bar"]') || false
+    if (globalBar) {
+      globalBar = globalBar.style.display !== 'none'
+    }
     return {
       dimension26: GOVUK.PageContent.getNumberOfSections(),
       dimension27: GOVUK.PageContent.getNumberOfLinks(),
-      dimension23: $('main[id="content"]').attr('lang') || 'unknown',
-      dimension38: $('[data-module="global-bar"]').is(':visible') && 'Global Banner viewed'
+      dimension23: mainLang || 'unknown',
+      dimension38: globalBar && 'Global Banner viewed'
     }
   }
 
   function abTestCustomDimensions () {
-    var $abMetas = $('meta[name^="govuk:ab-test"]')
+    var abMetas = document.querySelectorAll("meta[name^='govuk:ab-test']")
     var customDimensions = {}
 
-    $abMetas.each(function () {
-      var $meta = $(this)
-      var dimension = parseInt($meta.data('analytics-dimension'))
-      var testNameAndBucket = $meta.attr('content')
+    for (var i = 0; i < abMetas.length; i++) {
+      var meta = abMetas[i]
+      var dimension = parseInt(meta.getAttribute('data-analytics-dimension'))
+      var testNameAndBucket = meta.getAttribute('content')
 
       if (dimension) {
         customDimensions['dimension' + dimension] = testNameAndBucket
       }
-    })
+    }
 
     return customDimensions
   }

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

@@ -1,5 +1,5 @@
 // https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce
-/* global GOVUK, $, ga */
+/* global GOVUK, ga */
 
 (function () {
   'use strict'
@@ -12,25 +12,25 @@
     this.init = function (element) {
       // Limiting to 100 characters to avoid noise from extra longs search queries
       // and to stop the size of the payload going over 8k limit.
-      var searchQuery = GOVUK.analytics.stripPII(element.attr('data-search-query')).substring(0, 100).toLowerCase()
-      var ecommerceRows = element.find('[data-ecommerce-row]')
-      var startPosition = parseInt(element.data('ecommerce-start-index'), 10)
-      var listTitle = element.data('list-title') || DEFAULT_LIST_TITLE
-      var variant = element.data('ecommerce-variant')
-      var trackClickLabel = element.data('track-click-label') || DEFAULT_TRACK_CLICK_LABEL
-
-      ecommerceRows.each(function (index, ecommerceRow) {
-        var $ecommerceRow = $(ecommerceRow)
-        var listSubheading = $ecommerceRow.data('ecommerce-subheading') || undefined
-        var contentId = $ecommerceRow.attr('data-ecommerce-content-id')
-        var path = $ecommerceRow.attr('data-ecommerce-path')
-
-        var indexOverride = $ecommerceRow.attr('data-ecommerce-index')
-        index = indexOverride ? parseInt(indexOverride, 10) - 1 : index
+      var searchQuery = GOVUK.analytics.stripPII(element.getAttribute('data-search-query')).substring(0, 100).toLowerCase()
+      var ecommerceRows = element.querySelectorAll('[data-ecommerce-row]')
+      var startPosition = parseInt(element.getAttribute('data-ecommerce-start-index'), 10)
+      var listTitle = element.getAttribute('data-list-title') || DEFAULT_LIST_TITLE
+      var variant = element.getAttribute('data-ecommerce-variant') || undefined
+      var trackClickLabel = element.getAttribute('data-track-click-label') || DEFAULT_TRACK_CLICK_LABEL
+
+      for (var i = 0; i < ecommerceRows.length; i++) {
+        var ecommerceRow = ecommerceRows[i]
+        var listSubheading = ecommerceRow.getAttribute('data-ecommerce-subheading') || undefined
+        var contentId = ecommerceRow.getAttribute('data-ecommerce-content-id') || undefined
+        var path = ecommerceRow.getAttribute('data-ecommerce-path')
+
+        var indexOverride = ecommerceRow.getAttribute('data-ecommerce-index')
+        var index = indexOverride ? parseInt(indexOverride, 10) - 1 : i
 
         addImpression(contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant)
-        trackProductOnClick($ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
-      })
+        trackProductOnClick(ecommerceRow, contentId, path, index + startPosition, searchQuery, listTitle, listSubheading, variant, trackClickLabel)
+      }
     }
 
     function constructData (contentId, path, position, listTitle, listSubheading, searchQuery, variant) {
@@ -67,7 +67,7 @@
     }
 
     function trackProductOnClick (row, contentId, path, position, searchQuery, listTitle, listSubheading, variant, trackClickLabel) {
-      row.click(function () {
+      row.addEventListener('click', function () {
         if (contentId || path) {
           var clickData = constructData(contentId, path, position, listTitle, listSubheading, searchQuery, variant)
           ga('ec:addProduct', clickData)
@@ -82,18 +82,18 @@
   }
 
   Ecommerce.ecLoaded = false
-  Ecommerce.start = function (element) {
+  Ecommerce.start = function (elements) {
     if (!window.ga) { return }
-    element = element || $('[data-analytics-ecommerce]')
-    if (element.length > 0) {
+    elements = elements || document.querySelectorAll('[data-analytics-ecommerce]')
+    if (elements.length > 0) {
       if (!Ecommerce.ecLoaded) {
         ga('require', 'ec')
         Ecommerce.ecLoaded = true
       }
-      element.each(function (index) {
+      for (var i = 0; i < elements.length; i++) {
         var ecommerce = new Ecommerce()
-        ecommerce.init($(this))
-      })
+        ecommerce.init(elements[i])
+      }
     }
   }
 

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

@@ -1,13 +1,26 @@
 .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: 80, $weight: bold);
+  font-size: 80px;
+  @include govuk-typography-weight-bold;
+  line-height: 1;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(80px);
+  }
 }
 
 .gem-c-big-number__label {
-  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+  font-size: 16px;
+  @include govuk-typography-weight-bold;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
 
   // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
   // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element

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

@@ -3,6 +3,7 @@
   suggestion_link_text ||= false
   suggestion_link_url ||= false
   suggestion_text ||= nil
+  new_tab ||= false
 
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
@@ -13,17 +14,33 @@
   aria_attributes[:label] = 'Intervention'
 
   local_assigns[:query_string] ||= request.query_string
+  local_assigns[:suggestion_link_text] = suggestion_link_text
+  local_assigns[:suggestion_link_url] = suggestion_link_url
 
   intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(local_assigns)
   dismiss_href = intervention_helper.dismiss_link
+
+  suggestion_tag_options = {
+    class: "govuk-link gem-c-intervention__suggestion-link",
+    href: suggestion_link_url,
+    data: suggestion_data_attributes,
+  }
+
+  if new_tab && (suggestion_link_text && suggestion_link_url)
+    target = "_blank"
+    rel = intervention_helper.security_attr
+
+    suggestion_tag_options.merge!({ target: target, rel: rel })
+
+    suggestion_link_text = intervention_helper.accessible_text
+  end
 %>
-<% if suggestion_text or (suggestion_link_text and suggestion_link_text) %>
+<% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
   <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
-      <% if suggestion_link_text and suggestion_link_url %>
-        <%= tag.a suggestion_link_text, class: "govuk-link gem-c-intervention__suggestion-link", href: suggestion_link_url, data: suggestion_data_attributes %>
-
+      <% if suggestion_link_text && suggestion_link_url %>
+        <%= tag.a suggestion_link_text, suggestion_tag_options %>
       <% end %>
     </p>
 

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

@@ -1,9 +1,12 @@
 <%
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = %w(gem-c-success-alert govuk-notification-banner govuk-notification-banner--success)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 
-<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+<%= tag.div class: classes,
   role: "alert",
   tabindex: "-1",
   aria: {

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

@@ -38,6 +38,17 @@ examples:
       suggestion_link_text: "You can now apply for a permit online."
       suggestion_link_url: "/permit"
 
+  open_suggestion_link_in_new_tab:
+    description: |
+      When sending users to another online task, you don't want to completely hijack
+      their original flow on GOV.UK. Adding the option to open links in a new tab helps to address this.
+      Link text should tell the user that the link opens in a new tab.
+      Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
+    data:
+      suggestion_link_text: "You can now apply for a permit online"
+      suggestion_link_url: "www.google.com/permit"
+      new_tab: true
+
   with_data_attributes:
     description: |
       This example shows the use of `suggestion_data_attributes` and

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

@@ -37,3 +37,9 @@ examples:
         orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
         Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
         Nullam sed neque quis turpis.
+  with_custom_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). The default margins for the component are inherited from the [notification-banner](https://github.com/alphagov/govuk-frontend/blob/main/package/govuk/components/notification-banner/_index.scss) styles defined in the Design System.
+    data:
+      message: Message to alert the user to a successful action goes here
+      margin_bottom: 3

data/config/locales/en.yml

@@ -86,6 +86,8 @@ en:
       news_and_communications: News and communications
       statistics: Statistics
       worldwide: Worldwide
+    intervention:
+      accessible_link_text_suffix: " (opens in a new tab)"
     layout_footer:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated

data/lib/govuk_publishing_components/presenters/intervention_helper.rb

@@ -1,10 +1,17 @@
 module GovukPublishingComponents
   module Presenters
     class InterventionHelper
-      attr_reader :query_string
-
       def initialize(local_assigns)
+        @accessible_text_suffix = I18n.t("components.intervention.accessible_link_text_suffix")
         @query_string = local_assigns[:query_string]
+        @suggestion_link_text = local_assigns[:suggestion_link_text]
+        @suggestion_link_url = local_assigns[:suggestion_link_url]
+      end
+
+      def accessible_text
+        @suggestion_link_text << @accessible_text_suffix unless @suggestion_link_text.include?(@accessible_text_suffix)
+
+        @suggestion_link_text
       end
 
       def dismiss_link
@@ -14,6 +21,17 @@ module GovukPublishingComponents
           "?hide-intervention=true"
         end
       end
+
+      def security_attr
+        rel = "noopener noreferrer"
+        rel << " external" unless @suggestion_link_url.start_with?("/", "https://gov.uk", "https://www.gov.uk")
+
+        rel
+      end
+
+    private
+
+      attr_reader :accessible_text_suffix, :query_string, :suggestion_link_text, :suggestion_link_url
     end
   end
 end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.15.0".freeze
+  VERSION = "27.16.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.15.0
+  version: 27.16.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-30 00:00:00.000000000 Z
+date: 2021-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config