@nationalarchives/frontend 0.1.41 → 0.1.43

package/nationalarchives/utilities/_typography.scss

@@ -68,11 +68,6 @@
   }
 }
 
-* {
-  margin: 0;
-  padding: 0;
-}
-
 strong {
   @include typography.main-font-weight-bold;
 }
@@ -80,21 +75,16 @@ strong {
 p {
   @include spacing.space-above;
 
-  + p/*,
-  + .tna-ul,
-  + .tna-ol,
-  + .tna-blockquote*/ {
+  + p {
     margin-top: 1rem;
   }
-
-  // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {
-  //   margin-top: 1rem;
-  // }
 }
 
 a {
   text-decoration-thickness: 1.5px;
 
+  border-radius: 0.1px;
+
   &,
   &:link {
     @include colour.colour-font("link");
@@ -114,12 +104,6 @@ a {
       @include colour.colour-font("link");
     }
   }
-
-  // &[target="_blank"]:not([title*="opens in a new"]) {
-  //   &::after {
-  //     content: "" / " (opens in a new window)"
-  //   }
-  // }
 }
 
 small {
@@ -152,7 +136,7 @@ small {
 %chip-accent {
   @include colour.accent;
 
-  @include colour.colour-border("accent-background", 0.125rem);
+  @include colour.colour-border("accent-background", 2px);
 
   .tna-background-accent & {
     @include colour.contrast;
@@ -379,7 +363,7 @@ small {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("accent-background", 0.375rem, solid, left);
+  @include colour.thick-keyline-accent(left);
 
   &__quote {
     font-weight: 700;

package/nationalarchives/variables/_a11y.scss

@@ -0,0 +1,2 @@
+$focus-outline-width: 5px !default;
+$focus-outline-offset: 2px !default;

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/nationalarchives/variables/_index.scss

@@ -1,3 +1,4 @@
+@use "a11y";
 @use "assets";
 @use "colour";
 @use "features";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "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>