@nationalarchives/frontend 0.1.16-prerelease → 0.1.17-prerelease

package/nationalarchives/components/footer/template.njk

@@ -1,67 +1,124 @@
 {%- 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.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>
+  <div class="tna-container">
+    <div class="tna-column tna-column--flex-1 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-1">
+      <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="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>
+      </svg>
+      <h2 class="tna-heading tna-heading--l tna-footer__title">The National Archives</h2>
+      <address class="tna-footer__address">
+        Kew, Richmond<br />
+        TW9 4DU
+      </address>
+      {%- if params.meta -%}
+      <div class="tna-footer__meta">
+        {{ params.meta | safe }}
+      </div>
+      {%- endif -%}
+      {%- if params.social -%}
+        <nav class="tna-footer__social" aria-label="Social links">
+          <ul class="tna-ul tna-ul--plain tna-footer__social-items">
+          {%- for item in params.social -%}
+            <li class="tna-footer__social-item">
+              <a href="{{ item.href }}" class="tna-footer__social-item-link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
+                {%- if item.image -%}
+                <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="{{ item.text }} logo" width="32" height="32" />
+                <span class="tna-footer__social-item-link-text tna-visually-hidden">
+                  {{ item.text }}
+                </span>
+                {%- else -%}
+                <span class="tna-footer__social-item-link-text">
+                  {{ item.text }}
+                </span>
+                {%- endif -%}
+              </a>
+            </li>
+          {%- endfor -%}
+          </ul>
+        </nav>
+      {%- endif -%}
+    </div>
+    {%- if params.navigation -%}
+    <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
+      {%- for group in params.navigation -%}
+      <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
+        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+          {{ group.title }}
+        </h3>
+        <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
+        {%- for item in group.items -%}
+          <li class="tna-footer__navigation-block-item">
+            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.newTab %} target="_blank"{% endif %}>
+              {{ item.text }}
+              {%- if item.newTab -%}
+              <span class="tna-footer__navigation-block-item-link-icon"></span>
+              <span class="tna-visually-hidden">(opens in new tab)</span>
+              {%- endif -%}
+            </a>
+          </li>
+        {%- endfor -%}
+        </ul>
+      </nav>
+      {%- endfor -%}
+    </div>
     {%- endif -%}
+    {%- if params.showNewsletter -%}
+    <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
+      <div class="tna-footer__mailing-list">
+        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+          Join the National Archives' mailing list
+        </h3>
+        <p>
+          Subscribe for regular news, updates and priority booking for events.
+        </p>
+        <a href="#" class="tna-button tna-button--accent" role="button">
+          Subscribe
+        </a>
+      </div>
     </div>
+    {%- endif -%}
   </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 }}">
-      <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">
-          <a href="{{ item.href }}" class="tna-footer__navigation-group-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+  <div class="tna-container">
+    {%- if params.legal -%}
+    <nav class="tna-footer__legal tna-column tna-column--full" aria-label="General site links">
+      <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
+        {%- for item in params.legal -%}
+        <li class="tna-footer__legal-item">
+          <a href="{{ item.href }}" class="tna-footer__legal-item-link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+            {{ item.text }}
+          </a>
         </li>
-      {%- endfor -%}
+        {%- endfor -%}
       </ul>
+      <hr />
     </nav>
-  {%- endfor -%}
-  </div>
-  {%- endif -%}
-  {%- 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-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 -%}
-        <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" width="40" height="40" />
-      {%- endif -%}
-        {{ item.text }}
-      </a>
+    {%- else -%}
+    <div class="tna-column--full">
+      <hr />
     </div>
-  {%- endfor -%}
-  </nav>
-{%- endif -%}
+    {%- endif -%}
+  </div>
   <div class="tna-container tna-footer__licence">
