@nationalarchives/frontend 0.1.16-prerelease → 0.1.18-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -2,6 +2,7 @@
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/typography";
+@use "../variables/grid";
 
 // TODO: Temporary - will eventually bundle font files into package
 @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&family=Roboto+Mono:wght@400&display=swap";
@@ -63,7 +64,23 @@ a {
 
   &:hover,
   &:active {
-    text-decoration-thickness: 3.5px;
+    @include typography.interacted-text-decoration;
+  }
+
+  &.tna-chip {
+    // display: block;
+
+    text-decoration: none;
+
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("font-dark");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
   }
 }
 
@@ -77,7 +94,7 @@ a {
   }
 
   li::marker {
-    @include colour.colour-font("accent");
+    @include colour.colour-font("accent-background");
     font-weight: 700;
   }
 
@@ -88,7 +105,76 @@ a {
   }
 }
 
-.tna-heading {
+%chip {
+  max-width: max-content;
+  padding: 0.375em 0.5rem;
+
+  // display: inline-block;
+  display: block;
+
+  @include colour.colour-font("font-dark");
+  @include typography.detail-font-small;
+  line-height: 1;
+
+  @include colour.accent;
+}
+
+.tna-chip {
+  @extend %chip;
+}
+
+.tna-chip-list {
+  padding-left: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  list-style: none;
+
+  &__item {
+    margin: 0 1rem 1rem 0;
+
+    display: inline-block;
+  }
+}
+
+%heading-xl {
+  @include typography.relative-font-size(64);
+  line-height: 1.2;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(42);
+  }
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(36);
+  }
+}
+
+%heading-l {
+  @include typography.relative-font-size(32);
+  line-height: 1.4;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(26);
+  }
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(24);
+  }
+}
+
+%heading-m {
+  @include typography.relative-font-size(20);
+  line-height: 1.6;
+}
+
+%heading-s {
+  @include typography.relative-font-size(18);
+  line-height: 1.6;
+}
+
+%heading {
   margin-bottom: 1rem;
 
   @include colour.colour-font("font-dark");
@@ -98,99 +184,91 @@ a {
     margin-bottom: 0;
   }
 
-  &--xl {
-    @include typography.relative-font-size(64);
-    line-height: 1;
+  a {
+    &::after {
+      padding-left: 0.25rem;
+
+      display: inline-block;
 
-    @include media.on-medium {
-      @include typography.relative-font-size(42);
+      font-weight: 700;
+
+      content: "\203A";
     }
 
-    @include media.on-mobile {
-      @include typography.relative-font-size(36);
+    &:hover {
+      &::after {
+        transform: translateX(0.25rem);
+      }
     }
   }
+}
 
-  &--l {
-    @include typography.relative-font-size(32);
-    line-height: 1.2;
+.tna-heading {
+  @extend %heading;
+  // @extend %heading-l;
 
-    @include media.on-medium {
-      @include typography.relative-font-size(26);
-    }
+  &--xl {
+    @extend %heading-xl;
+  }
 
-    @include media.on-mobile {
-      @include typography.relative-font-size(24);
-    }
+  &--l {
+    @extend %heading-l;
   }
 
   &--m {
-    @include typography.relative-font-size(20);
-    line-height: 1.4;
+    @extend %heading-m;
   }
 
   &--s {
-    @include typography.relative-font-size(18);
-    line-height: 1.6;
+    @extend %heading-s;
   }
 }
 
 .tna-hgroup {
   margin-bottom: 1rem;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   &__supertitle {
     margin: 0 0 0.5rem;
 
-    @include colour.colour-font("font-base");
-    @include typography.detail-font;
-
-    .tna-hgroup & {
-      // margin: 0;
-    }
+    @extend %chip;
   }
 
   &__title {
     margin: 0;
 
-    @include colour.colour-font("font-dark");
+    display: block;
 
-    .tna-hgroup__supertitle {
-      display: block;
+    @extend %heading;
+    // @extend %heading-l;
+  }
 
-      @include colour.colour-font("font-base");
-    }
+  &--xl &__title {
+    @extend %heading-xl;
   }
 
-  &--xl {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(64);
-      line-height: 1;
-    }
+  &--l &__title {
+    @extend %heading-l;
   }
 
-  &--l {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(32);
-      line-height: 1.2;
-    }
+  &--m &__title {
+    @extend %heading-m;
   }
 
-  &--m {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(20);
-      line-height: 1.4;
-    }
+  &--s &__title {
+    @extend %heading-s;
   }
+}
 
-  &--s {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(18);
-      line-height: 1.6;
-    }
+.tna-heading,
+.tna-hgroup {
+  margin-top: 3rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
@@ -198,7 +276,7 @@ a {
   margin: 0 0 2rem;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("keyline", 0.35rem, solid, left);
+  @include colour.colour-border("accent-background", 0.35rem, solid, left);
 
   // quotes: "“" "”" "‘" "’";
 
@@ -228,3 +306,64 @@ a {
     }
   }
 }
+
+.tna-scene-setter {
+  @include typography.detail-font;
+  @include colour.colour-font("font-dark");
+  @include typography.relative-font-size(30);
+  line-height: math.div(50, 30);
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(24);
+    line-height: 2;
+  }
+
+  a {
+    color: inherit;
+    text-decoration-thickness: 2px;
+
+    &:hover {
+      text-decoration-thickness: 4.5px;
+    }
+  }
+}
+
+.tna-columns {
+  column-gap: grid.$gutter-width;
+
+  &--2 {
+    column-count: 2;
+  }
+
+  &--3 {
+    column-count: 3;
+  }
+
+  @include media.on-mobile {
+    column-gap: grid.$gutter-width-mobile;
+  }
+
+  @include media.on-small {
+    @for $i from 1 through 4 {
+      &--#{$i}-small {
+        column-count: $i;
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    @for $i from 1 through 4 {
+      &--#{$i}-tiny {
+        column-count: $i;
+      }
+    }
+  }
+
+  &__block {
+    break-inside: avoid;
+  }
+
+  &:has(&__block:only-of-type) {
+    column-count: 1;
+  }
+}

package/nationalarchives/variables/_assets.scss

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

package/nationalarchives/variables/_colour.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "../features";
 
 $colour-palette-brand: (
   "black": #000,
@@ -29,42 +28,47 @@ $colour-palette-brand: (
 $dark-grey: #26262a;
 $base-font: #343338;
 
-$-accent-colour-default: map.get($colour-palette-brand, "yellow");
-$-accent-colour-default-dark: $-accent-colour-default;
-
 /*
 =========================================
 LIGHT THEME (DEFAULT)
 =========================================
 */
 $colour-palette-default: (
-  "page-background": map.get($colour-palette-brand, "white"),
+  "page-background": #f4f4f4,
   "font-base": $base-font,
   "font-dark": map.get($colour-palette-brand, "black"),
   "font-light": rgba($base-font, 0.7),
   "link": #1d70ab,
   "link-visited": #4c2c92,
-  // "focus-outline": #004c7e, // Old value
   "focus-outline": map.get($colour-palette-brand, "blue"),
   "keyline": #ccc,
   "keyline-dark": $dark-grey,
-  "accent-default": $-accent-colour-default,
   "button-primary-text": map.get($colour-palette-brand, "white"),
   "button-primary-background": map.get($colour-palette-brand, "black"),
   "button-primary-hover-text": map.get($colour-palette-brand, "black"),
   "button-primary-hover-background": map.get($colour-palette-brand, "white"),
-  "button-secondary-text": map.get($colour-palette-brand, "black"),
-  "button-secondary-background": map.get($colour-palette-brand, "yellow"),
-  "button-secondary-hover-text": map.get($colour-palette-brand, "black"),
-  "button-secondary-hover-background": map.get($colour-palette-brand, "white"),
-  "contrast-background": $dark-grey,
+  "contrast-background": #1e1e1e,
+  // TODO: #343338 ?
   "contrast-font-base": map.get($colour-palette-brand, "white"),
   "contrast-font-dark": map.get($colour-palette-brand, "white"),
   "contrast-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
-  "contrast-link": map.get($colour-palette-brand, "blue"),
-  "contrast-link-visited": #b9f,
+  "contrast-link": map.get($colour-palette-brand, "white"),
+  // "contrast-link-visited": #b9f, // Don't show visited state on contrasting backgrounds
+  "contrast-link-visited": map.get($colour-palette-brand, "white"),
   "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
   "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
+  "accent": map.get($colour-palette-brand, "light-grey"),
+  "accent-background": #111,
+  "accent-background-light": map.get($colour-palette-brand, "light-grey"),
+  "accent-font-base": map.get($colour-palette-brand, "white"),
+  "accent-font-dark": map.get($colour-palette-brand, "white"),
+  "accent-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
+  "accent-link": map.get($colour-palette-brand, "white"),
+  "accent-link-visited": #b9f,
+  "accent-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
+  "accent-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
+  "button-accent-text": map.get($colour-palette-brand, "black"),
+  "button-accent-background": map.get($colour-palette-brand, "grey"),
 );
 
 /*
@@ -75,7 +79,7 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #222,
+    "page-background": #111,
     "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95),
     "font-dark": map.get($colour-palette-brand, "white"),
     "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5),
@@ -83,10 +87,15 @@ $colour-palette-dark: map.merge(
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
     "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
     "keyline-dark": map.get($colour-palette-brand, "white"),
-    "accent-default": $-accent-colour-default-dark,
-    "contrast-background": #111,
+    "button-primary-text": map.get($colour-palette-brand, "black"),
+    "button-primary-background": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-text": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-background": map.get($colour-palette-brand, "black"),
+    "contrast-background": #1e1e1e,
     "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": #111,
   )
 );
 
@@ -98,6 +107,7 @@ LIGHT, HIGH_CONTRAST THEME
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
+    "page-background": map.get($colour-palette-brand, "white"),
     "font-base": map.get($colour-palette-brand, "black"),
     "font-light": map.get($colour-palette-brand, "black"),
     "link": map.get($colour-palette-brand, "navy"),
@@ -105,7 +115,7 @@ $colour-palette-high-contrast: map.merge(
     "focus-outline": map.get($colour-palette-brand, "orange"),
     "keyline": map.get($colour-palette-brand, "black"),
     "keyline-dark": map.get($colour-palette-brand, "black"),
-    "contrast-background": map.get($colour-palette-brand, "white"),
+    "contrast-background": #f4f4f4,
     "contrast-font-base": map.get($colour-palette-brand, "black"),
     "contrast-font-dark": map.get($colour-palette-brand, "black"),
     "contrast-font-light": map.get($colour-palette-brand, "black"),
@@ -130,10 +140,6 @@ $colour-palette-high-contrast-dark: map.merge(
     "link": map.get($colour-palette-brand, "white"),
     "link-visited": map.get($colour-palette-brand, "white"),
     "keyline": map.get($colour-palette-brand, "white"),
-    "button-primary-text": map.get($colour-palette-brand, "black"),
-    "button-primary-background": map.get($colour-palette-brand, "white"),
-    "button-primary-hover-text": map.get($colour-palette-brand, "white"),
-    "button-primary-hover-background": map.get($colour-palette-brand, "black"),
-    "contrast-background": map.get($colour-palette-brand, "black"),
+    "contrast-background": #111,
   )
 );

package/nationalarchives/variables/_index.scss

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

package/nationalarchives/variables/_spacing.scss

@@ -3,7 +3,8 @@ $spacing: (
   "s": 1,
   "m": 2,
   "l": 3,
-  "xl": 6,
+  "xl": 5,
+  "xxl": 8,
 );
 
 $spacing-mobile: (
@@ -12,4 +13,5 @@ $spacing-mobile: (
   "m": 1.5,
   "l": 2,
   "xl": 3,
+  "xxl": 5,
 );

package/nationalarchives/variables/_typography.scss

@@ -1,13 +1,16 @@
 $base-font-size-px: 16;
 
+$interactive-text-decoration-thickness: 3.5px;
+
 $font-family-main: "Open Sans", sans-serif;
 $font-weight-main: 500;
 $font-weight-main-bold: 700;
 
-$font-family-heading: supria-sans-condensed, sans-serif;
+$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif;
 $font-weight-heading: 400;
 
 $font-family-detail: "Roboto Mono", monospace;
 $font-weight-detail: 400;
+$font-weight-detail-bold: 700;
 // $font-family-detail: $font-family-main;
 // $font-weight-detail: $font-weight-main;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.16-prerelease",
+  "version": "0.1.18-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -42,20 +42,20 @@
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
     "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-docs": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-mdx-gfm": "^7.2.1",
-    "@storybook/html": "^7.2.1",
-    "@storybook/html-webpack5": "^7.2.1",
-    "@storybook/jest": "^0.1.0",
+    "@storybook/addon-a11y": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-mdx-gfm": "^7.4.0",
+    "@storybook/html": "^7.4.0",
+    "@storybook/html-webpack5": "^7.4.0",
+    "@storybook/jest": "^0.2.2",
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.0",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.0.1",
-    "chromatic": "^6.21.0",
+    "chromatic": "^7.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
@@ -70,10 +70,10 @@
     "sass": "^1.64.2",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.2.1",
+    "storybook": "^7.4.0",
     "style-loader": "^3.3.1",
     "stylelint": "^15.10.2",
-    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-selector-bem-pattern": "^3.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"

package/nationalarchives/patterns/_index.scss

@@ -1 +0,0 @@
-@forward "featured-collection/index";

package/nationalarchives/patterns/featured-collection/_index.scss

@@ -1,13 +0,0 @@
-@use "../../tools/colour";
-
-.tna-featured-collection {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-
-  background-color: colour.brand-colour("cream");
-
-  .tna-card {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-}

package/nationalarchives/patterns/featured-collection/featured-collection.stories.js

@@ -1,34 +0,0 @@
-import FeaturedCollection from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  heading: { control: "text" },
-  classes: { control: "text" },
-  attributes: { control: "object" },
-};
-
-Object.keys(argTypes).forEach((argType) => {
-  argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType,
-  )?.description;
-});
-
-export default {
-  title: "Patterns/Experimental/Featured collection",
-  argTypes,
-};
-
-const Template = ({ heading, classes, attributes }) =>
-  FeaturedCollection({
-    params: {
-      heading,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  heading: "Records from the collection",
-  classes: "tna-featured-collection--demo",
-};

package/nationalarchives/patterns/featured-collection/macro-options.json

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

package/nationalarchives/patterns/featured-collection/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaFeaturedCollection(params) %}
-  {%- include "nationalarchives/patterns/featured-collection/template.njk" -%}
-{% endmacro %}