Merge branch 'main' of github.com:nationalarchives/tna-frontend into …

…feature/search-components

.github/workflows/npm-publish.yml

@@ -1,4 +1,4 @@
-name: Publish new release
+name: Publish release
 
 on:
   release:
@@ -99,14 +99,11 @@ jobs:
       - uses: actions/checkout@v3
       - name: Get release notes
         id: get-release-notes
-        run: |
-          RELEASE_NOTES=$(./tasks/get-release-notes.sh "${{ needs.check.outputs.version }}")
-          echo $RELEASE_NOTES
-          echo "RELEASE_NOTES=$RELEASE_NOTES" >> "$GITHUB_OUTPUT"
+        run: ./tasks/get-release-notes.sh "${{ needs.check.outputs.version }}" > RELEASE_NOTES.txt
       - uses: rtCamp/action-slack-notify@v2
         env:
           SLACK_TITLE: "`v${{ needs.check.outputs.version }}` of `tna-frontend` has just been published"
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
           SLACK_ICON: "https://raw.githubusercontent.com/nationalarchives/tna-frontend/main/src/nationalarchives/assets/images/apple-touch-icon.png"
           MSG_MINIMAL: true
-          SLACK_MESSAGE: ${{ env.RELEASE_NOTES }}
+          SLACK_MESSAGE: $(cat RELEASE_NOTES.txt)

.gitignore

@@ -8,4 +8,5 @@ storybook
 *.tgz
 build-storybook.log
 chromatic.config.json
-chromatic.log
+chromatic.log
+RELEASE_NOTES.txt

.storybook/preview.js

@@ -42,7 +42,6 @@ export const decorators = [
     };
     const cookies = new Cookies();
     cookies.deleteAll();
-    cookies.destroy();
     return Story();
   },
 ];

CHANGELOG.md

@@ -5,7 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.24-prerelease...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.25-prerelease...HEAD)
+
+### Added
+### Changed
+### Deprecated
+### Removed
+### Fixed
+### Security
+
+## [0.1.25-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.24-prerelease...v0.1.25-prerelease) - 2023-11-16
 
 ### Added
 
@@ -24,7 +33,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The standard cookie policies are always `essential`, `usage` and `settings` - other custom policies can be added
 - Focus outline on dark themes has changed from blue to orange to avoid colour conflict with links
 
-### Deprecated
 ### Removed
 
 - Removed CSS to counter conflicting GOV.UK paragraph styling
@@ -41,8 +49,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Accepting or declining individual cookie policies now works
 - Removed extra space from nested links
 
-### Security
-
 ## [0.1.24-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.23-prerelease...v0.1.24-prerelease) - 2023-11-06
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.24-prerelease",
+  "version": "0.1.25-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

src/nationalarchives/components/cookie-banner/cookie-banner.stories.js

@@ -174,7 +174,6 @@ Existing.decorators = [
   (Story) => {
     const cookies = new Cookies();
     cookies.set("cookie_preferences_set", true);
-    cookies.destroy();
     return Story();
   },
 ];

src/nationalarchives/lib/cookies.mjs

@@ -1,3 +1,35 @@
+export class CookieEventHandler {
+  events = {};
+
+  constructor() {
+    if (CookieEventHandler._instance) {
+      return CookieEventHandler._instance;
+    }
+    CookieEventHandler._instance = this;
+  }
+
+  /**
+   * 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.
+   */
+  on(event, callback) {
+    if (!Object.prototype.hasOwnProperty.call(this.events, event)) {
+      this.events[event] = [];
+    }
+    this.events[event] = [...this.events[event], callback];
+  }
+
+  /** @protected */
+  trigger(event, data = {}) {
+    if (Object.prototype.hasOwnProperty.call(this.events, event)) {
+      this.events[event].forEach((eventToTrigger) =>
+        eventToTrigger.call(this, data),
+      );
+    }
+  }
+}
+
 /**
  * Class to handle cookies.
  * @class Cookies
@@ -12,8 +44,6 @@ export default class Cookies {
   /** @protected */
   secure = true;
   /** @protected */