-    <div class="tna-column tna-column--full-tiny">
-      <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
-        <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>
-    </div>
-    <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 tna-column--full-tiny tna-footer__govuk">
-      <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
-        <svg class="tna-footer__govuk-logotype-crown" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 132 97" width="44" height="32">
-          <path fill="currentColor" 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>
+      <div class="tna-column tna-column--full-tiny">
+        <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
+          <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>
-        GOV.UK
-      </a>
+      </div>
+      <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 tna-column--full-tiny tna-footer__govuk">
+        <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
+          <svg class="tna-footer__govuk-logotype-crown" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 132 97" width="44" height="32">
+            <path fill="currentColor" 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>
+          </svg>
+          GOV.UK
+        </a>
+      </div>
     </div>
   </div>
 </footer>

package/nationalarchives/components/header/_index.scss

@@ -5,6 +5,43 @@
 @use "../../tools/typography";
 @use "../../tools/media";
 
+// 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.invert;
 
@@ -344,8 +381,7 @@
       &,
       &:link,
       &:visited {
-        text-decoration: underline;
-        text-decoration-thickness: 3px;
+        @include typography.interacted-text-decoration;
       }
     }
   }
@@ -391,7 +427,7 @@
       &,
       &:link,
       &:visited {
-        @include colour.uninvert;
+        @include uninvert;
         @include colour.colour-font("font-dark");
         @include colour.colour-background("page-background");
       }
@@ -442,7 +478,7 @@
     }
 
     &__navigation {
-      @include colour.uninvert;
+      @include uninvert;
       @include colour.colour-font("font-base");
       @include typography.relative-font-size(20);
 

package/nationalarchives/components/hero/_index.scss

@@ -3,7 +3,7 @@
 
 .tna-hero {
   min-height: min(35vw, 480px);
-  margin-bottom: 2rem;
+  // margin-bottom: 2rem;
   padding-top: 5rem;
   padding-bottom: 3rem;
 

package/nationalarchives/components/index-grid/_index.scss

@@ -1,27 +1,39 @@
 @use "sass:math";
 @use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/typography";
 
 .tna-index-grid {
   &__heading {
   }
 
   &__items {
-    margin-top: 1rem;
+    margin-bottom: 0;
+    padding-top: 2rem;
 
     list-style: none;
   }
 
   &__item-wrapper {
     margin-bottom: 2rem;
+
+    @include media.on-mobile {
+      margin-bottom: 1rem;
+    }
   }
 
   &__item {
+    @include colour.invert;
+
+    // @include colour.colour-font("contrast-font-base");
+
     height: 100%;
 
     display: flex;
     flex-direction: column;
 
-    @include colour.invert;
+    position: relative;
+
     text-decoration: none;
 
     @include colour.on-high-contrast {
@@ -31,9 +43,10 @@
 
   &__item-image {
     width: 100%;
-    height: #{math.div(2, 3) * 100%};
+    // height: #{math.div(2, 3) * 100%};
+    height: auto;
 
-    object-fit: cover;
+    // object-fit: cover;
   }
 
   &__item-content {
@@ -42,19 +55,28 @@
     flex: 1;
   }
 
+  &__item-label {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
+
   &__item-title {
+    // @include typography.heading-font;
     text-decoration: underline;
+    // @include typography.relative-font-size(20);
 
     .tna-index-grid__item:hover & {
       &,
       &:link,
       &:visited {
-        text-decoration-thickness: 3px;
+        @include typography.interacted-text-decoration;
       }
     }
   }
 
   &__item-subtitle {
     @include colour.colour-font("font-light");
+    @include typography.relative-font-size(16);
   }
 }

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

@@ -53,13 +53,14 @@ const exampleItem = {
   width: "800",
   height: "600",
   title: "Cat",
-  subtitle: "4 photos",
 };
+
 export const Standard = Template.bind({});
 Standard.args = {
   heading: {
     title: "My dogs",
     level: 2,
+    href: "#",
   },
   items: Array(12)
     .fill({ ...exampleItem })
@@ -68,6 +69,7 @@ Standard.args = {
       return {
         ...item,
         href: `#/category-${index}`,
+        label: "Time period",
         title: `Category #${index + 101}`,
         subtitle: `${pseudoRandom} photos`,
       };
@@ -78,3 +80,25 @@ Standard.args = {
   columnsTiny: 1,
   classes: "tna-index-grid--demo",
 };
+
+export const Basic = Template.bind({});
+Basic.args = {
+  heading: {
+    title: "My dogs",
+  },
+  items: Array(6)
+    .fill({ ...exampleItem })
+    .map((item, index) => {
+      const pseudoRandom = ((index * 29) % 8) + 1;
+      return {
+        ...item,
+        href: `#/category-${index}`,
+        title: `Category #${index + 101}`,
+      };
+    }),
+  columns: 3,
+  columnsMedium: 3,
+  columnsSmall: 2,
+  columnsTiny: 1,
+  classes: "tna-index-grid--demo",
+};

package/nationalarchives/components/index-grid/macro-options.json

@@ -22,6 +22,12 @@
         "type": "text",
         "required": false,
         "description": ""
+      },
+      {
+        "name": "href",
+        "type": "text",
+        "required": false,
+        "description": ""
       }
     ]
   },
@@ -61,6 +67,12 @@
         "required": true,
         "description": ""
       },
+      {
+        "name": "label",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "title",
         "type": "string",

package/nationalarchives/components/index-grid/template.njk

@@ -1,25 +1,23 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading.title }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column tna-column--full">
-      {%- set headingSize = 'l' -%}
-      {%- if params.heading.size -%}
-        {%- set headingSize = params.heading.size -%}
-      {%- endif -%}
-      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ headingSize }} tna-index-grid__heading">
+      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ params.heading.size or 'l' }} tna-index-grid__heading">
+        {%- if params.heading.href -%}
+        <a href="{{ params.heading.href }}">{{ params.heading.title }}</a>
+        {%- else -%}
         {{ params.heading.title }}
