@nationalarchives/frontend 0.1.13-prerelease → 0.1.15-prerelease

package/nationalarchives/components/footer/_index.scss

@@ -1,5 +1,4 @@
-@use "../../utilities/global"; // To get %tna-invert
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 @use "../../tools/media";
 
@@ -7,8 +6,12 @@
   padding-top: 3rem;
   padding-bottom: 3rem;
 
-  // @include colour.invert;
-  @extend %tna-invert;
+  @include colour.invert;
+
+  @include colour.on-high-contrast {
+    border-top: 1px transparent solid;
+    @include colour.colour-border("keyline");
+  }
 
   &__link {
     &,

package/nationalarchives/components/footer/template.njk

@@ -38,7 +38,7 @@
     <div class="tna-column tna-column--flex-1 tna-column--width-1-4-small tna-column--width-1-2-tiny tna-footer__social-item">
       <a href="{{ item.href }}" class="tna-footer__social-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
       {%- if item.image -%}
-        <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" />
+        <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" width="40" height="40" />
       {%- endif -%}
         {{ item.text }}
       </a>

package/nationalarchives/components/header/_index.scss

@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 @use "../../variables/colour" as colourVars; // TODO
 @use "../../variables/grid";
@@ -7,12 +6,10 @@
 @use "../../tools/media";
 
 .tna-header {
-  color: #fff;
+  @include colour.invert;
 
   background-color: colourVars.$tna-black;
 
-  // @include colour.invert;
-
   &__exit {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -104,8 +101,8 @@
   }
 
   &__logo {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   &__logo-link {
@@ -138,8 +135,8 @@
   }
 
   .tna-logo {
-    width: 6.25rem;
-    height: 6.25rem;
+    width: 6rem;
+    height: 6rem;
 
     display: inline-block;
   }
@@ -149,6 +146,11 @@
     outline-offset: 1px;
   }
 
+  &__logo-link--href:active .tna-logo,
+  &__logo-link--href:focus .tna-logo {
+    outline: none;
+  }
+
   .tna-logo__foreground {
     fill: #fff;
   }
@@ -387,8 +389,8 @@
       &,
       &:link,
       &:visited {
+        @include colour.uninvert;
         @include colour.colour-font("font-dark");
-
         @include colour.colour-background("page-background");
       }
       // transition:
@@ -440,9 +442,13 @@
     }
 
     &__navigation {
+      @include colour.uninvert;
       @include colour.colour-font("font-base");
       @include typography.relative-font-size(20);
 
+      align-items: stretch;
+      flex-direction: column;
+
       &.tna-column {
         padding-right: 0;
         padding-left: 0;
@@ -452,7 +458,7 @@
         display: none;
 
         &--open {
-          display: block;
+          display: flex;
         }
       }
     }
@@ -499,7 +505,7 @@
 
       position: relative;
 
-      line-height: 1.6;
+      line-height: #{math.div(1, 1.125) * 2};
 
       &::after {
         width: 0;

package/nationalarchives/components/header/header.stories.js

@@ -125,15 +125,17 @@ Desktop.args = {
   classes: "tna-header--demo",
 };
 Desktop.play = async ({ canvasElement }) => {
-  const navigationItems = canvasElement.querySelector(
+  await new Promise((r) => setTimeout(r, 100));
+
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-button`,
   );
 
-  await expect(navigationItems).toBeVisible();
-  await expect(navigationToggle).not.toBeVisible();
+  await expect($navigationItems).toBeVisible();
+  await expect($navigationToggle).not.toBeVisible();
 };
 
 export const Mobile = Template.bind({});
@@ -164,46 +166,89 @@ Mobile.args = {
   classes: "tna-header--demo",
 };
 Mobile.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
-  const navigationItems = canvasElement.querySelector(
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const [linkA, linkB, linkC] = args.navigation.map((navigationItem) =>
+  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
     canvas.getByText(navigationItem.text),
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-button`,
   );
 
   await step("Initial load", async () => {
-    await expect(navigationItems).not.toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect(linkA).not.toBeVisible();
-    await expect(linkB).not.toBeVisible();
-    await expect(linkC).not.toBeVisible();
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
   });
 
   await step("Open the menu", async () => {
-    await userEvent.click(navigationToggle);
-    await expect(navigationItems).toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "true");
-    await expect(linkA).toBeVisible();
-    await expect(linkB).toBeVisible();
-    await expect(linkC).toBeVisible();
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "true");
+    await expect($linkA).toBeVisible();
+    await expect($linkB).toBeVisible();
+    await expect($linkC).toBeVisible();
   });
 
   await step("Close the menu", async () => {
-    await userEvent.click(navigationToggle);
-    await expect(navigationItems).not.toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect(linkA).not.toBeVisible();
-    await expect(linkB).not.toBeVisible();
-    await expect(linkC).not.toBeVisible();
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
   });
 
-  navigationToggle.blur();
+  $navigationToggle.blur();
 };
