npm - @nationalarchives/frontend - Versions diffs - 0.1.33 → 0.1.35 - Mend

@nationalarchives/frontend 0.1.33 → 0.1.35

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 (42) hide show

package/nationalarchives/components/compound-filters/compound-filters.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/compound-filters/compound-filters.scss"],"names":[],"mappings":"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","file":"compound-filters.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Italic.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: italic;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line */\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n* {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: 1rem;\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n // &[target=\"_blank\"]:not([title*=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n%chip-base {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n padding-right: 0.5rem;\n\n color: inherit;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid,\n .fa-brand {\n color: inherit;\n }\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\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() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) 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 $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n@mixin light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\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\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\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\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\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\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\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 // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\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\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\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:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\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}: #{$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}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$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}: #{$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}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n@mixin focus-outline {\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n*:focus {\n z-index: 9;\n\n @include focus-outline;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// | . | | |\n// |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n// | . | | |\n// |<------------->| | | on-tiny\n// |<----------------------->| | on-mobile\n// |<------------------------------>| on-smaller-than-large\n// | . |<------->| | on-small\n// | . |<------------------------- on-larger-than-tiny\n// | . | |<---->| on-medium\n// | . | |<--------------- on-larger-than-mobile\n// | . | | |<-------- on-large\n// |<------->. | | | Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\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-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: 1rem;\n\n @include colour.colour-border(\"form-error\", 0.25rem, solid, left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n margin-bottom: 0.5rem;\n }\n\n &__heading {\n margin: 0;\n\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n\n &--xs {\n font-size: 1em;\n @include typography.main-font;\n // @include typography.main-font-weight-bold;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /*\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n */\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n\n margin-left: 0;\n }\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-top: 0;\n // padding-bottom: 0;\n padding-left: 0;\n }\n\n dd {\n // margin-bottom: 0.5rem;\n padding-top: 0;\n padding-right: 0;\n // padding-bottom: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n margin-top: -0.25rem;\n\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-compound-filters {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.75rem 1rem;\n\n &__item {\n padding: 0 0.125rem 0 0.75rem;\n\n display: flex;\n gap: 0.5rem;\n align-items: center;\n\n @include typography.relative-font-size(16);\n line-height: 1.75;\n\n @include colour.colour-border(\"keyline\", 1px);\n border-radius: 1rem;\n\n &--remove {\n padding-right: 0;\n padding-left: 0;\n\n background: none;\n border: none;\n border-radius: 0;\n }\n }\n\n &__link {\n width: 1.5rem;\n height: 1.5rem;\n\n position: relative;\n\n text-decoration: none;\n font-size: 0;\n line-height: 0;\n\n border-radius: 100%;\n\n &::before,\n &::after {\n width: 2px;\n height: 1rem;\n margin-left: -1px;\n\n display: block;\n\n position: absolute;\n top: 0.25rem;\n left: 50%;\n\n @include colour.colour-background(\"font-base\");\n\n content: \"\";\n }\n\n &::before {\n transform: rotate(45deg);\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n\n &:hover {\n @include colour.contrast;\n }\n }\n}\n"]}

package/nationalarchives/components/compound-filters/compound-filters.scss ADDED Viewed

@@ -0,0 +1,78 @@
+@use "../../tools/colour";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+@use "../../utilities";
+.tna-compound-filters {
+  @include spacing.space-above;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  &__item {
+    padding: 0 0.125rem 0 0.75rem;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    @include typography.relative-font-size(16);
+    line-height: 1.75;
+    @include colour.colour-border("keyline", 1px);
+    border-radius: 1rem;
+    &--remove {
+      padding-right: 0;
+      padding-left: 0;
+      background: none;
+      border: none;
+      border-radius: 0;
+    }
+  }
+  &__link {
+    width: 1.5rem;
+    height: 1.5rem;
+    position: relative;
+    text-decoration: none;
+    font-size: 0;
+    line-height: 0;
+    border-radius: 100%;
+    &::before,
+    &::after {
+      width: 2px;
+      height: 1rem;
+      margin-left: -1px;
+      display: block;
+      position: absolute;
+      top: 0.25rem;
+      left: 50%;
+      @include colour.colour-background("font-base");
+      content: "";
+    }
+    &::before {
+      transform: rotate(45deg);
+    }
+    &::after {
+      transform: rotate(-45deg);
+    }
+    &:hover {
+      @include colour.contrast;
+    }
+  }
+}

package/nationalarchives/components/compound-filters/compound-filters.stories.js ADDED Viewed

@@ -0,0 +1,61 @@
+import Filters from "./template.njk";
+import macroOptions from "./macro-options.json";
+const argTypes = {
+  items: { control: "object" },
+  removeAllText: { control: "text" },
+  removeAllHref: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+export default {
+  title: "Components/Compound filters",
+  argTypes,
+};
+const Template = ({
+  items,
+  removeAllText,
+  removeAllHref,
+  classes,
+  attributes,
+}) =>
+  Filters({
+    params: {
+      items,
+      removeAllText,
+      removeAllHref,
+      classes,
+      attributes,
+    },
+  });
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      label: "AIR - Air Ministry and Royal Air Force records",
+      href: "#",
+      title: "Remove Air Ministry and Royal Air Force records filter",
+    },
+    {
+      label: "Item",
+      href: "#",
+      title: "Remove item filter",
+    },
+    {
+      label: "Closed Or Retained Document, Open Description",
+      href: "#",
+      title: "Remove filter for Closed Or Retained Document, Open Description",
+    },
+  ],
+  removeAllHref: "#",
+  classes: "tna-filters--demo",
+};