+        {%- endif -%}
       </h{{ params.heading.level }}>
     </div>
   </div>
   <ul class="tna-index-grid__items tna-container">
     {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
-
     {%- if params.columns == 1 -%}
       {%- set itemClasses = itemClasses.concat('tna-column--full') -%}
     {%- else -%}
       {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columns) -%}
     {%- endif -%}
-
     {%- if params.columnsMedium -%}
       {%- if params.columnsMedium == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-medium') -%}
@@ -27,7 +25,6 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsMedium + '-medium') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- if params.columnsSmall -%}
       {%- if params.columnsSmall == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-small') -%}
@@ -35,7 +32,6 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsSmall + '-small') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- if params.columnsTiny -%}
       {%- if params.columnsTiny == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-tiny') -%}
@@ -43,13 +39,15 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsTiny + '-tiny') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- for item in params.items -%}
     <li class="{{ itemClasses | join(' ') }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
         <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
+          {%- if item.label -%}
+          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-visually-hidden">:</span></span>
+          {%- endif -%}
           {%- if item.subtitle -%}
           <br>
           <span class="tna-index-grid__item-subtitle">{{ item.subtitle }}</span>

package/nationalarchives/components/message/_index.scss

@@ -1,4 +1,5 @@
 @use "../../tools/colour";
+@use "../../tools/media";
 
 .tna-message {
   padding: 1rem;
@@ -20,8 +21,15 @@
 
   &__icon {
     margin-right: 1rem;
+
+    flex: 0 0 2.5rem;
+
+    @include media.on-mobile {
+      flex: 0 0 1.5rem;
+    }
   }
 
   &__message {
+    flex: 1;
   }
 }

package/nationalarchives/components/picture/_index.scss

@@ -34,6 +34,8 @@
 
     padding: 1rem 1.5rem;
 
+    // @include colour.colour-font("font-base");
+
     .tna-template--clicked &:focus {
       outline: none;
     }

