Update global header package (#109)

nationalarchives · Mar 22, 2024 · beb030d · beb030d
1 parent 4e8127a
commit beb030d
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/",
             },
             {