@nationalarchives/frontend 0.1.20-prerelease → 0.1.21-prerelease

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;
+$font-weight-main-bold: bold !default;
+
+$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
+$font-weight-heading: 400 !default;
+
+$font-family-detail: "Roboto Mono", monospace !default;
+$font-weight-detail: normal !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.20-prerelease",
+  "version": "0.1.21-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

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/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>
-```