@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,3 +1,4 @@
+@use "../variables/colour";
 @use "../variables/typography";
 @use "../tools/media";
 @use "../tools/typography" as tools;
@@ -9,14 +10,27 @@
 .tna-template {
   font-family: typography.$font-family-main;
   font-weight: typography.$font-weight-main;
+  // color: colour.$base-font-colour;
+  @include colour.colour-font("base-font");
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   direction: ltr;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul,
+  ol {
+    margin-top: 0;
+  }
+
   p {
-    margin: 0 0 2rem;
+    margin: 0 0 1.5rem;
 
     &:last-child {
       margin-bottom: 0;
@@ -32,139 +46,145 @@
       text-decoration-thickness: 3px;
     }
   }
+}
 
-  .tna-template__body {
-    @include tools.relative-font-size(16);
-    line-height: 1.6;
-  }
+.tna-template__body {
+  @include tools.relative-font-size(16);
+  line-height: 1.6;
+}
 
-  .tna-ul,
-  .tna-ol {
-    padding-left: 2rem;
+.tna-ul,
+.tna-ol {
+  padding-left: 2rem;
 
-    li::marker {
-      color: #f0a;
-      font-weight: 700;
-    }
+  li::marker {
+    color: #f0a;
+    font-weight: 700;
   }
 
-  .tna-ul--plain,
-  .tna-ol--plain {
+  &--plain {
     padding-left: 0;
 
     list-style: none;
   }
+}
 
-  .tna-heading {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-
-    font-family: typography.$font-family-heading;
-    font-weight: typography.$font-weight-heading;
+.tna-heading {
+  margin-bottom: 1.5rem;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  color: colour.$tna-black;
+  font-family: typography.$font-family-heading;
+  font-weight: typography.$font-weight-heading;
 
-    &--xl {
-      @include tools.relative-font-size(64);
-      line-height: 1;
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-      @include media.on-medium {
-        @include tools.relative-font-size(42);
-      }
+  &--xl {
+    @include tools.relative-font-size(64);
+    line-height: 1;
 
-      @include media.on-mobile {
-        @include tools.relative-font-size(36);
-      }
+    @include media.on-medium {
+      @include tools.relative-font-size(42);
     }
 
-    &--l {
-      @include tools.relative-font-size(32);
-      line-height: 1.2;
+    @include media.on-mobile {
+      @include tools.relative-font-size(36);
+    }
+  }
 
-      @include media.on-medium {
-        @include tools.relative-font-size(26);
-      }
+  &--l {
+    @include tools.relative-font-size(32);
+    line-height: 1.2;
 
-      @include media.on-mobile {
-        @include tools.relative-font-size(24);
-      }
+    @include media.on-medium {
+      @include tools.relative-font-size(26);
     }
 
-    &--m {
-      @include tools.relative-font-size(20);
-      line-height: 1.4;
+    @include media.on-mobile {
+      @include tools.relative-font-size(24);
     }
+  }
 
-    &--s {
-      @include tools.relative-font-size(18);
-      line-height: 1.6;
-    }
+  &--m {
+    @include tools.relative-font-size(20);
+    line-height: 1.4;
   }
 
-  .tna-hgroup {
-    margin-bottom: 2rem;
+  &--s {
+    @include tools.relative-font-size(18);
+    line-height: 1.6;
+  }
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+.tna-hgroup {
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    &__supertitle {
-      margin: 0;
+  &__supertitle {
+    margin: 0;
 
-      @include tools.relative-font-size(14);
-      font-family: typography.$font-family-detail;
-      font-weight: typography.$font-weight-detail;
-      text-transform: uppercase;
+    // color: colour.$base-font-colour;
+    @include colour.colour-font("base-font");
+    @include tools.relative-font-size(14);
+    font-family: typography.$font-family-detail;
+    font-weight: typography.$font-weight-detail;
+    text-transform: uppercase;
 
-      // .tna-hgroup & {
-      //   margin: 0;
-      // }
-    }
+    // .tna-hgroup & {
+    //   margin: 0;
+    // }
+  }
 
-    &__title {
-      margin: 0;
+  &__title {
+    margin: 0;
 
-      .tna-hgroup__supertitle {
-        display: block;
-      }
+    color: colour.$tna-black;
+
+    .tna-hgroup__supertitle {
+      display: block;
+
+      // color: colour.$base-font-colour;
+      @include colour.colour-font("base-font");
     }
+  }
 
-    &--xl {
-      .tna-hgroup__supertitle {
-      }
+  &--xl {
+    .tna-hgroup__supertitle {
+    }
 
-      .tna-hgroup__title {
-        @include tools.relative-font-size(64);
-      }
+    .tna-hgroup__title {
+      @include tools.relative-font-size(64);
     }
+  }
 
-    &--l {
-      .tna-hgroup__supertitle {
-      }
+  &--l {
+    .tna-hgroup__supertitle {
+    }
 
-      .tna-hgroup__title {
-        @include tools.relative-font-size(32);
-      }
+    .tna-hgroup__title {
+      @include tools.relative-font-size(32);
     }
+  }
 
-    &--m {
-      .tna-hgroup__supertitle {
-      }
+  &--m {
+    .tna-hgroup__supertitle {
+    }
 
-      .tna-hgroup__title {
-        @include tools.relative-font-size(20);
-      }
+    .tna-hgroup__title {
+      @include tools.relative-font-size(20);
     }
+  }
 
-    &--s {
-      .tna-hgroup__supertitle {
-      }
+  &--s {
+    .tna-hgroup__supertitle {
+    }
 
-      .tna-hgroup__title {
-        @include tools.relative-font-size(18);
-      }
+    .tna-hgroup__title {
+      @include tools.relative-font-size(18);
     }
   }
 }

package/nationalarchives/variables/_all.scss

@@ -1,3 +1,4 @@
+@use "assets";
 @use "colour";
 @use "grid";
 @use "media";

package/nationalarchives/variables/_assets.scss

@@ -0,0 +1 @@
+$tna-assets-path: "/assets" !default;

package/nationalarchives/variables/_colour.scss

@@ -1 +1,95 @@
-$base-font-colour: #111 !default;
+@use "sass:map";
+
+$tna-black: #000;
+$tna-yellow: #fc0;
+$tna-pink: #fe1d57;
+$tna-orange: #fd3f03;
+$tna-green: #86bc25;
+$tna-blue: #00b0ff;
+$dark: #26262a;
+
+$page-background: #fff;
+$base-font: #343338;
+$focus-outline: #004c7e;
+$keyline: #ccc;
+
+$colour-palette-default: (
+  "page-background": $page-background,
+  "base-font": $base-font,
+  "dark-font": $tna-black,
+  "focus-outline": $focus-outline,
+  "keyline": $keyline,
+);
+
+$colour-palette-dark: map.merge(
+  $colour-palette-default,
+  (
+    "page-background": $dark,
+    "base-font": #eee,
+    "dark-font": #fff,
+    "focus-outline": $tna-yellow,
+    "keyline": #444,
+  )
+);
+
+$colour-palette-high-contrast: map.merge(
+  $colour-palette-default,
+  (
+    "base-font": $tna-black,
+    "focus-outline": #f0a,
+    "keyline": $tna-black,
+  )
+);
+
+$colour-palette-high-contrast-dark: map.merge(
+  $colour-palette-dark,
+  (
+    "page-background": $tna-black,
+    "base-font": #fff,
+    "keyline": #fff,
+  )
+);
+
+@mixin colour-css-vars() {
+  @each $name, $value in $colour-palette-default {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-dark() {
+  @each $name, $value in $colour-palette-dark {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-high-contrast() {
+  @each $name, $value in $colour-palette-high-contrast {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-high-contrast-dark() {
+  @each $name, $value in $colour-palette-high-contrast-dark {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-font($colour) {
+  color: map.get($colour-palette-default, $colour);
+  color: var(--#{$colour});
+}
+
+@mixin colour-background($colour) {
+  background-color: map.get($colour-palette-default, $colour);
+  background-color: var(--#{$colour});
+}
+
+@mixin colour-border($colour) {
+  border-color: map.get($colour-palette-default, $colour);
+  border-color: var(--#{$colour});
+}
+
+@mixin colour-outline($colour) {
+  outline-color: map.get($colour-palette-default, $colour);
+  outline-color: var(--#{$colour});
+}

package/nationalarchives/variables/_media.scss

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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.8-prerelease",
+  "version": "0.1.10-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build": "storybook build -o storybook",
-    "test": "test-storybook --stories-json && node tasks/test-fixtures.js",
-    "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
-    "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
+    "test": "test-storybook --verbose --stories-json && node tasks/test-fixtures.js",
+    "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 --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
@@ -42,36 +42,38 @@
     "@babel/core": "^7.19.1",
     "@babel/preset-env": "^7.22.5",
     "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.0.22",
-    "@storybook/addon-docs": "^7.0.22",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-mdx-gfm": "^7.0.22",
-    "@storybook/html": "^7.0.22",
-    "@storybook/html-webpack5": "^7.0.22",
+    "@storybook/addon-a11y": "^7.0.27",
+    "@storybook/addon-docs": "^7.0.27",
+    "@storybook/addon-essentials": "^7.0.27",
+    "@storybook/addon-interactions": "^7.0.27",
+    "@storybook/addon-links": "^7.0.27",
+    "@storybook/addon-mdx-gfm": "^7.0.27",
+    "@storybook/html": "^7.0.27",
+    "@storybook/html-webpack5": "^7.0.27",
     "@storybook/jest": "^0.1.0",
     "@storybook/test-runner": "^0.11.0",
     "@storybook/testing-library": "^0.2.0",
     "babel-loader": "^9.0.1",
+    "chromatic": "^6.19.9",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
     "eslint": "^8.43.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "glob": "^10.2.7",
     "jest-image-snapshot": "^6.1.0",
     "nunjucks": "^3.2.3",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.0.22",
+    "storybook": "^7.0.27",
     "style-loader": "^3.3.1",
     "stylelint": "^15.9.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-selector-bem-pattern": "^2.1.1",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-selector-bem-pattern": "^3.0.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^5.1.4"
   }

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

@@ -1,47 +0,0 @@
-<?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/stories/development/structure.mdx

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