@nationalarchives/frontend 0.1.24-prerelease → 0.1.25-prerelease

package/nationalarchives/tests/cookies.test.js

@@ -0,0 +1,427 @@
+import {
+  jest,
+  describe,
+  expect,
+  test,
+  beforeEach,
+  afterEach,
+} from "@jest/globals";
+import { TextEncoder, TextDecoder, store, options } from "util";
+import Cookies from "../lib/cookies.mjs";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+global.store = store;
+global.options = options;
+
+const addCookiesToDocument = (document) => {
+  let _cookies = {};
+  document.__defineGetter__("cookie", () => {
+    return Object.keys(_cookies)
+      .map((key) => `${key}=${_cookies[key]}`)
+      .join("; ");
+  });
+  document.__defineSetter__("cookie", (s) => {
+    const keyValue = s.trim().split("=");
+    const key = keyValue[0].trim();
+    const values = keyValue[1].trim().split(";");
+    const value = values[0];
+    _cookies[key] = value;
+    return `${key}=${value}`;
+  });
+  document.clearAllCookies = () => {
+    _cookies = {};
+  };
+};
+
+addCookiesToDocument(document);
+
+describe("No existing cookies", () => {
+  afterEach(() => {
+    document.clearAllCookies();
+  });
+
+  test("Initialisation", async () => {
+    expect(document.cookie).toEqual("");
+
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("all");
+    expect(cookies).toBeInstanceOf(Cookies);
+
+    expect(document.cookie).not.toEqual("");
+  });
+
+  test("Getting/setting", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("get");
+    expect(cookies).toHaveProperty("set");
+    expect(cookies).toHaveProperty("exists");
+    expect(cookies).toHaveProperty("hasValue");
+
+    expect(Object.keys(cookies.all)).toHaveLength(1);
+
+    const testKey = "foo";
+    const testValue = "bar";
+
+    expect(cookies.all).not.toHaveProperty(testKey);
+    expect(cookies.exists(testKey)).toEqual(false);
+
+    cookies.set(testKey, testValue);
+
+    expect(Object.keys(cookies.all)).toHaveLength(2);
+
+    expect(cookies.all).toHaveProperty(testKey);
+    expect(cookies.all[testKey]).toEqual(testValue);
+    expect(cookies.exists(testKey)).toEqual(true);
+    expect(cookies.get(testKey)).toEqual(testValue);
+    expect(cookies.hasValue(testKey, testValue)).toEqual(true);
+    expect(cookies.hasValue(testKey, "different")).toEqual(false);
+  });
+
+  test("Deletion", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("delete");
+
+    const testKey = "foo";
+    const testValue = "bar";
+
+    cookies.set(testKey, testValue);
+
+    expect(cookies.all).toHaveProperty(testKey);
+    expect(cookies.all[testKey]).toEqual(testValue);
+    expect(cookies.exists(testKey)).toEqual(true);
+    expect(cookies.get(testKey)).toEqual(testValue);
+
+    cookies.delete(testKey);
+
+    // expect(cookies.all).not.toHaveProperty(testKey);
+    // expect(cookies.exists(testKey)).toEqual(false);
+    expect(cookies.get(testKey)).toEqual("");
+  });
+
+  test("Deletion of all", async () => {
+    const cookies = new Cookies();
+
+    const testKeys = ["foo", "bar"];
+    const testValue = "testValue";
+
+    testKeys.forEach((testKey) => cookies.set(testKey, testValue));
+
+    testKeys.forEach((testKey) => {
+      expect(cookies.get(testKey)).toEqual(testValue);
+    });
+
+    cookies.deleteAll();
+
+    testKeys.forEach((testKey) => {
+      expect(cookies.get(testKey)).toEqual("");
+    });
+  });
+
+  test("Initial policies", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("policies");
+
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(JSON.parse(cookies.get("cookies_policy"))).toHaveProperty(
+      "essential",
+    );
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.policies.settings).toEqual(false);
+    expect(JSON.parse(cookies.get("cookies_policy"))).toHaveProperty(
+      "settings",
+    );
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.policies.usage).toEqual(false);
+    expect(JSON.parse(cookies.get("cookies_policy"))).toHaveProperty("usage");
+  });
+
+  test("Accept policy", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("isPolicyAccepted");
+
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.policies.settings).toEqual(false);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.policies.usage).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+
+    cookies.acceptPolicy("settings");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies.usage).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+
+    cookies.acceptPolicy("usage");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies.usage).toEqual(true);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+  });
+
+  test("Accept all policies", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("acceptAllPolicies");
+
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.policies.settings).toEqual(false);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.policies.usage).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+
+    cookies.acceptAllPolicies();
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies.usage).toEqual(true);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+  });
+
+  test("Reject policy", async () => {
+    const cookies = new Cookies();
+
+    cookies.acceptPolicy("settings");
+    cookies.acceptPolicy("usage");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies.usage).toEqual(true);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+
+    cookies.rejectPolicy("settings");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(false);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies.usage).toEqual(true);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+
+    cookies.rejectPolicy("usage");
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(false);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies.usage).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  });
+
+  test("Reject all policies", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("rejectAllPolicies");
+
+    cookies.acceptAllPolicies();
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies.usage).toEqual(true);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+
+    cookies.rejectAllPolicies();
+    expect(cookies.policies.essential).toEqual(true);
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies.settings).toEqual(false);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies.usage).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  });
+
+  test("Protected essential policy", async () => {
+    const cookies = new Cookies();
+
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+
+    cookies.acceptPolicy("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+
+    cookies.rejectPolicy("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+
+    cookies.rejectAllPolicies();
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+  });
+
+  test("Basic events", async () => {
+    const cookies = new Cookies();
+    expect(cookies).toHaveProperty("on");
+
+    const mockCallback = jest.fn();
+    cookies.on("setCookie", mockCallback);
+    const testKey = "foo";
+    const testValue = "bar";
+
+    cookies.set(testKey, testValue);
+
+    expect(mockCallback.mock.calls).toHaveLength(1);
+    expect(mockCallback.mock.calls[0][0]).toStrictEqual({
+      key: testKey,
+      value: testValue,
+      domain: "",
+      path: "/",
+      sameSite: "Lax",
+      secure: true,
+      maxAge: 31536000,
+      cookie: `${testKey}=${testValue}; samesite=Lax; path=/; max-age=31536000; secure`,
+    });
+
+    cookies.set(testKey, testValue);
+
+    expect(mockCallback.mock.calls).toHaveLength(2);
+    expect(mockCallback.mock.calls[1][0]).toStrictEqual({
+      key: testKey,
+      value: testValue,
+      domain: "",
+      path: "/",
+      sameSite: "Lax",
+      secure: true,
+      maxAge: 31536000,
+      cookie: `${testKey}=${testValue}; samesite=Lax; path=/; max-age=31536000; secure`,
+    });
+  });
+
+  test("All events", async () => {
+    const cookies = new Cookies();
+
+    const mockSetCookieCallback = jest.fn();
+    cookies.on("setCookie", mockSetCookieCallback);
+    const mockDeleteCookieCallback = jest.fn();
+    cookies.on("deleteCookie", mockDeleteCookieCallback);
+    const mockDeleteAllCookiesCallback = jest.fn();
+    cookies.on("deleteAllCookies", mockDeleteAllCookiesCallback);
+    const mockAcceptPolicyCallback = jest.fn();
+    cookies.on("acceptPolicy", mockAcceptPolicyCallback);
+    const mockRejectPolicyCallback = jest.fn();
+    cookies.on("rejectPolicy", mockRejectPolicyCallback);
+    const mockAcceptAllPoliciesCallback = jest.fn();
+    cookies.on("acceptAllPolicies", mockAcceptAllPoliciesCallback);
+    const mockRejectAllPoliciesCallback = jest.fn();
+    cookies.on("rejectAllPolicies", mockRejectAllPoliciesCallback);
+    const mockChangePolicyCallback = jest.fn();
+    cookies.on("changePolicy", mockChangePolicyCallback);
+
+    const testKey = "foo";
+    const testValue = "bar";
+    cookies.set(testKey, testValue);
+    cookies.delete(testKey);
+    cookies.acceptPolicy("settings");
+    cookies.rejectPolicy("settings");
+    cookies.setPolicy("settings", true);
+    cookies.acceptAllPolicies();
+    cookies.rejectAllPolicies();
+    cookies.deleteAll();
+
+    expect(mockSetCookieCallback.mock.calls).toHaveLength(9);
+    expect(mockDeleteCookieCallback.mock.calls).toHaveLength(3);
+    expect(mockDeleteAllCookiesCallback.mock.calls).toHaveLength(1);
+    expect(mockAcceptPolicyCallback.mock.calls).toHaveLength(1);
+    expect(mockRejectPolicyCallback.mock.calls).toHaveLength(1);
+    expect(mockAcceptAllPoliciesCallback.mock.calls).toHaveLength(1);
+    expect(mockRejectAllPoliciesCallback.mock.calls).toHaveLength(1);
+    expect(mockChangePolicyCallback.mock.calls).toHaveLength(7);
+  });
+
+  test("Shared events", async () => {
+    const mockCallback = jest.fn();
+
+    const cookies1 = new Cookies();
+
+    const cookies2 = new Cookies();
+    cookies2.on("setCookie", mockCallback);
+
+    const testKey = "foo";
+    const testValue = "bar";
+
+    cookies1.set(testKey, testValue);
+    expect(mockCallback.mock.calls).toHaveLength(1);
+
+    cookies1.set(testKey, testValue);
+    expect(mockCallback.mock.calls).toHaveLength(2);
+
+    cookies2.set(testKey, testValue);
+    expect(mockCallback.mock.calls).toHaveLength(3);
+  });
+});
+
+describe("Existing cookies", () => {
+  beforeEach(() => {
+    document.clearAllCookies();
+    document.cookie =
+      "cookies_policy=%7B%22usage%22%3Afalse%2C%22settings%22%3Atrue%2C%22essential%22%3Atrue%7D";
+  });
+
+  test("Initialisation", async () => {
+    const cookies = new Cookies();
+
+    expect(cookies.all).toHaveProperty("cookies_policy");
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.isPolicyAccepted("settings")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  });
+
+  test("Update policies", async () => {
+    const cookies = new Cookies();
+    cookies.acceptPolicy("usage");
+    cookies.rejectPolicy("settings");
+
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.isPolicyAccepted("usage")).toEqual(true);
+  });
+});
+
+describe("Existing empty cookie policies", () => {
+  beforeEach(() => {
+    document.clearAllCookies();
+    document.cookie = "cookies_policy=%7B%7D";
+  });
+
+  test("Initialisation", async () => {
+    const cookies = new Cookies();
+
+    expect(cookies.all).toHaveProperty("cookies_policy");
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  });
+});
+
+describe("Existing malformed cookie policies", () => {
+  beforeEach(() => {
+    document.clearAllCookies();
+    document.cookie = "cookies_policy=foobar";
+  });
+
+  test("Initialisation", async () => {
+    const cookies = new Cookies();
+
+    expect(cookies.all).toHaveProperty("cookies_policy");
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.isPolicyAccepted("essential")).toEqual(true);
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.isPolicyAccepted("settings")).toEqual(false);
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.isPolicyAccepted("usage")).toEqual(false);
+  });
+});

