Make cookie banner more compatible with ds-cookie-consent

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- When re-displaying the cookie banner, delete the preferences saved cookie rather than setting it to `false` (better compatibility with [ds-cookie-consent](https://github.com/nationalarchives/ds-cookie-consent))
+
 ### Deprecated
 ### Removed
 ### Fixed

src/nationalarchives/components/cookie-banner/cookie-banner.mjs

@@ -33,7 +33,7 @@ export class CookieBanner {
       this.$module.dataset.preferencesKey || "cookie_preferences_set";
 
     if (!this.cookies.completePoliciesOnInit) {
-      this.cookies.set(this.cookiePreferencesSetKey, false);
+      this.cookies.delete(this.cookiePreferencesSetKey);
     }
 
     if (

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

@@ -66,8 +66,7 @@ Accept.play = async ({ canvasElement }) => {
   await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
   await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("marketing")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("false");
+  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");
@@ -119,8 +118,7 @@ Reject.play = async ({ canvasElement }) => {
   await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
   await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("marketing")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("false");
+  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");
@@ -287,8 +285,7 @@ Partial.play = async ({ canvasElement }) => {
   await expect(cookies.isPolicyAccepted("usage")).toEqual(true);
   await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("marketing")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("false");
+  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");
@@ -337,8 +334,7 @@ Malformed.play = async ({ canvasElement }) => {
   await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
   await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("marketing")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("false");
+  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");
@@ -385,8 +381,7 @@ UnexpectedHidden.play = async ({ canvasElement }) => {
   await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
   await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
   await expect(cookies.isPolicyAccepted("marketing")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("false");
+  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
 
   const canvas = within(canvasElement);
   const acceptButton = canvas.getByText("Accept cookies");