@nationalarchives/frontend 0.1.13-prerelease → 0.1.15-prerelease

package/nationalarchives/all.mjs

@@ -1,4 +1,4 @@
-import { Card } from "./components/card/card.mjs";
+import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.mjs";
 import { Header } from "./components/header/header.mjs";
 import { Picture } from "./components/picture/picture.mjs";
 import { SensitiveImage } from "./components/sensitive-image/sensitive-image.mjs";
@@ -45,16 +45,16 @@ const initAll = (options) => {
   const $scope =
     options.scope instanceof HTMLElement ? options.scope : document;
 
+  const $breadcrumbs = $scope.querySelector('[data-module="tna-breadcrumbs"]');
+  if ($breadcrumbs) {
+    new Breadcrumbs($breadcrumbs).init();
+  }
+
   const $header = $scope.querySelector('[data-module="tna-header"]');
   if ($header) {
     new Header($header).init();
   }
 
-  const $cards = $scope.querySelectorAll('[data-module="tna-card"]');
-  $cards.forEach(($card) => {
-    new Card($card).init();
-  });
-
   const $pictures = $scope.querySelectorAll('[data-module="tna-picture"]');
   $pictures.forEach(($picture) => {
     new Picture($picture).init();
@@ -73,4 +73,4 @@ const initAll = (options) => {
   });
 };
 
-export { initAll, Header, SensitiveImage, Tabs };
+export { initAll, Breadcrumbs, Header, Picture, SensitiveImage, Tabs };

package/nationalarchives/all.scss

@@ -1,9 +1,6 @@
-@use "variables";
-@use "tools";
+@forward "variables";
+@forward "tools";
 
 @use "utilities";
 @use "components";
 @use "patterns";
-
-// @use "variables/colour";
-// @include colour.configure(#f0a);

package/nationalarchives/components/breadcrumbs/_index.scss

@@ -5,6 +5,14 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
 
+  &__wrapper {
+    .tna-template--clicked & {
+      &:focus {
+        outline: none !important;
+      }
+    }
+  }
+
   &__list {
     margin: 0;
     padding: 0;
@@ -24,9 +32,15 @@
 
         display: inline-block;
 
+        vertical-align: baseline;
+
         content: "\203A";
       }
     }
+
+    &--expandable {
+      display: none;
+    }
   }
 
   &__link {
@@ -41,6 +55,46 @@
     &:hover {
       @include colour.colour-font("font-dark");
     }
+
+    @include colour.on-high-contrast {
+      padding-right: 0.75rem;
+      padding-left: 0.75rem;
+
+      text-decoration: none;
+
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+
+      &:hover {
+        text-decoration: underline;
+
+        @include colour.colour-font("contrast-background");
+
+        @include colour.colour-background("contrast-font-base");
+      }
+    }
+  }
+
+  button#{&}__link {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+
+    background-color: transparent;
+
+    border: none;
+
+    appearance: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: 3px;
+    }
   }
 
   @include media.on-mobile {
@@ -67,28 +121,17 @@
     //   }
     // }
 
-    &__item:not(:first-child, :last-child) {
+    &__list--collapse-on-mobile
+      #{&}__item:not(
+        :first-child,
+        .tna-breadcrumbs__item--expandable,
+        :last-child
+      ) {
       display: none;
     }
-  }
-
-  @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;
+    &__list--collapse-on-mobile #{&}__item--expandable {
+      display: inline-block;
     }
   }
 }

