@nationalarchives/frontend 0.1.41 → 0.1.43

package/nationalarchives/global-header-package.scss

@@ -1,5 +1,5 @@
 // @use "variables/assets";
-@use "variables/grid" with (
+@use "variables/grid" as gridVars with (
   $largest-container-width: 1270px,
   $gutter-width: 30px,
   $gutter-width-tiny: 15px
@@ -9,7 +9,10 @@
 @use "tools/colour";
 @use "tools/typography";
 
+@use "utilities/colour" as colourUtils;
+
 @use "components/global-header";
+@use "components/grid";
 @use "components/footer";
 
 .tna-template {
@@ -94,8 +97,3 @@
     }
   }
 }
-
-// $fa-font-path: assets.$fa-font-path;
-// @import "lib/font-awesome/fontawesome";
-// @import "lib/font-awesome/solid";
-// @import "lib/font-awesome/brands";

package/nationalarchives/lib/analytics-helpers.mjs

@@ -0,0 +1,68 @@
+const getXPathTo = ($element) => {
+  if ($element.id !== "") {
+    return 'id("' + $element.id + '")';
+  }
+  if ($element === document.body) {
+    return $element.tagName;
+  }
+  let ix = 0;
+  const siblings = $element.parentNode.childNodes;
+  for (let i = 0; i < siblings.length; i++) {
+    const sibling = siblings[i];
+    if (sibling === $element)
+      return (
+        getXPathTo($element.parentNode) +
+        "/" +
+        $element.tagName +
+        "[" +
+        (ix + 1) +
+        "]"
+      );
+    if (sibling.nodeType === 1 && sibling.tagName === $element.tagName) ix++;
+  }
+};
+
+const includesAny = (arr, values) => values.some((v) => arr.includes(v));
+
+const getClosestHeading = ($element) => {
+  let heading = "";
+  let $search = $element;
+  do {
+    while ($search.previousElementSibling) {
+      $search = $search.previousElementSibling;
+      if (
+        ["h1", "h2", "h3", "h4", "h5", "h6"].includes($search.tagName) ||
+        ($search.classList.length &&
+          includesAny(Array.from($search.classList), [
+            "tna-heading-xl",
+            "tna-heading-l",
+            "tna-heading-m",
+            "tna-heading-s",
+          ]))
+      ) {
+        heading = $search.innerText;
+        break;
+      }
+    }
+    $search = $search.parentElement;
+  } while ($search.parentElement && !heading);
+  return heading;
+};
+
+const valueGetters = {
+  text: ($el) => $el.innerText,
+  html: ($el) => $el.innerHTML,
+  value: ($el) => $el.value,
+  index: ($el, $scope, event, index) => index,
+  checked: ($el) => ($el.checked ? "checked" : "unchecked"),
+  expanded: ($el) => {
+    const expanded = $el.getAttribute("aria-expanded");
+    if (expanded === null) {
+      return null;
+    }
+    return expanded.toString() === "true" ? "opened" : "closed";
+  },
+  closestHeading: ($el) => getClosestHeading($el),
+};
+
+export { getXPathTo, getClosestHeading, valueGetters };

package/nationalarchives/lib/cookies.mjs

