@nationalarchives/frontend 0.1.3-prerelease

package/README.md

@@ -0,0 +1,191 @@
+<img src="./src/nationalarchives/assets/images/tna-horizontal-logo-inverted.svg" alt="The National Archives logo" title="The National Archives" width="120" />
+
+# The National Archives Frontend
+
+[![Main build status](https://github.com/nationalarchives/tna-frontend/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/nationalarchives/tna-frontend/actions/workflows/test.yml?query=branch%3Amain)
+[![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
+[![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend)
+[![Node version](https://img.shields.io/node/v-lts/@nationalarchives/frontend?style=flat-square&logo=nodedotjs&logoColor=white)](https://github.com/nationalarchives/tna-frontend/blob/main/.nvmrc)
+[![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend?style=flat-square)](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
+
+The National Archives Frontend contains the code you need to start building a user interface for  National Archives platforms and services.
+
+## Quickstart
+
+```sh
+# Node version
+nvm use
+
+# Install dependencies
+npm install
+
+# Start Storybook
+npm start
+```
+
+### Updating
+
+```sh
+# Upgrade all Storybook packages
+npx sb upgrade
+```
+
+### Release
+
+```sh
+# Update version in package.json
+npm install
+# Commit and push to main
+git tag v0.1.0
+git push origin --tags
+# Create a new release on GitHub: https://github.com/nationalarchives/tna-frontend/releases/new
+```
+
+## Needs
+
+TNA needs a frontend toolkit that is:
+
+- standardised - a single source of truth for all TNA that follows all our coding standards (currently non-existent)
+- version controlled - as well as [semantically versioned](https://semver.org/) with a [changelog](https://keepachangelog.com/en/1.0.0/)
+- open - all source code should be [open and available to anyone](https://www.gov.uk/service-manual/service-standard/point-12-make-new-source-code-open)
+- accessible - all components meet WCAG 2.1 AA standards
+- 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
+- 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
+
+It would also be nice to have a toolkit that is:
+
+- extendable - rather than providing a static snapshot of the toolkit, we should always be able to extend it for any given application
+- documentable - not just from a technical perspective but also from a user-centred design perspective with best practices of when and how to use each component (this might be a separate project where we can [share information such as user research](https://www.gov.uk/service-manual/service-standard/point-13-use-common-standards-components-patterns))
+- prototype-able - by using Nunjucks, we could easily create a toolkit that integrated with the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk/docs/) which means we could very easily create high fidelity prototypes to test with, ultimately helping with user research
+
+## Current solutions
+
+There is already a solution in [nationalarchives/tdr-components](https://github.com/nationalarchives/tdr-components) which is specific to TDR and extends the GOV.UK components and styles. We need to create a more generic set of components that are suitable for every TNA service, while still extending the GOV.UK components and styles but with a more TNA-branded look and feel.
+
+We also have [nationalarchives/tna-frontend-design-toolkit](https://github.com/nationalarchives/tna-frontend-design-toolkit) which aims to provide similar functionality but isn't as featureful as we need and isn't published to NPM which means it has to be [copied into the projects that require it](https://github.com/nationalarchives/ds-wagtail/tree/develop/sass/tna-toolkit).
+
+## Proposed solution
+
+This repository should hold all the JavaScript and SCSS source files required for all the frontend styles along with tests and expected markup.
+
+### Output
+
+The source files will be compiled down to a NodeJS package and deployed to [NPM](https://www.npmjs.com/). The package will contain:
+
+- All the JavaScript and SCSS source files which can be imported into a projects source code and compiled by the project (which will allow for tree shaking and application-specific modifications)
+- An AMD/UMD/IIFE (TBD) ES5 JavaScript file which can be included with a normal `<script>` element
+- A single CSS file containing all the styles which can be included with a normal `<style>` element
+- The Nunjucks templates for each component that might be required in other projects such as prototyping tools (other implementations can be made such as [Jinja templates](https://github.com/nationalarchives/tna-frontend-jinja))
+
+### Component resources
+
+Each component in this repository should contain:
+
+- Nunjucks template - only used to display the component within the examples page and aid development
+- SCSS - which could either be imported as a standalone styles declaration or as part of the compiled output
+- JavaScript (ESNext) - if there is any progressive enhancement required on the component
+- Options/properties - a list of the configurable properties of the component and their types
+- Test scenarios - a variety of configurations and their expected outputs that can be used by either this repository or other implementations of the components (e.g. Jinja)
+
+### Technologies
+
+- SCSS (used by GDS, is the de facto standard CSS preprocessor, already using in ETNA)
+- Webpack - compilation of JavaScript and CSS (used by numerous TNA projects already)
+- Babel - will allow us to use ESNext or possibly even TypeScript (although this could go against the lean requirement)
+- Storybook - allow viewing and testing of components (we have already used this elsewhere in TNA)
+
+### Relationship to other resources
+
+#### System context
+
+```mermaid
+C4Context
+    Person(dev, "Developer", "TNA developer")
+    System_Ext(github, "GitHub", "Repositories for source files")
+    System_Ext(npm, "NPMJS", "Hosts NodeJS packages")
+    System_Ext(pypi, "PyPi", "Hosts Python packages")
+    Container(app, "Application", "Example application")
+    System_Ext(pypi, "PyPi", "Hosts Python packages")
+
+    Rel(dev, github, "commits to", "git")
+    UpdateRelStyle(dev, github, $offsetX="-30", $offsetY="-30")
+    Rel(github, npm, "publishes to", "npm")
+    Rel(github, pypi, "publishes to", "pip")
+    Rel(app, npm, "consumes", "npm")
+    Rel(app, pypi, "consumes", "pip")
+
+    UpdateLayoutConfig($c4ShapeInRow="2")
+```
+
+#### Component diagram
+
+```mermaid
+C4Context
+    Person(dev, "Developer", "TNA developer")
+
+    %% Boundary(developer_machine, "Developer machine", "boundary") {
+    %%     System(docker, "Docker")
+    %% }
+
+    Boundary(github, "GitHub", "boundary") {
+        Boundary(github_jinja, "Jinja templates", "repository") {
+            Container(github_jinja_source, "Jinja templates")
+        }
+
+        Boundary(github_frontend, "Frontend styles", "repository") {
+            Container(github_frontend_source, "Frontend styles", "git repository")
+        }
+
+        Boundary(github_application, "Application", "repository") {
+            Container(github_application_source, "Application source code")
+            Component(github_application_image, "Application docker image", "GitHub image registry")
+        }
+    }
+
+    Boundary(npm, "NPMJS", "boundary") {
+        Component(npm_package, "Frontend styles")
+    }
+
+    Enterprise_Boundary(aws, "TNA AWS", "boundary") {
+        Container(app, "Application")
+    }
+
+    Boundary(pypi, "PyPi", "boundary") {
+        Component(pypi_package, "Jinja templates")
+    }
+
+    Rel(dev, github_frontend_source, "commits to")
+    UpdateRelStyle(dev, github_frontend_source, $offsetX="-80", $offsetY="-80")
+    Rel(github_frontend_source, npm_package, "publishes", "GitHub action")
+    UpdateRelStyle(github_frontend_source, npm_package, $offsetX="-40", $offsetY="-40")
+
+    Rel(dev, github_jinja_source, "commits to")
+    UpdateRelStyle(dev, github_jinja_source, $offsetX="-15", $offsetY="-80")
+    Rel(github_jinja_source, github_frontend_source, "consumes")
+    UpdateRelStyle(github_jinja_source, github_frontend_source, $offsetX="-40", $offsetY="-15")
+    Rel(github_jinja_source, pypi_package, "publishes", "GitHub action")
+    UpdateRelStyle(github_jinja_source, pypi_package, $offsetX="-110", $offsetY="-310")
+
+    Rel(dev, github_application_source, "commits to")
+    UpdateRelStyle(dev, github_application_source, $offsetX="-105", $offsetY="-250")
+    Rel(github_application_source, github_application_image, "creates", "GitHub action")
+    UpdateRelStyle(github_application_source, github_application_image, $offsetX="-90", $offsetY="-20")
+
+    Rel(github_application_image, npm_package, "consumes", "GitHub action")
+    UpdateRelStyle(github_application_image, npm_package, $offsetX="-50", $offsetY="-10")
+    Rel(github_application_image, pypi_package, "consumes", "GitHub action")
+    UpdateRelStyle(github_application_image, pypi_package, $offsetX="-120", $offsetY="-10")
+
+    %% Rel(dev, docker, "uses")
+    %% Rel(docker, npm_package, "consumes")
+    %% Rel(docker, pypi_package, "consumes")
+
+    Rel(app, github_application_image, "consumes")
+    UpdateRelStyle(app, github_application_image, $offsetX="-70", $offsetY="-10")
+
+    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="2")
+```

package/govuk-prototype-kit.config.json

@@ -0,0 +1,14 @@
+{
+  "nunjucksPaths": [
+    "/"
+  ],
+  "scripts": [
+    "/nationalarchives/all.js"
+  ],
+  "assets": [
+    "/nationalarchives/assets"
+  ],
+  "sass": [
+    "/nationalarchives/_prototype-kit.scss"
+  ]
+}

package/nationalarchives/_base.scss

@@ -0,0 +1,6 @@
+$govuk-include-default-font-face: false;
+// $govuk-assets-path: "/govuk-frontend/govuk/assets/" !default;
+
+@import "tools/all";
+
+// @import "govuk-frontend/govuk/base.scss";

package/nationalarchives/_prototype-kit.scss

@@ -0,0 +1,3 @@
+$nationalarchives-assets-path: "/extension-assets/%40tna%2Ffrontend/nationalarchives/assets/";
+
+@import "all";

package/nationalarchives/all.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";.tna-template{min-width:320px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(prefers-reduced-motion){.tna-template *{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%}.tna-template{font-family:"Open Sans",sans-serif;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{font-size:1rem;line-height:1.6}.tna-heading--xl{font-size:4rem}.tna-heading--l{font-size:2rem}.tna-heading--m{font-size:1.3rem}.tna-heading--s{font-size:1.125rem}.tna-hgroup--xl .tna-hgroup__title{font-size:4rem}.tna-hgroup--l .tna-hgroup__title{font-size:2rem}.tna-hgroup--m .tna-hgroup__title{font-size:1.3rem}.tna-hgroup--s .tna-hgroup__title{font-size:1.125rem}.tna-hgroup__supertitle{text-transform:uppercase}.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-container.tna-container--max{max-width:none}.tna-container.tna-container--no-padding{max-width:71.25rem;padding-right:0;padding-left:0}.tna-container.tna-container--no-padding .tna-column{padding-right:0;padding-left:0}.tna-column{padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column.tna-column--full{width:100%}.tna-column--flex-1{flex:1 0}.tna-column--flex-2{flex:2 0}.tna-column--flex-3{flex:3 0}.tna-column--width-1-12{width:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%}.tna-column--width-1-4{width:25%}.tna-column--width-1-3{width:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%}.tna-column--width-1-2{width:50%}.tna-column--width-7-12{width:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%}.tna-column--width-3-4{width:75%}.tna-column--width-5-6{width:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%}@media(min-width: 769px)and (max-width: 1024px){.tna-column--width-full-medium{width:100%}.tna-column--flex-1-medium{flex:1 0}.tna-column--flex-2-medium{flex:2 0}.tna-column--flex-3-medium{flex:3 0}.tna-column--width-1-6-medium{width:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%}.tna-column--width-1-2-medium{width:50%}.tna-column--width-2-3-medium{width:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%}}@media(max-width: 768px){.tna-container{padding-right:1.125rem;padding-left:1.125rem}.tna-column{padding-right:.375rem;padding-left:.375rem}}@media(min-width: 481px)and (max-width: 768px){.tna-column--width-full-small{width:100%}.tna-column--flex-1-small{flex:1 0}.tna-column--flex-2-small{flex:2 0}.tna-column--flex-3-small{flex:3 0}.tna-column--width-1-4-small{width:25%}.tna-column--width-1-2-small{width:50%}.tna-column--width-3-4-small{width:75%}}@media(max-width: 480px){.tna-column--width-full-tiny{width:100%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--width-1-2-tiny{width:50%}}.tna-card{display:-ms-flexbox;display:flex;-ms-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}.tna-card__heading{order:2}.tna-card__image{order:1}.tna-card__body{order:3}.tna-card__actions{order:4}/*# sourceMappingURL=all.css.map */

package/nationalarchives/all.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/utilities/_typography.scss","../../src/nationalarchives/utilities/_global.scss","../../src/nationalarchives/components/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/utilities/_grid.scss","../../src/nationalarchives/components/card/_index.scss"],"names":[],"mappings":"AACQ,sHCDR,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,+BACE,gBACE,0BACA,4BAKN,oBACE,SACA,UAEA,sBAEA,cAGF,qBAIE,eAEA,cAGF,aAEE,WDlCF,cACE,mCACA,eACA,kCACA,mCACA,kCACA,8BACA,cAGF,oBACE,eACA,gBAMF,iBACE,eAGF,gBACE,eAGF,gBACE,iBAGF,gBACE,mBAUA,mCACE,eAQF,kCACE,eAQF,kCACE,iBAQF,kCACE,mBAIJ,wBACE,yBEvEA,eACE,UCPsB,SDQtB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,oBACA,aACA,eACA,wBACA,oBAEA,kCACE,eAGF,yCACE,mBACA,gBACA,eAEA,qDACE,gBACA,eAKN,YACE,mBACA,kBAEA,sBAEA,6BACE,WAUF,oBACE,SADF,oBACE,SADF,oBACE,SE9CE,wBACE,oBADF,uBACE,qBADF,uBACE,UADF,uBACE,qBADF,wBACE,qBADF,uBACE,UADF,wBACE,qBADF,uBACE,qBADF,uBACE,UADF,uBACE,qBADF,yBACE,qBFyDR,gDEzBA,+BACE,WAIA,2BACE,SADF,2BACE,SADF,2BACE,SAvCE,8BACE,qBADF,8BACE,qBADF,8BACE,UADF,8BACE,qBADF,8BACE,sBF6DR,yBETA,eACE,uBACA,sBAGF,YACE,sBACA,sBFMF,+CEeA,8BACE,WAIA,0BACE,SADF,0BACE,SADF,0BACE,SAvFE,6BACE,UADF,6BACE,UADF,6BACE,WFqER,yBE+BA,6BACE,WAIA,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SA7GE,4BACE,WCVR,UACE,oBACA,aACA,wBACA,0BACA,sBAGF,mBACE,QAYF,iBACE,QAGF,gBACE,QAGF,mBACE","file":"all.css"}

package/nationalarchives/all.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={554:(e,t,i)=>{function o(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}i.d(t,{default:()=>n}),o.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},o.prototype.handleImageDetailsToggle=function(e){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const n=o}},t={};function i(o){var n=t[o];if(void 0!==n)return n.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{i.r(o),i.d(o,{SensitiveImage:()=>e.default,initAll:()=>t});var e=i(554),t=function(t){var i=(void 0!==(t=void 0!==t?t:{}).scope?t.scope:document).querySelector('[data-module="tna-sensitive-image"]');new e.default(i).init()}})(),o})()));
+//# sourceMappingURL=all.js.map

package/nationalarchives/all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,wCCTT,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,uBAEAN,EAAeO,UAAUC,KAAO,WAC9BC,QAAQC,IAAIR,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcQ,iBACjB,SACAT,KAAKU,yBAAyBC,KAAKX,MAEvC,EAEAF,EAAeO,UAAUK,yBAA2B,SAAUE,GACxDZ,KAAKC,cAAcY,aAAa,SAClCb,KAAKG,OAAOW,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,S,GCxBIC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAa3B,QAGrB,IAAIC,EAASuB,EAAyBE,GAAY,CAGjD1B,QAAS,CAAC,GAOX,OAHA6B,EAAoBH,GAAUzB,EAAQA,EAAOD,QAASyB,GAG/CxB,EAAOD,OACf,CCrBAyB,EAAoBK,EAAI,CAAC9B,EAAS+B,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEjC,EAASgC,IAC5EE,OAAOC,eAAenC,EAASgC,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOtB,UAAU4B,eAAeC,KAAKH,EAAKC,GCClFd,EAAoBiB,EAAK1C,IACH,oBAAX2C,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAenC,EAAS2C,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAenC,EAAS,aAAc,CAAE6C,OAAO,GAAO,E,6FCHxDC,EAAU,SAACC,GAEf,IAEMC,QAFiC,KADvCD,OAA6B,IAAZA,EAA0BA,EAAU,CAAC,GACzBE,MAAwBF,EAAQE,MAAQC,UAEzCzC,cAC1B,uCAEF,IAAIJ,EAAAA,QAAe2C,GAAenC,MACpC,C","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/components/sensitive-image/sensitive-image.mjs","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/all.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([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","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","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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};","import SensitiveImage from \"./components/sensitive-image/sensitive-image.mjs\";\n\nconst initAll = (options) => {\n  options = typeof options !== \"undefined\" ? options : {};\n  const scope = typeof options.scope !== \"undefined\" ? options.scope : document;\n\n  const $toggleButton = scope.querySelector(\n    '[data-module=\"tna-sensitive-image\"]'\n  );\n  new SensitiveImage($toggleButton).init();\n};\n\nexport { initAll, SensitiveImage };\n"],"names":["root","factory","exports","module","define","amd","self","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","prototype","init","console","log","addEventListener","handleImageDetailsToggle","bind","e","hasAttribute","focus","preventScroll","focusVisible","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","hasOwnProperty","call","r","Symbol","toStringTag","value","initAll","options","$toggleButton","scope","document"],"sourceRoot":""}

package/nationalarchives/all.mjs

@@ -0,0 +1,13 @@
+import SensitiveImage from "./components/sensitive-image/sensitive-image.mjs";
+
+const initAll = (options) => {
+  options = typeof options !== "undefined" ? options : {};
+  const scope = typeof options.scope !== "undefined" ? options.scope : document;
+
+  const $toggleButton = scope.querySelector(
+    '[data-module="tna-sensitive-image"]'
+  );
+  new SensitiveImage($toggleButton).init();
+};
+
+export { initAll, SensitiveImage };

package/nationalarchives/all.scss

@@ -0,0 +1,9 @@
+// This gives us all the helpers and SASS
+// goodness from GovUK (thank you!)
+@import "base";
+
+@import "variables/all";
+
+@import "utilities/all";
+
+@import "components/all";

package/nationalarchives/assets/images/mask-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve">
+    <rect fill="#000" width="77" height="50.66" x="2" y="2" />
+    <rect fill="#000" width="156" height="50.66" x="2" y="54.66" />
+    <rect fill="#000" width="156" height="50.66" x="2" y="107.33" />
+</svg>

package/nationalarchives/assets/images/tna-horizontal-logo-inverted.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 249.9 34.5" style="enable-background:new 0 0 249.9 34.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000;}
+	.st1{fill:#fff;}
+</style>
+<rect class="st0" width="249.9" height="34.3"/>
+<g>
+	<path class="st1" d="M1.2,1.2h48.6v32H1.2V1.2z M0,0v33.1v1.2h50.9v-1.2V0H0z"/>
+	<polygon class="st1" points="13.4,12.3 10,12.3 10,10.4 19,10.4 19,12.3 15.6,12.3 15.6,23.9 13.4,23.9 	"/>
+	<polygon class="st1" points="19.9,10.4 22,10.4 22,16.1 27.3,16.1 27.3,10.4 29.5,10.4 29.5,23.9 27.3,23.9 27.3,18 22,18 22,23.9 
+		19.9,23.9 	"/>
+	<polygon class="st1" points="32,10.4 39.7,10.4 39.7,12.3 34.2,12.3 34.2,16.1 38.8,16.1 38.8,18 34.2,18 34.2,22 39.7,22 
+		39.7,23.9 32,23.9 	"/>
+	<path class="st1" d="M50.9,1.2h49.8h48.6v32H50.9V1.2z M49.7,0v1.2v33.1h100.7V0H49.7z"/>
+	<path class="st1" d="M62.1,10.4h2.4l4,7.9c0.3,0.7,0.7,1.7,1,2.5h0.1c-0.1-1.1-0.2-2.2-0.2-3v-7.4h2.2v13.5h-2.3l-4-7.8
+		c-0.4-0.9-0.7-1.7-1.1-2.6h-0.1c0.1,0.9,0.2,2.1,0.2,3.1v7.2h-2.2C62.1,23.9,62.1,10.4,62.1,10.4z"/>
+	<path class="st1" d="M79.8,18.8l-1.1-3.9c-0.2-0.7-0.3-1.4-0.6-2.4H78c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H79.8z M76.8,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3h-4.1l-0.9,3.3h-2.3L76.8,10.4z"/>
+	<polygon class="st1" points="85.7,12.3 82.3,12.3 82.3,10.4 91.3,10.4 91.3,12.3 87.9,12.3 87.9,23.9 85.7,23.9 	"/>
+	<rect x="92.4" y="10.4" class="st1" width="2.2" height="13.5"/>
+	<path class="st1" d="M104.8,17.2c0-3.3-1-5-3-5c-2,0-3,1.7-3,5c0,3.3,1,5,3,5C103.8,22.2,104.8,20.5,104.8,17.2 M96.4,17.2
+		c0-4.4,1.9-6.9,5.3-6.9c3.4,0,5.3,2.6,5.3,6.9c0,4.4-1.9,6.9-5.3,6.9C98.3,24.1,96.4,21.5,96.4,17.2"/>
+	<path class="st1" d="M109.1,10.4h2.4l4,7.9c0.3,0.7,0.7,1.7,1,2.5h0.1c-0.1-1.1-0.2-2.2-0.2-3v-7.4h2.2v13.5h-2.3l-4-7.8
+		c-0.4-0.9-0.7-1.7-1.1-2.6H111c0.1,0.9,0.2,2.1,0.2,3.1v7.2h-2.2V10.4z"/>
+	<path class="st1" d="M126.8,18.8l-1.1-3.9c-0.2-0.7-0.3-1.4-0.6-2.4H125c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H126.8z M123.8,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3H123l-0.9,3.3h-2.3L123.8,10.4z"/>
+	<polygon class="st1" points="131.5,10.4 133.7,10.4 133.7,22 138.9,22 138.9,23.9 131.5,23.9 	"/>
+	<path class="st1" d="M150.4,1.2h98.3v32h-98.3V1.2z M149.2,34.3h100.7V0H149.2V34.3z"/>
+	<path class="st1" d="M166.2,18.8l-1.1-3.9c-0.2-0.7-0.4-1.4-0.6-2.4h-0.1c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H166.2z M163.2,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3h-4.1l-0.9,3.3h-2.3L163.2,10.4z"/>
+	<path class="st1" d="M174.4,17.1c1.6,0,2.1-1,2.1-2.4c0-1.4-0.6-2.4-2.1-2.4h-1.7v4.8H174.4z M170.5,10.4h4c2.9,0,4.2,1.5,4.2,4.1
+		c0,2-0.9,3.5-2.3,3.9v0.1c0.6,0.7,2.5,4.8,3,5v0.3h-2.4c-0.6-0.4-2.3-4.5-2.8-4.9h-1.6v4.9h-2.2L170.5,10.4L170.5,10.4z"/>
+	<path class="st1" d="M182.5,17.1c0,3.4,1.2,5.1,3,5.1c1.8,0,2.5-1.3,2.5-3.3l2.2,0.1c0,0.1,0,0.3,0,0.4c0,2.8-1.4,4.7-4.7,4.7
+		c-3.2,0-5.3-2.4-5.3-7c0-4.4,2.1-6.9,5.3-6.9c4.1,0,4.7,2.9,4.7,4.5c0,0.2,0,0.4,0,0.6l-2.2,0.1c0-2.1-0.7-3.3-2.5-3.3
+		C183.7,12.1,182.5,13.8,182.5,17.1"/>
+	<polygon class="st1" points="192,10.4 194.2,10.4 194.2,16.1 199.4,16.1 199.4,10.4 201.6,10.4 201.6,23.9 199.4,23.9 199.4,18 
+		194.2,18 194.2,23.9 192,23.9 	"/>
+	<rect x="204.5" y="10.4" class="st1" width="2.2" height="13.5"/>
+	<path class="st1" d="M208.5,10.4h2.3l2,7.8c0.3,1.2,0.5,2.3,0.7,3.5h0.2c0.2-1.3,0.4-2.3,0.7-3.5l2-7.8h2.3l-3.8,13.5h-2.6
+		L208.5,10.4z"/>
+	<polygon class="st1" points="220.2,10.4 227.9,10.4 227.9,12.3 222.4,12.3 222.4,16.1 227,16.1 227,18 222.4,18 222.4,21.9 
+		227.9,21.9 227.9,23.9 220.2,23.9 	"/>
+	<path class="st1" d="M231.3,19.3c0,0.2,0,0.3,0,0.5c0,1.2,0.5,2.3,2.1,2.3c1.4,0,2.1-0.7,2.1-1.8c0-1-0.4-1.5-1.4-1.9l-2.2-0.8
+		c-1.5-0.6-2.7-1.5-2.7-3.6c0-2.2,1.5-3.8,4.2-3.8c3.4,0,4.1,2.3,4.1,3.7c0,0.2,0,0.4-0.1,0.7l-2.1,0c0-0.1,0-0.3,0-0.5
+		c0-1.1-0.4-2-1.9-2c-1.3,0-1.9,0.8-1.9,1.8c0,1.1,0.6,1.6,1.4,1.9l2.2,0.8c1.7,0.6,2.7,1.7,2.7,3.6c0,2.3-1.5,3.9-4.4,3.9
+		c-3.7,0-4.3-2.5-4.3-4.1c0-0.2,0-0.4,0.1-0.6L231.3,19.3z"/>
+</g>
+</svg>

package/nationalarchives/assets/images/tna-horizontal-logo.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 249.9 34.5" style="enable-background:new 0 0 249.9 34.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+	.st1{fill:#000;}
+</style>
+<rect class="st0" width="249.9" height="34.3"/>
+<g>
+	<path class="st1" d="M1.2,1.2h48.6v32H1.2V1.2z M0,0v33.1v1.2h50.9v-1.2V0H0z"/>
+	<polygon class="st1" points="13.4,12.3 10,12.3 10,10.4 19,10.4 19,12.3 15.6,12.3 15.6,23.9 13.4,23.9 	"/>
+	<polygon class="st1" points="19.9,10.4 22,10.4 22,16.1 27.3,16.1 27.3,10.4 29.5,10.4 29.5,23.9 27.3,23.9 27.3,18 22,18 22,23.9 
+		19.9,23.9 	"/>
+	<polygon class="st1" points="32,10.4 39.7,10.4 39.7,12.3 34.2,12.3 34.2,16.1 38.8,16.1 38.8,18 34.2,18 34.2,22 39.7,22 
+		39.7,23.9 32,23.9 	"/>
+	<path class="st1" d="M50.9,1.2h49.8h48.6v32H50.9V1.2z M49.7,0v1.2v33.1h100.7V0H49.7z"/>
+	<path class="st1" d="M62.1,10.4h2.4l4,7.9c0.3,0.7,0.7,1.7,1,2.5h0.1c-0.1-1.1-0.2-2.2-0.2-3v-7.4h2.2v13.5h-2.3l-4-7.8
+		c-0.4-0.9-0.7-1.7-1.1-2.6h-0.1c0.1,0.9,0.2,2.1,0.2,3.1v7.2h-2.2C62.1,23.9,62.1,10.4,62.1,10.4z"/>
+	<path class="st1" d="M79.8,18.8l-1.1-3.9c-0.2-0.7-0.3-1.4-0.6-2.4H78c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H79.8z M76.8,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3h-4.1l-0.9,3.3h-2.3L76.8,10.4z"/>
+	<polygon class="st1" points="85.7,12.3 82.3,12.3 82.3,10.4 91.3,10.4 91.3,12.3 87.9,12.3 87.9,23.9 85.7,23.9 	"/>
+	<rect x="92.4" y="10.4" class="st1" width="2.2" height="13.5"/>
+	<path class="st1" d="M104.8,17.2c0-3.3-1-5-3-5c-2,0-3,1.7-3,5c0,3.3,1,5,3,5C103.8,22.2,104.8,20.5,104.8,17.2 M96.4,17.2
+		c0-4.4,1.9-6.9,5.3-6.9c3.4,0,5.3,2.6,5.3,6.9c0,4.4-1.9,6.9-5.3,6.9C98.3,24.1,96.4,21.5,96.4,17.2"/>
+	<path class="st1" d="M109.1,10.4h2.4l4,7.9c0.3,0.7,0.7,1.7,1,2.5h0.1c-0.1-1.1-0.2-2.2-0.2-3v-7.4h2.2v13.5h-2.3l-4-7.8
+		c-0.4-0.9-0.7-1.7-1.1-2.6H111c0.1,0.9,0.2,2.1,0.2,3.1v7.2h-2.2V10.4z"/>
+	<path class="st1" d="M126.8,18.8l-1.1-3.9c-0.2-0.7-0.3-1.4-0.6-2.4H125c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H126.8z M123.8,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3H123l-0.9,3.3h-2.3L123.8,10.4z"/>
+	<polygon class="st1" points="131.5,10.4 133.7,10.4 133.7,22 138.9,22 138.9,23.9 131.5,23.9 	"/>
+	<path class="st1" d="M150.4,1.2h98.3v32h-98.3V1.2z M149.2,34.3h100.7V0H149.2V34.3z"/>
+	<path class="st1" d="M166.2,18.8l-1.1-3.9c-0.2-0.7-0.4-1.4-0.6-2.4h-0.1c-0.2,1-0.3,1.6-0.5,2.4l-1.1,3.9H166.2z M163.2,10.4h2.7
+		l3.9,13.5h-2.2l-0.9-3.3h-4.1l-0.9,3.3h-2.3L163.2,10.4z"/>
+	<path class="st1" d="M174.4,17.1c1.6,0,2.1-1,2.1-2.4c0-1.4-0.6-2.4-2.1-2.4h-1.7v4.8H174.4z M170.5,10.4h4c2.9,0,4.2,1.5,4.2,4.1
+		c0,2-0.9,3.5-2.3,3.9v0.1c0.6,0.7,2.5,4.8,3,5v0.3h-2.4c-0.6-0.4-2.3-4.5-2.8-4.9h-1.6v4.9h-2.2L170.5,10.4L170.5,10.4z"/>
+	<path class="st1" d="M182.5,17.1c0,3.4,1.2,5.1,3,5.1c1.8,0,2.5-1.3,2.5-3.3l2.2,0.1c0,0.1,0,0.3,0,0.4c0,2.8-1.4,4.7-4.7,4.7
+		c-3.2,0-5.3-2.4-5.3-7c0-4.4,2.1-6.9,5.3-6.9c4.1,0,4.7,2.9,4.7,4.5c0,0.2,0,0.4,0,0.6l-2.2,0.1c0-2.1-0.7-3.3-2.5-3.3
+		C183.7,12.1,182.5,13.8,182.5,17.1"/>
+	<polygon class="st1" points="192,10.4 194.2,10.4 194.2,16.1 199.4,16.1 199.4,10.4 201.6,10.4 201.6,23.9 199.4,23.9 199.4,18 
+		194.2,18 194.2,23.9 192,23.9 	"/>
+	<rect x="204.5" y="10.4" class="st1" width="2.2" height="13.5"/>
+	<path class="st1" d="M208.5,10.4h2.3l2,7.8c0.3,1.2,0.5,2.3,0.7,3.5h0.2c0.2-1.3,0.4-2.3,0.7-3.5l2-7.8h2.3l-3.8,13.5h-2.6
+		L208.5,10.4z"/>
+	<polygon class="st1" points="220.2,10.4 227.9,10.4 227.9,12.3 222.4,12.3 222.4,16.1 227,16.1 227,18 222.4,18 222.4,21.9 
+		227.9,21.9 227.9,23.9 220.2,23.9 	"/>
+	<path class="st1" d="M231.3,19.3c0,0.2,0,0.3,0,0.5c0,1.2,0.5,2.3,2.1,2.3c1.4,0,2.1-0.7,2.1-1.8c0-1-0.4-1.5-1.4-1.9l-2.2-0.8
+		c-1.5-0.6-2.7-1.5-2.7-3.6c0-2.2,1.5-3.8,4.2-3.8c3.4,0,4.1,2.3,4.1,3.7c0,0.2,0,0.4-0.1,0.7l-2.1,0c0-0.1,0-0.3,0-0.5
+		c0-1.1-0.4-2-1.9-2c-1.3,0-1.9,0.8-1.9,1.8c0,1.1,0.6,1.6,1.4,1.9l2.2,0.8c1.7,0.6,2.7,1.7,2.7,3.6c0,2.3-1.5,3.9-4.4,3.9
+		c-3.7,0-4.3-2.5-4.3-4.1c0-0.2,0-0.4,0.1-0.6L231.3,19.3z"/>
+</g>
+</svg>

package/nationalarchives/assets/images/tna-square-logo-inverted.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:#000;}
+    .st1{fill:#fff;}
+</style>
+<rect class="st0" width="160" height="160"/>
+<path class="st1" d="M1.9,107.2h156.3V158H1.9V107.2z M1.9,54.5h79.1h77.2v50.8H1.9V54.5z M1.9,1.9h77.2v50.8H1.9V1.9z M80.9,1.9
+    h77.2v50.8H80.9C80.9,52.7,80.9,1.9,80.9,1.9z M80.9,0H0v52.7v1.9v50.8v1.9v52.7h160v-52.7v-1.9V52.7V0H80.9z"/>
+<polygon class="st1" points="21.3,19.5 15.9,19.5 15.9,16.5 30.2,16.5 30.2,19.5 24.8,19.5 24.8,37.9 21.3,37.9 "/>
+<polygon class="st1" points="31.6,16.5 35,16.5 35,25.5 43.4,25.5 43.4,16.5 46.8,16.5 46.8,37.9 43.4,37.9 43.4,28.6 35,28.6 
+    35,37.9 31.6,37.9 "/>
+<polygon class="st1" points="50.9,16.5 63.1,16.5 63.1,19.5 54.3,19.5 54.3,25.6 61.7,25.6 61.7,28.6 54.3,28.6 54.3,34.9 
+    63.1,34.9 63.1,37.9 50.9,37.9 "/>
+<path class="st1" d="M19.7,69.2h3.8l6.4,12.5c0.6,1.1,1.1,2.7,1.6,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3
+    c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5C19.7,90.6,19.7,69.2,19.7,69.2z"/>
+<path class="st1" d="M47.8,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8H45c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H47.8z M43,69.2h4.2
+    l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L43,69.2z"/>
+<polygon class="st1" points="57.2,72.3 51.8,72.3 51.8,69.2 66,69.2 66,72.3 60.6,72.3 60.6,90.7 57.2,90.7 "/>
+<rect x="67.8" y="69.2" class="st1" width="3.5" height="21.4"/>
+<path class="st1" d="M87.5,80c0-5.3-1.7-8-4.8-8c-3.2,0-4.8,2.7-4.8,8c0,5.2,1.6,7.9,4.8,7.9C85.9,87.9,87.5,85.2,87.5,80 M74.2,80
+    c0-7,3-11.1,8.5-11.1c5.4,0,8.4,4.1,8.4,11.1c0,6.9-3,11-8.4,11C77.3,91,74.2,86.9,74.2,80"/>
+<path class="st1" d="M94.3,69.2H98l6.4,12.5c0.6,1.1,1.2,2.7,1.7,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3
+    c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5V69.2z"/>
+<path class="st1" d="M122.4,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H122.4z M117.6,69.2h4.2
+    l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L117.6,69.2z"/>
+<polygon class="st1" points="129.9,69.2 133.4,69.2 133.4,87.6 141.8,87.6 141.8,90.7 129.9,90.7 "/>
+<path class="st1" d="M26.9,135.2l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H26.9z M22.1,121.8h4.2
+    l6.2,21.4H29l-1.5-5.2h-6.6l-1.4,5.2h-3.6L22.1,121.8z"/>
+<path class="st1" d="M39.9,132.5c2.5,0,3.4-1.6,3.4-3.9c0-2.2-1-3.8-3.4-3.8h-2.7v7.7H39.9z M33.8,121.8h6.4c4.5,0,6.7,2.4,6.7,6.6
+    c0,3.1-1.5,5.6-3.7,6.3v0.2c1,1.1,4,7.5,4.8,7.9v0.5h-3.8c-1-0.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5L33.8,121.8L33.8,121.8z"/>
+<path class="st1" d="M52.9,132.5c0,5.3,1.9,8,4.8,8c2.9,0,4-2,4-5.2l3.5,0.1c0,0.2,0.1,0.4,0.1,0.6c0,4.4-2.1,7.5-7.5,7.5
+    c-5.2,0-8.5-3.9-8.5-11.1c0-7.1,3.3-11,8.5-11c6.4,0,7.5,4.6,7.5,7.2c0,0.3,0,0.7-0.1,0.9l-3.5,0.1c0-3.3-1.2-5.2-4-5.2
+    C54.8,124.6,52.9,127.3,52.9,132.5"/>
+<polygon class="st1" points="68,121.8 71.5,121.8 71.5,130.9 79.8,130.9 79.8,121.8 83.3,121.8 83.3,143.3 79.8,143.3 79.8,133.9 
+    71.5,133.9 71.5,143.3 68,143.3 "/>
+<rect x="87.9" y="121.8" class="st1" width="3.5" height="21.4"/>
+<path class="st1" d="M94.2,121.8h3.6l3.2,12.3c0.5,1.9,0.8,3.6,1.1,5.6h0.2c0.3-2,0.6-3.7,1.1-5.6l3.2-12.3h3.6l-6.1,21.4h-4.1
+    L94.2,121.8z"/>
+<polygon class="st1" points="112.7,121.8 125,121.8 125,124.9 116.2,124.9 116.2,130.9 123.6,130.9 123.6,133.9 116.2,133.9 
+    116.2,140.2 125,140.2 125,143.3 112.7,143.3 "/>
+<path class="st1" d="M130.4,136c0,0.2-0.1,0.5-0.1,0.8c0,1.9,0.8,3.7,3.4,3.7c2.1,0,3.3-1.2,3.3-2.9c0-1.6-0.7-2.4-2.2-3l-3.4-1.3
+    c-2.4-0.9-4.2-2.4-4.2-5.7c0-3.5,2.3-6.1,6.6-6.1c5.5,0,6.4,3.6,6.4,5.9c0,0.3,0,0.7-0.1,1.1l-3.4,0.1c0-0.2,0.1-0.5,0.1-0.7
+    c0-1.7-0.6-3.2-3-3.2c-2.1,0-3,1.2-3,2.8c0,1.7,0.9,2.5,2.2,2.9l3.5,1.3c2.6,1,4.3,2.6,4.3,5.8c0,3.6-2.4,6.1-7,6.1
+    c-5.9,0-6.8-3.9-6.8-6.5c0-0.3,0-0.6,0.1-1L130.4,136z"/>
+</svg>

package/nationalarchives/assets/images/tna-square-logo.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:#fff;}
+    .st1{fill:#000;}
+</style>
+<rect class="st0" width="160" height="160"/>
+<path class="st1" d="M1.9,107.2h156.3V158H1.9V107.2z M1.9,54.5h79.1h77.2v50.8H1.9V54.5z M1.9,1.9h77.2v50.8H1.9V1.9z M80.9,1.9
+    h77.2v50.8H80.9C80.9,52.7,80.9,1.9,80.9,1.9z M80.9,0H0v52.7v1.9v50.8v1.9v52.7h160v-52.7v-1.9V52.7V0H80.9z"/>
+<polygon class="st1" points="21.3,19.5 15.9,19.5 15.9,16.5 30.2,16.5 30.2,19.5 24.8,19.5 24.8,37.9 21.3,37.9 "/>
+<polygon class="st1" points="31.6,16.5 35,16.5 35,25.5 43.4,25.5 43.4,16.5 46.8,16.5 46.8,37.9 43.4,37.9 43.4,28.6 35,28.6 
+    35,37.9 31.6,37.9 "/>
+<polygon class="st1" points="50.9,16.5 63.1,16.5 63.1,19.5 54.3,19.5 54.3,25.6 61.7,25.6 61.7,28.6 54.3,28.6 54.3,34.9 
+    63.1,34.9 63.1,37.9 50.9,37.9 "/>
+<path class="st1" d="M19.7,69.2h3.8l6.4,12.5c0.6,1.1,1.1,2.7,1.6,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3
+    c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5C19.7,90.6,19.7,69.2,19.7,69.2z"/>
+<path class="st1" d="M47.8,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8H45c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H47.8z M43,69.2h4.2
+    l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L43,69.2z"/>
+<polygon class="st1" points="57.2,72.3 51.8,72.3 51.8,69.2 66,69.2 66,72.3 60.6,72.3 60.6,90.7 57.2,90.7 "/>
+<rect x="67.8" y="69.2" class="st1" width="3.5" height="21.4"/>
+<path class="st1" d="M87.5,80c0-5.3-1.7-8-4.8-8c-3.2,0-4.8,2.7-4.8,8c0,5.2,1.6,7.9,4.8,7.9C85.9,87.9,87.5,85.2,87.5,80 M74.2,80
+    c0-7,3-11.1,8.5-11.1c5.4,0,8.4,4.1,8.4,11.1c0,6.9-3,11-8.4,11C77.3,91,74.2,86.9,74.2,80"/>
+<path class="st1" d="M94.3,69.2H98l6.4,12.5c0.6,1.1,1.2,2.7,1.7,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3
+    c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5V69.2z"/>
+<path class="st1" d="M122.4,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H122.4z M117.6,69.2h4.2
+    l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L117.6,69.2z"/>
+<polygon class="st1" points="129.9,69.2 133.4,69.2 133.4,87.6 141.8,87.6 141.8,90.7 129.9,90.7 "/>
+<path class="st1" d="M26.9,135.2l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H26.9z M22.1,121.8h4.2
+    l6.2,21.4H29l-1.5-5.2h-6.6l-1.4,5.2h-3.6L22.1,121.8z"/>
+<path class="st1" d="M39.9,132.5c2.5,0,3.4-1.6,3.4-3.9c0-2.2-1-3.8-3.4-3.8h-2.7v7.7H39.9z M33.8,121.8h6.4c4.5,0,6.7,2.4,6.7,6.6
+    c0,3.1-1.5,5.6-3.7,6.3v0.2c1,1.1,4,7.5,4.8,7.9v0.5h-3.8c-1-0.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5L33.8,121.8L33.8,121.8z"/>
+<path class="st1" d="M52.9,132.5c0,5.3,1.9,8,4.8,8c2.9,0,4-2,4-5.2l3.5,0.1c0,0.2,0.1,0.4,0.1,0.6c0,4.4-2.1,7.5-7.5,7.5
+    c-5.2,0-8.5-3.9-8.5-11.1c0-7.1,3.3-11,8.5-11c6.4,0,7.5,4.6,7.5,7.2c0,0.3,0,0.7-0.1,0.9l-3.5,0.1c0-3.3-1.2-5.2-4-5.2
+    C54.8,124.6,52.9,127.3,52.9,132.5"/>
+<polygon class="st1" points="68,121.8 71.5,121.8 71.5,130.9 79.8,130.9 79.8,121.8 83.3,121.8 83.3,143.3 79.8,143.3 79.8,133.9 
+    71.5,133.9 71.5,143.3 68,143.3 "/>
+<rect x="87.9" y="121.8" class="st1" width="3.5" height="21.4"/>
+<path class="st1" d="M94.2,121.8h3.6l3.2,12.3c0.5,1.9,0.8,3.6,1.1,5.6h0.2c0.3-2,0.6-3.7,1.1-5.6l3.2-12.3h3.6l-6.1,21.4h-4.1
+    L94.2,121.8z"/>
+<polygon class="st1" points="112.7,121.8 125,121.8 125,124.9 116.2,124.9 116.2,130.9 123.6,130.9 123.6,133.9 116.2,133.9 
+    116.2,140.2 125,140.2 125,143.3 112.7,143.3 "/>
+<path class="st1" d="M130.4,136c0,0.2-0.1,0.5-0.1,0.8c0,1.9,0.8,3.7,3.4,3.7c2.1,0,3.3-1.2,3.3-2.9c0-1.6-0.7-2.4-2.2-3l-3.4-1.3
+    c-2.4-0.9-4.2-2.4-4.2-5.7c0-3.5,2.3-6.1,6.6-6.1c5.5,0,6.4,3.6,6.4,5.9c0,0.3,0,0.7-0.1,1.1l-3.4,0.1c0-0.2,0.1-0.5,0.1-0.7
+    c0-1.7-0.6-3.2-3-3.2c-2.1,0-3,1.2-3,2.8c0,1.7,0.9,2.5,2.2,2.9l3.5,1.3c2.6,1,4.3,2.6,4.3,5.8c0,3.6-2.4,6.1-7,6.1
+    c-5.9,0-6.8-3.9-6.8-6.5c0-0.3,0-0.6,0.1-1L130.4,136z"/>
+</svg>

package/nationalarchives/components/_all.scss

@@ -0,0 +1,7 @@
+@import "../base";
+
+// Utilities
+@import "grid/index";
+
+// Components
+@import "card/index";

package/nationalarchives/components/button/_button.scss

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

package/nationalarchives/components/button/_index.scss

@@ -0,0 +1,26 @@
+@include nationalarchives-exports("nationalarchives/components/button") {
+  .tna-button {
+    padding: 0.25rem 1rem;
+
+    display: inline-block;
+
+    color: #fff;
+    text-decoration: none;
+
+    background-color: #000;
+
+    &:hover {
+      background-color: #069;
+    }
+  }
+
+  .tna-button--secondary {
+    color: #000;
+
+    background-color: #ff0;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}

package/nationalarchives/components/button/button.stories.js

@@ -0,0 +1,52 @@
+import Button from "./template.njk";
+import "../../all.scss";
+import "./_button.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  text: { control: "text" },
+  href: { control: "text" },
+  title: { control: "text" },
+  secondary: { control: "boolean" },
+  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/Button",
+  argTypes,
+};
+
+const Template = ({ text, href, title, secondary, classes, attributes }) => {
+  return Button({
+    params: {
+      text,
+      href,
+      title,
+      secondary,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  text: "Button",
+  href: "#",
+  classes: "tna-button--demo",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  text: "Button",
+  href: "#",
+  secondary: true,
+  classes: "tna-button--demo",
+};