@nationalarchives/frontend 0.1.36 → 0.1.37

package/nationalarchives/components/header/header.scss

@@ -7,60 +7,29 @@
 @use "../../utilities";
 @use "../grid";
 
-// TODO: Only for the header component at the moment - remove on redesign
-@mixin uninvert {
-  @include colour.colour-css-vars;
-
-  .tna-template--system-theme & {
-    @include colour.colour-css-vars;
-
-    @media (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-dark;
-    }
-
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-    }
-
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
-  }
-
-  .tna-template--light-theme & {
-    @include colour.colour-css-vars;
-  }
-
-  .tna-template--dark-theme & {
-    @include colour.colour-css-vars-dark;
-  }
-
-  .tna-template--high-contrast-theme & {
-    @include colour.colour-css-vars-high-contrast;
-  }
-
-  .tna-template--high-contrast-theme.tna-template--dark-theme & {
-    @include colour.colour-css-vars-high-contrast-dark;
-  }
-}
-
 .tna-header {
   @include colour.contrast;
 
   position: relative;
 
-  &::after {
-    position: absolute;
-    inset: auto 0 0;
-    z-index: 1;
+  background-color: colour.brand-colour("black");
 
-    border-bottom: 1px transparent solid;
-
-    content: "";
+  .tna-template--light-theme & {
+    background: linear-gradient(
+      0deg,
+      rgb(34 34 34 / 100%) 0%,
+      rgb(0 0 0 / 100%) 100%
+    );
   }
 
-  &:not(&--accent) {
-    background-color: colour.brand-colour("black");
+  .tna-template--system-theme {
+    @media (prefers-color-scheme: light) {
+      background: linear-gradient(
+        0deg,
+        rgb(34 34 34 / 100%) 0%,
+        rgb(0 0 0 / 100%) 100%
+      );
+    }
   }
 
   &__exit {
@@ -115,10 +84,10 @@
       color: inherit;
     }
 
-    &:hover {
+    &:hover:not(:focus) {
       text-decoration: none;
 
-      @include colour.colour-outline("font-dark", 0.375rem, solid);
+      @include colour.colour-outline("font-dark", 0.3125rem, solid);
       outline-offset: 1px;
     }
   }
@@ -128,14 +97,14 @@
     height: 6rem;
 
     display: inline-block;
-  }
 
-  .tna-logo__foreground {
-    @include colour.colour-fill("font-dark");
-  }
+    // &__foreground {
+    //   @include colour.colour-fill("font-dark");
+    // }
 
-  .tna-logo__background {
-    fill: none;
+    // &__background {
+    //   fill: none;
+    // }
   }
 
   &__logo-strapline {
@@ -144,10 +113,14 @@
     display: inline-block;
 
     line-height: 2rem;
+    @include typography.heading-font;
+    @include typography.relative-font-size(20);
     text-transform: uppercase;
   }
 
   &__navigation-toggle {
+    display: none;
+
     align-self: center;
   }
 
@@ -213,14 +186,6 @@
       .tna-header__hamburger {
         height: 0;
 
-        &::before,
-        &::after {
-          // transition:
-          //   top 100ms,
-          //   bottom 100ms,
-          //   transform 100ms 100ms;
-        }
-
         &::before {
           top: 0.625rem;
 
@@ -312,26 +277,38 @@
 
     display: inline-block;
 
-    @include typography.heading-font;
+    position: relative;
+
     text-decoration: none;
     line-height: 2;
 
+    &::after {
+      height: 0;
+
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      @include colour.colour-background("font-dark");
+
+      content: "";
+    }
+
     &,
     &:link,
     &:visited {
       color: inherit;
     }
 
-    &:hover,
     &--selected {
-      text-decoration: none;
+      @include typography.main-font-weight-bold;
 
       &,
-      &:link,
-      &:visited {
-        @include uninvert;
-        @include colour.colour-font("font-dark");
-        @include colour.colour-background("page-background");
+      &:hover {
+        &::after {
+          height: 0.375rem;
+        }
       }
     }
   }
@@ -340,50 +317,39 @@
     @include colour.accent;
   }
 
-  @include media.on-larger-than-mobile {
-    .tna-header__navigation-toggle {
-      display: none;
+  @include media.on-medium {
+    .tna-logo {
+      width: 5rem;
+      height: 5rem;
     }
 
-    &__navigation-item-link {
-      border: 1px transparent solid;
-      border-bottom: none;
+    &__logo-strapline {
+      line-height: 1.625rem;
     }
   }
 
   @include media.on-mobile {
-    &__contents {
-      &.tna-container {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
-
     &__logo {
       padding-top: 1rem;
       padding-bottom: 1rem;
     }
 
-    .tna-logo {
-      width: 4.5rem;
-      height: 4.5rem;
-    }
-
-    &__logo-strapline {
-      line-height: 1.5;
+    &__contents {
+      &.tna-container {
+        padding-right: 0;
+        padding-left: 0;
+      }
     }
 
     &__navigation-toggle {
+      display: block;
+
       &.tna-column {
         padding-left: 0;
       }
     }
 
     &__navigation {
-      @include uninvert;
-      @include colour.colour-font("font-base");
-      @include typography.relative-font-size(20);
-
       align-items: stretch;
       flex-direction: column;
 
@@ -406,7 +372,7 @@
 
       justify-content: flex-start;
 
-      @include colour.colour-background("page-background");
+      // @include colour.colour-background("page-background");
 
       @include colour.colour-border("keyline", 1px, solid, bottom);
     }
@@ -417,6 +383,15 @@
     }
 
     &__top-navigation-item-link {
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("font-light");
+      }
+
+      &:hover {
+        @include colour.colour-font("font-dark");
+      }
     }
 
     &__navigation-items {
@@ -425,7 +400,10 @@
       flex-direction: column;
       gap: 0;
 
-      @include colour.colour-background("page-background");
+      background-color: rgb(255 255 255 / 10%);
+
+      @include colour.colour-border("keyline-dark", 3px, solid, top);
+      @include colour.colour-border("keyline-dark", 3px, solid, bottom);
     }
 
     &__navigation-item {
@@ -433,68 +411,73 @@
 
       display: block;
 
-      @include colour.colour-border("keyline", 1px, solid, bottom);
+      @include colour.colour-border("keyline", 1px, solid, top);
+
+      &:first-child {
+        border-top: none;
+      }
     }
 
     &__navigation-item-link {
-      padding-right: gridVars.$gutter-width-tiny;
-      padding-left: gridVars.$gutter-width-tiny + 0.5rem;
-
       display: block;
 
-      position: relative;
-
-      line-height: #{math.div(1, 1.125) * 2};
+      line-height: 1.75rem;
 
       &::after {
+        height: auto;
         width: 0;
 
-        position: absolute;
         top: 0;
-        bottom: 0;
-        left: 0;
-
-        @include colour.colour-background("font-dark");
-
-        content: "";
-      }
-
-      &:hover {
-        &::after {
-          width: 0.25rem;
-        }
+        right: auto;
       }
 
       &--selected {
-        &::after,
-        &:hover::after {
-          width: 0.5rem;
+        &,
+        &:hover {
+          &::after {
+            height: auto;
+            width: 0.5rem;
+          }
         }
       }
     }
   }
 
   @include media.on-small {
-    &__logo {
-      &.tna-column {
-        padding-right: gridVars.$gutter-width;
-        padding-left: gridVars.$gutter-width;
-      }
+    .tna-logo {
+      width: 4rem;
+      height: 4rem;
     }
 
-    &__navigation-toggle {
-      &.tna-column {
-        padding-right: gridVars.$gutter-width;
-      }
+    &__logo-strapline {
+      line-height: 1.25rem;
+    }
+
+    &__logo.tna-column,
+    &__navigation-item-link,
+    &__navigation-toggle.tna-column {
+      padding-right: gridVars.$gutter-width;
+    }
+
+    &__logo.tna-column,
+    &__navigation-item-link {
+      padding-left: gridVars.$gutter-width;
+    }
+
+    &__top-navigation-items {
+      padding-right: gridVars.$gutter-width - 0.5rem;
+      padding-left: gridVars.$gutter-width - 0.5rem;
     }
   }
 
   @include media.on-tiny {
-    &__logo {
-      &.tna-column {
-        padding-right: gridVars.$gutter-width-tiny;
-        padding-left: gridVars.$gutter-width-tiny;
-      }
+    &__navigation-toggle.tna-column,
+    &__logo.tna-column {
+      padding-right: gridVars.$gutter-width-tiny;
+    }
+
+    &__logo.tna-column {
+      padding-left: gridVars.$gutter-width-tiny;
     }
 
     .tna-logo {
@@ -506,10 +489,13 @@
       line-height: 1;
     }
 
-    &__navigation-toggle {
-      &.tna-column {
-        padding-right: gridVars.$gutter-width-tiny;
-      }
+    &__top-navigation-items {
+      gap: 0.5rem;
+    }
+
+    &__navigation-item-link {
+      padding-right: gridVars.$gutter-width-tiny;
+      padding-left: gridVars.$gutter-width-tiny + 0.5rem;
     }
   }
 

package/nationalarchives/components/header/header.stories.js

@@ -53,7 +53,7 @@ const Template = ({
 export const Standard = Template.bind({});
 Standard.args = {
   logo: {
-    strapline: "Beta",
+    strapline: "Design System",
     href: "#/",
   },
   topNavigation: [
@@ -94,35 +94,7 @@ Standard.args = {
   },
   classes: "tna-header--demo",
 };
-
-export const Desktop = Template.bind({});
-Desktop.parameters = {
-  viewport: {
-    defaultViewport: "medium",
-  },
-  chromatic: {
-    viewports: [customViewports["medium"].styles.width.replace(/px$/, "")],
-  },
-};
-Desktop.args = {
-  navigation: [
-    {
-      text: "Alpha",
-      href: "#/alpha",
-      selected: true,
-    },
-    {
-      text: "Beta",
-      href: "#/beta",
-    },
-    {
-      text: "Gamma",
-      href: "#/gamma",
-    },
-  ],
-  classes: "tna-header--demo",
-};
-Desktop.play = async ({ canvasElement }) => {
+Standard.play = async ({ canvasElement }) => {
   await new Promise((r) => setTimeout(r, 100));
 
   const $navigationItems = canvasElement.querySelector(
@@ -146,6 +118,26 @@ Mobile.parameters = {
   },
 };
 Mobile.args = {
+  logo: {
+    strapline: "Design System",
+    href: "#/",
+  },
+  topNavigation: [
+    {
+      text: "Top item 1",
+      href: "#/top-1",
+    },
+    {
+      text: "Top item 2",
+      href: "#/top-2",
+      icon: "phone",
+    },
+    {
+      text: "Top item 3",
+      href: "#/top-3",
+      brandIcon: "github",
+    },
+  ],
   navigation: [
     {
       text: "Alpha",
@@ -161,6 +153,11 @@ Mobile.args = {
       href: "#/gamma",
     },
   ],
+  exit: {
+    text: "Go to the current National Archives website",
+    href: "#",
+    target: "_blank",
+  },
   classes: "tna-header--demo",
 };
 Mobile.play = async ({ args, canvasElement, step }) => {

package/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" -%}
-          <i class="fa-solid fa-arrow-up-right-from-square"></i>
+          <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
           {%- endif -%}
         </a>
       </div>
@@ -21,8 +21,9 @@
     <div class="tna-column tna-header__logo">
       <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-link tna-header__logo-link--href" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="96" height="96">
-          <path fill="#fff" d="M0 0h160v160H0z" class="tna-logo__background"/>
-          <g class="tna-logo__foreground" fill="#000">
+          <title>The National Archives</title>
+          <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background"/>
+          <g class="tna-logo__foreground" fill="currentColor">
             <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z"/>
             <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>
@@ -32,37 +33,39 @@
         {%- endif -%}
       </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
-    {%- if params.navigation or params.topNavigation -%}
-    <div class="tna-column tna-column--flex-1- tna-header__navigation-toggle"><!-- POPULATED BY JAVASCRIPT IF ENABLED --></div>
+    {%- if params.navigation or params.topNavigation %}
+    <div class="tna-column tna-header__navigation-toggle">
+      <!-- BUTTON ADDED BY JAVASCRIPT -->
+    </div>
     <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" aria-label="Main site navigation">
-      {%- if params.navigation -%}
+      {%- if params.navigation %}
       <ul class="tna-header__navigation-items">
-        {%- for item in params.navigation -%}
+        {%- for item in params.navigation %}
         <li class="tna-header__navigation-item">
           <a href="{{ item.href }}" class="tna-header__navigation-item-link{%- if item.selected %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" {%- if item.selected %} aria-current="true"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %}>
             {{ item.text }}
           </a>
         </li>
-        {%- endfor -%}
+        {%- endfor %}
       </ul>
-      {%- endif -%}
-      {%- if params.topNavigation -%}
+      {%- endif %}
+      {%- if params.topNavigation %}
       <ul class="tna-header__top-navigation-items">
-        {%- for item in params.topNavigation -%}
+        {%- for item in params.topNavigation %}
         <li class="tna-header__top-navigation-item">
           <a href="{{ item.href }}" class="tna-header__top-navigation-item-link" tabindex="0" {%- if item.title %} title="{{ item.title }}"{% endif %}>
-            {%- if item.brandIcon -%}
-            <i class="fa-brands fa-fw fa-{{ item.brandIcon }}"></i>
-            {%- elseif item.icon -%}
-            <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
-            {%- endif -%}
+            {%- if item.brandIcon %}
+            <i class="fa-brands fa-{{ item.brandIcon }}" aria-hidden="true"></i>
+            {%- elseif item.icon %}
+            <i class="fa-solid fa-{{ item.icon }}" aria-hidden="true"></i>
+            {%- endif %}
             {{ item.text }}
           </a>
         </li>
-        {%- endfor -%}
+        {%- endfor %}
       </ul>
-      {%- endif -%}
+      {%- endif %}
     </nav>
-    {%- endif -%}
+    {%- endif %}
   </div>
 </header>