@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

package/nationalarchives/variables/_colour.scss

@@ -1,80 +1,74 @@
 @use "sass:map";
-@use "../features";
 
-$-tna-black: #000;
-$-tna-grey: #8c9694;
-$-tna-light-grey: #d9d9d6;
-$-tna-white: #fff;
+$colour-palette-brand: (
+  "black": #000,
+  "grey": #8c9694,
+  "light-grey": #d9d9d6,
+  "white": #fff,
 
-$-tna-yellow: #fc0;
-$-tna-pink: #fe1d57;
-$-tna-orange: #fd3f03;
-$-tna-green: #86bc25;
-$-tna-blue: #00b0ff;
+  "yellow": #fc0,
+  "pink": #fe1d57,
+  "orange": #fd3f03,
+  "green": #86bc25,
+  "blue": #00b0ff,
 
-$-tna-brown: #654e37;
-$-tna-maroon: #9c193a;
-$-tna-chestnut: #8f3415;
-$-tna-forest: #00623b;
-$-tna-navy: #004c7e;
+  "brown": #654e37,
+  "maroon": #9c193a,
+  "chestnut": #8f3415,
+  "forest": #00623b,
+  "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-default: $-tna-yellow;
-$-accent-colour-default-dark: $-accent-colour-default;
+  "cream": #f9f7e2,
+  "pastel-pink": #fad3d4,
+  "pastel-orange": #f9e1bc,
+  "pastel-green": #dde5d5,
+  "pastel-blue": #d4e5ef,
+);
 
