From beb030d8a485cdc067a2e84bd7eca1bca5066107 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Fri, 22 Mar 2024 15:53:54 +0000
Subject: [PATCH] Update global header package (#109)

---
 CHANGELOG.md                                  |   1 +
 .../components/footer/footer.stories.js       |   2 +-
 .../global-header-package.scss                | 116 +++++++++++-------
 .../colour-schemes/colour-themes.stories.js   |   2 +-
 src/nationalarchives/utilities/_a11y.scss     |   3 +-
 .../generate-global-header-assets.js          |   2 +-
 6 files changed, 80 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4386d229..45fc3f92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Removed explicit font size on `tna-template` allowing browser-defined font sizes
+- Removed focus from elements with a `tabindex` of `-1`
 
 ### Security
 
diff --git a/src/nationalarchives/components/footer/footer.stories.js b/src/nationalarchives/components/footer/footer.stories.js
index 2bb989b4..01da1b87 100644
--- a/src/nationalarchives/components/footer/footer.stories.js
+++ b/src/nationalarchives/components/footer/footer.stories.js
@@ -110,7 +110,7 @@ Standard.args = {
           href: "https://www.nationalarchives.gov.uk/about/press-room/",
         },
         {
-          text: "Jobs and careers",
+          text: "Jobs",
           href: "https://www.nationalarchives.gov.uk/about/jobs/",
         },
         {
diff --git a/src/nationalarchives/global-header-package.scss b/src/nationalarchives/global-header-package.scss
index f90c352b..7af29f87 100644
--- a/src/nationalarchives/global-header-package.scss
+++ b/src/nationalarchives/global-header-package.scss
@@ -1,8 +1,11 @@
+/* stylelint-disable */
+
+@use "sass:math";
 // @use "variables/assets";
 @use "variables/grid" as gridVars with (
   $largest-container-width: 1300px,
-  $gutter-width: 30px,
-  $gutter-width-tiny: 15px
+  $gutter-width: math.div(30, 16),
+  $gutter-width-tiny: math.div(15, 16)
 );
 @use "variables/typography" as typographyVars;
 
@@ -163,46 +166,6 @@ hr {
   }
 }
 
-.tna-global-header,
-.tna-footer {
-  // * {
-  //   color: inherit;
-  // }
-
-  a:not(.tna-button) {
-    text-decoration: none;
-    text-decoration-thickness: 1.5px;
-
-    &,
-    &:link {
-      @include colour.colour-font("link");
-    }
-
-    &:visited {
-      @include colour.colour-font("link-visited");
-    }
-
-    &:hover,
-    &:active {
-      @include typography.interacted-text-decoration;
-
-      background: none;
-
-      outline: none;
-    }
-
-    &:focus {
-      background: none;
-    }
-
-    &.tna-link--no-visited-state {
-      &:visited {
-        @include colour.colour-font("link");
-      }
-    }
-  }
-}
-
 .tna-global-header {
   padding-bottom: 0;
 
@@ -233,10 +196,20 @@ hr {
     &-item {
       margin-left: 0;
     }
+
+    &-link {
+      @include colour.colour-font("font-light", true);
+
+      &:hover {
+        @include colour.colour-font("font-base", true);
+      }
+    }
   }
 }
 
 .tna-footer {
+  --button-accent-background: #fff;
+
   &__title {
     margin-top: 0;
   }
@@ -245,9 +218,68 @@ hr {
     margin-bottom: 0;
   }
 
+  .tna-heading-m {
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
   &__social-item,
   &__navigation-block-item,
   &__legal-item {
     margin-left: 0;
   }
+
+  &__licence p {
+    margin-bottom: 0;
+  }
+
+  &__legal-item-link,
+  &__licence p a {
+    text-decoration: underline !important;
+
+    &:hover,
+    &:active {
+      text-decoration-thickness: 3.5px !important;
+    }
+  }
+}
+
+.tna-global-header,
+.tna-footer {
+  * {
+    color: inherit;
+  }
+
+  a:not(.tna-button) {
+    text-decoration: none;
+    text-decoration-thickness: 1.5px;
+
+    &,
+    &:link {
+      @include colour.colour-font("link");
+    }
+
+    &:visited {
+      @include colour.colour-font("link-visited");
+    }
+
+    &:hover,
+    &:active {
+      @include typography.interacted-text-decoration;
+
+      background: none;
+
+      outline: none;
+    }
+
+    &:focus {
+      background: none;
+    }
+
+    &.tna-link--no-visited-state {
+      &:visited {
+        @include colour.colour-font("link");
+      }
+    }
+  }
 }
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js
index 692c56ea..017a7fb7 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js
@@ -1282,7 +1282,7 @@ const Template = ({ theme, accent }) => {
                 href: "https://www.nationalarchives.gov.uk/about/press-room/",
               },
               {
-                text: "Jobs and careers",
+                text: "Jobs",
                 href: "https://www.nationalarchives.gov.uk/about/jobs/",
               },
               {
diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss
index 68ddb5bd..249e638d 100644
--- a/src/nationalarchives/utilities/_a11y.scss
+++ b/src/nationalarchives/utilities/_a11y.scss
@@ -36,7 +36,8 @@
   @include a11y.active-outline;
 }
 
-.tna-\!--no-focus-style {
+.tna-\!--no-focus-style,
+*[tabindex="-1"]:focus {
   &:focus {
     outline: none;
   }
diff --git a/tasks/global-header/generate-global-header-assets.js b/tasks/global-header/generate-global-header-assets.js
index df896bf8..780f99fd 100644
--- a/tasks/global-header/generate-global-header-assets.js
+++ b/tasks/global-header/generate-global-header-assets.js
@@ -133,7 +133,7 @@ const footerHTML = nunjucks
               href: "https://www.nationalarchives.gov.uk/about/press-room/",
             },
             {
-              text: "Jobs and careers",
+              text: "Jobs",
               href: "https://www.nationalarchives.gov.uk/about/jobs/",
             },
             {