package/nationalarchives/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,2 @@
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define("TNAFrontend",[],r):"object"==typeof exports?exports.TNAFrontend=r():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/breadcrumbs/breadcrumbs"]=r())}(self,(()=>(()=>{"use strict";var e={948:(e,r,t)=>{t.d(r,{Z:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)}))}}},r={};function t(n){var i=r[n];if(void 0!==i)return i.exports;var o=r[n]={exports:{}};return e[n](o,o.exports,t),o.exports}t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{Breadcrumbs:()=>o});var e=t(948);function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,o=function(e,t){if("object"!==r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===r(o)?o:String(o)),i)}var o}var o=function(){function r(e){!function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r),this.$module=e,this.$breadcrumbsListWrapper=e&&e.querySelector(".tna-breadcrumbs__wrapper"),this.$breadcrumbsList=e&&this.$breadcrumbsListWrapper&&e.querySelector(".tna-breadcrumbs__list"),this.$breadcrumbs=e&&this.$breadcrumbsListWrapper&&this.$breadcrumbsList&&e.querySelectorAll(".tna-breadcrumbs__item")}var t,n;return t=r,(n=[{key:"init",value:function(){var r=this;if(this.$module&&this.$breadcrumbsListWrapper&&this.$breadcrumbsList&&this.$breadcrumbs&&this.$breadcrumbs.length>2){var t="tna-breadcrumbs-".concat((0,e.Z)()),n=document.createElement("li");n.classList.add("tna-breadcrumbs__item","tna-breadcrumbs__item--expandable");var i=document.createElement("button");i.classList.add("tna-breadcrumbs__link"),i.innerHTML="<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;",i.setAttribute("aria-expanded","false"),i.setAttribute("aria-controls",t),i.addEventListener("click",(function(){r.$breadcrumbsList.classList.remove("tna-breadcrumbs__list--collapse-on-mobile"),n.remove(),r.$breadcrumbsListWrapper.setAttribute("tabindex","0"),r.$breadcrumbsListWrapper.focus(),r.$breadcrumbsListWrapper.setAttribute("tabindex","-1")})),n.appendChild(i),this.$breadcrumbsList.setAttribute("id",t),this.$breadcrumbsList.insertBefore(n,this.$breadcrumbs[this.$breadcrumbs.length-2].nextSibling)}}}])&&i(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),r}()})(),n})()));
+//# sourceMappingURL=breadcrumbs.js.map

