@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/assets/images/tna-square-logo.svg

@@ -1,26 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve" class="tna-logo">
-  <rect class="tna-logo__background" fill="none" width="160" height="160"/>
+<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">
+  <path fill="#fff" d="M0 0h160v160H0z" class="tna-logo__background"/>
   <g class="tna-logo__foreground" fill="#000">
-    <path d="M1.9,107.2h156.3V158H1.9V107.2z M1.9,54.5h79.1h77.2v50.8H1.9V54.5z M1.9,1.9h77.2v50.8H1.9V1.9z M80.9,1.9 h77.2v50.8H80.9C80.9,52.7,80.9,1.9,80.9,1.9z M80.9,0H0v52.7v1.9v50.8v1.9v52.7h160v-52.7v-1.9V52.7V0H80.9z"/>
-    <polygon points="21.3,19.5 15.9,19.5 15.9,16.5 30.2,16.5 30.2,19.5 24.8,19.5 24.8,37.9 21.3,37.9 "/>
-    <polygon points="31.6,16.5 35,16.5 35,25.5 43.4,25.5 43.4,16.5 46.8,16.5 46.8,37.9 43.4,37.9 43.4,28.6 35,28.6 35,37.9 31.6,37.9 "/>
-    <polygon points="50.9,16.5 63.1,16.5 63.1,19.5 54.3,19.5 54.3,25.6 61.7,25.6 61.7,28.6 54.3,28.6 54.3,34.9 63.1,34.9 63.1,37.9 50.9,37.9 "/>
-    <path d="M19.7,69.2h3.8l6.4,12.5c0.6,1.1,1.1,2.7,1.6,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5C19.7,90.6,19.7,69.2,19.7,69.2z"/>
-    <path d="M47.8,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8H45c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H47.8z M43,69.2h4.2l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L43,69.2z"/>
-    <polygon points="57.2,72.3 51.8,72.3 51.8,69.2 66,69.2 66,72.3 60.6,72.3 60.6,90.7 57.2,90.7 "/>
-    <rect x="67.8" y="69.2" width="3.5" height="21.4"/>
-    <path d="M87.5,80c0-5.3-1.7-8-4.8-8c-3.2,0-4.8,2.7-4.8,8c0,5.2,1.6,7.9,4.8,7.9C85.9,87.9,87.5,85.2,87.5,80 M74.2,80c0-7,3-11.1,8.5-11.1c5.4,0,8.4,4.1,8.4,11.1c0,6.9-3,11-8.4,11C77.3,91,74.2,86.9,74.2,80"/>
-    <path d="M94.3,69.2H98l6.4,12.5c0.6,1.1,1.2,2.7,1.7,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5V69.2z"/>
-    <path d="M122.4,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H122.4z M117.6,69.2h4.2l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L117.6,69.2z"/>
-    <polygon points="129.9,69.2 133.4,69.2 133.4,87.6 141.8,87.6 141.8,90.7 129.9,90.7 "/>
-    <path d="M26.9,135.2l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H26.9z M22.1,121.8h4.2l6.2,21.4H29l-1.5-5.2h-6.6l-1.4,5.2h-3.6L22.1,121.8z"/>
-    <path d="M39.9,132.5c2.5,0,3.4-1.6,3.4-3.9c0-2.2-1-3.8-3.4-3.8h-2.7v7.7H39.9z M33.8,121.8h6.4c4.5,0,6.7,2.4,6.7,6.6c0,3.1-1.5,5.6-3.7,6.3v0.2c1,1.1,4,7.5,4.8,7.9v0.5h-3.8c-1-0.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5L33.8,121.8L33.8,121.8z"/>
-    <path d="M52.9,132.5c0,5.3,1.9,8,4.8,8c2.9,0,4-2,4-5.2l3.5,0.1c0,0.2,0.1,0.4,0.1,0.6c0,4.4-2.1,7.5-7.5,7.5c-5.2,0-8.5-3.9-8.5-11.1c0-7.1,3.3-11,8.5-11c6.4,0,7.5,4.6,7.5,7.2c0,0.3,0,0.7-0.1,0.9l-3.5,0.1c0-3.3-1.2-5.2-4-5.2C54.8,124.6,52.9,127.3,52.9,132.5"/>
-    <polygon points="68,121.8 71.5,121.8 71.5,130.9 79.8,130.9 79.8,121.8 83.3,121.8 83.3,143.3 79.8,143.3 79.8,133.9 71.5,133.9 71.5,143.3 68,143.3 "/>
-    <rect x="87.9" y="121.8" width="3.5" height="21.4"/>
-    <path d="M94.2,121.8h3.6l3.2,12.3c0.5,1.9,0.8,3.6,1.1,5.6h0.2c0.3-2,0.6-3.7,1.1-5.6l3.2-12.3h3.6l-6.1,21.4h-4.1L94.2,121.8z"/>
-    <polygon points="112.7,121.8 125,121.8 125,124.9 116.2,124.9 116.2,130.9 123.6,130.9 123.6,133.9 116.2,133.9 116.2,140.2 125,140.2 125,143.3 112.7,143.3 "/>
-    <path d="M130.4,136c0,0.2-0.1,0.5-0.1,0.8c0,1.9,0.8,3.7,3.4,3.7c2.1,0,3.3-1.2,3.3-2.9c0-1.6-0.7-2.4-2.2-3l-3.4-1.3c-2.4-0.9-4.2-2.4-4.2-5.7c0-3.5,2.3-6.1,6.6-6.1c5.5,0,6.4,3.6,6.4,5.9c0,0.3,0,0.7-0.1,1.1l-3.4,0.1c0-0.2,0.1-0.5,0.1-0.7c0-1.7-0.6-3.2-3-3.2c-2.1,0-3,1.2-3,2.8c0,1.7,0.9,2.5,2.2,2.9l3.5,1.3c2.6,1,4.3,2.6,4.3,5.8c0,3.6-2.4,6.1-7,6.1c-5.9,0-6.8-3.9-6.8-6.5c0-0.3,0-0.6,0.1-1L130.4,136z"/>
+    <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>
+</svg>