package/nationalarchives/components/picture/picture.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/picture/picture"]=e())}(self,(()=>(()=>{"use strict";var t={948:(t,e,r)=>{r.d(e,{Z:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={exports:{}};return t[n](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{Picture:()=>o});var t=r(948);function e(t){return e="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},e(t)}function i(t,r){for(var n=0;n<r.length;n++){var i=r[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,(void 0,o=function(t,r){if("object"!==e(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,"string");if("object"!==e(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(i.key),"symbol"===e(o)?o:String(o)),i)}var o}var o=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$imageWrapper=t&&t.querySelector(".tna-picture__image-wrapper"),this.$transcript=t&&t.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1}var r,n;return r=e,(n=[{key:"init",value:function(){var e=this;if(this.$module&&this.$imageWrapper&&this.$transcript){var r="tna-picture-".concat((0,t.Z)());this.$transcriptToggle=document.createElement("button"),this.$transcriptToggle.classList.add("tna-picture__toggle-transcript","tna-button"),this.$transcriptToggle.setAttribute("aria-controls",r),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcriptToggle.addEventListener("click",(function(){return e.handleToggleTranscript()})),this.$imageWrapper.appendChild(this.$transcriptToggle),this.$transcript.setAttribute("id",r),this.$transcript.setAttribute("hidden",!0)}}},{key:"handleToggleTranscript",value:function(){var t="tna-picture__toggle-transcript--opened";this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.classList.add(t),this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText="Close transcript",this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.classList.remove(t),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcript.setAttribute("hidden",!0))}}])&&i(r.prototype,n),Object.defineProperty(r,"prototype",{writable:!1}),e}()})(),n})()));
+!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/picture/picture"]=e())}(self,(()=>(()=>{"use strict";var t={948:(t,e,r)=>{r.d(e,{Z:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={exports:{}};return t[n](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{Picture:()=>o});var t=r(948);function e(t){return e="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},e(t)}function i(t,r){for(var n=0;n<r.length;n++){var i=r[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,(void 0,o=function(t,r){if("object"!==e(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,"string");if("object"!==e(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(i.key),"symbol"===e(o)?o:String(o)),i)}var o}var o=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$imageWrapper=t&&t.querySelector(".tna-picture__image-wrapper"),this.$transcript=t&&t.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1}var r,n;return r=e,(n=[{key:"init",value:function(){var e=this;if(this.$module&&this.$imageWrapper&&this.$transcript){var r="tna-picture-".concat((0,t.Z)());this.$transcriptToggle=document.createElement("button"),this.$transcriptToggle.classList.add("tna-picture__toggle-transcript","tna-button","tna-button--accent","tna-button--solid-hover"),this.$transcriptToggle.setAttribute("aria-controls",r),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcriptToggle.addEventListener("click",(function(){return e.handleToggleTranscript()})),this.$imageWrapper.appendChild(this.$transcriptToggle),this.$transcript.setAttribute("id",r),this.$transcript.setAttribute("hidden",!0)}}},{key:"handleToggleTranscript",value:function(){var t="tna-picture__toggle-transcript--opened";this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.classList.add(t),this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText="Close transcript",this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.classList.remove(t),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcript.setAttribute("hidden",!0))}}])&&i(r.prototype,n),Object.defineProperty(r,"prototype",{writable:!1}),e}()})(),n})()));
 //# sourceMappingURL=picture.js.map

