@nationalarchives/frontend 0.1.12-prerelease → 0.1.14-prerelease

package/nationalarchives/components/message/phase-banner.stories.js

@@ -0,0 +1,36 @@
+import Message from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  message: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Message",
+  argTypes,
+};
+
+const Template = ({ message, classes, attributes }) => {
+  return Message({
+    params: {
+      message,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  message:
+    "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+  classes: "tna-messaage--demo",
+};

package/nationalarchives/components/message/template.njk

@@ -0,0 +1,9 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-message {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <svg class="tna-message__icon" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 34 34" width="40" height="40">
+    <path fill="currentColor" d="M15.33 8.67h3.34V12h-3.34V8.67Zm0 6.66h3.34v10h-3.34v-10ZM17 .33a16.67 16.67 0 1 0 .01 33.35A16.67 16.67 0 0 0 17 .33Zm0 30A13.35 13.35 0 0 1 3.67 17C3.67 9.65 9.65 3.67 17 3.67S30.33 9.65 30.33 17 24.35 30.33 17 30.33Z"></path>
+  </svg>
+  <p class="tna-message__message">
+    {{ params.message | safe }}
+  </p>
+</div>

package/nationalarchives/components/phase-banner/phase-banner.stories.js

@@ -18,7 +18,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Phase banner",
+  title: "Components/Phase banner",
   argTypes,
 };
 

package/nationalarchives/components/phase-banner/template.njk

@@ -4,7 +4,7 @@
   <div class="tna-container">
     <div class="tna-column">
       <span class="tna-phase-banner__phase">
-        {{ params.phase | capitalize }}
+        {{ params.phase | lower | capitalize }}
       </span>
     </div>
     <div class="tna-column">

package/nationalarchives/components/picture/_index.scss

@@ -1,4 +1,3 @@
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 
 .tna-picture {
@@ -25,29 +24,16 @@
   }
 
   &__transcript {
-    // @include colour.invert;
-    @extend %tna-invert;
+    @include colour.invert;
 
-    padding: 1rem 1.5rem 0.5rem;
+    padding: 1rem 1.5rem;
 
     .tna-template--clicked &:focus {
       outline: none;
     }
 
-    .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);
-        }
-      }
+    .tna-tabs {
+      margin-bottom: 0.5rem;
     }
   }
 

package/nationalarchives/components/picture/picture.stories.js

@@ -20,7 +20,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Picture",
+  title: "Components/Picture",
   argTypes,
 };
 

package/nationalarchives/components/profile/profile.stories.js

@@ -13,7 +13,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Profile",
+  title: "Components/Profile",
   argTypes,
 };
 

package/nationalarchives/components/profile/template.njk

@@ -1,7 +1,7 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-profile tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-column tna-column--order-2">
-    <img src="https://avatar.iran.liara.run/public/68" width="200" height="200" />
+    <img src="https://avatar.iran.liara.run/public/68" width="200" height="200" alt="Photo of Max Smith" />
   </div>
   <div class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-column--order-1 tna-column--order-3-small tna-column--order-3-tiny">
     <hgroup class="tna-hgroup tna-hgroup--xl">

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

@@ -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/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" },
@@ -18,7 +18,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Tabs",
+  title: "Components/Tabs",
   argTypes,
 };
 
@@ -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/stories/development/publishing.mdx

@@ -10,17 +10,6 @@ import { Meta } from "@storybook/blocks";
 1. Run `npm install` to update the `package-lock.json`
 1. Merge all changes to `main` via a pull request
 1. Wait for the CI to pass
