@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/components/hero/template.njk

@@ -1,6 +1,6 @@
-{%- 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">
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<header class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image" width="{{ params.image.width }}" height="{{ params.image.height }}">
   {%- if params.image.information -%}
   <details class="tna-hero__image-details">
     <summary class="tna-hero__image-details-summary">
@@ -19,13 +19,15 @@
           {{ params.heading }}
         </h1>
         {%- endif -%}
-        <div class="tna-hero__body">
         {%- if params.text -%}
+        <div class="tna-hero__body">
           <p>{{ params.text }}</p>
+        </div>
         {%- elseif params.body -%}
+        <div class="tna-hero__body">
           {{ params.body | safe }}
-        {%- endif -%}
         </div>
+        {%- endif -%}
       </div>
     </div>
   </div>

package/nationalarchives/components/phase-banner/_index.scss

@@ -0,0 +1,60 @@
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/typography";
+
+.tna-phase-banner {
+  @include colour.fixed;
+
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+
+  background-color: #d9d9d6;
+
+  .tna-container {
+    align-items: center;
+    flex-wrap: nowrap;
+
+    // @include media.on-tiny {
+    //   flex-wrap: wrap;
+    // }
+  }
+
+  &__phase {
+    margin: 0.25rem 0;
+    padding: 0 0.5rem;
+
+    display: block;
+
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.5;
+
+    background-color: #fff;
+  }
+
+  &__message {
+    margin: 0.25rem 0;
+
+    // @include typography.relative-font-size(14);
+
+    a {
+      color: inherit;
+    }
+  }
+
+  &--discovery {
+    background-color: #fad3d4;
+  }
+
+  &--alpha {
+    background-color: #f9e1bc;
+  }
+
+  &--beta {
+    background-color: #f9f7e2;
+  }
+
+  &--live {
+    background-color: #dde5d5;
+  }
+}

package/nationalarchives/components/phase-banner/fixtures.json

@@ -0,0 +1,81 @@
+{
+  "component": "phase-banner",
+  "fixtures": [
+    {
+      "name": "discovery",
+      "options": {
+        "phase": "discovery",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--discovery\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Discovery</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "alpha",
+      "options": {
+        "phase": "alpha",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--alpha\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Alpha</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "beta",
+      "options": {
+        "phase": "beta",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "live",
+      "options": {
+        "phase": "live",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "capital letters",
+      "options": {
+        "phase": "BETA",
+        "message": "Message"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "unknown phase",
+      "options": {
+        "phase": "unknown",
+        "message": "Message"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--unknown\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Unknown</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "phase": "live",
+        "message": "Message",
+        "classes": "tna-phase-banner--fixture"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--fixture tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "phase": "live",
+        "message": "Message",
+        "attributes": {
+          "data-fixturetest": "pass"
+        }
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\" data-fixturetest=\"pass\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/phase-banner/macro-options.json

@@ -0,0 +1,26 @@
+[
+  {
+    "name": "phase",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "message",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the phase banner."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the phase banner."
+  }
+]

package/nationalarchives/components/phase-banner/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaPhaseBanner(params) %}
+  {%- include "nationalarchives/components/phase-banner/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/phase-banner/phase-banner.stories.js

@@ -0,0 +1,64 @@
+import PhaseBanner from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  phase: {
+    control: "radio",
+    options: ["discovery", "alpha", "beta", "live"],
+  },
+  message: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Work in progress/Components/Phase banner",
+  argTypes,
+};
+
+const Template = ({ phase, message, classes, attributes }) => {
+  return PhaseBanner({
+    params: {
+      phase,
+      message,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Discovery = Template.bind({});
+Discovery.args = {
+  phase: "discovery",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Alpha = Template.bind({});
+Alpha.args = {
+  phase: "alpha",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Beta = Template.bind({});
+Beta.args = {
+  phase: "beta",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Live = Template.bind({});
+Live.args = {
+  phase: "live",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Unknown = Template.bind({});
+Unknown.args = {
+  phase: "unknown",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};

package/nationalarchives/components/phase-banner/template.njk

@@ -0,0 +1,16 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = containerClasses.concat('tna-phase-banner--' + params.phase | lower) -%}
+<div class="tna-phase-banner {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-container">
+    <div class="tna-column">
+      <span class="tna-phase-banner__phase">
+        {{ params.phase | capitalize }}
+      </span>
+    </div>
+    <div class="tna-column">
+      <p class="tna-phase-banner__message">
+        {{ params.message | safe }}
+      </p>
+    </div>
+  </div>
+</div>

package/nationalarchives/components/picture/_index.scss

@@ -0,0 +1,77 @@
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../tools/colour";
+
+.tna-picture {
+  margin: 0 0 1rem;
+  padding: 0;
+
+  &__image-wrapper {
+    // padding: 1rem 0;
+
+    position: relative;
+
+    background-color: #f4f4f4;
+  }
+
+  &__image {
+    height: auto;
+    margin: 0 auto;
+  }
+
+  &__toggle-transcript {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  &__transcript {
+    // @include colour.invert;
+    @extend %tna-invert;
+
+    padding: 1rem 1.5rem 0.5rem;
+
+    .tna-template--clicked &:focus {
+      outline: none;
+    }
+
+    .tna-tabs__list-item-link {
+      @include colour.colour-font("font-dark", true);
+
+      &::after {
+        @include colour.colour-background("keyline-dark", true);
+      }
+
+      .tna-template--js-enabled & {
+        @include colour.colour-font("font-light", true);
+
+        &--selected {
+          @include colour.colour-font("font-dark", true);
+        }
+      }
+    }
+  }
+
+  &__caption {
+    padding: 1rem 0;
+
+    // position: relative;
+
+    text-align: center;
+
+    border-bottom: 1px solid;
+    @include colour.colour-border("keyline");
+
+    // &::after {
+    //   height: 1px;
+
+    //   position: absolute;
+    //   right: 20%;
+    //   bottom: 0;
+    //   left: 20%;
+
+    //   @include colour.colour-background("keyline");
+
+    //   content: "";
+    // }
+  }
+}

package/nationalarchives/components/picture/fixtures.json

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

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

@@ -0,0 +1,88 @@
+[
+  {
+    "name": "src",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "alt",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "width",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "height",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "sources",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "media",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "src",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "caption",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "transcript",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "translation",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the phase banner."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the phase banner."
+  }
+]

package/nationalarchives/components/picture/macro.njk

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

package/nationalarchives/components/picture/picture.js

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

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

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

package/nationalarchives/components/picture/picture.mjs

@@ -0,0 +1,57 @@
+import uuidv4 from "../../lib/uuid.mjs";
+
+export class Picture {
+  constructor($module) {
+    this.$module = $module;
+    this.$imageWrapper =
+      $module && $module.querySelector(".tna-picture__image-wrapper");
+    this.$transcript =
+      $module && $module.querySelector(".tna-picture__transcript");
+    this.transcriptOpened = false;
+  }
+
+  init() {
+    if (!this.$module || !this.$imageWrapper || !this.$transcript) {
+      return;
+    }
+
+    const uniqueId = `tna-picture-${uuidv4()}`;
+
+    this.$transcriptToggle = document.createElement("button");
+    this.$transcriptToggle.classList.add(
+      "tna-picture__toggle-transcript",
+      "tna-button",
+    );
+    this.$transcriptToggle.setAttribute("aria-controls", uniqueId);
+    this.$transcriptToggle.setAttribute("aria-expanded", false);
+    this.$transcriptToggle.innerText = "Open transcript";
+    this.$transcriptToggle.addEventListener("click", () =>
+      this.handleToggleTranscript(),
+    );
+    this.$imageWrapper.appendChild(this.$transcriptToggle);
+
+    this.$transcript.setAttribute("id", uniqueId);
+    this.$transcript.setAttribute("hidden", true);
+    // this.$transcript.setAttribute("tabindex", "-1");
+  }
+
+  handleToggleTranscript() {
+    const transcriptToggleOpenedClass =
+      "tna-picture__toggle-transcript--opened";
+    this.transcriptOpened = !this.transcriptOpened;
+    if (this.transcriptOpened) {
+      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);
+      this.$transcriptToggle.setAttribute("aria-expanded", true);
+      this.$transcriptToggle.innerText = "Close transcript";
+      this.$transcript.removeAttribute("hidden");
+      // this.$transcript.setAttribute("tabindex", "0");
+      // this.$transcript.focus();
+    } else {
+      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);
+      this.$transcriptToggle.setAttribute("aria-expanded", false);
+      this.$transcriptToggle.innerText = "Open transcript";
+      this.$transcript.setAttribute("hidden", true);
+      // this.$transcript.setAttribute("tabindex", "-1");
+    }
+  }
+}

package/nationalarchives/components/picture/picture.stories.js

@@ -0,0 +1,63 @@
+import Picture from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  src: { control: "text" },
+  width: { control: "number" },
+  height: { control: "number" },
+  sources: { control: "object" },
+  caption: { control: "text" },
+  transcript: { control: "text" },
+  translation: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Work in progress/Components/Picture",
+  argTypes,
+};
+
+const Template = ({
+  src,
+  width,
+  height,
+  sources,
+  caption,
+  transcript,
+  translation,
+  classes,
+  attributes,
+}) => {
+  return Picture({
+    params: {
+      src,
+      width,
+      height,
+      sources,
+      caption,
+      transcript,
+      translation,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  alt: "The National Archives office",
+  width: 1996,
+  height: 1331,
+  caption: "<p>This is a pretty image</p>",
+  transcript: "<p>Lorem ipsum transcript</p>",
+  translation: "<p>Lorem ipsum translation</p>",
+  classes: "tna-picture--demo",
+};

package/nationalarchives/components/picture/template.njk

@@ -0,0 +1,42 @@
+{% from "nationalarchives/components/tabs/macro.njk" import tnaTabs %}
+
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<figure class="tna-picture {{ containerClasses | join(' ') }}" data-module="tna-picture" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-picture__image-wrapper">
+    <picture>
+    {%- for source in params.sources -%}
+      <source class="tna-picture__image" media="{{ source.media }}" srcset="{{ source.src }}" width="{{ source.width }}" height="{{ source.height }}">
+    {%- endfor -%}
+      <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}">
+    </picture>
+  </div>
+{%- if params.transcript or params.translation -%}
+  <div class="tna-picture__transcript">
+  {%- if params.transcript and params.translation -%}
+    {{ tnaTabs({
+      items: [
+        {
+          id: "test1",
+          title: "Transcript",
+          body: params.transcript
+        },
+        {
+          id: "test2",
+          title: "English translation",
+          body: params.translation
+        }
+      ]
+    }) }}
+  {%- elseif params.transcript -%}
+    {{ params.transcript | safe }}
+  {%- else -%}
+    {{ params.translation | safe }}
+  {%- endif -%}
+  </div>
+{%- endif -%}
+{%- if params.caption -%}
+  <figcaption class="tna-picture__caption">
+      {{ params.caption | safe }}
+  </figcaption>
+{%- endif -%}
+</figure>

package/nationalarchives/components/profile/_index.scss

@@ -0,0 +1,2 @@
+.tna-profile {
+}

package/nationalarchives/components/profile/fixtures.json

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