npm - @nationalarchives/frontend - Versions diffs - 0.39.0 → 0.40.0 - Mend

@nationalarchives/frontend 0.39.0 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/nationalarchives/all.mjs CHANGED Viewed

@@ -14,8 +14,11 @@ import { Tabs } from "./components/tabs/tabs.mjs";
 import { TextInputPassword } from "./components/text-input/text-input.mjs";
 import { TextAreaItemisedRows } from "./components/textarea/textarea.mjs";
 import Cookies from "./lib/cookies.mjs";
-import { checkTableForScroll } from "./lib/tables.mjs";
-import { updateTimeElement } from "./lib/helpers.mjs";
+import {
+  updateTimeElement,
+  initCodeBlock,
+  checkTableForScroll,
+} from "./lib/helpers.mjs";
 const initAll = (options) => {
   options = typeof options !== "undefined" ? options : {};
@@ -61,6 +64,18 @@ const initAll = (options) => {
     );
   });
+  /*
+   * ==========================================
+   * Add "Copy code" buttons to all code blocks
+   * and enable copying the code to clipboard
+   * ==========================================
+   */
+  document
+    .querySelectorAll(".tna-code-block:has(pre > code)")
+    .forEach(($codeBlock) => {
+      initCodeBlock($codeBlock);
+    });
   // TODO: Remove this opt-in class in a later release
   if ($html.classList.contains("tna-template--enhance-time-elements")) {
     document.querySelectorAll("time[datetime]").forEach(updateTimeElement);

package/nationalarchives/code-block.css ADDED Viewed

@@ -0,0 +1 @@

+ .tna-code-block:has(.tna-code-block__copy)::after,.tna-code-block[title]::after{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}pre[class*=language-]:focus:not(:focus-visible){outline:none !important;box-shadow:none !important}.tna-code-block{margin-top:2rem}.tna-code-block:first-child{margin-top:0}code[class*=language-],pre[class*=language-]{color:#393a34;text-align:left;direction:ltr;word-break:normal;white-space:pre;word-spacing:normal;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre[class*=language-]{overflow:auto;background-color:#f5f2f0}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6e6e5e}.token.namespace{opacity:.7}.token.string,.token.attr-value{color:#be0e5a}.token.punctuation,.token.operator{color:#393a34}.token.entity,.token.url,.token.symbol,.token.number,.token.boolean,.token.variable,.token.constant,.token.property,.token.regex,.token.inserted{color:#247a78}.token.atrule,.token.keyword,.token.attr-name{color:#00759d}.token.tag,.token.selector{color:#00009f}.token.function,.token.deleted{color:#9a050f}.token.important,.token.function,.token.bold{font-weight:bold}.token.italic{font-style:italic}.tna-template--dark-theme code[class*=language-],.tna-template--dark-theme pre[class*=language-]{color:#f8f8f2}.tna-template--dark-theme pre[class*=language-]{background:#2b2b2b}.tna-template--dark-theme .token.comment,.tna-template--dark-theme .token.prolog,.tna-template--dark-theme .token.doctype,.tna-template--dark-theme .token.cdata{color:#d4d0ab}.tna-template--dark-theme .token.punctuation{color:#fefefe}.tna-template--dark-theme .token.property,.tna-template--dark-theme .token.tag,.tna-template--dark-theme .token.constant,.tna-template--dark-theme .token.symbol,.tna-template--dark-theme .token.deleted{color:#ffa07a}.tna-template--dark-theme .token.boolean,.tna-template--dark-theme .token.number{color:#00e0e0}.tna-template--dark-theme .token.selector,.tna-template--dark-theme .token.attr-name,.tna-template--dark-theme .token.string,.tna-template--dark-theme .token.char,.tna-template--dark-theme .token.builtin,.tna-template--dark-theme .token.inserted{color:#abe338}.tna-template--dark-theme .token.operator,.tna-template--dark-theme .token.entity,.tna-template--dark-theme .token.url,.tna-template--dark-theme .language-css .token.string,.tna-template--dark-theme .style .token.string,.tna-template--dark-theme .token.variable{color:#00e0e0}.tna-template--dark-theme .token.atrule,.tna-template--dark-theme .token.attr-value,.tna-template--dark-theme .token.function{color:gold}.tna-template--dark-theme .token.keyword{color:#00e0e0}.tna-template--dark-theme .token.regex,.tna-template--dark-theme .token.important{color:gold}@media(prefers-color-scheme: dark){.tna-template--system-theme code[class*=language-],.tna-template--system-theme pre[class*=language-]{color:#f8f8f2}.tna-template--system-theme pre[class*=language-]{background:#2b2b2b}.tna-template--system-theme .token.comment,.tna-template--system-theme .token.prolog,.tna-template--system-theme .token.doctype,.tna-template--system-theme .token.cdata{color:#d4d0ab}.tna-template--system-theme .token.punctuation{color:#fefefe}.tna-template--system-theme .token.property,.tna-template--system-theme .token.tag,.tna-template--system-theme .token.constant,.tna-template--system-theme .token.symbol,.tna-template--system-theme .token.deleted{color:#ffa07a}.tna-template--system-theme .token.boolean,.tna-template--system-theme .token.number{color:#00e0e0}.tna-template--system-theme .token.selector,.tna-template--system-theme .token.attr-name,.tna-template--system-theme .token.string,.tna-template--system-theme .token.char,.tna-template--system-theme .token.builtin,.tna-template--system-theme .token.inserted{color:#abe338}.tna-template--system-theme .token.operator,.tna-template--system-theme .token.entity,.tna-template--system-theme .token.url,.tna-template--system-theme .language-css .token.string,.tna-template--system-theme .style .token.string,.tna-template--system-theme .token.variable{color:#00e0e0}.tna-template--system-theme .token.atrule,.tna-template--system-theme .token.attr-value,.tna-template--system-theme .token.function{color:gold}.tna-template--system-theme .token.keyword{color:#00e0e0}.tna-template--system-theme .token.regex,.tna-template--system-theme .token.important{color:gold}}.tna-code-block{position:relative;font-size:1rem;line-height:1.5;border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid;border-radius:2px}.tna-code-block__pre{padding:1rem;overflow:auto;position:relative;border-radius:.1px}.tna-code-block__pre code[class*=language-]{background:rgba(0,0,0,0);border:none}.tna-code-block:has(.tna-code-block__copy),.tna-code-block[title]{padding-top:2rem}.tna-code-block:has(.tna-code-block__copy)::after,.tna-code-block[title]::after{content:"";height:2rem;position:absolute;top:0;right:0;left:0;z-index:1}@media(forced-colors: active){.tna-code-block:has(.tna-code-block__copy)::after,.tna-code-block[title]::after{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-code-block:has(.tna-code-block__copy)::after,.tna-code-block[title]::after{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}.tna-code-block[title]::before{content:attr(title);margin-top:0;padding:0 7rem 0 1rem;display:block;overflow:hidden;position:absolute;top:0;right:0;left:0;z-index:2;font-family:Consolas,Monaco,"Ubuntu Mono",monospace;line-height:2rem;text-overflow:ellipsis;text-wrap:nowrap;pointer-events:none}.tna-code-block__copy{position:absolute;top:0;right:0;z-index:3}/*# sourceMappingURL=code-block.css.map */

package/nationalarchives/code-block.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_colour.scss","../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/tools/_spacing.scss","../../src/nationalarchives/code-block.scss","../../src/nationalarchives/tools/_typography.scss","../../src/nationalarchives/tools/_borders.scss","../../src/nationalarchives/variables/_borders.scss","../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAiUA,gFACE,qCAtOA,4CC4CA,gDA9EA,wBAEA,2BClCF,gBACE,gBAUA,4BACE,aC7BJ,6CAEE,cACA,gBACA,cACA,kBACA,gBACA,oBAEA,qBACA,kBACA,iBACA,aAEA,gBACA,cACA,WAGF,sBACE,cAEA,yBAKF,yDAIE,cAGF,iBACE,WAGF,gCAEE,cAGF,mCAEE,cAGF,iJAUE,cAGF,8CAGE,cAGF,2BAEE,cAGF,+BAEE,cAGF,6CAGE,iBAGF,cACE,kBAIA,iGAEE,cAGF,gDACE,mBAGF,iKAIE,cAGF,6CACE,cAGF,0MAKE,cAGF,iFAEE,cAGF,sPAME,cAGF,sQAME,cAGF,8HAGE,WAGF,yCACE,cAGF,kFAEE,WASF,mCAxEA,qGAEE,cAGF,kDACE,mBAGF,yKAIE,cAGF,+CACE,cAGF,oNAKE,cAGF,qFAEE,cAGF,kQAME,cAGF,kRAME,cAGF,oIAGE,WAGF,2CACE,cAGF,sFAEE,YAcJ,gBAGE,kBC3KA,eD8KA,gBH5DI,wDKrHJ,cCDsB,IHuLtB,qBACE,aAEA,cAEA,kBAEA,mBAEA,4CACE,yBAEA,YAIJ,kEAEE,YApMwB,KAsMxB,gFACE,WAEA,OAzMsB,KA2MtB,kBACA,MACA,QACA,OACA,UHiUJ,8BG1UE,gFH/FE,gEAmaJ,+BGpUE,gFH/FE,gEGmHF,+BACE,oBAEA,aAEA,sBAEA,cACA,gBAEA,kBACA,MACA,QACA,OACA,UAEA,YI1Ia,wCJ2Ib,YA3OsB,KA4OtB,uBACA,iBAEA,oBAIJ,sBACE,kBACA,MACA,QACA","file":"code-block.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n // @include colour-css-vars-high-contrast(\n // \"form-error-border\",\n // \"focus-outline\"\n // );\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n // @return #{$size * spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"variables/typography\" as typographyVars;\n@use \"tools/a11y\";\n@use \"tools/borders\";\n@use \"tools/colour\";\n@use \"tools/spacing\";\n@use \"tools/typography\";\n\n$code-block-top-bar-height: spacing.space(2);\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n color: #393a34;\n text-align: left;\n direction: ltr;\n word-break: normal;\n white-space: pre;\n word-spacing: normal;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n}\n\npre[class*=\"language-\"] {\n overflow: auto;\n\n background-color: #f5f2f0;\n\n @include a11y.focus-indicator-only-on-keyboard-focus;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n color: #6e6e5e;\n}\n\n.token.namespace {\n opacity: 0.7;\n}\n\n.token.string,\n.token.attr-value {\n color: #be0e5a;\n}\n\n.token.punctuation,\n.token.operator {\n color: #393a34; /* no highlight */\n}\n\n.token.entity,\n.token.url,\n.token.symbol,\n.token.number,\n.token.boolean,\n.token.variable,\n.token.constant,\n.token.property,\n.token.regex,\n.token.inserted {\n color: #247a78;\n}\n\n.token.atrule,\n.token.keyword,\n.token.attr-name {\n color: #00759d;\n}\n\n.token.tag,\n.token.selector {\n color: #00009f;\n}\n\n.token.function,\n.token.deleted {\n color: #9a050f;\n}\n\n.token.important,\n.token.function,\n.token.bold {\n font-weight: bold;\n}\n\n.token.italic {\n font-style: italic;\n}\n\n@mixin dark-theme-code {\n code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n color: #f8f8f2;\n }\n\n pre[class*=\"language-\"] {\n background: #2b2b2b;\n }\n\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #d4d0ab;\n }\n\n .token.punctuation {\n color: #fefefe;\n }\n\n .token.property,\n .token.tag,\n .token.constant,\n .token.symbol,\n .token.deleted {\n color: #ffa07a;\n }\n\n .token.boolean,\n .token.number {\n color: #00e0e0;\n }\n\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #abe338;\n }\n\n .token.operator,\n .token.entity,\n .token.url,\n .language-css .token.string,\n .style .token.string,\n .token.variable {\n color: #00e0e0;\n }\n\n .token.atrule,\n .token.attr-value,\n .token.function {\n color: #ffd700;\n }\n\n .token.keyword {\n color: #00e0e0;\n }\n\n .token.regex,\n .token.important {\n color: #ffd700;\n }\n}\n\n.tna-template--dark-theme {\n @include dark-theme-code;\n}\n\n.tna-template--system-theme {\n @media (prefers-color-scheme: dark) {\n @include dark-theme-code;\n }\n}\n\n.tna-code-block {\n @include spacing.space-above;\n\n position: relative;\n\n @include typography.font-size(16);\n line-height: 1.5;\n\n @include colour.colour-border(\"keyline\", 1px);\n @include borders.rounded-border;\n\n &__pre {\n padding: spacing.space(1);\n\n overflow: auto;\n\n position: relative;\n\n border-radius: 0.1px;\n\n code[class*=\"language-\"] {\n background: transparent;\n\n border: none;\n }\n }\n\n &:has(&__copy),\n &[title] {\n padding-top: $code-block-top-bar-height;\n\n &::after {\n content: \"\";\n\n height: $code-block-top-bar-height;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n\n @include colour.tint;\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n }\n }\n\n &[title] {\n &::before {\n content: attr(title);\n\n margin-top: 0;\n\n padding: 0 spacing.space(7) 0 spacing.space(1);\n\n display: block;\n overflow: hidden;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2;\n\n font-family: typographyVars.$code-font-family;\n line-height: $code-block-top-bar-height;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n\n pointer-events: none;\n }\n }\n\n &__copy {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}

package/nationalarchives/{code.scss → code-block.scss} RENAMED Viewed

@@ -1,3 +1,4 @@
+@use "variables/typography" as typographyVars;
 @use "tools/a11y";
 @use "tools/borders";
 @use "tools/colour";
@@ -5,37 +6,6 @@
 @use "tools/typography";
 $code-block-top-bar-height: spacing.space(2);
-$code-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-code,
-pre {
-  font-family: $code-font-family;
-}
-code {
-  color: #be0e5a;
-  font-size: 0.95em;
-  background-color: #f1ece9;
-  .tna-template--dark-theme & {
-    // color: #ffa07a;
-    color: #d49;
-    // background-color: #2b2b2b;
-    background-color: #111;
-  }
-  .tna-template--system-theme & {
-    @media (prefers-color-scheme: dark) {
-      // color: #ffa07a;
-      color: #d49;
-      // background-color: #2b2b2b;
-      background-color: #111;
-    }
-  }
-}
 code[class*="language-"],
 pre[class*="language-"] {
@@ -224,6 +194,8 @@ pre[class*="language-"] {
     code[class*="language-"] {
       background: transparent;
+      border: none;
     }
   }
@@ -267,7 +239,7 @@ pre[class*="language-"] {
       left: 0;
       z-index: 2;
-      font-family: $code-font-family;
+      font-family: typographyVars.$code-font-family;
       line-height: $code-block-top-bar-height;
       text-overflow: ellipsis;
       text-wrap: nowrap;

package/nationalarchives/components/accordion/accordion.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CA0BA,oCACE,gBAUA,4DACE,aCzBF,wBACE,iBAGF,qBACE,iBAIF,2BACE,mBACA,UAEA,yBAEA,YACA,mBAEA,eCyDF,2BClFA,eF8BE,iCE+BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHWpC,wBCqEI,+DDlEF,kBACA,UAEA,sCC+DE,4DD1DJ,wBACE,WACA,SACA,gCAGA,cAEA,kBAEA,oBACA,gBAEA,gBAEA,yBAEA,YACA,mBAEA,eCgBF,qCClFA,mBAqBA,YCSA,qBDRA,kBACA,yBACA,mCAPA,YCiBsB,IHsCpB,0BACE,kBAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,kEACA,mBAGF,8BE9BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF8DpC,4DDSI,sCACE,0DAKF,oDACE,2CAIJ,+BACE,UAIJ,wBACE,aAEA,kBAEA,mBC6ZF,8BDxZI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAIA,oDACE,YAEA","file":"accordion.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n // NON INTERACTIVE\n &__item {\n @include spacing.space-above;\n }\n\n &__heading {\n padding-top: spacing.space(1);\n }\n\n &__body {\n padding-top: spacing.space(1);\n }\n\n // INTERACTIVE\n &__toggle-all {\n margin-bottom: spacing.space(1);\n padding: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"link\");\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n\n &:first-of-type {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n\n &__summary {\n width: 100%;\n margin: 0;\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n display: block;\n\n position: relative;\n\n line-height: inherit;\n text-align: left;\n\n list-style: none;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(18);\n @include typography.main-font(true);\n\n * {\n font-size: inherit;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n\n &:active {\n z-index: 1;\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n position: relative;\n\n border-radius: 0.1px;\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n // @include colour-css-vars-high-contrast(\n // \"form-error-border\",\n // \"focus-outline\"\n // );\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CA0BA,oCACE,gBAUA,4DACE,aCzBF,wBACE,iBAGF,qBACE,iBAIF,2BACE,mBACA,UAEA,yBAEA,YACA,mBAEA,eCyDF,2BClFA,eF8BE,iCE+BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHWpC,wBCqEI,+DDlEF,kBACA,UAEA,sCC+DE,4DD1DJ,wBACE,WACA,SACA,gCAGA,cAEA,kBAEA,oBACA,gBAEA,gBAEA,yBAEA,YACA,mBAEA,eCgBF,qCClFA,mBAqBA,YCSA,qBDRA,kBACA,yBACA,mCAPA,YCiBsB,IHsCpB,0BACE,kBAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,kEACA,mBAGF,8BE9BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF8DpC,4DDSI,sCACE,0DAKF,oDACE,2CAIJ,+BACE,UAIJ,wBACE,aAEA,kBAEA,mBC6ZF,8BDxZI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAIA,oDACE,YAEA","file":"accordion.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n // NON INTERACTIVE\n &__item {\n @include spacing.space-above;\n }\n\n &__heading {\n padding-top: spacing.space(1);\n }\n\n &__body {\n padding-top: spacing.space(1);\n }\n\n // INTERACTIVE\n &__toggle-all {\n margin-bottom: spacing.space(1);\n padding: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"link\");\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n\n &:first-of-type {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n\n &__summary {\n width: 100%;\n margin: 0;\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n display: block;\n\n position: relative;\n\n line-height: inherit;\n text-align: left;\n\n list-style: none;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(18);\n @include typography.main-font(true);\n\n * {\n font-size: inherit;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n\n &:active {\n z-index: 1;\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n position: relative;\n\n border-radius: 0.1px;\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n // @include colour-css-vars-high-contrast(\n // \"form-error-border\",\n // \"focus-outline\"\n // );\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}

package/nationalarchives/components/accordion/accordion.js CHANGED Viewed

@@ -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=e()}(self,()=>(()=>{"use strict";var t={815(t,e,r){r.d(e,{D:()=>o});var n=r(181),o=function(t){var e=!("true"===t.dataset.tableScrollInitialised),r=t.querySelector("caption");e&&(r?r.id||(r.id="table-caption-".concat((0,n.A)())):console.warn("Missing <caption> element on table",t),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",(null==r?void 0:r.id)||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}},181(t,e,r){r.d(e,{A:()=>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 o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.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={};r.r(n),r.d(n,{Accordion:()=>c});var o=r(815);function i(t){return i="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},i(t)}function a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}function l(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}var c=function(){return t=function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(function(t){return r.initItem(t)}),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",function(){r.isAllOpen()?r.$items.forEach(function(t){return r.closeItem(t)}):r.$items.forEach(function(t){return r.openItem(t)}),r.syncToggleAllButton()})))},(e=[{key:"initItem",value:function(t){var e=this,r=t.querySelector(".tna-accordion__heading"),n=t.querySelector(".tna-accordion__body");if(r&&n){t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),r.removeAttribute("class"),n.classList.add("tna-accordion__content"),n.classList.remove("tna-accordion__body"),n.setAttribute("hidden","");var o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("type","button"),o.setAttribute("aria-controls",n.id),o.innerText=r.innerText,r.innerText="",r.appendChild(o),o.addEventListener("click",function(){"true"===o.getAttribute("aria-expanded")?e.closeItem(t):e.openItem(t)})}}},{key:"initState",value:function(){var t=this;this.$items.forEach(function(e){"true"===e.dataset.isopen?t.openItem(e):t.closeItem(e),e.removeAttribute("data-isopen")})}},{key:"openItem",value:function(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Hide this section")),r.removeAttribute("hidden"),this.syncToggleAllButton();var n=r.querySelectorAll(".tna-table-wrapper");n&&n.forEach(function(t){(0,o.D)(t)})}},{key:"closeItem",value:function(t){var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Show this section")),r.setAttribute("hidden",""),this.syncToggleAllButton()}},{key:"closeAllItemsExcept",value:function(t){var e=this;Array.from(this.$items).filter(function(e){return e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")}).forEach(function(t){return e.closeItem(t)})}},{key:"isAllOpen",value:function(){return Array.from(this.$items).every(function(t){return"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")})}},{key:"syncToggleAllButton",value:function(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}])&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return 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=e()}(self,()=>(()=>{"use strict";var t={927(t,e,r){r.d(e,{DJ:()=>o});var n=r(181),o=function(t){var e=!("true"===t.dataset.tableScrollInitialised),r=t.querySelector("caption");e&&(r?r.id||(r.id="table-caption-".concat((0,n.A)())):console.warn("Missing <caption> element on table",t),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",(null==r?void 0:r.id)||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}},181(t,e,r){r.d(e,{A:()=>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 o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.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={};r.r(n),r.d(n,{Accordion:()=>c});var o=r(927);function i(t){return i="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},i(t)}function a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}function l(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}var c=function(){return t=function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(function(t){return r.initItem(t)}),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",function(){r.isAllOpen()?r.$items.forEach(function(t){return r.closeItem(t)}):r.$items.forEach(function(t){return r.openItem(t)}),r.syncToggleAllButton()})))},(e=[{key:"initItem",value:function(t){var e=this,r=t.querySelector(".tna-accordion__heading"),n=t.querySelector(".tna-accordion__body");if(r&&n){t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),r.removeAttribute("class"),n.classList.add("tna-accordion__content"),n.classList.remove("tna-accordion__body"),n.setAttribute("hidden","");var o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("type","button"),o.setAttribute("aria-controls",n.id),o.innerText=r.innerText,r.innerText="",r.appendChild(o),o.addEventListener("click",function(){"true"===o.getAttribute("aria-expanded")?e.closeItem(t):e.openItem(t)})}}},{key:"initState",value:function(){var t=this;this.$items.forEach(function(e){"true"===e.dataset.isopen?t.openItem(e):t.closeItem(e),e.removeAttribute("data-isopen")})}},{key:"openItem",value:function(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Hide this section")),r.removeAttribute("hidden"),this.syncToggleAllButton();var n=r.querySelectorAll(".tna-table-wrapper");n&&n.forEach(function(t){(0,o.DJ)(t)})}},{key:"closeItem",value:function(t){var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Show this section")),r.setAttribute("hidden",""),this.syncToggleAllButton()}},{key:"closeAllItemsExcept",value:function(t){var e=this;Array.from(this.$items).filter(function(e){return e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")}).forEach(function(t){return e.closeItem(t)})}},{key:"isAllOpen",value:function(){return Array.from(this.$items).every(function(t){return"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")})}},{key:"syncToggleAllButton",value:function(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}])&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return n})());
 //# sourceMappingURL=accordion.js.map

