@nationalarchives/frontend 0.43.0 → 0.44.1

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 (60) hide show
  1. package/nationalarchives/all+analytics.js +1 -2
  2. package/nationalarchives/all+analytics.js.map +1 -1
  3. package/nationalarchives/all.css +1 -1
  4. package/nationalarchives/all.css.map +1 -1
  5. package/nationalarchives/all.js +1 -2
  6. package/nationalarchives/all.js.map +1 -1
  7. package/nationalarchives/analytics.js +1 -1
  8. package/nationalarchives/analytics.js.map +1 -1
  9. package/nationalarchives/components/accordion/accordion.js +1 -1
  10. package/nationalarchives/components/accordion/accordion.js.map +1 -1
  11. package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
  12. package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
  13. package/nationalarchives/components/breadcrumbs/breadcrumbs.mjs +49 -43
  14. package/nationalarchives/components/code-block/code-block.js +1 -2
  15. package/nationalarchives/components/code-block/code-block.js.map +1 -1
  16. package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
  17. package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
  18. package/nationalarchives/components/date-input/date-input.js +1 -1
  19. package/nationalarchives/components/date-input/date-input.js.map +1 -1
  20. package/nationalarchives/components/error-summary/error-summary.js +1 -1
  21. package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
  22. package/nationalarchives/components/file-input/file-input.js +1 -1
  23. package/nationalarchives/components/file-input/file-input.js.map +1 -1
  24. package/nationalarchives/components/file-input/file-input.mjs +4 -0
  25. package/nationalarchives/components/footer/footer.js +1 -1
  26. package/nationalarchives/components/footer/footer.js.map +1 -1
  27. package/nationalarchives/components/footer/footer.mjs +6 -2
  28. package/nationalarchives/components/gallery/gallery.js +1 -1
  29. package/nationalarchives/components/gallery/gallery.js.map +1 -1
  30. package/nationalarchives/components/global-header/global-header.js +1 -1
  31. package/nationalarchives/components/global-header/global-header.js.map +1 -1
  32. package/nationalarchives/components/header/header.js +1 -1
  33. package/nationalarchives/components/header/header.js.map +1 -1
  34. package/nationalarchives/components/hero/fixtures.json +42 -0
  35. package/nationalarchives/components/hero/hero.css +1 -1
  36. package/nationalarchives/components/hero/hero.css.map +1 -1
  37. package/nationalarchives/components/hero/hero.scss +10 -4
  38. package/nationalarchives/components/picture/picture.js +1 -1
  39. package/nationalarchives/components/picture/picture.js.map +1 -1
  40. package/nationalarchives/components/sidebar/sidebar.css +1 -1
  41. package/nationalarchives/components/sidebar/sidebar.css.map +1 -1
  42. package/nationalarchives/components/sidebar/sidebar.js +1 -1
  43. package/nationalarchives/components/sidebar/sidebar.js.map +1 -1
  44. package/nationalarchives/components/sidebar/sidebar.mjs +13 -13
  45. package/nationalarchives/components/sidebar/sidebar.scss +18 -18
  46. package/nationalarchives/components/skip-link/skip-link.js +1 -1
  47. package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
  48. package/nationalarchives/components/tabs/tabs.js +1 -1
  49. package/nationalarchives/components/tabs/tabs.js.map +1 -1
  50. package/nationalarchives/components/text-input/text-input.js +1 -1
  51. package/nationalarchives/components/text-input/text-input.js.map +1 -1
  52. package/nationalarchives/components/textarea/textarea.js +1 -1
  53. package/nationalarchives/components/textarea/textarea.js.map +1 -1
  54. package/nationalarchives/components/textarea/textarea.mjs +6 -2
  55. package/nationalarchives/prototype-kit.css +1 -1
  56. package/nationalarchives/prototype-kit.css.map +1 -1
  57. package/package.json +3 -3
  58. package/nationalarchives/all+analytics.js.LICENSE.txt +0 -1
  59. package/nationalarchives/all.js.LICENSE.txt +0 -1
  60. package/nationalarchives/components/code-block/code-block.js.LICENSE.txt +0 -1
