govuk_publishing_components 21.69.0 → 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/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;
   }
 }
 
@@ -193,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/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 %>

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

@@ -1,4 +1,6 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   id ||= "input-#{SecureRandom.hex(4)}"
   value ||= nil
   type ||= "text"
@@ -22,6 +24,7 @@
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_level ||= nil
   prefix ||= nil
   suffix ||= nil
 
@@ -53,10 +56,20 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", {
-      html_for: id,
-      heading_size: heading_size
-    }.merge(label.symbolize_keys) %>
+    <% label_markup = capture do %>
+      <%= render "govuk_publishing_components/components/label", {
+        html_for: id,
+        heading_size: heading_size
+      }.merge(label.symbolize_keys) %>
+    <% end %>
+
+    <% if heading_level %>
+      <%= content_tag(shared_helper.get_heading_level, class: "govuk-label-wrapper") do %>
+        <%= label_markup %>
+      <% end %>
+    <% else %>
+      <%= label_markup %>
+    <% end %>
   <% end %>
 
   <% if hint %>

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

@@ -47,7 +47,6 @@
 
     <% unless omit_header %>
       <%= render "govuk_publishing_components/components/layout_header", {
-        environment: "public",
         search: show_search,
         # layout-header will always have border-bottom, unless the layout is full width
         remove_bottom_border: full_width,

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

@@ -1,6 +1,6 @@
 <%
-  product_name ||= "Publishing"
-  public_environment = environment.eql?("public")
+  product_name ||= nil
+  environment ||= nil
   full_width ||= false
   search ||= false
   search_left ||= false
@@ -8,8 +8,9 @@
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
+
   header_classes = %w(gem-c-layout-header govuk-header)
-  header_classes << "gem-c-layout-header--#{environment}"
+  header_classes << "gem-c-layout-header--#{environment}" if environment
   header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
   header_classes << "gem-c-layout-header--search-left" if search_left
 %>
@@ -19,7 +20,7 @@
     <% if search_left %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
         <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
       </div>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
@@ -33,7 +34,7 @@
     <% else %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
         <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
         <div class="govuk-header__content gem-c-header__content">
           <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>

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

@@ -2,9 +2,11 @@
   description ||= false
   prepend ||= false
   append ||= false
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 %>
 <div class="gem-c-panel govuk-panel govuk-panel--confirmation">
-  <h2 class="govuk-panel__title">
+  <%= content_tag(shared_helper.get_heading_level, class: "govuk-panel__title") do %>
     <% if prepend %>
       <span class="gem-c-panel__prepend">
         <%= prepend %>
@@ -18,7 +20,8 @@
         <%= append %>
       </span>
     <% end %>
-  </h2>
+  <% end %>
+
   <% if description %>
     <div class="govuk-panel__body">
       <%= description %>

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

@@ -203,40 +203,3 @@ examples:
             text: 2. Numbers not parsed
           - href: "#third-thing"
             text: 3. Numbers are just text
-  without_a_title:
-    description: The component can be used to provide a list of links to other pages, in which case the 'Contents' title is inappropriate and can be removed.
-    data:
-      hide_title: true
-      contents:
-        - href: "#first-thing"
-          text: Community best practice
-          items:
-          - href: "#second-thing"
-            text: Guidance and regulation
-          - href: "#third-thing"
-            text: Consultations
-  with_a_custom_title:
-    description: Override the default title of "Contents" with a custom title
-    data:
-      title: "On this page"
-      contents:
-        - href: "#first-thing"
-          text: First thing
-        - href: "#second-thing"
-          text: Second thing
-        - href: "#third-thing"
-          text: Third thing
-  with_a_custom_title_locale:
-    description: |
-      This component is often used on translated pages that don’t have a translation for the title of the contents list. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
-
-      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
-    data:
-      title_lang: "cy"
-      contents:
-        - href: "#first-thing"
-          text: First thing
-        - href: "#second-thing"
-          text: Second thing
-        - href: "#third-thing"
-          text: Third thing

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

@@ -24,12 +24,7 @@ examples:
     data:
       block: |
         <h2>This is a title</h2>
-          <p>This is some body text with <a href=#>a link</a></p>
-  with_content:
-    data:
-      content: |
-        <h2>This is a title</h2>
-        <p>This is some body text with <a href=#>a link</a></p>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
   heading_levels:
     data:
       block: |