package/nationalarchives/components/_index.scss

@@ -0,0 +1,13 @@
+@forward "breadcrumbs";
+@forward "button";
+@forward "card";
+@forward "filters";
+@forward "footer";
+@forward "grid";
+@forward "header";
+@forward "hero";
+@forward "phase-banner";
+@forward "picture";
+@forward "profile";
+@forward "sensitive-image";
+@forward "tabs";

package/nationalarchives/components/breadcrumbs/_index.scss

@@ -1,24 +1,26 @@
-@use "../../variables/colour";
+@use "../../tools/colour";
 @use "../../tools/media";
 
 .tna-breadcrumbs {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
   &__list {
+    margin: 0;
     padding: 0;
 
     list-style: none;
 
-    display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
   }
 
   &__item {
-    display: -ms-flexbox;
     display: flex;
 
     + .tna-breadcrumbs__item {
       &::before {
-        margin: 0 0.5rem;
+        margin: 0 0.75rem;
 
         display: inline-block;
 
@@ -30,10 +32,10 @@
   &__link {
     display: inline-block;
 
-    color: colour.$base-font-colour;
+    @include colour.colour-font("font-base");
 
     &:hover {
-      color: colour.$tna-black;
+      @include colour.colour-font("font-dark");
     }
   }
 
@@ -65,4 +67,24 @@
       }
     }
   }
+
+  @mixin high-contrast {
+    &__link {
+      padding-right: 0.75rem;
+      padding-left: 0.75rem;
+
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+    }
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include high-contrast;
+  }
+
+  @media (prefers-contrast: more) {
+    .tna-template--system-theme & {
+      @include high-contrast;
+    }
+  }
 }

package/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js

@@ -1,5 +1,4 @@
 import Breadcrumbs from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -15,7 +14,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Breadcrumbs",
+  title: "Work in progress/Components/Breadcrumbs",
   argTypes,
 };
 

package/nationalarchives/components/breadcrumbs/fixtures.json

@@ -19,7 +19,7 @@
           }
         ]
       },
-      "html": "<nav class=\"tna-breadcrumbs \">\n  <ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\">\n      <a href=\"#/alpha\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n        Alpha\n      </a>\n    </li><li class=\"tna-breadcrumbs__item\">\n      <a href=\"#/beta\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n        Beta\n      </a>\n    </li><li class=\"tna-breadcrumbs__item\">\n      <a href=\"#/gamma\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">\n        Gamma\n      </a>\n    </li></ol>\n</nav>",
+      "html": "<div class=\"tna-breadcrumbs tna-container \"><nav class=\"tna-column tna-column--full\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\" data-prefix=\"Back to\">Gamma</a></li></ol></nav></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/breadcrumbs/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaBreadcrumbs(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/breadcrumbs/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/breadcrumbs/template.njk

