@nationalarchives/frontend 0.1.6-prerelease → 0.1.8-prerelease

package/nationalarchives/components/hero/macro-options.json

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "image",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "information",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the card."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the card."
+  }
+]

package/nationalarchives/components/hero/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaHero(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/hero/template.njk

@@ -0,0 +1,32 @@
+{%- set classes = [params.classes] if params.classes else [] -%}
+<header class="tna-hero {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image">
+    {%- if params.image.information -%}
+    <details class="tna-hero__image-details">
+        <summary class="tna-hero__image-details-summary">
+            <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
+        </summary>
+        <div class="tna-hero__image-information">
+            <p>{{ params.image.information }}</p>
+        </div>
+    </details>
+    {%- endif -%}
+    <div class="tna-container tna-hero__inner">
+        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
+            <div class="tna-hero__content-inner">
+                {%- if params.heading -%}
+                <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+                    {{ params.heading }}
+                </h1>
+                {%- endif -%}
+                <div class="tna-hero__body">
+                {%- if params.text -%}
+                    <p>{{ params.text }}</p>
+                {%- elseif params.body -%}
+                    {{ params.body | safe }}
+                {%- endif -%}
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

package/nationalarchives/components/sensitive-image/_index.scss

@@ -1,81 +1,77 @@
 @use "../../tools/typography" as typographyTools;
 
 .tna-sensitive-image {
-}
-
-.tna-sensitive-image__warning {
-}
+  &__warning {
+  }
 
-.tna-sensitive-image__details {
-  position: relative;
+  &__details {
+    position: relative;
 
-  // overflow: hidden;
+    // overflow: hidden;
 
-  &::after {
-    width: 100%;
-    padding-bottom: calc(
-      100% * var(--sensitive-image-height) / var(--sensitive-image-width)
-    );
+    &::after {
+      width: 100%;
+      padding-bottom: calc(
+        100% * var(--sensitive-image-height) / var(--sensitive-image-width)
+      );
 
-    display: block;
+      display: block;
 
-    position: relative;
-    z-index: -1;
+      position: relative;
+      z-index: -1;
 
-    background-image: var(--sensitive-image);
-    background-clip: padding-box;
-    background-size: contain;
+      background-image: var(--sensitive-image);
+      background-clip: padding-box;
+      background-size: contain;
 
-    filter: blur(20px) saturate(0);
+      filter: blur(20px) saturate(0);
 
-    content: "";
+      content: "";
+    }
   }
-}
 
-.tna-sensitive-image__show {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  &__show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
 
-  font-size: 0;
+    font-size: 0;
 
-  cursor: pointer;
+    cursor: pointer;
 
-  &::after {
-    padding: 0.5rem 2rem;
+    &::after {
+      padding: 0.5rem 2rem;
 
-    @include typographyTools.relativeFontSize(16);
-    background-color: #ff0;
+      @include typographyTools.relative-font-size(16);
+      background-color: #ff0;
 
-    content: attr(data-action);
-  }
+      content: attr(data-action);
+    }
 
-  &:hover {
-    &::after {
-      color: #fff;
+    &:hover {
+      &::after {
+        color: #fff;
 
-      background-color: #000;
+        background-color: #000;
+      }
     }
   }
-}
 
-.tna-sensitive-image__container {
-}
+  &__container {
+  }
 
-.tna-sensitive-image__image {
-  width: 100%;
-}
+  &__image {
+    width: 100%;
+  }
 
-.tna-sensitive-image__details[open] {
-  &::after,
-  .tna-sensitive-image__show {
-    display: none;
+  &__details[open] {
+    &::after,
+    .tna-sensitive-image__show {
+      display: none;
+    }
   }
 }

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}e.r(t),e.d(t,{default:()=>o}),i.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},i.prototype.handleImageDetailsToggle=function(e){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const o=i;return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}e.r(t),e.d(t,{default:()=>o}),i.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},i.prototype.handleImageDetailsToggle=function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const o=i;return t})()));
 //# sourceMappingURL=sensitive-image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/sensitive-image/sensitive-image.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,8CAAgDC,IACtH,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,KCL9D,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,8BAEAN,EAAeN,UAAUa,KAAO,WAC9BC,QAAQC,IAAIP,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcO,iBACjB,SACAR,KAAKS,yBAAyBC,KAAKV,MAEvC,EAEAF,EAAeN,UAAUiB,yBAA2B,SAAUE,GACxDX,KAAKC,cAAcW,aAAa,SAClCZ,KAAKG,OAAOU,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,U","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/sensitive-image/sensitive-image.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/sensitive-image/sensitive-image\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function (e) {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","init","console","log","addEventListener","handleImageDetailsToggle","bind","e","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}
+{"version":3,"file":"components/sensitive-image/sensitive-image.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,8CAAgDC,IACtH,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,KCL9D,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,8BAEAN,EAAeN,UAAUa,KAAO,WAC9BC,QAAQC,IAAIP,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcO,iBACjB,SACAR,KAAKS,yBAAyBC,KAAKV,MAEvC,EAEAF,EAAeN,UAAUiB,yBAA2B,WAC9CT,KAAKC,cAAcU,aAAa,SAClCX,KAAKG,OAAOS,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,U","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/sensitive-image/sensitive-image.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/sensitive-image/sensitive-image\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function () {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","init","console","log","addEventListener","handleImageDetailsToggle","bind","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}

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,6 +1,8 @@
 import SensitiveImage from "./template.njk";
 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" },
@@ -8,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) => {
@@ -45,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/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/templates/homepage.njk

@@ -1,6 +1,6 @@
 {% from "nationalarchives/components/card/macro.njk" import tnaCard %}
 
-{% extends "layouts/_generic.njk" %}
+{% extends "nationalarchives/templates/layouts/_generic.njk" %}
 
 {% block pageTitle %}The National Archives | Welcome{% endblock %}
 
@@ -36,7 +36,7 @@
       "htmlElement": "article"
     }) }}
   </div>
-  {% for item in range(0, 12) -%}
+  {% 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": {

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 @@
 @use "grid";
+@use "media";
 @use "typography";

package/nationalarchives/tools/_grid.scss

@@ -3,11 +3,11 @@
 
 @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;
@@ -22,11 +22,11 @@
         //   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;

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

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

package/nationalarchives/utilities/_global.scss

@@ -9,7 +9,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
-  font-size: typography.$baseFontSizePx;
+  font-size: typography.$base-font-size-px;
 
   @media (prefers-reduced-motion) {
     * {