@nationalarchives/frontend 0.1.52 → 0.1.54

package/nationalarchives/components/footer/footer.mjs

@@ -0,0 +1,87 @@
+import Cookies from "../../lib/cookies.mjs";
+
+export class Footer {
+  constructor($module) {
+    this.$module = $module;
+    this.$themeSelector =
+      $module && $module.querySelector(".tna-footer__theme-selector");
+    this.$tnaTemplate = document.querySelector(".tna-template");
+
+    if (!this.$module || !this.$themeSelector || !this.$tnaTemplate) {
+      return;
+    }
+
+    this.$themeSelectorButtons = this.$themeSelector.querySelectorAll(
+      "button.tna-footer__theme-selector-button[value]",
+    );
+
+    Array.from(this.$themeSelectorButtons).forEach(($themeSelectorButton) => {
+      $themeSelectorButton.addEventListener("click", (e) => {
+        const $button = e.target;
+        this.setTheme($button.value);
+        this.selectThemeSelectorButton($button);
+      });
+    });
+
+    this.cookies = new Cookies();
+    if (this.cookies.isPolicyAccepted("settings")) {
+      this.showThemeSelector();
+    }
+    this.cookies.on("changePolicy", (data) => {
+      if (Object.hasOwn(data, "settings")) {
+        if (data.settings === true) {
+          this.showThemeSelector();
+        } else {
+          this.cookies.delete("theme");
+          this.hideThemeSelector();
+        }
+      }
+    });
+  }
+
+  showThemeSelector() {
+    this.$themeSelector.removeAttribute("hidden");
+    if (this.cookies.exists("theme")) {
+      const $currentThemeButton = Array.from(this.$themeSelectorButtons).find(
+        ($button) => $button.value === this.cookies.get("theme"),
+      );
+      if ($currentThemeButton) {
+        this.selectThemeSelectorButton($currentThemeButton);
+      }
+    }
+  }
+
+  hideThemeSelector() {
+    this.$themeSelector.setAttribute("hidden", true);
+  }
+
+  setTheme(theme) {
+    if (theme === "light") {
+      this.$tnaTemplate.classList.remove(
+        "tna-template--system-theme",
+        "tna-template--dark-theme",
+      );
+    } else if (theme === "dark") {
+      this.$tnaTemplate.classList.remove("tna-template--system-theme");
+      this.$tnaTemplate.classList.add(`tna-template--dark-theme`);
+    } else if (theme === "system") {
+      this.$tnaTemplate.classList.remove("tna-template--dark-theme");
+      this.$tnaTemplate.classList.add(`tna-template--system-theme`);
+    } else {
+      return;
+    }
+    this.cookies.set("theme", theme);
+  }
+
+  selectThemeSelectorButton($selectedButton) {
+    Array.from(this.$themeSelectorButtons).forEach(($button) => {
+      if ($button.value === $selectedButton.value) {
+        $button.classList.remove("tna-button--plain");
+        $button.setAttribute("aria-current", true);
+      } else {
+        $button.classList.add("tna-button--plain");
+        $button.removeAttribute("aria-current");
+      }
+    });
+  }
+}

package/nationalarchives/components/footer/footer.scss

