@nationalarchives/frontend 0.1.7-prerelease → 0.1.9-prerelease

package/nationalarchives/components/header/header.mjs

@@ -0,0 +1,102 @@
+import uuidv4 from "../../lib/uuid.mjs";
+
+export class Header {
+  constructor($module) {
+    this.$module = $module;
+    this.$toggleButtonWrapper =
+      $module && $module.querySelector(".tna-header__navigation-toggle");
+    this.$navigation =
+      $module && $module.querySelector(".tna-header__navigation");
+    this.$links =
+      $module &&
+      this.$navigation &&
+      this.$navigation.querySelectorAll("[tabindex='0']");
+    this.menuOpened = false;
+    this.mql = window.matchMedia("(max-width: 768px)");
+  }
+
+  init() {
+    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {
+      return;
+    }
+
+    // const uniqueLinkIds = []
+
+    // for (let i = 0; i < this.$links.length; i++) {
+    //   const uniqueLinkId = uuidv4()
+    //   this.$links[i].setAttribute("id", uniqueLinkId);
+    //   uniqueLinkIds.push(uniqueLinkId)
+    // }
+
+    const uniqueId = `menu-content-${uuidv4()}`;
+    this.$navigation.setAttribute("id", uniqueId);
+    // this.$navigation.setAttribute("aria-owns", uniqueLinkIds.join(","));
+
+    this.$toggleButton = document.createElement("button");
+    this.$toggleButton.innerText = "Menu";
+    this.$toggleButton.setAttribute("aria-controls", uniqueId);
+    this.$toggleButton.setAttribute("aria-haspopup", "true");
+    this.$toggleButton.classList.add("tna-header__navigation-toggle-button");
+
+    this.$hamburger = document.createElement("div");
+    this.$hamburger.classList.add("tna-header__hamburger");
+
+    this.$toggleButton.appendChild(this.$hamburger);
+    this.$toggleButtonWrapper.appendChild(this.$toggleButton);
+
+    this.syncState();
+
+    this.$toggleButton.addEventListener("click", () =>
+      this.handleToggleNavigation(),
+    );
+
+    if ("addEventListener" in this.mql) {
+      this.mql.addEventListener("change", () => this.syncState());
+      // this.mql.addEventListener("change", this.syncState.bind(this));
+    } else {
+      this.mql.addListener(() => this.syncState());
+      // this.mql.addListener(this.syncState.bind(this));
+    }
+  }
+
+  handleToggleNavigation() {
+    this.menuOpened = !this.menuOpened;
+    this.syncState();
+  }
+
+  syncState() {
+    if (this.mql.matches) {
+      if (this.menuOpened) {
+        this.$navigation.classList.add("tna-header__navigation--open");
+        this.$navigation.hidden = false;
+        this.$navigation.setAttribute("aria-hidden", "false");
+        this.$toggleButton.setAttribute("aria-expanded", "true");
+        this.$toggleButton.setAttribute("title", "Close menu");
+
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "0");
+        }
+      } else {
+        this.$navigation.classList.remove("tna-header__navigation--open");
+        this.$navigation.hidden = true;
+        this.$navigation.setAttribute("aria-hidden", "true");
+        this.$toggleButton.setAttribute("aria-expanded", "false");
+        this.$toggleButton.setAttribute("title", "Open menu");
+
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "-1");
+        }
+      }
+    } else {
+      this.$navigation.classList.add("tna-header__navigation--open");
+      this.$navigation.hidden = false;
+      this.$navigation.setAttribute("aria-hidden", "false");
+      this.$toggleButton.setAttribute("aria-expanded", "true");
+      this.$toggleButton.setAttribute("title", "Close menu");
+
+      for (let i = 0; i < this.$links.length; i++) {
+        this.$links[i].setAttribute("tabindex", "0");
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import Header from "./template.njk";
+import "./_index.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  strapline: { control: "text" },
+  navigation: { control: "object" },
+  colour: {
+    control: "radio",
+    options: ["black", "yellow", "pink", "orange", "green", "blue"],
+  },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Header",
+  argTypes,
+};
+
+const Template = ({ strapline, navigation, colour, classes, attributes }) => {
+  return Header({
+    params: {
+      strapline,
+      navigation,
+      colour,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  strapline: "Beta",
+  navigation: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+      selected: true,
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+  ],
+  colour: "yellow",
+  classes: "tna-header--demo",
+};

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

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "strapline",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "navigation",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "selected",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the hero."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the hero."
+  }
+]

package/nationalarchives/components/header/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/header/template.njk

@@ -0,0 +1,54 @@
+{%- set classes = [params.classes] if params.classes else [] -%}
+{%- if params.colour -%}
+  {%- set classes = classes.concat('tna-header--' + params.colour) -%}
+{%- endif -%}
+<header class="tna-header {{ classes | join(' ') }}" data-module="tna-header" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-container tna-header__contents">
+    <div class="tna-column tna-header__logo">
+      <a href="#" class="tna-header__logo-link">
+        <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"/>
+          <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"/>
+          </g>
+        </svg>
+        {%- if params.strapline -%}
+        <span class="tna-header__logo-strapline">{{ params.strapline }}</span>
+        {%- endif -%}
+      </a>
+    </div>
+    {%- if params.navigation -%}
+    <div class="tna-column tna-column--flex-1- tna-header__navigation-toggle">
+      <!-- POPULATED BY JAVASCRIPT IF ENABLED -->
+    </div>
+    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" aria-label="Main site navigation">
+      <ul class="tna-header__navigation-items">
+      {%- for item in params.navigation -%}
+        <li class="tna-header__navigation-item">
+          <a href="{{ item.href }}" class="tna-header__navigation-item-link{%- if item.selected %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" {%- if item.selected %} aria-current="true"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+        </li>
+      {%- endfor -%}
+      </ul>
+    </nav>
+    {%- endif -%}
+  </div>
+</header>

package/nationalarchives/components/hero/_index.scss

@@ -1,17 +1,17 @@
 @use "../../tools/media";
 
 .tna-hero {
-  min-height: min(20vw, 300px);
+  min-height: min(35vw, 480px);
   padding-top: 5.25rem;
   padding-bottom: 3.25rem;
 
   display: -ms-flexbox;
   display: flex;
-  align-items: end;
+  align-items: flex-end;
 
   position: relative;
 
-  background-color: #000;
+  background-color: #26262a; // Variable
 
   &__image {
     width: 100%;
@@ -24,6 +24,13 @@
     object-fit: cover;
   }
 
+  picture#{&}__image img {
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+  }
+
   &__image-details {
     position: absolute;
     right: 1.25rem;
@@ -76,8 +83,10 @@
   }
 
   &__content {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+  }
+
+  &__content-inner {
+    padding: 2.5rem 1.5rem;
 
     background-color: #fff;
   }
@@ -95,6 +104,8 @@
     display: block;
 
     &__image {
+      height: 320px;
+
       position: static;
     }
 
@@ -118,6 +129,9 @@
     }
 
     &__content {
+    }
+
+    &__content-inner {
       color: #fff;
 
       background-color: inherit;
@@ -129,4 +143,10 @@
     &__body {
     }
   }
