Merge branch 'main' of github.com:nationalarchives/tna-frontend into …

…feature/analytics

.github/actions/prototype-kit-test/action.yml

@@ -47,6 +47,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/global-header/macro.njk\" import tnaGlobalHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/grid/macro.njk\" import tnaGrid %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/header/macro.njk\" import tnaHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/hero/macro.njk\" import tnaHero %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -79,6 +80,7 @@ runs:
         echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaGlobalHeader({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGrid({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaHeader({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaHero({}) }}" >> prototype/app/views/index.html &&

.github/workflows/npm-publish.yml

@@ -110,7 +110,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build package
-        run: ./tasks/build-cookie-banner-package.sh
+        run: ./tasks/cookie-banner/build-cookie-banner-package.sh
       - name: Check npm credentials
         run: npm whoami
       - name: Publish to npm
@@ -124,12 +124,47 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+  publish-npm-global-header:
+    runs-on: ubuntu-latest
+    needs:
+      - check
+      - lint
+      - tests
+      - prototype-kit
+      - publish-npm
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          registry-url: https://registry.npmjs.org/
+          scope: '@nationalarchives'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build package
+        run: ./tasks/global-header/build-global-header-package.sh
+      - name: Check npm credentials
+        run: npm whoami
+      - name: Publish to npm
+        run: cd package-global-header && npm publish
+      - name: Rename package directory
+        run: mv package "tna-frontend-global-header-${{ needs.check.outputs.version }}"
+      - name: Compress package
+        run: zip -r "tna-frontend-global-header-${{ needs.check.outputs.version }}.zip" "tna-frontend-global-header-${{ needs.check.outputs.version }}"
+      - name: Upload the package to the GitHub release
+        run: gh release upload "v${{ needs.check.outputs.version }}" "tna-frontend-global-header-${{ needs.check.outputs.version }}.zip"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   notify-slack:
     runs-on: ubuntu-latest
     needs:
       - check
       - publish-npm
       - publish-npm-cookie-banner
+      - publish-npm-global-header
     steps:
       - uses: actions/checkout@v4
       - name: Get release notes

.gitignore

@@ -4,6 +4,7 @@ __snapshots__
 node_modules
 package
 package-cookie-banner
+package-global-header
 storybook
 *.zip
 *.tgz

CHANGELOG.md

@@ -8,15 +8,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.36...HEAD)
 
 ### Added
+
+- New global header component
+
 ### Changed
 
 - Changed the aspect ratio of the hero image to be 5:2
+- Selected state of header component changed
+- Phase banner font size reduced
+- Header component spacing and sizing tweaked to more closely align to the global header
+- Header and footer SVG logos changed to use `currentColor` as the foreground colour with a transparent background
+- Removed "link" icons from external links in the footer
 
 ### Deprecated
 ### Removed
 ### Fixed
 
 - Allowed taller images in picture elements on tiny devices
+- Fixed focus styles for always-light components (e.g. text inputs) on high contrast themes
+- Added link to the National Archives mailing list in footer
+- Added `<title>` to inline SVGs in header and footers
+- Added `aria-hidden="true"` to all Font Awesome icons
 
 ### Security
 

LICENCE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (C) 2022 The National Archives
+Copyright (C) 2024 The National Archives
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

src/nationalarchives/all.mjs

@@ -1,6 +1,7 @@
 import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.mjs";
 import { CookieBanner } from "./components/cookie-banner/cookie-banner.mjs";
 import { Gallery } from "./components/gallery/gallery.mjs";
+import { GlobalHeader } from "./components/global-header/global-header.mjs";
 import { Header } from "./components/header/header.mjs";
 import { Picture } from "./components/picture/picture.mjs";
 import { SensitiveImage } from "./components/sensitive-image/sensitive-image.mjs";
@@ -54,6 +55,13 @@ const initAll = (options) => {
     new Gallery($gallery).init();
   });
 
+  const $globalHeader = $scope.querySelector(
+    '[data-module="tna-global-header"]',
+  );
+  if ($globalHeader) {
+    new GlobalHeader($globalHeader).init();
+  }
+
   const $header = $scope.querySelector('[data-module="tna-header"]');
   if ($header) {
     new Header($header).init();
@@ -88,6 +96,7 @@ export {
   Breadcrumbs,
   CookieBanner,
   Gallery,
+  GlobalHeader,
   Header,
   Picture,
   SensitiveImage,

src/nationalarchives/components/_index.scss

@@ -10,6 +10,7 @@
 @use "filters";
 @use "footer";
 @use "gallery";
+@use "global-header";
 @use "grid";
 @use "header";
 @use "hero";

src/nationalarchives/components/card/fixtures.json

@@ -75,7 +75,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</div></li></ul><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {

src/nationalarchives/components/card/template.njk

@@ -64,7 +64,7 @@
         <li class="tna-chip-list__item">
           <div class="tna-chip tna-chip--plain">
             {%- if item.icon %}
-            <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
+            <i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i>
             {%- endif %}
             {{ item.text }}
           </div>
@@ -83,9 +83,9 @@
     {%- for item in params.actions %}
       <a href="{{ item.href }}" class="tna-card__action{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
         {%- if item.brandIcon %}
-        <i class="fa-brands fa-{{ item.brandIcon }}"></i>
+        <i class="fa-brands fa-{{ item.brandIcon }}" aria-hidden="true"></i>
         {%- elseif item.icon %}
-        <i class="fa-solid fa-{{ item.icon }}"></i>
+        <i class="fa-solid fa-{{ item.icon }}" aria-hidden="true"></i>
         {%- endif %}
         {{ item.text }}
       </a>

src/nationalarchives/components/filters/filters.scss

@@ -12,15 +12,6 @@
   &__item {
   }
 
-  &__item--selected #{&}__link {
-    &,
-    &:link,
-    &:visited,
-    &:hover {
-      @include colour.accent;
-    }
-  }
-
   &__link {
     padding: 0.125rem 0.75rem;
 
@@ -40,4 +31,13 @@
       @include colour.accent-light;
     }
   }
+
+  &__item--selected &__link {
+    &,
+    &:link,
+    &:visited,
+    &:hover {
+      @include colour.accent;
+    }
+  }
 }