Various updates and fixes (#22)

Added tna-aside now has a --tight modifier with less padding Changed 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 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
nationalarchives · Oct 18, 2023 · 0d2291f · 0d2291f
1 parent b89c7d6
commit 0d2291f
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 134 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -5,7 +5,6 @@ on:
     types:
       - opened
       - synchronize
-      - edited
 
 concurrency:
   group: pull-request-${{ github.ref }}

diff --git a/.storybook/preview-head.html b/.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"
+/> -->
diff --git a/.storybook/preview.js b/.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] : [];
diff --git a/CHANGELOG.md b/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

diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json
@@ -8,8 +8,8 @@
   "assets": [
     "/nationalarchives/assets"
   ],
-  "sass": [
-    "/nationalarchives/_prototype-kit.scss"
+  "stylesheets": [
+    "/nationalarchives/all.css"
   ],
   "templates": [
     {

diff --git a/src/nationalarchives/_prototype-kit.scss b/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";

diff --git a/src/nationalarchives/components/button/button.scss b/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");
 

diff --git a/src/nationalarchives/components/footer/footer.scss b/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: "";
-            }
           }
         }
       }

diff --git a/src/nationalarchives/components/footer/footer.stories.js b/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: "#",
         },
         {

diff --git a/src/nationalarchives/components/footer/template.njk b/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>

diff --git a/src/nationalarchives/components/header/header.scss b/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;
+      }
     }
   }
 

diff --git a/src/nationalarchives/components/header/template.njk b/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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ on: @@
         types:
           - opened
           - synchronize
-          - edited
     concurrency:
       group: pull-request-${{ github.ref }}
@@ Expand Down @@