@nationalarchives/frontend 0.1.5-prerelease → 0.1.7-prerelease

package/nationalarchives/components/grid/_index.scss

@@ -1,84 +1,156 @@
 @use "sass:math";
+@use "../../variables/grid";
+@use "../../tools/media";
+@use "../../tools/grid" as tools;
+
+.tna-container {
+  max-width: grid.$largest-container-width;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: math.div(grid.$gutter-width, 2);
+  padding-left: math.div(grid.$gutter-width, 2);
+
+  box-sizing: border-box;
+
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  align-items: stretch;
+
+  &--no-padding,
+  &--no-padding-all {
+    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);
+  }
 
-@import "../../variables/all";
-@import "../../tools/grid";
+  &--max {
+    max-width: none;
+  }
+}
 
-@include nationalarchives-exports("nationalarchives/utilities/grid") {
-  .tna-container {
-    max-width: $largest-container-width;
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: math.div($gutter-width, 2);
-    padding-left: math.div($gutter-width, 2);
+.tna-column {
+  padding-right: math.div(grid.$gutter-width, 2);
+  padding-left: math.div(grid.$gutter-width, 2);
 
-    box-sizing: border-box;
+  box-sizing: border-box;
 
+  &--full {
+    width: 100%;
+  }
+
+  &--container {
     display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
     justify-content: stretch;
     align-items: stretch;
+  }
 
-    &.tna-container--max {
-      max-width: none;
+  @for $i from 1 through 3 {
+    &--flex-#{$i} {
+      flex: $i 0;
     }
+  }
+}
 
-    &.tna-container--no-padding {
-      max-width: $largest-container-width - ($gutter-width * 2);
-      padding-right: 0;
-      padding-left: 0;
+.tna-container--no-padding,
+.tna-container--no-padding-all,
+.tna-container--no-padding-all > .tna-column,
+.tna-column--no-padding,
+.tna-column--container--no-padding-all,
+.tna-column--container--no-padding-all > .tna-column {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+//   @for $i from 1 through 3 {
+//     .tna-column--order-#{$i} {
+//       order: $i;
+//     }
+//   }
+
+@include tools.columns-generator(grid.$column-count);
+
+@include media.on-medium {
+  .tna-column {
+    &--full-medium {
+      width: 100%;
+      flex: none;
+    }
 
-      .tna-column {
-        padding-right: 0;
-        padding-left: 0;
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-medium {
+        flex: $i 0;
       }
     }
+
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-medium {
+    //     order: $i;
+    //   }
+    // }
   }
 
-  .tna-column {
-    padding-right: math.div($gutter-width, 2);
-    padding-left: math.div($gutter-width, 2);
+  @include tools.columns-generator(grid.$column-count-medium, "-medium");
+}
 
-    box-sizing: border-box;
+@include media.on-mobile {
+  .tna-container {
+    padding-right: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
+    padding-left: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
+  }
+
+  .tna-column {
+    padding-right: math.div(grid.$gutter-width-mobile, 2);
+    padding-left: math.div(grid.$gutter-width-mobile, 2);
+  }
+}
 
-    &.tna-column--full {
+@include media.on-small {
+  .tna-column {
+    &--full-small {
       width: 100%;
+      flex: none;
     }
 
-    // &.column--no-padding {
-    //   padding-right: 0;
-    //   padding-left: 0;
-    // }
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i} {
-      flex: $i 0;
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-small {
+        flex: $i 0;
+      }
     }
+
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-small {
+    //     order: $i;
+    //   }
+    // }
   }
 
-  //   @for $i from 1 through 3 {
-  //     .column--order-#{$i} {
-  //       order: $i;
-  //     }
-  //   }
+  @include tools.columns-generator(grid.$column-count-small, "-small");
+}
 
-  @include columns-generator($column-count);
+@include media.on-tiny {
+  .tna-column {
+    &--full-tiny {
+      width: 100%;
+      flex: none;
+    }
 
-  @media #{$media-medium} {
-    @include grid-medium;
-  }
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-tiny {
+        width: auto;
 
-  @media #{$media-mobile} {
-    @include grid-mobile;
-  }
+        flex: $i 0;
+      }
+    }
 
-  @media #{$media-small} {
-    @include grid-small;
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-tiny {
+    //     order: $i;
+    //   }
+    // }
   }
 
-  @media #{$media-tiny} {
-    @include grid-tiny;
-  }
+  @include tools.columns-generator(grid.$column-count-tiny, "-tiny");
 }

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

@@ -1,15 +1,15 @@
 import Header from "./template.njk";
-import "../../all.scss";
-import "./_grid.scss";
+import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
   columns: { control: "object" },
   maxWidth: { control: "boolean" },
   noPadding: { control: "boolean" },
+  noPaddingAll: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
@@ -19,7 +19,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Utilities/Grid",
+  title: "Components/Grid",
   argTypes,
 };
 
@@ -27,6 +27,7 @@ const Template = ({
   columns,
   maxWidth,
   noPadding,
+  noPaddingAll,
   htmlElement,
   classes,
   attributes,
@@ -36,6 +37,7 @@ const Template = ({
       columns,
       maxWidth,
       noPadding,
+      noPaddingAll,
       htmlElement,
       classes,
       attributes,

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

@@ -81,7 +81,13 @@
   },
   {
     "name": "noPadding",
-    "type": "string",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "noPaddingAll",
+    "type": "boolean",
     "required": false,
     "description": ""
   },

package/nationalarchives/components/grid/template.njk

@@ -6,6 +6,9 @@
 {%- if params.noPadding -%}
     {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%}
 {%- endif -%}
+{%- if params.noPaddingAll -%}
+    {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%}
+{%- endif -%}
 <{{ htmlElement }} class="tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {%- for item in params.columns -%}
     {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}

package/nationalarchives/components/hero/_index.scss

@@ -0,0 +1,132 @@
+@use "../../tools/media";
+
+.tna-hero {
+  min-height: min(20vw, 300px);
+  padding-top: 5.25rem;
+  padding-bottom: 3.25rem;
+
+  display: -ms-flexbox;
+  display: flex;
+  align-items: end;
+
+  position: relative;
+
+  background-color: #000;
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    object-fit: cover;
+  }
+
+  &__image-details {
+    position: absolute;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 3;
+  }
+
+  &__image-details-summary {
+    width: 2rem;
+    height: 2rem;
+
+    position: relative;
+    z-index: 2;
+
+    font-size: 0;
+    text-align: center;
+    line-height: 2rem;
+    list-style: none;
+
+    background-color: #fc0;
+
+    border-radius: 1rem;
+
+    cursor: pointer;
+  }
+
+  &__image-details-summary-icon {
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 700;
+    text-transform: lowercase;
+  }
+
+  &__image-information {
+    width: 20rem;
+    max-width: 45vw;
+    padding: 0.5rem 1rem;
+
+    position: absolute;
+    right: 0;
+    bottom: 2.5rem;
+    z-index: 1;
+
+    background-color: #fc0;
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 2;
+  }
+
+  &__content {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+
+    background-color: #fff;
+  }
+
+  &__heading {
+    margin-bottom: 0;
+  }
+
+  &__body {
+  }
+
+  @include media.on-mobile {
+    padding: 0;
+
+    display: block;
+
+    &__image {
+      position: static;
+    }
+
+    &__image-details {
+      bottom: auto;
+      top: 1.25rem;
+    }
+
+    &__image-details-summary {
+    }
+
+    &__image-details-summary-icon {
+    }
+
+    &__image-information {
+      top: 2.5rem;
+      bottom: auto;
+    }
+
+    &__inner {
+    }
+
+    &__content {
+      color: #fff;
+
+      background-color: inherit;
+    }
+
+    &__heading {
+    }
+
+    &__body {
+    }
+  }
+}

package/nationalarchives/components/hero/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "hero",
+  "fixtures": []
+}

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

@@ -0,0 +1,74 @@
+import Hero from "./template.njk";
+import "./_index.scss";
+import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+
+const argTypes = {
+  heading: { control: "text" },
+  body: { control: "text" },
+  text: { control: "text" },
+  image: { control: "object" },
+  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/Hero",
+  argTypes,
+};
+
+const Template = ({ heading, body, text, image, classes, attributes }) => {
+  return Hero({
+    params: {
+      heading,
+      body,
+      text,
+      image,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  heading: "Title",
+  body: "<p>Body</p>",
+  image: {
+    src: "https://picsum.photos/id/29/640/360",
+    alt: "A placeholder image",
+    information: "Photo of some mountains by a famous photographer, ©2012",
+  },
+  classes: "tna-hero--demo",
+};
+
+Standard.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  const image = canvas.getByAltText(args.image.alt);
+  const title = canvas.getByText(args.heading);
+  const summary = canvasElement.querySelector(
+    ".tna-hero__image-details-summary"
+  );
+  const information = canvas.getByText(args.image.information);
+
+  await expect(image).toBeVisible();
+  await expect(title).toBeVisible();
+  await expect(summary).toBeVisible();
+  await expect(information).not.toBeVisible();
+
+  await userEvent.click(summary);
+  await expect(image).toBeVisible();
+  await expect(title).toBeVisible();
+  await expect(summary).toBeVisible();
+  await expect(information).toBeVisible();
+
+  await userEvent.click(summary);
+  await expect(information).not.toBeVisible();
+};

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

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "image",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "information",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the card."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the card."
+  }
+]

package/nationalarchives/components/hero/macro.njk

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

package/nationalarchives/components/hero/template.njk

@@ -0,0 +1,30 @@
+{%- 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>
+        </div>
+    </div>
+</header>

package/nationalarchives/components/sensitive-image/_index.scss

@@ -1,13 +1,10 @@
-@include nationalarchives-exports(
-  "nationalarchives/components/sensitive-image"
-) {
-  .tna-sensitive-image {
-  }
+@use "../../tools/typography" as typographyTools;
 
-  .tna-sensitive-image__warning {
+.tna-sensitive-image {
+  &__warning {
   }
 
-  .tna-sensitive-image__details {
+  &__details {
     position: relative;
 
     // overflow: hidden;
@@ -33,16 +30,13 @@
     }
   }
 
-  .tna-sensitive-image__show {
+  &__show {
     display: flex;
     align-items: center;
     justify-content: center;
 
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: 1;
 
     font-size: 0;
@@ -52,8 +46,7 @@
     &::after {
       padding: 0.5rem 2rem;
 
-      font-size: 1rem;
-
+      @include typographyTools.relative-font-size(16);
       background-color: #ff0;
 
       content: attr(data-action);
@@ -68,14 +61,14 @@
     }
   }
 
-  .tna-sensitive-image__container {
+  &__container {
   }
 
-  .tna-sensitive-image__image {
+  &__image {
     width: 100%;
   }
 
-  .tna-sensitive-image__details[open] {
+  &__details[open] {
     &::after,
     .tna-sensitive-image__show {
       display: none;

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(e){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,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})()));
 //# 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,SAAUE,GACxDX,KAAKC,cAAcW,aAAa,SAClCZ,KAAKG,OAAOU,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 (e) {\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","e","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,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":""}