@nationalarchives/frontend 0.1.5-prerelease → 0.1.7-prerelease

package/nationalarchives/components/sensitive-image/sensitive-image.mjs

@@ -17,7 +17,7 @@ SensitiveImage.prototype.init = function () {
   );
 };
 
-SensitiveImage.prototype.handleImageDetailsToggle = function (e) {
+SensitiveImage.prototype.handleImageDetailsToggle = function () {
   if (this.$imageDetails.hasAttribute("open")) {
     this.$image.focus({ preventScroll: true, focusVisible: true });
   }

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

@@ -1,7 +1,8 @@
 import SensitiveImage from "./template.njk";
-import "../../all.scss";
-import "./_sensitive-image.scss";
+import "./_index.scss";
 import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
 
 const argTypes = {
   src: { control: "text" },
@@ -9,7 +10,7 @@ const argTypes = {
   warning: { control: "text" },
   action: { control: "text" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
@@ -46,4 +47,38 @@ Standard.args = {
   warning: "This is a gory photo",
   action: "Show me the gory photo",
   classes: "tna-sensitive-image--demo",
+  attributes: {
+    "data-testid": "sensitive-image-test",
+  },
+};
+
+export const Test = Template.bind({});
+Test.args = {
+  image: {
+    src: "https://picsum.photos/id/237/800/600",
+    alt: "A placeholder image",
+    width: 800,
+    height: 600,
+  },
+  warning: "This is a gory photo",
+  action: "Show me the gory photo",
+  classes: "tna-sensitive-image--demo",
+  attributes: {
+    "data-testid": "sensitive-image-test",
+  },
+};
+
+Test.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const image = canvas.getByAltText(args.image.alt);
+  await expect(image).not.toBeVisible();
+  const warning = canvas.getByText(args.warning);
+  await expect(warning).toBeVisible();
+  const summaryOpen = canvas.getByText(args.action);
+  await expect(summaryOpen).toBeVisible();
+
+  await userEvent.click(summaryOpen);
+  await expect(image).toBeVisible();
+  await expect(warning).toBeVisible();
 };

package/nationalarchives/stories/design/about.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Design/Prototyping" />
+
+# Prototyping with the styles
+
+The National Archives frontend styles include support for the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk/).
+
+You can use the components and styles within the prototype kit to make rich HTML prototypes.
+
+## Create a new prototype
+
+1. Create an empty directory `mkdir my-new-prototype`
+1. Use `npx govuk-prototype-kit create` to create a new prototype project
+1. Install the frontend styles with `npm install @nationalarchives/frontend`
+1. Run `npm run dev` to start up the prototype kit
+1. Use the National Archives components!
+
+```Nunjucks
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+{{ tnaButton({
+  text: "I am a button",
+  url: "#"
+}) }}
+```

package/nationalarchives/stories/development/about.mdx

@@ -15,7 +15,7 @@ TNA needed a frontend toolkit that was:
 - progressively enhanced - all components should still be operable without JavaScript, CSS or both
 - importable into projects (via a service such as [NPM](https://www.npmjs.com/search?q=nationalarchives)) - to make dependency management as simple as possible
 - agnostic - the implementation for the markup of the components can be replicated in any required technology (because we have Python, PHP and Java applications throughout the organisation)
-- testable - both from an internal perspective as well as providing scenarios and expected results for language implimentations to be able to validate against
+- testable - both from an internal perspective as well as providing scenarios and expected results for language implementations to be able to validate against
 - lean - minimal reliance on other languages and dependencies to ensure good extendability and speed of development and deployment
 - automatically published - leveraging CI/CD, creating a new release version should be as simple as possible
 

package/nationalarchives/stories/development/publishing.mdx

@@ -9,6 +9,7 @@ import { Meta } from "@storybook/blocks";
 1. Run `nvm use` to ensure the correct Node version is used
 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

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

@@ -0,0 +1,44 @@
+const argTypes = {
+  supertitle: { control: "text" },
+  title: { control: "text" },
+  level: { control: "number", min: 1, max: 6, step: 1 },
+  size: { control: "radio", options: ["m", "l", "xl"] },
+  singleSentence: { control: "boolean" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const Template = ({
+  supertitle,
+  title,
+  level = 3,
+  size = "l",
+  singleSentence,
+}) =>
+  singleSentence
+    ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  <h${level} class="tna-hgroup__title">
+    <span class="tna-hgroup__supertitle">${supertitle}</span>
+    ${title}
+  </h${level}>
+</hgroup>`
+    : `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  <p class="tna-hgroup__supertitle">${supertitle}</p>
+  <h${level} class="tna-hgroup__title">${title}</h${level}>
+</hgroup>`;
+
+export const HeadingGroup = Template.bind({});
+HeadingGroup.args = {
+  supertitle: "The story of",
+  title: "Alice Hawkins",
+  singleSentence: true,
+};
+
+export const HeadingGroupSeparated = Template.bind({});
+HeadingGroupSeparated.args = {
+  supertitle: "Record revealed",
+  title: "The Monteagle Letter",
+};

package/nationalarchives/stories/{global → utilities}/headings.stories.js

@@ -4,7 +4,7 @@ const argTypes = {
 };
 
 export default {
-  title: "Global styles/Typography",
+  title: "Utilities/Typography",
   argTypes,
 };
 

package/nationalarchives/stories/utilities/lists.stories.js

@@ -0,0 +1,38 @@
+const argTypes = {
+  items: { control: "object" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const UnorderedListTemplate = ({ items, plain }) =>
+  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
+    (list, item) => `${list}<li>${item}</li>`,
+    ""
+  )}</ul>`;
+export const UnorderedList = UnorderedListTemplate.bind({});
+UnorderedList.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+};
+export const UnorderedListPlain = UnorderedListTemplate.bind({});
+UnorderedListPlain.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  plain: true,
+};
+
+const OrderedListTemplate = ({ items, plain }) =>
+  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
+    (list, item) => `${list}<li>${item}</li>`,
+    ""
+  )}</ol>`;
+export const OrderedList = OrderedListTemplate.bind({});
+OrderedList.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+};
+export const OrderedListPlain = OrderedListTemplate.bind({});
+OrderedListPlain.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  plain: true,
+};

package/nationalarchives/stories/{global → utilities}/typography.mdx

@@ -1,7 +1,8 @@
-import { Meta, Primary, Controls, Story, Canvas, Typeset } from "@storybook/blocks";
+import { Meta, Canvas } from "@storybook/blocks";
 import * as HeadingStories from './headings.stories';
 import * as HeadingGroupStories from './heading-groups.stories';
 import * as TypographyStories from './typography.stories';
+import * as ListStories from './lists.stories';
 
 <Meta of={TypographyStories} />
 
@@ -9,14 +10,13 @@ import * as TypographyStories from './typography.stories';
 
 We use a set of typefaces...
 
-<Story of={HeadingStories.Heading1} />
-<Story of={HeadingStories.Heading2} />
-<Story of={HeadingStories.Heading3} />
-<Story of={HeadingGroupStories.HeadingGroup} />
-<Story of={TypographyStories.BodyFont} />
-
 <Canvas of={HeadingStories.Heading1} />
 <Canvas of={HeadingStories.Heading2} />
 <Canvas of={HeadingStories.Heading3} />
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-<Canvas of={TypographyStories.BodyFont} />
+<Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+<Canvas of={TypographyStories.Paragraph} />
+<Canvas of={ListStories.UnorderedList} />
+<Canvas of={ListStories.UnorderedListPlain} />
+<Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.OrderedListPlain} />

package/nationalarchives/stories/utilities/typography.stories.js

@@ -0,0 +1,14 @@
+const argTypes = {
+  text: { control: "text" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const ParagraphTemplate = ({ text }) => `<p class="tna-p">${text}</p>`;
+export const Paragraph = ParagraphTemplate.bind({});
+Paragraph.args = {
+  text: "This is some body text",
+};

package/nationalarchives/templates/homepage.njk

@@ -0,0 +1,64 @@
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+
+{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+
+{% block pageTitle %}The National Archives | Welcome{% endblock %}
+
+{% block content %}
+<div class="tna-container">
+  <div class="tna-column tna-column--full">
+    <h1 class="tna-heading tna-heading--xl">
+      Welcome
+    </h1>
+  </div>
+  <div class="tna-column tna-column--full">
+    {{ tnaCard({
+      "heading": {
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "level": 2,
+        "size": "m"
+      },
+      "href": "#",
+      "image": {
+        "src": "https://loremflickr.com/640/360",
+        "alt": "A placeholder image"
+      },
+      "body": "<p>Card body</p>",
+      "actions": [
+        {
+          "text": "Card action",
+          "href": "#",
+          "title": "Go and do the action"
+        }
+      ],
+      "featured": true,
+      "htmlElement": "article"
+    }) }}
+  </div>
+  {% for item in range(0, 6) -%}
+  <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny">
+    {{ tnaCard({
+      "heading": {
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "level": 3
+      },
+      "href": "#",
+      "image": {
+        "src": "https://loremflickr.com/640/360",
+        "alt": "A placeholder image"
+      },
+      "body": "<p>Card body</p>",
+      "actions": [
+        {
+          "text": "Card action",
+          "href": "#",
+          "title": "Go and do the action"
+        }
+      ]
+    }) }}
+  </div>
+  {%- endfor %}
+</div>
+{% endblock %}

package/nationalarchives/templates/layouts/_generic.njk

@@ -0,0 +1,60 @@
+{# 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 }}">
+  <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 %}
+        {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+    {% 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 %}
+  </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>
+</html>

package/nationalarchives/templates/search-results.njk

@@ -0,0 +1,38 @@
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+
+{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+
+{% block pageTitle %}The National Archives | Results{% endblock %}
+
+{% block main %}
+    <div class="tna-container">
+        <div class="tna-column tna-column--1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny">
+            <h2>Search filters...</h2>
+        </div>
+        <main class="tna-main-wrapper tna-column tna-column--container tna-column--3-4 tna-column--width-2-3-medium tna-column--full-small tna-column--full-tiny {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+            {% block beforeContent %}{% endblock %}
+            <div class="tna-column tna-column--full">
+                <h1 class="tna-heading tna-heading--xl">
+                    Search results for "foobar"
+                </h1>
+            </div>
+            {% for item in range(0, 6) -%}
+                <div class="tna-column tna-column--width-1-2 tna-column--width-full-small tna-column--width-full-tiny">
+                    {{ tnaCard({
+                        "heading": {
+                            "supertitle": "Card supertitle",
+                            "title": "Card title",
+                            "level": 2
+                        },
+                        "href": "#",
+                        "image": {
+                            "src": "https://loremflickr.com/640/360",
+                            "alt": "A placeholder image"
+                        },
+                        "body": "<p>Card body</p>",
+                    }) }}
+                </div>
+            {%- endfor %}
+        </main>
+    </div>
+{% endblock %}

package/nationalarchives/templates/topics.njk

@@ -0,0 +1,42 @@
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+{% from "nationalarchives/components/hero/macro.njk" import tnaHero %}
+
+{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+
+{% block pageTitle %}The National Archives | Topics{% endblock %}
+
+{% block main %}
+<main class="tna-main-wrapper">
+    {{ tnaHero({
+        "heading": "Title",
+        "body": "<p>Body</p>",
+        "image": {
+            "src": "https://picsum.photos/id/29/640/360",
+            "alt": "A placeholder image",
+            "information": "Photo of some mountains by a famous photographer, ©2012"
+        }
+    }) }}
+    <div class="tna-container">
+        <div class="tna-column tna-column--full">
+            <h2>Topic title</h2>
+        </div>
+        {% for item in range(0, 6) -%}
+            <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-full-small tna-column--width-full-tiny">
+                {{ tnaCard({
+                    "heading": {
+                        "supertitle": "Card supertitle",
+                        "title": "Card title",
+                        "level": 3
+                    },
+                    "href": "#",
+                    "image": {
+                        "src": "https://loremflickr.com/640/360",
+                        "alt": "A placeholder image"
+                    },
+                    "body": "<p>Card body</p>",
+                }) }}
+            </div>
+        {%- endfor %}
+    </div>
+</main>
+{% endblock %}

package/nationalarchives/tools/_all.scss

@@ -1,2 +1,3 @@
-@import "exports";
-@import "grid";
+@use "grid";
+@use "media";
+@use "typography";

package/nationalarchives/tools/_grid.scss

@@ -1,15 +1,17 @@
-@import "../variables/all";
+@use "sass:math";
+@use "../variables/grid";
 
 @mixin columns-generator($count, $suffix: "") {
   @for $i from 1 through $count - 1 {
-    $simplestFractionFound: false;
+    $simplest-fraction-found: false;
 
     @for $j from math.div($count, 2) through 1 {
       @if (
-        $count % $j == 0 and $i % $j == 0 and $simplestFractionFound != true
+        $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true
       ) {
         .tna-column--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
           width: math.div(100%, $count) * $i;
+          flex: none;
         }
 
         // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
@@ -20,13 +22,14 @@
         //   margin-left: math.div(100%, $count) * $i;
         // }
 
-        $simplestFractionFound: true;
+        $simplest-fraction-found: true;
       }
     }
 
-    @if ($simplestFractionFound != true) {
+    @if $simplest-fraction-found != true {
       .tna-column--width-#{$i}-#{$count}#{$suffix} {
         width: math.div(100%, $count) * $i;
+        flex: none;
       }
 
       //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
@@ -39,93 +42,3 @@
     }
   }
 }
-
-@mixin grid-medium {
-  .tna-column--width-full-medium {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-medium {
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-medium {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-medium, "-medium");
-}
-
-@mixin grid-mobile {
-  .tna-container {
-    padding-right: math.div($gutter-width-mobile, 2) + 0.75rem;
-    padding-left: math.div($gutter-width-mobile, 2) + 0.75rem;
-  }
-
-  .tna-column {
-    padding-right: math.div($gutter-width-mobile, 2);
-    padding-left: math.div($gutter-width-mobile, 2);
-  }
-
-  // .column--width-full-mobile {
-  //   width: 100%;
-  // }
-
-  // @for $i from 1 through 3 {
-  //   .column--flex-#{$i}-mobile {
-  //     flex: $i 0;
-  //   }
-  // }
-
-  //   @for $i from 1 through 3 {
-  //     .column--order-#{$i}-mobile {
-  //       order: $i;
-  //     }
-  //   }
-}
-
-@mixin grid-small {
-  .tna-column--width-full-small {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-small {
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-small {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-small, "-small");
-}
-
-@mixin grid-tiny {
-  .tna-column--width-full-tiny {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-tiny {
-      width: auto;
-
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-tiny {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-tiny, "-tiny");
-}

package/nationalarchives/tools/_media.scss

@@ -0,0 +1,62 @@
+@use "../variables/media";
+
+//   0 ============= 480 ===== 768 == 1024 ==========================
+//   |               |         |      |
+//   | TINY          | SMALL   | MED  | LARGE
+//   |               |         |      |
+//   |<------------->|         .      .            on-tiny
+//   |<----------------------->|      .            on-mobile
+//   |<------------------------------>|            on-smaller-than-large
+//   .               |<------->|      .            on-small
+//   .               |<-------------------------   on-larger-than-tiny
+//   .               .         |<---->|            on-medium
+//   .               .         |<---------------   on-larger-than-mobile
+//   .               .         .      |<--------   on-large
+
+@mixin on-large() {
+  @media #{media.$media-large} {
+    @content;
+  }
+}
+
+@mixin on-medium() {
+  @media #{media.$media-medium} {
+    @content;
+  }
+}
+
+@mixin on-small() {
+  @media #{media.$media-small} {
+    @content;
+  }
+}
+
+@mixin on-tiny() {
+  @media #{media.$media-tiny} {
+    @content;
+  }
+}
+
+@mixin on-larger-than-mobile() {
+  @media #{media.$media-gt-mobile} {
+    @content;
+  }
+}
+
+@mixin on-larger-than-tiny() {
+  @media #{media.$media-gt-tiny} {
+    @content;
+  }
+}
+
+@mixin on-smaller-than-large() {
+  @media #{media.$media-lt-large} {
+    @content;
+  }
+}
+
+@mixin on-mobile() {
+  @media #{media.$media-mobile} {
+    @content;
+  }
+}

package/nationalarchives/tools/_typography.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "../variables/typography";
+
+@mixin relative-font-size($fontSizePx) {
+  font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
+}

package/nationalarchives/utilities/_all.scss

@@ -1,2 +1,2 @@
-@import "global";
-@import "typography";
+@use "global";
+@use "typography";