Rework Cookie class

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change many instances of Font Awesome icons to a fixed width
 - Adjusted the width of the hero caption
 - Removed margin and padding from all elements by default
+- The standard cookie policies are always `essential`, `usage` and `settings` - other custom policies can be added
 
 ### Deprecated
 ### Removed

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

@@ -142,17 +142,17 @@ CustomPolicies.play = async ({ args, canvasElement }) => {
   const cookies = new Cookies(args.policies.split(","));
 
   await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(null);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(null);
+  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("custom")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");
   await userEvent.click(acceptButton);
 
   await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(null);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(null);
+  await expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+  await expect(cookies.isPolicyAccepted("settings")).toEqual(true);
   await expect(cookies.isPolicyAccepted("custom")).toEqual(true);
 
   deleteAllCookies();

src/nationalarchives/lib/cookies.mjs

@@ -11,24 +11,25 @@ export default class Cookies {
 
   /**
    * Create a cookie handler.
-   * @param {string[]} [policies=usage,settings] - The cookie policies to manage.
+   * @param {string[]} [extraPolicies=[]] - The extra cookie policies to manage.
    * @param {string} [cookiesPolicyKey=cookies_policy] - The name of the cookie.
    */
   constructor(
-    policies = ["usage", "settings"],
+    extraPolicies = [],
     cookiesPolicyKey = "cookies_policy",
   ) {
-    this.cookiesPolicyKey = cookiesPolicyKey;
-    let allPolicies = {};
-    policies.forEach((policy) => {
-      allPolicies[policy.toLowerCase()] = false;
-    });
-    allPolicies = {
-      ...allPolicies,
+    this.savePolicies({
+      ...Object.fromEntries(extraPolicies.map(k => [k.toLowerCase(), false])),
+      usage: false,
+      settings: false,
       ...this.policies,
       essential: true,
-    };
-    this.savePolicies(allPolicies);
+    });
+    if (Cookies._instance && Cookies._instance.cookiesPolicyKey === cookiesPolicyKey) {
+      return Cookies._instance
+    }
+    Cookies._instance = this;
+    this.cookiesPolicyKey = cookiesPolicyKey;
     this.events = {};
   }