@@ -1,13 +1,14 @@
-{%- set breadcrumbClasses = [params.classes] if params.classes else [] -%}
-
-<nav class="tna-breadcrumbs {{ breadcrumbClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <ol class="tna-breadcrumbs__list">
-  {%- for item in params.items -%}
-    <li class="tna-breadcrumbs__item">
-      <a href="{{ item.href }}" class="tna-breadcrumbs__link" data-prefix="{{ params.prefix if params.prefix else 'Back to' }}" {%- if item.title %} title="{{ item.title }}"{% endif %}>
-        {{ item.text }}
-      </a>
-    </li>
-  {%- endfor -%}
-  </ol>
-</nav>
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-breadcrumbs tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <nav class="tna-column tna-column--full">
+    <ol class="tna-breadcrumbs__list">
+    {%- for item in params.items -%}
+      <li class="tna-breadcrumbs__item">
+        <a href="{{ item.href }}" class="tna-breadcrumbs__link" data-prefix="{{ params.prefix if params.prefix else 'Back to' }}" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+          {{ item.text }}
+        </a>
+      </li>
+    {%- endfor -%}
+    </ol>
+  </nav>
+</div>

package/nationalarchives/components/button/_index.scss

@@ -1,27 +1,35 @@
-@use "../../variables/colour";
+@use "../../tools/colour";
 
 .tna-button {
   padding: 0.25rem 1rem;
 
   display: inline-block;
 
-  color: #fff;
   font-weight: 700;
   text-decoration: none;
 
-  background-color: colour.$tna-black;
+  @include colour.colour-background("button-primary-background");
 
-  border: 0.25rem colour.$tna-black solid;
+  border: 0.25rem transparent solid;
+  @include colour.colour-border("button-primary-background");
 
   transition:
     color 200ms,
     background-color 200ms,
     border-color 200ms;
 
+  cursor: pointer;
+
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("button-primary-text");
+  }
+
   &:hover {
-    color: colour.$tna-black;
+    @include colour.colour-font("button-primary-hover-text");
 
-    background-color: #fff;
+    @include colour.colour-background("button-primary-hover-background");
 
     transition:
       color 50ms,
@@ -30,16 +38,20 @@
   }
 
   &--secondary {
-    color: colour.$tna-black;
+    @include colour.colour-background("button-secondary-background");
 
-    background-color: colour.$tna-yellow;
+    @include colour.colour-border("button-secondary-background");
 
-    border-color: colour.$tna-yellow;
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("button-secondary-text");
+    }
 
     &:hover {
-      color: colour.$tna-black;
+      @include colour.colour-font("button-secondary-hover-text");
 
-      border-color: colour.$tna-black;
+      @include colour.colour-background("button-secondary-hover-background");
     }
   }
 }

package/nationalarchives/components/button/button.stories.js

@@ -1,5 +1,4 @@
 import Button from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -18,7 +17,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Button",
+  title: "Work in progress/Components/Button",
   argTypes,
 };
 

package/nationalarchives/components/button/fixtures.json

@@ -7,7 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \">\n  Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>",
       "hidden": false
     },
     {
@@ -17,7 +17,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">\n  Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">Log in</a>",
       "hidden": false
     },
     {
@@ -27,7 +27,7 @@
         "href": "#",
         "secondary": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">\n  Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">Log in</a>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\">\n  Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">\n  Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>",
       "hidden": false
     }
   ]

