govuk_publishing_components 27.1.0 → 27.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ea0bb81f01cfea5a7fbefd1883bc66bbcb8a150d18dbce3a19848c9f86752c7
-  data.tar.gz: b2f8ef623497037c2f169c0455831aa7d2c0126f3ece9b05800486a1c283b2c5
+  metadata.gz: c9f597f228597fe521d156fd1e23b79623d4df60196700196c04a9a53740f0e2
+  data.tar.gz: e224f01d29805ef734e0f89cbb6b6184e32c5fd0ed5b93675553af5016ee7d31
 SHA512:
-  metadata.gz: 4aef038f59352ee50197fc9a1e35f95d5ff7c56a3f4182341a866301ea39643d94cf3db806d669135299db0b614cc1d8ddfb28aef8fd11a5d067703f717a4213
-  data.tar.gz: 1234faee1167e829e7e887599f9f47d5bf5c8eb1ee7dd228b3afbd058a17e5f67fed95103b1e511ef7ca76b8ebaec9b253a0b3f8706ddbcc4562a990d2b843c0
+  metadata.gz: 75262a07437872acef9278a928d494bb8a18eab1104a8020dccd9174f3e15f1c7a3396fcd18c7510b342a42efe604f22a48f1cb125f72095668dd7605e1a07a9
+  data.tar.gz: f0303f076da669ee166fab9fc85054d665a3b447b0b4447465fe080492b3460072dc6eaa84e46b4f32f70c72ff616c5229c2373f04a7102795a40d5502ad2d85

data/app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js

@@ -0,0 +1,197 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function AutoScrollTracker ($module) {
+    this.$module = $module
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.trackedNodes = []
+    this.config = {
+      allowHeadingsInside: ['main'],
+      percentages: [20, 40, 60, 80, 100],
+      scrollTimeoutDelay: 20,
+      resizeTimeoutDelay: 100,
+      pageHeightTimeoutDelay: 500
+    }
+  }
+
+  AutoScrollTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
+
+  AutoScrollTracker.prototype.startModule = function () {
+    if (window.GOVUK.analyticsVars.scrollTrackerStarted) {
+      return
+    }
+
+    window.GOVUK.analyticsVars.scrollTrackerStarted = true
+
+    this.trackType = this.$module.getAttribute('data-track-type')
+    if (this.trackType === 'headings') {
+      this.track = new AutoScrollTracker.Heading(this.config)
+    } else {
+      this.track = new AutoScrollTracker.Percentage(this.config)
+    }
+
+    this.getWindowDetails()
+    // if the URL has a hash we want to prevent tracking on initial page load
+    // until the browser jumps down the page, at which point a scroll event
+    // will happen and tracking will continue normally
+    var windowHash = window.location.hash
+    var dontTrackOnLoad = windowHash && document.getElementById(windowHash.substring(1))
+    if (!dontTrackOnLoad) {
+      this.trackVisibleNodes()
+    }
+
+    if (this.trackedNodes.length) {
+      // store event listener functions as variables so they can be removed if needed
+      this.scrollEvent = this.onScroll.bind(this)
+      window.addEventListener('scroll', this.scrollEvent)
+      this.resizeEvent = this.onResize.bind(this)
+      window.addEventListener('resize', this.resizeEvent)
+
+      // check if the page height changes e.g. accordion opened
+      this.interval = window.setInterval(function () {
+        var pageHeight = document.querySelector('body').clientHeight
+        if (pageHeight !== this.pageHeight) {
+          this.pageHeight = pageHeight
+          this.getWindowDetails()
+          this.trackVisibleNodes()
+        }
+      }.bind(this), this.config.pageHeightTimeoutDelay)
+    }
+  }
+
+  AutoScrollTracker.prototype.onScroll = function () {
+    clearTimeout(this.scrollTimeout)
+    this.scrollTimeout = setTimeout(function () {
+      this.trackVisibleNodes()
+    }.bind(this), this.config.scrollTimeoutDelay)
+  }
+
+  AutoScrollTracker.prototype.onResize = function () {
+    clearTimeout(this.resizeTimeout)
+    this.resizeTimeout = setTimeout(function () {
+      this.getWindowDetails()
+      this.trackVisibleNodes()
+    }.bind(this), this.config.resizeTimeoutDelay)
+  }
+
+  AutoScrollTracker.prototype.getWindowDetails = function () {
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.windowHeight = window.innerHeight
+    this.trackedNodes = this.track.getTrackingNodes(this.trackedNodes)
+  }
+
+  AutoScrollTracker.prototype.trackVisibleNodes = function () {
+    for (var i = 0; i < this.trackedNodes.length; i++) {
+      var node = this.trackedNodes[i]
+      if (this.isVisible(node.top, node.bottom) && !node.alreadySeen) {
+        node.alreadySeen = true
+        // we store whether a heading has been tracked or not on the heading
+        // because if headings appear/disapper (e.g. inside an accordion)
+        // the order changes, so we can't refer to the previous trackedNodes
+        // as we do with percentages
+        if (node.node) {
+          node.node.setAttribute('data-autoscrolltracker-already-seen', true)
+        }
+
+        var action = node.eventData.action
+        var label = node.eventData.label
+
+        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+          window.GOVUK.analytics.trackEvent('ScrollTo', action, { label: label, nonInteraction: true })
+        }
+      }
+    }
+  }
+
+  AutoScrollTracker.prototype.isVisible = function (top, bottom) {
+    var scroll = window.scrollY || document.documentElement.scrollTop // IE fallback
+    return scroll <= top && (scroll + this.windowHeight) >= bottom
+  }
+
+  AutoScrollTracker.Heading = function (config) {
+    this.config = config
+  }
+
+  AutoScrollTracker.Heading.prototype.getTrackingNodes = function () {
+    var headingsDetails = []
+    var headingsFound = this.findAllowedHeadings()
+
+    for (var i = 0; i < headingsFound.length; i++) {
+      var heading = headingsFound[i]
+      // only track headings that are visible i.e. not inside display: none
+      if (this.visible(heading)) {
+        var pos = heading.getBoundingClientRect()
+        headingsDetails.push({
+          node: heading,
+          alreadySeen: heading.getAttribute('data-autoscrolltracker-already-seen'),
+          top: pos.top + document.documentElement.scrollTop,
+          bottom: pos.bottom + document.documentElement.scrollTop,
+          eventData: { action: 'Heading', label: heading.textContent.replace(/\s+/g, ' ').trim() }
+        })
+      }
+    }
+    return headingsDetails
+  }
+
+  // check heading is inside allowed elements, generally ignores everything outside of page content
+  AutoScrollTracker.Heading.prototype.findAllowedHeadings = function () {
+    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    var headingsFound = []
+
+    for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
+      var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
+      for (var e = 0; e < insideElements.length; e++) {
+        var found = insideElements[e].querySelectorAll(headings)
+        for (var f = 0; f < found.length; f++) {
+          headingsFound.push(found[f])
+        }
+      }
+    }
+    return headingsFound
+  }
+
+  // this is bit more verbose than checking offsetParent !== null but more reliable for IE10+
+  AutoScrollTracker.Heading.prototype.visible = function (el) {
+    return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+  }
+
+  AutoScrollTracker.Percentage = function (config) {
+    this.config = config
+  }
+
+  AutoScrollTracker.Percentage.prototype.getTrackingNodes = function (trackedNodes) {
+    var body = document.body
+    var html = document.documentElement
+    var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+
+    var percentDetails = []
+
+    for (var i = 0; i < this.config.percentages.length; i++) {
+      var percent = this.config.percentages[i]
+      var pos = (pageHeight / 100) * percent
+      var alreadySeen = false
+      if (trackedNodes.length) {
+        alreadySeen = trackedNodes[i].alreadySeen
+      }
+      percentDetails.push({
+        alreadySeen: alreadySeen,
+        top: pos,
+        bottom: pos,
+        eventData: { action: 'Percent', label: String(percent) }
+      })
+    }
+    return percentDetails
+  }
+
+  Modules.AutoScrollTracker = AutoScrollTracker
+})(window.GOVUK.Modules)

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

