@nationalarchives/frontend 0.1.11-prerelease → 0.1.13-prerelease

package/nationalarchives/utilities/_global.scss

@@ -112,9 +112,16 @@
   margin: 0;
   padding: 0;
 
-  // @include colour.colour-background("page-background");
-
   overflow: auto;
+
+  &:has(.tna-header):has(#main[role="main"]):has(.tna-footer) {
+    display: flex;
+    flex-direction: column;
+
+    #main[role="main"] {
+      flex: 1;
+    }
+  }
 }
 
 img,

package/nationalarchives/utilities/_typography.scss

@@ -3,7 +3,7 @@
 @use "../tools/typography";
 
 // Temporary - will eventually bundle font files into package
-@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
@@ -74,7 +74,7 @@ a {
 }
 
 .tna-heading {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 
   @include colour.colour-font("font-dark");
   @include typography.heading-font;

package/nationalarchives/variables/_colour.scss

@@ -39,13 +39,15 @@ $-accent-colour-dark: $-accent-colour;
 // }
 // @debug $-accent-colour;
 
-// @function -accent-colour() {
-//   @return $-accent-colour or $-tna-yellow;
-// }
+@function accent-colour() {
+  // @return $-accent-colour or $-tna-yellow;
+  @return $-accent-colour;
+}
 
-// @function -accent-colour-dark() {
-//   @return $-accent-colour-dark or -accent-colour();
-// }
+@function accent-colour-dark() {
+  // @return $-accent-colour-dark or -accent-colour();
+  @return $-accent-colour-dark or accent-colour();
+}
 
 // TODO: Scoped variables should not be used directly outside of this file
 $tna-black: $-tna-black;
@@ -68,7 +70,7 @@ $colour-palette-default: (
   "focus-outline": $-tna-blue,
   "keyline": #ccc,
   "keyline-dark": $-dark-grey,
-  "accent": -accent-colour(),
+  "accent": accent-colour(),
   "button-primary-text": $-tna-white,
   "button-primary-background": $-tna-black,
   "button-primary-hover-text": $-tna-black,
@@ -85,12 +87,12 @@ $colour-palette-dark: map.merge(
     "page-background": #222,
     "font-base": rgba($-tna-white, 0.95),
     "font-dark": $-tna-white,
-    "font-light": rgba($-tna-white, 0.8),
+    "font-light": rgba($-tna-white, 0.5),
     "link": $-tna-blue,
     "link-visited": #b9f,
     "keyline": rgba($-tna-white, 0.5),
     "keyline-dark": $-tna-white,
-    "accent": -accent-colour-dark(),
+    "accent": accent-colour-dark(),
   )
 );
 

package/nationalarchives/variables/_typography.scss

@@ -4,7 +4,9 @@ $font-family-main: "Open Sans", sans-serif;
 $font-weight-main: 400;
 
 $font-family-heading: supria-sans-condensed, sans-serif;
-$font-weight-heading: 600;
+$font-weight-heading: 400;
 
 $font-family-detail: "Roboto Mono", monospace;
-$font-weight-detail: 500;
+$font-weight-detail: 400;
+// $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.11-prerelease",
+  "version": "0.1.13-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -9,8 +9,7 @@
     "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:scripts": "webpack",
-    "package:test": "tasks/build-package.sh && node tasks/test-package.js"
+    "package:scripts": "webpack"
   },
   "repository": {
     "type": "git",
@@ -40,42 +39,43 @@
   },
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
   "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
     "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.2.0",
-    "@storybook/addon-docs": "^7.2.0",
-    "@storybook/addon-essentials": "^7.2.0",
-    "@storybook/addon-interactions": "^7.2.0",
-    "@storybook/addon-links": "^7.2.0",
-    "@storybook/addon-mdx-gfm": "^7.2.0",
-    "@storybook/html": "^7.2.0",
-    "@storybook/html-webpack5": "^7.2.0",
+    "@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/test-runner": "^0.12.0",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.0",
+    "axe-playwright": "^1.2.3",
     "babel-loader": "^9.0.1",
-    "chromatic": "^6.19.9",
+    "chromatic": "^6.21.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-storybook": "^0.6.13",
     "glob": "^10.2.7",
-    "jest-image-snapshot": "^6.1.0",
+    "jest-image-snapshot": "^6.2.0",
     "nunjucks": "^3.2.3",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.54.9",
+    "sass": "^1.64.2",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.2.0",
+    "storybook": "^7.2.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^15.9.0",
+    "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-selector-bem-pattern": "^3.0.0",
-    "webpack": "^5.74.0",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   }
 }