package/nationalarchives/components/picture/picture.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,8BAAgCC,IACtG,CATD,CASGK,MAAM,I,yDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,muBCHvD,IAAMC,EAAO,WAClB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BACnCF,KAAKG,YACHL,GAAWA,EAAQI,cAAc,4BACnCF,KAAKI,kBAAmB,CAC1B,C,QA6CC,O,EA7CAP,G,EAAA,EAAAf,IAAA,OAAAc,MAED,WAAO,IAAAS,EAAA,KACL,GAAKL,KAAKF,SAAYE,KAAKC,eAAkBD,KAAKG,YAAlD,CAIA,IAAMG,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCR,KAAKS,kBAAoBC,SAASC,cAAc,UAChDX,KAAKS,kBAAkBG,UAAUC,IAC/B,iCACA,cAEFb,KAAKS,kBAAkBK,aAAa,gBAAiBR,GACrDN,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKS,kBAAkBO,iBAAiB,SAAS,kBAC/CX,EAAKY,wBAAwB,IAE/BjB,KAAKC,cAAciB,YAAYlB,KAAKS,mBAEpCT,KAAKG,YAAYW,aAAa,KAAMR,GACpCN,KAAKG,YAAYW,aAAa,UAAU,EAlBxC,CAoBF,GAAC,CAAAhC,IAAA,yBAAAc,MAED,WACE,IAAMuB,EACJ,yCACFnB,KAAKI,kBAAoBJ,KAAKI,iBAC1BJ,KAAKI,kBACPJ,KAAKS,kBAAkBG,UAAUC,IAAIM,GACrCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,mBACnCf,KAAKG,YAAYiB,gBAAgB,YAIjCpB,KAAKS,kBAAkBG,UAAUS,OAAOF,GACxCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKG,YAAYW,aAAa,UAAU,GAG5C,M,oEAACjB,CAAA,CArDiB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/picture/picture.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/picture/picture\"] = factory();\n})(self, () => {\nreturn ","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","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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 Picture {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageWrapper =\n      $module && $module.querySelector(\".tna-picture__image-wrapper\");\n    this.$transcript =\n      $module && $module.querySelector(\".tna-picture__transcript\");\n    this.transcriptOpened = false;\n  }\n\n  init() {\n    if (!this.$module || !this.$imageWrapper || !this.$transcript) {\n      return;\n    }\n\n    const uniqueId = `tna-picture-${uuidv4()}`;\n\n    this.$transcriptToggle = document.createElement(\"button\");\n    this.$transcriptToggle.classList.add(\n      \"tna-picture__toggle-transcript\",\n      \"tna-button\",\n    );\n    this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n    this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n    this.$transcriptToggle.innerText = \"Open transcript\";\n    this.$transcriptToggle.addEventListener(\"click\", () =>\n      this.handleToggleTranscript(),\n    );\n    this.$imageWrapper.appendChild(this.$transcriptToggle);\n\n    this.$transcript.setAttribute(\"id\", uniqueId);\n    this.$transcript.setAttribute(\"hidden\", true);\n    // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n  }\n\n  handleToggleTranscript() {\n    const transcriptToggleOpenedClass =\n      \"tna-picture__toggle-transcript--opened\";\n    this.transcriptOpened = !this.transcriptOpened;\n    if (this.transcriptOpened) {\n      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n      this.$transcriptToggle.innerText = \"Close transcript\";\n      this.$transcript.removeAttribute(\"hidden\");\n      // this.$transcript.setAttribute(\"tabindex\", \"0\");\n      // this.$transcript.focus();\n    } else {\n      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n      this.$transcriptToggle.innerText = \"Open transcript\";\n      this.$transcript.setAttribute(\"hidden\", true);\n      // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcript","transcriptOpened","_this","uniqueId","concat","uuidv4","$transcriptToggle","document","createElement","classList","add","setAttribute","innerText","addEventListener","handleToggleTranscript","appendChild","transcriptToggleOpenedClass","removeAttribute","remove"],"sourceRoot":""}
+{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,8BAAgCC,IACtG,CATD,CASGK,MAAM,I,yDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,muBCHvD,IAAMC,EAAO,WAClB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BACnCF,KAAKG,YACHL,GAAWA,EAAQI,cAAc,4BACnCF,KAAKI,kBAAmB,CAC1B,C,QA+CC,O,EA/CAP,G,EAAA,EAAAf,IAAA,OAAAc,MAED,WAAO,IAAAS,EAAA,KACL,GAAKL,KAAKF,SAAYE,KAAKC,eAAkBD,KAAKG,YAAlD,CAIA,IAAMG,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCR,KAAKS,kBAAoBC,SAASC,cAAc,UAChDX,KAAKS,kBAAkBG,UAAUC,IAC/B,iCACA,aACA,qBACA,2BAEFb,KAAKS,kBAAkBK,aAAa,gBAAiBR,GACrDN,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKS,kBAAkBO,iBAAiB,SAAS,kBAC/CX,EAAKY,wBAAwB,IAE/BjB,KAAKC,cAAciB,YAAYlB,KAAKS,mBAEpCT,KAAKG,YAAYW,aAAa,KAAMR,GACpCN,KAAKG,YAAYW,aAAa,UAAU,EApBxC,CAsBF,GAAC,CAAAhC,IAAA,yBAAAc,MAED,WACE,IAAMuB,EACJ,yCACFnB,KAAKI,kBAAoBJ,KAAKI,iBAC1BJ,KAAKI,kBACPJ,KAAKS,kBAAkBG,UAAUC,IAAIM,GACrCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,mBACnCf,KAAKG,YAAYiB,gBAAgB,YAIjCpB,KAAKS,kBAAkBG,UAAUS,OAAOF,GACxCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKG,YAAYW,aAAa,UAAU,GAG5C,M,oEAACjB,CAAA,CAvDiB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/picture/picture.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/picture/picture\"] = factory();\n})(self, () => {\nreturn ","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","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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 Picture {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageWrapper =\n      $module && $module.querySelector(\".tna-picture__image-wrapper\");\n    this.$transcript =\n      $module && $module.querySelector(\".tna-picture__transcript\");\n    this.transcriptOpened = false;\n  }\n\n  init() {\n    if (!this.$module || !this.$imageWrapper || !this.$transcript) {\n      return;\n    }\n\n    const uniqueId = `tna-picture-${uuidv4()}`;\n\n    this.$transcriptToggle = document.createElement(\"button\");\n    this.$transcriptToggle.classList.add(\n      \"tna-picture__toggle-transcript\",\n      \"tna-button\",\n      \"tna-button--accent\",\n      \"tna-button--solid-hover\",\n    );\n    this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n    this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n    this.$transcriptToggle.innerText = \"Open transcript\";\n    this.$transcriptToggle.addEventListener(\"click\", () =>\n      this.handleToggleTranscript(),\n    );\n    this.$imageWrapper.appendChild(this.$transcriptToggle);\n\n    this.$transcript.setAttribute(\"id\", uniqueId);\n    this.$transcript.setAttribute(\"hidden\", true);\n    // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n  }\n\n  handleToggleTranscript() {\n    const transcriptToggleOpenedClass =\n      \"tna-picture__toggle-transcript--opened\";\n    this.transcriptOpened = !this.transcriptOpened;\n    if (this.transcriptOpened) {\n      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n      this.$transcriptToggle.innerText = \"Close transcript\";\n      this.$transcript.removeAttribute(\"hidden\");\n      // this.$transcript.setAttribute(\"tabindex\", \"0\");\n      // this.$transcript.focus();\n    } else {\n      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n      this.$transcriptToggle.innerText = \"Open transcript\";\n      this.$transcript.setAttribute(\"hidden\", true);\n      // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcript","transcriptOpened","_this","uniqueId","concat","uuidv4","$transcriptToggle","document","createElement","classList","add","setAttribute","innerText","addEventListener","handleToggleTranscript","appendChild","transcriptToggleOpenedClass","removeAttribute","remove"],"sourceRoot":""}

