@nationalarchives/frontend 0.1.3-prerelease

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

@@ -0,0 +1,106 @@
+[
+  {
+    "name": "columns",
+    "type": "array",
+    "required": false,
+    "description": "An array of column item objects.",
+    "params": [
+      {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "widthMedium",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "widthSmall",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "widthTiny",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "flex",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "flexMedium",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "flexSmall",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "flexTiny",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the column."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the navigation item."
+      }
+    ]
+  },
+  {
+    "name": "maxWidth",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "noPadding",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "htmlElement",
+    "type": "string",
+    "required": false,
+    "description": "HTML element of the container."
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the container."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the container."
+  }
+]

package/nationalarchives/components/grid/macro.njk

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

package/nationalarchives/components/grid/template.njk

@@ -0,0 +1,44 @@
+{%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.maxWidth -%}
+    {%- set containerClasses = containerClasses.concat('tna-container--max') -%}
+{%- endif -%}
+{%- if params.noPadding -%}
+    {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%}
+{%- endif -%}
+<{{ htmlElement }} class="tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- for item in params.columns -%}
+    {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}
+    {%- set columnClasses = [item.classes] if item.classes else [] -%}
+    {%- if item.width -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--full') if item.width == 'full' else ( columnClasses.concat('tna-column--width-' + item.width) ) -%}
+    {%- endif -%}
+    {%- if item.widthMedium -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--full-medium') if item.widthMedium == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthMedium + '-medium') ) -%}
+    {%- endif -%}
+    {%- if item.widthSmall -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--full-small') if item.widthSmall == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthSmall + '-small') ) -%}
+    {%- endif -%}
+    {%- if item.widthTiny -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--full-tiny') if item.widthTiny == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthTiny + '-tiny') ) -%}
+    {%- endif -%}
+    {%- if item.flex -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flex) -%}
+    {%- endif -%}
+    {%- if item.flexMedium -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexMedium + '-medium') -%}
+    {%- endif -%}
+    {%- if item.flexSmall -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexSmall + '-small') -%}
+    {%- endif -%}
+    {%- if item.flexTiny -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%}
+    {%- endif -%}
+    {%- if item.noPadding -%}
+        {%- set columnClasses = columnClasses.concat('tna-column--noPadding') -%}
+    {%- endif -%}
+    <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ item.html | safe }}
+    </{{ columnHtmlElement }}>
+{%- endfor -%}
+</{{ htmlElement }}>

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

@@ -0,0 +1,84 @@
+@include nationalarchives-exports(
+  "nationalarchives/components/sensitive-image"
+) {
+  .tna-sensitive-image {
+  }
+
+  .tna-sensitive-image__warning {
+  }
+
+  .tna-sensitive-image__details {
+    position: relative;
+
+    // overflow: hidden;
+
+    &::after {
+      width: 100%;
+      padding-bottom: calc(
+        100% * var(--sensitive-image-height) / var(--sensitive-image-width)
+      );
+
+      display: block;
+
+      position: relative;
+      z-index: -1;
+
+      background-image: var(--sensitive-image);
+      background-clip: padding-box;
+      background-size: contain;
+
+      filter: blur(15px) saturate(0);
+
+      content: "";
+    }
+  }
+
+  .tna-sensitive-image__show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+
+    font-size: 0;
+
+    cursor: pointer;
+
+    &::after {
+      padding: 0.5rem 2rem;
+
+      font-size: 1rem;
+
+      background-color: #ff0;
+
+      content: attr(data-action);
+    }
+
+    &:hover {
+      &::after {
+        color: #fff;
+
+        background-color: #000;
+      }
+    }
+  }
+
+  .tna-sensitive-image__container {
+  }
+
+  .tna-sensitive-image__image {
+    width: 100%;
+  }
+
+  .tna-sensitive-image__details[open] {
+    &::after,
+    .tna-sensitive-image__show {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

package/nationalarchives/components/sensitive-image/fixtures.json

@@ -0,0 +1,54 @@
+{
+  "component": "sensitive image",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {
+        "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"
+      },
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "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": "sensitive-image__test-class"
+      },
+      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "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",
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/sensitive-image/macro-options.json

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "image",
+    "type": "object",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "string",
+        "required": true,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "warning",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "action",
+    "type": "string",
+    "required": true,
+    "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/sensitive-image/macro.njk

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

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

@@ -0,0 +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})()));
+//# sourceMappingURL=sensitive-image.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,26 @@
+function SensitiveImage($module) {
+  this.$module = $module;
+  this.$imageDetails =
+    $module && $module.querySelector(".tna-sensitive-image__details");
+  this.$image = $module && $module.querySelector(".tna-sensitive-image__image");
+  this.imageIsVisible = false;
+}
+
+SensitiveImage.prototype.init = function () {
+  console.log(this);
+  if (!this.$module || !this.$imageDetails || !this.$image) {
+    return;
+  }
+  this.$imageDetails.addEventListener(
+    "toggle",
+    this.handleImageDetailsToggle.bind(this)
+  );
+};
+
+SensitiveImage.prototype.handleImageDetailsToggle = function (e) {
+  if (this.$imageDetails.hasAttribute("open")) {
+    this.$image.focus({ preventScroll: true, focusVisible: true });
+  }
+};
+
+export default SensitiveImage;

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