package/nationalarchives/components/button/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaButton(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/button/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/card/_index.scss

@@ -1,11 +1,10 @@
-@use "../../variables/colour";
+@use "../../tools/colour";
 
 .tna-card {
+  margin-bottom: 1rem;
+
   &__inner {
-    display: -ms-flexbox;
     display: flex;
-    -ms-box-orient: vertical;
-    -ms-flex-direction: column;
     flex-direction: column;
   }
 
@@ -24,10 +23,26 @@
   }
 
   &__image-container {
+    margin-bottom: 1rem;
+
+    position: relative;
     order: 1;
   }
 
   &__image {
+    height: auto;
+  }
+
+  &__image-label {
+    padding: 0 0.5rem;
+
+    position: absolute;
+    top: 1rem;
+    left: 0;
+
+    text-transform: uppercase;
+
+    background-color: #f0a;
   }
 
   &__body {
@@ -46,9 +61,14 @@
   }
 
   &--featured {
+    @include colour.fixed;
+
     position: relative;
 
-    background-color: colour.$tna-yellow;
+    @include colour.colour-font("font-base");
+
+    // background-color: colour.$tna-yellow;
+    @include colour.colour-background("accent");
 
     .tna-card__inner {
       margin-left: 50%;
@@ -58,14 +78,21 @@
     .tna-card__heading {
       padding-bottom: 2rem;
 
-      border-bottom: 2px colour.$tna-black solid;
+      border-bottom: 2px transparent solid;
+      @include colour.colour-border("keyline-dark");
+    }
+
+    .tna-card__supertitle {
+      color: inherit;
     }
 
     .tna-card__title-link {
-      color: colour.$tna-black;
+      @include colour.colour-font("font-dark");
     }
 
     .tna-card__image-container {
+      margin-bottom: 0;
+
       position: absolute;
       inset: 0 50% 0 0;
     }
@@ -76,4 +103,21 @@
       object-fit: cover;
     }
   }
+
+  @mixin high-contrast {
+    padding: 1rem;
+
+    border: 1px transparent solid;
+    @include colour.colour-border("keyline-dark");
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include high-contrast;
+  }
+
+  @media (prefers-contrast: more) {
+    .tna-template--system-theme & {
+      @include high-contrast;
+    }
+  }
 }

package/nationalarchives/components/card/card.js

@@ -0,0 +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/card/card"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},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={};function o(t){return o="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},o(t)}function n(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(void 0,i=function(t,e){if("object"!==o(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!==o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===o(i)?i:String(i)),r)}var i}t.r(e),t.d(e,{Card:()=>r});var r=function(){function t(e){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:300;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$cardTitleLink=e&&e.querySelector(".tna-card__title-link"),this.$cardAction=e&&e.querySelector(".tna-card__action"),this.tapTimeMax=o}var e,o;return e=t,(o=[{key:"init",value:function(){this.$module&&(this.$cardTitleLink||this.$cardAction)&&!this.$module.classList.contains("tna-card--no-global-click")&&(this.touchStartTime=null)}},{key:"handleCardClick",value:function(){this.$cardTitleLink?this.$cardTitleLink.click():this.$cardAction&&this.$cardAction.click()}},{key:"handleCardTouchStart",value:function(){this.touchStartTime=new Date}},{key:"handleCardTouchEnd",value:function(){(new Date).getTime()-this.touchStartTime.getTime()<this.tapTimeMax&&this.handleCardClick()}}])&&n(e.prototype,o),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+//# sourceMappingURL=card.js.map

package/nationalarchives/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/card/card.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,wBAA0BC,IAChG,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,msBCLvD,IAAMC,EAAI,WACf,SAAAA,EAAYC,GAA2B,IAAlBC,EAAUC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,K,4FAAGG,CAAA,KAAAN,GACnCO,KAAKN,QAAUA,EACfM,KAAKC,eACHP,GAAWA,EAAQQ,cAAc,yBACnCF,KAAKG,YAAcT,GAAWA,EAAQQ,cAAc,qBACpDF,KAAKL,WAAaA,CACpB,C,QAoCC,O,EApCAF,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAEKQ,KAAKN,UACJM,KAAKC,gBAAmBD,KAAKG,eAC/BH,KAAKN,QAAQU,UAAUC,SAAS,+BAKlCL,KAAKM,eAAiB,KAMxB,GAAC,CAAA3B,IAAA,kBAAAa,MAED,WACMQ,KAAKC,eACPD,KAAKC,eAAeM,QACXP,KAAKG,aACdH,KAAKG,YAAYI,OAErB,GAAC,CAAA5B,IAAA,uBAAAa,MAED,WACEQ,KAAKM,eAAiB,IAAIE,IAC5B,GAAC,CAAA7B,IAAA,qBAAAa,MAED,YACmB,IAAIgB,MAAOC,UAAYT,KAAKM,eAAeG,UAC7CT,KAAKL,YAClBK,KAAKU,iBAET,M,oEAACjB,CAAA,CA3Cc,G","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/card/card.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/card/card\"] = 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};","export class Card {\n  constructor($module, tapTimeMax = 300) {\n    this.$module = $module;\n    this.$cardTitleLink =\n      $module && $module.querySelector(\".tna-card__title-link\");\n    this.$cardAction = $module && $module.querySelector(\".tna-card__action\");\n    this.tapTimeMax = tapTimeMax;\n  }\n\n  init() {\n    if (\n      !this.$module ||\n      (!this.$cardTitleLink && !this.$cardAction) ||\n      this.$module.classList.contains(\"tna-card--no-global-click\")\n    ) {\n      return;\n    }\n\n    this.touchStartTime = null;\n\n    // this.$module.addEventListener(\"touchstart\", () =>\n    //   this.handleCardTouchStart(),\n    // );\n    // this.$module.addEventListener(\"touchend\", () => this.handleCardTouchEnd());\n  }\n\n  handleCardClick() {\n    if (this.$cardTitleLink) {\n      this.$cardTitleLink.click();\n    } else if (this.$cardAction) {\n      this.$cardAction.click();\n    }\n  }\n\n  handleCardTouchStart() {\n    this.touchStartTime = new Date();\n  }\n\n  handleCardTouchEnd() {\n    const duration = new Date().getTime() - this.touchStartTime.getTime();\n    if (duration < this.tapTimeMax) {\n      this.handleCardClick();\n    }\n  }\n}\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","Card","$module","tapTimeMax","arguments","length","undefined","_classCallCheck","this","$cardTitleLink","querySelector","$cardAction","classList","contains","touchStartTime","click","Date","getTime","handleCardClick"],"sourceRoot":""}