package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/breadcrumbs/breadcrumbs.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,sCAAwCC,IAC9G,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,uuBCHvD,IAAMC,EAAW,WACtB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,wBACHH,GAAWA,EAAQI,cAAc,6BACnCF,KAAKG,iBACHL,GACAE,KAAKC,yBACLH,EAAQI,cAAc,0BACxBF,KAAKI,aACHN,GACAE,KAAKC,yBACLD,KAAKG,kBACLL,EAAQO,iBAAiB,yBAC7B,C,QA6CC,O,EA7CAR,G,EAAA,EAAAf,IAAA,OAAAc,MAED,WAAO,IAAAU,EAAA,KACL,GACGN,KAAKF,SACLE,KAAKC,yBACLD,KAAKG,kBACLH,KAAKI,cAKJJ,KAAKI,aAAaG,OAAS,EAAG,CAChC,IAAMC,EAAW,mBAAHC,QAAsBC,EAAAA,EAAAA,MAE9BC,EAAcC,SAASC,cAAc,MAC3CF,EAAYG,UAAUC,IACpB,wBACA,qCAGF,IAAMC,EAAgBJ,SAASC,cAAc,UAC7CG,EAAcF,UAAUC,IAAI,yBAC5BC,EAAcC,UACZ,sEACFD,EAAcE,aAAa,gBAAiB,SAC5CF,EAAcE,aAAa,gBAAiBV,GAC5CQ,EAAcG,iBAAiB,SAAS,WACtCb,EAAKH,iBAAiBW,UAAUM,OAC9B,6CAEFT,EAAYS,SACZd,EAAKL,wBAAwBiB,aAAa,WAAY,KACtDZ,EAAKL,wBAAwBoB,QAC7Bf,EAAKL,wBAAwBiB,aAAa,WAAY,KACxD,IAEAP,EAAYW,YAAYN,GAExBhB,KAAKG,iBAAiBe,aAAa,KAAMV,GACzCR,KAAKG,iBAAiBoB,aACpBZ,EACAX,KAAKI,aAAaJ,KAAKI,aAAaG,OAAS,GAAGiB,YAEpD,CACF,M,oEAAC3B,CAAA,CA3DqB,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/breadcrumbs/breadcrumbs.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/breadcrumbs/breadcrumbs\"] = 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 Breadcrumbs {\n  constructor($module) {\n    this.$module = $module;\n    this.$breadcrumbsListWrapper =\n      $module && $module.querySelector(\".tna-breadcrumbs__wrapper\");\n    this.$breadcrumbsList =\n      $module &&\n      this.$breadcrumbsListWrapper &&\n      $module.querySelector(\".tna-breadcrumbs__list\");\n    this.$breadcrumbs =\n      $module &&\n      this.$breadcrumbsListWrapper &&\n      this.$breadcrumbsList &&\n      $module.querySelectorAll(\".tna-breadcrumbs__item\");\n  }\n\n  init() {\n    if (\n      !this.$module ||\n      !this.$breadcrumbsListWrapper ||\n      !this.$breadcrumbsList ||\n      !this.$breadcrumbs\n    ) {\n      return;\n    }\n\n    if (this.$breadcrumbs.length > 2) {\n      const uniqueId = `tna-breadcrumbs-${uuidv4()}`;\n\n      const $expandable = document.createElement(\"li\");\n      $expandable.classList.add(\n        \"tna-breadcrumbs__item\",\n        \"tna-breadcrumbs__item--expandable\",\n      );\n\n      const $expandButton = document.createElement(\"button\");\n      $expandButton.classList.add(\"tna-breadcrumbs__link\");\n      $expandButton.innerHTML =\n        \"<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;\";\n      $expandButton.setAttribute(\"aria-expanded\", \"false\");\n      $expandButton.setAttribute(\"aria-controls\", uniqueId);\n      $expandButton.addEventListener(\"click\", () => {\n        this.$breadcrumbsList.classList.remove(\n          \"tna-breadcrumbs__list--collapse-on-mobile\",\n        );\n        $expandable.remove();\n        this.$breadcrumbsListWrapper.setAttribute(\"tabindex\", \"0\");\n        this.$breadcrumbsListWrapper.focus();\n        this.$breadcrumbsListWrapper.setAttribute(\"tabindex\", \"-1\");\n      });\n\n      $expandable.appendChild($expandButton);\n\n      this.$breadcrumbsList.setAttribute(\"id\", uniqueId);\n      this.$breadcrumbsList.insertBefore(\n        $expandable,\n        this.$breadcrumbs[this.$breadcrumbs.length - 2].nextSibling,\n      );\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","Breadcrumbs","$module","_classCallCheck","this","$breadcrumbsListWrapper","querySelector","$breadcrumbsList","$breadcrumbs","querySelectorAll","_this","length","uniqueId","concat","uuidv4","$expandable","document","createElement","classList","add","$expandButton","innerHTML","setAttribute","addEventListener","remove","focus","appendChild","insertBefore","nextSibling"],"sourceRoot":""}

package/nationalarchives/components/breadcrumbs/breadcrumbs.mjs

@@ -0,0 +1,63 @@
+import uuidv4 from "../../lib/uuid.mjs";
+
+export class Breadcrumbs {
+  constructor($module) {
+    this.$module = $module;
+    this.$breadcrumbsListWrapper =
+      $module && $module.querySelector(".tna-breadcrumbs__wrapper");
+    this.$breadcrumbsList =
+      $module &&
+      this.$breadcrumbsListWrapper &&
+      $module.querySelector(".tna-breadcrumbs__list");
+    this.$breadcrumbs =
+      $module &&
+      this.$breadcrumbsListWrapper &&
+      this.$breadcrumbsList &&
+      $module.querySelectorAll(".tna-breadcrumbs__item");
+  }
+
+  init() {
+    if (
+      !this.$module ||
+      !this.$breadcrumbsListWrapper ||
+      !this.$breadcrumbsList ||
+      !this.$breadcrumbs
+    ) {
+      return;
+    }
+
+    if (this.$breadcrumbs.length > 2) {
+      const uniqueId = `tna-breadcrumbs-${uuidv4()}`;
+
+      const $expandable = document.createElement("li");
+      $expandable.classList.add(
+        "tna-breadcrumbs__item",
+        "tna-breadcrumbs__item--expandable",
+      );
+
+      const $expandButton = document.createElement("button");
+      $expandButton.classList.add("tna-breadcrumbs__link");
+      $expandButton.innerHTML =
+        "<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;";
+      $expandButton.setAttribute("aria-expanded", "false");
+      $expandButton.setAttribute("aria-controls", uniqueId);
+      $expandButton.addEventListener("click", () => {
+        this.$breadcrumbsList.classList.remove(
+          "tna-breadcrumbs__list--collapse-on-mobile",
+        );
+        $expandable.remove();
+        this.$breadcrumbsListWrapper.setAttribute("tabindex", "0");
+        this.$breadcrumbsListWrapper.focus();
+        this.$breadcrumbsListWrapper.setAttribute("tabindex", "-1");
+      });
+
+      $expandable.appendChild($expandButton);
+
+      this.$breadcrumbsList.setAttribute("id", uniqueId);
+      this.$breadcrumbsList.insertBefore(
+        $expandable,
+        this.$breadcrumbs[this.$breadcrumbs.length - 2].nextSibling,
+      );
+    }
+  }
+}

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

