diff --git a/.gitignore b/.gitignore index 68996879..bc409558 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ storybook *.zip *.tgz build-storybook.log -chromatic.config.json \ No newline at end of file +chromatic.config.json +chromatic.log \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 8df0ade5..c7661716 100644 --- a/.storybook/preview.js +++ b/.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"); } diff --git a/.stylelintrc b/.stylelintrc index aeae7a5b..8230f641 100644 --- a/.stylelintrc +++ b/.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" }, diff --git a/CHANGELOG.md b/CHANGELOG.md index d3aaf5e7..15241ded 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf b/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf deleted file mode 100644 index a76d4ced..00000000 Binary files a/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf and /dev/null differ diff --git a/src/nationalarchives/assets/fonts/OpenSans-Regular.ttf b/src/nationalarchives/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 00000000..29e9e605 Binary files /dev/null and b/src/nationalarchives/assets/fonts/OpenSans-Regular.ttf differ diff --git a/src/nationalarchives/assets/fonts/RobotoMono-Medium.ttf b/src/nationalarchives/assets/fonts/RobotoMono-Medium.ttf new file mode 100644 index 00000000..f6c149a2 Binary files /dev/null and b/src/nationalarchives/assets/fonts/RobotoMono-Medium.ttf differ diff --git a/src/nationalarchives/assets/fonts/fa-regular-400.ttf b/src/nationalarchives/assets/fonts/fa-regular-400.ttf deleted file mode 100644 index c79589d8..00000000 Binary files a/src/nationalarchives/assets/fonts/fa-regular-400.ttf and /dev/null differ diff --git a/src/nationalarchives/assets/fonts/fa-regular-400.woff2 b/src/nationalarchives/assets/fonts/fa-regular-400.woff2 deleted file mode 100644 index 059a94e2..00000000 Binary files a/src/nationalarchives/assets/fonts/fa-regular-400.woff2 and /dev/null differ diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index d04508cc..d3ebdb9f 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/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 { diff --git a/src/nationalarchives/lib/font-awesome/regular.scss b/src/nationalarchives/lib/font-awesome/regular.scss deleted file mode 100644 index 3d962b3e..00000000 --- a/src/nationalarchives/lib/font-awesome/regular.scss +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - * Copyright 2023 Fonticons, Inc. - */ -@import "functions"; -@import "variables"; - -:root, -:host { - --#{$fa-css-prefix}-style-family-classic: "#{ $fa-style-family }"; - --#{$fa-css-prefix}-font-regular: normal 400 1em/1 "#{ $fa-style-family }"; -} - -@font-face { - font-family: "Font Awesome 6 Free"; - font-style: normal; - font-weight: 400; - font-display: $fa-font-display; - src: - url("#{$fa-font-path}/fa-regular-400.woff2") format("woff2"), - url("#{$fa-font-path}/fa-regular-400.ttf") format("truetype"); -} - -.far, -.#{$fa-css-prefix}-regular { - font-weight: 400; -} diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss index cfcdccb5..a393be58 100644 --- a/src/nationalarchives/tools/_typography.scss +++ b/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 { diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 23fef058..1c19ac8d 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/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; } diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss index 5bb4ff5f..6bc1e7b7 100644 --- a/src/nationalarchives/variables/_typography.scss +++ b/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; diff --git a/tasks/test-fixtures.js b/tasks/test-fixtures.js index adb33d64..0229442a 100644 --- a/tasks/test-fixtures.js +++ b/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${ diff --git a/tasks/test-package.js b/tasks/test-package.js index 694c36fd..b6532a0a 100644 --- a/tasks/test-package.js +++ b/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"); } });