@nationalarchives/frontend 0.1.41 → 0.1.42

package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -3,6 +3,7 @@ import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
 import Checkboxes from "../../../components/checkboxes/template.njk";
+import ErrorSummary from "../../../components/error-summary/template.njk";
 import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
 import Gallery from "../../../components/gallery/template.njk";
@@ -1065,6 +1066,21 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
+      <div class="tna-section tna-background-contrast">
+        <div class="tna-container">
+          <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
+            ${SearchField({
+              params: {
+                label: "Catalogue search results",
+                headingLevel: 3,
+                headingSize: "l",
+                id: "search1",
+                name: "q",
+              },
+            })}
+          </div>
+        </div>
+      </div>
       <div class="tna-section">
         <div class="tna-container">
           <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
@@ -1072,13 +1088,16 @@ const Template = ({ theme, accent }) => {
               <h2 class="tna-heading tna-heading--l">
                 Forms
               </h2>
-              ${SearchField({
+              ${ErrorSummary({
                 params: {
-                  label: "Catalogue search results",
-                  headingLevel: 3,
-                  headingSize: "l",
-                  id: "search1",
-                  name: "q",
+                  title: "There is a problem",
+                  headingLevel: 2,
+                  items: [
+                    {
+                      text: "Enter a valid email address",
+                      href: "#email",
+                    },
+                  ],
                 },
               })}
               ${TextInput({
@@ -1099,6 +1118,9 @@ const Template = ({ theme, accent }) => {
                   id: "email",
                   name: "email",
                   autofill: "email",
+                  error: {
+                    text: "Enter a valid email address",
+                  },
                 },
               })}
               ${Select({

package/nationalarchives/stories/utilities/forms/forms.mdx

@@ -43,26 +43,26 @@ import * as SearchFieldStories from "../../../components/search-field/search-fie
   <div class="tna-form__group-contents">
 
     <h4 class="tna-form__heading tna-form__heading--m">
-      <label class="tna-form__label" for="tna-form__ELEMENT-ID">
+      <label class="tna-form__label" for="ELEMENT-ID">
         <!-- Field title -->
       </label>
     </h4>
 
     <!-- Optional hint
-    <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+    <p id="ELEMENT-ID-hint" class="tna-form__hint">
       [Hint text]
     </p>
     -->
 
     <!-- Optional error
-    <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+    <p id="ELEMENT-ID-error" class="tna-form__error-message">
       <span class="tna-!--visually-hidden">Error:</span> [Error text]
     </p>
     -->
 
   </div>
 
-  <!-- Field id="tna-form__ELEMENT-ID"
+  <!-- Field id="ELEMENT-ID"
     If hint:
       aria-describedby="tna-form__ELEMENT-ID-hint"
     If error:
@@ -97,13 +97,13 @@ import * as SearchFieldStories from "../../../components/search-field/search-fie
       </legend>
 
       <!-- Optional hint
-      <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+      <p id="ELEMENT-ID-hint" class="tna-form__hint">
         [Hint text]
       </p>
       -->
 
       <!-- Optional error
-      <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+      <p id="ELEMENT-ID-error" class="tna-form__error-message">
         <span class="tna-!--visually-hidden">Error:</span> [Error text]
       </p>
       -->

package/nationalarchives/tests/analytics.test.js

@@ -0,0 +1,11 @@
+import { describe, expect, test } from "@jest/globals";
+import { GA4 } from "../analytics.mjs";
+
+describe("Analytics", () => {
+  test("Initialisation", async () => {
+    const id = "example-id";
+    const ga4 = new GA4(id);
+
+    expect(ga4.gTagId).toEqual(id);
+  });
+});

package/nationalarchives/tests/cookies.test.js

@@ -347,6 +347,8 @@ describe("No existing cookies", () => {
     const testKey = "foo";
     const testValue = "bar";
 
+    expect(mockCallback.mock.calls).toHaveLength(0);
+
     cookies1.set(testKey, testValue);
     expect(mockCallback.mock.calls).toHaveLength(1);
 
@@ -357,6 +359,25 @@ describe("No existing cookies", () => {
     expect(mockCallback.mock.calls).toHaveLength(3);
   });
 
+  test("One-time events", async () => {
+    const mockCallback = jest.fn();
+
+    const cookies = new Cookies();
+
+    cookies.once("setCookie", mockCallback);
+
+    const testKey = "foo";
+    const testValue = "bar";
+
+    expect(mockCallback.mock.calls).toHaveLength(0);
+
+    cookies.set(testKey, testValue);
+    expect(mockCallback.mock.calls).toHaveLength(1);
+
+    cookies.set(testKey, testValue);
+    expect(mockCallback.mock.calls).toHaveLength(1);
+  });
+
   test("Custom policies", async () => {
     const cookies = new Cookies({ extraPolicies: ["custom"] });
 

package/nationalarchives/tests/uuid.test.js

@@ -1,12 +1,6 @@
 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();

package/nationalarchives/tools/_a11y.scss

@@ -1,6 +1,6 @@
 @use "colour";
 
 @mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
+  @include colour.colour-outline("focus-outline", 5px, solid);
+  outline-offset: 2px;
 }

package/nationalarchives/tools/_colour.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:list";
 @use "../variables/colour";
 @use "../tools/media";
 
@@ -6,27 +7,35 @@
   @return colour.brand-colour($colour, $opacity);
 }
 
-@mixin colour-css-vars() {
+@mixin colour-css-vars($excludes...) {
   @each $name, $value in colour.$colour-palette-default {
-    --#{$name}: #{$value};
+    @if not list.index($excludes, $name) {
+      --#{$name}: #{$value};
+    }
   }
 }
 
-@mixin colour-css-vars-dark() {
+@mixin colour-css-vars-dark($excludes...) {
   @each $name, $value in colour.$colour-palette-dark {
-    --#{$name}: #{$value};
+    @if not list.index($excludes, $name) {
+      --#{$name}: #{$value};
+    }
   }
 }
 
-@mixin colour-css-vars-high-contrast() {
+@mixin colour-css-vars-high-contrast($excludes...) {
   @each $name, $value in colour.$colour-palette-high-contrast {
-    --#{$name}: #{$value};
+    @if not list.index($excludes, $name) {
+      --#{$name}: #{$value};
+    }
   }
 }
 
-@mixin colour-css-vars-high-contrast-dark() {
+@mixin colour-css-vars-high-contrast-dark($excludes...) {
   @each $name, $value in colour.$colour-palette-high-contrast-dark {
-    --#{$name}: #{$value};
+    @if not list.index($excludes, $name) {
+      --#{$name}: #{$value};
+    }
   }
 }
 
@@ -151,14 +160,14 @@
 }
 
 %light {
-  @include colour-css-vars;
+  @include colour-css-vars("form-error");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast;
+    @include colour-css-vars-high-contrast("form-error");
   }
 
   .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast;
+    @include colour-css-vars-high-contrast("form-error");
   }
 }
 
@@ -167,14 +176,14 @@
 }
 
 %dark {
-  @include colour-css-vars-dark;
+  @include colour-css-vars-dark("form-error");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast-dark;
+    @include colour-css-vars-high-contrast-dark("form-error");
   }
 
   .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast-dark;
+    @include colour-css-vars-high-contrast-dark("form-error");
   }
 }
 

package/nationalarchives/utilities/_forms.scss

@@ -4,6 +4,12 @@
 @use "../tools/spacing";
 @use "../tools/typography";
 
+button,
+input,
+select {
+  border-radius: 0.1px;
+}
+
 .tna-form {
   &__group {
     @include spacing.space-above;

package/nationalarchives/utilities/_typography.scss

@@ -95,6 +95,8 @@ p {
 a {
   text-decoration-thickness: 1.5px;
 
+  border-radius: 0.1px;
+
   &,
   &:link {
     @include colour.colour-font("link");

package/nationalarchives/variables/_colour.scss

@@ -116,6 +116,7 @@ $colour-palette-dark: map.merge(
     "input-foreground": brand-colour("white"),
     "input-background": brand-colour("black"),
     "input-border": brand-colour("white"),
+    "form-error": #ff3d3d,
     "button-text": brand-colour("black"),
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
@@ -171,6 +172,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
     "keyline": brand-colour("white"),
+    "form-error": #ff6161,
     "contrast-background": brand-colour("black"),
   )
 ) !default;

package/nationalarchives/variables/_forms.scss

@@ -1,2 +1,2 @@
-$form-field-border-width: 1px !default;
+$form-field-border-width: 2px !default;
 $checkbox-checkmark-width: 0.1875rem !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -10,7 +10,7 @@
     "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",
-    "validatehtml": "node tasks/generate-fixture-html.js && html-validate temp"
+    "validatehtml": "node tasks/generate-fixture-html.js && html-validate fixtures-html"
   },
   "repository": {
     "type": "git",

package/nationalarchives/components/filters/_index.scss

@@ -1 +0,0 @@
-@use "filters";

package/nationalarchives/components/filters/filters.css

@@ -1 +0,0 @@
-.tna-filters__item--selected .tna-filters__link,.tna-filters__item--selected .tna-filters__link:link,.tna-filters__item--selected .tna-filters__link:visited,.tna-filters__item--selected .tna-filters__link:hover{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-filters__link{background-color:#e4e4e4;background-color:var(--background-tint);color:#343338;color:var(--font-base)}.tna-filters__link:hover{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-filters__link:hover{--link: #0062a8;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-filters__link:hover{--link: #0062a8;--link-visited: #4c2c92}.tna-filters{margin-top:2rem}.tna-filters:first-child{margin-top:0}.tna-filters{display:flex;flex-wrap:wrap;gap:.75rem 1rem}.tna-filters__link{padding:.125rem .75rem;text-decoration:none;border-radius:99rem}.tna-filters__link,.tna-filters__link:link,.tna-filters__link:visited{color:#343338;color:var(--font-base)}/*# sourceMappingURL=filters.css.map */

package/nationalarchives/components/filters/filters.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/filters/filters.scss"],"names":[],"mappings":"AA8QA,mNACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAhMA,mCAPA,4BACA,uBAiNF,mBA7ME,yBAEA,wCAPA,cACA,uBAkOF,yBACE,6CACA,qBACA,0BACA,8BACA,iCAGA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CA/OA,mCAPA,cACA,uBA8PE,mCADF,qDAEI,gBACA,yBAIJ,mDACE,gBACA,wBCnVJ,aACE,gBAEA,yBACE,aCLJ,aAGE,aACA,eACA,gBAKA,mBACE,uBAEA,qBAUA,oBANA,sEF4DF,cACA","file":"filters.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above {\n  @extend %space-above;\n}\n\n@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{$amount} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{$amount} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-filters {\n  @include spacing.space-above;\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem 1rem;\n\n  &__item {\n  }\n\n  &__link {\n    padding: 0.125rem 0.75rem;\n\n    text-decoration: none;\n\n    @include colour.tint;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n\n    border-radius: 99rem;\n\n    &:hover {\n      @include colour.accent-light;\n    }\n  }\n\n  &__item--selected &__link {\n    &,\n    &:link,\n    &:visited,\n    &:hover {\n      @include colour.accent;\n    }\n  }\n}\n"]}

package/nationalarchives/components/filters/fixtures.json

@@ -1,51 +0,0 @@
-{
-  "component": "filters",
-  "fixtures": [
-    {
-      "name": "plain filters",
-      "options": {
-        "items": [
-          {
-            "label": "All",
-            "href": "#?filter=all",
-            "selected": true
-          },
-          {
-            "label": "Medieval (974—1485)",
-            "href": "#?filter=alpha"
-          },
-          {
-            "label": "Early Modern (1485—1714)",
-            "href": "#?filter=beta"
-          },
-          {
-            "label": "Georgians (1714—1837)",
-            "href": "#?filter=gamma"
-          },
-          {
-            "label": "Victorians (1837—1901)",
-            "href": "#?filter=delta"
-          },
-          {
-            "label": "Early 20th century (1901—1918)",
-            "href": "#?filter=epsilon"
-          },
-          {
-            "label": "Interwar (1918—1939)",
-            "href": "#?filter=zeta"
-          },
-          {
-            "label": "Second World War (1939—1945)",
-            "href": "#?filter=eta"
-          },
-          {
-            "label": "Postwar (1945—2000)",
-            "href": "#?filter=theta"
-          }
-        ]
-      },
-      "html": "<ul class=\"tna-filters tna-ul tna-ul--plain \"><li class=\"tna-filters__item tna-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-filters__link\">All</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-filters__link\">Medieval (974—1485)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=beta\" class=\"tna-filters__link\">Early Modern (1485—1714)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-filters__link\">Georgians (1714—1837)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=delta\" class=\"tna-filters__link\">Victorians (1837—1901)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=epsilon\" class=\"tna-filters__link\">Early 20th century (1901—1918)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=zeta\" class=\"tna-filters__link\">Interwar (1918—1939)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=eta\" class=\"tna-filters__link\">Second World War (1939—1945)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=theta\" class=\"tna-filters__link\">Postwar (1945—2000)</a></li></ul>",
-      "hidden": false
-    }
-  ]
-}

package/nationalarchives/components/filters/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaFilters(params) %}
-  {%- include "nationalarchives/components/filters/template.njk" -%}
-{% endmacro %}

package/nationalarchives/components/filters/template.njk

@@ -1,8 +0,0 @@
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-filters{% if params.stack %} tna-filters--stacked{% endif %} tna-ul tna-ul--plain {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- for item in params.items -%}
-  <li class="tna-filters__item{%- if item.selected %} tna-filters__item--selected{% endif %}">
-    <a href="{{ item.href }}" {%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-filters__link">{{ item.label }}</a>
-  </li>
-  {%- endfor -%}
-</ul>