-  events = {};
-  /** @protected */
   policiesKey = "";
 
   /**
@@ -29,15 +59,11 @@ export default class Cookies {
       secure = true,
       policiesKey = "cookies_policy",
     } = options;
-    if (Cookies._instance && Cookies._instance.policiesKey === policiesKey) {
-      return Cookies._instance;
-    }
-    Cookies._instance = this;
     this.extraPolicies = extraPolicies;
     this.domain = domain;
     this.secure = secure;
-    this.events = {};
     this.policiesKey = policiesKey;
+    this.events = new CookieEventHandler();
     this.init();
   }
 
@@ -54,15 +80,10 @@ export default class Cookies {
     });
   }
 
-  destroy() {
-    Cookies._instance = null;
-    this.trigger("destroy");
-  }
-
   get all() {
     const deserialised = {};
     document.cookie
-      .split(";")
+      .split("; ")
       .filter((x) => x)
       .forEach((cookie) => {
         const parts = cookie.trim().split("=");
@@ -74,7 +95,11 @@ export default class Cookies {
   }
 
   get policies() {
-    return JSON.parse(this.get(this.policiesKey) || "{}");
+    try {
+      return JSON.parse(this.get(this.policiesKey) || "{}");
+    } catch (e) {
+      return {};
+    }
   }
 
   /**
@@ -128,12 +153,12 @@ export default class Cookies {
       return;
     }
     const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${
-      domain ? ` domain=${domain};` : ""
+      domain ? ` domain=${domain}; ` : ""
     } samesite=${sameSite}; path=${path}; max-age=${maxAge}${
       secure ? "; secure" : ""
     }`;
     document.cookie = cookie;
-    this.trigger("setCookie", {
+    this.events.trigger("setCookie", {
       key,
       value,
       maxAge,
@@ -153,17 +178,17 @@ export default class Cookies {
   delete(key, path = "/", domain = null) {
     const options = { maxAge: -1, path, domain: domain || undefined };
     this.set(key, "", options);
-    this.trigger("deleteCookie", { key, ...options });
+    this.events.trigger("deleteCookie", { key, ...options });
   }
 
   /**
    * Delete all cookies.
    */
   deleteAll(path = "/", domain = null) {
-    Object.keys(this.all).forEach((cookie) =>
-      this.delete(cookie, path, domain),
-    );
-    this.trigger("deleteAllCookies", { path, domain });
+    Object.keys(this.all).forEach((cookie) => {
+      this.delete(cookie, path, domain);
+    });
+    this.events.trigger("deleteAllCookies", { path, domain });
   }
 
   /**
@@ -172,8 +197,8 @@ export default class Cookies {
    */
   acceptPolicy(policy) {
     this.setPolicy(policy, true);
-    this.trigger("acceptPolicy", policy);
-    this.trigger("changePolicy", { [policy]: true });
+    this.events.trigger("acceptPolicy", policy);
+    this.events.trigger("changePolicy", { [policy]: true });
   }
 
   /**
@@ -182,8 +207,8 @@ export default class Cookies {
    */
   rejectPolicy(policy) {
     this.setPolicy(policy, false);
-    this.trigger("rejectPolicy", policy);
-    this.trigger("changePolicy", { [policy]: false });
+    this.events.trigger("rejectPolicy", policy);
+    this.events.trigger("changePolicy", { [policy]: false });
   }
 
   /**
@@ -200,7 +225,7 @@ export default class Cookies {
       [policy]: accepted,
       essential: true,
     });
-    this.trigger("changePolicy", { [policy]: accepted });
+    this.events.trigger("changePolicy", { [policy]: accepted });
   }
 
   /**
@@ -211,8 +236,8 @@ export default class Cookies {
       Object.keys(this.policies).map((k) => [k.toLowerCase(), true]),
     );
     this.savePolicies(allPolicies);
-    this.trigger("acceptAllPolicies");
-    this.trigger("changePolicy", allPolicies);
+    this.events.trigger("acceptAllPolicies");
+    this.events.trigger("changePolicy", allPolicies);
   }
 
   /**
@@ -226,8 +251,8 @@ export default class Cookies {
       essential: true,
     };
     this.savePolicies(allPolicies);
-    this.trigger("rejectAllPolicies");
-    this.trigger("changePolicy", allPolicies);
+    this.events.trigger("rejectAllPolicies");
+    this.events.trigger("changePolicy", allPolicies);
   }
 
   /**
@@ -250,23 +275,11 @@ export default class Cookies {
   }
 
   /**
-   * Accept a policy.
+   * 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.
    */
   on(event, callback) {
-    if (!Object.prototype.hasOwnProperty.call(this.events, event)) {
-      this.events[event] = [];
-    }
-    this.events[event] = [...this.events[event], callback];
-  }
-
-  /** @protected */
-  trigger(event, data = {}) {
-    if (Object.prototype.hasOwnProperty.call(this.events, event)) {
-      this.events[event].forEach((eventToTrigger) =>
-        eventToTrigger.call(this, data),
-      );
-    }
+    this.events.on(event, callback);
   }
 }