@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,40 @@
 @use "sass:math";
 @use "./typography";
 
-$-largest-medium-device-px: 1024 !default;
-$-largest-small-device-px: 768 !default;
-$-largest-tiny-device-px: 480 !default;
+$largest-medium-device-px: 1024 !default;
+$largest-small-device-px: 768 !default;
+$largest-tiny-device-px: 480 !default;
 
-$-smallest-large-device-em: #{math.div(
-    $-largest-medium-device-px + 1,
-    typography.$base-font-size-px
+$smallest-large-device-em: #{math.div(
+    $largest-medium-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-medium-device-em: #{math.div(
-    $-largest-medium-device-px,
-    typography.$base-font-size-px
+$largest-medium-device-em: #{math.div(
+    $largest-medium-device-px,
+    typography.$relative-1rem-px
   )}em;
-$-smallest-medium-device-em: #{math.div(
-    $-largest-small-device-px + 1,
-    typography.$base-font-size-px
+$smallest-medium-device-em: #{math.div(
+    $largest-small-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-small-device-em: #{math.div(
-    $-largest-small-device-px,
-    typography.$base-font-size-px
+$largest-small-device-em: #{math.div(
+    $largest-small-device-px,
+    typography.$relative-1rem-px
   )}em;
-$-smallest-small-device-em: #{math.div(
-    $-largest-tiny-device-px + 1,
-    typography.$base-font-size-px
+$smallest-small-device-em: #{math.div(
+    $largest-tiny-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-tiny-device-em: #{math.div(
-    $-largest-tiny-device-px,
-    typography.$base-font-size-px
+$largest-tiny-device-em: #{math.div(
+    $largest-tiny-device-px,
+    typography.$relative-1rem-px
   )}em;
 
-$media-large: "(min-width: #{$-smallest-large-device-em})";
-$media-lt-large: "(max-width: #{$-largest-medium-device-em})";
-$media-medium: "(min-width: #{$-smallest-medium-device-em}) and (max-width: #{$-largest-medium-device-em})";
-$media-gt-mobile: "(min-width: #{$-smallest-medium-device-em})";
-$media-mobile: "(max-width: #{$-largest-small-device-em})";
-$media-small: "(min-width: #{$-smallest-small-device-em}) and (max-width: #{$-largest-small-device-em})";
-$media-gt-tiny: "(min-width: #{$-smallest-small-device-em})";
-$media-tiny: "(max-width: #{$-largest-tiny-device-em})";
+$media-large: "(min-width: #{$smallest-large-device-em})";
+$media-lt-large: "(max-width: #{$largest-medium-device-em})";
+$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
+$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
+$media-mobile: "(max-width: #{$largest-small-device-em})";
+$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
+$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
+$media-tiny: "(max-width: #{$largest-tiny-device-em})";

package/nationalarchives/variables/_typography.scss

@@ -1,16 +1,19 @@
-$base-font-size-px: 16;
+@use "sass:math";
 
-$interactive-text-decoration-thickness: 3.5px;
+$relative-1rem-px: 16;
 
-$font-family-main: "Open Sans", serif;
-// $font-weight-main: 500;
-$font-weight-main: normal;
-// $font-weight-main-bold: 700;
-$font-weight-main-bold: bold;
+$body-font-size-px: 18 !default;
+$body-font-size-px-mobile: 17 !default;
+$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
 
-$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif;
-$font-weight-heading: 400;
+$interactive-text-decoration-thickness: 3.5px !default;
 
-$font-family-detail: "Roboto Mono", monospace;
-// $font-weight-detail: 400;
-$font-weight-detail: normal;
+$font-family-main: "Open Sans", sans-serif !default;
+$font-weight-main: normal !default; // Defined in utilities/_typography.scss
+$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss
+
+$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
+$font-weight-heading: 500 !default;
+
+$font-family-detail: "Roboto Mono", monospace !default;
+$font-weight-detail: normal !default;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.20-prerelease",
+  "version": "0.1.22-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "storybook build -o storybook",
+    "build": "storybook build -o storybook --webpack-stats-json",
     "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
     "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
@@ -41,18 +41,19 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
+    "@chromaui/addon-visual-tests": "^0.0.109",
     "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-docs": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-mdx-gfm": "^7.4.0",
-    "@storybook/html": "^7.4.0",
-    "@storybook/html-webpack5": "^7.4.0",
-    "@storybook/jest": "^0.2.2",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-mdx-gfm": "^7.5.1",
+    "@storybook/html": "^7.5.1",
+    "@storybook/html-webpack5": "^7.5.1",
+    "@storybook/jest": "^0.2.3",
     "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.0.1",
     "chromatic": "^7.0.0",