+
+  @include media.on-tiny {
+    &__image {
+      height: 240px;
+    }
+  }
 }

package/nationalarchives/components/hero/hero.stories.js

@@ -15,7 +15,7 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
@@ -54,7 +54,7 @@ Standard.play = async ({ args, canvasElement }) => {
   const image = canvas.getByAltText(args.image.alt);
   const title = canvas.getByText(args.heading);
   const summary = canvasElement.querySelector(
-    ".tna-hero__image-details-summary"
+    ".tna-hero__image-details-summary",
   );
   const information = canvas.getByText(args.image.information);
 

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

@@ -47,12 +47,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the card."
+    "description": "Classes to add to the hero."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the card."
+    "description": "HTML attributes (for example data attributes) to add to the hero."
   }
 ]

package/nationalarchives/components/hero/template.njk

@@ -1,30 +1,32 @@
 {%- set classes = [params.classes] if params.classes else [] -%}
 <header class="tna-hero {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image">
-    {%- if params.image.information -%}
-    <details class="tna-hero__image-details">
-        <summary class="tna-hero__image-details-summary">
-            <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
-        </summary>
-        <div class="tna-hero__image-information">
-            <p>{{ params.image.information }}</p>
-        </div>
-    </details>
-    {%- endif -%}
-    <div class="tna-container tna-hero__inner">
-        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
-            {%- if params.heading -%}
-            <h1 class="tna-heading tna-heading--xl tna-hero__heading">
-                {{ params.heading }}
-            </h1>
-            {%- endif -%}
-            <div class="tna-hero__body">
-            {%- if params.text -%}
-                <p>{{ params.text }}</p>
-            {%- elseif params.body -%}
-                {{ params.body | safe }}
-            {%- endif -%}
-            </div>
+  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image">
+  {%- if params.image.information -%}
+  <details class="tna-hero__image-details">
+    <summary class="tna-hero__image-details-summary">
+      <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
+    </summary>
+    <div class="tna-hero__image-information">
+      <p>{{ params.image.information }}</p>
+    </div>
+  </details>
+  {%- endif -%}
+  <div class="tna-container tna-hero__inner">
+    <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
+      <div class="tna-hero__content-inner">
+        {%- if params.heading -%}
+        <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+          {{ params.heading }}
+        </h1>
+        {%- endif -%}
+        <div class="tna-hero__body">
+        {%- if params.text -%}
+          <p>{{ params.text }}</p>
+        {%- elseif params.body -%}
+          {{ params.body | safe }}
+        {%- endif -%}
         </div>
