@nationalarchives/frontend 0.1.36 → 0.1.38

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

@@ -72,17 +72,17 @@ const Template = () => {
         `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
       <div class="tna-template__body">
         <div class="tna-colour-contrast-demo__example-content ${block}">
-          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
+          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
           <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
           <ul class="tna-chip-list">
             <li class="tna-chip-list__item">
               <span class="tna-chip">Chip</span>
             </li>
             <li class="tna-chip-list__item">
-              <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
+              <span class="tna-chip"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
             </li>
             <li class="tna-chip-list__item">
-              <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
+              <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
             </li>
           </ul>
           ${TextInput({

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

@@ -6,7 +6,7 @@ import Checkboxes from "../../../components/checkboxes/template.njk";
 import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
 import Gallery from "../../../components/gallery/template.njk";
-import Header from "../../../components/header/template.njk";
+import GlobalHeader from "../../../components/global-header/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
 import Message from "../../../components/message/template.njk";
@@ -43,6 +43,12 @@ export default {
 };
 
 const Template = ({ theme, accent }) => {
+  document.documentElement.classList.remove(
+    "tna-template",
+    "tna-template--light-theme",
+    "tna-template--yellow-accent",
+  );
+
   const cardDefaultOptions = {
     supertitle: "Card supertitle",
     title: "Card title",
@@ -104,25 +110,53 @@ const Template = ({ theme, accent }) => {
         accent: true,
       },
     })}
-    ${Header({
+    ${GlobalHeader({
       params: {
         logo: {
           strapline: "Colours",
           href: "#/",
         },
+        topNavigation: [
+          {
+            text: "Search",
+            href: "#/search",
+            icon: "search",
+          },
+          {
+            text: "Shop",
+            href: "#/shop",
+            icon: "bag-shopping",
+          },
+          {
+            text: "Sign in",
+            href: "#/sign-in",
+            icon: "user",
+          },
+        ],
         navigation: [
           {
-            text: "Alpha",
-            href: "#/alpha",
-            selected: true,
+            text: "Visit",
+            href: "#/visit",
+          },
+          {
+            text: "What's on",
+            href: "#/whats-on",
+          },
+          {
+            text: "Explore the collection",
+            href: "#/explore-the-collection",
+          },
+          {
+            text: "Using the archives",
+            href: "#/using-the-archives",
           },
           {
-            text: "Beta",
-            href: "#/beta",
+            text: "Learn",
+            href: "#/learn",
           },
           {
-            text: "Gamma",
-            href: "#/gamma",
+            text: "Professional guidance & services",
+            href: "#/professional-guidance-and-services",
           },
         ],
       },
@@ -355,17 +389,17 @@ const Template = ({ theme, accent }) => {
           </h3>
           <dl class="tna-dl tna-dl--icon-padding ">
             <dt>
-              <i class="fa-solid fa-landmark"></i>
+              <i class="fa-solid fa-landmark" aria-hidden="true"></i>
               Held by
             </dt>
             <dd>The National Archives, Kew</dd>
             <dt>
-              <i class="fa-solid fa-calendar"></i>
+              <i class="fa-solid fa-calendar" aria-hidden="true"></i>
               Date
             </dt>
             <dd>1972–1979</dd>
             <dt>
-              <i class="fa-solid fa-database"></i>
+              <i class="fa-solid fa-database" aria-hidden="true"></i>
               Reference
             </dt>
             <dd>LC 4</dd>
@@ -379,7 +413,7 @@ const Template = ({ theme, accent }) => {
             </li>
             <li class="tna-chip-list__item">
               <a href="#" class="tna-chip">
-                <i class="fa-solid fa-heart"></i>
+                <i class="fa-solid fa-heart" aria-hidden="true"></i>
                 Chip 2
               </a>
             </li>
@@ -388,7 +422,7 @@ const Template = ({ theme, accent }) => {
             </li>
             <li class="tna-chip-list__item">
               <a href="#" class="tna-chip tna-chip--plain">
-                <i class="fa-solid fa-heart"></i>
+                <i class="fa-solid fa-heart" aria-hidden="true"></i>
                 Chip 4
               </a>
             </li>

package/nationalarchives/stories/utilities/lists/lists.stories.js

@@ -45,7 +45,11 @@ const DescriptionListTemplate = ({ items, plain, classes }) =>
   } ${classes}">${items.reduce(
     (list, item) => `${list}
     <dt>
-      ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
+      ${
+        item.icon
+          ? `<i class="fa-solid fa-${item.icon}" aria-hidden="true"></i>`
+          : ""
+      }
       ${item.title}
     </dt>
     ${

package/nationalarchives/tools/_colour.scss

@@ -156,6 +156,10 @@
   @media (prefers-contrast: more) {
     @include colour-css-vars-high-contrast;
   }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
 }
 
 @mixin light {
@@ -168,6 +172,10 @@
   @media (prefers-contrast: more) {
     @include colour-css-vars-high-contrast-dark;
   }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 }
 
 @mixin dark {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -38,23 +38,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 +68,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"