@@ -54,3 +54,31 @@ Standard.args = {
   ],
   classes: "tna-breadcrumbs--demo",
 };
+
+// TODO
+// export const NoCollapse = Template.bind({});
+// NoCollapse.args = {
+//   items: [
+//     {
+//       text: "Alpha",
+//       href: "#/alpha",
+//     },
+//     {
+//       text: "Beta",
+//       href: "#/beta",
+//     },
+//     {
+//       text: "Gamma",
+//       href: "#/gamma",
+//     },
+//     {
+//       text: "Delta",
+//       href: "#/delta",
+//     },
+//     {
+//       text: "Epsilon",
+//       href: "#/epsilon",
+//     },
+//   ],
+//   classes: "tna-breadcrumbs--demo",
+// };

package/nationalarchives/components/breadcrumbs/fixtures.json

@@ -19,7 +19,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-breadcrumbs tna-container \"><nav class=\"tna-column tna-column--full\" aria-label=\"Breadcrumb\"><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>",
+      "html": "<div class=\"tna-breadcrumbs tna-container \" data-module=\"tna-breadcrumbs\"><nav class=\"tna-breadcrumbs__wrapper tna-column tna-column--full\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list tna-breadcrumbs__list--collapse-on-mobile\"><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/template.njk

@@ -1,7 +1,7 @@
 {%- 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" aria-label="Breadcrumb">
-    <ol class="tna-breadcrumbs__list">
+<div class="tna-breadcrumbs tna-container {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <nav class="tna-breadcrumbs__wrapper tna-column tna-column--full" aria-label="Breadcrumb">
+    <ol class="tna-breadcrumbs__list tna-breadcrumbs__list--collapse-on-mobile">
     {%- 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 %}>

package/nationalarchives/components/button/fixtures.json

@@ -7,7 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"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\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"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\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\" role=\"button\">Log in</a>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\" role=\"button\">Log in</a>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\" data-testattribute=\"foobar\">Log in</a>",
       "hidden": false
     }
   ]

package/nationalarchives/components/button/template.njk

@@ -2,6 +2,6 @@
 {%- if params.secondary -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--secondary') -%}
 {%- endif -%}
-<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}" role="button"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ params.text }}
 </a>

package/nationalarchives/components/card/_index.scss