+      </div>
     </div>
+  </div>
 </header>

package/nationalarchives/components/sensitive-image/fixtures.json

@@ -13,7 +13,7 @@
         "warning": "This is a gory photo",
         "action": "Show me the gory photo"
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
       "hidden": false
     },
     {
@@ -29,7 +29,7 @@
         "action": "Show me the gory photo",
         "classes": "sensitive-image__test-class"
       },
-      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
       "hidden": false
     },
     {
@@ -47,7 +47,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\">\n    <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n    <details class=\"tna-sensitive-image__details\">\n        <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n        <div class=\"tna-sensitive-image__container\">\n            <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n        </div>\n    </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/sensitive-image/macro-options.json

@@ -47,12 +47,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the card."
+    "description": "Classes to add to the sensitive image."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the card."
+    "description": "HTML attributes (for example data attributes) to add to the sensitive image."
   }
 ]

package/nationalarchives/components/sensitive-image/sensitive-image.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}e.r(t),e.d(t,{default:()=>o}),i.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},i.prototype.handleImageDetailsToggle=function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const o=i;return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e){return o="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},o(e)}function i(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,(void 0,r=function(e,t){if("object"!==o(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,"string");if("object"!==o(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(n.key),"symbol"===o(r)?r:String(r)),n)}var r}e.r(t),e.d(t,{SensitiveImage:()=>n});var n=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$imageDetails=t&&t.querySelector(".tna-sensitive-image__details"),this.$image=t&&t.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}var t,o;return t=e,(o=[{key:"init",value:function(){var e=this;this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",(function(){return e.handleImageDetailsToggle()}))}},{key:"handleImageDetailsToggle",value:function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})}}])&&i(t.prototype,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();return t})()));
 //# sourceMappingURL=sensitive-image.js.map

