@nationalarchives/frontend 0.1.42 → 0.1.43

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

@@ -652,7 +652,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 1",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -736,7 +736,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 2",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -820,7 +820,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 3",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -904,7 +904,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 4",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -988,7 +988,7 @@ const Template = ({ theme, accent }) => {
             title: "My dogs 5",
             headingLevel: 3,
             headingHref: "#",
-            items: Array(6)
+            items: Array(4)
               .fill({
                 ...{
                   href: "#",
@@ -1098,6 +1098,7 @@ const Template = ({ theme, accent }) => {
                       href: "#email",
                     },
                   ],
+                  disableAutoFocus: true,
                 },
               })}
               ${TextInput({
@@ -1216,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: [
@@ -1367,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/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/tools/_a11y.scss

@@ -1,6 +1,15 @@
+@use "../variables/a11y";
 @use "colour";
 
 @mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 5px, solid);
-  outline-offset: 2px;
+  @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

@@ -97,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: "",
@@ -159,6 +163,26 @@
   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("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

@@ -17,7 +17,7 @@ select {
     &--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 {

package/nationalarchives/utilities/_typography.scss

@@ -68,11 +68,6 @@
   }
 }
 
-* {
-  margin: 0;
-  padding: 0;
-}
-
 strong {
   @include typography.main-font-weight-bold;
 }
@@ -80,16 +75,9 @@ 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 {
@@ -116,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 {
@@ -154,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;
@@ -381,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/_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.42",
+  "version": "0.1.43",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",