@nationalarchives/frontend 0.1.37 → 0.1.39

package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -343,7 +343,7 @@ const Template = ({ theme, accent }) => {
             <div class="tna-blockquote__quote">
               <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
             </div>
-            <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
+            <p class="tna-blockquote__citation">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
             <a href="#">Researching with The National Archives</a>

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -64,7 +64,7 @@ const BlockquoteTemplate = ({
   <div class="tna-blockquote__quote">
     ${html}
   </div>
-  <p class="tna-blockquote__author">${author}</p>
+  <p class="tna-blockquote__citation">${author}</p>
 </blockquote>`;
 export const Blockquote = BlockquoteTemplate.bind({});
 Blockquote.args = {

package/nationalarchives/tools/_typography.scss

@@ -6,11 +6,6 @@
   font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
 }
 
-@mixin interacted-text-decoration {
-  text-decoration: underline;
-  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
-}
-
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
@@ -19,9 +14,16 @@
   font-weight: typography.$main-font-weight-bold;
 }
 
-@mixin main-font {
+@mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
-  @include main-font-weight;
+  @if $bold {
+    @include main-font-weight-bold;
+  } @else {
+    @include main-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
 }
 
 @mixin heading-font {
@@ -29,17 +31,15 @@
   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 {
+@mixin detail-font($bold: false) {
   font-family: typography.$detail-font-family;
-  @include detail-font-weight;
+  @if $bold {
+    font-weight: typography.$detail-font-weight-bold;
+  } @else {
+    font-weight: typography.$detail-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
 }
 
 @mixin detail-font-small {
@@ -48,3 +48,8 @@
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
 }
+
+@mixin interacted-text-decoration {
+  text-decoration: underline;
+  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
+}

package/nationalarchives/utilities/_typography.scss

@@ -17,14 +17,6 @@
     // font-display: swap;
   }
 
-  // @font-face {
-  //   font-family: "Open Sans";
-  //   src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
-  //   font-weight: typographyVars.$main-font-weight;
-  //   font-style: italic;
-  //   // font-display: swap;
-  // }
-
   @font-face {
     font-family: "Open Sans";
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
@@ -49,7 +41,7 @@
     // font-display: swap;
   }
 } @else {
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -394,7 +386,7 @@ small {
     font-weight: 700;
   }
 
-  &__author {
+  &__citation {
     @include typography.relative-font-size(16);
 
     .tna-blockquote & {
@@ -403,6 +395,7 @@ small {
 
     &::before {
       content: "\2014" " ";
+      content: "\2014" " " / "";
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -28,8 +28,9 @@
   "main": "nationalarchives/all.js",
   "exports": {
     ".": {
-      "sass": "./nationalarchives/all.scss",
-      "require": "./nationalarchives/all.js"
+      "css": "./nationalarchives/all.css",
+      "require": "./nationalarchives/all.js",
+      "sass": "./nationalarchives/all.scss"
     },
     "./nationalarchives/": "./nationalarchives/"
   },
@@ -38,23 +39,22 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
-    "@chromaui/addon-visual-tests": "^0.0.124",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^7.6.6",
-    "@storybook/addon-docs": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-mdx-gfm": "^7.6.6",
-    "@storybook/html": "^7.6.6",
-    "@storybook/html-webpack5": "^7.6.6",
-    "@storybook/test": "^8.0.0-alpha.5",
+    "@storybook/addon-a11y": "^7.6.15",
+    "@storybook/addon-docs": "^7.6.15",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-interactions": "^7.6.15",
+    "@storybook/addon-links": "^7.6.15",
+    "@storybook/addon-mdx-gfm": "^7.6.15",
+    "@storybook/html": "^7.6.15",
+    "@storybook/html-webpack5": "^7.6.15",
+    "@storybook/test": "^7.6.15",
     "@storybook/test-runner": "^0.16.0",
-    "axe-playwright": "^1.2.3",
+    "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
     "chromatic": "^10.1.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
     "eslint": "^8.52.0",
@@ -69,12 +69,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4",
-    "sass-loader": "^13.0.2",
+    "sass-loader": "^14.1.0",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.15",
     "style-loader": "^3.3.1",
     "stylelint": "^16.0.2",
-    "stylelint-config-standard-scss": "^12.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-selector-bem-pattern": "^3.0.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"