@@ -1,8 +1,15 @@
+@use "sass:math";
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
-@use "../../variables/colour" as colourVars;
+@use "../../tools/typography";
+@use "../../tools/media";
 
 .tna-card {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   &__inner {
     display: flex;
@@ -24,26 +31,47 @@
   }
 
   &__image-container {
+    height: 0;
     margin-bottom: 1rem;
+    // padding-bottom: #{math.div(9, 16) * 100%};
+    padding-bottom: #{math.div(2, 3) * 100%};
 
     position: relative;
     order: 1;
   }
 
   &__image {
-    height: auto;
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+
+    object-fit: cover;
   }
 
   &__image-label {
-    padding: 0 0.5rem;
+    max-width: calc(100% - 2rem);
+    padding: 0.25rem 0.5rem;
 
     position: absolute;
     top: 1rem;
     left: 0;
 
+    @include colour.fixed;
+
+    @include colour.colour-font("font-dark");
+    @include typography.relative-font-size(14);
+    @include typography.main-font-weight-bold;
     text-transform: uppercase;
+    line-height: #{math.div(16, 14)};
 
-    background-color: colourVars.$tna-yellow;
+    @include colour.colour-background("accent");
+  }
+
+  &--green-label #{&}__image-label {
+    // color: colourVars.$tna-white;
+    background-color: colourVars.$tna-green;
   }
 
   &__body {
@@ -68,14 +96,8 @@
 
     @include colour.colour-font("font-base");
 
-    // background-color: colour.$tna-yellow;
     @include colour.colour-background("accent");
 
-    .tna-card__inner {
-      margin-left: 50%;
-      padding: 2rem;
-    }
-
     .tna-card__heading {
       padding-bottom: 2rem;
 
@@ -87,38 +109,59 @@
       color: inherit;
     }
 
+    .tna-card__title {
+      @include typography.heading-font;
+    }
+
     .tna-card__title-link {
       @include colour.colour-font("font-dark");
     }
 
     .tna-card__image-container {
-      margin-bottom: 0;
+      margin-bottom: 2rem;
+    }
+
+    @include media.on-larger-than-mobile {
+      .tna-card__inner {
+        margin-left: 50%;
+        padding: 2rem;
+      }
+
+      .tna-card__image-container {
+        height: auto;
+        margin-bottom: 0;
+        padding-bottom: 0;
 
-      position: absolute;
-      inset: 0 50% 0 0;
+        display: block;
+
+        position: absolute;
+        inset: 0 50% 0 0;
+      }
     }
 
-    .tna-card__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+    @include media.on-mobile {
+      .tna-card__inner {
+        padding: 0 0 2rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 2rem;
+        margin-left: 2rem;
+      }
     }
   }
 
-  @mixin high-contrast {
-    padding: 1rem;
-
+  @include colour.on-high-contrast {
     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;
+    .tna-card__heading,
+    .tna-card__body,
+    .tna-card__actions {
+      margin-right: 2rem;
+      margin-left: 2rem;
     }
   }
 }

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

@@ -5,6 +5,7 @@ const argTypes = {
   heading: { control: "object" },
   href: { control: "text" },
   image: { control: "object" },
+  label: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
@@ -29,6 +30,7 @@ const Template = ({
   heading,
   href,
   image,
+  label,
   body,
   text,
   actions,
@@ -42,6 +44,7 @@ const Template = ({
       heading,
       href,
       image,
+      label,
       body,
       text,
       actions,
@@ -69,6 +72,7 @@ Standard.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   // actions: [
   //   {
@@ -87,7 +91,7 @@ Featured.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
+    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -97,6 +101,7 @@ Featured.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   actions: [
     {

package/nationalarchives/components/card/fixtures.json

@@ -105,7 +105,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><a href=\"\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -124,7 +124,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {

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

@@ -61,12 +61,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "label",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "width",
         "type": "number",
@@ -81,6 +75,12 @@
       }
     ]
   },
+  {
+    "name": "label",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "body",
     "type": "string",

package/nationalarchives/components/card/template.njk

@@ -40,14 +40,14 @@
     </h{{ params.heading.level }}>
   {%- endif -%}
   {%- if params.image -%}
-    <div class="tna-card__image-container">
+    <a href="{{ item.href }}" class="tna-card__image-container" tabindex="-1">
       <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
-      {%- if params.image.label -%}
+      {%- if params.label -%}
       <div class="tna-card__image-label">
-        {{ params.image.label }}
+        {{ params.label }}
       </div>
       {%- endif -%}
-    </div>
+    </a>
   {%- endif -%}
     <div class="tna-card__body">
     {%- if params.text -%}
@@ -59,7 +59,7 @@
   {%- if params.actions -%}
     <div class="tna-card__actions">
     {%- for item in params.actions -%}
-      <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+      <a href="{{ item.href }}" class="tna-card__action tna-button" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
     {%- endfor -%}
     </div>
   {%- endif -%}

package/nationalarchives/components/filters/filters.stories.js

@@ -15,7 +15,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Components/Filters",
+  title: "Components/Experimental/Filters",
   argTypes,
 };