@nationalarchives/frontend 0.1.23-prerelease → 0.1.25-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:selector";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -7,30 +8,41 @@
 @use "../variables/grid";
 @use "../variables/typography" as typographyVars;
 
-@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-display: swap;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Roboto Mono";
-  src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
+@if typographyVars.$use-local-fonts {
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
+    font-weight: typographyVars.$main-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
+    font-weight: typographyVars.$main-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
+    font-weight: typographyVars.$detail-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
+    font-weight: typographyVars.$detail-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+} @else {
+  // @import "https://use.typekit.net/hkj3kuz.css";
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -55,43 +67,31 @@
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol {
-  margin-top: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 strong {
   @include typography.main-font-weight-bold;
 }
 
 p {
-  margin: 2rem 0 0;
+  @include spacing.space-above;
 
   + p {
     margin-top: 1rem;
   }
-
-  &:first-child {
-    margin-top: 0;
-  }
 }
 
 a {
-  @include colour.colour-font("link");
   text-decoration-thickness: 1.5px;
 
+  &,
+  &:link {
+    @include colour.colour-font("link");
+  }
+
   &:visited {
     @include colour.colour-font("link-visited");
   }
@@ -100,6 +100,28 @@ a {
   &:active {
     @include typography.interacted-text-decoration;
   }
+
+  &.tna-link--no-visited-state {
+    &:visited {
+      @include colour.colour-font("link");
+    }
+  }
+
+  @include colour.on-high-contrast {
+    &:active {
+      box-shadow: none;
+    }
+
+    &:hover:not(:focus) {
+      box-shadow: 0 0 0 0.3125rem var(--link);
+    }
+  }
+
+  // &[target="_blank"]:not([title*="opens in a new"]) {
+  //   &::after {
+  //     content: "" / " (opens in a new window)"
+  //   }
+  // }
 }
 
 small {
@@ -108,6 +130,47 @@ small {
   );
 }
 
+// .tna-detail[title][data-type] {
+//   padding: 0 0.375rem;
+
+//   display: inline-flex;
+//   flex-flow: row nowrap;
+//   align-items: baseline;
+//   gap: 0.5rem;
+
+//   vertical-align: baseline;
+
+//   background-color: #ccc;
+
+//   &::after {
+//     @include colour.colour-font("font-base");
+//     @include typography.detail-font-small;
+//     vertical-align: baseline;
+
+//     content: attr(data-type) / "";
+//   }
+
+//   &[data-type="misc"] {
+//     background-color: #f28482;
+//   }
+
+//   &[data-type="loc"] {
+//     background-color: #edae49;
+//   }
+
+//   &[data-type="per"] {
+//     background-color: #b5e2fa;
+//   }
+
+//   @at-root #{selector.unify("a", &)} {
+//     @include colour.colour-font("font-base");
+
+//     &::after {
+//       text-decoration: none;
+//     }
+//   }
+// }
+
 .tna-chip-list {
   @include spacing.space-above;
   margin-bottom: 0;
@@ -129,6 +192,7 @@ small {
 
   display: block;
 
+  @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;
 
@@ -141,32 +205,34 @@ small {
   @extend %chip;
 
   &--plain {
+    padding: 0;
+
     color: inherit;
 
     background-color: transparent;
 
-    border-color: transparent;
+    border: none;
   }
-}
-
-a.tna-chip {
-  text-decoration: none;
 
-  &,
-  &:link,
-  &:visited {
-    @include colour.colour-font("font-dark");
-  }
-
-  &:hover {
-    @include typography.interacted-text-decoration;
-  }
+  @at-root #{selector.unify("a", &)} {
+    text-decoration: none;
 
-  &--plain {
     &,
     &:link,
     &:visited {
-      color: inherit;
+      @include colour.colour-font("font-dark");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
+    &--plain {
+      &,
+      &:link,
+      &:visited {
+        color: inherit;
+      }
     }
   }
 }
@@ -174,12 +240,13 @@ a.tna-chip {
 %heading {
   @include colour.colour-font("font-dark");
 
-  text-wrap: balance;
-
   &:not(.tna-heading--no-link-arrow) {
     a {
       display: inline-block;
 
+      text-wrap: balance;
+      // text-decoration-thickness: .1em;
+
       &::after {
         padding-left: 0.25rem;
 
@@ -191,6 +258,8 @@ a.tna-chip {
       }
 
       &:hover {
+        // text-decoration-thickness: .15em;
+
         &::after {
           padding-left: 0.5rem;
         }
@@ -254,17 +323,12 @@ a.tna-chip {
 %headings-and-heading-groups {
   @include spacing.space-above;
   margin-bottom: 0;
-  padding-top: 1rem;
+  padding: 1rem 0 0;
 
   &:first-child {
     padding-top: 0;
   }
 
-  &:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-
   + p {
     margin-top: 1rem;
   }
@@ -304,6 +368,16 @@ a.tna-chip {
     margin: 0 0 0.25rem;
 
     @extend %chip;
+
+    &--plain {
+      padding: 0;
+
+      color: inherit;
+
+      background-color: transparent;
+
+      border: none;
+    }
   }
 
   &__title {
@@ -336,7 +410,7 @@ a.tna-chip {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("accent-background", 0.35rem, solid, left);
+  @include colour.colour-border("accent-background", 0.375rem, solid, left);
 
   &__quote {
     font-weight: 700;
@@ -358,7 +432,8 @@ a.tna-chip {
 .tna-large-paragraph {
   @include spacing.space-above;
 
-  @include typography.relative-font-size(20);
+  @include typography.relative-font-size(22);
+  @include colour.colour-font("font-dark");
 }
 
 .tna-scene-setter {
@@ -382,4 +457,8 @@ a.tna-chip {
       text-decoration-thickness: 4.5px;
     }
   }
+
+  &--small {
+    @include typography.relative-font-size(24);
+  }
 }

package/nationalarchives/variables/_colour.scss

@@ -39,7 +39,7 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a;
 $base-font: #343338 !default;
-$link-colour: #1d70ab !default;
+$link-colour: brand-colour("navy") !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #d8d8d8,
+  "background-tint": #e2e2e2,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),
@@ -100,7 +100,7 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #111,
+    "page-background": #222,
     "background-tint": #333,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
@@ -108,13 +108,14 @@ $colour-palette-dark: map.merge(
     "icon-light": brand-colour("white", 0.35),
     "link": brand-colour("blue"),
     "link-visited": #a8f,
+    "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("white", 0.25),
     "keyline-dark": brand-colour("white"),
     "button-text": brand-colour("black"),
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
-    "contrast-background": #1e1e1e,
+    "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
     // --accent-background-light is the same as --contrast-background on dark themes
@@ -134,8 +135,8 @@ $colour-palette-high-contrast: map.merge(
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
-    "link": brand-colour("navy"),
-    "link-visited": brand-colour("black"),
+    "link": #34d,
+    "link-visited": #848,
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("black"),
     "keyline-dark": brand-colour("black"),
@@ -162,11 +163,12 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
+    "page-background": #111,
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
-    "link": brand-colour("white"),
-    "link-visited": brand-colour("white"),
+    "link": #69f,
+    "link-visited": #a6c,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )

package/nationalarchives/variables/_spacing.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $spacing: (
   "xs": 0.5rem,
   "s": 1rem,
@@ -5,13 +7,16 @@ $spacing: (
   "l": 3rem,
   "xl": 5rem,
   "xxl": 8rem,
-);
+) !default;
 
-$spacing-mobile: (
-  "xs": 0.5rem,
-  "s": 0.75rem,
-  "m": 1.5rem,
-  "l": 2rem,
-  "xl": 3rem,
-  "xxl": 5rem,
-);
+$spacing-mobile: map.merge(
+  $spacing,
+  (
+    "xs": 0.5rem,
+    "s": 0.75rem,
+    "m": 1.5rem,
+    "l": 2rem,
+    "xl": 3rem,
+    "xxl": 5rem,
+  )
+) !default;

package/nationalarchives/variables/_typography.scss

@@ -1,5 +1,7 @@
 @use "sass:math";
 
+$use-local-fonts: false !default;
+
 $relative-1rem-px: 16;
 
 $body-font-size-px: 18 !default;
@@ -8,12 +10,13 @@ $body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
 
 $interactive-text-decoration-thickness: 3.5px !default;
 
-$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
+$main-font-family: "Open Sans", sans-serif !default;
+$main-font-weight: 400 !default;
+$main-font-weight-bold: 700 !default;
 
-$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
-$font-weight-heading: 500 !default;
+$heading-font-family: supria-sans-condensed, "Arial Narrow", sans-serif !default;
+$heading-font-weight: 500 !default;
 
-$font-family-detail: "Roboto Mono", monospace !default;
-$font-weight-detail: normal !default;
+$detail-font-family: "Roboto Mono", monospace !default;
+$detail-font-weight: 400 !default;
+$detail-font-weight-bold: 500 !default;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.23-prerelease",
+  "version": "0.1.25-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "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'",
+    "test": "node tasks/test-fixtures.js && test-storybook --verbose && jest",
+    "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
+    "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "package:scripts": "webpack"
   },
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@chromaui/addon-visual-tests": "^0.0.109",
     "@mdx-js/react": "^2.1.3",
     "@storybook/addon-a11y": "^7.5.1",
@@ -55,31 +55,31 @@
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.2",
     "axe-playwright": "^1.2.3",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
-    "chromatic": "^7.0.0",
+    "chromatic": "^7.5.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
-    "eslint": "^8.46.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "glob": "^10.2.7",
-    "jest-image-snapshot": "^6.2.0",
-    "jsdom": "^22.1.0",
+    "glob": "^10.3.10",
+    "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.64.2",
+    "sass": "^1.69.4",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
     "storybook": "^7.5.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-selector-bem-pattern": "^3.0.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   }
 }

package/nationalarchives/components/profile/_index.scss

@@ -1 +0,0 @@
-@use "profile";

package/nationalarchives/components/profile/fixtures.json

@@ -1,4 +0,0 @@
-{
-  "component": "profile",
-  "fixtures": []
-}

package/nationalarchives/components/profile/macro-options.json

@@ -1,14 +0,0 @@
-[
-  {
-    "name": "classes",
-    "type": "string",
-    "required": false,
-    "description": "Classes to add to the profile."
-  },
-  {
-    "name": "attributes",
-    "type": "object",
-    "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the profile."
-  }
-]

package/nationalarchives/components/profile/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaProfile(params) %}
-  {%- include "nationalarchives/components/profile/template.njk" -%}
-{% endmacro %}