+
+// export const NoJavascript = Template.bind({});
+// NoJavascript.args = {
+//   navigation: [
+//     {
+//       text: "Alpha",
+//       href: "#/alpha",
+//       selected: true,
+//     },
+//     {
+//       text: "Beta",
+//       href: "#/beta",
+//     },
+//     {
+//       text: "Gamma",
+//       href: "#/gamma",
+//     },
+//   ],
+//   classes: "tna-header--demo",
+// };
+// NoJavascript.play = async ({ args, canvasElement, step }) => {
+//   document.documentElement.classList.remove("tna-template--js-enabled");
+//   canvasElement.innerHTML = canvasElement.innerHTML;
+//   const $navigationToggleWrapper = canvasElement.querySelector(
+//     `.tna-header__navigation-toggle`,
+//   );
+//   $navigationToggleWrapper.innerHTML = "";
+
+//   const canvas = within(canvasElement);
+
+//   // const $navigationItems = canvasElement.querySelector(
+//   //   `.tna-header__navigation-items`,
+//   // );
+//   // const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
+//   //   canvas.getByText(navigationItem.text),
+//   // );
+//   // await expect($navigationItems).toBeVisible();
+//   // await expect($linkA).toBeVisible();
+//   // await expect($linkB).toBeVisible();
+//   // await expect($linkC).toBeVisible();
+// };

package/nationalarchives/components/header/template.njk

@@ -20,7 +20,7 @@
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
       <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-link tna-header__logo-link--href" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
-        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="100" height="100">
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="96" height="96">
           <path fill="#fff" d="M0 0h160v160H0z" class="tna-logo__background"/>
           <g class="tna-logo__foreground" fill="#000">
             <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"/>

package/nationalarchives/components/hero/_index.scss

@@ -1,11 +1,11 @@
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 @use "../../tools/media";
 
 .tna-hero {
   min-height: min(35vw, 480px);
-  padding-top: 5.25rem;
-  padding-bottom: 3.25rem;
+  margin-bottom: 2rem;
+  padding-top: 5rem;
+  padding-bottom: 3rem;
 
   display: flex;
   align-items: flex-end;
@@ -106,7 +106,6 @@
     display: block;
 
     @include colour.invert;
-    // @extend %tna-invert;
 
     &__image {
       height: 320px;
@@ -159,7 +158,7 @@
     }
   }
 
-  @mixin high-contrast {
+  @include colour.on-high-contrast {
     &__content-inner {
       border: 1px transparent solid;
       @include colour.colour-border("keyline-dark");
@@ -169,14 +168,4 @@
       }
     }
   }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
-
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
-    }
-  }
 }

package/nationalarchives/components/hero/hero.stories.js

@@ -51,6 +51,8 @@ Standard.args = {
 };
 
 Standard.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
   const image = canvas.getByAltText(args.image.alt);
   const title = canvas.getByText(args.heading);

package/nationalarchives/components/index-grid/_index.scss

@@ -1,7 +1,16 @@
-@use "../../utilities/global"; // To get %tna-invert
+@use "sass:math";
 @use "../../tools/colour";
 
 .tna-index-grid {
+  &__heading {
+  }
+
+  &__items {
+    margin-top: 1rem;
+
+    list-style: none;
+  }
+
   &__item-wrapper {
     margin-bottom: 2rem;
   }
@@ -12,14 +21,20 @@
     display: flex;
     flex-direction: column;
 
-    // @include colour.invert;
-    @extend %tna-invert;
+    @include colour.invert;
     text-decoration: none;
+
+    @include colour.on-high-contrast {
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+    }
   }
 
   &__item-image {
     width: 100%;
-    height: auto;
+    height: #{math.div(2, 3) * 100%};
+
+    object-fit: cover;
   }
 
   &__item-content {
@@ -41,6 +56,6 @@
   }
 
   &__item-subtitle {
-    @include colour.colour-font("font-light", true);
+    @include colour.colour-font("font-light");
   }
 }

package/nationalarchives/components/index-grid/index-grid.stories.js

@@ -2,7 +2,7 @@ import IndexGrid from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  heading: { control: "text" },
+  heading: { control: "object" },
   items: { control: "object" },
   columns: { control: "number" },
   columnsMedium: { control: "number" },
