@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/components/footer/footer.scss

@@ -2,7 +2,6 @@
 @use "../../tools/typography";
 @use "../../tools/media";
 @use "../../utilities";
-@use "../../lib/font-awesome";
 @use "../button";
 @use "../grid";
 
@@ -12,17 +11,12 @@
   padding-top: 1rem;
   padding-bottom: 3rem;
 
-  // @include colour.colour-font("font-base");
-
-  // --link: colour.brand-colour("white");
-
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline", 1px, solid, top);
   }
 
   .tna-logo {
     margin-top: 2rem;
-    margin-bottom: 1rem;
 
     &__background {
       fill: transparent;
@@ -34,8 +28,9 @@
   }
 
   &__title {
-    margin-top: 0;
+    margin-top: 1rem;
     margin-bottom: 0;
+    padding-top: 0;
   }
 
   &__address {
@@ -110,6 +105,7 @@
       }
 
       &-items {
+        margin-top: 0;
       }
 
       &-item {
@@ -119,60 +115,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;
-            margin-left: 0.5rem;
-
-            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);
-
-              outline: 3px transparent solid;
-              @include colour.colour-outline("contrast-background");
-
-              transform: rotate(45deg) translateX(50%);
-              transform-origin: 100% 0;
-
-              content: "";
-            }
+          .fa-solid {
+            margin-left: 0.75rem;
           }
         }
       }

package/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: "#",
         },
         {

package/nationalarchives/components/footer/template.njk

@@ -9,7 +9,7 @@
           <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z"/>
         </g>
       </svg>
-      <h2 class="tna-heading tna-heading--l tna-footer__title">The National Archives</h2>
+      <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
       <address class="tna-footer__address">
         Kew, Richmond<br />
         TW9 4DU
@@ -20,7 +20,7 @@
       </div>
       {%- endif -%}
       {%- if params.social -%}
-        <nav class="tna-footer__social" aria-label="Social links">
+        <nav class="tna-footer__social" role="navigation" aria-label="Social links">
           <ul class="tna-ul tna-ul--plain tna-footer__social-items">
           {%- for item in params.social -%}
             <li class="tna-footer__social-item">
@@ -49,18 +49,18 @@
     {%- if params.navigation -%}
     <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
       {%- for group in params.navigation -%}
-      <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
-        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+      <nav class="tna-footer__navigation-block tna-columns__block" role="navigation" aria-label="{{ group.title }}">
+        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
           {{ group.title }}
         </h3>
         <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 %}
-              <span class="tna-footer__navigation-block-item-link-icon">(opens in new tab)</span>
-              {% endif -%}
+              {%- if item.newTab -%}
+              <i class="fa-solid fa-arrow-up-right-from-square"></i>
+              {%- endif -%}
             </a>
           </li>
         {%- endfor -%}
@@ -72,23 +72,25 @@
     {%- if params.showNewsletter -%}
     <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
       <div class="tna-footer__mailing-list">
-        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
           Join the National Archives' mailing list
         </h3>
         <p>
           Subscribe for regular news, updates and priority booking for events.
         </p>
-        <a href="#" class="tna-button tna-button--accent" role="button">
-          <i class="fa-solid fa-envelope"></i>
-          Subscribe
-        </a>
+        <div class="tna-button-group">
+          <a href="#" class="tna-button tna-button--accent" role="button">
+            <i class="fa-solid fa-envelope"></i>
+            Subscribe
+          </a>
+        </div>
       </div>
     </div>
     {%- endif -%}
   </div>
   <div class="tna-container">
     {%- if params.legal -%}
-    <nav class="tna-footer__legal tna-column tna-column--full" aria-label="General site links">
+    <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="General site links">
       <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
         {%- for item in params.legal -%}
         <li class="tna-footer__legal-item">