@nationalarchives/frontend 0.1.17-prerelease → 0.1.19-prerelease

package/nationalarchives/utilities/_global.scss

@@ -1,6 +1,7 @@
 @use "../features";
 @use "../tools/colour";
 @use "../tools/media";
+@use "../tools/spacing";
 @use "../variables/typography";
 
 :root {
@@ -115,6 +116,7 @@
 
 img,
 svg,
+picture,
 video,
 canvas {
   max-width: 100%;
@@ -161,12 +163,9 @@ hr {
 }
 
 .tna-aside {
-  margin-bottom: 2rem;
   padding: 2rem;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+  @include spacing.space-below;
 
   @include media.on-mobile {
     padding: 1rem;
@@ -188,28 +187,3 @@ hr {
 .tna-background--accent-light {
   @include colour.light-accent-background;
 }
-
-.tna-visually-hidden {
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-
-  position: absolute !important;
-  top: -9999px !important;
-  left: -9999px !important;
-  z-index: -1 !important;
-
-  overflow: hidden !important;
-
-  clip: rect(0, 0, 0, 0) !important;
-
-  border: 0 !important;
-
-  background-color: transparent !important;
-
-  &::before,
-  &::after {
-    content: "\00a0";
-  }
-}

package/nationalarchives/utilities/_index.scss

@@ -1,5 +1,5 @@
-@forward "debug";
-@forward "font-awesome";
-@forward "global";
-@forward "overrides";
-@forward "typography";
+@use "a11y";
+@use "debug";
+@use "global";
+@use "overrides";
+@use "typography";

package/nationalarchives/utilities/_overrides.scss

@@ -16,20 +16,6 @@
   }
 }
 
-@include no-spacing-generator;
-
-@include media.on-medium {
-  @include no-spacing-generator("medium");
-}
-
-@include media.on-small {
-  @include no-spacing-generator("small");
-}
-
-@include media.on-tiny {
-  @include no-spacing-generator("tiny");
-}
-
 @mixin overrides($spacing, $suffix: "") {
   @if $suffix != "" {
     $suffix: "-" + $suffix;
@@ -40,23 +26,27 @@
       @each $size, $amount in $spacing {
         .tna-\!--#{$property}-#{$direction}-#{$size}#{$suffix},
         .tna-\!--#{$property}-vertical-#{$size}#{$suffix} {
-          #{$property}-#{$direction}: #{$amount}rem !important;
+          #{$property}-#{$direction}: #{$amount} !important;
         }
       }
     }
   }
 }
 
+@include no-spacing-generator;
 @include overrides(spacing.$spacing);
 
 @include media.on-medium {
+  @include no-spacing-generator("medium");
   @include overrides(spacing.$spacing, "medium");
 }
 
 @include media.on-small {
+  @include no-spacing-generator("small");
   @include overrides(spacing.$spacing-mobile, "small");
 }
 
 @include media.on-tiny {
+  @include no-spacing-generator("tiny");
   @include overrides(spacing.$spacing-mobile, "tiny");
 }

package/nationalarchives/utilities/_typography.scss

@@ -1,13 +1,34 @@
 @use "sass:math";
 @use "../tools/colour";
 @use "../tools/media";
+@use "../tools/spacing";
 @use "../tools/typography";
+@use "../variables/assets";
 @use "../variables/grid";
 
-// TODO: Temporary - will eventually bundle font files into package
-@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&family=Roboto+Mono:wght@400&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
+@font-face {
+  font-family: "Open Sans";
+  src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
@@ -49,6 +70,10 @@ strong {
 p {
   margin: 0 0 1.5rem;
 
+  @include media.on-tiny {
+    margin-bottom: 1rem;
+  }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -68,8 +93,6 @@ a {
   }
 
   &.tna-chip {
-    // display: block;
-
     text-decoration: none;
 
     &,
@@ -86,12 +109,12 @@ a {
 
 .tna-ul,
 .tna-ol {
-  margin: 0 0 2rem;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 0;
   padding: 0 0 0 2rem;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+  @include spacing.space-below;
 
   li::marker {
     @include colour.colour-font("accent-background");
@@ -109,7 +132,6 @@ a {
   max-width: max-content;
   padding: 0.375em 0.5rem;
 
-  // display: inline-block;
   display: block;
 
   @include colour.colour-font("font-dark");
@@ -128,13 +150,38 @@ a {
 
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 
   list-style: none;
 
+  @include spacing.space-below;
+
   &__item {
-    margin: 0 1rem 1rem 0;
+  }
+}
+
+%heading {
+  @include colour.colour-font("font-dark");
+  @include typography.heading-font;
 
+  a {
     display: inline-block;
+
+    &::after {
+      padding-left: 0.25rem;
+
+      display: inline-block;
+
+      font-weight: 700;
+
+      content: "\203A";
+    }
+
+    &:hover {
+      &::after {
+        padding-left: 0.5rem;
+      }
+    }
   }
 }
 
@@ -143,7 +190,8 @@ a {
   line-height: 1.2;
 
   @include media.on-medium {
-    @include typography.relative-font-size(42);
+    // @include typography.relative-font-size(42);
+    @include typography.relative-font-size(50);
   }
 
   @include media.on-mobile {
@@ -156,7 +204,8 @@ a {
   line-height: 1.4;
 
   @include media.on-medium {
-    @include typography.relative-font-size(26);
+    // @include typography.relative-font-size(26);
+    @include typography.relative-font-size(28);
   }
 
   @include media.on-mobile {
@@ -174,38 +223,8 @@ a {
   line-height: 1.6;
 }
 
-%heading {
-  margin-bottom: 1rem;
-
-  @include colour.colour-font("font-dark");
-  @include typography.heading-font;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  a {
-    &::after {
-      padding-left: 0.25rem;
-
-      display: inline-block;
-
-      font-weight: 700;
-
-      content: "\203A";
-    }
-
-    &:hover {
-      &::after {
-        transform: translateX(0.25rem);
-      }
-    }
-  }
-}
-
 .tna-heading {
   @extend %heading;
-  // @extend %heading-l;
 
   &--xl {
     @extend %heading-xl;
@@ -225,8 +244,6 @@ a {
 }
 
 .tna-hgroup {
-  margin-bottom: 1rem;
-
   &__supertitle {
     margin: 0 0 0.5rem;
 
@@ -239,7 +256,6 @@ a {
     display: block;
 
     @extend %heading;
-    // @extend %heading-l;
   }
 
   &--xl &__title {
@@ -262,6 +278,7 @@ a {
 .tna-heading,
 .tna-hgroup {
   margin-top: 3rem;
+  margin-bottom: 1rem;
 
   &:first-child {
     margin-top: 0;
@@ -273,22 +290,14 @@ a {
 }
 
 .tna-blockquote {
-  margin: 0 0 2rem;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
   @include colour.colour-border("accent-background", 0.35rem, solid, left);
 
-  // quotes: "“" "”" "‘" "’";
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  // &::before {
-  //   float: left;
-
-  //   content: open-quote;
-  // }
+  @include spacing.space-below;
 
   &__quote {
     font-weight: 700;
@@ -313,6 +322,8 @@ a {
   @include typography.relative-font-size(30);
   line-height: math.div(50, 30);
 
+  @include spacing.space-below;
+
   @include media.on-mobile {
     @include typography.relative-font-size(24);
     line-height: 2;

package/nationalarchives/variables/_colour.scss

@@ -43,10 +43,10 @@ $colour-palette-default: (
   "focus-outline": map.get($colour-palette-brand, "blue"),
   "keyline": #ccc,
   "keyline-dark": $dark-grey,
-  "button-primary-text": map.get($colour-palette-brand, "white"),
-  "button-primary-background": map.get($colour-palette-brand, "black"),
-  "button-primary-hover-text": map.get($colour-palette-brand, "black"),
-  "button-primary-hover-background": map.get($colour-palette-brand, "white"),
+  "button-text": map.get($colour-palette-brand, "white"),
+  "button-background": map.get($colour-palette-brand, "black"),
+  "button-hover-text": map.get($colour-palette-brand, "black"),
+  "button-hover-background": map.get($colour-palette-brand, "white"),
   "contrast-background": #1e1e1e,
   // TODO: #343338 ?
   "contrast-font-base": map.get($colour-palette-brand, "white"),
@@ -57,6 +57,10 @@ $colour-palette-default: (
   "contrast-link-visited": map.get($colour-palette-brand, "white"),
   "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
   "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
+  "contrast-button-text": map.get($colour-palette-brand, "black"),
+  "contrast-button-background": map.get($colour-palette-brand, "white"),
+  "contrast-button-hover-text": map.get($colour-palette-brand, "white"),
+  "contrast-button-hover-background": map.get($colour-palette-brand, "black"),
   "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
   "accent-background-light": map.get($colour-palette-brand, "light-grey"),
@@ -87,15 +91,15 @@ $colour-palette-dark: map.merge(
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
     "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
     "keyline-dark": map.get($colour-palette-brand, "white"),
-    "button-primary-text": map.get($colour-palette-brand, "black"),
-    "button-primary-background": map.get($colour-palette-brand, "white"),
-    "button-primary-hover-text": map.get($colour-palette-brand, "white"),
-    "button-primary-hover-background": map.get($colour-palette-brand, "black"),
+    "button-text": map.get($colour-palette-brand, "black"),
+    "button-background": map.get($colour-palette-brand, "white"),
+    "button-hover-text": map.get($colour-palette-brand, "white"),
+    "button-hover-background": map.get($colour-palette-brand, "black"),
     "contrast-background": #1e1e1e,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
     // --accent-background-light is the same as --contrast-background on dark themes
-    "accent-background-light": #111,
+    "accent-background-light": map.get($colour-palette-brand, "grey"),
   )
 );
 
@@ -123,6 +127,10 @@ $colour-palette-high-contrast: map.merge(
     "contrast-link-visited": map.get($colour-palette-brand, "black"),
     "contrast-keyline": map.get($colour-palette-brand, "black"),
     "contrast-keyline-dark": map.get($colour-palette-brand, "black"),
+    "contrast-button-text": map.get($colour-palette-brand, "white"),
+    "contrast-button-background": map.get($colour-palette-brand, "black"),
+    "contrast-button-hover-text": map.get($colour-palette-brand, "black"),
+    "contrast-button-hover-background": map.get($colour-palette-brand, "white"),
   )
 );
 

package/nationalarchives/variables/_grid.scss

@@ -1,7 +1,7 @@
 $largest-container-width: 75.25rem !default;
 
 $gutter-width: 2rem !default;
-$gutter-width-mobile: 1rem !default;
+$gutter-width-mobile: 1.5rem !default;
 
 $column-count: 12 !default;
 $column-count-medium: 6 !default;

package/nationalarchives/variables/_spacing.scss

@@ -1,17 +1,17 @@
 $spacing: (
-  "xs": 0.5,
-  "s": 1,
-  "m": 2,
-  "l": 3,
-  "xl": 5,
-  "xxl": 8,
+  "xs": 0.5rem,
+  "s": 1rem,
+  "m": 2rem,
+  "l": 3rem,
+  "xl": 5rem,
+  "xxl": 8rem,
 );
 
 $spacing-mobile: (
-  "xs": 0.5,
-  "s": 0.75,
-  "m": 1.5,
-  "l": 2,
-  "xl": 3,
-  "xxl": 5,
+  "xs": 0.5rem,
+  "s": 0.75rem,
+  "m": 1.5rem,
+  "l": 2rem,
+  "xl": 3rem,
+  "xxl": 5rem,
 );

package/nationalarchives/variables/_typography.scss

@@ -2,15 +2,15 @@ $base-font-size-px: 16;
 
 $interactive-text-decoration-thickness: 3.5px;
 
-$font-family-main: "Open Sans", sans-serif;
-$font-weight-main: 500;
-$font-weight-main-bold: 700;
+$font-family-main: "Open Sans", serif;
+// $font-weight-main: 500;
+$font-weight-main: normal;
+// $font-weight-main-bold: 700;
+$font-weight-main-bold: bold;
 
 $font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif;
 $font-weight-heading: 400;
 
 $font-family-detail: "Roboto Mono", monospace;
-$font-weight-detail: 400;
-$font-weight-detail-bold: 700;
-// $font-family-detail: $font-family-main;
-// $font-weight-detail: $font-weight-main;
+// $font-weight-detail: 400;
+$font-weight-detail: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.17-prerelease",
+  "version": "0.1.19-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -8,7 +8,7 @@
     "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'",
-    "package:sass": "sass --style=compressed --embed-sources src/nationalarchives/all.scss package/nationalarchives/all.css",
+    "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "package:scripts": "webpack"
   },
   "repository": {
@@ -63,6 +63,9 @@
     "eslint-plugin-storybook": "^0.6.13",
     "glob": "^10.2.7",
     "jest-image-snapshot": "^6.2.0",
+    "jsdom": "^22.1.0",
+    "mdx-mermaid": "^2.0.0",
+    "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
     "react": "^18.2.0",

package/nationalarchives/assets/images/footer/facebook.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#26262A;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M504,256C504,119,393,8,256,8S8,119,8,256c0,123.8,90.7,226.4,209.2,245V327.7h-63V256h63v-54.6
-	c0-62.2,37-96.5,93.7-96.5c27.1,0,55.5,4.8,55.5,4.8v61h-31.3c-30.8,0-40.4,19.1-40.4,38.7V256h68.8l-11,71.7h-57.8V501
-	C413.3,482.4,504,379.8,504,256z"/>
-</svg>

package/nationalarchives/assets/images/footer/flickr.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 448 512" style="enable-background:new 0 0 448 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M400,32H48C21.5,32,0,53.5,0,80v352c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V80
-	C448,53.5,426.5,32,400,32z M144.5,319c-35.1,0-63.5-28.4-63.5-63.5s28.4-63.5,63.5-63.5s63.5,28.4,63.5,63.5S179.6,319,144.5,319z
-	 M303.5,319c-35.1,0-63.5-28.4-63.5-63.5s28.4-63.5,63.5-63.5s63.5,28.4,63.5,63.5S338.6,319,303.5,319z"/>
-</svg>

package/nationalarchives/assets/images/footer/instagram.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 448 512" style="enable-background:new 0 0 448 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#26262A;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M224.1,141c-63.6,0-114.9,51.3-114.9,114.9s51.3,114.9,114.9,114.9S339,319.5,339,255.9S287.7,141,224.1,141z
-	 M224.1,330.6c-41.1,0-74.7-33.5-74.7-74.7s33.5-74.7,74.7-74.7s74.7,33.5,74.7,74.7S265.2,330.6,224.1,330.6L224.1,330.6z
-	 M370.5,136.3c0,14.9-12,26.8-26.8,26.8c-14.9,0-26.8-12-26.8-26.8s12-26.8,26.8-26.8S370.5,121.5,370.5,136.3z M446.6,163.5
-	c-1.7-35.9-9.9-67.7-36.2-93.9c-26.2-26.2-58-34.4-93.9-36.2c-37-2.1-147.9-2.1-184.9,0C95.8,35.1,64,43.3,37.7,69.5
-	s-34.4,58-36.2,93.9c-2.1,37-2.1,147.9,0,184.9c1.7,35.9,9.9,67.7,36.2,93.9s58,34.4,93.9,36.2c37,2.1,147.9,2.1,184.9,0
-	c35.9-1.7,67.7-9.9,93.9-36.2c26.2-26.2,34.4-58,36.2-93.9C448.7,311.3,448.7,200.5,446.6,163.5L446.6,163.5z M398.8,388
-	c-7.8,19.6-22.9,34.7-42.6,42.6c-29.5,11.7-99.5,9-132.1,9s-102.7,2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6
-	c-11.7-29.5-9-99.5-9-132.1s-2.6-102.7,9-132.1c7.8-19.6,22.9-34.7,42.6-42.6c29.5-11.7,99.5-9,132.1-9s102.7-2.6,132.1,9
-	c19.6,7.8,34.7,22.9,42.6,42.6c11.7,29.5,9,99.5,9,132.1S410.5,358.6,398.8,388z"/>
-</svg>

package/nationalarchives/assets/images/footer/rss.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 448 512" style="enable-background:new 0 0 448 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M128.1,416c0,35.4-28.7,64-64,64S0,451.3,0,416s28.7-64,64-64S128.1,380.6,128.1,416L128.1,416z M303.7,463.2
-	c-8.4-154.6-132.2-278.6-287-287c-9.1-0.5-16.8,6.8-16.8,16v48.1c0,8.4,6.5,15.5,14.9,16c111.8,7.3,201.5,96.7,208.8,208.8
-	c0.5,8.4,7.6,14.9,16,14.9h48.1C296.9,480,304.2,472.3,303.7,463.2L303.7,463.2z M448,463.5C439.6,229.7,251.5,40.4,16.5,32
-	C7.5,31.7,0,39,0,48v48.1c0,8.6,6.8,15.6,15.5,16c191.2,7.8,344.6,161.3,352.5,352.5c0.4,8.6,7.4,15.5,16,15.5H432
-	C441,480,448.3,472.5,448,463.5z"/>
-</svg>

package/nationalarchives/assets/images/footer/twitter.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M459.4,151.7c0.3,4.5,0.3,9.1,0.3,13.6c0,138.7-105.6,298.6-298.6,298.6c-59.5,0-114.7-17.2-161.1-47.1
-	c8.4,1,16.6,1.3,25.3,1.3c49.1,0,94.2-16.6,130.3-44.8c-46.1-1-84.8-31.2-98.1-72.8c6.5,1,13,1.6,19.8,1.6c9.4,0,18.8-1.3,27.6-3.6
-	c-48.1-9.7-84.1-52-84.1-103v-1.3c14,7.8,30.2,12.7,47.4,13.3c-28.3-18.8-46.8-51-46.8-87.4c0-19.5,5.2-37.4,14.3-53
-	C87.4,130.9,165,172.5,252.1,177.1c-1.6-7.8-2.6-15.9-2.6-24c0-57.8,46.8-104.9,104.9-104.9c30.2,0,57.5,12.7,76.7,33.1
-	c23.7-4.5,46.5-13.3,66.6-25.3c-7.8,24.4-24.4,44.8-46.1,57.8c21.1-2.3,41.6-8.1,60.4-16.2C497.7,118.3,479.8,136.8,459.4,151.7
-	L459.4,151.7z"/>
-</svg>

package/nationalarchives/assets/images/footer/youtube.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License). The fill colour and stroke of this SVG has been modified. -->
-<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 576 512" style="enable-background:new 0 0 576 512;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M549.7,124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8,64,288,64,288,64S117.2,64,74.6,75.5
-	c-23.5,6.3-42,24.9-48.3,48.6c-11.4,42.9-11.4,132.3-11.4,132.3s0,89.4,11.4,132.3c6.3,23.6,24.8,41.5,48.3,47.8
-	C117.2,448,288,448,288,448s170.8,0,213.4-11.5c23.5-6.3,42-24.2,48.3-47.8c11.4-42.9,11.4-132.3,11.4-132.3
-	S561.1,166.9,549.7,124.1z M232.1,337.6V175.2l142.7,81.2L232.1,337.6L232.1,337.6z"/>
-</svg>

package/nationalarchives/stories/development/dependencies.mdx

@@ -1,11 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Dependencies" />
-
-# Update Storybook dependencies
-
-```sh
-npx sb upgrade
-# or
-npx storybook@latest upgrade
-```