@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-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

@@ -32,7 +32,6 @@
 
 @mixin accent-css-vars($colour) {
   @if $colour == "yellow" {
-    --accent: #{brand-colour("yellow")} !important;
     --accent-background: #{brand-colour("yellow")} !important;
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
@@ -53,29 +52,23 @@
     --accent-link-visited: #{brand-colour("white")} !important;
     --accent-keyline: #{brand-colour("white", 0.5)} !important;
     --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
-    @if $colour != "black" {
-      --button-accent-text: #{brand-colour("white")} !important;
-      @if $colour == "pink" {
-        --accent: #{brand-colour("pink")} !important;
-        --accent-background: #{brand-colour("maroon")} !important;
-        --accent-background-light: #{brand-colour("pastel-pink")} !important;
-        --button-accent-background: #{brand-colour("maroon")} !important;
-      } @else if $colour == "orange" {
-        --accent: #{brand-colour("orange")} !important;
-        --accent-background: #{brand-colour("chestnut")} !important;
-        --accent-background-light: #{brand-colour("pastel-orange")} !important;
-        --button-accent-background: #{brand-colour("chestnut")} !important;
-      } @else if $colour == "green" {
-        --accent: #{brand-colour("green")} !important;
-        --accent-background: #{brand-colour("forest")} !important;
-        --accent-background-light: #{brand-colour("pastel-green")} !important;
-        --button-accent-background: #{brand-colour("forest")} !important;
-      } @else if $colour == "blue" {
-        --accent: #{brand-colour("blue")} !important;
-        --accent-background: #{brand-colour("navy")} !important;
-        --accent-background-light: #{brand-colour("pastel-blue")} !important;
-        --button-accent-background: #{brand-colour("navy")} !important;
-      }
+    --button-accent-text: #{brand-colour("white")} !important;
+    @if $colour == "pink" {
+      --accent-background: #{brand-colour("maroon")} !important;
+      --accent-background-light: #{brand-colour("pastel-pink")} !important;
+      --button-accent-background: #{brand-colour("maroon")} !important;
+    } @else if $colour == "orange" {
+      --accent-background: #{brand-colour("chestnut")} !important;
+      --accent-background-light: #{brand-colour("pastel-orange")} !important;
+      --button-accent-background: #{brand-colour("chestnut")} !important;
+    } @else if $colour == "green" {
+      --accent-background: #{brand-colour("forest")} !important;
+      --accent-background-light: #{brand-colour("pastel-green")} !important;
+      --button-accent-background: #{brand-colour("forest")} !important;
+    } @else if $colour == "blue" {
+      --accent-background: #{brand-colour("navy")} !important;
+      --accent-background-light: #{brand-colour("pastel-blue")} !important;
+      --button-accent-background: #{brand-colour("navy")} !important;
     }
   }
 }
@@ -254,7 +247,7 @@
   --font-light: var(--accent-font-light);
   --icon-light: var(--accent-icon-light);
   --link: var(--accent-link);
-  --link-visited: var(--accent-link-visited);
+  --link-visited: var(--accent-link);
   --keyline: var(--accent-keyline);
   --keyline-dark: var(--accent-keyline-dark);
 
@@ -269,6 +262,7 @@
 
 %tint {
   @include colour-background("background-tint");
+  @include colour-font("font-base");
 }
 
 @mixin tint {
@@ -288,8 +282,8 @@
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
   --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
-  --link: #{map.get(colour.$colour-palette-default, "font-dark")};
-  --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  // --link: #{map.get(colour.$colour-palette-default, "link")};
+  // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
   --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
   --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
   --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
@@ -307,6 +301,19 @@
     )};
 
   @include colour-background("background");
+  @include colour-font("font-base");
+
+  .tna-template--system-theme & {
+    @media (prefers-color-scheme: dark) {
+      --link: #{map.get(colour.$colour-palette-default, "link")};
+      --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+    }
+  }
+
+  .tna-template--dark-theme & {
+    --link: #{map.get(colour.$colour-palette-default, "link")};
+    --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  }
 }
 
 @mixin accent-light {
@@ -324,3 +331,19 @@
     }
   }
 }
+
+@mixin on-forced-colours {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin on-high-contrast-and-forced-colours {
+  @include on-forced-colours {
+    @content;
+  }
+
+  @include on-high-contrast {
+    @content;
+  }
+}

package/nationalarchives/tools/_typography.scss

@@ -47,5 +47,4 @@
   @include relative-font-size(14);
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
-  // line-height: 1;
 }

package/nationalarchives/utilities/_a11y.scss

@@ -26,11 +26,15 @@
   }
 }
 
+@mixin focus-outline {
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}
+
 *:focus {
   z-index: 9;
 
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
+  @include focus-outline;
 }
 
 .tna-\!--no-focus-style {

package/nationalarchives/utilities/_colour.scss

@@ -7,8 +7,6 @@
 .tna-template {
   @include colour.colour-background("page-background");
 
-  accent-color: var(--accent);
-
   &--system-theme {
     @include colour.colour-css-vars;
 
@@ -49,10 +47,6 @@
     }
   }
 
-  &--black-accent {
-    @include colour.accent-css-vars("black");
-  }
-
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
   }
@@ -98,3 +92,13 @@
     @include colour.accent-light;
   }
 }
+
+.tna-border {
+  &-keyline {
+    @include colour.colour-border("keyline", 1px);
+  }
+
+  &-keyline-dark {
+    @include colour.colour-border("keyline-dark", 1px);
+  }
+}

package/nationalarchives/utilities/_debug.scss

@@ -18,9 +18,7 @@
       0 0 0 2px #f0a,
       0 0 0.5rem #f0a !important;
 
-    position: relative;
-
-    &::before {
+    &::after {
       width: 20px;
       height: 20px;
 
@@ -45,7 +43,8 @@
       content: "";
     }
 
-    .tna-template--dark-theme & {
+    &:not(.tna-checkboxes__item-label, .tna-radios__item-label) {
+      position: relative;
     }
   }
 }