@@ -60,7 +61,7 @@
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
     "eslint": "^8.46.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "glob": "^10.2.7",
     "jest-image-snapshot": "^6.2.0",
     "jsdom": "^22.1.0",
@@ -73,7 +74,7 @@
     "sass": "^1.64.2",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.4.0",
+    "storybook": "^7.5.1",
     "style-loader": "^3.3.1",
     "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^11.0.0",

package/nationalarchives/_features.scss

@@ -1 +0,0 @@
-$debug-interactable-areas: false;

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

@@ -1,51 +0,0 @@
-<?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

@@ -1,51 +0,0 @@
-<?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/stories/design/about.mdx

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

package/nationalarchives/stories/development/relationships.mdx

@@ -1,57 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import { Mermaid } from 'mdx-mermaid/Mermaid';
-
-<Meta title="Development/Relationships" />
-
-# Relationship to other resources
-
-Read about the [resources in the Developer Handbook](https://nationalarchives.github.io/developer-handbook/resources/) for more information.
-
-## Context
-
-<Mermaid chart={`C4Context
-    
-    System_Ext(designsystem, "design-system", "Design-centric advice on how to design TNA services and applications using components, patterns and layouts")
-    System_Ext(prototypekit, "govuk-prototype-kit")
-    System_Ext(frontend, "tna-frontend", "Source of truth for HTML, CSS and JavaScript of components and layouts")
-    Container(prototype, "Prototype", "Example TNA prototype")
-    System_Ext(frontenddjango, "tna-frontend-django", "Django templates (HTML) for use in applications")
-    Container(application, "Application", "Example TNA application")
-    System_Ext(developerhandbook, "developer-handbook", "Technical advice on how to develop TNA services and applications")
-
-    Rel(designsystem, prototypekit, "references")
-    Rel(designsystem, frontend, "describes")
-    Rel(designsystem, prototype, "documents how to make")
-
-    Rel(prototype, prototypekit, "consumes", "npm")
-    Rel(prototype, frontend, "consumes", "npm")
-    Rel(prototype, application, "defines")
-
-    Rel(frontend, frontenddjango, "defines")
-
-    Rel(application, frontend, "consumes", "npm")
-    Rel(application, frontenddjango, "consumes", "PyPi")
-
-    Rel(developerhandbook, application, "documents how to make")
-
-    UpdateLayoutConfig($c4ShapeInRow="2")
-`} />
-
-## Frontend
-
-<Mermaid chart={`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")
-
-    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")
-`} />

package/nationalarchives/stories/development/using.mdx

@@ -1,75 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Using" />
-
-# Using the styles
-
-## NPM
-
-Install the frontend package from NPM with:
-
-```sh
-npm install @nationalarchives/frontend
-```
-
-### CSS
-
-From here, you have access to include the SCSS files from the package so you can compile the package yourself:
-
-```css
-// Include all the styles
-@include("node_modules/@nationalarchives/frontend/nationalarchives/all");
-
-// ...or just include a single component
-@include("node_modules/@nationalarchives/frontend/nationalarchives/components/tabs");
-```
-
-...or you can copy any of the compiled CSS files into your distribution:
-
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.css`
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.css.map`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.css`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.css.map`
-
-### JavaScript
-
-```js
-// Import all the JavaScript
-import "node_modules/@nationalarchives/frontend/nationalarchives/all.mjs";
-
-// ...or import just the JavaScript for a single component
-import "node_modules/@nationalarchives/frontend/nationalarchives/components/tabs/tabs.mjs";
-```
-
-...or you can copy any of the compiled JavaScript files into your distribution:
-
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.js`
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.js.map`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.js`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.js.map`
-
-## Hosted
-
-### CSS
-
-Include the CSS in the `<head>` element of your page:
-
-```html
-<!-- All styles -->
-<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.css" rel="stylesheet" integrity="sha384-6Egfw6aX1Jrwuf+APn+BMPswroudkIQ6StU095OPkNCKLEzj7ksWGmYxjend8P7g" crossorigin="anonymous">
-
-<!-- Styles for a single component -->
-<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.css" rel="stylesheet" integrity="sha384-hkx4svJn1A7pWYlzaDRMmtIBBijZdEop+M1Y/H4Hdg8aAqZRJHG56RokLk/eqJYl" crossorigin="anonymous">
-```
-
-### JavaScript
-
-Add the JavaScript to the end of your page just before your closing `</body>` tag:
-
-```html
-<!-- All JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js" integrity="sha384-sBkiMlxl9svXopGxNSMVAdALjzyvh6sQHp+21PE3LGfTxAEbG4EIpK" crossorigin="anonymous"></script>
-
-<!-- JavaScript for a single component -->
-<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-```