Various updates and fixes

.github/workflows/pull-request.yml

@@ -5,7 +5,6 @@ on:
     types:
       - opened
       - synchronize
-      - edited
 
 concurrency:
   group: pull-request-${{ github.ref }}

.storybook/preview-head.html

@@ -28,3 +28,38 @@
     document.addEventListener("DOMContentLoaded", removeAllClasses, false);
   }
 </script>
+<!-- <link
+  rel="preload"
+  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf"
+  as="font"
+  type="font/ttf"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Bold.ttf"
+  as="font"
+  type="font/ttf"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="/static/media/src/nationalarchives/assets/fonts/RobotoMono-Regular.ttf"
+  as="font"
+  type="font/ttf"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="/static/media/src/nationalarchives/assets/fonts/fa-solid-900.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<link
+  rel="preload"
+  href="/static/media/src/nationalarchives/assets/fonts/fa-brands-400.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/> -->

.storybook/preview.js

@@ -1,12 +1,9 @@
 import "../src/nationalarchives/all.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
-// import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+// import isChromatic from "chromatic/isChromatic";
 
-document.documentElement.classList.add(
-  "tna-template",
-  // "tna-template--system-theme",
-);
+document.documentElement.classList.add("tna-template");
 if (window.self !== window.top) {
   document.documentElement.classList.add("tna-template--padded");
 }
