@nationalarchives/frontend 0.1.35 → 0.1.37

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

@@ -5,9 +5,8 @@ import Card from "../../../components/card/template.njk";
 import Checkboxes from "../../../components/checkboxes/template.njk";
 import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
-import CookieBanner from "../../../components/cookie-banner/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";
@@ -44,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",
@@ -92,13 +97,6 @@ const Template = ({ theme, accent }) => {
               : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
-    <!--
-    ${CookieBanner({
-      params: {
-        cookiesUrl: "#",
-      },
-    })}
-    -->
     ${SkipLink({
       params: {
         href: "main-content",
@@ -112,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",
           },
         ],
       },
@@ -363,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>
@@ -387,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>
@@ -396,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>
@@ -1068,7 +1094,6 @@ const Template = ({ theme, accent }) => {
                   headingSize: "l",
                   id: "search1",
                   name: "q",
-                  formGroupClasses: "tna-search-field--no-border",
                 },
               })}
               ${TextInput({

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/templates/layouts/_generic.njk

@@ -9,7 +9,7 @@
 {% set pageTitle = '' %}
 
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en-GB') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}"{% for attribute, value in htmlAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+<html lang="{{ htmlLang | default('en') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}"{% for attribute, value in htmlAttributes %} {{attribute}}="{{value}}"{% endfor %}>
   <head>
     <meta charset="utf-8">
     <title>{% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle }}{% else %}{{ siteTitle }}{% endif %}{% endblock %}</title>
@@ -45,7 +45,8 @@
     {% block bodyStart %}
       {% block cookies %}
         {{ tnaCookieBanner({
-          url: '#'
+          cookiesUrl: '#',
+          cookiesPath: "/tna-frontend/"
         }) }}
       {% endblock %}
       

package/nationalarchives/tools/_colour.scss

@@ -150,18 +150,46 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
+%light {
+  @include colour-css-vars;
+
+  @media (prefers-contrast: more) {
+    @include colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
+}
+
+@mixin light {
+  @extend %light;
+}
+
+%dark {
+  @include colour-css-vars-dark;
+
+  @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 {
+  @extend %dark;
+}
+
 %plain {
   .tna-template--system-theme & {
-    @include colour-css-vars;
+    @extend %light;
 
     @media (prefers-color-scheme: dark) {
       @include colour-css-vars-dark;
     }
 
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast;
-    }
-
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour-css-vars-high-contrast-dark;
     }
@@ -190,22 +218,6 @@
   @extend %plain;
 }
 
-@mixin light {
-  @include colour-css-vars;
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast;
-  }
-}
-
-@mixin dark {
-  @include colour-css-vars-dark;
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast-dark;
-  }
-}
-
 %contrast {
   --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);

package/nationalarchives/utilities/_colour.scss

@@ -1,8 +1,8 @@
 @use "../tools/colour";
 
-:root {
-  @include colour.colour-css-vars;
-}
+// :root {
+//   @include colour.colour-css-vars;
+// }
 
 .tna-template {
   @include colour.colour-background("page-background");

package/nationalarchives/utilities/_forms.scss

@@ -71,7 +71,6 @@
     &--xs {
       font-size: 1em;
       @include typography.main-font;
-      // @include typography.main-font-weight-bold;
     }
   }
 

package/nationalarchives/utilities/_lists.scss

@@ -94,15 +94,12 @@
   &--plain {
     dt {
       padding-top: 0;
-      // padding-bottom: 0;
       padding-left: 0;
     }
 
     dd {
-      // margin-bottom: 0.5rem;
       padding-top: 0;
       padding-right: 0;
-      // padding-bottom: 0;
     }
   }
 

package/nationalarchives/utilities/_typography.scss

@@ -17,13 +17,13 @@
     // 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-Italic.ttf");
+  //   font-weight: typographyVars.$main-font-weight;
+  //   font-style: italic;
+  //   // font-display: swap;
+  // }
 
   @font-face {
     font-family: "Open Sans";
@@ -87,9 +87,16 @@ strong {
 p {
   @include spacing.space-above;
 
-  + p {
+  + p/*,
+  + .tna-ul,
+  + .tna-ol,
+  + .tna-blockquote*/ {
     margin-top: 1rem;
   }
+
+  // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {
+  //   margin-top: 1rem;
+  // }
 }
 
 a {
@@ -223,7 +230,7 @@ small {
       display: inline-block;
 
       &::after {
-        padding-left: 0.25rem;
+        padding-left: 0.5rem;
 
         display: inline-block;
 
@@ -234,7 +241,7 @@ small {
 
       &:hover {
         &::after {
-          padding-left: 0.5rem;
+          padding-left: 0.75rem;
         }
       }
     }
@@ -265,7 +272,7 @@ small {
   line-height: 1.3;
 
   @include media.on-medium {
-    @include typography.relative-font-size(26);
+    @include typography.relative-font-size(30);
   }
 
   @include media.on-mobile {
@@ -388,7 +395,7 @@ small {
   }
 
   &__author {
-    font-style: italic;
+    @include typography.relative-font-size(16);
 
     .tna-blockquote & {
       margin: 1rem 0 0;
@@ -398,6 +405,10 @@ small {
       content: "\2014" " ";
     }
   }
+
+  @include media.on-tiny {
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+  }
 }
 
 .tna-large-paragraph {

package/nationalarchives/variables/_colour.scss

@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #ededed,
+  "background-tint": #e4e4e4,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": brand-colour("black", 0.58),
@@ -123,7 +123,6 @@ $colour-palette-dark: map.merge(
     "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
-    // "accent-background-light": brand-colour("light-grey"),
   )
 ) !default;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

package/nationalarchives/lib/_font-awesome.scss

@@ -1,6 +0,0 @@
-@use "../variables/assets";
-
-$fa-font-path: assets.$fa-font-path;
-@import "font-awesome/fontawesome";
-@import "font-awesome/solid";
-@import "font-awesome/brands";

package/nationalarchives/lib/_index.scss

@@ -1 +0,0 @@
-@use "font-awesome";