-// 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-forest: $-tna-forest;
-$tna-blue: $-tna-blue;
-$tna-cream: $-tna-cream;
-$tna-white: $-tna-white;
+$dark-grey: #26262a;
+$base-font: #343338;
 
 /*
 =========================================
-LIGHT/DEFAULT THEME
+LIGHT THEME (DEFAULT)
 =========================================
 */
 $colour-palette-default: (
-  "page-background": $-tna-white,
-  "font-base": $-base-font,
-  "font-dark": $-tna-black,
-  "font-light": rgba($-base-font, 0.7),
+  "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": $-tna-blue,
+  "focus-outline": map.get($colour-palette-brand, "blue"),
   "keyline": #ccc,
-  "keyline-dark": $-dark-grey,
-  "accent-default": $-accent-colour-default,
-  "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,
-  "contrast-background": $-dark-grey,
-  "contrast-font-base": $-tna-white,
-  "contrast-font-dark": $-tna-white,
-  "contrast-font-light": rgba($-tna-white, 0.7),
-  "contrast-link": $-tna-white,
-  "contrast-link-visited": #b9f,
-  "contrast-keyline": rgba($-tna-white, 0.5),
-  "contrast-keyline-dark": rgba($-tna-white, 0.8),
+  "keyline-dark": $dark-grey,
+  "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"),
+  "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, "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"),
 );
 
 /*
@@ -85,18 +79,23 @@ DARK THEME
 $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.5),
-    "link": $-tna-blue,
+    "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),
+    "link": map.get($colour-palette-brand, "blue"),
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
-    "keyline": rgba($-tna-white, 0.25),
-    "keyline-dark": $-tna-white,
-    "accent-default": $-accent-colour-default-dark,
-    "contrast-background": #111,
+    "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
+    "keyline-dark": 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": #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,
   )
 );
 
@@ -108,21 +107,22 @@ LIGHT, HIGH_CONTRAST THEME
 $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,
-    "contrast-background": $-tna-white,
-    "contrast-font-base": $-tna-black,
-    "contrast-font-dark": $-tna-black,
-    "contrast-font-light": $-tna-black,
-    "contrast-link": $-tna-black,
-    "contrast-link-visited": $-tna-black,
-    "contrast-keyline": $-tna-black,
-    "contrast-keyline-dark": $-tna-black,
+    "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"),
+    "link-visited": map.get($colour-palette-brand, "black"),
+    "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": #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"),
+    "contrast-link": map.get($colour-palette-brand, "navy"),
+    "contrast-link-visited": map.get($colour-palette-brand, "black"),
+    "contrast-keyline": map.get($colour-palette-brand, "black"),
+    "contrast-keyline-dark": map.get($colour-palette-brand, "black"),
   )
 );
 
@@ -134,12 +134,12 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": $tna-black,
-    "font-base": $-tna-white,
-    "font-light": $-tna-white,
-    "link": $-tna-white,
-    "link-visited": $-tna-white,
-    "keyline": $-tna-white,
-    "contrast-background": $tna-black,
+    "page-background": map.get($colour-palette-brand, "black"),
+    "font-base": map.get($colour-palette-brand, "white"),
+    "font-light": map.get($colour-palette-brand, "white"),
+    "link": map.get($colour-palette-brand, "white"),
+    "link-visited": map.get($colour-palette-brand, "white"),
+    "keyline": map.get($colour-palette-brand, "white"),
+    "contrast-background": #111,
   )
 );

package/nationalarchives/variables/_grid.scss

@@ -1,7 +1,7 @@
 $largest-container-width: 75.25rem !default;
 
 $gutter-width: 2rem !default;
-$gutter-width-mobile: 0.75rem !default;
+$gutter-width-mobile: 1rem !default;
 
 $column-count: 12 !default;
 $column-count-medium: 6 !default;

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,40 @@
 @use "sass:math";
 @use "./typography";
 
-$largest-medium-device-px: 1024 !default;
-$largest-small-device-px: 768 !default;
-$largest-tiny-device-px: 480 !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,
+$-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,
+$-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,
+$-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,
+$-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,
+$-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,
+$-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})";
+$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/_spacing.scss

@@ -1,7 +1,17 @@
 $spacing: (
-  // "xs": 0.5,
+  "xs": 0.5,
   "s": 1,
   "m": 2,
   "l": 3,
-  "xl": 6
+  "xl": 5,
+  "xxl": 8,
+);
+
+$spacing-mobile: (
+  "xs": 0.5,
+  "s": 0.75,
+  "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.15-prerelease",
+  "version": "0.1.17-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -8,7 +8,7 @@
     "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:sass": "sass --style=compressed --embed-sources src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
   "repository": {
@@ -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 "../../variables/colour" as colourVars; // TODO
-
-.tna-featured-collection {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-
-  background-color: colourVars.$tna-cream;
-
-  .tna-card {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-}

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

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

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

@@ -1,96 +0,0 @@
-{% from "nationalarchives/components/grid/macro.njk" import tnaGrid %}
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
-
-{% set exampleCard = {
-  heading: {
-    title: "Card title",
-    level: 3,
-    size: "m",
-    singleSentence: true
-  },
-  href: "#",
-  image: {
-    src: "https://picsum.photos/id/29/640/360",
-    alt: "A placeholder image"
-  },
-  body: "<p>Card body</p>"
-} %}
-
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set containerClasses = containerClasses.concat('tna-featured-collection') -%}
-
-{{ tnaGrid({
-  columns: [
-    {
-      width: "full",
-      widthMedium: "full",
-      widthSmall: "full",
-      widthTiny: "full",
-      html: "<h2 class=\"tna-heading\">" + params.heading + "</h2>"
-    },
-    {
-      width: "1-2",
-      widthMedium: "2-3",
-      widthSmall: "1-2",
-      widthTiny: "full",
-      html: tnaCard({
-        heading: {
-          title: "Card title",
-          level: 3,
-          size: "m",
-          singleSentence: true
-        },
-        href: "#",
-        image: {
-          src: "https://picsum.photos/id/29/640/360",
-          alt: "A placeholder image"
-        },
-        label: "Feature",
-        body: "<p>Card body</p>"
-      })
-    },
-    {
-      width: "1-2",
-      widthMedium: "1-3",
-      widthSmall: "1-2",
-      widthTiny: "full",
-      html: tnaGrid({
-        columns: [
-          {
-            width: "1-2",
-            widthMedium: "full",
-            widthSmall: "full",
-            widthTiny: "full",
-            html: tnaCard(exampleCard)
-          },
-          {
-            width: "1-2",
-            widthMedium: "full",
-            widthSmall: "full",
-            widthTiny: "full",
-            html: tnaCard(exampleCard)
-          },
-          {
-            width: "1-2",
-            widthMedium: "full",
-            widthSmall: "full",
-            widthTiny: "full",
-            html: tnaCard(exampleCard)
-          },
-          {
-            width: "1-2",
-            widthMedium: "full",
-            widthSmall: "full",
-            widthTiny: "full",
-            html: tnaCard(exampleCard)
-          }
-        ],
-        noPadding: true
-      }),
-      noPadding: true
-    }
-  ],
-  htmlElement: "section",
-  classes: containerClasses | join(' '),
-  attributes: params.attributes
-}) }}

package/nationalarchives/tools/_assets.scss

@@ -1,5 +0,0 @@
-@use "../variables/assets";
-
-@function tna-asset-url($asset) {
-  @return #{assets.$tna-assets-path}/#{$asset};
-}