govuk_publishing_components 71.0.0 → 71.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74db3ccfb835e4b5298212da9a2fbcdd6c6df533a174622e62ef8c09f838e163
-  data.tar.gz: 6c8d9fba438b66e7f71191021547d009ffffff268061665ee7b3b7701888aef1
+  metadata.gz: 8e03438d3c963276e86d21ca8e2da336a8cd15220298b2ffbb57cbf53ca86e56
+  data.tar.gz: 8e2052d81d95e829bf5239d2cde0080fc21a62ba7aa2097fe707d131db63ae20
 SHA512:
-  metadata.gz: 6a304e13a7a304c5851f17efc0e6920589401ebe9943f16837b0e548a3ca80d9f4468ddb6b3d5114506ab0cfd1cd90f34e619f01591f31df4420eddb4f6b22ad
-  data.tar.gz: d0814535e7016e51788030010ad2cc7b6a490a138e81ccca427e3dc80cb9e143dfceb3792593571ec8c94da87ad536930b3cb55bf3542d3fdfc45a801b64aa9c
+  metadata.gz: 5278c358eb404521e67e9bb9fb95e8df365f7ae1a7df0ba88a9f43b57a5281d735206b7265c28cab4f06843ba30b57d43800b516ff701ed794c31c411bc36713
+  data.tar.gz: 5aecaf5b41cb5c02b8d85cd194b561e21b8d120adadd4f09dbd1bd6e07fb031d9eecde6d63cf4f3af955f8b0593967ba7b4d4a3d683594b24eb9c41e8161b0e7

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -1,68 +1,139 @@
-/* global XMLHttpRequest */
+/* global fetch, DOMException, AbortController */
 (function (Modules) {
-  function SinglePageNotificationButton ($module) {
-    this.$module = $module
-    this.basePath = this.$module.querySelector('input[name="base_path"]').value
-    this.buttonLocation = this.$module.getAttribute('data-button-location')
-    this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
-
-    this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
-    // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
-    if (this.buttonLocation) this.personalisationEndpoint += '&button_location=' + this.buttonLocation
-  }
+  class SinglePageNotificationButton {
+    constructor ($module) {
+      /** @type {HTMLDivElement} */
+      this.$module = $module
+
+      /** @type {HTMLInputElement | null} */
+      this.basePathInput = this.$module.querySelector('input[name="base_path"]')
+
+      /** @type {HTMLButtonElement | null} */
+      this.button = this.$module.querySelector('.gem-c-button__outline--notification')
+
+      /** @type {string | null} */
+      this.buttonLocation = this.$module.getAttribute('data-button-location')
+
+      /** @type {string | null} */
+      this.customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
+
+      /** @type {string | null} */
+      this.customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
+
+      /** @type {string} */
+      this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
+
+      /** @type {number | null} */
+      this.fetchRequestTimeoutId = null
+    }
 
-  SinglePageNotificationButton.prototype.init = function () {
-    var xhr = new XMLHttpRequest()
-    xhr.open('GET', this.personalisationEndpoint, true)
-    // if XHR to the personalisation endpoint is taking an incredibly long time to complete, we are better off leaving the button in its default unpersonalised state. Content changing before the user's eyes while they are browsing can be jarring and should be avoided.
-    xhr.timeout = 10000
-
-    xhr.ontimeout = function () {
-      this.makeVisible(this.$module)
-    }.bind(this)
-
-    xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4) {
-        if (xhr.status === 200) {
-          var responseText = xhr.responseText
-          // if response text exists and is JSON parse-able, parse the response and update the button html
-          if (responseText && this.responseIsJSON(responseText)) {
-            var active = JSON.parse(responseText).active
-
-            var customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
-            var customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
-            // Only set custom button text if both text items are provided
-            var customText = customSubscribeText && customUnsubscribeText
-
-            // If response returns active, user has subscribed to notifications
-            if (active === true) {
-              if (customText) {
-                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customUnsubscribeText
-              }
-            } else {
-              if (customText) {
-                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customSubscribeText
-              }
-            }
-          }
+    /**
+     * Initialise the single page notification button
+     *
+     */
+    async init () {
+      try {
+        if (this.button === null) {
+          throw new Error('Button required')
         }
+
+        if (this.basePathInput === null) {
+          throw new Error('Base path required')
+        }
+
+        const personalisationEndpoint = this.getPersonalisationEndpoint(this.basePathInput.value, this.buttonLocation)
+        const personalisationData = await this.getPersonalisationData(personalisationEndpoint, 10000)
+        const customButtonText = this.getCustomButtonText(personalisationData.active, this.customSubscribeText, this.customUnsubscribeText)
+
+        if (customButtonText) {
+          this.button.textContent = customButtonText
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
         this.makeVisible(this.$module)
+        clearTimeout(this.fetchRequestTimeoutId)
       }
-    }.bind(this)
-    xhr.send()
-  }
+    }
+
+    /**
+     * Get the personalisation data endpoint
+     *
+     * @param {string} basePath The base path to use
+     * @param {string | null} buttonLocation This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
+     * @returns {string} The personalisation endpoint to use
+     */
+    getPersonalisationEndpoint (basePath, buttonLocation) {
+      const checkEmailSubscriptionEndpoint = '/api/personalisation/check-email-subscription'
 
-  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
-    try {
-      JSON.parse(string)
-    } catch (e) {
-      return false
+      if (buttonLocation) {
+        return `${checkEmailSubscriptionEndpoint}?base_path=${basePath}&button_location=${buttonLocation}`
+      }
+
+      return `${checkEmailSubscriptionEndpoint}?base_path=${basePath}`
     }
-    return true
-  }
 
-  SinglePageNotificationButton.prototype.makeVisible = function (target) {
-    target.classList.add(this.buttonVisibleClass)
+    /**
+     * Fetch data from the personalisation endpoint for checking if an email subscription is active
+     *
+     * @param {string} personalisationEndpoint The personalisation URL to fetch data from
+     * @param {number} timer Set the time in milliseconds when the fetch request should abort
+     * @returns {Promise<EmailSubscriptionData>}
+     * @throws {DOMException} if the request times out
+     * @throws {Error} if the request response is not ok
+     */
+    async getPersonalisationData (personalisationEndpoint, timer) {
+      const abortController = new AbortController()
+      this.fetchRequestTimeoutId = setTimeout(() => abortController.abort(new DOMException('Timeout', 'AbortError')), timer)
+
+      const response = await fetch(personalisationEndpoint, {
+        headers: { Accept: 'application/json' },
+        signal: abortController.signal
+      })
+
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`)
+      }
+
+      return await response.json()
+    }
+
+    /**
+     * Make the single page notification button visible
+     *
+     * @param {HTMLDivElement} module The element to add the visible class to
+     */
+    makeVisible (module) {
+      module.classList.add(this.buttonVisibleClass)
+    }
+
+    /**
+     * Get custom button text depending on whether the email subscription is active
+     *
+     * @param {boolean} activeState If the user has an email subscription to the page
+     * @param {string} customSubscribeText The custom subscribe text used when the activeState is false
+     * @param {string} customUnsubscribeText The custom subscribe text used when the activeState is true
+     * @returns {string | undefined} Returns the custom button text to use or `undefined` if the custom button text cannot be determined
+     */
+    getCustomButtonText (activeState, customSubscribeText, customUnsubscribeText) {
+      if (typeof activeState !== 'boolean') return
+      // Only set custom button text if both text items are provided
+      if (!customSubscribeText || !customUnsubscribeText) {
+        return
+      }
+
+      if (activeState === true) return customUnsubscribeText
+      if (activeState === false) return customSubscribeText
+    }
   }
+
   Modules.SinglePageNotificationButton = SinglePageNotificationButton
 })(window.GOVUK.Modules)
+
+/**
+ * @typedef {object} EmailSubscriptionData
+ * @property {string} base_path the base_path parameter
+ * @property {boolean} active whether the email subscription is active
+ *
+ * @see {@link https://docs.publishing.service.gov.uk/repos/account-api/api.html#get-apipersonalisationcheck-email-subscription}
+ */

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/table-scroll.js

@@ -1,3 +1,4 @@
+/* global ResizeObserver */
 (function (GOVUK) {
   'use strict'
 
@@ -17,15 +18,26 @@
       this.windowResized()
     }, 10)
 
+    // for all browsers
     window.onresize = () => {
-      if (this.windowResizeTimeout) {
-        clearTimeout(this.windowResizeTimeout)
-      }
+      this.detectSizeChange()
+    }
 
-      this.windowResizeTimeout = setTimeout(function () {
-        this.windowResized()
-      }.bind(this), 500)
+    // for Firefox with 'zoom text only' (does not trigger onresize)
+    const resizeObserver = new ResizeObserver(() => {
+      this.detectSizeChange()
+    })
+    resizeObserver.observe(this.tables[0])
+  }
+
+  TableScroll.prototype.detectSizeChange = function () {
+    if (this.windowResizeTimeout) {
+      clearTimeout(this.windowResizeTimeout)
     }
+
+    this.windowResizeTimeout = setTimeout(function () {
+      this.windowResized()
+    }.bind(this), 300)
   }
 
   TableScroll.prototype.windowResized = function () {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -98,6 +98,10 @@
   }
 
   .govspeak-table-scrollbar {
+    position: sticky;
+    background: #FFFFFF;
+    z-index: 1;
+    top: 0;
     overflow-x: scroll;
     overflow-y: hidden;
     height: 20px;

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

@@ -1128,6 +1128,7 @@ examples:
           </tbody>
         </table>
   wide_table:
+    description: Wide tables are enhanced with two features to help users navigate. Left/right indicators are added to show that more content is available to the sides, and a secondary scrollbar is added at the top of the table, that remains at the top of the page as the table is scrolled downwards. This allows users to scroll left/right at any point, which is useful where tables are taller than their browser.
     data:
       block: |
         <table>

data/lib/govuk_publishing_components/presenters/machine_readable/has_part_schema.rb

@@ -1,8 +1,6 @@
 module GovukPublishingComponents
   module Presenters
     class HasPartSchema
-      attr_reader :has_part_url
-
       def initialize(has_part_url)
         @has_part_url = has_part_url
       end
@@ -12,7 +10,7 @@ module GovukPublishingComponents
         {
           "@context" => "http://schema.org",
           "@type" => "CreativeWork",
-          "sameAs" => has_part_url,
+          "sameAs" => @has_part_url,
         }
       end
     end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "71.0.0".freeze
+  VERSION = "71.0.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 71.0.0
+  version: 71.0.1
 platform: ruby
 authors:
 - GOV.UK Dev