package/nationalarchives/components/hero/hero.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA8OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCC3DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WDyEE,+DCrEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDeF,gDAIA,uDCZA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDZJ,gDCiBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDlFF,4CGjBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UKzOoB,OL0OpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UGxPJ,cCDsB,IJ8PpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,6BAIA,kBAEA,gBAEA,aAEA,SACA,UGlRJ,cCDsB,IJuRpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.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 \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\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%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\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\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 2 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n position: relative;\n\n &::before {\n content: \"\";\n\n position: absolute;\n inset: auto 0 0;\n z-index: -1;\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__figure {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n\n order: 2;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n &:hover {\n @include colour.colour-font(\"font-dark\", true);\n\n @include colour.colour-background(\"background\", true);\n }\n }\n\n &__details[open] &__details-summary {\n width: 2rem;\n height: 2rem;\n padding: 0;\n\n font-size: 0;\n line-height: 2rem;\n text-align: center;\n\n border: none;\n\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n\n p + p {\n margin-top: spacing.space(0.5);\n }\n }\n\n &__image {\n width: 100%;\n\n order: 1;\n\n img {\n width: 100%;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n padding-top: spacing.space($vertical-padding-small);\n padding-bottom: spacing.space($vertical-padding-small);\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n\n border-left: none;\n\n @include colour.colour-background(\"background\");\n }\n\n @include media.on-larger-than-mobile {\n &__figure {\n min-height: clamp(5rem, 30vw, 20rem);\n }\n\n &--large &__figure {\n min-height: clamp(12rem, 33vw, 50rem);\n }\n\n &__inner {\n z-index: 4;\n }\n\n &__image {\n width: auto;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__content {\n padding-top: spacing.space($plain-top-padding);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &__content-inner {\n padding: spacing.space(2);\n @include borders.rounded-border;\n }\n\n &--split &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &--split &__content-inner {\n padding: 0 spacing.space(math.div(gridVars.$gutter-width, 2)) 0 0;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-overflow);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($vertical-padding-large + $shift-overflow);\n }\n\n &--over {\n margin-bottom: spacing.space($over-overflow);\n }\n\n &--over &__details {\n max-width: gridVars.$largest-container-width;\n margin: 0 auto;\n\n position: relative;\n }\n\n &--over &__details-summary {\n top: spacing.space(0.5);\n right: spacing.space(gridVars.$gutter-width + 0.5);\n }\n\n &--over &__information {\n max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});\n\n box-sizing: border-box;\n\n top: 0;\n right: spacing.space(gridVars.$gutter-width);\n left: auto;\n\n @include borders.rounded-border;\n }\n\n &--over &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n }\n\n &--over &__content-inner {\n padding: 0;\n }\n\n &--over &__image {\n max-width: calc(\n #{math.div(gridVars.$largest-container-width, 2)} -\n #{grid.gutter-width()}\n );\n margin-right: 32px;\n\n overflow: hidden;\n\n bottom: spacing.space($over-overflow * -1);\n\n left: 50%;\n z-index: 5;\n @include borders.rounded-border;\n }\n\n &--split &__figure,\n &--over &__figure {\n justify-content: center;\n }\n\n &--shift &__content-inner,\n &--over &__image {\n box-shadow:\n 0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n 0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n }\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\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@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\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","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA8OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCC3DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WDyEE,+DCrEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDeF,gDAIA,uDCZA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDZJ,gDCiBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDlFF,4CGjBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,uBACE,gBAEA,UAGF,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UK/OoB,OLgPpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UG9PJ,cCDsB,IJoQpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,sCAIA,kBAEA,gBAEA,aAEA,sBACA,UGxRJ,cCDsB,IJ6RpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.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 \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\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%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\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\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 3 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n position: relative;\n\n &::before {\n content: \"\";\n\n position: absolute;\n inset: auto 0 0;\n z-index: -1;\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__figure {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n\n order: 2;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n &:hover {\n @include colour.colour-font(\"font-dark\", true);\n\n @include colour.colour-background(\"background\", true);\n }\n }\n\n &__details[open] &__details-summary {\n width: 2rem;\n height: 2rem;\n padding: 0;\n\n font-size: 0;\n line-height: 2rem;\n text-align: center;\n\n border: none;\n\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n\n p + p {\n margin-top: spacing.space(0.5);\n }\n }\n\n &__image {\n width: 100%;\n\n order: 1;\n\n img {\n width: 100%;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n padding-top: spacing.space($vertical-padding-small);\n padding-bottom: spacing.space($vertical-padding-small);\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n\n border-left: none;\n\n @include colour.colour-background(\"background\");\n }\n\n @include media.on-larger-than-mobile {\n &__figure {\n min-height: clamp(5rem, 30vw, 20rem);\n }\n\n &--large &__figure {\n min-height: clamp(12rem, 33vw, 50rem);\n }\n\n &__inner {\n z-index: 4;\n }\n\n &__image {\n width: auto;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__content {\n padding-top: spacing.space($plain-top-padding);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &__content-inner {\n padding: spacing.space(2);\n @include borders.rounded-border;\n }\n\n &__information {\n max-width: math.div(gridVars.$largest-container-width, 2);\n\n left: auto;\n }\n\n &--split &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &--split &__content-inner {\n padding: 0 grid.gutter-width-half() 0 0;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-overflow);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($vertical-padding-large + $shift-overflow);\n }\n\n &--over {\n margin-bottom: spacing.space($over-overflow);\n }\n\n &--over &__details {\n max-width: gridVars.$largest-container-width;\n margin: 0 auto;\n\n position: relative;\n }\n\n &--over &__details-summary {\n top: spacing.space(0.5);\n right: spacing.space(gridVars.$gutter-width + 0.5);\n }\n\n &--over &__information {\n max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});\n\n box-sizing: border-box;\n\n top: 0;\n right: spacing.space(gridVars.$gutter-width);\n left: auto;\n\n @include borders.rounded-border;\n }\n\n &--over &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n }\n\n &--over &__content-inner {\n padding: 0;\n }\n\n &--over &__image {\n max-width: calc(\n #{math.div(gridVars.$largest-container-width, 2)} -\n (#{grid.gutter-width()} + #{grid.gutter-width-half()})\n );\n margin-right: 32px;\n\n overflow: hidden;\n\n bottom: spacing.space($over-overflow * -1);\n\n left: calc(50% + #{grid.gutter-width-half()});\n z-index: 5;\n @include borders.rounded-border;\n }\n\n &--split &__figure,\n &--over &__figure {\n justify-content: center;\n }\n\n &--shift &__content-inner,\n &--over &__image {\n box-shadow:\n 0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n 0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n }\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\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@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\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","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
package/nationalarchives/components/hero/hero.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  @use "../../tools/typography";
11
11
 
12
12
  $vertical-padding-small: 2 !default;
13
- $vertical-padding-large: 2 !default;
13
+ $vertical-padding-large: 3 !default;
14
14
  $plain-top-padding: 12 !default;
15
15
  $split-vertical-padding: 3 !default;
16
16
  $shift-overflow: $vertical-padding-large !default;
@@ -203,6 +203,12 @@ $over-overflow: $shift-overflow !default;
203
203
  @include borders.rounded-border;
204
204
  }
205
205
 
206
+ &__information {
207
+ max-width: math.div(gridVars.$largest-container-width, 2);
208
+
209
+ left: auto;
210
+ }
211
+
206
212
  &--split &__content {
207
213
  width: 50%;
208
214
  padding-top: spacing.space($vertical-padding-large);
@@ -210,7 +216,7 @@ $over-overflow: $shift-overflow !default;
210
216
  }
211
217
 
212
218
  &--split &__content-inner {
213
- padding: 0 spacing.space(math.div(gridVars.$gutter-width, 2)) 0 0;
219
+ padding: 0 grid.gutter-width-half() 0 0;
214
220
  }
215
221
 
