@nationalarchives/frontend 0.1.41 → 0.1.43

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";
@@ -651,7 +652,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 1",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -735,7 +736,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 2",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -819,7 +820,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 3",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -903,7 +904,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 4",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -987,7 +988,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 5",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -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,17 @@ 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",
+                    },
+                  ],
+                  disableAutoFocus: true,
                 },
               })}
               ${TextInput({
@@ -1099,6 +1119,9 @@ const Template = ({ theme, accent }) => {
                   id: "email",
                   name: "email",
                   autofill: "email",
+                  error: {
+                    text: "Enter a valid email address",
+                  },
                 },
               })}
               ${Select({
@@ -1194,37 +1217,32 @@ const Template = ({ theme, accent }) => {
     </main>
     ${Footer({
       params: {
-        meta: "<p>Open today<br>09:00&mdash;19:00</p>",
+        meta: "<p>Open today<br>09:00&ndash;19:00</p>",
         social: [
           {
             href: "https://twitter.com/UKNatArchives",
             icon: "twitter",
-            title: "Visit us on Twitter",
+            title: "The National Archives X feed (formally known as Twitter)",
           },
           {
             href: "https://www.youtube.com/c/TheNationalArchivesUK",
             icon: "youtube",
-            title: "Watch us on YouTube",
+            title: "The National Archives YouTube channel",
           },
           {
             href: "https://www.facebook.com/TheNationalArchives",
             icon: "facebook",
-            title: "See us on Facebook",
+            title: "The National Archives Facebook page",
           },
           {
             href: "https://www.flickr.com/photos/nationalarchives",
             icon: "flickr",
-            title: "See our Flickr feed",
+            title: "The National Archives Flickr feed",
           },
           {
             href: "https://www.instagram.com/nationalarchivesuk/",
             icon: "instagram",
-            title: "See us on Instagram",
-          },
-          {
-            href: "https://www.nationalarchives.gov.uk/rss/",
-            icon: "rss",
-            title: "Read our RSS feed",
+            title: "The National Archives Instagram feed",
           },
         ],
         navigation: [
@@ -1345,18 +1363,27 @@ Light.args = {
 };
 
 export const Dark = Template.bind({});
+Dark.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Dark.args = {
   theme: "dark",
   accent: "pink",
 };
 
 export const LightHighContrast = Template.bind({});
+LightHighContrast.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 LightHighContrast.args = {
   theme: "light high-contrast",
   accent: "pink",
 };
 
 export const DarkHighContrast = Template.bind({});
+DarkHighContrast.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 DarkHighContrast.args = {
   theme: "dark high-contrast",
   accent: "pink",

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/stories/utilities/tables/tables.stories.js

@@ -4,42 +4,44 @@ export default {
 
 const TableTemplate = () =>
   `<table class="tna-table">
-  <caption class="tna-table__caption tna-heading-m tna-visually-hidden">Primary options</caption>
+  <caption class="tna-table__caption">
+    Records added and removed between 2020 and 2022
+  </caption>
   <thead class="tna-table__head">
     <tr class="tna-table__row">
-      <th class="tna-table__header" scope="col">Name</th>
-      <th class="tna-table__header" scope="col">Type</th>
-      <th class="tna-table__header" scope="col">Description</th>
+      <th class="tna-table__header" scope="col">Year</th>
+      <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+      <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+      <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
     </tr>
   </thead>
   <tbody class="tna-table__body">
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">items</th>
-      <td class="tna-table__cell">array</td>
-      <td class="tna-table__cell">
-        <p><strong>Required.</strong></p>
-        <p>See items.</p>
-      </td>
-    </tr>
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">noCollapse</th>
-      <td class="tna-table__cell">string</td>
-      <td class="tna-table__cell"></td>
+    <tr>
+      <th class="tna-table__header" scope="row">2020</th>
+      <td class="tna-table__cell">Rat</td>
+      <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+      <td class="tna-table__cell tna-table__cell--numeric">789</td>
     </tr>
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">classes</th>
-      <td class="tna-table__cell">string</td>
-      <td class="tna-table__cell">
-        <p>Classes to add to the breadcrumbs.</p>
-      </td>
+    <tr>
+      <th class="tna-table__header" scope="row">2021</th>
+      <td class="tna-table__cell">Ox</td>
+      <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+      <td class="tna-table__cell tna-table__cell--numeric">123</td>
     </tr>
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">attributes</th>
-      <td class="tna-table__cell">object</td>
-      <td class="tna-table__cell">
-        <p>HTML attributes (for example data attributes) to add to the breadcrumbs.</p>
-      </td>
+    <tr>
+      <th class="tna-table__header" scope="row">2022</th>
+      <td class="tna-table__cell">Tiger</td>
+      <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+      <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
     </tr>
   </tbody>
+  <tfoot class="tna-table__foot">
+    <tr>
+      <th class="tna-table__header" scope="row">Totals</th>
+      <td class="tna-table__cell"></td>
+      <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+      <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+    </tr>
+  </tfoot>
 </table>`;
 export const Table = TableTemplate.bind({});

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,15 @@
+@use "../variables/a11y";
 @use "colour";
 
 @mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
+  @include colour.colour-outline(
+    "focus-outline",
+    a11y.$focus-outline-width,
+    solid
+  );
+  outline-offset: a11y.$focus-outline-offset;
+}
+
+@mixin active-outline {
+  outline-offset: a11y.$focus-outline-offset * 2;
 }

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};
+    }
   }
 }
 
@@ -88,6 +97,10 @@
   background-color: var(--#{$colour}) if($important, !important, null);
 }
 
+@mixin colour-background-brand($brandColour, $important: false) {
+  background-color: #{brand-colour($brandColour)} if($important, !important, null);
+}
+
 @mixin colour-border(
   $colour,
   $width: "",
@@ -150,15 +163,35 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
+@mixin thick-keyline($direction) {
+  @include colour-border("keyline", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-dark($direction) {
+  @include colour-border("keyline-dark", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-accent($direction) {
+  @include colour-border("accent-background", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-error($direction) {
+  @include colour-border("form-error", 5px, solid, $direction);
+}
+
+@mixin thick-keyline-brand($direction, $brandColour) {
+  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
+}
+
 %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 +200,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/_a11y.scss

@@ -32,6 +32,10 @@
   @include a11y.focus-outline;
 }
 
+*:active {
+  @include a11y.active-outline;
+}
+
 .tna-\!--no-focus-style {
   &:focus {
     outline: none;

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;
@@ -11,7 +17,7 @@
     &--error {
       padding-left: 1rem;
 
-      @include colour.colour-border("form-error", 0.25rem, solid, left);
+      @include colour.thick-keyline-error(left);
     }
   }
 

package/nationalarchives/utilities/_global.scss

@@ -19,7 +19,9 @@
   margin: 0;
   padding: 0;
 
-  &:has(.tna-header):has(#main-content[role="main"]):has(.tna-footer) {
+  &:has(:is(.tna-global-header, .tna-header)):has(
+      #main-content[role="main"]
+    ):has(.tna-footer) {
     display: flex;
     flex-direction: column;
 

package/nationalarchives/utilities/_reset.scss

@@ -1,5 +1,10 @@
 @use "../tools/colour";
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
 img,
 svg,
 picture,
@@ -21,8 +26,6 @@ canvas {
 }
 
 hr {
-  margin: 0;
-
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
   border-style: solid;

package/nationalarchives/utilities/_tables.scss

@@ -4,7 +4,6 @@
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
-@use "../variables/assets";
 @use "../variables/grid";
 
 .tna-table {
@@ -20,23 +19,32 @@
   }
 
   &__caption {
-    text-align: left;
+    padding: 1rem 0;
 
-    @include typography.main-font-weight-bold;
+    caption-side: bottom;
+
+    @include typography.relative-font-size(16);
   }
 
   &__head {
+    vertical-align: bottom;
   }
 
-  &__header {
+  &__body {
+    vertical-align: top;
   }
 
-  &__body {
+  &__foot {
+    @include typography.main-font-weight-bold;
+    vertical-align: top;
   }
 
   &__row {
   }
 
+  &__header {
+  }
+
   &__cell {
   }
 
@@ -53,10 +61,19 @@
     &:last-child {
       padding-right: 0;
     }
+
+    &--numeric {
+      text-align: right;
+    }
   }
 
   &__head &__header {
-    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+    @include colour.colour-border("keyline-dark", 4px, solid, bottom);
+  }
+
+  &__foot &__header,
+  &__foot &__cell {
+    @include colour.colour-border("keyline-dark", 4px, solid, top);
   }
 
   p {