@nationalarchives/frontend 0.1.52 → 0.1.54

package/nationalarchives/tools/_colour.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
 @use "sass:list";
+@use "sass:map";
 @use "../variables/borders";
 @use "../variables/colour";
 @use "../tools/media";
@@ -335,8 +335,8 @@
   --accent-link-visited: #{colour.brand-colour("black")} !important;
   --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
   --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
-  --button-accent-text: #{colour.brand-colour("black")} !important;
-  --button-accent-background: #{colour.brand-colour("yellow")} !important;
+  --button-accent-text: #{colour.brand-colour("white")} !important;
+  --button-accent-background: #{colour.brand-colour("brown")} !important;
 }
 
 @mixin yellow-accent {

package/nationalarchives/tools/_typography.scss

@@ -21,14 +21,14 @@
 
 @mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
+  font-style: normal;
+  font-optical-sizing: auto;
+  font-variation-settings: "wdth" 100;
   @if $bold {
     @include main-font-weight-bold;
   } @else {
     @include main-font-weight;
   }
-  font-optical-sizing: auto;
-  font-style: normal;
-  font-variation-settings: "wdth" 100;
 }
 
 @mixin heading-font {
@@ -38,20 +38,20 @@
 
 @mixin detail-font($bold: false) {
   font-family: typography.$detail-font-family;
+  font-style: normal;
+  font-optical-sizing: auto;
   @if $bold {
     font-weight: typography.$detail-font-weight-bold;
   } @else {
     font-weight: typography.$detail-font-weight;
   }
-  font-optical-sizing: auto;
-  font-style: normal;
 }
 
 @mixin detail-font-small {
   @include detail-font;
   @include relative-font-size(14);
-  text-transform: uppercase;
   line-height: 1.1;
+  text-transform: uppercase;
 }
 
 @mixin interacted-text-decoration {
@@ -66,14 +66,13 @@
   $font-size-tiny,
   $line-height
 ) {
-  @include relative-font-size($font-size-default);
-  line-height: $line-height;
-
   $small-and-tiny-identical: $font-size-small == $font-size-tiny;
   $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and
     $small-and-tiny-identical;
   $all-identical: $font-size-default == $font-size-medium and
     $medium-small-and-tiny-identical and $small-and-tiny-identical;
+  line-height: $line-height;
+  @include relative-font-size($font-size-default);
 
   @if $all-identical != true {
     @if $medium-small-and-tiny-identical != true {

package/nationalarchives/utilities/_a11y.scss

@@ -7,18 +7,18 @@
   margin: 0 !important;
   padding: 0 !important;
 
+  overflow: hidden !important;
+
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
   z-index: -1 !important;
 
-  overflow: hidden !important;
-
-  clip: rect(0, 0, 0, 0) !important;
+  background-color: transparent !important;
 
   border: 0 !important;
 
-  background-color: transparent !important;
+  clip: rect(0, 0, 0, 0) !important;
 
   // &::before,
   // &::after {

package/nationalarchives/utilities/_debug.scss

@@ -19,6 +19,8 @@
       0 0 0.5rem #f0a !important;
 
     &::after {
+      content: "";
+
       width: 20px;
       height: 20px;
 
@@ -39,8 +41,6 @@
         0 0 0.5rem #0f3 !important;
 
       transform: translateX(-50%) translateY(-50%);
-
-      content: "";
     }
 
     &:not(.tna-checkboxes__item-label, .tna-radios__item-label) {

package/nationalarchives/utilities/_global.scss

@@ -1,4 +1,12 @@
 .tna-template {
+  /*
+   * ------------------------------------------
+   * A minimum page width of 320px is needed in
+   * order to meet the WCAG AA success criteria
+   * for 1.4.10 (Reflow)
+   * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
+   * ------------------------------------------
+   */
   min-width: 320px;
   width: 100%;
   height: 100%;

package/nationalarchives/utilities/_imports.scss

@@ -0,0 +1,57 @@
+@use "../variables/assets";
+@use "../variables/typography";
+@use "../lib/functions";
+
+@if typography.$use-local-fonts {
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file}");
+    font-weight: typography.$main-font-weight;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-medium}");
+    font-weight: typography.$main-font-weight-medium;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-bold}");
+    font-weight: typography.$main-font-weight-bold;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$detail-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file}");
+    font-weight: typography.$detail-font-weight;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$detail-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file-bold}");
+    font-weight: typography.$detail-font-weight-bold;
+    font-style: normal;
+    font-display: swap;
+  }
+} @else {
+  $main-font-family-name: functions.str-replace(
+    typography.$main-font-family-name,
+    " ",
+    "+"
+  );
+  $detail-font-family-name: functions.str-replace(
+    typography.$detail-font-family-name,
+    " ",
+    "+"
+  );
+  @import url("https://fonts.googleapis.com/css2?family=#{$main-font-family-name}:wght@#{typography.$main-font-weight}..#{typography.$main-font-weight-bold}&family=#{$detail-font-family-name}:wght@#{typography.$detail-font-weight}..#{typography.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+}

package/nationalarchives/utilities/_index.scss

@@ -5,6 +5,7 @@
 @use "debug";
 @use "forms";
 @use "global";
+@use "imports";
 @use "lists";
 @use "overrides";
 @use "reset";

package/nationalarchives/utilities/_lists.scss

@@ -4,28 +4,45 @@
 @use "../tools/typography";
 
 .tna-ul,
-.tna-ol {
-  margin: spacing.space(1) 0 0;
-  padding: 0 0 0 spacing.space(2);
+.tna-ul ul {
+  list-style-type: disc;
+}
 
-  &:first-child {
+.tna-ul,
+.tna-ol {
+  ul,
+  ol {
     margin-top: 0;
   }
 
-  li::marker {
-    @include colour.colour-font("accent-background");
-    font-weight: 700;
-  }
+  &,
+  & ul,
+  & ol {
+    margin: spacing.space(1) 0 0;
+    padding: 0 0 0 spacing.space(2);
 
-  &--plain {
-    padding-left: 0;
+    &--plain {
+      padding-left: 0;
 
-    list-style: none;
-  }
+      &,
+      & ul,
+      & ol {
+        list-style: none;
+      }
+    }
 
-  .tna-ul,
-  .tna-ol {
-    margin-top: 0;
+    &:first-child {
+      margin-top: 0;
+    }
+
+    li::marker {
+      @include colour.colour-font("accent-background");
+      font-weight: 700;
+
+      .tna-background-accent & {
+        @include colour.colour-font("font-dark");
+      }
+    }
   }
 }
 
@@ -64,9 +81,9 @@
     }
 
     dd {
-      background: transparent !important;
-
       margin-left: 0;
+
+      background: transparent !important;
     }
   }
 }
@@ -86,10 +103,10 @@
     margin: 0;
     padding: spacing.space(0.5) spacing.space(1);
 
-    position: relative;
-
     box-sizing: border-box;
 
+    position: relative;
+
     word-wrap: break-word;
   }
 

package/nationalarchives/utilities/_tables.scss

@@ -8,12 +8,12 @@
 
 .tna-table {
   width: 100%;
-  @include spacing.space-above;
-
-  border-collapse: collapse;
 
   text-align: left;
 
+  border-collapse: collapse;
+  @include spacing.space-above;
+
   &:first-child {
     margin-top: 0;
   }
@@ -85,18 +85,18 @@
 
 .tna-table-wrapper {
   width: 100%;
-  @include spacing.space-above;
-  padding-left: grid.gutter-width();
   padding-right: grid.gutter-width();
+  padding-left: grid.gutter-width();
+
+  overflow: auto;
 
   position: relative;
   left: -#{grid.gutter-width()};
-
-  overflow: auto;
+  @include spacing.space-above;
 
   @include media.on-tiny {
-    padding-left: grid.gutter-width-tiny();
     padding-right: grid.gutter-width-tiny();
+    padding-left: grid.gutter-width-tiny();
 
     left: -#{grid.gutter-width-tiny()};
   }

package/nationalarchives/utilities/_typography.scss

@@ -1,57 +1,20 @@
 @use "sass:math";
 @use "sass:selector";
-@use "../variables/assets";
 @use "../variables/typography" as typographyVars;
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
 
-@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 url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
-}
-
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  direction: ltr;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  direction: ltr;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
 
 .tna-template__body {
@@ -121,6 +84,7 @@ small {
   @include colour.colour-font("font-base");
   @include typography.detail-font-small;
   line-height: 1;
+  text-align: center;
 }
 
 %chip-plain {
@@ -227,13 +191,13 @@ small {
       display: inline-block;
 
       &::after {
+        content: "\203A";
+
         padding-left: spacing.space(0.5);
 
         display: inline-block;
 
         font-weight: 700;
-
-        content: "\203A";
       }
 
       &:hover {

package/nationalarchives/variables/_colour.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 
 $colour-palette-brand: (
@@ -27,9 +28,11 @@ $colour-palette-brand: (
 
 @function hex-to-rgb($hex, $opacity: 1) {
   @if $opacity == 1 {
-    @return rgb(red($hex) green($hex) blue($hex));
+    @return rgb(color.red($hex) color.green($hex) color.blue($hex));
   } @else {
-    @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});
+    @return rgb(
+      color.red($hex) color.green($hex) color.blue($hex) / #{$opacity}
+    );
   }
 }
 
@@ -136,6 +139,7 @@ $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
     "background": brand-colour("white"),
+    "background-tint": #f4f4f4,
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
@@ -148,6 +152,7 @@ $colour-palette-high-contrast: map.merge(
     "contrast-font-base": brand-colour("black"),
     "contrast-font-dark": brand-colour("black"),
     "contrast-font-light": brand-colour("black"),
+    "contrast-icon-light": brand-colour("black", 0.45),
     "contrast-link": #34d,
     "contrast-link-visited": #848,
     "contrast-keyline": brand-colour("black"),

package/nationalarchives/variables/_typography.scss

@@ -1,5 +1,24 @@
+/*
+ * ------------------------------------------
+ * The typefaces, sizes and spacings that are
+ * defined in this file have been selected to
+ * ensure 100% match with the latest National
+ * Archives brand guidelines - avoid changing
+ * or overwriting any of these values without
+ * signing off with the Digital Services team
+ * first
+ * ------------------------------------------
+ */
+
 $relative-1rem-px: 16; // 16px = 1rem
 
+/*
+ * ------------------------------------------
+ * When true, use the included font files for
+ * Open Sans and Roboto Mono, rather than the
+ * versions hosted by Google Fonts
+ * ------------------------------------------
+ */
 $use-local-fonts: false !default;
 
 $body-font-size-px: 18 !default;
@@ -8,18 +27,50 @@ $body-line-height: 1.75 !default;
 
 $interactive-text-decoration-thickness: 3.5px !default;
 
-$main-font: "Open Sans" !default;
-$main-font-family: $main-font, sans-serif !default;
+$main-font-family-name: "Open Sans" !default;
+$main-font-family:
+  #{$main-font-family-name},
+  sans-serif;
 $main-font-weight: 400 !default;
 $main-font-weight-medium: 600 !default;
 $main-font-weight-bold: 700 !default;
+$main-font-file: "OpenSans-Regular.ttf" !default;
+$main-font-file-medium: "OpenSans-SemiBold.ttf" !default;
+$main-font-file-bold: "OpenSans-Bold.ttf" !default;
 
-$heading-font-family: supria-sans-condensed, "Arial Narrow", sans-serif !default;
+/*
+ * ------------------------------------------
+ * To use Supria Sans Condensed (which is the
+ * approved heading typeface for The National
+ * Archives), you need to obtain a licence to
+ * properly embed the CSS files with the font
+ * definitions in your service - check with a
+ * member of the Digital Services team on how
+ * to get a licence
+ * ------------------------------------------
+ */
+$heading-font-family-name: "supria-sans-condensed" !default;
+$heading-font-family:
+  #{$heading-font-family-name},
+  "Arial Narrow",
+  sans-serif;
 $heading-font-weight: 500 !default;
 
-$detail-font-family: "Roboto Mono", monospace !default;
+/*
+ * ------------------------------------------
+ * The detail font should be a monospace font
+ * and is used for chips, supertitles as well
+ * as the date search component
+ * ------------------------------------------
+ */
+$detail-font-family-name: "Roboto Mono" !default;
+$detail-font-family:
+  #{$detail-font-family-name},
+  monospace;
 $detail-font-weight: 400 !default;
 $detail-font-weight-bold: 500 !default;
+$detail-font-file: "RobotoMono-Regular.ttf" !default;
+$detail-font-file-bold: "RobotoMono-Medium.ttf" !default;
 
 $heading-xl-font-size-default: 64 !default;
 $heading-xl-font-size-medium: 48 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -44,42 +44,43 @@
   "sass": "nationalarchives/all.scss",
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^8.0.5",
-    "@storybook/addon-docs": "^8.0.5",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/addon-mdx-gfm": "^8.0.5",
-    "@storybook/html": "^8.0.5",
-    "@storybook/html-webpack5": "^8.0.5",
-    "@storybook/test": "^8.0.5",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addon-docs": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-mdx-gfm": "^8.0.10",
+    "@storybook/html": "^8.0.10",
+    "@storybook/html-webpack5": "^8.0.10",
+    "@storybook/test": "^8.0.10",
     "@storybook/test-runner": "^0.17.0",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
-    "chromatic": "^10.1.0",
+    "chromatic": "^11.3.1",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^6.7.1",
+    "css-loader": "^7.1.1",
     "diff": "^5.1.0",
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.3.10",
-    "html-validate": "^8.7.3",
+    "html-validate": "^8.18.2",
     "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
-    "sass": "^1.69.4",
-    "sass-loader": "^14.1.0",
+    "sass": "^1.77.0",
+    "sass-loader": "^14.2.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.0.5",
-    "style-loader": "^3.3.1",
-    "stylelint": "^16.0.2",
+    "storybook": "^8.0.10",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-order": "^6.0.4",
     "stylelint-selector-bem-pattern": "^4.0.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"