@@ -14,6 +14,7 @@
 //= 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
 //= require ./analytics/track-select-change

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

@@ -19,17 +19,17 @@
     tracking_options ||= ({ dimension96: tracking_id }).to_json
   end
 
-  local_assigns[:margin_bottom] ||= 0
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-step-nav-header #{shared_helper.get_margin_bottom}"
+  classes = %w(gem-c-step-nav-header)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <h2 class="<%= classes %>" data-module="gem-track-click">
-    <span class="gem-c-step-nav-header__part-of">Part of</span>
+  <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
+    <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
         class="gem-c-step-nav-header__title govuk-link"
@@ -51,5 +51,5 @@
         <%= title %>
       </span>
     <% end %>
-  </h2>
+  <% end %>
 <% end %>

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

@@ -1,15 +1,14 @@
 name: Inverse header
 description: A wrapper to contain header content in white text
 body: |
-  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overriden where unwanted. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.
+  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings and breadcrumbs but unopinionated about its contents.
 
   If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
 
 accessibility_criteria: |
   The component must:
 
-  * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1
-  against the header colour to meet WCAG AA.
+  * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1 against the header colour to meet WCAG AA.
 
 accessibility_excluded_rules:
   - skip-link # Examples of this component contain breadcrumbs, creating a reference to #content which is part of the layout
@@ -33,7 +32,7 @@ examples:
           </h1>
         </div>
   html_publication_header:
-    description: "The inverse header component is used on HTMl publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
+    description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
     data:
       block: |
         <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,11 +1,14 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
     <span class="govuk-header__logotype gem-c-header__logotype">
+      <!--[if gt IE 8]><!-->
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
         <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
-        <%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %>
-        <image src="<%= asset_path('govuk-logotype-crown.png') %>" xlink:href="" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="30"></image>
       </svg>
+      <!--<![endif]-->
+      <!--[if IE 8]>
+      <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+      <![endif]-->
       <span class="govuk-header__logotype-text">
         GOV.UK
       </span>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.1.0".freeze
+  VERSION = "27.2.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.1.0
+  version: 27.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-17 00:00:00.000000000 Z
+date: 2021-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -462,6 +462,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
+- app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics/auto-track-event.js
 - app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js
 - app/assets/javascripts/govuk_publishing_components/analytics/download-link-tracker.js