package/nationalarchives/components/accordion/accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/accordion/accordion.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/tables.mjs","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/accordion/accordion.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\"] = factory();\n})(self, () => {\nreturn ","import uuidv4 from \"./uuid.mjs\";\n\nexport const checkTableForScroll = ($tableWrapper) => {\n const isUninitialised = !(\n $tableWrapper.dataset.tableScrollInitialised === \"true\"\n );\n const $caption = $tableWrapper.querySelector(\"caption\");\n if (isUninitialised) {\n if (!$caption) {\n console.warn(\"Missing <caption> element on table\", $tableWrapper);\n } else if (!$caption.id) {\n $caption.id = `table-caption-${uuidv4()}`;\n }\n $tableWrapper.dataset.tableScrollInitialised = \"true\";\n }\n if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n $tableWrapper.setAttribute(\"tabindex\", \"0\");\n $tableWrapper.setAttribute(\"role\", \"region\");\n $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id \|\| \"\");\n $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n } else {\n $tableWrapper.removeAttribute(\"tabindex\");\n $tableWrapper.removeAttribute(\"role\");\n $tableWrapper.removeAttribute(\"aria-labelledby\");\n $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n }\n};\n","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 { checkTableForScroll } from \"../../lib/tables.mjs\";\n\nexport class Accordion {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n this.allowMultipleItemsOpen =\n this.$module.dataset.singleOpenItem !== \"true\";\n\n this.$items.forEach(($item) => this.initItem($item));\n this.initState();\n\n this.$toggleAllButton = this.$module.querySelector(\n \".tna-accordion__toggle-all\",\n );\n if (this.$toggleAllButton) {\n this.syncToggleAllButton();\n this.$toggleAllButton.removeAttribute(\"hidden\");\n this.$toggleAllButton.addEventListener(\"click\", () => {\n if (this.isAllOpen()) {\n this.$items.forEach(($item) => this.closeItem($item));\n } else {\n this.$items.forEach(($item) => this.openItem($item));\n }\n this.syncToggleAllButton();\n });\n }\n }\n\n initItem($item) {\n const $heading = $item.querySelector(\".tna-accordion__heading\");\n const $content = $item.querySelector(\".tna-accordion__body\");\n\n if (!$heading \|\| !$content) {\n return;\n }\n\n $item.classList.add(\"tna-accordion__details\");\n $item.classList.remove(\"tna-accordion__item\");\n\n $heading.removeAttribute(\"class\");\n\n $content.classList.add(\"tna-accordion__content\");\n $content.classList.remove(\"tna-accordion__body\");\n $content.setAttribute(\"hidden\", \"\");\n\n const $headingButton = document.createElement(\"button\");\n $headingButton.classList.add(\"tna-accordion__summary\");\n $headingButton.setAttribute(\"type\", \"button\");\n $headingButton.setAttribute(\"aria-controls\", $content.id);\n $headingButton.innerText = $heading.innerText;\n $heading.innerText = \"\";\n $heading.appendChild($headingButton);\n\n $headingButton.addEventListener(\"click\", () => {\n const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n if (isOpen) {\n this.closeItem($item);\n } else {\n this.openItem($item);\n }\n });\n }\n\n initState() {\n this.$items.forEach(($item) => {\n if ($item.dataset[\"isopen\"] === \"true\") {\n this.openItem($item);\n } else {\n this.closeItem($item);\n }\n $item.removeAttribute(\"data-isopen\");\n });\n }\n\n openItem($item) {\n if (!this.allowMultipleItemsOpen) {\n this.closeAllItemsExcept($item);\n }\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"true\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Hide this section`,\n );\n $content.removeAttribute(\"hidden\");\n // $content.setAttribute(\"tabindex\", \"0\");\n this.syncToggleAllButton();\n\n const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n if ($tableWrapper) {\n $tableWrapper.forEach(($wrapper) => {\n checkTableForScroll($wrapper);\n });\n }\n }\n\n closeItem($item) {\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"false\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Show this section`,\n );\n $content.setAttribute(\"hidden\", \"\");\n // $content.setAttribute(\"tabindex\", \"-1\");\n this.syncToggleAllButton();\n }\n\n closeAllItemsExcept($excludeItem) {\n Array.from(this.$items)\n .filter(\n ($item) =>\n $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n )\n .forEach(($item) => this.closeItem($item));\n }\n\n isAllOpen() {\n return Array.from(this.$items).every(\n ($item) =>\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n );\n }\n\n syncToggleAllButton() {\n if (this.$toggleAllButton) {\n if (this.isAllOpen()) {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.closeAllLabel \|\| \"Hide all sections\";\n } else {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.openAllLabel \|\| \"Show all sections\";\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","checkTableForScroll","$tableWrapper","isUninitialised","dataset","tableScrollInitialised","$caption","querySelector","id","concat","uuidv4","console","warn","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","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","Accordion","$module","_this","_classCallCheck","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","_this2","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","_this3","closeAllItemsExcept","trim","$wrapper","$excludeItem","_this4","Array","from","filter","every","closeAllLabel","openAllLabel"],"sourceRoot":""}
1	+ {"version":3,"file":"components/accordion/accordion.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/helpers.mjs","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/accordion/accordion.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\"] = factory();\n})(self, () => {\nreturn ","import uuidv4 from \"./uuid.mjs\";\n\nexport const iso8601ToPrettyDatetime = (dateStr) => {\n const datetime = dateStr;\n\n if (!datetime) {\n throw new Error(\"No datetime provided\");\n }\n const isDateTime =\n /^\\d{4}(-\\d{2}){2}(T\| )\\d{2}(:\\d{2}){1,2}(\\.\\d+)?(Z\|((\\+\|-)\\d{2}:\\d{2}))?$/.test(\n datetime,\n );\n const isDate = /^\\d{4}(-\\d{2}){2}$/.test(datetime);\n if (!isDateTime && !isDate) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const date = new Date(datetime);\n if (!(date instanceof Date) \|\| isNaN(date)) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const dayString = date.toLocaleDateString(\"en-GB\", {\n weekday: \"long\",\n });\n\n const dateString = date.toLocaleDateString(\"en-GB\", {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n });\n\n if (isDateTime && (date.getHours() \|\| date.getMinutes())) {\n let timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n if (date.getSeconds()) {\n timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n });\n }\n return `${dayString} ${dateString}, ${timeString}`;\n } else {\n return `${dayString} ${dateString}`;\n }\n};\n\n/\n ==========================================\n * Transform any <time> element into a pretty\n * and human readable format that is based on\n * the valid ISO 8601 datetime attribute. The\n * replaced value will be localised according\n * to user's system settings, repurposing the\n * original text content as a title attribute\n * to allow users to see the value. A null or\n * invalid datetime format will result in the\n * element not being modified. If the updated\n * value is similar to the starting value for\n * the element text content, then the element\n * will not be updated to avoid redundancy.\n * ------------------------------------------\n * For example if the user's system has a UTC\n * timezone set then the element:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * >\n * 5 March 2026, 13:48 (UTC -5)\n * </time>\n \n would become:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * title=\"5 March 2026, 13:48 (UTC -5)\"\n * >\n * Thursday 5 March 2026, 09:48\n * </time>\n * ==========================================\n */\nexport const updateTimeElement = ($el) => {\n const datetime = $el.getAttribute(\"datetime\");\n\n try {\n const prettyDatetime = iso8601ToPrettyDatetime(datetime);\n if (!prettyDatetime.includes($el.textContent)) {\n $el.setAttribute(\"title\", $el.textContent);\n $el.textContent = prettyDatetime;\n }\n } catch (e) {\n // Do nothing if the datetime is invalid or not provided\n }\n};\n\nexport const checkTableForScroll = ($tableWrapper) => {\n const isUninitialised = !(\n $tableWrapper.dataset.tableScrollInitialised === \"true\"\n );\n const $caption = $tableWrapper.querySelector(\"caption\");\n if (isUninitialised) {\n if (!$caption) {\n console.warn(\"Missing <caption> element on table\", $tableWrapper);\n } else if (!$caption.id) {\n $caption.id = `table-caption-${uuidv4()}`;\n }\n $tableWrapper.dataset.tableScrollInitialised = \"true\";\n }\n if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n $tableWrapper.setAttribute(\"tabindex\", \"0\");\n $tableWrapper.setAttribute(\"role\", \"region\");\n $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id \|\| \"\");\n $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n } else {\n $tableWrapper.removeAttribute(\"tabindex\");\n $tableWrapper.removeAttribute(\"role\");\n $tableWrapper.removeAttribute(\"aria-labelledby\");\n $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n }\n};\n\nexport const initCodeBlock = ($codeBlock) => {\n if (\n navigator.clipboard &&\n $codeBlock.classList.contains(\"tna-code-block--copy\")\n ) {\n const copyButton = document.createElement(\"button\");\n copyButton.innerText = \"Copy code\";\n copyButton.classList.add(\n \"tna-code-block__copy\",\n \"tna-button\",\n \"tna-button--plain\",\n \"tna-button--small\",\n );\n copyButton.setAttribute(\"aria-live\", \"assertive\");\n $codeBlock.prepend(copyButton);\n copyButton.addEventListener(\"click\", async () => {\n try {\n await navigator.clipboard.writeText(\n $codeBlock.querySelector(\"pre code\").innerText,\n );\n } catch (err) {\n console.error(\"Failed to copy: \", err);\n }\n copyButton.innerText = \"Code copied\";\n });\n copyButton.addEventListener(\"blur\", () => {\n copyButton.innerText = \"Copy code\";\n });\n }\n};\n","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 { checkTableForScroll } from \"../../lib/helpers.mjs\";\n\nexport class Accordion {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n this.allowMultipleItemsOpen =\n this.$module.dataset.singleOpenItem !== \"true\";\n\n this.$items.forEach(($item) => this.initItem($item));\n this.initState();\n\n this.$toggleAllButton = this.$module.querySelector(\n \".tna-accordion__toggle-all\",\n );\n if (this.$toggleAllButton) {\n this.syncToggleAllButton();\n this.$toggleAllButton.removeAttribute(\"hidden\");\n this.$toggleAllButton.addEventListener(\"click\", () => {\n if (this.isAllOpen()) {\n this.$items.forEach(($item) => this.closeItem($item));\n } else {\n this.$items.forEach(($item) => this.openItem($item));\n }\n this.syncToggleAllButton();\n });\n }\n }\n\n initItem($item) {\n const $heading = $item.querySelector(\".tna-accordion__heading\");\n const $content = $item.querySelector(\".tna-accordion__body\");\n\n if (!$heading \|\| !$content) {\n return;\n }\n\n $item.classList.add(\"tna-accordion__details\");\n $item.classList.remove(\"tna-accordion__item\");\n\n $heading.removeAttribute(\"class\");\n\n $content.classList.add(\"tna-accordion__content\");\n $content.classList.remove(\"tna-accordion__body\");\n $content.setAttribute(\"hidden\", \"\");\n\n const $headingButton = document.createElement(\"button\");\n $headingButton.classList.add(\"tna-accordion__summary\");\n $headingButton.setAttribute(\"type\", \"button\");\n $headingButton.setAttribute(\"aria-controls\", $content.id);\n $headingButton.innerText = $heading.innerText;\n $heading.innerText = \"\";\n $heading.appendChild($headingButton);\n\n $headingButton.addEventListener(\"click\", () => {\n const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n if (isOpen) {\n this.closeItem($item);\n } else {\n this.openItem($item);\n }\n });\n }\n\n initState() {\n this.$items.forEach(($item) => {\n if ($item.dataset[\"isopen\"] === \"true\") {\n this.openItem($item);\n } else {\n this.closeItem($item);\n }\n $item.removeAttribute(\"data-isopen\");\n });\n }\n\n openItem($item) {\n if (!this.allowMultipleItemsOpen) {\n this.closeAllItemsExcept($item);\n }\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"true\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Hide this section`,\n );\n $content.removeAttribute(\"hidden\");\n // $content.setAttribute(\"tabindex\", \"0\");\n this.syncToggleAllButton();\n\n const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n if ($tableWrapper) {\n $tableWrapper.forEach(($wrapper) => {\n checkTableForScroll($wrapper);\n });\n }\n }\n\n closeItem($item) {\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"false\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Show this section`,\n );\n $content.setAttribute(\"hidden\", \"\");\n // $content.setAttribute(\"tabindex\", \"-1\");\n this.syncToggleAllButton();\n }\n\n closeAllItemsExcept($excludeItem) {\n Array.from(this.$items)\n .filter(\n ($item) =>\n $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n )\n .forEach(($item) => this.closeItem($item));\n }\n\n isAllOpen() {\n return Array.from(this.$items).every(\n ($item) =>\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n );\n }\n\n syncToggleAllButton() {\n if (this.$toggleAllButton) {\n if (this.isAllOpen()) {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.closeAllLabel \|\| \"Hide all sections\";\n } else {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.openAllLabel \|\| \"Show all sections\";\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","checkTableForScroll","$tableWrapper","isUninitialised","dataset","tableScrollInitialised","$caption","querySelector","id","concat","uuidv4","console","warn","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","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","Accordion","$module","_this","_classCallCheck","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","_this2","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","_this3","closeAllItemsExcept","trim","$wrapper","$excludeItem","_this4","Array","from","filter","every","closeAllLabel","openAllLabel"],"sourceRoot":""}

package/nationalarchives/components/accordion/accordion.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { checkTableForScroll } from "../../lib/tables.mjs";
+import { checkTableForScroll } from "../../lib/helpers.mjs";
 export class Accordion {
   constructor($module) {