Feature/typography weights (#45)

* Address font weights

* Update package and fixture tests

* Move variable, use var in font import

* Few small typography fixes

* Ignore stylelint for interpolated URL import

.gitignore

@@ -7,4 +7,5 @@ storybook
 *.zip
 *.tgz
 build-storybook.log
-chromatic.config.json
+chromatic.config.json
+chromatic.log

.storybook/preview.js

@@ -3,7 +3,10 @@ import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 // import isChromatic from "chromatic/isChromatic";
 
-document.documentElement.classList.add("tna-template");
+document.documentElement.classList.add(
+  "tna-template",
+  "tna-template--yellow-accent",
+);
 if (window.self !== window.top) {
   document.documentElement.classList.add("tna-template--padded");
 }

.stylelintrc

@@ -15,6 +15,7 @@
         "scss/dollar-variable-empty-line-before": null,
         "scss/double-slash-comment-empty-line-before": null,
         "selector-class-pattern": null,
+        "no-invalid-position-at-import-rule": null,
         "plugin/selector-bem-pattern": {
             "preset": "bem"
         },

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
 - Allow links to have no visited state with `tna-link--no-visited-state`
 - Card supertitles can be made "plain" with no contrasting colour
+- Roboto Mono Bold added
+- Ability to either use bundled fonts or fonts hosted by Google (default is Google fonts)
 - Featured records component
 
 ### Changed
@@ -22,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
 - Mixin `colour.invert` changed to `colour.contrast`
 - Background colour classes changed to BEM (`tna-background--accent` -> `tna-background-accent`)
+- Open Sans body weight changed from `500` to `400`
 - Text balance on headings removed but left on headings with links
 - `background-tint` colour changed for better accessibility/contrast
 

src/nationalarchives/components/featured-records/featured-records.scss

@@ -70,7 +70,7 @@
     padding-bottom: 0.25rem;
 
     @include typography.detail-font;
-    font-weight: 700;
+    @include typography.detail-font-weight-bold;
   }
 
   &__date-label {

src/nationalarchives/tools/_typography.scss

@@ -12,26 +12,34 @@
 }
 
 @mixin main-font-weight {
-  font-weight: typography.$font-weight-main;
+  font-weight: typography.$main-font-weight;
 }
 
 @mixin main-font-weight-bold {
-  font-weight: typography.$font-weight-main-bold;
+  font-weight: typography.$main-font-weight-bold;
 }
 
 @mixin main-font {
-  font-family: typography.$font-family-main;
+  font-family: typography.$main-font-family;
   @include main-font-weight;
 }
 
 @mixin heading-font {
-  font-family: typography.$font-family-heading;
-  font-weight: typography.$font-weight-heading;
+  font-family: typography.$heading-font-family;
+  font-weight: typography.$heading-font-weight;
+}
+
+@mixin detail-font-weight {
+  font-weight: typography.$detail-font-weight;
+}
+
+@mixin detail-font-weight-bold {
+  font-weight: typography.$detail-font-weight-bold;
 }
 
 @mixin detail-font {
-  font-family: typography.$font-family-detail;
-  font-weight: typography.$font-weight-detail;
+  font-family: typography.$detail-font-family;
+  @include detail-font-weight;
 }
 
 @mixin detail-font-small {

src/nationalarchives/utilities/_typography.scss

@@ -8,30 +8,41 @@
 @use "../variables/grid";
 @use "../variables/typography" as typographyVars;
 
-// @import "https://use.typekit.net/hkj3kuz.css";
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Roboto Mono";
-  src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
+@if typographyVars.$use-local-fonts {
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
+    font-weight: typographyVars.$main-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
+    font-weight: typographyVars.$main-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
+    font-weight: typographyVars.$detail-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
+    font-weight: typographyVars.$detail-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+} @else {
+  // @import "https://use.typekit.net/hkj3kuz.css";
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -67,12 +78,6 @@ ol {
   margin-top: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 strong {
   @include typography.main-font-weight-bold;
 }

src/nationalarchives/variables/_typography.scss

@@ -1,5 +1,7 @@
 @use "sass:math";
 
+$use-local-fonts: false !default;
+
 $relative-1rem-px: 16;
 
 $body-font-size-px: 18 !default;
@@ -8,12 +10,13 @@ $body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
 
 $interactive-text-decoration-thickness: 3.5px !default;
 
-$font-family-main: "Open Sans", sans-serif !default;
-$font-weight-main: normal !default; // Defined in utilities/_typography.scss
-$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss
+$main-font-family: "Open Sans", sans-serif !default;
+$main-font-weight: 400 !default;
+$main-font-weight-bold: 700 !default;
 
-$font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
-$font-weight-heading: 500 !default;
+$heading-font-family: supria-sans-condensed, "Arial Narrow", sans-serif !default;
+$heading-font-weight: 500 !default;
 
-$font-family-detail: "Roboto Mono", monospace !default;
-$font-weight-detail: normal !default;
+$detail-font-family: "Roboto Mono", monospace !default;
+$detail-font-weight: 400 !default;
+$detail-font-weight-bold: 500 !default;

tasks/test-fixtures.js

@@ -63,7 +63,8 @@ if (failedComponents.length) {
       components.length
     } component${components.length === 1 ? "" : "s"} failed`,
   );
-  process.exit(1);
+  process.exitCode = 1;
+  throw new Error("Fixtures tests failed");
 } else {
   console.log(
     `🟢 [PASS] ${components.length} component${

tasks/test-package.js

@@ -41,15 +41,22 @@ const checkExists = [
   "nationalarchives/all.mjs",
   "nationalarchives/all.scss",
   // Assets
+  "nationalarchives/assets/fonts/fa-brands-400.ttf",
+  "nationalarchives/assets/fonts/fa-brands-400.woff2",
+  "nationalarchives/assets/fonts/fa-solid-900.ttf",
+  "nationalarchives/assets/fonts/fa-solid-900.woff2",
+  "nationalarchives/assets/fonts/OpenSans-Bold.ttf",
+  "nationalarchives/assets/fonts/OpenSans-Regular.ttf",
+  "nationalarchives/assets/fonts/RobotoMono-Medium.ttf",
+  "nationalarchives/assets/fonts/RobotoMono-Regular.ttf",
   "nationalarchives/assets/images/apple-touch-icon-152x152.png",
   "nationalarchives/assets/images/apple-touch-icon-167x167.png",
   "nationalarchives/assets/images/apple-touch-icon-180x180.png",
   "nationalarchives/assets/images/apple-touch-icon.png",
   "nationalarchives/assets/images/favicon.ico",
   "nationalarchives/assets/images/mask-icon.svg",
+  "nationalarchives/assets/images/mstile-150x150.png",
   "nationalarchives/assets/images/nationalarchives-opengraph-image.png",
-  "nationalarchives/assets/images/tna-horizontal-logo-inverted.svg",
-  "nationalarchives/assets/images/tna-horizontal-logo.svg",
   "nationalarchives/assets/images/tna-square-logo.svg",
   // Components
   ...componentFiles("breadcrumbs", "Breadcrumbs"),
@@ -104,7 +111,8 @@ checkExists.forEach((checkFile) => {
     );
   } catch (err) {
     console.error(`  🔴 [FAIL] ${err}`);
-    process.exit();
+    process.exitCode = 1;
+    throw new Error("File structure test failed");
   }
 });
 
@@ -120,7 +128,8 @@ if (packageJson.version === compiledPackageJson.version) {
   console.error(
     `  🔴 [FAIL] The package version should be ${packageJson.version} but is ${compiledPackageJson.version}`,
   );
-  process.exit();
+  process.exitCode = 1;
+  throw new Error("Package version test failed");
 }
 
 console.log("\n");
@@ -130,7 +139,7 @@ const expectedPrototypeKitConfigProperties = [
   "nunjucksPaths",
   "scripts",
   "assets",
-  "sass",
+  "stylesheets",
   "templates",
 ];
 const prototypeKitConfig = require(
@@ -150,7 +159,8 @@ expectedPrototypeKitConfigProperties.forEach(
       console.error(
         `  🔴 [FAIL] Prototype kit config is missing: ${expectedPrototypeKitConfigProperty}`,
       );
-      process.exit();
+      process.exitCode = 1;
+      throw new Error("Prototype kit config test failed");
     }
   },
 );
@@ -170,7 +180,8 @@ if (
   console.log(`  🟢 [PASS] all.js function exists: initAll()`);
 } else {
   console.error(`  🔴 [FAIL] all.js function missing: initAll()`);
-  process.exit();
+  process.exitCode = 1;
+  throw new Error("JavaScript test failed");
 }
 if (
   Object.keys(jsAllPackage).includes("Cookies") &&
@@ -179,7 +190,8 @@ if (
   console.log(`  🟢 [PASS] all.js class exists: Cookies`);
 } else {
   console.error(`  🔴 [FAIL] all.js class missing: Cookies`);
-  process.exit();
+  process.exitCode = 1;
+  throw new Error("JavaScript module test failed");
 }
 Object.keys(componentsWithJavaScript).forEach((component) => {
   const componentClass = componentsWithJavaScript[component];
@@ -190,7 +202,8 @@ Object.keys(componentsWithJavaScript).forEach((component) => {
     console.log(`  🟢 [PASS] all.js function exists: ${componentClass}()`);
   } else {
     console.error(`  🔴 [FAIL] all.js function missing: ${componentClass}()`);
-    process.exit();
+    process.exitCode = 1;
+    throw new Error("Component JavaScript test failed");
   }
 });
 Object.keys(componentsWithJavaScript).forEach((component) => {
@@ -209,7 +222,8 @@ Object.keys(componentsWithJavaScript).forEach((component) => {
     console.error(
       `  🔴 [FAIL] ${component}.js function missing: ${componentClass}()`,
     );
-    process.exit();
+    process.exitCode = 1;
+    throw new Error("Standalone component JavaScript test failed");
   }
 });