-1. Tag the version with `git tag v1.0.0` (ensure leading `v` and change version number as necessary)
-1. Push the new tag with `git push origin --tags`
-1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) using the tag you just created
+1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) and add a new tag in the format `v1.0.0` (ensure leading `v` and change version number as necessary)
 
 Once a release is created, the [publish pipeline](https://github.com/nationalarchives/tna-frontend/blob/main/.github/workflows/npm-publish.yml) will be triggered.
-
-## Oops!
-
-To delete a tag:
-
-```sh
-git tag -d v0.1.0
-git push --delete origin v0.1.0
-```

package/nationalarchives/stories/utilities/colour.stories.js

@@ -2,6 +2,8 @@ import Header from "../../components/header/template.njk";
 import Breadcrumbs from "../../components/breadcrumbs/template.njk";
 import Card from "../../components/card/template.njk";
 import Hero from "../../components/hero/template.njk";
+import IndexGrid from "../../components/index-grid/template.njk";
+import Message from "../../components/message/template.njk";
 import Picture from "../../components/picture/template.njk";
 import Tabs from "../../components/tabs/template.njk";
 import Footer from "../../components/footer/template.njk";
@@ -119,6 +121,12 @@ const Template = ({ theme }) => {
           <a href="#" class="tna-button">Primary button</a>
           <a href="#" class="tna-button tna-button--secondary">Secondary button</a>
           <hr>
+          ${Message({
+            params: {
+              message:
+                "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+            },
+          })}
           ${Card({
             params: {
               heading: {
@@ -174,6 +182,36 @@ const Template = ({ theme }) => {
               classes: "tna-picture--demo",
             },
           })}
+          ${IndexGrid({
+            params: {
+              heading: "My dogs",
+              items: Array(12)
+                .fill({
+                  ...{
+                    href: "#",
+                    src: "https://picsum.photos/id/237/800/600",
+                    alt: "Photo of a puppy",
+                    width: "800",
+                    height: "600",
+                    title: "Cat",
+                    subtitle: "4 photos",
+                  },
+                })
+                .map((item, index) => {
+                  const pseudoRandom = ((index * 29) % 8) + 1;
+                  return {
+                    ...item,
+                    href: `#/category-${index}`,
+                    title: `Category #${index + 101}`,
+                    subtitle: `${pseudoRandom} photos`,
+                  };
+                }),
+              columns: 4,
+              columnsMedium: 3,
+              columnsSmall: 2,
+              columnsTiny: 1,
+            },
+          })}
         </div>
       </div>
     <article>
@@ -185,5 +223,5 @@ const Template = ({ theme }) => {
 export const Examples = Template.bind({});
 // Examples.parameters = { options: { showPanel: false } };
 Examples.args = {
-  theme: "system",
+  theme: "light",
 };

package/nationalarchives/stories/utilities/heading-groups.stories.js

@@ -41,4 +41,5 @@ export const HeadingGroupSeparated = Template.bind({});
 HeadingGroupSeparated.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
+  singleSentence: false,
 };

package/nationalarchives/stories/utilities/headings.stories.js

@@ -11,30 +11,16 @@ export default {
 const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
   params.size ? ` tna-heading--${params.size}` : ""
 }">
-  ${params.text} (level ${level})
+  ${params.text} (${params.size.toUpperCase()})
 </h${level}>`;
 
-const Heading1Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 1);
-const Heading2Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 2);
-const Heading3Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 3);
+const HeadingsTemplate = ({ text }) =>
+  `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate(
+    { params: { text, size: "l" } },
+    2,
+  )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}`;
 
-export const Heading1 = Heading1Template.bind({});
-Heading1.args = {
+export const Headings = HeadingsTemplate.bind({});
+Headings.args = {
   text: "This is a heading",
-  size: "xl",
-};
-
-export const Heading2 = Heading2Template.bind({});
-Heading2.args = {
-  text: "This is a heading",
-  size: "l",
-};
-
-export const Heading3 = Heading3Template.bind({});
-Heading3.args = {
-  text: "This is a heading",
-  size: "m",
 };

package/nationalarchives/stories/utilities/typography.mdx

@@ -12,9 +12,7 @@ We use a set of typefaces...
 
 ## Headings
 
-<Canvas of={HeadingStories.Heading1} />
-<Canvas of={HeadingStories.Heading2} />
-<Canvas of={HeadingStories.Heading3} />
+<Canvas of={HeadingStories.Headings} />
 
 ## Heading groups
 

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,57 +1,49 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
 {#% from "./components/skip-link/macro.njk" import tnaSkipLink -%#}
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>
-  <meta charset="utf-8">
-  <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-  {% block headIcons %}
-  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
-  <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
-  <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
-  {% endblock %}
-
-  {% block head %}{% endblock %}
-
-  {% block stylesheets %}{% endblock %}
-
-  {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
-  {% if opengraphImageUrl or assetUrl %}
-  <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
-  {% endif %}
+    <meta charset="utf-8">
+    <title>{% block pageTitle %}The National Archives{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    {% block headIcons %}
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
+    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
+
+    {% block stylesheets %}{% endblock %}
   </head>
-  <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% block bodyStart %}{% endblock %}
-
-  {% block skipLink %}
-  {#{ govukSkipLink({
-    href: '#main-content',
-    text: 'Skip to main content'
-  }) }#}
-  {% endblock %}
-
-  {% block header %}
-  <h1>HEADER</h1>
-  {% endblock %}
-
-  {% block main %}
-  {% block beforeContent %}{% endblock %}
-  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
-    {% block content %}{% endblock %}
-  </main>
-  {% endblock %}
-
-  {% block footer %}
-  <h1>FOOTER</h1>
-  {% endblock %}
-
-  {% block bodyEnd %}{% endblock %}
+    <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    {% block skipLink %}
+    {#{ govukSkipLink({
+      href: '#main-content',
+      text: 'Skip to main content'
+    }) }#}
+    {% endblock %}
+
+    {% block bodyStart %}{% endblock %}
+
+    {% block header %}{% endblock %}
+
+    {% block main %}
+      {% block beforeContent %}{% endblock %}
+      <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+        {% block content %}{% endblock %}
+      </main>
+      {% block afterContent %}{% endblock %}
+    {% endblock %}
+
+    {% block footer %}{% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
   </body>
 </html>

package/nationalarchives/tools/_colour.scss

@@ -26,59 +26,29 @@
   }
 }
 
-@mixin colour-font($colour, $inverted: false) {
-  @if $inverted {
-    color: map.get(colour.$colour-palette-dark, $colour);
-  } @else {
-    color: map.get(colour.$colour-palette-default, $colour);
-  }
-  @if features.$support-colour-schemes {
-    color: var(--#{$colour});
-  }
+@mixin colour-font($colour) {
+  color: map.get(colour.$colour-palette-default, $colour);
+  color: var(--#{$colour});
 }
 
-@mixin colour-background($colour, $inverted: false) {
-  @if $inverted {
-    background-color: map.get(colour.$colour-palette-dark, $colour);
-  } @else {
-    background-color: map.get(colour.$colour-palette-default, $colour);
-  }
-  @if features.$support-colour-schemes {
-    background-color: var(--#{$colour});
-  }
+@mixin colour-background($colour) {
+  background-color: map.get(colour.$colour-palette-default, $colour);
+  background-color: var(--#{$colour});
 }
 
-@mixin colour-border($colour, $inverted: false) {
-  @if $inverted {
-    border-color: map.get(colour.$colour-palette-dark, $colour);
-  } @else {
-    border-color: map.get(colour.$colour-palette-default, $colour);
-  }
-  @if features.$support-colour-schemes {
-    border-color: var(--#{$colour});
-  }
+@mixin colour-border($colour) {
+  border-color: map.get(colour.$colour-palette-default, $colour);
+  border-color: var(--#{$colour});
 }
 
-@mixin colour-outline($colour, $inverted: false) {
-  @if $inverted {
-    outline-color: map.get(colour.$colour-palette-dark, $colour);
-  } @else {
-    outline-color: map.get(colour.$colour-palette-default, $colour);
-  }
-  @if features.$support-colour-schemes {
-    outline-color: var(--#{$colour});
-  }
+@mixin colour-outline($colour) {
+  outline-color: map.get(colour.$colour-palette-default, $colour);
+  outline-color: var(--#{$colour});
 }
 
-@mixin colour-fill($colour, $inverted: false) {
-  @if $inverted {
-    fill: map.get(colour.$colour-palette-dark, $colour);
-  } @else {
-    fill: map.get(colour.$colour-palette-default, $colour);
-  }
-  @if features.$support-colour-schemes {
-    fill: var(--#{$colour});
-  }
+@mixin colour-fill($colour) {
+  fill: map.get(colour.$colour-palette-default, $colour);
+  fill: var(--#{$colour});
 }
 
 @mixin fixed {
@@ -88,42 +58,50 @@
 }
 
 @mixin invert {
+  --font-base: var(--contrast-font-base);
+  --font-dark: var(--contrast-font-dark);
+  --font-light: var(--contrast-font-light);
+  --link: var(--contrast-link);
+  --link-visited: var(--contrast-link-visited);
+  --keyline: var(--contrast-keyline);
+  --keyline-dark: var(--contrast-keyline-dark);
+
+  @include colour-font("contrast-font-base");
+  @include colour-background("contrast-background");
+}
+
+@mixin uninvert {
+  @include colour-css-vars;
+
   .tna-template--system-theme & {
-    @include colour-css-vars-dark;
+    @include colour-css-vars;
 
     @media (prefers-color-scheme: dark) {
-      @include colour-css-vars;
+      @include colour-css-vars-dark;
     }
 
     @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast-dark;
+      @include colour-css-vars-high-contrast;
     }
 
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast;
+      @include colour-css-vars-high-contrast-dark;
     }
   }
 
   .tna-template--light-theme & {
-    @include colour-css-vars-dark;
+    @include colour-css-vars;
   }
 
   .tna-template--dark-theme & {
-    @include colour-css-vars;
+    @include colour-css-vars-dark;
   }
 
   .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast-dark;
-  }
-
-  .tna-template--dark-theme.tna-template--high-contrast-theme & {
     @include colour-css-vars-high-contrast;
   }
 
-  @include colour-font("font-base", true);
-  @include colour-background("page-background", true);
-}
-
-%tna-invert {
-  @include invert;
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 }

package/nationalarchives/utilities/_global.scss

@@ -4,22 +4,6 @@
 
 :root {
   @include colour.colour-css-vars;
-
-  @media (prefers-color-scheme: dark) {
-    @include colour.colour-css-vars-dark;
-  }
-
-  @media (prefers-contrast: more) {
-    @include colour.colour-css-vars-high-contrast;
-
-    * {
-      background-image: none !important;
-    }
-  }
-
-  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-    @include colour.colour-css-vars-high-contrast-dark;
-  }
 }
 
 .tna-template {
@@ -59,7 +43,7 @@
   //   accent-color: colour.$_tna-blue;
   // }
 
-  /* &--system-theme {
+  &--system-theme {
     @include colour.colour-css-vars;
 
     @media (prefers-color-scheme: dark) {
@@ -77,7 +61,7 @@
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
-  } */
+  }
 
   &--light-theme {
     @include colour.colour-css-vars;
@@ -112,9 +96,16 @@
   margin: 0;
   padding: 0;
 
-  // @include colour.colour-background("page-background");
-
   overflow: auto;
+
+  &:has(.tna-header):has(#main[role="main"]):has(.tna-footer) {
+    display: flex;
+    flex-direction: column;
+
+    #main[role="main"] {
+      flex: 1;
+    }
+  }
 }
 
 img,

package/nationalarchives/utilities/_typography.scss

@@ -3,7 +3,7 @@
 @use "../tools/typography";
 
 // Temporary - will eventually bundle font files into package
-@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
@@ -74,7 +74,7 @@ a {
 }
 
 .tna-heading {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 
   @include colour.colour-font("font-dark");
   @include typography.heading-font;