@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

package/nationalarchives/components/header/_index.scss

@@ -5,10 +5,49 @@
 @use "../../tools/typography";
 @use "../../tools/media";
 
+// TODO: Only for the header component at the moment - remove on redesign
+@mixin uninvert {
+  @include colour.colour-css-vars;
+
+  .tna-template--system-theme & {
+    @include colour.colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour.colour-css-vars-high-contrast;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour.colour-css-vars;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour.colour-css-vars-dark;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour.colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour.colour-css-vars-high-contrast-dark;
+  }
+}
+
 .tna-header {
   @include colour.invert;
 
-  background-color: colourVars.$tna-black;
+  color: colour.brand-colour("white");
+
+  background-color: colour.brand-colour("black");
 
   &__exit {
     padding-top: 0.5rem;
@@ -262,7 +301,7 @@
   &--orange,
   &--green,
   &--blue {
-    color: colourVars.$tna-black;
+    color: colour.brand-colour("black");
 
     .tna-header__logo-link {
       &:hover {
@@ -277,28 +316,28 @@
     }
 
     .tna-header__hamburger {
-      background-color: colourVars.$tna-black;
+      background-color: colour.brand-colour("black");
     }
   }
 
   &--yellow {
-    background-color: colourVars.$tna-yellow;
+    background-color: colour.brand-colour("yellow");
   }
 
   &--pink {
-    background-color: colourVars.$tna-pink;
+    background-color: colour.brand-colour("pink");
   }
 
   &--orange {
-    background-color: colourVars.$tna-orange;
+    background-color: colour.brand-colour("orange");
   }
 
   &--green {
-    background-color: colourVars.$tna-green;
+    background-color: colour.brand-colour("green");
   }
 
   &--blue {
-    background-color: colourVars.$tna-blue;
+    background-color: colour.brand-colour("blue");
   }
 
   &__navigation {
@@ -342,8 +381,7 @@
       &,
       &:link,
       &:visited {
-        text-decoration: underline;
-        text-decoration-thickness: 3px;
+        @include typography.interacted-text-decoration;
       }
     }
   }
@@ -389,7 +427,7 @@
       &,
       &:link,
       &:visited {
-        @include colour.uninvert;
+        @include uninvert;
         @include colour.colour-font("font-dark");
         @include colour.colour-background("page-background");
       }
@@ -406,8 +444,6 @@
   }
 
   @include media.on-mobile {
-    $compensated-container-padding: grid.$gutter-width-mobile + 0.75rem;
-
     &__contents {
       &.tna-container {
         padding-right: 0;
@@ -420,8 +456,8 @@
       padding-bottom: 1rem;
 
       &.tna-column {
-        padding-right: $compensated-container-padding;
-        padding-left: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
+        padding-left: grid.$gutter-width-mobile;
       }
     }
 
@@ -436,13 +472,13 @@
 
     &__navigation-toggle {
       &.tna-column {
-        padding-right: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
         padding-left: 0;
       }
     }
 
     &__navigation {
-      @include colour.uninvert;
+      @include uninvert;
       @include colour.colour-font("font-base");
       @include typography.relative-font-size(20);
 
@@ -470,8 +506,7 @@
 
       @include colour.colour-background("page-background");
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__top-navigation-item {
@@ -493,13 +528,12 @@
 
       display: block;
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__navigation-item-link {
-      padding-right: $compensated-container-padding;
-      padding-left: $compensated-container-padding;
+      padding-right: grid.$gutter-width-mobile;
+      padding-left: grid.$gutter-width-mobile + 1rem;
 
       display: block;
 

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

@@ -39,8 +39,8 @@ const Template = ({
   exit,
   classes,
   attributes,
-}) => {
-  return Header({
+}) =>
+  Header({
     params: {
       logo,
       topNavigation,
@@ -51,7 +51,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/hero/_index.scss

@@ -3,7 +3,7 @@
 
 .tna-hero {
   min-height: min(35vw, 480px);
-  margin-bottom: 2rem;
+  // margin-bottom: 2rem;
   padding-top: 5rem;
   padding-bottom: 3rem;
 
@@ -12,6 +12,8 @@
 
   position: relative;
 
+  @include colour.invert-on-mobile;
+
   &__image {
     width: 100%;
     height: 100%;
@@ -105,8 +107,6 @@
 
     display: block;
 
-    @include colour.invert;
-
     &__image {
       height: 320px;
 
@@ -142,13 +142,10 @@
     }
 
     &__heading {
-      color: inherit;
     }
 
     &__body {
       margin-top: 1rem;
-
-      color: inherit;
     }
   }
 
@@ -160,8 +157,7 @@
 
   @include colour.on-high-contrast {
     &__content-inner {
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
 
       @include media.on-mobile {
         border: none;

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

@@ -23,8 +23,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ heading, body, text, image, classes, attributes }) => {
-  return Hero({
+const Template = ({ heading, body, text, image, classes, attributes }) =>
+  Hero({
     params: {
       heading,
       body,
@@ -34,7 +34,6 @@ const Template = ({ heading, body, text, image, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/index-grid/_index.scss

@@ -1,40 +1,52 @@
 @use "sass:math";
 @use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/typography";
 
 .tna-index-grid {
   &__heading {
   }
 
   &__items {
-    margin-top: 1rem;
+    margin-bottom: 0;
+    padding-top: 2rem;
 
     list-style: none;
   }
 
   &__item-wrapper {
     margin-bottom: 2rem;
+
+    @include media.on-mobile {
+      margin-bottom: 1rem;
+    }
   }
 
   &__item {
+    @include colour.invert;
+
+    // @include colour.colour-font("contrast-font-base");
+
     height: 100%;
 
     display: flex;
     flex-direction: column;
 
-    @include colour.invert;
+    position: relative;
+
     text-decoration: none;
 
     @include colour.on-high-contrast {
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
     }
   }
 
   &__item-image {
     width: 100%;
-    height: #{math.div(2, 3) * 100%};
+    // height: #{math.div(2, 3) * 100%};
+    height: auto;
 
-    object-fit: cover;
+    // object-fit: cover;
   }
 
   &__item-content {
@@ -43,19 +55,28 @@
     flex: 1;
   }
 
+  &__item-label {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
+
   &__item-title {
+    // @include typography.heading-font;
     text-decoration: underline;
+    // @include typography.relative-font-size(20);
 
     .tna-index-grid__item:hover & {
       &,
       &:link,
       &:visited {
-        text-decoration-thickness: 3px;
+        @include typography.interacted-text-decoration;
       }
     }
   }
 
   &__item-subtitle {
     @include colour.colour-font("font-light");
+    @include typography.relative-font-size(16);
   }
 }

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

@@ -32,8 +32,8 @@ const Template = ({
   columnsTiny,
   classes,
   attributes,
-}) => {
-  return IndexGrid({
+}) =>
+  IndexGrid({
     params: {
       heading,
       items,
@@ -45,7 +45,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 const exampleItem = {
   href: "#",
@@ -54,13 +53,14 @@ const exampleItem = {
   width: "800",
   height: "600",
   title: "Cat",
-  subtitle: "4 photos",
 };
+
 export const Standard = Template.bind({});
 Standard.args = {
   heading: {
     title: "My dogs",
     level: 2,
+    href: "#",
   },
   items: Array(12)
     .fill({ ...exampleItem })
@@ -69,6 +69,7 @@ Standard.args = {
       return {
         ...item,
         href: `#/category-${index}`,
+        label: "Time period",
         title: `Category #${index + 101}`,
         subtitle: `${pseudoRandom} photos`,
       };
@@ -79,3 +80,25 @@ Standard.args = {
   columnsTiny: 1,
   classes: "tna-index-grid--demo",
 };
+
+export const Basic = Template.bind({});
+Basic.args = {
+  heading: {
+    title: "My dogs",
+  },
+  items: Array(6)
+    .fill({ ...exampleItem })
+    .map((item, index) => {
+      const pseudoRandom = ((index * 29) % 8) + 1;
+      return {
+        ...item,
+        href: `#/category-${index}`,
+        title: `Category #${index + 101}`,
+      };
+    }),
+  columns: 3,
+  columnsMedium: 3,
+  columnsSmall: 2,
+  columnsTiny: 1,
+  classes: "tna-index-grid--demo",
+};

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

@@ -22,6 +22,12 @@
         "type": "text",
         "required": false,
         "description": ""
+      },
+      {
+        "name": "href",
+        "type": "text",
+        "required": false,
+        "description": ""
       }
     ]
   },
@@ -61,6 +67,12 @@
         "required": true,
         "description": ""
       },
+      {
+        "name": "label",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "title",
         "type": "string",

package/nationalarchives/components/index-grid/template.njk

@@ -1,25 +1,23 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading.title }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column tna-column--full">
-      {%- set headingSize = 'l' -%}
-      {%- if params.heading.size -%}
-        {%- set headingSize = params.heading.size -%}
-      {%- endif -%}
-      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ headingSize }} tna-index-grid__heading">
+      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ params.heading.size or 'l' }} tna-index-grid__heading">
+        {%- if params.heading.href -%}
+        <a href="{{ params.heading.href }}">{{ params.heading.title }}</a>
+        {%- else -%}
         {{ params.heading.title }}
+        {%- endif -%}
       </h{{ params.heading.level }}>
     </div>
   </div>
   <ul class="tna-index-grid__items tna-container">
     {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
-
     {%- if params.columns == 1 -%}
       {%- set itemClasses = itemClasses.concat('tna-column--full') -%}
     {%- else -%}
       {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columns) -%}
     {%- endif -%}
-
     {%- if params.columnsMedium -%}
       {%- if params.columnsMedium == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-medium') -%}
@@ -27,7 +25,6 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsMedium + '-medium') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- if params.columnsSmall -%}
       {%- if params.columnsSmall == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-small') -%}
@@ -35,7 +32,6 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsSmall + '-small') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- if params.columnsTiny -%}
       {%- if params.columnsTiny == 1 -%}
         {%- set itemClasses = itemClasses.concat('tna-column--full-tiny') -%}
@@ -43,13 +39,15 @@
         {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsTiny + '-tiny') -%}
       {%- endif -%}
     {%- endif -%}
-
     {%- for item in params.items -%}
     <li class="{{ itemClasses | join(' ') }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
         <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
+          {%- if item.label -%}
+          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-visually-hidden">:</span></span>
+          {%- endif -%}
           {%- if item.subtitle -%}
           <br>
           <span class="tna-index-grid__item-subtitle">{{ item.subtitle }}</span>

package/nationalarchives/components/message/_index.scss

@@ -1,5 +1,5 @@
-@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
+@use "../../tools/media";
 
 .tna-message {
   padding: 1rem;
@@ -7,23 +7,29 @@
   display: flex;
   align-items: center;
 
-  color: colourVars.$tna-black;
+  color: colour.brand-colour("black");
 
   @include colour.colour-background("keyline");
 
-  border-left: 0.5rem transparent solid;
-  @include colour.colour-border("keyline-dark");
+  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
 
   // &--yellow {
-  background-color: colourVars.$tna-cream;
+  background-color: colour.brand-colour("cream");
 
-  border-left-color: colourVars.$tna-yellow;
+  border-left-color: colour.brand-colour("yellow");
   // }
 
   &__icon {
     margin-right: 1rem;
+
+    flex: 0 0 2.5rem;
+
+    @include media.on-mobile {
+      flex: 0 0 1.5rem;
+    }
   }
 
   &__message {
+    flex: 1;
   }
 }

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

@@ -18,15 +18,14 @@ export default {
   argTypes,
 };
 
-const Template = ({ message, classes, attributes }) => {
-  return Message({
+const Template = ({ message, classes, attributes }) =>
+  Message({
     params: {
       message,
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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

@@ -22,8 +22,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ phase, message, classes, attributes }) => {
-  return PhaseBanner({
+const Template = ({ phase, message, classes, attributes }) =>
+  PhaseBanner({
     params: {
       phase,
       message,
@@ -31,7 +31,6 @@ const Template = ({ phase, message, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Discovery = Template.bind({});
 Discovery.args = {

package/nationalarchives/components/picture/_index.scss

@@ -34,6 +34,8 @@
 
     padding: 1rem 1.5rem;
 
+    // @include colour.colour-font("font-base");
+
     .tna-template--clicked &:focus {
       outline: none;
     }
@@ -50,13 +52,11 @@
 
     text-align: center;
 
-    border-bottom: 1px solid;
-    @include colour.colour-border("keyline");
+    @include colour.colour-border("keyline", 1px, solid, bottom);
   }
 
   @include colour.on-high-contrast {
-    border-width: 1px 1px 0;
-    @include colour.colour-border("keyline-dark");
-    border-style: solid;
+    @include colour.colour-border("keyline-dark", 1px);
+    border-bottom-width: 0;
   }
 }

package/nationalarchives/components/picture/picture.js

@@ -1,2 +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})()));
+!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","tna-button--accent","tna-button--solid-hover"),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