@@ -0,0 +1,49 @@
+import SensitiveImage from "./template.njk";
+import "../../all.scss";
+import "./_sensitive-image.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  src: { control: "text" },
+  alt: { control: "text" },
+  warning: { control: "text" },
+  action: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "text" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType
+  )?.description;
+});
+
+export default {
+  title: "Components/Sensitive image",
+  argTypes,
+};
+
+const Template = ({ image, warning, action, classes, attributes }) => {
+  return SensitiveImage({
+    params: {
+      image,
+      warning,
+      action,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.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",
+};

package/nationalarchives/components/sensitive-image/template.njk

@@ -0,0 +1,10 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-sensitive-image {{ containerClasses | join(' ') }}" data-module="tna-sensitive-image" style="--sensitive-image: url('{{ params.image.src }}'); --sensitive-image-width: {{ params.image.width }}; --sensitive-image-height: {{ params.image.height }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    <p class="tna-sensitive-image__warning">{{ params.warning }}</p>
+    <details class="tna-sensitive-image__details">
+        <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
+        <div class="tna-sensitive-image__container">
+            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
+        </div>
+    </details>
+</div>

package/nationalarchives/stories/development/structure.mdx

@@ -0,0 +1,7 @@
+import { Meta, Primary, Controls, Story } from "@storybook/blocks";
+
+<Meta title="Development/Structure" />
+
+# Project Structure
+
+[Technical details]

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

@@ -0,0 +1,23 @@
+const argTypes = {
+  supertitle: { control: "text" },
+  title: { control: "text" },
+};
+
+export default {
+  title: "Global styles/Typography",
+  argTypes,
+};
+
+const Template = ({
+  supertitle,
+  title,
+}) => `<hgroup class="tna-hgroup tna-hgroup--heading-2">
+  <p class="tna-hgroup__supertitle">${supertitle}</p>
+  <h2 class="tna-hgroup__title">${title}</h2>
+</hgroup>`;
+
+export const HeadingGroup = Template.bind({});
+HeadingGroup.args = {
+  supertitle: "The story of",
+  title: "This is a title",
+};

package/nationalarchives/stories/global/headings.stories.js

@@ -0,0 +1,40 @@
+const argTypes = {
+  text: { control: "text" },
+  size: { control: "text" },
+};
+
+export default {
+  title: "Global styles/Typography",
+  argTypes,
+};
+
+const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
+  params.size ? ` tna-heading--${params.size}` : ""
+}">
+  ${params.text} (level ${level})
+</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);
+
+export const Heading1 = Heading1Template.bind({});
+Heading1.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/global/typography.mdx

@@ -0,0 +1,22 @@
+import { Meta, Primary, Controls, Story, Canvas, Typeset } from "@storybook/blocks";
+import * as HeadingStories from './headings.stories';
+import * as HeadingGroupStories from './heading-groups.stories';
+import * as TypographyStories from './typography.stories';
+
+<Meta of={TypographyStories} />
+
+# Typography
+
+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} />

package/nationalarchives/stories/global/typography.stories.js

@@ -0,0 +1,15 @@
+const argTypes = {
+  text: { control: "text" },
+};
+
+export default {
+  title: "Global styles/Typography",
+  argTypes,
+};
+
+const BodyFontTemplate = ({ text }) => `<p>${text}</p>`;
+
+export const BodyFont = BodyFontTemplate.bind({});
+BodyFont.args = {
+  text: "This is some body text",
+};

package/nationalarchives/tools/_all.scss

@@ -0,0 +1 @@
+@import "exports";

package/nationalarchives/tools/_exports.scss

@@ -0,0 +1,36 @@
+////
+/// @group tools
+////
+
+/// List of modules which have already been exported
+///
+/// @type List
+/// @access private
+
+$_nationalarchives-imported-modules: () !default;
+
+/// Export module
+///
+/// Ensure that the modules of CSS that we define throughout Frontend are only
+/// included in the generated CSS once, no matter how many times they are
+/// imported across the individual components.
+///
+/// @param {String} $name - Name of module - must be unique within the codebase
+/// @content The passed content will only be outputted if a module of the same
+///   $name has not already been outputted
+/// @access public
+
+@mixin nationalarchives-exports($name) {
+  // If the mixin is not in the list of modules already exported...
+  @if not index($_nationalarchives-imported-modules, $name) {
+    // ... then add it to the list
+    $_nationalarchives-imported-modules: append(
+      $_nationalarchives-imported-modules,
+      $name
+    ) !global;
+    // ... and output the CSS for that module
+    @content;
+  }
+  // The next time exports is called for the module of the same name, it will be
+  // found in the list and so nothing will be outputted.
+}

package/nationalarchives/utilities/_all.scss

@@ -0,0 +1,3 @@
+@import "global";
+@import "grid";
+@import "typography";

package/nationalarchives/utilities/_global.scss

@@ -0,0 +1,39 @@
+.tna-template {
+  min-width: 320px;
+  width: 100%;
+  height: 100%;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  @media (prefers-reduced-motion) {
+    * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}
+
+.tna-template__body {
+  margin: 0;
+  padding: 0;
+
+  background-color: #fff;
+
+  overflow: auto;
+}
+
+img,
+svg,
+video,
+canvas {
+  max-width: 100%;
+
+  display: block;
+}
+
+video,
+canvas {
+  width: 100%;
+}