@@ -1,5 +1,6 @@
 export class CookieEventHandler {
   events = {};
+  oneTimeEvents = {};
 
   constructor() {
     if (CookieEventHandler._instance) {
@@ -10,23 +11,37 @@ export class CookieEventHandler {
 
   /**
    * Add an event listener.
-   * @param {string} event - The event to add a listener for.
-   * @param {function} callback - The callback function to call when the event is triggered.
+   * @param {String} event - The event to add a listener for.
+   * @param {Function} callback - The callback function to call when the event is triggered.
    */
   on(event, callback) {
-    if (!Object.prototype.hasOwnProperty.call(this.events, event)) {
+    if (!Object.hasOwn(this.events, event)) {
       this.events[event] = [];
     }
     this.events[event] = [...this.events[event], callback];
   }
 
+  once(event, callback) {
+    if (!Object.hasOwn(this.oneTimeEvents, event)) {
+      this.oneTimeEvents[event] = [];
+    }
+    this.oneTimeEvents[event] = [...this.oneTimeEvents[event], callback];
+  }
+
   /** @protected */
   trigger(event, data = {}) {
-    if (Object.prototype.hasOwnProperty.call(this.events, event)) {
+    if (Object.hasOwn(this.events, event)) {
       this.events[event].forEach((eventToTrigger) =>
         eventToTrigger.call(this, data),
       );
     }
+    if (Object.hasOwn(this.oneTimeEvents, event)) {
+      for (let i = this.oneTimeEvents[event].length - 1; i >= 0; i--) {
+        const eventToTrigger = this.oneTimeEvents[event][i];
+        eventToTrigger.call(this, data);
+        this.oneTimeEvents[event].splice(i, 1);
+      }
+    }
   }
 }
 
@@ -52,11 +67,11 @@ export default class Cookies {
 
   /**
    * Create a cookie handler.
-   * @param {string} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings and usage.
-   * @param {string} [options.domain=""] - The domain to register the cookie with.
-   * @param {string} [options.path=""] - The domain to register the cookie with.
-   * @param {string} [options.secure=true] - Only set cookie in HTTPS environments.
-   * @param {string} [options.policiesKey=cookies_policy] - The name of the cookie.
+   * @param {String} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings and usage.
+   * @param {String} [options.domain=""] - The domain to register the cookie with.
+   * @param {String} [options.path=""] - The domain to register the cookie with.
+   * @param {String} [options.secure=true] - Only set cookie in HTTPS environments.
+   * @param {String} [options.policiesKey=cookies_policy] - The name of the cookie.
    */
   constructor(options = {}) {
     const {
@@ -112,17 +127,17 @@ export default class Cookies {
 
   /**
    * Check to see whether a cookie exists or not.
-   * @param {string} key - The cookie name.
-   * @returns {boolean}
+   * @param {String} key - The cookie name.
+   * @returns {Boolean}
    */
   exists(key) {
-    return Object.prototype.hasOwnProperty.call(this.all, key);
+    return Object.hasOwn(this.all, key);
   }
 
   /**
    * Check to see whether a cookie has a particular value.
-   * @param {string} key - The cookie name.
-   * @param {string|number|boolean} value - The value to check against.
+   * @param {String} key - The cookie name.
+   * @param {String|Number|Boolean} value - The value to check against.
    * @returns
    */
   hasValue(key, value) {
@@ -131,8 +146,8 @@ export default class Cookies {
 
   /**
    * Get a cookie.
-   * @param {string} key - The cookie name.
-   * @returns {string|number|boolean}
+   * @param {String} key - The cookie name.
+   * @returns {String|Number|Boolean}
    */
   get(key) {
     return this.exists(key) ? decodeURIComponent(this.all[key]) : null;
@@ -140,15 +155,15 @@ export default class Cookies {
 
   /**
    * Set a cookie.
-   * @param {string} key - The cookie name.
-   * @param {string|number|boolean} value - The cookie value.
+   * @param {String} key - The cookie name.
+   * @param {String|Number|Boolean} value - The cookie value.
    * @param {Object} options
-   * @param {number} [options.maxAge=31536000] - The maximum age of the cookie in seconds.
-   * @param {string} [options.path=/] - The path to register the cookie for.
-   * @param {string} [options.sameSite=Lax] - The sameSite attribute.
-   * @param {string} [options.domain=this.domain] - The domain to register the cookie with.
-   * @param {string} [options.path=this.path] - The path to register the cookie with.
-   * @param {string} [options.secure=this.secure] - Only set cookie in HTTPS environments.
+   * @param {Number} [options.maxAge=31536000] - The maximum age of the cookie in seconds.
+   * @param {String} [options.path=/] - The path to register the cookie for.
+   * @param {String} [options.sameSite=Lax] - The sameSite attribute.
+   * @param {String} [options.domain=this.domain] - The domain to register the cookie with.
+   * @param {String} [options.path=this.path] - The path to register the cookie with.
+   * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.
    */
   set(key, value, options = {}) {
     const {
@@ -181,8 +196,8 @@ export default class Cookies {
 
   /**
    * Delete a cookie.
-   * @param {string} key - The cookie name.
-   * @param {string} [path=/] - The path to the cookie is registered on.
+   * @param {String} key - The cookie name.
+   * @param {String} [path=/] - The path to the cookie is registered on.
    */
   delete(key, path = "/", domain = null) {
     const options = { maxAge: -1, path, domain: domain || undefined };
@@ -202,7 +217,7 @@ export default class Cookies {
 
   /**
    * Accept a policy.
-   * @param {string} policy - The name of the policy.
+   * @param {String} policy - The name of the policy.
    */
   acceptPolicy(policy) {
     this.setPolicy(policy, true);
@@ -212,7 +227,7 @@ export default class Cookies {
 
   /**
    * Reject a policy.
-   * @param {string} policy - The name of the policy.
+   * @param {String} policy - The name of the policy.
    */
   rejectPolicy(policy) {
     this.setPolicy(policy, false);
@@ -222,8 +237,8 @@ export default class Cookies {
 
   /**
    * Set a policy.
-   * @param {string} policy - The name of the policy.
-   * @param {boolean} accepted - Whether the policy is accepted or not.
+   * @param {String} policy - The name of the policy.
+   * @param {Boolean} accepted - Whether the policy is accepted or not.
    */
   setPolicy(policy, accepted) {
     if (policy === "essential") {
@@ -274,21 +289,30 @@ export default class Cookies {
 
   /**
    * Get the acceptance status of a policy.
-   * @param {string} policy - The name of the policy.
-   * @returns {boolean}
+   * @param {String} policy - The name of the policy.
+   * @returns {Boolean}
    */
   isPolicyAccepted(policy) {
-    return Object.prototype.hasOwnProperty.call(this.policies, policy)
+    return Object.hasOwn(this.policies, policy)
       ? this.policies[policy] === true
       : null;
   }
 
   /**
    * Add an event listener.
-   * @param {string} event - The event to add a listener for.
-   * @param {function} callback - The callback function to call when the event is triggered.
+   * @param {String} event - The event to add a listener for.
+   * @param {Function} callback - The callback function to call when the event is triggered.
    */
   on(event, callback) {
     this.events.on(event, callback);
   }
+
+  /**
+   * Add a one-time event listener.
+   * @param {String} event - The event to add a listener for.
+   * @param {Function} callback - The callback function to call when the event is triggered.
+   */
+  once(event, callback) {
+    this.events.once(event, callback);
+  }
 }