@@ -58,13 +58,17 @@ const exampleItem = {
 };
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: "My dogs",
+  heading: {
+    title: "My dogs",
+    level: 2,
+  },
   items: Array(12)
     .fill({ ...exampleItem })
     .map((item, index) => {
       const pseudoRandom = ((index * 29) % 8) + 1;
       return {
         ...item,
+        href: `#/category-${index}`,
         title: `Category #${index + 101}`,
         subtitle: `${pseudoRandom} photos`,
       };

package/nationalarchives/components/index-grid/macro-options.json

@@ -1,9 +1,29 @@
 [
   {
     "name": "heading",
-    "type": "string",
+    "type": "object",
     "required": true,
-    "description": ""
+    "description": "",
+    "params": [
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "level",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "text",
+        "required": false,
+        "description": ""
+      }
+    ]
   },
   {
     "name": "items",

package/nationalarchives/components/index-grid/template.njk

@@ -2,10 +2,16 @@
 <nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column tna-column--full">
-      <h1>
-        {{ params.heading }}
-      </h1>
+      {%- set headingSize = 'l' -%}
+      {%- if params.heading.size -%}
+        {%- set headingSize = params.heading.size -%}
+      {%- endif -%}
+      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ headingSize }} tna-index-grid__heading">
+        {{ params.heading.title }}
+      </h{{ params.heading.level }}>
     </div>
+  </div>
+  <ul class="tna-index-grid__items tna-container">
     {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
 
     {%- if params.columns == 1 -%}
@@ -39,7 +45,7 @@
     {%- endif -%}
 
     {%- for item in params.items -%}
-    <div class="{{ itemClasses | join(' ') }}">
+    <li class="{{ itemClasses | join(' ') }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
         <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
         <span class="tna-index-grid__item-content">
@@ -50,7 +56,7 @@
           {%- endif -%}
         </span>
       </a>
-    </div>
+    </li>
     {%- endfor -%}
-  </div>
+  </ul>
 <nav>

package/nationalarchives/components/message/_index.scss

@@ -1,4 +1,4 @@
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 
 .tna-message {
@@ -7,6 +7,8 @@
   display: flex;
   align-items: center;
 
+  color: colourVars.$tna-black;
+
   @include colour.colour-background("keyline");
 
   border-left: 0.5rem transparent solid;

package/nationalarchives/components/picture/_index.scss

@@ -1,10 +1,13 @@
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 
 .tna-picture {
-  margin: 0 0 1rem;
+  margin: 0 0 2rem;
   padding: 0;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &__image-wrapper {
     // padding: 1rem 0;
 
@@ -22,11 +25,12 @@
     position: absolute;
     right: 1rem;
     bottom: 1rem;
+
+    font-size: 1rem;
   }
 
   &__transcript {
-    // @include colour.invert;
-    @extend %tna-invert;
+    @include colour.invert;
 
     padding: 1rem 1.5rem;
 
@@ -37,22 +41,6 @@
     .tna-tabs {
       margin-bottom: 0.5rem;
     }
-
-    .tna-tabs__list-item-link {
-      @include colour.colour-font("font-dark", true);
-
-      &::after {
-        @include colour.colour-background("keyline-dark", true);
-      }
-
-      .tna-template--js-enabled & {
-        @include colour.colour-font("font-light", true);
-
-        &--selected {
-          @include colour.colour-font("font-dark", true);
-        }
-      }
-    }
   }
 
   &__caption {
@@ -64,18 +52,11 @@
 
     border-bottom: 1px solid;
     @include colour.colour-border("keyline");
+  }
 
-    // &::after {
-    //   height: 1px;
-
-    //   position: absolute;
-    //   right: 20%;
-    //   bottom: 0;
-    //   left: 20%;
-
-    //   @include colour.colour-background("keyline");
-
-    //   content: "";
-    // }
+  @include colour.on-high-contrast {
+    border-width: 1px 1px 0;
+    @include colour.colour-border("keyline-dark");
+    border-style: solid;
   }
 }

package/nationalarchives/components/sensitive-image/sensitive-image.stories.js

@@ -19,7 +19,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Components/Sensitive image",
+  title: "Components/Experimental/Sensitive image",
   argTypes,
 };
 
@@ -68,6 +68,8 @@ Test.args = {
 };
 
 Test.play = async ({ args, canvasElement }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
   const image = canvas.getByAltText(args.image.alt);

package/nationalarchives/components/tabs/_index.scss

@@ -1,7 +1,11 @@
 @use "../../tools/colour";
 
 .tna-tabs {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   &__list {
     margin: 0 0 1rem;
@@ -124,7 +128,7 @@
     }
   }
 
-  @mixin high-contrast {
+  @include colour.on-high-contrast {
     &__list-item-link {
       padding-right: 1rem;
       padding-left: 1rem;
@@ -135,14 +139,4 @@
       @include colour.colour-border("keyline-dark");
     }
   }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
-
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
-    }
-  }
 }

package/nationalarchives/components/tabs/tabs.stories.js

@@ -5,7 +5,7 @@ import { within, userEvent } from "@storybook/testing-library";
 
 const argTypes = {
   title: { control: "text" },
-  items: { control: "array" },
+  items: { control: "object" },
   sticky: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -81,6 +81,8 @@ Test.args = {
 };
 
 Test.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
   const tablist = canvas.getByRole("tablist");

package/nationalarchives/patterns/featured-collection/_index.scss

@@ -1,4 +1,4 @@
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 
 .tna-featured-collection {
   padding-top: 2rem;

package/nationalarchives/patterns/featured-collection/featured-collection.stories.js

@@ -14,7 +14,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Patterns/Featured collection",
+  title: "Patterns/Experimental/Featured collection",
   argTypes,
 };
 

package/nationalarchives/patterns/featured-collection/template.njk

@@ -43,9 +43,9 @@
         href: "#",
         image: {
           src: "https://picsum.photos/id/29/640/360",
-          alt: "A placeholder image",
-          label: "Feature"
+          alt: "A placeholder image"
         },
+        label: "Feature",
         body: "<p>Card body</p>"
       })
     },