@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,178 +1,222 @@
-@use "../variables/colour";
-@use "../variables/typography";
+@use "../tools/colour";
 @use "../tools/media";
-@use "../tools/typography" as tools;
+@use "../tools/typography";
 
 // Temporary - will eventually bundle font files into package
 @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
-  font-family: typography.$font-family-main;
-  font-weight: typography.$font-weight-main;
-  color: colour.$base-font-colour;
+  @include colour.colour-font("font-base");
+  @include typography.main-font;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   direction: ltr;
+}
 
-  p {
-    margin: 0 0 2rem;
+.tna-template__body {
+  color: inherit;
+  @include typography.relative-font-size(18);
+  line-height: 1.6;
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol {
+  margin-top: 0;
+}
+
+p {
+  margin: 0 0 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
   }
+}
 
-  a {
-    &:active {
-      text-decoration-thickness: 4px;
-    }
+a {
+  @include colour.colour-font("link");
 
-    &:hover {
-      text-decoration-thickness: 3px;
-    }
+  &:visited {
+    @include colour.colour-font("link-visited");
   }
 
-  .tna-template__body {
-    @include tools.relative-font-size(16);
-    line-height: 1.6;
+  &:active {
+    text-decoration-thickness: 4px;
   }
 
-  .tna-ul,
-  .tna-ol {
-    padding-left: 2rem;
+  &:hover {
+    text-decoration-thickness: 3px;
+  }
+}
 
-    li::marker {
-      color: #f0a;
-      font-weight: 700;
-    }
+.tna-ul,
+.tna-ol {
+  padding-left: 2rem;
+
+  li::marker {
+    @include colour.colour-font("accent");
+    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;
-
-    color: colour.$tna-black;
-    font-family: typography.$font-family-heading;
-    font-weight: typography.$font-weight-heading;
+.tna-heading {
+  margin-bottom: 1.5rem;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  @include colour.colour-font("font-dark");
+  @include typography.heading-font;
 
-    &--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 typography.relative-font-size(64);
+    line-height: 1;
 
-      @include media.on-mobile {
-        @include tools.relative-font-size(36);
-      }
+    @include media.on-medium {
+      @include typography.relative-font-size(42);
     }
 
-    &--l {
-      @include tools.relative-font-size(32);
-      line-height: 1.2;
+    @include media.on-mobile {
+      @include typography.relative-font-size(36);
+    }
+  }
 
-      @include media.on-medium {
-        @include tools.relative-font-size(26);
-      }
+  &--l {
+    @include typography.relative-font-size(32);
+    line-height: 1.2;
 
-      @include media.on-mobile {
-        @include tools.relative-font-size(24);
-      }
+    @include media.on-medium {
+      @include typography.relative-font-size(26);
     }
 
-    &--m {
-      @include tools.relative-font-size(20);
-      line-height: 1.4;
+    @include media.on-mobile {
+      @include typography.relative-font-size(24);
     }
+  }
 
-    &--s {
-      @include tools.relative-font-size(18);
-      line-height: 1.6;
-    }
+  &--m {
+    @include typography.relative-font-size(20);
+    line-height: 1.4;
   }
 
-  .tna-hgroup {
-    margin-bottom: 2rem;
+  &--s {
+    @include typography.relative-font-size(18);
+    line-height: 1.6;
+  }
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+.tna-hgroup {
+  margin-bottom: 2rem;
 
-    &__supertitle {
-      margin: 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-      color: colour.$base-font-colour;
-      @include tools.relative-font-size(14);
-      font-family: typography.$font-family-detail;
-      font-weight: typography.$font-weight-detail;
-      text-transform: uppercase;
+  &__supertitle {
+    margin: 0;
 
-      // .tna-hgroup & {
-      //   margin: 0;
-      // }
-    }
+    @include colour.colour-font("font-base");
+    @include typography.relative-font-size(14);
+    @include typography.detail-font;
+    text-transform: uppercase;
 
-    &__title {
+    .tna-hgroup & {
       margin: 0;
+    }
+  }
+
+  &__title {
+    margin: 0;
 
-      color: colour.$tna-black;
+    @include colour.colour-font("font-dark");
 
-      .tna-hgroup__supertitle {
-        display: block;
+    .tna-hgroup__supertitle {
+      display: block;
+
+      @include colour.colour-font("font-base");
+    }
+  }
 
-        color: colour.$base-font-colour;
-      }
+  &--xl {
+    .tna-hgroup__supertitle {
     }
 
-    &--xl {
-      .tna-hgroup__supertitle {
-      }
+    .tna-hgroup__title {
+      @include typography.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 typography.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 typography.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 typography.relative-font-size(18);
+    }
+  }
+}
+
+.tna-blockquote {
+  margin: 0;
+  padding: 1rem 1rem 1rem 2rem;
+
+  border-left: 0.35rem solid;
+  @include colour.colour-border("keyline");
+
+  quotes: "“" "”" "‘" "’";
+
+  &::before {
+    float: left;
+
+    content: open-quote;
+  }
+
+  &__quote {
+    font-weight: 700;
+  }
+
+  &__author {
+    font-style: italic;
+
+    .tna-blockquote & {
+      margin: 1rem 0 0;
+    }
 
-      .tna-hgroup__title {
-        @include tools.relative-font-size(18);
-      }
+    &::before {
+      content: "\2014" " ";
     }
   }
 }

package/nationalarchives/variables/_assets.scss

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

package/nationalarchives/variables/_colour.scss

@@ -1,11 +1,120 @@
-$tna-black: #000;
-$tna-yellow: #fc0;
-$tna-pink: #fe1d57;
-$tna-orange: #fd3f03;
-$tna-green: #86bc25;
-$tna-blue: #00b0ff;
-
-$dark: #26262a !default;
-$base-font-colour: #343338 !default;
-$focus-colour: #004c7e !default;
-$keyline-colour: #ccc !default;
+@use "sass:map";
+@use "../features";
+
+$-tna-black: #000;
+$-tna-grey: #8c9694;
+$-tna-light-grey: #d9d9d6;
+$-tna-white: #fff;
+
+$-tna-yellow: #fc0;
+$-tna-pink: #fe1d57;
+$-tna-orange: #fd3f03;
+$-tna-green: #86bc25;
+$-tna-blue: #00b0ff;
+
+$-tna-brown: #654e37;
+$-tna-maroon: #9c193a;
+$-tna-chestnut: #8f3415;
+$-tna-forest: #00623b;
+$-tna-navy: #004c7e;
+
+$-tna-cream: #f9f7e2;
+$-tna-pastel-pink: #fad3d4;
+$-tna-pastel-orange: #f9e1bc;
+$-tna-pastel-green: #dde5d5;
+$-tna-pastel-blue: #d4e5ef;
+
+$-dark-grey: #26262a;
+$-base-font: #343338;
+
+$-accent-colour: $-tna-yellow;
+$-accent-colour-dark: $-accent-colour;
+
+// @debug $-accent-colour;
+// @mixin configure($accent-colour: null) {
+//   @debug $accent-colour;
+//   @if $accent-colour {
+//     $-accent-colour: $accent-colour !global;
+//   }
+// }
+// @debug $-accent-colour;
+
+// @function -accent-colour() {
+//   @return $-accent-colour or $-tna-yellow;
+// }
+
+// @function -accent-colour-dark() {
+//   @return $-accent-colour-dark or -accent-colour();
+// }
+
+// TODO: Scoped variables should not be used directly outside of this file
+$tna-black: $-tna-black;
+$dark-grey: $-dark-grey;
+$tna-yellow: $-tna-yellow;
+$tna-pink: $-tna-pink;
+$tna-orange: $-tna-orange;
+$tna-green: $-tna-green;
+$tna-blue: $-tna-blue;
+$tna-cream: $-tna-cream;
+
+$colour-palette-default: (
+  "page-background": $-tna-white,
+  "font-base": $-base-font,
+  "font-dark": $-tna-black,
+  "font-light": rgba($-base-font, 0.7),
+  "link": #1d70ab,
+  "link-visited": #4c2c92,
+  // "focus-outline": #004c7e,
+  "focus-outline": $-tna-blue,
+  "keyline": #ccc,
+  "keyline-dark": $-dark-grey,
+  "accent": -accent-colour(),
+  "button-primary-text": $-tna-white,
+  "button-primary-background": $-tna-black,
+  "button-primary-hover-text": $-tna-black,
+  "button-primary-hover-background": $-tna-white,
+  "button-secondary-text": $-tna-black,
+  "button-secondary-background": $-tna-yellow,
+  "button-secondary-hover-text": $-tna-black,
+  "button-secondary-hover-background": $-tna-white,
+);
+
+$colour-palette-dark: map.merge(
+  $colour-palette-default,
+  (
+    "page-background": #222,
+    "font-base": rgba($-tna-white, 0.95),
+    "font-dark": $-tna-white,
+    "font-light": rgba($-tna-white, 0.8),
+    "link": $-tna-blue,
+    "link-visited": #b9f,
+    "keyline": rgba($-tna-white, 0.5),
+    "keyline-dark": $-tna-white,
+    "accent": -accent-colour-dark(),
+  )
+);
+
+$colour-palette-high-contrast: map.merge(
+  $colour-palette-default,
+  (
+    "font-base": $-tna-black,
+    "font-light": $-tna-black,
+    "link": $-tna-black,
+    "link-visited": $-tna-black,
+    "focus-outline": $-tna-orange,
+    "keyline": $-tna-black,
+    "keyline-dark": $-tna-black,
+  )
+);
+
+$colour-palette-high-contrast-dark: map.merge(
+  $colour-palette-dark,
+  (
+    "page-background": #191919,
+    "font-base": $-tna-white,
+    "font-light": $-tna-white,
+    "link": $-tna-white,
+    "link-visited": $-tna-white,
+    "keyline": $-tna-white,
+  )
+);

package/nationalarchives/variables/{_all.scss → _index.scss}

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

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/nationalarchives/variables/_typography.scss

@@ -3,7 +3,7 @@ $base-font-size-px: 16;
 $font-family-main: "Open Sans", sans-serif;
 $font-weight-main: 400;
 
-$font-family-heading: supria-sans-condensed, monospace;
+$font-family-heading: supria-sans-condensed, sans-serif;
 $font-weight-heading: 600;
 
 $font-family-detail: "Roboto Mono", monospace;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.9-prerelease",
+  "version": "0.1.11-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": "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 --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
-    "package:scripts": "webpack"
+    "package:scripts": "webpack",
+    "package:test": "tasks/build-package.sh && node tasks/test-package.js"
   },
   "repository": {
     "type": "git",
@@ -42,22 +43,24 @@
     "@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.2.0",
+    "@storybook/addon-docs": "^7.2.0",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-interactions": "^7.2.0",
+    "@storybook/addon-links": "^7.2.0",
+    "@storybook/addon-mdx-gfm": "^7.2.0",
+    "@storybook/html": "^7.2.0",
+    "@storybook/html-webpack5": "^7.2.0",
     "@storybook/jest": "^0.1.0",
-    "@storybook/test-runner": "^0.11.0",
+    "@storybook/test-runner": "^0.12.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.13",
     "glob": "^10.2.7",
     "jest-image-snapshot": "^6.1.0",
     "nunjucks": "^3.2.3",
@@ -67,7 +70,7 @@
     "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.0.22",
+    "storybook": "^7.2.0",
     "style-loader": "^3.3.1",
     "stylelint": "^15.9.0",
     "stylelint-config-standard-scss": "^10.0.0",

package/nationalarchives/components/_all.scss

@@ -1,7 +0,0 @@
-@use "button/index" as button;
-@use "card/index" as card;
-@use "footer/index" as footer;
-@use "grid/index" as grid;
-@use "header/index" as header;
-@use "hero/index" as hero;
-@use "sensitive-image/index" as sensitive-image;

package/nationalarchives/stories/development/structure.mdx

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

package/nationalarchives/tools/_all.scss

@@ -1,3 +0,0 @@
-@use "grid";
-@use "media";
-@use "typography";

package/nationalarchives/utilities/_all.scss

@@ -1,2 +0,0 @@
-@use "global";
-@use "typography";