@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

package/nationalarchives/utilities/_forms.scss

@@ -0,0 +1,93 @@
+@use "../utilities/typography" as typographyUtilities;
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+
+.tna-form {
+  &__group {
+    @include spacing.space-above;
+
+    &--error {
+      padding-left: 1rem;
+
+      @include colour.colour-border("form-error", 0.25rem, solid, left);
+    }
+  }
+
+  &__fieldset {
+    flex: 1;
+
+    border: none;
+  }
+
+  &__group,
+  &__fieldset {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  &__group--inline,
+  &__group--inline &__fieldset {
+    flex-direction: row;
+    align-items: flex-start;
+
+    @include media.on-mobile {
+      flex-direction: column;
+    }
+  }
+
+  &__group-contents {
+    flex: 0 0 39%;
+  }
+
+  &__legend {
+  }
+
+  &__heading {
+    margin: 0;
+
+    @extend %heading;
+
+    &--xl {
+      @extend %heading-xl;
+    }
+
+    &--l {
+      @extend %heading-l;
+    }
+
+    &--m {
+      @extend %heading-m;
+    }
+
+    &--s {
+      @extend %heading-s;
+    }
+
+    &--xs {
+      font-size: 1em;
+      @include typography.main-font;
+      // @include typography.main-font-weight-bold;
+    }
+  }
+
+  &__label {
+  }
+
+  &__hint {
+    margin-top: 0;
+
+    @include typography.relative-font-size(16);
+    @include colour.colour-font("font-light");
+  }
+
+  &__error-message {
+    margin-top: 0;
+
+    @include colour.colour-font("form-error");
+    @include typography.main-font-weight-bold;
+  }
+}

package/nationalarchives/utilities/_index.scss

@@ -2,7 +2,9 @@
 @use "colour";
 @use "columns";
 @use "debug";
+@use "forms";
 @use "global";
 @use "lists";
 @use "overrides";
+@use "tables";
 @use "typography";

package/nationalarchives/utilities/_lists.scss

@@ -22,6 +22,11 @@
 
     list-style: none;
   }
+
+  .tna-ul,
+  .tna-ol {
+    margin-top: 0;
+  }
 }
 
 .tna-dl {
@@ -159,7 +164,7 @@
     }
   }
 
-  @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px, solid, bottom);
 
     dt,

package/nationalarchives/utilities/_overrides.scss

@@ -4,7 +4,7 @@
 
 @mixin hide-on($suffix) {
   .tna-\!--hide-on-#{$suffix} {
-    display: none;
+    display: none !important;
   }
 }
 

package/nationalarchives/utilities/_tables.scss