@@ -21,7 +18,6 @@ export const parameters = {
   a11y: {
     config: a11yConfig,
   },
-  // backgrounds: { disable: true },
   backgrounds: {
     values: [],
     grid: {
@@ -33,3 +29,13 @@ export const parameters = {
     expanded: true,
   },
 };
+
+// const fontLoader = async () => ({
+//   fonts: await Promise.all([
+//     document.fonts.load("normal 1em Open Sans"),
+//     document.fonts.load("bold 1em Open Sans"),
+//     document.fonts.load("normal 1em Roboto Mono"),
+//   ]),
+// });
+
+// export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];

CHANGELOG.md

@@ -8,14 +8,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.21-prerelease...HEAD)
 
 ### Added
+
+- `tna-aside` now has a `--tight` modifier with less padding
+
 ### Changed
 
 - Breadcrumbs are no longer contained within a container/column layout
 - Header styles have been simplified
+- External link icons changed from CSS to icon font in header and footer
+- External links in footer have titles suffixed with "opens in new tab"
+- Links in footer and text in buttons have balanced wrapping applied
 
 ### Deprecated
 ### Removed
+
+- The black accent is no longer applied by default
+
 ### Fixed
+
+- Font paths fixed for prototype kit, stylesheets and JavaScript loading
+- Better alignment of site name next to logo in header
+- Fixed right/left padding of logo and hamburger on small devices
+
 ### Security
 
 ## [0.1.21-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.20-prerelease...v0.1.21-prerelease) - 2023-10-12

govuk-prototype-kit.config.json

@@ -8,8 +8,8 @@
   "assets": [
     "/nationalarchives/assets"
   ],
-  "sass": [
-    "/nationalarchives/_prototype-kit.scss"
+  "stylesheets": [
+    "/nationalarchives/all.css"
   ],
   "templates": [
     {

src/nationalarchives/_prototype-kit.scss

@@ -1,8 +1,8 @@
 @use "variables/assets" with (
   $tna-font-path:
-    "/plugin-assets/@nationalarchives/frontend/nationalarchives/assets/fonts",
+    "/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/fonts",
   $fa-font-path:
-    "/plugin-assets/@nationalarchives/frontend/nationalarchives/assets/fonts"
+    "/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/fonts"
 );
 
 @use "all";

src/nationalarchives/components/button/button.scss

@@ -15,6 +15,7 @@
   text-decoration: none;
   text-align: center;
   line-height: #{math.div(16, 18) * 2};
+  text-wrap: balance;
 
   @include colour.colour-background("button-background");
 

src/nationalarchives/components/footer/footer.scss

@@ -114,59 +114,17 @@
         @include colour.colour-border("keyline", 1px, solid, bottom);
 
         &-link {
+          display: inline-block;
+
           text-decoration: none;
+          text-wrap: balance;
 
           &:hover {
             @include typography.interacted-text-decoration;
           }
 
-          &-icon {
-            width: 0.825rem;
-            height: 0.825rem;
-            margin-right: 0.125rem;
+          .fa-solid {
             margin-left: 0.75rem;
-
-            display: inline-block;
-
-            position: relative;
-
-            vertical-align: middle;
-
-            font-size: 0;
-
-            border: 1px var(--link) solid;
-
-            &::before {
-              position: absolute;
-              top: -0.25rem;
-              right: -0.25rem;
-              z-index: 2;
-
-              border: 0.25rem transparent solid;
-              border-top-color: var(--link);
-              border-right-color: var(--link);
-
-              content: "";
-            }
-
-            &::after {
-              width: 4px;
-              height: 13px;
-
-              position: absolute;
-              top: -0.125rem;
-              right: -0.125rem;
-              z-index: 1;
-
-              background-color: var(--link);
-
-              @include colour.colour-outline("contrast-background", 3px, solid);
-
-              transform: rotate(45deg) translateX(50%);
-              transform-origin: 100% 0;
-
-              content: "";
-            }
           }
         }
       }

src/nationalarchives/components/footer/footer.stories.js

@@ -103,7 +103,7 @@ Standard.args = {
           href: "#",
         },
         {
-          text: "Our research amd academic collaboration",
+          text: "Our research and academic collaboration",
           href: "#",
         },
         {

src/nationalarchives/components/footer/template.njk

@@ -56,11 +56,10 @@
         <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
         {%- for item in group.items -%}
           <li class="tna-footer__navigation-block-item">
-            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.newTab %} target="_blank"{% endif %}>
+            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank"{% endif %}>
               {{ item.text }}
               {%- if item.newTab -%}
-              <!--<i class="fa-solid fa-arrow-up-right-from-square"></i>
-              --><span class="tna-footer__navigation-block-item-link-icon">(opens in new tab)</span>
+              <i class="fa-solid fa-arrow-up-right-from-square"></i>
               {%- endif -%}
             </a>
           </li>

src/nationalarchives/components/header/header.scss

@@ -81,52 +81,9 @@
     &:hover {
       text-decoration: underline;
     }
-  }
-
-  &__exit-link-icon {
-    width: 0.825rem;
-    height: 0.825rem;
-    margin-right: 0.125rem;
-    margin-left: 0.5rem;
-
-    display: inline-block;
-
-    position: relative;
-
-    vertical-align: middle;
-
-    border: 0.125rem #fff solid;
-
-    &::before {
-      position: absolute;
-      top: -0.25rem;
-      right: -0.25rem;
-      z-index: 2;
 
-      border: 0.25rem transparent solid;
-      border-top-color: #fff;
-      border-right-color: #fff;
-
-      content: "";
-    }
-
-    &::after {
-      width: 0.25rem;
-      height: 0.825rem;
-
-      position: absolute;
-      top: -0.125rem;
-      right: -0.125rem;
-      z-index: 1;
-
-      background-color: #fff;
-
-      outline: 0.2rem colourVars.$dark-grey solid;
-
-      transform: rotate(45deg) translateX(50%);
-      transform-origin: 100% 0;
-
-      content: "";
+    .fa-solid {
+      margin-left: 0.5rem;
     }
   }
 
@@ -182,7 +139,7 @@
 
     display: inline-block;
 
-    line-height: 2.125;
+    line-height: 2rem;
     text-transform: uppercase;
   }
 
@@ -401,12 +358,12 @@
     }
 
     &__logo-strapline {
-      line-height: 1.55;
+      line-height: 1.5;
     }
 
     &__navigation-toggle {
       &.tna-column {
-        padding-right: gridVars.$gutter-width-tiny;
+        // padding-right: gridVars.$gutter-width-tiny;
         padding-left: 0;
       }
     }
@@ -507,6 +464,21 @@
     }
   }
 
+  @include media.on-small {
+    &__logo {
+      &.tna-column {
+        padding-right: gridVars.$gutter-width;
+        padding-left: gridVars.$gutter-width;
+      }
+    }
+
+    &__navigation-toggle {
+      &.tna-column {
+        padding-right: gridVars.$gutter-width;
+      }
+    }
+  }
+
   @include media.on-tiny {
     &__logo {
       &.tna-column {
@@ -521,7 +493,13 @@
     }
 
     &__logo-strapline {
-      line-height: 1.25;
+      line-height: 1;
+    }
+
+    &__navigation-toggle {
+      &.tna-column {
+        padding-right: gridVars.$gutter-width-tiny;
+      }
     }
   }
 

src/nationalarchives/components/header/template.njk

@@ -10,7 +10,7 @@
         <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target -%} target="{{ params.exit.target }}"{%- endif -%}>
           {{ params.exit.text }}
           {%- if params.exit.target == "_blank" -%}
-          <span class="tna-header__exit-link-icon"></span>
+          <i class="fa-solid fa-arrow-up-right-from-square"></i>
           {%- endif -%}
         </a>
       </div>