package/nationalarchives/components/compound-filters/fixtures.json ADDED Viewed

@@ -0,0 +1,46 @@
+{
+  "component": "compound-filters",
+  "fixtures": [
+    {
+      "name": "plain compound filters",
+      "options": {
+        "items": [
+          {
+            "label": "Medieval (974—1485)",
+            "href": "#?filter=alpha"
+          },
+          {
+            "label": "Early Modern (1485—1714)",
+            "href": "#?filter=beta"
+          },
+          {
+            "label": "Georgians (1714—1837)",
+            "href": "#?filter=gamma"
+          },
+          {
+            "label": "Victorians (1837—1901)",
+            "href": "#?filter=delta"
+          },
+          {
+            "label": "Early 20th century (1901—1918)",
+            "href": "#?filter=epsilon"
+          },
+          {
+            "label": "Interwar (1918—1939)",
+            "href": "#?filter=zeta"
+          },
+          {
+            "label": "Second World War (1939—1945)",
+            "href": "#?filter=eta"
+          },
+          {
+            "label": "Postwar (1945—2000)",
+            "href": "#?filter=theta"
+          }
+        ]
+      },
+      "html": "<ul class=\"tna-compound-filters tna-ul tna-ul--plain \"><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Medieval (974—1485)</span><a href=\"#?filter=alpha\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early Modern (1485—1714)</span><a href=\"#?filter=beta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Georgians (1714—1837)</span><a href=\"#?filter=gamma\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Victorians (1837—1901)</span><a href=\"#?filter=delta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early 20th century (1901—1918)</span><a href=\"#?filter=epsilon\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Interwar (1918—1939)</span><a href=\"#?filter=zeta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Second World War (1939—1945)</span><a href=\"#?filter=eta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Postwar (1945—2000)</span><a href=\"#?filter=theta\" class=\"tna-compound-filters__link\">Remove filter</a></li></ul>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/compound-filters/macro-options.json ADDED Viewed

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "label",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "removeAllText",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "removeAllHref",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the compound filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the compound filters."
+  }
+]

package/nationalarchives/components/compound-filters/macro.njk ADDED Viewed

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

package/nationalarchives/components/compound-filters/template.njk ADDED Viewed

@@ -0,0 +1,16 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<ul class="tna-compound-filters tna-ul tna-ul--plain {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items -%}
+  <li class="tna-compound-filters__item">
+    <span class="tna-compound-filters__label">{{ item.label }}</span>
+    <a href="{{ item.href }}" class="tna-compound-filters__link">{{ item.title if item.title else 'Remove filter' }}</a>
+  </li>
+  {%- endfor -%}
+  {% if params.removeAllHref %}
+  <li class="tna-compound-filters__item tna-compound-filters__item--remove">
+    <a href="{{ params.removeAllHref }}">
+      {{ params.removeAllText if params.removeAllText else 'Remove all filters' }}
+    </a>
+  </li>
+  {% endif %}
+</ul>

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

@@ -5,42 +5,42 @@
       "name": "default",
       "options": {
         "previous": {
-          "href": "#"
+          "href": "#previous"
         },
         "items": [
           {
             "number": 1,
-            "href": "#"
+            "href": "#1"
           },
           {
             "ellipsis": true
           },
           {
             "number": 6,
-            "href": "#"
+            "href": "#6"
           },
           {
             "number": 7,
             "current": true,
-            "href": "#"
+            "href": "#7"
           },
           {
             "number": 8,
-            "href": "#"
+            "href": "#8"
           },
           {
             "ellipsis": true
           },
           {
             "number": 42,
-            "href": "#"
+            "href": "#42"
           }
         ],
         "next": {
-          "href": "#"
+          "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination \" role=\"navigation\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#\" class=\"tna-button tna-button--icon-only-mobile\" rel=\"prev\"><i class=\"fa-solid fa-arrow-left\" aria-hidden=\"true\"></i>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#\" class=\"tna-button tna-pagination__link\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#\" class=\"tna-button tna-pagination__link\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#\" class=\"tna-button tna-pagination__link tna-button--accent\" aria-label=\"\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#\" class=\"tna-button tna-pagination__link\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#\" class=\"tna-button tna-pagination__link\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#\" class=\"tna-button tna-button--icon-right tna-button--icon-only-mobile\" rel=\"next\"><i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>Next</a></div></nav>",
+      "html": "<nav class=\"tna-pagination \" role=\"navigation\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--icon-only-mobile\" rel=\"prev\"><i class=\"fa-solid fa-arrow-left\" aria-hidden=\"true\"></i>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link tna-button--accent\" aria-label=\"\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--icon-only-mobile\" rel=\"next\"><i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>Next</a></div></nav>",
       "hidden": false
     }
   ]

package/nationalarchives/components/pagination/template.njk CHANGED Viewed

@@ -9,7 +9,7 @@
   <div class="tna-pagination__prev">
     {{ tnaButton({
       text: params.previous.text if params.previous.text else "Previous",
-      href: "#",
+      href: params.previous.href,
       title: params.previous.title,
       icon: "arrow-left",
       iconOnlyOnMobile: true,
@@ -46,7 +46,7 @@
   <div class="tna-pagination__next">
     {{ tnaButton({
       text: params.next.text if params.next.text else "Next",
-      href: "#",
+      href: params.next.href,
       title: params.next.title,
       icon: "arrow-right",
       iconOnlyOnMobile: true,

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

@@ -87,16 +87,28 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "formGroupClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the radios form group."
+  },
+  {
+    "name": "formGroupAttributes",
+    "type": "string",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the radios form group."
+  },
   {
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the radios."
+    "description": "Classes to add to the radio elements."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the radios."
+    "description": "HTML attributes (for example data attributes) to add to the radio elements."
   }
 ]

package/nationalarchives/components/radios/template.njk CHANGED Viewed

@@ -2,7 +2,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
@@ -22,7 +22,7 @@
     <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-radios__item">
-        <input type="radio" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if params.selected and item.value === params.selected %} checked{% endif %}>
+        <input type="radio" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
         <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-radios__item-label">
           {{ item.text }}
         </label>