Various updates

nationalarchives · Oct 18, 2023 · aaf3275 · aaf3275
1 parent b89c7d6
commit aaf3275
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 128 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,14 +8,29 @@ 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
+- Fonts now use `font-display` to avoid blocking rendering
+- 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>

diff --git a/src/nationalarchives/components/pagination/pagination.scss b/src/nationalarchives/components/pagination/pagination.scss
@@ -1,19 +1,21 @@
 @use "sass:math";
 @use "../../tools/colour";
+@use "../../tools/media";
 @use "../../tools/spacing";
 @use "../../tools/typography";
 @use "../../utilities";
 
 .tna-pagination {
   display: flex;
   gap: 1rem;
+  justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 
   @include spacing.space-below;
 
-  &--centered {
-    justify-content: center;
+  &--spaced {
+    justify-content: space-between;
   }
 
   &__prev {
@@ -76,4 +78,21 @@
     .tna-background--accent & {
     }
   }
+
+  @include media.on-mobile {
+    flex-direction: column;
+  }
+
+  @include media.on-tiny {
+    &__item {
+      display: none;
+
+      &:first-child,
+      &:last-child,
+      &--current,
+      &--ellipses {
+        display: block;
+      }
+    }
+  }
 }
diff --git a/src/nationalarchives/templates/layouts/_generic.njk b/src/nationalarchives/templates/layouts/_generic.njk
@@ -24,7 +24,7 @@
     {% block head %}{% endblock %}
 
     {% block stylesheets %}
-      <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend/all.css') }}">
+      <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend') }}/all.css">
     {% endblock %}
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
@@ -60,15 +60,13 @@
     {% endblock %}
 
     {% block bodyEnd %}
-      {#
-      <script src="{{ tnaFrontendJsPath | default('/static/tna-frontend/all.js') }}"></script>
+      <script src="{{ tnaFrontendJsPath | default('/static/tna-frontend') }}/all.js"></script>
       <script>
-        window.TNAFrontend.initAll();
-      </script>
-      #}
-      <script type="module">
-        import { initAll } from "{{ tnaFrontendJsPath | default('/static/tna-frontend/all.js') }}";
-        initAll();
+        if (window.TNAFrontend && window.TNAFrontend.initAll) {
+          document.addEventListener("DOMContentLoaded", function() {
+            window.TNAFrontend.initAll();
+          });
+        }
       </script>
     {% endblock %}
   </body>

diff --git a/src/nationalarchives/templates/layouts/_prototype-kit.njk b/src/nationalarchives/templates/layouts/_prototype-kit.njk
@@ -1,15 +1,16 @@
 {% extends "./_generic.njk" %}
 
 {% block stylesheets %}
-  <link href="/public/stylesheets/unbranded.css" media="all" rel="stylesheet" type="text/css" />
-  <link href="/plugin-assets/@nationalarchives/frontend/nationalarchives/all.css" media="all" rel="stylesheet" type="text/css" />
-
-  {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
 {% endblock %}
 
 {% block bodyEnd %}
   {% include "govuk-prototype-kit/includes/scripts.njk" %}
   <script>
-    window.TNAFrontend.initAll()
+    if (window.TNAFrontend && window.TNAFrontend.initAll) {
+      document.addEventListener("DOMContentLoaded", function() {
+        window.TNAFrontend.initAll();
+      });
+    }
   </script>
 {% endblock %}
diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss
@@ -68,11 +68,9 @@
     }
   }
 
-  @include colour.accent-css-vars("black"); // TODO: Temp
-
-  // &--black-accent {
-  //   @include colour.accent-css-vars("black");
-  // }
+  &--black-accent {
+    @include colour.accent-css-vars("black");
+  }
 
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
@@ -166,6 +164,10 @@ hr {
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
   }
+
+  &--tight {
+    padding: 1rem;
+  }
 }
 
 .tna-background {