@@ -0,0 +1,86 @@
+@use "sass:math";
+@use "sass:selector";
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+@use "../variables/assets";
+@use "../variables/grid";
+
+.tna-table {
+  width: 100%;
+  @include spacing.space-above;
+
+  border-collapse: collapse;
+
+  text-align: left;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &__caption {
+    text-align: left;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  &__head {
+  }
+
+  &__header {
+  }
+
+  &__body {
+  }
+
+  &__row {
+  }
+
+  &__cell {
+  }
+
+  &__header,
+  &__cell {
+    padding: 0.25rem 1rem;
+
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  &__head &__header {
+    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+  }
+
+  p {
+    + p {
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+.tna-table-wrapper {
+  width: 100%;
+  @include spacing.space-above;
+  padding-left: grid.$gutter-width;
+  padding-right: grid.$gutter-width;
+
+  position: relative;
+  left: -#{grid.$gutter-width};
+
+  overflow: auto;
+
+  @include media.on-tiny {
+    padding-left: grid.$gutter-width-tiny;
+    padding-right: grid.$gutter-width-tiny;
+
+    left: -#{grid.$gutter-width-tiny};
+  }
+}

package/nationalarchives/utilities/_typography.scss

@@ -67,15 +67,9 @@
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol {
-  margin-top: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
 
 strong {
@@ -83,15 +77,11 @@ strong {
 }
 
 p {
-  margin: 2rem 0 0;
+  @include spacing.space-above;
 
   + p {
     margin-top: 1rem;
   }
-
-  &:first-child {
-    margin-top: 0;
-  }
 }
 
 a {
@@ -123,7 +113,7 @@ a {
     }
 
     &:hover:not(:focus) {
-      box-shadow: 0 0 0 0.3125rem var(--link);
+      box-shadow: 0 0 0 0.3125rem var(--focus-outline);
     }
   }
 
@@ -140,62 +130,6 @@ 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;
-  padding-left: 0;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  list-style: none;
-
-  &__item {
-  }
-}
-
 %chip {
   max-width: max-content;
   padding: 0.125em 0.25rem;
@@ -209,6 +143,12 @@ small {
   @include colour.accent;
 
   @include colour.colour-border("accent-background", 0.125rem);
+
+  .tna-background-accent &:not(#{&}--plain) {
+    @include colour.plain;
+
+    @include colour.colour-border("background");
+  }
 }
 
 .tna-chip {
@@ -247,6 +187,65 @@ small {
   }
 }
 
+.tna-chip-list {
+  @include spacing.space-above;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+
+  list-style: none;
+
+  &__item {
+    display: flex;
+    align-items: center;
+
+    .tna-chip {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("icon-light");
+    }
+
+    @include colour.on-high-contrast {
+      @include colour.colour-border("keyline-dark", 1px, solid);
+
+      .fa-solid,
+      .fa-brand {
+        padding: 0.375rem 0.25rem;
+
+        @include colour.colour-font("contrast-font-base");
+
+        @include colour.colour-background("contrast-background");
+
+        @include colour.colour-border("keyline-dark", 1px, solid, right);
+      }
+
+      .tna-chip {
+        &:has(.fa-solid, .fa-brand) {
+          padding-left: 0;
+
+          .fa-solid,
+          .fa-brand {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  &--accent {
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("accent-background");
+    }
+  }
+}
+
 %heading {
   @include colour.colour-font("font-dark");
 
@@ -333,17 +332,12 @@ small {
 %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;
   }

package/nationalarchives/variables/_colour.scss

@@ -39,7 +39,7 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a;
 $base-font: #343338 !default;
-$link-colour: brand-colour("navy") !default;
+$link-colour: #0062a8 !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #e2e2e2,
+  "background-tint": #ededed,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),
@@ -59,6 +59,10 @@ $colour-palette-default: (
   "focus-outline": brand-colour("blue"),
   "keyline": hex-to-rgb($dark-grey, 0.25),
   "keyline-dark": $dark-grey,
+  "input-foreground": brand-colour("black"),
+  "input-background": brand-colour("white"),
+  "input-border": brand-colour("black"),
+  "form-error": #c00,
   "button-text": brand-colour("white"),
   "button-background": brand-colour("black"),
   "button-hover-text": brand-colour("black"),
@@ -66,7 +70,6 @@ $colour-palette-default: (
   "contrast-background": #1e1e1e,
   "contrast-font-base": brand-colour("white"),
   "contrast-font-dark": brand-colour("white"),
-  // "contrast-font-light": brand-colour("white", 0.7),
   "contrast-font-light": brand-colour("white", 0.7),
   "contrast-icon-light": brand-colour("white", 0.45),
   "contrast-link": brand-colour("white"),
@@ -77,9 +80,8 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
-  "accent-background-light": map.get($colour-palette-brand, "light-grey"),
+  "accent-background-light": #ededed,
   "accent-font-base": brand-colour("white"),
   "accent-font-dark": brand-colour("white"),
   "accent-font-light": brand-colour("white", 0.7),
@@ -108,8 +110,12 @@ $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"),
+    "input-foreground": brand-colour("white"),
+    "input-background": brand-colour("black"),
+    "input-border": brand-colour("white"),
     "button-text": brand-colour("black"),
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
@@ -117,8 +123,7 @@ $colour-palette-dark: map.merge(
     "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
-    "accent-background-light": brand-colour("grey"),
+    // "accent-background-light": brand-colour("light-grey"),
   )
 ) !default;
 
@@ -143,8 +148,8 @@ $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-link": brand-colour("navy"),
-    "contrast-link-visited": brand-colour("black"),
+    "contrast-link": #34d,
+    "contrast-link-visited": #848,
     "contrast-keyline": brand-colour("black"),
     "contrast-keyline-dark": brand-colour("black"),
     "contrast-button-text": brand-colour("white"),
@@ -167,7 +172,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
     "link": #69f,
-    "link-visited": #a6c,
+    "link-visited": #b9f,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )

package/nationalarchives/variables/_forms.scss

@@ -0,0 +1,2 @@
+$form-field-border-width: 1px !default;
+$checkbox-checkmark-width: 0.1875rem !default;

package/nationalarchives/variables/_index.scss

@@ -1,6 +1,7 @@
 @use "assets";
 @use "colour";
 @use "features";
+@use "forms";
 @use "grid";
 @use "media";
 @use "spacing";

package/nationalarchives/variables/_typography.scss

@@ -2,11 +2,11 @@
 
 $use-local-fonts: false !default;
 
-$relative-1rem-px: 16;
+$relative-1rem-px: 16; // 16px is always 1rem
 
 $body-font-size-px: 18 !default;
 $body-font-size-px-mobile: 17 !default;
-$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
+$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777
 
 $interactive-text-decoration-thickness: 3.5px !default;
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.24-prerelease",
+  "version": "0.1.26-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 && jest && test-storybook",
+    "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"
   },
@@ -41,30 +41,30 @@
   "devDependencies": {
     "@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",
-    "@storybook/addon-docs": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-mdx-gfm": "^7.5.1",
-    "@storybook/html": "^7.5.1",
-    "@storybook/html-webpack5": "^7.5.1",
+    "@chromaui/addon-visual-tests": "^0.0.119",
+    "@mdx-js/react": "^3.0.0",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/html": "^7.5.3",
+    "@storybook/html-webpack5": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
     "axe-playwright": "^1.2.3",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
-    "chromatic": "^7.5.0",
+    "chromatic": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.15",
     "glob": "^10.3.10",
-    "jest-image-snapshot": "^6.2.0",
-    "jsdom": "^22.1.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
@@ -74,7 +74,7 @@
     "sass": "^1.69.4",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.5.1",
+    "storybook": "^7.5.3",
     "style-loader": "^3.3.1",
     "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0",

package/nationalarchives/stories/utilities/overrides/overrides.mdx

@@ -1,53 +0,0 @@
-import { Meta, Canvas } from "@storybook/blocks";
-import * as OverrideStories from './overrides.stories';
-
-<Meta of={OverrideStories} />
-
-# Overrides
-
-## Options
-
-`property`:
-
-- `margin`
-- `padding`
-
-`direction`:
-
-- `top`
-- `bottom`
-- `vertical` - `top` and `bottom`
-
-## Removing space
-
-```
-// For all devices
-tna-!--no-[property]-[direction]
-```
-
-`device` options (optional):
-
-- `large`
-- `medium`
-- `small`
-- `tiny`
-
-```
-// For a specific device size
-tna-!--no-[property]-[direction]-[device]
-```
-
-## Adding space
-
-`size` options:
-
-- `xs`
-- `s`
-- `m`
-- `l`
-- `xl`
-- `xxl`
-
-```css
-tna-!--[property]-[direction]-[size]
-```