216
222
  &--split &__image {
@@ -266,7 +272,7 @@ $over-overflow: $shift-overflow !default;
266
272
  &--over &__image {
267
273
  max-width: calc(
268
274
  #{math.div(gridVars.$largest-container-width, 2)} -
269
- #{grid.gutter-width()}
275
+ (#{grid.gutter-width()} + #{grid.gutter-width-half()})
270
276
  );
271
277
  margin-right: 32px;
272
278
 
@@ -274,7 +280,7 @@ $over-overflow: $shift-overflow !default;
274
280
 
275
281
  bottom: spacing.space($over-overflow * -1);
276
282
 
277
- left: 50%;
283
+ left: calc(50% + #{grid.gutter-width-half()});
278
284
  z-index: 5;
279
285
  @include borders.rounded-border;
280
286
  }
package/nationalarchives/components/picture/picture.js CHANGED
@@ -1,2 +1,2 @@
1
- !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={181(t,e,r){r.d(e,{A:()=>i});const i=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(i){var n=e[i];if(void 0!==n)return n.exports;var o=e[i]={exports:{}};return t[i](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},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 i={};r.r(i),r.d(i,{Picture:()=>p});var n=r(181);function o(t){return o="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},o(t)}function a(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,s(i.key),i)}}function s(t){var e=function(t){if("object"!=o(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==o(e)?e:e+""}var p=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$imageWrapper=e&&e.querySelector(".tna-picture__image-wrapper"),this.$transcriptToggle=this.$imageWrapper&&this.$imageWrapper.querySelector(".tna-picture__toggle-transcript"),this.$transcript=e&&e.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1,this.$module&&this.$imageWrapper&&this.$transcriptToggle&&this.$transcript&&(this.openLabel=this.$module.dataset.informationLabelOpen||"Open transcript",this.closeLabel=this.$module.dataset.informationLabelClose||"Close transcript",this.init())},(e=[{key:"init",value:function(){var t=this,e="tna-picture-".concat((0,n.A)());this.$transcriptToggle.removeAttribute("hidden"),this.$transcriptToggle.setAttribute("aria-controls",e),this.$transcriptToggle.innerText=this.openLabel,this.$transcriptToggle.addEventListener("click",function(){return t.toggleTranscript()}),this.$transcript.setAttribute("id",e),this.$transcript.setAttribute("hidden",""),this.$transcript.addEventListener("keydown",function(e){"Escape"===e.key&&(t.toggleTranscript(),t.$transcriptToggle.focus())})}},{key:"toggleTranscript",value:function(){this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText=this.closeLabel,this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText=this.openLabel,this.$transcript.setAttribute("hidden",""))}}])&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return i})());
1
+ !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={181(t,e,r){r.d(e,{A:()=>i});const i=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,t=>(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16))}},e={};function r(i){var s=e[i];if(void 0!==s)return s.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,r),n.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},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 i={};r.r(i),r.d(i,{Picture:()=>n});var s=r(181);class n{constructor(t){this.$module=t,this.$imageWrapper=t&&t.querySelector(".tna-picture__image-wrapper"),this.$transcriptToggle=this.$imageWrapper&&this.$imageWrapper.querySelector(".tna-picture__toggle-transcript"),this.$transcript=t&&t.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1,this.$module&&this.$imageWrapper&&this.$transcriptToggle&&this.$transcript&&(this.openLabel=this.$module.dataset.informationLabelOpen||"Open transcript",this.closeLabel=this.$module.dataset.informationLabelClose||"Close transcript",this.init())}init(){const t=`tna-picture-${(0,s.A)()}`;this.$transcriptToggle.removeAttribute("hidden"),this.$transcriptToggle.setAttribute("aria-controls",t),this.$transcriptToggle.innerText=this.openLabel,this.$transcriptToggle.addEventListener("click",()=>this.toggleTranscript()),this.$transcript.setAttribute("id",t),this.$transcript.setAttribute("hidden",""),this.$transcript.addEventListener("keydown",t=>{"Escape"===t.key&&(this.toggleTranscript(),this.$transcriptToggle.focus())})}toggleTranscript(){this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText=this.closeLabel,this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText=this.openLabel,this.$transcript.setAttribute("hidden",""))}}return i})());
2
2
  //# sourceMappingURL=picture.js.map
package/nationalarchives/components/picture/picture.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,0DCCD,MAAAC,EARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,SAAW,SAACC,GAAI,OAEzDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,GAAG,EACf,ICPHC,EAAA,GAGA,SAAAC,EAAAC,GAEA,IAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAAf,QAGA,IAAAC,EAAAW,EAAAE,GAAA,CAGAd,QAAA,IAOA,OAHAiB,EAAAH,GAAAb,EAAAA,EAAAD,QAAAa,GAGAZ,EAAAD,OACA,CCrBAa,EAAAK,EAAA,CAAAlB,EAAAmB,KACA,QAAAC,KAAAD,EACAN,EAAAQ,EAAAF,EAAAC,KAAAP,EAAAQ,EAAArB,EAAAoB,IACAE,OAAAC,eAAAvB,EAAAoB,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCP,EAAAQ,EAAA,CAAAK,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAd,EAAAkB,EAAA/B,IACA,oBAAAgC,QAAAA,OAAAC,aACAX,OAAAC,eAAAvB,EAAAgC,OAAAC,YAAA,CAAuDC,MAAA,WAEvDZ,OAAAC,eAAAvB,EAAA,cAAgDkC,OAAA,2tBCHzC,IAAMC,EAAO,WA6BjB,SA5BD,SAAAA,EAAYC,gGAASC,CAAAC,KAAAH,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BAEnCF,KAAKG,kBACHH,KAAKC,eACLD,KAAKC,cAAcC,cAAc,mCAEnCF,KAAKI,YACHN,GAAWA,EAAQI,cAAc,4BACnCF,KAAKK,kBAAmB,EAGrBL,KAAKF,SACLE,KAAKC,eACLD,KAAKG,mBACLH,KAAKI,cAKRJ,KAAKM,UACHN,KAAKF,QAAQS,QAAQC,sBAAwB,kBAC/CR,KAAKS,WACHT,KAAKF,QAAQS,QAAQG,uBAAyB,mBAEhDV,KAAKW,OACP,KAAC,EAAA7B,IAAA,OAAAc,MAED,WAAO,IAAAgB,EAAAZ,KACCa,EAAQ,eAAAC,QAAkBC,EAAAA,EAAAA,MAEhCf,KAAKG,kBAAkBa,gBAAgB,UACvChB,KAAKG,kBAAkBc,aAAa,gBAAiBJ,GACrDb,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKG,kBAAkBgB,iBAAiB,QAAS,kBAC/CP,EAAKQ,kBAAkB,GAGzBpB,KAAKI,YAAYa,aAAa,KAAMJ,GACpCb,KAAKI,YAAYa,aAAa,SAAU,IAExCjB,KAAKI,YAAYe,iBAAiB,UAAW,SAACE,GAErC,WADCA,EAAMvC,MAEV8B,EAAKQ,mBACLR,EAAKT,kBAAkBmB,QAK7B,EACF,GAAC,CAAAxC,IAAA,mBAAAc,MAED,WACEI,KAAKK,kBAAoBL,KAAKK,iBAC1BL,KAAKK,kBACPL,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKS,WACxCT,KAAKI,YAAYY,gBAAgB,YAEjChB,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKI,YAAYa,aAAa,SAAU,IAE5C,mFAAC,CAnEiB","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/picture/picture.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/* eslint-disable no-magic-numbers */\n/* eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n constructor($module) {\n this.$module = $module;\n this.$imageWrapper =\n $module && $module.querySelector(\".tna-picture__image-wrapper\");\n\n this.$transcriptToggle =\n this.$imageWrapper &&\n this.$imageWrapper.querySelector(\".tna-picture__toggle-transcript\");\n\n this.$transcript =\n $module && $module.querySelector(\".tna-picture__transcript\");\n this.transcriptOpened = false;\n\n if (\n !this.$module ||\n !this.$imageWrapper ||\n !this.$transcriptToggle ||\n !this.$transcript\n ) {\n return;\n }\n\n this.openLabel =\n this.$module.dataset.informationLabelOpen || \"Open transcript\";\n this.closeLabel =\n this.$module.dataset.informationLabelClose || \"Close transcript\";\n\n this.init();\n }\n\n init() {\n const uniqueId = `tna-picture-${uuidv4()}`;\n\n this.$transcriptToggle.removeAttribute(\"hidden\");\n this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcriptToggle.addEventListener(\"click\", () =>\n this.toggleTranscript(),\n );\n\n this.$transcript.setAttribute(\"id\", uniqueId);\n this.$transcript.setAttribute(\"hidden\", \"\");\n\n this.$transcript.addEventListener(\"keydown\", (event) => {\n switch (event.key) {\n case \"Escape\":\n this.toggleTranscript();\n this.$transcriptToggle.focus();\n break;\n default:\n break;\n }\n });\n }\n\n toggleTranscript() {\n this.transcriptOpened = !this.transcriptOpened;\n if (this.transcriptOpened) {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n this.$transcriptToggle.innerText = this.closeLabel;\n this.$transcript.removeAttribute(\"hidden\");\n } else {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcript.setAttribute(\"hidden\", \"\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__WEBPACK_DEFAULT_EXPORT__","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcriptToggle","$transcript","transcriptOpened","openLabel","dataset","informationLabelOpen","closeLabel","informationLabelClose","init","_this","uniqueId","concat","uuidv4","removeAttribute","setAttribute","innerText","addEventListener","toggleTranscript","event","focus"],"sourceRoot":""}
1
+ {"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,0DCPD,MAQAC,EARe,KACZ,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAYC,IAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,OCNfC,EAAA,GAGA,SAAAC,EAAAC,GAEA,IAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAAf,QAGA,IAAAC,EAAAW,EAAAE,GAAA,CAGAd,QAAA,IAOA,OAHAiB,EAAAH,GAAAb,EAAAA,EAAAD,QAAAa,GAGAZ,EAAAD,OACA,CCrBAa,EAAAK,EAAA,CAAAlB,EAAAmB,KACA,QAAAC,KAAAD,EACAN,EAAAQ,EAAAF,EAAAC,KAAAP,EAAAQ,EAAArB,EAAAoB,IACAE,OAAAC,eAAAvB,EAAAoB,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCP,EAAAQ,EAAA,CAAAK,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAd,EAAAkB,EAAA/B,IACA,oBAAAgC,QAAAA,OAAAC,aACAX,OAAAC,eAAAvB,EAAAgC,OAAAC,YAAA,CAAuDC,MAAA,WAEvDZ,OAAAC,eAAAvB,EAAA,cAAgDkC,OAAA,yDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,+BAEnCF,KAAKG,kBACHH,KAAKC,eACLD,KAAKC,cAAcC,cAAc,mCAEnCF,KAAKI,YACHL,GAAWA,EAAQG,cAAc,4BACnCF,KAAKK,kBAAmB,EAGrBL,KAAKD,SACLC,KAAKC,eACLD,KAAKG,mBACLH,KAAKI,cAKRJ,KAAKM,UACHN,KAAKD,QAAQQ,QAAQC,sBAAwB,kBAC/CR,KAAKS,WACHT,KAAKD,QAAQQ,QAAQG,uBAAyB,mBAEhDV,KAAKW,OACP,CAEA,IAAAA,GACE,MAAMC,EAAW,gBAAe,EAAAC,EAAAC,OAEhCd,KAAKG,kBAAkBY,gBAAgB,UACvCf,KAAKG,kBAAkBa,aAAa,gBAAiBJ,GACrDZ,KAAKG,kBAAkBc,UAAYjB,KAAKM,UACxCN,KAAKG,kBAAkBe,iBAAiB,QAAS,IAC/ClB,KAAKmB,oBAGPnB,KAAKI,YAAYY,aAAa,KAAMJ,GACpCZ,KAAKI,YAAYY,aAAa,SAAU,IAExChB,KAAKI,YAAYc,iBAAiB,UAAYE,IAErC,WADCA,EAAMtC,MAEVkB,KAAKmB,mBACLnB,KAAKG,kBAAkBkB,UAM/B,CAEA,gBAAAF,GACEnB,KAAKK,kBAAoBL,KAAKK,iBAC1BL,KAAKK,kBACPL,KAAKG,kBAAkBa,aAAa,iBAAiB,GACrDhB,KAAKG,kBAAkBc,UAAYjB,KAAKS,WACxCT,KAAKI,YAAYW,gBAAgB,YAEjCf,KAAKG,kBAAkBa,aAAa,iBAAiB,GACrDhB,KAAKG,kBAAkBc,UAAYjB,KAAKM,UACxCN,KAAKI,YAAYY,aAAa,SAAU,IAE5C","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/picture/picture.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/* eslint-disable no-magic-numbers */\n/* eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n constructor($module) {\n this.$module = $module;\n this.$imageWrapper =\n $module && $module.querySelector(\".tna-picture__image-wrapper\");\n\n this.$transcriptToggle =\n this.$imageWrapper &&\n this.$imageWrapper.querySelector(\".tna-picture__toggle-transcript\");\n\n this.$transcript =\n $module && $module.querySelector(\".tna-picture__transcript\");\n this.transcriptOpened = false;\n\n if (\n !this.$module ||\n !this.$imageWrapper ||\n !this.$transcriptToggle ||\n !this.$transcript\n ) {\n return;\n }\n\n this.openLabel =\n this.$module.dataset.informationLabelOpen || \"Open transcript\";\n this.closeLabel =\n this.$module.dataset.informationLabelClose || \"Close transcript\";\n\n this.init();\n }\n\n init() {\n const uniqueId = `tna-picture-${uuidv4()}`;\n\n this.$transcriptToggle.removeAttribute(\"hidden\");\n this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcriptToggle.addEventListener(\"click\", () =>\n this.toggleTranscript(),\n );\n\n this.$transcript.setAttribute(\"id\", uniqueId);\n this.$transcript.setAttribute(\"hidden\", \"\");\n\n this.$transcript.addEventListener(\"keydown\", (event) => {\n switch (event.key) {\n case \"Escape\":\n this.toggleTranscript();\n this.$transcriptToggle.focus();\n break;\n default:\n break;\n }\n });\n }\n\n toggleTranscript() {\n this.transcriptOpened = !this.transcriptOpened;\n if (this.transcriptOpened) {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n this.$transcriptToggle.innerText = this.closeLabel;\n this.$transcript.removeAttribute(\"hidden\");\n } else {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcript.setAttribute(\"hidden\", \"\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__WEBPACK_DEFAULT_EXPORT__","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","constructor","$module","this","$imageWrapper","querySelector","$transcriptToggle","$transcript","transcriptOpened","openLabel","dataset","informationLabelOpen","closeLabel","informationLabelClose","init","uniqueId","_lib_uuid_mjs__WEBPACK_IMPORTED_MODULE_0__","A","removeAttribute","setAttribute","innerText","addEventListener","toggleTranscript","event","focus"],"sourceRoot":""}
package/nationalarchives/components/sidebar/sidebar.css CHANGED
@@ -1 +1 @@
1
- .tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-sidebar{width:100%;font-size:1rem}.tna-sidebar__items,.tna-sidebar__item-children{display:flex;flex-direction:column;gap:0.25rem;list-style:none}.tna-sidebar__items{padding-top:max(0.5rem,6px)}.tna-sidebar--contents .tna-sidebar__item-children{margin-top:0.25rem;padding-left:2rem;border-left:5px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-sidebar--sections .tna-sidebar__items{line-height:1.35}.tna-sidebar--sections .tna-sidebar__link{padding:0.25rem 0.5rem;display:block}.tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{border-radius:2px}.tna-sidebar--pages .tna-sidebar__item--current{padding-left:0.75rem;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-sidebar--pages .tna-sidebar__item--current>.tna-sidebar__link{font-weight:700}.tna-sidebar--pages .tna-sidebar__item-children{gap:0}.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--pages .tna-sidebar__item-children{padding-left:1.5rem}.tna-sidebar--contents .tna-sidebar__item,.tna-sidebar--contents .tna-sidebar__item-child,.tna-sidebar--pages .tna-sidebar__item-child{list-style:"— " outside}.tna-sidebar--contents .tna-sidebar__item::marker,.tna-sidebar--contents .tna-sidebar__item-child::marker,.tna-sidebar--pages .tna-sidebar__item-child::marker{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-sidebar--sticky{max-height:100vh;max-height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;position:sticky;top:0}@media(min-width: 30.0625em)and (max-width: 48em){.tna-sidebar--static-on-mobile,.tna-sidebar--static-on-small{max-height:none;position:static}}@media(max-width: 30em){.tna-sidebar--static-on-mobile,.tna-sidebar--static-on-tiny{max-height:none;position:static}}.tna-sidebar--sticky .tna-sidebar__items{margin:0;padding-bottom:6px;flex:1;overflow-y:auto}.tna-sidebar--sticky.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--sticky.tna-sidebar--pages .tna-sidebar__items{padding-right:1rem}.tna-sidebar--sticky.tna-sidebar--sections .tna-sidebar__items,.tna-sidebar--sticky.tna-sidebar--pages .tna-sidebar__items{width:calc(100% - 6px);padding-right:6px;padding-left:6px;box-sizing:content-box;position:relative;left:-6px}/*# sourceMappingURL=sidebar.css.map */
1
+ .tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-sidebar{width:100%;font-size:1rem}.tna-sidebar__items,.tna-sidebar__item-children{display:flex;flex-direction:column;gap:0.25rem;list-style:none}.tna-sidebar__items{padding-top:max(0.5rem,6px)}.tna-sidebar--contents .tna-sidebar__item-children{margin-top:0.25rem;padding-left:2rem;border-left:5px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-sidebar--sections .tna-sidebar__items{line-height:1.35}.tna-sidebar--sections .tna-sidebar__link{padding:0.25rem 0.5rem;display:block}.tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{border-radius:2px}.tna-sidebar--pages .tna-sidebar__item--current{padding-left:0.75rem;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-sidebar--pages .tna-sidebar__item--current>.tna-sidebar__link{font-weight:700}.tna-sidebar--pages .tna-sidebar__item-children{gap:0}.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--pages .tna-sidebar__item-children{padding-left:1.5rem}.tna-sidebar--contents .tna-sidebar__item,.tna-sidebar--contents .tna-sidebar__item-child,.tna-sidebar--pages .tna-sidebar__item-child{list-style:"— " outside}.tna-sidebar--contents .tna-sidebar__item::marker,.tna-sidebar--contents .tna-sidebar__item-child::marker,.tna-sidebar--pages .tna-sidebar__item-child::marker{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-sidebar--sticky{max-height:100vh;max-height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;position:sticky;top:0}.tna-sidebar--sticky .tna-sidebar__items{margin:0;padding-bottom:6px;flex:1;overflow-y:auto}.tna-sidebar--sticky.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--sticky.tna-sidebar--pages .tna-sidebar__items{padding-right:1rem}.tna-sidebar--sticky.tna-sidebar--sections .tna-sidebar__items,.tna-sidebar--sticky.tna-sidebar--pages .tna-sidebar__items{width:calc(100% - 6px);padding-right:6px;padding-left:6px;box-sizing:content-box;position:relative;left:-6px}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium .tna-sidebar__items{overflow-y:visible}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small .tna-sidebar__items{overflow-y:visible}}@media(max-width: 30em){.tna-column--full-tiny .tna-sidebar__items{overflow-y:visible}}/*# sourceMappingURL=sidebar.css.map */
package/nationalarchives/components/sidebar/sidebar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/sidebar/sidebar.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"CA0TA,sEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEAvPA,4CAJA,gCCtEF,aACE,WCFA,eDSA,gDAEE,aACA,sBACA,YAEA,gBAGF,oBACE,4BAuBF,mDACE,mBACA,kBDiDE,6DCvCJ,2CACE,iBAGF,0CACE,uBAEA,cAGF,sEEnEA,cCDsB,IH+EtB,gDACE,qBDiBE,+DCZJ,mEChEA,YGiBsB,IJmDtB,gDACE,MAQF,2FAEE,oBAGF,uIAGE,yBAEA,+JDjCF,6CC2CA,qBACE,iBACA,kBAEA,aACA,sBACA,sBAEA,gBACA,MK7EF,kDLiFE,6DAEE,gBAEA,iBK/EJ,wBLoFE,4DAEE,gBAEA,iBAIJ,yCACE,SACA,eMtJwB,INwJxB,OAEA,gBAGF,2HAEE,mBAGF,2HAEE,uBACA,cMrKwB,INsKxB,aMtKwB,INwKxB,uBAEA,kBACA","file":"sidebar.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 \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\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%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\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\" as a11yVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-sidebar {\n width: 100%;\n\n @include typography.font-size(16);\n\n &__heading {\n }\n\n &__items,\n &__item-children {\n display: flex;\n flex-direction: column;\n gap: spacing.space(0.25);\n\n list-style: none;\n }\n\n &__items {\n padding-top: max(\n spacing.space(0.5),\n #{a11yVars.$focus-outline-total-width}\n );\n }\n\n &__item {\n }\n\n &__item-children {\n }\n\n &__item-child {\n }\n\n &__link {\n }\n\n /*\n * ------------------------------------------\n * Contents\n * ------------------------------------------\n */\n &--contents &__item-children {\n margin-top: spacing.space(0.25);\n padding-left: spacing.space(2);\n\n @include colour.thick-keyline(\"left\");\n }\n\n /*\n * ------------------------------------------\n * Sections\n * ------------------------------------------\n */\n &--sections &__items {\n line-height: 1.35;\n }\n\n &--sections &__link {\n padding: spacing.space(0.25) spacing.space(0.5);\n\n display: block;\n }\n\n &--sections &__item--current &__link {\n @include colour.accent;\n\n @include borders.rounded-border;\n }\n\n /*\n * ------------------------------------------\n * Pages\n * ------------------------------------------\n */\n &--pages &__item--current {\n padding-left: spacing.space(0.75);\n\n @include colour.thick-keyline-accent(left);\n }\n\n &--pages &__item--current > &__link {\n @include typography.main-font-weight-bold;\n }\n\n &--pages &__item-children {\n gap: 0;\n }\n\n /*\n * ------------------------------------------\n * Dashed items\n * ------------------------------------------\n */\n &--contents &__items,\n &--pages &__item-children {\n padding-left: spacing.space(1.5);\n }\n\n &--contents &__item,\n &--contents &__item-child,\n &--pages &__item-child {\n list-style: \"— \" outside;\n\n &::marker {\n @include colour.colour-font(\"font-light\");\n }\n }\n\n /*\n * ------------------------------------------\n * Sticky\n * ------------------------------------------\n */\n &--sticky {\n max-height: 100vh;\n max-height: 100dvh;\n\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n\n position: sticky;\n top: 0;\n }\n\n @include media.on-small {\n &--static-on-mobile,\n &--static-on-small {\n max-height: none;\n\n position: static;\n }\n }\n\n @include media.on-tiny {\n &--static-on-mobile,\n &--static-on-tiny {\n max-height: none;\n\n position: static;\n }\n }\n\n &--sticky &__items {\n margin: 0;\n padding-bottom: a11yVars.$focus-outline-total-width;\n\n flex: 1;\n\n overflow-y: auto;\n }\n\n &--sticky#{&}--contents &__items,\n &--sticky#{&}--pages &__items {\n padding-right: spacing.space(1);\n }\n\n &--sticky#{&}--sections &__items,\n &--sticky#{&}--pages &__items {\n width: calc(100% - #{a11yVars.$focus-outline-total-width});\n padding-right: a11yVars.$focus-outline-total-width;\n padding-left: a11yVars.$focus-outline-total-width;\n\n box-sizing: content-box;\n\n position: relative;\n left: -#{a11yVars.$focus-outline-total-width};\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\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","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","$focus-outline-inner-width: 3px !default;\n$focus-outline-outer-width: 3px !default;\n$focus-outline-total-width: $focus-outline-inner-width +\n $focus-outline-outer-width;\n$focus-outline-active-inner-width: $focus-outline-inner-width - 1px !default;\n$focus-outline-active-outer-width: $focus-outline-outer-width - 1px !default;\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/sidebar/sidebar.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_a11y.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"CA0TA,sEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEAvPA,4CAJA,gCCtEF,aACE,WCFA,eDSA,gDAEE,aACA,sBACA,YAEA,gBAGF,oBACE,4BAuBF,mDACE,mBACA,kBDiDE,6DCvCJ,2CACE,iBAGF,0CACE,uBAEA,cAGF,sEEnEA,cCDsB,IH+EtB,gDACE,qBDiBE,+DCZJ,mEChEA,YGiBsB,IJmDtB,gDACE,MAQF,2FAEE,oBAGF,uIAGE,yBAEA,+JDjCF,6CC2CA,qBACE,iBACA,kBAEA,aACA,sBACA,sBAEA,gBACA,MAGF,yCACE,SACA,eKpIwB,ILsIxB,OAEA,gBAGF,2HAEE,mBAGF,2HAEE,uBACA,cKnJwB,ILoJxB,aKpJwB,ILsJxB,uBAEA,kBACA,UM7GF,kDNiHE,6CACE,oBM5GJ,kDNiHE,4CACE,oBM5GJ,wBNiHE,2CACE","file":"sidebar.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 \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\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%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\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\" as a11yVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-sidebar {\n width: 100%;\n\n @include typography.font-size(16);\n\n &__heading {\n }\n\n &__items,\n &__item-children {\n display: flex;\n flex-direction: column;\n gap: spacing.space(0.25);\n\n list-style: none;\n }\n\n &__items {\n padding-top: max(\n spacing.space(0.5),\n #{a11yVars.$focus-outline-total-width}\n );\n }\n\n &__item {\n }\n\n &__item-children {\n }\n\n &__item-child {\n }\n\n &__link {\n }\n\n /*\n * ------------------------------------------\n * Contents\n * ------------------------------------------\n */\n &--contents &__item-children {\n margin-top: spacing.space(0.25);\n padding-left: spacing.space(2);\n\n @include colour.thick-keyline(\"left\");\n }\n\n /*\n * ------------------------------------------\n * Sections\n * ------------------------------------------\n */\n &--sections &__items {\n line-height: 1.35;\n }\n\n &--sections &__link {\n padding: spacing.space(0.25) spacing.space(0.5);\n\n display: block;\n }\n\n &--sections &__item--current &__link {\n @include colour.accent;\n\n @include borders.rounded-border;\n }\n\n /*\n * ------------------------------------------\n * Pages\n * ------------------------------------------\n */\n &--pages &__item--current {\n padding-left: spacing.space(0.75);\n\n @include colour.thick-keyline-accent(left);\n }\n\n &--pages &__item--current > &__link {\n @include typography.main-font-weight-bold;\n }\n\n &--pages &__item-children {\n gap: 0;\n }\n\n /*\n * ------------------------------------------\n * Dashed items\n * ------------------------------------------\n */\n &--contents &__items,\n &--pages &__item-children {\n padding-left: spacing.space(1.5);\n }\n\n &--contents &__item,\n &--contents &__item-child,\n &--pages &__item-child {\n list-style: \"— \" outside;\n\n &::marker {\n @include colour.colour-font(\"font-light\");\n }\n }\n\n /*\n * ------------------------------------------\n * Sticky\n * ------------------------------------------\n */\n &--sticky {\n max-height: 100vh;\n max-height: 100dvh;\n\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n\n position: sticky;\n top: 0;\n }\n\n &--sticky &__items {\n margin: 0;\n padding-bottom: a11yVars.$focus-outline-total-width;\n\n flex: 1;\n\n overflow-y: auto;\n }\n\n &--sticky#{&}--contents &__items,\n &--sticky#{&}--pages &__items {\n padding-right: spacing.space(1);\n }\n\n &--sticky#{&}--sections &__items,\n &--sticky#{&}--pages &__items {\n width: calc(100% - #{a11yVars.$focus-outline-total-width});\n padding-right: a11yVars.$focus-outline-total-width;\n padding-left: a11yVars.$focus-outline-total-width;\n\n box-sizing: content-box;\n\n position: relative;\n left: -#{a11yVars.$focus-outline-total-width};\n }\n\n @include media.on-medium {\n .tna-column--full-medium &__items {\n overflow-y: visible;\n }\n }\n\n @include media.on-small {\n .tna-column--full-small &__items {\n overflow-y: visible;\n }\n }\n\n @include media.on-tiny {\n .tna-column--full-tiny &__items {\n overflow-y: visible;\n }\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\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","$focus-outline-inner-width: 3px !default;\n$focus-outline-outer-width: 3px !default;\n$focus-outline-total-width: $focus-outline-inner-width +\n $focus-outline-outer-width;\n$focus-outline-active-inner-width: $focus-outline-inner-width - 1px !default;\n$focus-outline-active-outer-width: $focus-outline-outer-width - 1px !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}
package/nationalarchives/components/sidebar/sidebar.js CHANGED
@@ -1,2 +1,2 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,n(i.key),i)}}function n(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}e.r(t),e.d(t,{Sidebar:()=>o});var o=function(){return e=function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.items=t&&Array.from(t.querySelectorAll(".tna-sidebar__item")).map(function(e){var t=e.querySelector(".tna-sidebar__link[href^='#']").getAttribute("href").substring(1);return{$item:e,id:t,target:document.getElementById(t)}}).filter(function(e){return e.target}),this.$module&&this.items){this.breakpoints={tiny:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-tiny")||"480px",small:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-small")||"768px",medium:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-medium")||"1024px"};var i=r.scrollTopThreshold,n=void 0===i?0:i,o=r.disableHighlightSize,l=void 0===o?"small":o;if(l){if(!Object.keys(this.breakpoints).includes(l))throw new Error("Invalid value for disableHighlightSize: ".concat(l,". Expected one of: ").concat(Object.keys(this.breakpoints).join(", ")));this.hideOnDevice=window.matchMedia("(max-width: ".concat(this.breakpoints[l],")"))}else this.hideOnDevice=null;this.scrollTopThreshold=n,this.init()}},(t=[{key:"init",value:function(){var e=this;this.currentItem=null,window.addEventListener("scroll",function(){return e.highlightCurrentSection()}),window.addEventListener("resize",function(){return e.highlightCurrentSection()}),this.highlightCurrentSection()}},{key:"highlightCurrentSection",value:function(){var e=this;if(this.hideOnDevice&&this.hideOnDevice.matches)return this.items.forEach(function(e){e.$item.classList.remove("tna-sidebar__item--current")}),void(this.currentItem=null);var t=this.items.findLast(function(t){return Math.floor(t.target.getBoundingClientRect().top)<=e.scrollTopThreshold});t!==this.currentItem&&this.items.forEach(function(r){t&&r===t?(e.currentItem=r,e.currentItem.$item.classList.add("tna-sidebar__item--current")):r.$item.classList.remove("tna-sidebar__item--current")}),this.currentItem=t||null}}])&&i(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})());
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{Sidebar:()=>i});class i{constructor(e,t={}){if(this.$module=e,this.items=e&&Array.from(e.querySelectorAll(".tna-sidebar__item")).map(e=>{const t=e.querySelector(".tna-sidebar__link[href^='#']").getAttribute("href").substring(1);return{$item:e,id:t,target:document.getElementById(t)}}).filter(e=>e.target),!this.$module||!this.items)return;const{scrollTopThreshold:i=0,disableHighlightSize:r="small"}=t;this.scrollTopThreshold=i,this.disableHighlightSize=r,this.init()}init(){if(this.breakpoints={tiny:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-tiny")||"480px",small:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-small")||"768px",medium:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-medium")||"1024px"},this.disableHighlightSize){if(!Object.keys(this.breakpoints).includes(this.disableHighlightSize))throw new Error(`Invalid value for disableHighlightSize: ${this.disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(", ")}`);this.hideOnDevice=window.matchMedia(`(max-width: ${this.breakpoints[this.disableHighlightSize]})`)}else this.hideOnDevice=null;this.currentItem=null,window.addEventListener("scroll",()=>this.highlightCurrentSection()),window.addEventListener("resize",()=>this.highlightCurrentSection()),this.highlightCurrentSection()}highlightCurrentSection(){if(this.hideOnDevice&&this.hideOnDevice.matches)return this.items.forEach(e=>{e.$item.classList.remove("tna-sidebar__item--current")}),void(this.currentItem=null);const e=this.items.findLast(e=>Math.floor(e.target.getBoundingClientRect().top)<=this.scrollTopThreshold);e!==this.currentItem&&this.items.forEach(t=>{e&&t===e?(this.currentItem=t,this.currentItem.$item.classList.add("tna-sidebar__item--current")):t.$item.classList.remove("tna-sidebar__item--current")}),this.currentItem=e||null}}return t})());
2
2
  //# sourceMappingURL=sidebar.js.map
package/nationalarchives/components/sidebar/sidebar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components/sidebar/sidebar.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,2sBCLzC,IAAMC,EAAO,WA2DjB,SA1DD,SAAAA,EAAYC,GAAuB,IAAdC,EAAOC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,CAAC,EAoB9B,+FApB+BG,CAAAC,KAAAP,GAC/BO,KAAKN,QAAUA,EACfM,KAAKC,MACHP,GACAQ,MAAMC,KAAKT,EAAQU,iBAAiB,uBACjCC,IAAI,SAACC,GACJ,IAAMC,EAAKD,EACRE,cAAc,iCACdC,aAAa,QAEbC,UAAU,GAEb,MAAO,CACLJ,MAAAA,EACAC,GAAAA,EACAI,OAJaC,SAASC,eAAeN,GAMzC,GACCO,OAAO,SAACC,GAAI,OAAKA,EAAKJ,MAAM,GAE5BX,KAAKN,SAAYM,KAAKC,MAA3B,CAIAD,KAAKgB,YAAc,CACjBC,KACEC,iBAAiBN,SAASO,iBAAiBC,iBACzC,4BACG,QACPC,MACEH,iBAAiBN,SAASO,iBAAiBC,iBACzC,6BACG,QACPE,OACEJ,iBAAiBN,SAASO,iBAAiBC,iBACzC,8BACG,UAIT,IAAAG,EAAmE5B,EAA3D6B,mBAAAA,OAAkB,IAAAD,EAAG,EAACA,EAAAE,EAAqC9B,EAAnC+B,qBAAAA,OAAoB,IAAAD,EAAG,QAAOA,EAE9D,GAAIC,EAAsB,CACxB,IAAK7C,OAAO8C,KAAK3B,KAAKgB,aAAaY,SAASF,GAC1C,MAAM,IAAIG,MAAK,2CAAAC,OAC8BJ,EAAoB,uBAAAI,OAAsBjD,OAAO8C,KAAK3B,KAAKgB,aAAae,KAAK,QAG5H/B,KAAKgC,aAAeC,OAAOC,WAAU,eAAAJ,OACpB9B,KAAKgB,YAAYU,GAAqB,KAEzD,MACE1B,KAAKgC,aAAe,KAGtBhC,KAAKwB,mBAAqBA,EAE1BxB,KAAKmC,MAnCL,CAoCF,KAAC,EAAAxD,IAAA,OAAAa,MAED,WAAO,IAAA4C,EAAApC,KACLA,KAAKqC,YAAc,KAEnBJ,OAAOK,iBAAiB,SAAU,kBAAMF,EAAKG,yBAAyB,GACtEN,OAAOK,iBAAiB,SAAU,kBAAMF,EAAKG,yBAAyB,GACtEvC,KAAKuC,yBACP,GAAC,CAAA5D,IAAA,0BAAAa,MAED,WAA0B,IAAAgD,EAAAxC,KACxB,GAAIA,KAAKgC,cAAgBhC,KAAKgC,aAAaS,QAKzC,OAJAzC,KAAKC,MAAMyC,QAAQ,SAAC3B,GAClBA,EAAKT,MAAMqC,UAAUC,OAAO,6BAC9B,QACA5C,KAAKqC,YAAc,MAIrB,IAAMQ,EAAW7C,KAAKC,MAAM6C,SAC1B,SAAC/B,GAAI,OACHgC,KAAKC,MAAMjC,EAAKJ,OAAOsC,wBAAwBC,MAC/CV,EAAKhB,kBAAkB,GAGvBqB,IAAa7C,KAAKqC,aACpBrC,KAAKC,MAAMyC,QAAQ,SAAC3B,GACd8B,GAAY9B,IAAS8B,GACvBL,EAAKH,YAActB,EACnByB,EAAKH,YAAY/B,MAAMqC,UAAUQ,IAAI,+BAErCpC,EAAKT,MAAMqC,UAAUC,OAAO,6BAEhC,GAEF5C,KAAKqC,YAAcQ,GAAY,IACjC,mFAAC,CA/FiB","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/sidebar/sidebar.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 ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Sidebar {\n constructor($module, options = {}) {\n this.$module = $module;\n this.items =\n $module &&\n Array.from($module.querySelectorAll(\".tna-sidebar__item\"))\n .map(($item) => {\n const id = $item\n .querySelector(\".tna-sidebar__link[href^='#']\")\n .getAttribute(\"href\")\n /* eslint-disable-next-line no-magic-numbers */\n .substring(1);\n const target = document.getElementById(id);\n return {\n $item,\n id,\n target,\n };\n })\n .filter((item) => item.target);\n\n if (!this.$module || !this.items) {\n return;\n }\n\n this.breakpoints = {\n tiny:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-tiny\",\n ) || \"480px\",\n small:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-small\",\n ) || \"768px\",\n medium:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-medium\",\n ) || \"1024px\",\n };\n\n /* eslint-disable-next-line no-magic-numbers */\n const { scrollTopThreshold = 0, disableHighlightSize = \"small\" } = options;\n\n if (disableHighlightSize) {\n if (!Object.keys(this.breakpoints).includes(disableHighlightSize)) {\n throw new Error(\n `Invalid value for disableHighlightSize: ${disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(\", \")}`,\n );\n }\n this.hideOnDevice = window.matchMedia(\n `(max-width: ${this.breakpoints[disableHighlightSize]})`,\n );\n } else {\n this.hideOnDevice = null;\n }\n\n this.scrollTopThreshold = scrollTopThreshold;\n\n this.init();\n }\n\n init() {\n this.currentItem = null;\n\n window.addEventListener(\"scroll\", () => this.highlightCurrentSection());\n window.addEventListener(\"resize\", () => this.highlightCurrentSection());\n this.highlightCurrentSection();\n }\n\n highlightCurrentSection() {\n if (this.hideOnDevice && this.hideOnDevice.matches) {\n this.items.forEach((item) => {\n item.$item.classList.remove(\"tna-sidebar__item--current\");\n });\n this.currentItem = null;\n return;\n }\n\n const $topItem = this.items.findLast(\n (item) =>\n Math.floor(item.target.getBoundingClientRect().top) <=\n this.scrollTopThreshold,\n );\n\n if ($topItem !== this.currentItem) {\n this.items.forEach((item) => {\n if ($topItem && item === $topItem) {\n this.currentItem = item;\n this.currentItem.$item.classList.add(\"tna-sidebar__item--current\");\n } else {\n item.$item.classList.remove(\"tna-sidebar__item--current\");\n }\n });\n }\n this.currentItem = $topItem || null;\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Sidebar","$module","options","arguments","length","undefined","_classCallCheck","this","items","Array","from","querySelectorAll","map","$item","id","querySelector","getAttribute","substring","target","document","getElementById","filter","item","breakpoints","tiny","getComputedStyle","documentElement","getPropertyValue","small","medium","_options$scrollTopThr","scrollTopThreshold","_options$disableHighl","disableHighlightSize","keys","includes","Error","concat","join","hideOnDevice","window","matchMedia","init","_this","currentItem","addEventListener","highlightCurrentSection","_this2","matches","forEach","classList","remove","$topItem","findLast","Math","floor","getBoundingClientRect","top","add"],"sourceRoot":""}
1
+ {"version":3,"file":"components/sidebar/sidebar.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,yCCLzC,MAAMC,EACX,WAAAC,CAAYC,EAASC,EAAU,CAAC,GAoB9B,GAnBAC,KAAKF,QAAUA,EACfE,KAAKC,MACHH,GACAI,MAAMC,KAAKL,EAAQM,iBAAiB,uBACjCC,IAAKC,IACJ,MAAMC,EAAKD,EACRE,cAAc,iCACdC,aAAa,QAEbC,UAAU,GAEb,MAAO,CACLJ,QACAC,KACAI,OAJaC,SAASC,eAAeN,MAOxCO,OAAQC,GAASA,EAAKJ,SAEtBX,KAAKF,UAAYE,KAAKC,MACzB,OAIF,MAAMe,mBAAEA,EAAqB,EAACC,qBAAEA,EAAuB,SAAYlB,EACnEC,KAAKgB,mBAAqBA,EAC1BhB,KAAKiB,qBAAuBA,EAE5BjB,KAAKkB,MACP,CAEA,IAAAA,GAgBE,GAfAlB,KAAKmB,YAAc,CACjBC,KACEC,iBAAiBT,SAASU,iBAAiBC,iBACzC,4BACG,QACPC,MACEH,iBAAiBT,SAASU,iBAAiBC,iBACzC,6BACG,QACPE,OACEJ,iBAAiBT,SAASU,iBAAiBC,iBACzC,8BACG,UAGLvB,KAAKiB,qBAAsB,CAC7B,IAAKjC,OAAO0C,KAAK1B,KAAKmB,aAAaQ,SAAS3B,KAAKiB,sBAC/C,MAAM,IAAIW,MACR,2CAA2C5B,KAAKiB,0CAA0CjC,OAAO0C,KAAK1B,KAAKmB,aAAaU,KAAK,SAGjI7B,KAAK8B,aAAeC,OAAOC,WACzB,eAAehC,KAAKmB,YAAYnB,KAAKiB,yBAEzC,MACEjB,KAAK8B,aAAe,KAGtB9B,KAAKiC,YAAc,KAEnBF,OAAOG,iBAAiB,SAAU,IAAMlC,KAAKmC,2BAC7CJ,OAAOG,iBAAiB,SAAU,IAAMlC,KAAKmC,2BAC7CnC,KAAKmC,yBACP,CAEA,uBAAAA,GACE,GAAInC,KAAK8B,cAAgB9B,KAAK8B,aAAaM,QAKzC,OAJApC,KAAKC,MAAMoC,QAAStB,IAClBA,EAAKT,MAAMgC,UAAUC,OAAO,qCAE9BvC,KAAKiC,YAAc,MAIrB,MAAMO,EAAWxC,KAAKC,MAAMwC,SACzB1B,GACC2B,KAAKC,MAAM5B,EAAKJ,OAAOiC,wBAAwBC,MAC/C7C,KAAKgB,oBAGLwB,IAAaxC,KAAKiC,aACpBjC,KAAKC,MAAMoC,QAAStB,IACdyB,GAAYzB,IAASyB,GACvBxC,KAAKiC,YAAclB,EACnBf,KAAKiC,YAAY3B,MAAMgC,UAAUQ,IAAI,+BAErC/B,EAAKT,MAAMgC,UAAUC,OAAO,gCAIlCvC,KAAKiC,YAAcO,GAAY,IACjC","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/sidebar/sidebar.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 ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Sidebar {\n constructor($module, options = {}) {\n this.$module = $module;\n this.items =\n $module &&\n Array.from($module.querySelectorAll(\".tna-sidebar__item\"))\n .map(($item) => {\n const id = $item\n .querySelector(\".tna-sidebar__link[href^='#']\")\n .getAttribute(\"href\")\n /* eslint-disable-next-line no-magic-numbers */\n .substring(1);\n const target = document.getElementById(id);\n return {\n $item,\n id,\n target,\n };\n })\n .filter((item) => item.target);\n\n if (!this.$module || !this.items) {\n return;\n }\n\n /* eslint-disable-next-line no-magic-numbers */\n const { scrollTopThreshold = 0, disableHighlightSize = \"small\" } = options;\n this.scrollTopThreshold = scrollTopThreshold;\n this.disableHighlightSize = disableHighlightSize;\n\n this.init();\n }\n\n init() {\n this.breakpoints = {\n tiny:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-tiny\",\n ) || \"480px\",\n small:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-small\",\n ) || \"768px\",\n medium:\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--media-breakpoint-medium\",\n ) || \"1024px\",\n };\n\n if (this.disableHighlightSize) {\n if (!Object.keys(this.breakpoints).includes(this.disableHighlightSize)) {\n throw new Error(\n `Invalid value for disableHighlightSize: ${this.disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(\", \")}`,\n );\n }\n this.hideOnDevice = window.matchMedia(\n `(max-width: ${this.breakpoints[this.disableHighlightSize]})`,\n );\n } else {\n this.hideOnDevice = null;\n }\n\n this.currentItem = null;\n\n window.addEventListener(\"scroll\", () => this.highlightCurrentSection());\n window.addEventListener(\"resize\", () => this.highlightCurrentSection());\n this.highlightCurrentSection();\n }\n\n highlightCurrentSection() {\n if (this.hideOnDevice && this.hideOnDevice.matches) {\n this.items.forEach((item) => {\n item.$item.classList.remove(\"tna-sidebar__item--current\");\n });\n this.currentItem = null;\n return;\n }\n\n const $topItem = this.items.findLast(\n (item) =>\n Math.floor(item.target.getBoundingClientRect().top) <=\n this.scrollTopThreshold,\n );\n\n if ($topItem !== this.currentItem) {\n this.items.forEach((item) => {\n if ($topItem && item === $topItem) {\n this.currentItem = item;\n this.currentItem.$item.classList.add(\"tna-sidebar__item--current\");\n } else {\n item.$item.classList.remove(\"tna-sidebar__item--current\");\n }\n });\n }\n this.currentItem = $topItem || null;\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Sidebar","constructor","$module","options","this","items","Array","from","querySelectorAll","map","$item","id","querySelector","getAttribute","substring","target","document","getElementById","filter","item","scrollTopThreshold","disableHighlightSize","init","breakpoints","tiny","getComputedStyle","documentElement","getPropertyValue","small","medium","keys","includes","Error","join","hideOnDevice","window","matchMedia","currentItem","addEventListener","highlightCurrentSection","matches","forEach","classList","remove","$topItem","findLast","Math","floor","getBoundingClientRect","top","add"],"sourceRoot":""}
package/nationalarchives/components/sidebar/sidebar.mjs CHANGED
@@ -23,6 +23,15 @@ export class Sidebar {
23
23
  return;
24
24
  }
25
25
 
26
+ /* eslint-disable-next-line no-magic-numbers */
27
+ const { scrollTopThreshold = 0, disableHighlightSize = "small" } = options;
28
+ this.scrollTopThreshold = scrollTopThreshold;
29
+ this.disableHighlightSize = disableHighlightSize;
30
+
31
+ this.init();
32
+ }
33
+
34
+ init() {
26
35
  this.breakpoints = {
27
36
  tiny:
28
37
  getComputedStyle(document.documentElement).getPropertyValue(
@@ -38,28 +47,19 @@ export class Sidebar {
38
47
  ) || "1024px",
39
48
  };
40
49
 
41
- /* eslint-disable-next-line no-magic-numbers */
42
- const { scrollTopThreshold = 0, disableHighlightSize = "small" } = options;
43
-
44
- if (disableHighlightSize) {
45
- if (!Object.keys(this.breakpoints).includes(disableHighlightSize)) {
50
+ if (this.disableHighlightSize) {
51
+ if (!Object.keys(this.breakpoints).includes(this.disableHighlightSize)) {
46
52
  throw new Error(
47
- `Invalid value for disableHighlightSize: ${disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(", ")}`,
53
+ `Invalid value for disableHighlightSize: ${this.disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(", ")}`,
48
54
  );
49
55
  }
50
56
  this.hideOnDevice = window.matchMedia(
51
- `(max-width: ${this.breakpoints[disableHighlightSize]})`,
57
+ `(max-width: ${this.breakpoints[this.disableHighlightSize]})`,
52
58
  );
53
59
  } else {
54
60
  this.hideOnDevice = null;
55
61
  }
56
62
 
57
- this.scrollTopThreshold = scrollTopThreshold;
58
-
59
- this.init();
60
- }
61
-
62
- init() {
63
63
  this.currentItem = null;
64
64
 
65
65
  window.addEventListener("scroll", () => this.highlightCurrentSection());