package/nationalarchives/tests/uuid.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "@jest/globals";
+import { TextEncoder, TextDecoder, store, options } from "util";
+import uuidv4 from "../lib/uuid.mjs";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+global.store = store;
+global.options = options;
+
+describe("UUID", () => {
+  test("Initialisation", async () => {
+    const uuid1 = uuidv4();
+    const uuid2 = uuidv4();
+
+    expect(uuid1).not.toEqual(uuid2);
+  });
+});

package/nationalarchives/tools/_colour.scss

@@ -269,6 +269,7 @@
 
 %tint {
   @include colour-background("background-tint");
+  @include colour-font("font-base");
 }
 
 @mixin tint {
@@ -307,6 +308,7 @@
     )};
 
   @include colour-background("background");
+  @include colour-font("font-base");
 }
 
 @mixin accent-light {

package/nationalarchives/utilities/_index.scss

@@ -5,4 +5,5 @@
 @use "global";
 @use "lists";
 @use "overrides";
+@use "tables";
 @use "typography";

package/nationalarchives/utilities/_lists.scss

@@ -22,6 +22,11 @@
 
     list-style: none;
   }
+
+  .tna-ul,
+  .tna-ol {
+    margin-top: 0;
+  }
 }
 
 .tna-dl {

package/nationalarchives/utilities/_tables.scss

@@ -0,0 +1,86 @@
+@use "sass:math";
+@use "sass:selector";
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+@use "../variables/assets";
+@use "../variables/grid";
+
+.tna-table {
+  width: 100%;
+  @include spacing.space-above;
+
+  border-collapse: collapse;
+
+  text-align: left;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &__caption {
+    text-align: left;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  &__head {
+  }
+
+  &__header {
+  }
+
+  &__body {
+  }
+
+  &__row {
+  }
+
+  &__cell {
+  }
+
+  &__header,
+  &__cell {
+    padding: 0.25rem 1rem;
+
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  &__head &__header {
+    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+  }
+
+  p {
+    + p {
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+.tna-table-wrapper {
+  width: 100%;
+  @include spacing.space-above;
+  padding-left: grid.$gutter-width;
+  padding-right: grid.$gutter-width;
+
+  position: relative;
+  left: -#{grid.$gutter-width};
+
+  overflow: auto;
+
+  @include media.on-tiny {
+    padding-left: grid.$gutter-width-tiny;
+    padding-right: grid.$gutter-width-tiny;
+
+    left: -#{grid.$gutter-width-tiny};
+  }
+}

package/nationalarchives/utilities/_typography.scss

@@ -67,15 +67,9 @@
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol {
-  margin-top: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
 
 strong {
@@ -83,15 +77,11 @@ strong {
 }
 
 p {
-  margin: 2rem 0 0;
+  @include spacing.space-above;
 
   + p {
     margin-top: 1rem;
   }
-
-  &:first-child {
-    margin-top: 0;
-  }
 }
 
 a {
@@ -333,17 +323,12 @@ small {
 %headings-and-heading-groups {
   @include spacing.space-above;
   margin-bottom: 0;
-  padding-top: 1rem;
+  padding: 1rem 0 0;
 
   &:first-child {
     padding-top: 0;
   }
 
-  &:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-
   + p {
     margin-top: 1rem;
   }

package/nationalarchives/variables/_colour.scss

@@ -108,6 +108,7 @@ $colour-palette-dark: map.merge(
     "icon-light": brand-colour("white", 0.35),
     "link": brand-colour("blue"),
     "link-visited": #a8f,
+    "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("white", 0.25),
     "keyline-dark": brand-colour("white"),
     "button-text": brand-colour("black"),

package/package.json

@@ -1,13 +1,13 @@
 {
   "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",
     "build": "storybook build -o storybook --webpack-stats-json",
-    "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
-    "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
-    "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
+    "test": "node tasks/test-fixtures.js && test-storybook --verbose && jest",
+    "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
+    "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "package:scripts": "webpack"
   },
@@ -55,6 +55,7 @@
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.2",
     "axe-playwright": "^1.2.3",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
     "chromatic": "^7.5.0",
     "copy-webpack-plugin": "^11.0.0",
@@ -63,8 +64,7 @@
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.15",
     "glob": "^10.3.10",
-    "jest-image-snapshot": "^6.2.0",
-    "jsdom": "^22.1.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",