@nationalarchives/frontend 0.1.9-prerelease → 0.1.10-prerelease

package/nationalarchives/components/footer/footer.stories.js

@@ -1,8 +1,9 @@
 import Footer from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
+  title: { control: "text" },
+  address: { control: "text" },
   navigation: { control: "object" },
   social: { control: "object" },
   classes: { control: "text" },
@@ -16,13 +17,22 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Footer",
+  title: "Components/Work in progress/Footer",
   argTypes,
 };
 
-const Template = ({ navigation, social, classes, attributes }) => {
+const Template = ({
+  title,
+  address,
+  navigation,
+  social,
+  classes,
+  attributes,
+}) => {
   return Footer({
     params: {
+      title,
+      address,
       navigation,
       social,
       classes,
@@ -33,6 +43,8 @@ const Template = ({ navigation, social, classes, attributes }) => {
 
 export const Standard = Template.bind({});
 Standard.args = {
+  title: "The National Archives",
+  address: "Kew, Richmond TW9 4DU",
   navigation: [
     {
       title: "Find out more",
@@ -143,47 +155,32 @@ Standard.args = {
     {
       text: "Twitter",
       href: "#",
-      imageSrc:
-        "https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg",
+      image: "/images/footer/twitter.svg",
     },
     {
       text: "YouTube",
       href: "#",
-      image: `<svg viewBox="409.289 277.787 512 114.301" width="512" height="114.301" xmlns="http://www.w3.org/2000/svg">
-        <g viewBox="0 0 90 20" preserveAspectRatio="xMidYMid meet" class="style-scope yt-icon" transform="matrix(5.715038, 0, 0, 5.715038, 409.288757, 277.787231)">
-          <g class="style-scope yt-icon">
-            <path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" class="style-scope yt-icon" fill="#FF0000"/>
-            <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" class="style-scope yt-icon" fill="white"/>
-          </g>
-          <g class="style-scope yt-icon">
-            <g id="youtube-paths" class="style-scope yt-icon">
-              <path d="M34.6024 13.0036L31.3945 1.41846H34.1932L35.3174 6.6701C35.6043 7.96361 35.8136 9.06662 35.95 9.97913H36.0323C36.1264 9.32532 36.3381 8.22937 36.665 6.68892L37.8291 1.41846H40.6278L37.3799 13.0036V18.561H34.6001V13.0036H34.6024Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M41.4697 18.1937C40.9053 17.8127 40.5031 17.22 40.2632 16.4157C40.0257 15.6114 39.9058 14.5437 39.9058 13.2078V11.3898C39.9058 10.0422 40.0422 8.95805 40.315 8.14196C40.5878 7.32588 41.0135 6.72851 41.592 6.35457C42.1706 5.98063 42.9302 5.79248 43.871 5.79248C44.7976 5.79248 45.5384 5.98298 46.0981 6.36398C46.6555 6.74497 47.0647 7.34234 47.3234 8.15137C47.5821 8.96275 47.7115 10.0422 47.7115 11.3898V13.2078C47.7115 14.5437 47.5845 15.6161 47.3329 16.4251C47.0812 17.2365 46.672 17.8292 46.1075 18.2031C45.5431 18.5771 44.7764 18.7652 43.8098 18.7652C42.8126 18.7675 42.0342 18.5747 41.4697 18.1937ZM44.6353 16.2323C44.7905 15.8231 44.8705 15.1575 44.8705 14.2309V10.3292C44.8705 9.43077 44.7929 8.77225 44.6353 8.35833C44.4777 7.94206 44.2026 7.7351 43.8074 7.7351C43.4265 7.7351 43.156 7.94206 43.0008 8.35833C42.8432 8.77461 42.7656 9.43077 42.7656 10.3292V14.2309C42.7656 15.1575 42.8408 15.8254 42.9914 16.2323C43.1419 16.6415 43.4123 16.8461 43.8074 16.8461C44.2026 16.8461 44.4777 16.6415 44.6353 16.2323Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M56.8154 18.5634H54.6094L54.3648 17.03H54.3037C53.7039 18.1871 52.8055 18.7656 51.6061 18.7656C50.7759 18.7656 50.1621 18.4928 49.767 17.9496C49.3719 17.4039 49.1743 16.5526 49.1743 15.3955V6.03751H51.9942V15.2308C51.9942 15.7906 52.0553 16.188 52.1776 16.4256C52.2999 16.6631 52.5045 16.783 52.7914 16.783C53.036 16.783 53.2712 16.7078 53.497 16.5573C53.7228 16.4067 53.8874 16.2162 53.9979 15.9858V6.03516H56.8154V18.5634Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M64.4755 3.68758H61.6768V18.5629H58.9181V3.68758H56.1194V1.42041H64.4755V3.68758Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M71.2768 18.5634H69.0708L68.8262 17.03H68.7651C68.1654 18.1871 67.267 18.7656 66.0675 18.7656C65.2373 18.7656 64.6235 18.4928 64.2284 17.9496C63.8333 17.4039 63.6357 16.5526 63.6357 15.3955V6.03751H66.4556V15.2308C66.4556 15.7906 66.5167 16.188 66.639 16.4256C66.7613 16.6631 66.9659 16.783 67.2529 16.783C67.4974 16.783 67.7326 16.7078 67.9584 16.5573C68.1842 16.4067 68.3488 16.2162 68.4593 15.9858V6.03516H71.2768V18.5634Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M80.609 8.0387C80.4373 7.24849 80.1621 6.67699 79.7812 6.32186C79.4002 5.96674 78.8757 5.79035 78.2078 5.79035C77.6904 5.79035 77.2059 5.93616 76.7567 6.23014C76.3075 6.52412 75.9594 6.90747 75.7148 7.38489H75.6937V0.785645H72.9773V18.5608H75.3056L75.5925 17.3755H75.6537C75.8724 17.7988 76.1993 18.1304 76.6344 18.3774C77.0695 18.622 77.554 18.7443 78.0855 18.7443C79.038 18.7443 79.7412 18.3045 80.1904 17.4272C80.6396 16.5476 80.8653 15.1765 80.8653 13.3092V11.3266C80.8653 9.92722 80.7783 8.82892 80.609 8.0387ZM78.0243 13.1492C78.0243 14.0617 77.9867 14.7767 77.9114 15.2941C77.8362 15.8115 77.7115 16.1808 77.5328 16.3971C77.3564 16.6158 77.1165 16.724 76.8178 16.724C76.585 16.724 76.371 16.6699 76.1734 16.5594C75.9759 16.4512 75.816 16.2866 75.6937 16.0702V8.96062C75.7877 8.6196 75.9524 8.34209 76.1852 8.12337C76.4157 7.90465 76.6697 7.79646 76.9401 7.79646C77.2271 7.79646 77.4481 7.90935 77.6034 8.13278C77.7609 8.35855 77.8691 8.73485 77.9303 9.26636C77.9914 9.79787 78.022 10.5528 78.022 11.5335V13.1492H78.0243Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-              <path d="M84.8657 13.8712C84.8657 14.6755 84.8892 15.2776 84.9363 15.6798C84.9833 16.0819 85.0821 16.3736 85.2326 16.5594C85.3831 16.7428 85.6136 16.8345 85.9264 16.8345C86.3474 16.8345 86.639 16.6699 86.7942 16.343C86.9518 16.0161 87.0365 15.4705 87.0506 14.7085L89.4824 14.8519C89.4965 14.9601 89.5035 15.1106 89.5035 15.3011C89.5035 16.4582 89.186 17.3237 88.5534 17.8952C87.9208 18.4667 87.0247 18.7536 85.8676 18.7536C84.4777 18.7536 83.504 18.3185 82.9466 17.446C82.3869 16.5735 82.1094 15.2259 82.1094 13.4008V11.2136C82.1094 9.33452 82.3987 7.96105 82.9772 7.09558C83.5558 6.2301 84.5459 5.79736 85.9499 5.79736C86.9165 5.79736 87.6597 5.97375 88.1771 6.32888C88.6945 6.684 89.059 7.23433 89.2707 7.98457C89.4824 8.7348 89.5882 9.76961 89.5882 11.0913V13.2362H84.8657V13.8712ZM85.2232 7.96811C85.0797 8.14449 84.9857 8.43377 84.9363 8.83593C84.8892 9.2381 84.8657 9.84722 84.8657 10.6657V11.5641H86.9283V10.6657C86.9283 9.86133 86.9001 9.25221 86.846 8.83593C86.7919 8.41966 86.6931 8.12803 86.5496 7.95635C86.4062 7.78702 86.1851 7.7 85.8864 7.7C85.5854 7.70235 85.3643 7.79172 85.2232 7.96811Z" class="style-scope yt-icon" style="fill: rgb(40, 40, 40);"/>
-            </g>
-          </g>
-        </g>
-      </svg>`,
+      image: "/images/footer/youtube.svg",
     },
     {
       text: "Flickr",
       href: "#",
+      image: "/images/footer/flickr.svg",
     },
     {
       text: "Facebook",
       href: "#",
+      image: "/images/footer/facebook.svg",
     },
     {
       text: "Instagram",
       href: "#",
+      image: "/images/footer/instagram.svg",
     },
     {
       text: "RSS",
       href: "#",
+      image: "/images/footer/rss.svg",
     },
   ],
   classes: "tna-footer--demo",

package/nationalarchives/components/footer/macro-options.json

@@ -1,4 +1,16 @@
 [
+  {
+    "name": "title",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "address",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "navigation",
     "type": "array",
@@ -40,12 +52,6 @@
             "type": "string",
             "required": false,
             "description": ""
-          },
-          {
-            "name": "imageSrc",
-            "type": "string",
-            "required": false,
-            "description": ""
           }
         ]
       }

package/nationalarchives/components/footer/template.njk

@@ -1,10 +1,26 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <footer class="tna-footer {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- if params.navigation -%}
+{%- if params.title or params.address -%}
+  <div class="tna-container tna-footer__top">
+    <div class="tna-column tna-column--full">
+    {%- if params.title -%}
+    <h2 class="tna-heading tna-heading--l tna-footer__title">
+      {{ params.title }}
+    </h2>
+    {%- endif -%}
+    {%- if params.address -%}
+    <address class="tna-footer__address">
+      {{ params.address }}
+    </address>
+    {%- endif -%}
+    </div>
+  </div>
+{%- endif -%}
+{%- if params.navigation -%}
   <div class="tna-container tna-footer__navigation">
   {%- for group in params.navigation -%}
     <nav class="tna-column tna-column--flex-1 tna-column--width-1-2-small tna-column--full-tiny tna-footer__navigation-group" aria-label="{{ group.title }}">
-      <h4 class="tna-footer__navigation-group-title">{{ group.title }}</h4>
+      <h3 class="tna-heading tna-heading--m tna-footer__navigation-group-title">{{ group.title }}</h3>
       <ul class="tna-footer__navigation-group-items">
       {%- for item in group.items -%}
         <li class="tna-footer__navigation-group-item">
@@ -19,25 +35,19 @@
   {%- if params.social -%}
   <nav class="tna-container tna-footer__social" aria-label="Social links">
   {%- for item in params.social -%}
-    <div class="tna-column tna-column--flex-1 tna-footer__social-item">
+    <div class="tna-column tna-column--width-1-4-small tna-column--width-1-2-tiny tna-footer__social-item">
       <a href="{{ item.href }}" class="tna-footer__social-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
       {%- if item.image -%}
-        <span class="tna-footer__social-item-link-image">
-          {{ item.image | safe }}
-        </span>
-      {%- elif item.imageSrc -%}
-        <span class="tna-footer__social-item-link-image">
-          <image src="{{ item.imageSrc }}" alt="" />
-        </span>
+        <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" />
       {%- endif -%}
         {{ item.text }}
       </a>
     </div>
   {%- endfor -%}
   </nav>
-  {%- endif -%}
+{%- endif -%}
   <div class="tna-container tna-footer__licence">
-    <div class="tna-column">
+    <div class="tna-column tna-column--full-tiny">
       <svg aria-hidden="true" focusable="false" class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
         <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
       </svg>
@@ -45,7 +55,7 @@
     <div class="tna-column tna-column--flex-1">
       <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
     </div>
-    <div class="tna-column">
+    <div class="tna-column tna-column--full-tiny tna-footer__govuk">
       <a href="#" class="tna-footer__govuk-link">
         <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" focusable="false" height="30" viewBox="0 0 132 97" width="36" xmlns="http://www.w3.org/2000/svg">
           <path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>

package/nationalarchives/components/grid/grid.stories.js

@@ -1,5 +1,4 @@
 import Header from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -47,7 +46,7 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo",
   columns: [
     {
       html: "<p>Full width</p>",
@@ -189,6 +188,6 @@ const responsiveColumn = {
   widthTiny: "full",
 };
 Responsive.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo",
   columns: Array(12).fill({ ...responsiveColumn }),
 };

package/nationalarchives/components/header/_index.scss

@@ -3,12 +3,91 @@
 @use "../../variables/grid";
 @use "../../variables/typography";
 @use "../../tools/media";
+@use "../../tools/typography" as tools;
 
 .tna-header {
   color: #fff;
 
   background-color: colour.$tna-black;
 
+  &__exit {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    text-align: right;
+
+    background-color: colour.$dark;
+  }
+
+  &__exit-link {
+    color: #fff;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+
+      // .tna-header__exit-link-icon {
+      //   border-color: colour.$tna-yellow;
+
+      //   &::before {
+      //     border-top-color: colour.$tna-yellow;
+      //     border-right-color: colour.$tna-yellow;
+      //   }
+
+      //   &::after {
+      //     background-color: colour.$tna-yellow;
+      //   }
+      // }
+    }
+  }
+
+  &__exit-link-icon {
+    width: 0.825rem;
+    height: 0.825rem;
+    margin-right: 0.125rem;
+    margin-left: 0.5rem;
+
+    display: inline-block;
+
+    position: relative;
+
+    vertical-align: middle;
+
+    border: 0.125rem #fff solid;
+
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      right: -0.25rem;
+      z-index: 2;
+
+      border: 0.25rem transparent solid;
+      border-top-color: #fff;
+      border-right-color: #fff;
+
+      content: "";
+    }
+
+    &::after {
+      width: 0.25rem;
+      height: 0.825rem;
+
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+
+      background-color: #fff;
+
+      outline: 0.2rem colour.$dark solid;
+
+      transform: rotate(45deg) translateX(50%);
+      transform-origin: 100% 0;
+
+      content: "";
+    }
+  }
+
   &__contents {
     &.tna-container {
       justify-content: space-between;
@@ -16,8 +95,8 @@
   }
 
   &__logo {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
   }
 
   &__logo-link {
@@ -28,14 +107,16 @@
     color: inherit;
     text-decoration: none;
 
-    &:hover {
-      outline: 0.375rem #fff solid;
+    &--href {
+      &:hover {
+        outline: 0.375rem #fff solid;
+      }
     }
   }
 
   .tna-logo {
-    width: 100px;
-    height: 100px;
+    width: 6.25rem;
+    height: 6.25rem;
 
     display: inline-block;
   }
@@ -52,31 +133,12 @@
 
     display: inline-block;
 
-    line-height: 2.125rem;
+    line-height: 2.125;
     text-transform: uppercase;
   }
 
   &__navigation-toggle {
-  }
-
-  &__navigation-toggle-button {
-    height: 2rem;
-    padding: 0;
-
-    display: block;
-
-    position: relative;
-
-    appearance: none;
-
-    font-size: 0;
-
-    background: none;
-
-    border: 0 transparent solid;
-    border-width: 0.25rem 0;
-
-    cursor: pointer;
+    align-self: center;
   }
 
   &__hamburger {
@@ -87,6 +149,8 @@
 
     background-color: #fff;
 
+    transition: height 1ms 200ms;
+
     &::before,
     &::after {
       height: 0.25rem;
@@ -99,6 +163,11 @@
 
       background-color: inherit;
 
+      transition:
+        top 200ms 200ms,
+        bottom 200ms 200ms,
+        transform 200ms;
+
       content: "";
     }
 
@@ -111,6 +180,52 @@
     }
   }
 
+  &__navigation-toggle-button {
+    height: 2rem;
+    padding: 0;
+
+    display: block;
+
+    position: relative;
+
+    appearance: none;
+
+    font-size: 0;
+
+    background: none;
+
+    border: 0 transparent solid;
+    border-width: 0.25rem 0;
+
+    cursor: pointer;
+
+    &--opened {
+      .tna-header__hamburger {
+        height: 0;
+
+        &::before,
+        &::after {
+          transition:
+            top 200ms,
+            bottom 200ms,
+            transform 200ms 200ms;
+        }
+
+        &::before {
+          top: 0.625rem;
+
+          transform: rotate(-135deg);
+        }
+
+        &::after {
+          bottom: 0.625rem;
+
+          transform: rotate(135deg);
+        }
+      }
+    }
+  }
+
   &--yellow,
   &--pink,
   &--orange,
@@ -182,8 +297,8 @@
 
     color: inherit;
     font-family: typography.$font-family-heading;
-    font-weight: typography.$font-weight-heading;
     text-decoration: none;
+    line-height: 2;
 
     transition:
       color 200ms,
@@ -191,9 +306,11 @@
 
     &:hover,
     &--selected {
-      color: colour.$tna-black;
+      // color: colour.$tna-black;
+      @include colour.colour-font("dark-font");
 
-      background-color: #fff;
+      // background-color: #fff;
+      @include colour.colour-background("page-background");
 
       transition:
         color 50ms,
@@ -227,23 +344,33 @@
       }
     }
 
+    .tna-logo {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.55;
+    }
+
     &__navigation-toggle {
       &.tna-column {
-        padding-top: 1rem;
         padding-right: $compensated-container-padding;
         padding-left: 0;
       }
     }
 
     &__navigation {
-      color: colour.$base-font-colour;
+      // color: colour.$base-font-colour;
+      @include colour.colour-font("base-font");
+      @include tools.relative-font-size(20);
 
       &.tna-column {
         padding-right: 0;
         padding-left: 0;
       }
 
-      .js-enabled & {
+      .tna-template--js-enabled & {
         display: none;
 
         &--open {
@@ -255,7 +382,8 @@
     &__navigation-items {
       width: 100%;
 
-      background-color: #fff;
+      // background-color: #fff;
+      @include colour.colour-background("page-background");
     }
 
     &__navigation-item {
@@ -263,7 +391,9 @@
 
       display: block;
 
-      border-bottom: 1px colour.$keyline-colour solid;
+      // border-bottom: 1px colour.$keyline-colour solid;
+      border-bottom: 1px solid;
+      @include colour.colour-border("keyline");
     }
 
     &__navigation-item-link {
@@ -274,6 +404,8 @@
 
       position: relative;
 
+      line-height: 1.6;
+
       &::after {
         width: 0;
 
@@ -282,7 +414,8 @@
         bottom: 0;
         left: 0;
 
-        background-color: colour.$tna-black;
+        // background-color: colour.$tna-black;
+        @include colour.colour-background("dark-font");
 
         transition: width 200ms;
 
@@ -305,4 +438,15 @@
       }
     }
   }
+
+  @include media.on-tiny {
+    .tna-logo {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.25;
+    }
+  }
 }

package/nationalarchives/components/header/header.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():(t.TNAFrontend=t.TNAFrontend||{},t.TNAFrontend["components/header/header"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Header:()=>o});function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,(void 0,a=function(t,e){if("object"!==n(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(o.key),"symbol"===n(a)?a:String(a)),o)}var a}var o=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButtonWrapper=e&&e.querySelector(".tna-header__navigation-toggle"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)")}var e,n;return e=t,(n=[{key:"init",value:function(){var t=this;if(this.$module&&this.$toggleButtonWrapper&&this.$navigation){var e="menu-content-".concat(([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})));this.$navigation.setAttribute("id",e),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",e),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return t.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return t.syncState()})):this.mql.addListener((function(){return t.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var n=0;n<this.$links.length;n++)this.$links[n].setAttribute("tabindex","0")}}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():(t.TNAFrontend=t.TNAFrontend||{},t.TNAFrontend["components/header/header"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Header:()=>o});function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,(void 0,a=function(t,e){if("object"!==n(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(o.key),"symbol"===n(a)?a:String(a)),o)}var a}var o=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButtonWrapper=e&&e.querySelector(".tna-header__navigation-toggle"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)")}var e,n;return e=t,(n=[{key:"init",value:function(){var t=this;if(this.$module&&this.$toggleButtonWrapper&&this.$navigation){var e="menu-content-".concat(([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})));this.$navigation.setAttribute("id",e),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",e),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return t.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return t.syncState()})):this.mql.addListener((function(){return t.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var n=0;n<this.$links.length;n++)this.$links[n].setAttribute("tabindex","0")}}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
 //# sourceMappingURL=header.js.map

package/nationalarchives/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/header/header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/header/header\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButtonWrapper =\n      $module && $module.querySelector(\".tna-header__navigation-toggle\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n  }\n\n  init() {\n    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {\n      return;\n    }\n\n    // const uniqueLinkIds = []\n\n    // for (let i = 0; i < this.$links.length; i++) {\n    //   const uniqueLinkId = uuidv4()\n    //   this.$links[i].setAttribute(\"id\", uniqueLinkId);\n    //   uniqueLinkIds.push(uniqueLinkId)\n    // }\n\n    const uniqueId = `menu-content-${uuidv4()}`;\n    this.$navigation.setAttribute(\"id\", uniqueId);\n    // this.$navigation.setAttribute(\"aria-owns\", uniqueLinkIds.join(\",\"));\n\n    this.$toggleButton = document.createElement(\"button\");\n    this.$toggleButton.innerText = \"Menu\";\n    this.$toggleButton.setAttribute(\"aria-controls\", uniqueId);\n    this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-toggle-button\");\n\n    this.$hamburger = document.createElement(\"div\");\n    this.$hamburger.classList.add(\"tna-header__hamburger\");\n\n    this.$toggleButton.appendChild(this.$hamburger);\n    this.$toggleButtonWrapper.appendChild(this.$toggleButton);\n\n    this.syncState();\n\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n      // this.mql.addEventListener(\"change\", this.syncState.bind(this));\n    } else {\n      this.mql.addListener(() => this.syncState());\n      // this.mql.addListener(this.syncState.bind(this));\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.$navigation.classList.add(\"tna-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n        this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"0\");\n        }\n      } else {\n        this.$navigation.classList.remove(\"tna-header__navigation--open\");\n        this.$navigation.hidden = true;\n        this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n        this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      this.$navigation.classList.add(\"tna-header__navigation--open\");\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n      this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n      this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n      for (let i = 0; i < this.$links.length; i++) {\n        this.$links[i].setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n}\n","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","replace","c","crypto","getRandomValues","Uint8Array","toString","setAttribute","$toggleButton","document","createElement","innerText","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}
+{"version":3,"file":"components/header/header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/header/header\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButtonWrapper =\n      $module && $module.querySelector(\".tna-header__navigation-toggle\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n  }\n\n  init() {\n    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {\n      return;\n    }\n\n    // const uniqueLinkIds = []\n\n    // for (let i = 0; i < this.$links.length; i++) {\n    //   const uniqueLinkId = uuidv4()\n    //   this.$links[i].setAttribute(\"id\", uniqueLinkId);\n    //   uniqueLinkIds.push(uniqueLinkId)\n    // }\n\n    const uniqueId = `menu-content-${uuidv4()}`;\n    this.$navigation.setAttribute(\"id\", uniqueId);\n    // this.$navigation.setAttribute(\"aria-owns\", uniqueLinkIds.join(\",\"));\n\n    this.$toggleButton = document.createElement(\"button\");\n    this.$toggleButton.innerText = \"Menu\";\n    this.$toggleButton.setAttribute(\"aria-controls\", uniqueId);\n    this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-toggle-button\");\n\n    this.$hamburger = document.createElement(\"div\");\n    this.$hamburger.classList.add(\"tna-header__hamburger\");\n\n    this.$toggleButton.appendChild(this.$hamburger);\n    this.$toggleButtonWrapper.appendChild(this.$toggleButton);\n\n    this.syncState();\n\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n      // this.mql.addEventListener(\"change\", this.syncState.bind(this));\n    } else {\n      this.mql.addListener(() => this.syncState());\n      // this.mql.addListener(this.syncState.bind(this));\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.$navigation.classList.add(\"tna-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n        this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n        this.$toggleButton.classList.add(\n          \"tna-header__navigation-toggle-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"0\");\n        }\n      } else {\n        this.$navigation.classList.remove(\"tna-header__navigation--open\");\n        this.$navigation.hidden = true;\n        this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n        this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n        this.$toggleButton.classList.remove(\n          \"tna-header__navigation-toggle-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      this.$navigation.classList.add(\"tna-header__navigation--open\");\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n      this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n      this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n      for (let i = 0; i < this.$links.length; i++) {\n        this.$links[i].setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n}\n","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","replace","c","crypto","getRandomValues","Uint8Array","toString","setAttribute","$toggleButton","document","createElement","innerText","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}

package/nationalarchives/components/header/header.mjs

@@ -72,6 +72,9 @@ export class Header {
         this.$navigation.setAttribute("aria-hidden", "false");
         this.$toggleButton.setAttribute("aria-expanded", "true");
         this.$toggleButton.setAttribute("title", "Close menu");
+        this.$toggleButton.classList.add(
+          "tna-header__navigation-toggle-button--opened",
+        );
 
         for (let i = 0; i < this.$links.length; i++) {
           this.$links[i].setAttribute("tabindex", "0");
@@ -82,6 +85,9 @@ export class Header {
         this.$navigation.setAttribute("aria-hidden", "true");
         this.$toggleButton.setAttribute("aria-expanded", "false");
         this.$toggleButton.setAttribute("title", "Open menu");
+        this.$toggleButton.classList.remove(
+          "tna-header__navigation-toggle-button--opened",
+        );
 
         for (let i = 0; i < this.$links.length; i++) {
           this.$links[i].setAttribute("tabindex", "-1");