package/nationalarchives/components/card/card.mjs

@@ -0,0 +1,45 @@
+export class Card {
+  constructor($module, tapTimeMax = 300) {
+    this.$module = $module;
+    this.$cardTitleLink =
+      $module && $module.querySelector(".tna-card__title-link");
+    this.$cardAction = $module && $module.querySelector(".tna-card__action");
+    this.tapTimeMax = tapTimeMax;
+  }
+
+  init() {
+    if (
+      !this.$module ||
+      (!this.$cardTitleLink && !this.$cardAction) ||
+      this.$module.classList.contains("tna-card--no-global-click")
+    ) {
+      return;
+    }
+
+    this.touchStartTime = null;
+
+    // this.$module.addEventListener("touchstart", () =>
+    //   this.handleCardTouchStart(),
+    // );
+    // this.$module.addEventListener("touchend", () => this.handleCardTouchEnd());
+  }
+
+  handleCardClick() {
+    if (this.$cardTitleLink) {
+      this.$cardTitleLink.click();
+    } else if (this.$cardAction) {
+      this.$cardAction.click();
+    }
+  }
+
+  handleCardTouchStart() {
+    this.touchStartTime = new Date();
+  }
+
+  handleCardTouchEnd() {
+    const duration = new Date().getTime() - this.touchStartTime.getTime();
+    if (duration < this.tapTimeMax) {
+      this.handleCardClick();
+    }
+  }
+}

package/nationalarchives/components/card/card.stories.js

@@ -1,5 +1,4 @@
 import Card from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -22,7 +21,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Card",
+  title: "Work in progress/Components/Card",
   argTypes,
 };
 
@@ -61,21 +60,23 @@ Standard.args = {
     title: "Card title",
     level: 3,
     size: "m",
-    singleSentence: true,
+    singleSentence: false,
   },
   href: "#",
   image: {
-    src: "https://picsum.photos/id/29/640/360",
-    alt: "A placeholder image",
+    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    alt: "The National Archives office",
+    width: 1996,
+    height: 1331,
   },
   body: "<p>Card body</p>",
-  actions: [
-    {
-      text: "Card action",
-      href: "#",
-      title: "Go and do the action",
-    },
-  ],
+  // actions: [
+  //   {
+  //     text: "Card action",
+  //     href: "#",
+  //     title: "Go and do the action",
+  //   },
+  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };
@@ -87,12 +88,14 @@ Featured.args = {
     title: "Card title",
     level: 3,
     size: "m",
-    singleSentence: true,
+    singleSentence: false,
   },
   href: "#",
   image: {
-    src: "https://picsum.photos/id/24/640/360",
-    alt: "A placeholder image",
+    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    alt: "The National Archives office",
+    width: 1996,
+    height: 1331,
   },
   body: "<p>Card body</p>",
   actions: [