package/nationalarchives/components/picture/picture.mjs

@@ -21,6 +21,8 @@ export class Picture {
     this.$transcriptToggle.classList.add(
       "tna-picture__toggle-transcript",
       "tna-button",
+      "tna-button--accent",
+      "tna-button--solid-hover",
     );
     this.$transcriptToggle.setAttribute("aria-controls", uniqueId);
     this.$transcriptToggle.setAttribute("aria-expanded", false);

package/nationalarchives/components/skip-link/skip-link.stories.js

@@ -18,12 +18,13 @@ export default {
 };
 
 const Template = ({ classes, attributes }) =>
-  `${SkipLink({
+  `<p>To view the skip link component tab to this example, or click inside this example and press tab.</p>
+  ${SkipLink({
     params: {
       classes,
       attributes,
     },
-  })}<p>To view the skip link component tab to this example, or click inside this example and press tab.</p>`;
+  })}`;
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/tabs/_index.scss

@@ -1,4 +1,5 @@
 @use "../../tools/colour";
+@use "../../tools/typography";
 
 .tna-tabs {
   margin-bottom: 2rem;
@@ -34,9 +35,11 @@
     position: relative;
 
     @include colour.colour-font("font-dark");
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: 700;
+    // font-size: inherit;
+    @include typography.relative-font-size(20);
+    // font-family: inherit;
+    @include typography.heading-font;
+    // font-weight: 700;
     text-decoration: none;
     line-height: 1.5;
     text-align: center;