npm - @nationalarchives/frontend - Versions diffs - 0.1.64 → 0.2.0 - Mend

@nationalarchives/frontend 0.1.64 → 0.2.0

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

Files changed (270) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAUA,eACE,gBAEA,2BACE,aCTJ,eCiEM,wDD1DJ,wBC0DI,2DDvDF,kBACA,UAGF,2DACE,UAGF,wBACE,0BAGA,kBEJF,YCYsB,IHLpB,gBAEA,mBAEA,eAEA,gDACE,aAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,8DACA,mBAGF,8BEOF,0BACA,0BCpCsC,MF2BtC,4DDKI,sCACE,0DAKN,wBACE,aAEA,gEACE,gBACA,eAGF,2CACE,gBACA,eAEA,OAGF,mCACE,wBACA,kBACA,iBAEA,4CACE,cACA,oBAEA,kBACA,oBACA,gBACA,iBAMJ,8DACE,2CC4UJ,8BDtUI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAKF,8DACE,YAEA","file":"accordion.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n // @include colour.thick-keyline-dark(top);\n // @include colour.thick-keyline-accent(top);\n\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n }\n\n &__details:has(&__summary:focus) {\n z-index: 2;\n }\n\n &__summary {\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n position: relative;\n\n @include typography.main-font-weight-bold;\n list-style: none;\n\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n &:has(.tna-table-wrapper):has(.tna-table) {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-table-wrapper {\n padding-right: 0;\n padding-left: 0;\n\n left: 0;\n }\n\n .tna-table {\n width: calc(100% - #{spacing.space(2)});\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n\n &__caption {\n padding-top: 0;\n padding-bottom: spacing.space(1);\n\n font-size: inherit;\n line-height: inherit;\n text-align: left;\n caption-side: top;\n }\n }\n }\n\n &__details[open] &__summary {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n }\n\n &__details[open] &__summary {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\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(--font-base);\n --accent-list-marker: var(--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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-accent-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-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-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(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accent-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(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accent-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(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accent-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(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accent-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","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !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.6 !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAUA,oCACE,gBAEA,4DACE,aCDF,wBACE,iBAGF,qBACE,iBAIF,wBCgDI,2DD7CF,kBACA,UAEA,oCC0CE,wDDnCJ,sHAEE,UAGF,wBACE,WACA,SACA,0BAGA,cAEA,kBAEA,oBACA,gBAEA,gBAEA,yBAEA,YACA,mBAEA,eCVF,qCC5CA,mBAqBA,YCIA,qBDHA,kBACA,yBACA,mCAPA,YCYsB,IH+BpB,0BACE,kBAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,8DACA,mBAGF,8BEvBF,0BACA,0BCpCsC,MF2BtC,4DDmCI,sCACE,0DAKF,oDACE,2CAKN,wBACE,aAEA,kBAEA,mBAEA,8BACE,UAGF,gEACE,gBACA,eAGF,2CACE,gBACA,eAEA,OAGF,mCACE,wBACA,kBACA,iBAEA,4CACE,cACA,oBAEA,kBACA,oBACA,gBACA,iBCmSN,8BD5RI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAIA,oDACE,YAEA","file":"accordion.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n // NON INTERACTIVE\n &__item {\n @include spacing.space-above;\n }\n\n &__heading {\n padding-top: spacing.space(1);\n }\n\n &__body {\n padding-top: spacing.space(1);\n }\n\n // INTERACTIVE\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n\n &:first-child {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n // @include colour.thick-keyline-dark(top);\n // @include colour.thick-keyline-accent(top);\n }\n }\n\n &__details:has(&__summary:focus),\n &__details:has(&__content:focus) {\n z-index: 2;\n }\n\n &__summary {\n width: 100%;\n margin: 0;\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n display: block;\n\n position: relative;\n\n line-height: inherit;\n text-align: left;\n\n list-style: none;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(18);\n @include typography.main-font(true);\n\n * {\n font-size: inherit;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n position: relative;\n\n border-radius: 0.1px;\n\n &:focus {\n z-index: 2;\n }\n\n &:has(.tna-table-wrapper):has(.tna-table) {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-table-wrapper {\n padding-right: 0;\n padding-left: 0;\n\n left: 0;\n }\n\n .tna-table {\n width: calc(100% - #{spacing.space(2)});\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n\n &__caption {\n padding-top: 0;\n padding-bottom: spacing.space(1);\n\n font-size: inherit;\n line-height: inherit;\n text-align: left;\n caption-side: top;\n }\n }\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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(--font-base);\n --accent-list-marker: var(--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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !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.6 !default;\n"]}

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var o in r)e.o(r,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:r[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function 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 o(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,i(o.key),o)}}function n(e,t,r){return t&&o(e.prototype,t),r&&o(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(e){var t=function(e,t){if("object"!=r(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,"string");if("object"!=r(n))return n;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,{Accordion:()=>l});var l=n((function e(t){var r,o,n=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r=this,(o=i(o="polyfillRequired"))in r?Object.defineProperty(r,o,{value:null,enumerable:!0,configurable:!0,writable:!0}):r[o]=null,this.$module=t,this.$firstDetailsElement=t&&t.querySelector(".tna-accordion__details[name]"),this.$detailsElements=t&&this.$firstDetailsElement&&document.querySelectorAll('.tna-accordion__details[name="'.concat(this.$firstDetailsElement.getAttribute("name"),'"]')),this.$module&&this.$detailsElements&&Array.from(this.$detailsElements).forEach((function(e){e.addEventListener("toggle",(function(e){var t=e.target;t.hasAttribute("open")&&Array.from(n.$detailsElements).filter((function(e){return e!==t&&e.hasAttribute("open")})).forEach((function(e){return e.removeAttribute("open")}))}))}))}));return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},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 n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,o(n.key),n)}}function o(e){var t=function(e,t){if("object"!=r(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,"string");if("object"!=r(o))return o;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,{Accordion:()=>i});var i=function(){return e=function e(t){var r,n,i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r=this,(n=o(n="polyfillRequired"))in r?Object.defineProperty(r,n,{value:null,enumerable:!0,configurable:!0,writable:!0}):r[n]=null,this.$module=t,this.$items=t&&t.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"===this.$module.dataset.multipleitems,this.$items.forEach((function(e){return i.initItem(e)})),this.initState())},(t=[{key:"initItem",value:function(e){var t=this,r=e.querySelector(".tna-accordion__heading"),n=e.querySelector(".tna-accordion__body");if(r&&n){e.classList.add("tna-accordion__details"),e.classList.remove("tna-accordion__item"),r.removeAttribute("class"),n.classList.add("tna-accordion__content"),n.classList.remove("tna-accordion__body"),n.setAttribute("hidden","until-found"),n.addEventListener("blur",(function(){n.removeAttribute("tabindex")}));var o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("aria-controls",n.id),r.parentNode.insertBefore(o,r.nextSibling),o.appendChild(r),o.addEventListener("click",(function(){"true"===o.getAttribute("aria-expanded")?t.closeItem(e):t.openItem(e)}))}}},{key:"initState",value:function(){var e=this;this.$items.forEach((function(t){"true"===t.dataset.isopen?e.openItem(t):e.closeItem(t),t.removeAttribute("data-isopen")}))}},{key:"openItem",value:function(e){this.allowMultipleItemsOpen||this.closeAllItemsExcept(e);var t=e.querySelector(".tna-accordion__summary"),r=e.querySelector(".tna-accordion__content");t.setAttribute("aria-expanded","true"),t.setAttribute("aria-label","".concat(t.innerText,", Hide this section")),r.removeAttribute("hidden"),r.setAttribute("tabindex","0"),r.focus()}},{key:"closeItem",value:function(e){var t=e.querySelector(".tna-accordion__summary"),r=e.querySelector(".tna-accordion__content");t.setAttribute("aria-expanded","false"),t.setAttribute("aria-label","".concat(t.innerText,", Show this section")),r.setAttribute("hidden","until-found")}},{key:"closeAllItemsExcept",value:function(e){var t=this;Array.from(this.$items).filter((function(t){return t.querySelector(".tna-accordion__summary")!==e&&"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")})).forEach((function(e){return t.closeItem(e)}))}}])&&n(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})()));
 //# sourceMappingURL=accordion.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/accordion/accordion.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,~~qzBCLvD~~,IAAMC,~~EAASC~~,~~GAGpB~~,~~SAAAD~~,~~EAAYE~~,GAAS,I,IAAAC,EAAA,M,4FAAAC,CAAA,~~KAAAJ~~,G,EAAA,M,MAAA,uB,mCAFF,K,iDAAA,~~KAGjBK~~,KAAKH,QAAUA,EACfG,KAAKC,~~qBACHJ~~,GAAWA,EAAQK,~~cAAc~~,~~iCACnCF~~,KAAKG,~~iBACHN~~,~~GACAG~~,KAAKC,~~sBACLG~~,SAASC,iBAAiB,~~iCAADC~~,~~OACUN~~,~~KAAKC~~,~~qBAAqBM~~,aAAa,~~QAAO~~,~~OAE9EP~~,~~KAAKH~~,~~SAAYG~~,~~KAAKG~~,~~kBAI3BK~~,~~MAAMC~~,~~KAAKT~~,~~KAAKG~~,~~kBAAkBO~~,SAAQ,SAACC,~~GACzCA~~,~~EAAgBC~~,~~iBAAiB~~,~~UAAU~~,~~SAACC~~,~~GAC1C~~,~~IAAMC~~,~~EAAsBD~~,~~EAAEE~~,~~OAC1BD~~,~~EAAoBE~~,aAAa,~~SACnCR~~,MAAMC,~~KAAKX~~,~~EAAKK~~,~~kBACbc~~,QACC,~~SAACC~~,~~GAAmB~~,~~OAClBA~~,~~IAAwBJ~~,~~GACxBI~~,~~EAAoBF~~,aAAa,~~OAAO~~,~~IAE3CN~~,SAAQ,~~SAACQ~~,~~GAAmB~~,~~OAC3BA~~,~~EAAoBC~~,~~gBAAgB~~,~~OAAO~~,~~GAGnD~~,~~GACF~~,~~GACF~~,I","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/accordion/accordion.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// 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 Accordion {\n polyfillRequired = null;\n\n constructor($module) {\n this.$module = $module;\n this.$~~firstDetailsElement~~ ~~=\n~~ $module && $module.~~querySelector~~(\".tna-~~accordion__details[name]~~\");\n this.$~~detailsElements~~ =\n $module ~~&&\~~n this.$~~firstDetailsElement~~ ~~&&\~~n ~~document~~.~~querySelectorAll~~(\n ~~`.tna-accordion__details[name=\"~~${~~this.$firstDetailsElement~~.~~getAttribute~~(\"~~name~~\")}\"~~]`,\n~~ );\n if (~~!this.$module~~ \|\| ~~!this.$detailsElements~~) {\n return;\n }\n\n ~~Array~~.~~from~~(~~this.$detailsElements~~).~~forEach~~(($~~detailsElement~~) => {\n $~~detailsElement~~.addEventListener(\"~~toggle~~\", (e) => {\n const ~~$thisDetailsElement~~ = e.~~target~~;\n if ($~~thisDetailsElement~~.~~hasAttribute~~(\"~~open~~\")) {\n ~~Array~~.~~from~~(~~this.$detailsElements~~)\n .~~filter~~(\n ($~~eachDetailsElement~~) ~~=>\~~n $~~eachDetailsElement~~ ~~!==~~ $~~thisDetailsElement~~ ~~&&\~~n $~~eachDetailsElement~~.~~hasAttribute~~(\"~~open~~\"),\n )\n .~~forEach~~(($~~eachDetailsElement~~) ~~=>\~~n $~~eachDetailsElement~~.~~removeAttribute~~(\"~~open~~\"),\n );\n }\n });\n });\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","Accordion","~~_createClass","~~$module","_this","_classCallCheck","this","$~~firstDetailsElement~~","querySelector","$~~detailsElements~~","document","~~querySelectorAll~~","~~concat~~","~~getAttribute~~","~~Array~~","~~from~~","~~forEach~~","~~$detailsElement~~","~~addEventListener~~","e","~~$thisDetailsElement~~","~~target~~","~~hasAttribute~~","~~filter~~","$~~eachDetailsElement~~","~~removeAttribute~~"],"sourceRoot":""}
1	+ {"version":3,"file":"components/accordion/accordion.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,ysBCLvD,IAAMC,EAAS,WAenB,O,EAZD,SAAAA,EAAYC,GAAS,I,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,G,EAAA,M,MAAA,uB,mCAFF,K,iDAAA,KAGjBI,KAAKH,QAAUA,EACfG,KAAKC,OAASJ,GAAWA,EAAQK,iBAAiB,wBAC7CF,KAAKH,SAAYG,KAAKC,SAI3BD,KAAKG,uBACuC,SAA1CH,KAAKH,QAAQO,QAAuB,cAEtCJ,KAAKC,OAAOI,SAAQ,SAACC,GAAK,OAAKR,EAAKS,SAASD,EAAM,IACnDN,KAAKQ,YACP,G,EAAC,EAAA1B,IAAA,WAAAa,MAED,SAASW,GAAO,IAAAG,EAAA,KACRC,EAAWJ,EAAMK,cAAc,2BAC/BC,EAAWN,EAAMK,cAAc,wBAErC,GAAKD,GAAaE,EAAlB,CAIAN,EAAMO,UAAUC,IAAI,0BACpBR,EAAMO,UAAUE,OAAO,uBAEvBL,EAASM,gBAAgB,SAEzBJ,EAASC,UAAUC,IAAI,0BACvBF,EAASC,UAAUE,OAAO,uBAC1BH,EAASK,aAAa,SAAU,eAChCL,EAASM,iBAAiB,QAAQ,WAChCN,EAASI,gBAAgB,WAC3B,IAEA,IAAMG,EAAiBC,SAASC,cAAc,UAC9CF,EAAeN,UAAUC,IAAI,0BAC7BK,EAAeF,aAAa,gBAAiBL,EAASU,IACtDZ,EAASa,WAAWC,aAAaL,EAAgBT,EAASe,aAC1DN,EAAeO,YAAYhB,GAE3BS,EAAeD,iBAAiB,SAAS,WACyB,SAAjDC,EAAeQ,aAAa,iBAEzClB,EAAKmB,UAAUtB,GAEfG,EAAKoB,SAASvB,EAElB,GA3BA,CA4BF,GAAC,CAAAxB,IAAA,YAAAa,MAED,WAAY,IAAAmC,EAAA,KACV9B,KAAKC,OAAOI,SAAQ,SAACC,GACa,SAA5BA,EAAMF,QAAgB,OACxB0B,EAAKD,SAASvB,GAEdwB,EAAKF,UAAUtB,GAEjBA,EAAMU,gBAAgB,cACxB,GACF,GAAC,CAAAlC,IAAA,WAAAa,MAED,SAASW,GACFN,KAAKG,wBACRH,KAAK+B,oBAAoBzB,GAE3B,IAAMa,EAAiBb,EAAMK,cAAc,2BACrCC,EAAWN,EAAMK,cAAc,2BACrCQ,EAAeF,aAAa,gBAAiB,QAC7CE,EAAeF,aACb,aAAY,GAAAe,OACTb,EAAec,UAAS,wBAE7BrB,EAASI,gBAAgB,UACzBJ,EAASK,aAAa,WAAY,KAClCL,EAASsB,OACX,GAAC,CAAApD,IAAA,YAAAa,MAED,SAAUW,GACR,IAAMa,EAAiBb,EAAMK,cAAc,2BACrCC,EAAWN,EAAMK,cAAc,2BACrCQ,EAAeF,aAAa,gBAAiB,SAC7CE,EAAeF,aACb,aAAY,GAAAe,OACTb,EAAec,UAAS,wBAE7BrB,EAASK,aAAa,SAAU,cAClC,GAAC,CAAAnC,IAAA,sBAAAa,MAED,SAAoBwC,GAAc,IAAAC,EAAA,KAChCC,MAAMC,KAAKtC,KAAKC,QACbsC,QACC,SAACjC,GAAK,OACJA,EAAMK,cAAc,6BAA+BwB,GAGd,SAFrC7B,EACGK,cAAc,2BACdgB,aAAa,gBAA2B,IAE9CtB,SAAQ,SAACC,GAAK,OAAK8B,EAAKR,UAAUtB,EAAM,GAC7C,M,6EAAC,CArGmB,G","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/accordion/accordion.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// 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 Accordion {\n polyfillRequired = null;\n\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n this.allowMultipleItemsOpen =\n this.$module.dataset[\"multipleitems\"] === \"true\";\n\n this.$items.forEach(($item) => this.initItem($item));\n this.initState();\n }\n\n initItem($item) {\n const $heading = $item.querySelector(\".tna-accordion__heading\");\n const $content = $item.querySelector(\".tna-accordion__body\");\n\n if (!$heading \|\| !$content) {\n return;\n }\n\n $item.classList.add(\"tna-accordion__details\");\n $item.classList.remove(\"tna-accordion__item\");\n\n $heading.removeAttribute(\"class\");\n\n $content.classList.add(\"tna-accordion__content\");\n $content.classList.remove(\"tna-accordion__body\");\n $content.setAttribute(\"hidden\", \"until-found\");\n $content.addEventListener(\"blur\", () => {\n $content.removeAttribute(\"tabindex\");\n });\n\n const $headingButton = document.createElement(\"button\");\n $headingButton.classList.add(\"tna-accordion__summary\");\n $headingButton.setAttribute(\"aria-controls\", $content.id);\n $heading.parentNode.insertBefore($headingButton, $heading.nextSibling);\n $headingButton.appendChild($heading);\n\n $headingButton.addEventListener(\"click\", () => {\n const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n if (isOpen) {\n this.closeItem($item);\n } else {\n this.openItem($item);\n }\n });\n }\n\n initState() {\n this.$items.forEach(($item) => {\n if ($item.dataset[\"isopen\"] === \"true\") {\n this.openItem($item);\n } else {\n this.closeItem($item);\n }\n $item.removeAttribute(\"data-isopen\");\n });\n }\n\n openItem($item) {\n if (!this.allowMultipleItemsOpen) {\n this.closeAllItemsExcept($item);\n }\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"true\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText}, Hide this section`,\n );\n $content.removeAttribute(\"hidden\");\n $content.setAttribute(\"tabindex\", \"0\");\n $content.focus();\n }\n\n closeItem($item) {\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"false\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText}, Show this section`,\n );\n $content.setAttribute(\"hidden\", \"until-found\");\n }\n\n closeAllItemsExcept($excludeItem) {\n Array.from(this.$items)\n .filter(\n ($item) =>\n $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n )\n .forEach(($item) => this.closeItem($item));\n }\n}\n"],"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","Accordion","$module","_this","_classCallCheck","this","$items","querySelectorAll","allowMultipleItemsOpen","dataset","forEach","$item","initItem","initState","_this2","$heading","querySelector","$content","classList","add","remove","removeAttribute","setAttribute","addEventListener","$headingButton","document","createElement","id","parentNode","insertBefore","nextSibling","appendChild","getAttribute","closeItem","openItem","_this3","closeAllItemsExcept","concat","innerText","focus","$excludeItem","_this4","Array","from","filter"],"sourceRoot":""}

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

@@ -3,33 +3,101 @@ export class Accordion {
   constructor($module) {
     this.$module = $module;
-    this.$firstDetailsElement =
-      $module && $module.querySelector(".tna-accordion__details[name]");
-    this.$detailsElements =
-      $module &&
-      this.$firstDetailsElement &&
-      document.querySelectorAll(
-        `.tna-accordion__details[name="${this.$firstDetailsElement.getAttribute("name")}"]`,
-      );
-    if (!this.$module || !this.$detailsElements) {
+    this.$items = $module && $module.querySelectorAll(".tna-accordion__item");
+    if (!this.$module || !this.$items) {
       return;
     }
-    Array.from(this.$detailsElements).forEach(($detailsElement) => {
-      $detailsElement.addEventListener("toggle", (e) => {
-        const $thisDetailsElement = e.target;
-        if ($thisDetailsElement.hasAttribute("open")) {
-          Array.from(this.$detailsElements)
-            .filter(
-              ($eachDetailsElement) =>
-                $eachDetailsElement !== $thisDetailsElement &&
-                $eachDetailsElement.hasAttribute("open"),
-            )
-            .forEach(($eachDetailsElement) =>
-              $eachDetailsElement.removeAttribute("open"),
-            );
-        }
-      });
+    this.allowMultipleItemsOpen =
+      this.$module.dataset["multipleitems"] === "true";
+    this.$items.forEach(($item) => this.initItem($item));
+    this.initState();
+  }
+  initItem($item) {
+    const $heading = $item.querySelector(".tna-accordion__heading");
+    const $content = $item.querySelector(".tna-accordion__body");
+    if (!$heading || !$content) {
+      return;
+    }
+    $item.classList.add("tna-accordion__details");
+    $item.classList.remove("tna-accordion__item");
+    $heading.removeAttribute("class");
+    $content.classList.add("tna-accordion__content");
+    $content.classList.remove("tna-accordion__body");
+    $content.setAttribute("hidden", "until-found");
+    $content.addEventListener("blur", () => {
+      $content.removeAttribute("tabindex");
+    });
+    const $headingButton = document.createElement("button");
+    $headingButton.classList.add("tna-accordion__summary");
+    $headingButton.setAttribute("aria-controls", $content.id);
+    $heading.parentNode.insertBefore($headingButton, $heading.nextSibling);
+    $headingButton.appendChild($heading);
+    $headingButton.addEventListener("click", () => {
+      const isOpen = $headingButton.getAttribute("aria-expanded") === "true";
+      if (isOpen) {
+        this.closeItem($item);
+      } else {
+        this.openItem($item);
+      }
+    });
+  }
+  initState() {
+    this.$items.forEach(($item) => {
+      if ($item.dataset["isopen"] === "true") {
+        this.openItem($item);
+      } else {
+        this.closeItem($item);
+      }
+      $item.removeAttribute("data-isopen");
     });
   }
+  openItem($item) {
+    if (!this.allowMultipleItemsOpen) {
+      this.closeAllItemsExcept($item);
+    }
+    const $headingButton = $item.querySelector(".tna-accordion__summary");
+    const $content = $item.querySelector(".tna-accordion__content");
+    $headingButton.setAttribute("aria-expanded", "true");
+    $headingButton.setAttribute(
+      "aria-label",
+      `${$headingButton.innerText}, Hide this section`,
+    );
+    $content.removeAttribute("hidden");
+    $content.setAttribute("tabindex", "0");
+    $content.focus();
+  }
+  closeItem($item) {
+    const $headingButton = $item.querySelector(".tna-accordion__summary");
+    const $content = $item.querySelector(".tna-accordion__content");
+    $headingButton.setAttribute("aria-expanded", "false");
+    $headingButton.setAttribute(
+      "aria-label",
+      `${$headingButton.innerText}, Show this section`,
+    );
+    $content.setAttribute("hidden", "until-found");
+  }
+  closeAllItemsExcept($excludeItem) {
+    Array.from(this.$items)
+      .filter(
+        ($item) =>
+          $item.querySelector(".tna-accordion__summary") !== $excludeItem &&
+          $item
+            .querySelector(".tna-accordion__summary")
+            .getAttribute("aria-expanded") === "true",
+      )
+      .forEach(($item) => this.closeItem($item));
+  }
 }

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

@@ -6,36 +6,66 @@
 .tna-accordion {
   @include spacing.space-above;
-  @include colour.colour-border("keyline", 1px, solid, top);
-  // @include colour.thick-keyline-dark(top);
-  // @include colour.thick-keyline-accent(top);
+  // NON INTERACTIVE
+  &__item {
+    @include spacing.space-above;
+  }
+  &__heading {
+    padding-top: spacing.space(1);
+  }
+  &__body {
+    padding-top: spacing.space(1);
+  }
+  // INTERACTIVE
   &__details {
     @include colour.colour-border("keyline", 1px, solid, bottom);
     position: relative;
     z-index: 1;
+    &:first-child {
+      @include colour.colour-border("keyline", 1px, solid, top);
+      // @include colour.thick-keyline-dark(top);
+      // @include colour.thick-keyline-accent(top);
+    }
   }
-  &__details:has(&__summary:focus) {
+  &__details:has(&__summary:focus),
+  &__details:has(&__content:focus) {
     z-index: 2;
   }
   &__summary {
+    width: 100%;
+    margin: 0;
     padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)
       spacing.space(1);
+    display: block;
     position: relative;
-    @include typography.main-font-weight-bold;
+    line-height: inherit;
+    text-align: left;
     list-style: none;
+    background: transparent;
+    border: none;
     border-radius: 0.1px;
     cursor: pointer;
-    &::-webkit-details-marker {
-      display: none;
+    @include colour.colour-font("font-dark");
+    @include typography.font-size(18);
+    @include typography.main-font(true);
+    * {
+      font-size: inherit;
     }
     &::before {
@@ -61,11 +91,25 @@
         border-color: colour.colour-var("font-dark") transparent;
       }
     }
+    &[aria-expanded="true"] {
+      &::before {
+        border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
+      }
+    }
   }
   &__content {
     padding: spacing.space(1);
+    position: relative;
+    border-radius: 0.1px;
+    &:focus {
+      z-index: 2;
+    }
     &:has(.tna-table-wrapper):has(.tna-table) {
       padding-right: 0;
       padding-left: 0;
@@ -95,12 +139,6 @@
     }
   }
-  &__details[open] &__summary {
-    &::before {
-      border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
-    }
-  }
   @include colour.on-forced-colours {
     &__summary {
       &::before {
@@ -115,13 +153,13 @@
         border: none;
       }
-    }
-    &__details[open] &__summary {
-      &::before {
-        content: "\2191";
+      &[aria-expanded="true"] {
+        &::before {
+          content: "\2191";
-        border: none;
+          border: none;
+        }
       }
     }
   }

package/nationalarchives/components/accordion/fixtures.json CHANGED Viewed

@@ -4,6 +4,7 @@
     {
       "name": "minimal",
       "options": {
+        "itemHeadingLevel": 2,
         "items": [
           {
             "title": "Alpha",
@@ -13,13 +14,34 @@
             "title": "Beta",
             "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
           }
-        ]
+        ],
+        "id": "test"
+      },
+      "html": "<div class=\"tna-accordion\" data-multipleitems=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+    },
+    {
+      "name": "with open items",
+      "options": {
+        "itemHeadingLevel": 2,
+        "items": [
+          {
+            "title": "Alpha",
+            "text": "Content",
+            "open": true
+          },
+          {
+            "title": "Beta",
+            "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
+          }
+        ],
+        "id": "test"
       },
-      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+      "html": "<div class=\"tna-accordion\" data-multipleitems=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"true\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
-      "name": "with group",
+      "name": "allowing multiple items",
       "options": {
+        "itemHeadingLevel": 2,
         "items": [
           {
             "title": "Alpha",
@@ -30,13 +52,15 @@
             "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
           }
         ],
-        "group": "group-1"
+        "id": "test",
+        "openMultipleItems": true
       },
-      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\" name=\"group-1\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\" name=\"group-1\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+      "html": "<div class=\"tna-accordion\" data-multipleitems=\"true\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "with classes",
       "options": {
+        "itemHeadingLevel": 2,
         "items": [
           {
             "title": "Alpha",
@@ -47,13 +71,15 @@
             "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
           }
         ],
+        "id": "test",
         "classes": "accordion__test-class"
       },
-      "html": "<div class=\"tna-accordion accordion__test-class\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+      "html": "<div class=\"tna-accordion accordion__test-class\" data-multipleitems=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "with attributes",
       "options": {
+        "itemHeadingLevel": 2,
         "items": [
           {
             "title": "Alpha",
@@ -64,11 +90,12 @@
             "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
           }
         ],
+        "id": "test",
         "attributes": {
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\" data-testattribute=\"foobar\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+      "html": "<div class=\"tna-accordion\" data-multipleitems=\"false\" data-module=\"tna-accordion\" data-testattribute=\"foobar\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     }
   ]
 }

package/nationalarchives/components/accordion/macro-options.json CHANGED Viewed

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "itemHeadingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>` for each of the accordion items."
+  },
   {
     "name": "items",
     "type": "array",
@@ -32,10 +38,16 @@
     ]
   },
   {
-    "name": "group",
+    "name": "id",
     "type": "string",
+    "required": true,
+    "description": "A unique ID for the accordion group."
+  },
+  {
+    "name": "openMultipleItems",
+    "type": "boolean",
     "required": false,
-    "description": "The name of the accordion group. If set, only one item in the named group can be opened at a time."
+    "description": "If true, multiple accordion items can be opened."
   },
   {
     "name": "classes",