@nationalarchives/frontend 0.1.51 → 0.1.53

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,10 +1,11 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build:storybook": "storybook build -o storybook --webpack-stats-json",
+    "build:storybook:tests": "storybook build -o storybook --webpack-stats-json --test",
     "build:package": "./tasks/build-package.sh",
     "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "compile:scripts": "webpack",
@@ -14,7 +15,7 @@
     "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
     "test:lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "test:package": "node tasks/test-package.js",
-    "test:storybook": "test-storybook --maxWorkers=1",
+    "test:storybook": "test-storybook",
     "test:unit": "jest --verbose",
     "update:fixtures": "node tasks/update-fixtures.js"
   },
@@ -43,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"