package/nationalarchives/components/sensitive-image/sensitive-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/sensitive-image/sensitive-image.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,8CAAgDC,IACtH,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,KCL9D,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,8BAEAN,EAAeN,UAAUa,KAAO,WAC9BC,QAAQC,IAAIP,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcO,iBACjB,SACAR,KAAKS,yBAAyBC,KAAKV,MAEvC,EAEAF,EAAeN,UAAUiB,yBAA2B,WAC9CT,KAAKC,cAAcU,aAAa,SAClCX,KAAKG,OAAOS,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,U","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/sensitive-image/sensitive-image.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/sensitive-image/sensitive-image\"] = 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};","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function () {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\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","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","init","console","log","addEventListener","handleImageDetailsToggle","bind","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}
+{"version":3,"file":"components/sensitive-image/sensitive-image.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,8CAAgDC,IACtH,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,6sBCLvD,IAAMC,EAAc,WACzB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,iCACnCF,KAAKG,OACHL,GAAWA,EAAQI,cAAc,+BACnCF,KAAKI,gBAAiB,CACxB,C,QAeC,O,EAfAP,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAAO,IAAAS,EAAA,KACAL,KAAKF,SAAYE,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcK,iBAAiB,UAAU,kBAC5CD,EAAKE,0BAA0B,GAEnC,GAAC,CAAAxB,IAAA,2BAAAa,MAED,WACMI,KAAKC,cAAcO,aAAa,SAClCR,KAAKG,OAAOM,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,M,oEAACd,CAAA,CAvBwB,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/sensitive-image/sensitive-image.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/sensitive-image/sensitive-image\"] = 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 SensitiveImage {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageDetails =\n      $module && $module.querySelector(\".tna-sensitive-image__details\");\n    this.$image =\n      $module && $module.querySelector(\".tna-sensitive-image__image\");\n    this.imageIsVisible = false;\n  }\n\n  init() {\n    if (!this.$module || !this.$imageDetails || !this.$image) {\n      return;\n    }\n    this.$imageDetails.addEventListener(\"toggle\", () =>\n      this.handleImageDetailsToggle(),\n    );\n  }\n\n  handleImageDetailsToggle() {\n    if (this.$imageDetails.hasAttribute(\"open\")) {\n      this.$image.focus({ preventScroll: true, focusVisible: true });\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","SensitiveImage","$module","_classCallCheck","this","$imageDetails","querySelector","$image","imageIsVisible","_this","addEventListener","handleImageDetailsToggle","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}

package/nationalarchives/components/sensitive-image/sensitive-image.mjs

@@ -1,26 +1,25 @@
-function SensitiveImage($module) {
-  this.$module = $module;
-  this.$imageDetails =
-    $module && $module.querySelector(".tna-sensitive-image__details");
-  this.$image = $module && $module.querySelector(".tna-sensitive-image__image");
-  this.imageIsVisible = false;
-}
-
-SensitiveImage.prototype.init = function () {
-  console.log(this);
-  if (!this.$module || !this.$imageDetails || !this.$image) {
-    return;
+export class SensitiveImage {
+  constructor($module) {
+    this.$module = $module;
+    this.$imageDetails =
+      $module && $module.querySelector(".tna-sensitive-image__details");
+    this.$image =
+      $module && $module.querySelector(".tna-sensitive-image__image");
+    this.imageIsVisible = false;
   }
-  this.$imageDetails.addEventListener(
-    "toggle",
-    this.handleImageDetailsToggle.bind(this)
-  );
-};
 
-SensitiveImage.prototype.handleImageDetailsToggle = function () {
-  if (this.$imageDetails.hasAttribute("open")) {
-    this.$image.focus({ preventScroll: true, focusVisible: true });
+  init() {
+    if (!this.$module || !this.$imageDetails || !this.$image) {
+      return;
+    }
+    this.$imageDetails.addEventListener("toggle", () =>
+      this.handleImageDetailsToggle(),
+    );
   }
-};
 
-export default SensitiveImage;
+  handleImageDetailsToggle() {
+    if (this.$imageDetails.hasAttribute("open")) {
+      this.$image.focus({ preventScroll: true, focusVisible: true });
+    }
+  }
+}

package/nationalarchives/components/sensitive-image/sensitive-image.stories.js

@@ -15,12 +15,12 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
 export default {
-  title: "Components/Sensitive image",
+  title: "Experimental/Sensitive image",
   argTypes,
 };
 

package/nationalarchives/components/sensitive-image/template.njk

@@ -1,10 +1,10 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-sensitive-image {{ containerClasses | join(' ') }}" data-module="tna-sensitive-image" style="--sensitive-image: url('{{ params.image.src }}'); --sensitive-image-width: {{ params.image.width }}; --sensitive-image-height: {{ params.image.height }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <p class="tna-sensitive-image__warning">{{ params.warning }}</p>
-    <details class="tna-sensitive-image__details">
-        <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
-        <div class="tna-sensitive-image__container">
-            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
-        </div>
-    </details>
+  <p class="tna-sensitive-image__warning">{{ params.warning }}</p>
+  <details class="tna-sensitive-image__details">
+    <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
+    <div class="tna-sensitive-image__container">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
+    </div>
+  </details>
 </div>

package/nationalarchives/lib/uuid.mjs

@@ -0,0 +1,9 @@
+const uuidv4 = () =>
+  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16),
+  );
+
+export default uuidv4;

package/nationalarchives/stories/development/publishing.mdx

@@ -15,3 +15,12 @@ import { Meta } from "@storybook/blocks";
 1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) using the tag you just created
 
 Once a release is created, the [publish pipeline](https://github.com/nationalarchives/tna-frontend/blob/main/.github/workflows/npm-publish.yml) will be triggered.
+
+## Oops!
+
+To delete a tag:
+
+```sh
+git tag -d v0.1.0
+git push --delete origin v0.1.0
+```