@@ -4,10 +4,25 @@
 @use "../../tools/typography";
 
 .tna-footer {
-  @include colour.contrast;
+  &__inner {
+    @include colour.contrast;
 
-  padding-top: spacing.space(1);
-  padding-bottom: spacing.space(3);
+    padding-top: spacing.space(1);
+    padding-bottom: spacing.space(3);
+  }
+
+  &__theme-selector {
+    .tna-button-group {
+      justify-content: flex-end;
+    }
+
+    .tna-button {
+      @include typography.main-font-weight-bold;
+    }
+  }
+
+  &__theme-selector-button {
+  }
 
   .tna-logo {
     margin-top: spacing.space(2);
@@ -43,8 +58,8 @@
     &-items {
       display: flex;
       flex-wrap: wrap;
-      gap: spacing.space(0.3125);
       align-items: flex-start;
+      gap: spacing.space(0.3125);
     }
 
     &-item {
@@ -55,9 +70,10 @@
 
         display: block;
 
-        text-align: center;
         line-height: 1;
 
+        text-align: center;
+
         border: 0 transparent solid;
         border-width: 4px 0;
 
@@ -192,12 +208,16 @@
   }
 
   @include media.on-mobile {
-    padding-top: 0;
-    padding-bottom: spacing.space(2);
+    &__inner {
+      padding-top: 0;
+      padding-bottom: spacing.space(2);
+    }
   }
 
   @include colour.on-high-contrast-and-forced-colours {
-    @include colour.colour-border("keyline", 1px, solid, top);
+    &__inner {
+      @include colour.colour-border("keyline", 1px, solid, top);
+    }
 
     &__navigation {
       &-block {

package/nationalarchives/components/footer/footer.stories.js

@@ -1,5 +1,7 @@
 import Footer from "./template.njk";
 import macroOptions from "./macro-options.json";
+import { within, expect } from "@storybook/test";
+import Cookies from "../../lib/cookies.mjs";
 
 const argTypes = {
   meta: { control: "text" },
@@ -7,6 +9,11 @@ const argTypes = {
   navigation: { control: "object" },
   showNewsletter: { control: "boolean" },
   legal: { control: "object" },
+  themeSelector: { control: "boolean" },
+  currentTheme: {
+    control: "inline-radio",
+    options: ["system", "light", "dark", ""],
+  },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -28,6 +35,8 @@ const Template = ({
   navigation,
   showNewsletter,
   legal,
+  themeSelector,
+  currentTheme,
   classes,
   attributes,
 }) =>
@@ -38,6 +47,8 @@ const Template = ({
       navigation,
       showNewsletter,
       legal,
+      themeSelector,
+      currentTheme,
       classes,
       attributes,
     },
@@ -173,10 +184,58 @@ Standard.args = {
       href: "#/cookies",
     },
   ],
-  classes: "tna-footer--demo",
 };
 
 export const Minimal = Template.bind({});
-Minimal.args = {
-  classes: "tna-footer--demo",
+Minimal.args = {};
+
+export const ThemeSelector = Template.bind({});
+ThemeSelector.args = {
+  themeSelector: true,
+  currentTheme: "",
+};
+ThemeSelector.decorators = [
+  (Story) => {
+    const cookies = new Cookies({ newInstance: true });
+    cookies.set("cookie_preferences_set", true);
+    cookies.acceptPolicy("settings");
+    return Story();
+  },
+];
+ThemeSelector.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const systemLightButton = canvas.getByText("System theme");
+  const themeLightButton = canvas.getByText("Light theme");
+  const darkLightButton = canvas.getByText("Dark theme");
+
+  await expect(systemLightButton).toBeVisible();
+  await expect(themeLightButton).toBeVisible();
+  await expect(darkLightButton).toBeVisible();
+};
+
+export const ThemeSelectorWithoutCookies = Template.bind({});
+ThemeSelectorWithoutCookies.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+ThemeSelectorWithoutCookies.args = {
+  themeSelector: true,
+  currentTheme: "",
+};
+ThemeSelectorWithoutCookies.decorators = [
+  (Story) => {
+    const cookies = new Cookies({ newInstance: true });
+    cookies.set("cookie_preferences_set", true);
+    cookies.rejectPolicy("settings");
+    return Story();
+  },
+];
+ThemeSelectorWithoutCookies.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const systemLightButton = canvas.getByText("System theme");
+  const themeLightButton = canvas.getByText("Light theme");
+  const darkLightButton = canvas.getByText("Dark theme");
+
+  await expect(systemLightButton).not.toBeVisible();
+  await expect(themeLightButton).not.toBeVisible();
+  await expect(darkLightButton).not.toBeVisible();
 };

package/nationalarchives/components/footer/template.njk

@@ -1,142 +1,190 @@
 {% from "nationalarchives/components/button/macro.njk" import tnaButton %}
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<footer class="tna-footer {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <div class="tna-container">
-    <div class="tna-column tna-column--flex-1 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-1">
-      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
-        <title>The National Archives</title>
-        <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
-        <g class="tna-logo__foreground" fill="currentColor">
-          <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
-          <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
-        </g>
-      </svg>
-      <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
-      <address class="tna-footer__address">
-        Kew, Richmond<br>
-        TW9 4DU
-      </address>
-      {%- if params.meta %}
-      <div class="tna-footer__meta">
-        {{ params.meta | safe }}
+<footer class="tna-footer {{ containerClasses | join(' ') }}" data-module="tna-footer" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- if params.themeSelector %}
+  <section class="tna-footer__theme-selector tna-background-tint" hidden>
+    <div class="tna-container tna-!--padding-vertical-xs">
+      <div class="tna-column tna-column--flex-1">
+        <h2 class="tna-visually-hidden">Change the site theme</h2>
       </div>
-      {%- endif %}
-      {%- if params.social %}
-        <h3 class="tna-!--visually-hidden">
-          Follow us
-        </h3>
-        <nav class="tna-footer__social" aria-label="Social">
-          <ul class="tna-ul tna-ul--plain tna-footer__social-items">
-          {%- for item in params.social %}
-            <li class="tna-footer__social-item">
-              <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}">
-                {%- if item.icon == 'twitter' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
-                {%- elif item.icon == 'youtube' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
-                {%- elif item.icon == 'facebook' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
-                {%- elif item.icon == 'flickr' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"/></svg>
-                {%- elif item.icon == 'instagram' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
-                {%- elif item.icon == 'rss' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
-                {%- elif item.icon == 'github' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-                {%- elif item.icon == 'tiktok' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
-                {%- endif %}
-                <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
-                  {{ item.title }}
-                </span>
+      <div class="tna-column tna-column--full-small tna-column--full-tiny">
+        <div class="tna-button-group tna-button-group--small">
+          {{ tnaButton({
+            'text': 'System theme',
+            'icon': 'circle-half-stroke',
+            'buttonElement': true,
+            'classes': 'tna-footer__theme-selector-button',
+            'plain': params.currentTheme != 'system',
+            'attributes': {
+              'value': 'system',
+              'aria-current': params.currentTheme == 'system'
+            }
+          }) }}
+          {{ tnaButton({
+            'text': 'Light theme',
+            'icon': 'sun',
+            'buttonElement': true,
+            'classes': 'tna-footer__theme-selector-button',
+            'plain': params.currentTheme and params.currentTheme != 'light',
+            'attributes': {
+              'value': 'light',
+              'aria-current': not params.currentTheme or params.currentTheme == 'light'
+            }
+          }) }}
+          {{ tnaButton({
+            'text': 'Dark theme',
+            'icon': 'moon',
+            'buttonElement': true,
+            'classes': 'tna-footer__theme-selector-button',
+            'plain': params.currentTheme != 'dark',
+            'attributes': {
+              'value': 'dark',
+              'aria-current': params.currentTheme == 'dark'
+            }
+          }) }}
+        </div>
+      </div>
+    </div>
+  </section>
+  {%- endif %}
+  <div class="tna-footer__inner">
+    <div class="tna-container">
+      <div class="tna-column tna-column--flex-1 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-1">
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
+          <title>The National Archives</title>
+          <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
+          <g class="tna-logo__foreground" fill="currentColor">
+            <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
+            <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
+          </g>
+        </svg>
+        <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
+        <address class="tna-footer__address">
+          Kew, Richmond<br>
+          TW9 4DU
+        </address>
+        {%- if params.meta %}
+        <div class="tna-footer__meta">
+          {{ params.meta | safe }}
+        </div>
+        {%- endif %}
+        {%- if params.social %}
+          <h3 class="tna-!--visually-hidden">
+            Follow us
+          </h3>
+          <nav class="tna-footer__social" aria-label="Social">
+            <ul class="tna-ul tna-ul--plain tna-footer__social-items">
+            {%- for item in params.social %}
+              <li class="tna-footer__social-item">
+                <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}">
+                  {%- if item.icon == 'twitter' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+                  {%- elif item.icon == 'youtube' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
+                  {%- elif item.icon == 'facebook' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
+                  {%- elif item.icon == 'flickr' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"/></svg>
+                  {%- elif item.icon == 'instagram' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
+                  {%- elif item.icon == 'rss' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
+                  {%- elif item.icon == 'github' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                  {%- elif item.icon == 'tiktok' %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
+                  {%- endif %}
+                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
+                    {{ item.title }}
+                  </span>
+                </a>
+              </li>
+            {%- endfor %}
+            </ul>
+          </nav>
+        {%- endif %}
+      </div>
+      {%- if params.navigation %}
+      <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
+        {%- for group in params.navigation %}
+        <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
+          {%- if not group.hideTitle %}
+          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
+            {{ group.title }}
+          </h3>
+          {%- endif %}
+          <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
+          {%- for item in group.items %}
+            <li class="tna-footer__navigation-block-item">
+              <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank" rel="noreferrer noopener"{% endif %}>
+                {{ item.text }}
               </a>
             </li>
           {%- endfor %}
           </ul>
         </nav>
+        {%- endfor %}
+      </div>
+      {%- endif %}
+      {%- if params.showNewsletter %}
+      <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
+        <div class="tna-footer__mailing-list">
+          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
+            Sign up to our emails
+          </h3>
+          <p>
+            Hear about our latest news, stories from the collection and priority booking for events.
+          </p>
+          <div class="tna-button-group">
+            {{ tnaButton({
+              text: "Subscribe",
+              href: "https://pages.enews.nationalarchives.gov.uk/pages/subscribe"
+            }) | indent(10) }}
+          </div>
+        </div>
+      </div>
       {%- endif %}
     </div>
-    {%- if params.navigation %}
-    <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
-      {%- for group in params.navigation %}
-      <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
-        {%- if not group.hideTitle %}
-        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
-          {{ group.title }}
-        </h3>
-        {%- endif %}
-        <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
-        {%- for item in group.items %}
-          <li class="tna-footer__navigation-block-item">
-            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank" rel="noreferrer noopener"{% endif %}>
+    <div class="tna-container">
+      {%- if params.legal %}
+      <nav class="tna-footer__legal tna-column tna-column--full" aria-label="Legal">
+        <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
+          {%- for item in params.legal %}
+          <li class="tna-footer__legal-item">
+            <a href="{{ item.href }}" class="tna-footer__legal-item-link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
               {{ item.text }}
             </a>
           </li>
-        {%- endfor %}
+          {%- endfor %}
         </ul>
+        <hr>
       </nav>
-      {%- endfor %}
-    </div>
-    {%- endif %}
-    {%- if params.showNewsletter %}
-    <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
-      <div class="tna-footer__mailing-list">
-        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
-          Sign up to our emails
-        </h3>
-        <p>
-          Hear about our latest news, stories from the collection and priority booking for events.
-        </p>
-        <div class="tna-button-group">
-          {{ tnaButton({
-            text: "Subscribe",
-            href: "https://pages.enews.nationalarchives.gov.uk/pages/subscribe"
-          }) | indent(10) }}
-        </div>
+      {%- else %}
+      <div class="tna-column--full">
+        <hr>
       </div>
+      {%- endif %}
     </div>
-    {%- endif %}
-  </div>
-  <div class="tna-container">
-    {%- if params.legal %}
-    <nav class="tna-footer__legal tna-column tna-column--full" aria-label="Legal">
-      <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
-        {%- for item in params.legal %}
-        <li class="tna-footer__legal-item">
-          <a href="{{ item.href }}" class="tna-footer__legal-item-link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
-            {{ item.text }}
-          </a>
-        </li>
-        {%- endfor %}
-      </ul>
-      <hr>
-    </nav>
-    {%- else %}
-    <div class="tna-column--full">
-      <hr>
-    </div>
-    {%- endif %}
-  </div>
-  <div class="tna-container tna-footer__licence">
-    <div class="tna-column tna-column--full-tiny">
-      <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
-        <title>Open Government Licence</title>
-        <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
-      </svg>
-    </div>
-    <div class="tna-column tna-column--flex-1">
-      <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
-    </div>
-    <div class="tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk">
-      <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
-        <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" width="32" height="30" focusable="false" viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg">
-          <title>GOV.UK</title>
-          <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
+    <div class="tna-container tna-footer__licence">
+      <div class="tna-column tna-column--full-tiny">
+        <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
+          <title>Open Government Licence</title>
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
         </svg>
-        GOV.UK
-      </a>
+      </div>
+      <div class="tna-column tna-column--flex-1">
+        <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
+      </div>
+      <div class="tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk">
+        <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
+          <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" width="32" height="30" focusable="false" viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg">
+            <title>GOV.UK</title>
+            <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
+          </svg>
+          GOV.UK
+        </a>
+      </div>
     </div>
   </div>
 </footer>

package/nationalarchives/components/gallery/gallery.css

@@ -1 +1 @@
-.tna-gallery{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery{padding-bottom:32px}.tna-gallery__header{padding-top:32px}.tna-gallery__items{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px}.tna-gallery__items:focus{outline:none !important}.tna-gallery__item{margin:0}.tna-gallery__item-index{padding-bottom:16px;text-align:center}.tna-gallery__item-image{margin:0 auto;height:auto}.tna-gallery__item-description{margin-top:16px;padding:8px 0 8px 16px;border-left:4px var(--keyline-dark, #26262a) solid}@media(max-width: 64em){.tna-gallery__item-tabs{padding-top:32px}}.tna-gallery__item+.tna-gallery__item{border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-gallery__toggle-wrapper{text-align:center}.tna-gallery__toggle{margin-top:32px}.tna-gallery--touchable .tna-gallery__items{flex-flow:row nowrap;gap:96px;overflow-x:scroll;scroll-snap-type:x mandatory}.tna-gallery--touchable .tna-gallery__item{width:100%;scroll-snap-align:center;flex:none}.tna-gallery--touchable.tna-gallery--collapsed .tna-gallery__items{overflow:auto}.tna-gallery--collapsed .tna-gallery__item+.tna-gallery__item,.tna-gallery--collapsed .tna-gallery__item:first-child .tna-gallery__item-description,.tna-gallery--collapsed .tna-gallery__item:first-child .tna-gallery__item-tabs{display:none}.tna-gallery--collapsed .tna-gallery__item-figure{width:100%}/*# sourceMappingURL=gallery.css.map */
+.tna-gallery{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery{padding-bottom:32px}.tna-gallery__header{padding-top:32px}.tna-gallery__items{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px}.tna-gallery__items:focus{outline:none !important}.tna-gallery__item{margin:0}.tna-gallery__item-index{padding-bottom:16px;text-align:center}.tna-gallery__item-image{height:auto;margin:0 auto}.tna-gallery__item-description{margin-top:16px;padding:8px 0 8px 16px;border-left:4px var(--keyline-dark, #26262a) solid}@media(max-width: 64em){.tna-gallery__item-tabs{padding-top:32px}}.tna-gallery__item+.tna-gallery__item{border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-gallery__toggle-wrapper{text-align:center}.tna-gallery__toggle{margin-top:32px}.tna-gallery--touchable .tna-gallery__items{flex-flow:row nowrap;gap:96px;overflow-x:scroll;scroll-snap-type:x mandatory}.tna-gallery--touchable .tna-gallery__item{width:100%;scroll-snap-align:center;flex:none}.tna-gallery--touchable.tna-gallery--collapsed .tna-gallery__items{overflow:auto}.tna-gallery--collapsed .tna-gallery__item+.tna-gallery__item,.tna-gallery--collapsed .tna-gallery__item:first-child .tna-gallery__item-description,.tna-gallery--collapsed .tna-gallery__item:first-child .tna-gallery__item-tabs{display:none}.tna-gallery--collapsed .tna-gallery__item-figure{width:100%}/*# sourceMappingURL=gallery.css.map */