npm - @nationalarchives/frontend - Versions diffs - 0.1.24-prerelease → 0.1.26-prerelease - Mend

@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

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

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

	@@ -1 +1 @@
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/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/components/card/card.scss"],"names":[],"mappings":"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","file":"card.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-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 \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&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 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\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 2rem 0 0;\n\n + p {\n margin-top: 1rem;\n }\n\n &:first-child {\n margin-top: 0;\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 @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--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// .tna-detail[title][data-type] {\n// padding: 0 0.375rem;\n\n// display: inline-flex;\n// flex-flow: row nowrap;\n// align-items: baseline;\n// gap: 0.5rem;\n\n// vertical-align: baseline;\n\n// background-color: #ccc;\n\n// &::after {\n// @include colour.colour-font(\"font-base\");\n// @include typography.detail-font-small;\n// vertical-align: baseline;\n\n// content: attr(data-type) / \"\";\n// }\n\n// &[data-type=\"misc\"] {\n// background-color: #f28482;\n// }\n\n// &[data-type=\"loc\"] {\n// background-color: #edae49;\n// }\n\n// &[data-type=\"per\"] {\n// background-color: #b5e2fa;\n// }\n\n// @at-root #{selector.unify(\"a\", &)} {\n// @include colour.colour-font(\"font-base\");\n\n// &::after {\n// text-decoration: none;\n// }\n// }\n// }\n\n.tna-chip-list {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n &__item {\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\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 // text-decoration-thickness: .15em;\n\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-top: 1rem;\n\n &:first-child {\n padding-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 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;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\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: #{brand-colour(\"yellow\")} !important;\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 @if $colour != \"black\" {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\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: #{brand-colour(\"orange\")} !important;\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: #{brand-colour(\"green\")} !important;\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: #{brand-colour(\"blue\")} !important;\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\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%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-visited);\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}\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 --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\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}\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","@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:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\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 accent-color: var(--accent);\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 &--black-accent {\n @include colour.accent-css-vars(\"black\");\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","@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 \"../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\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-left: 0;\n }\n\n dd {\n padding-right: 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 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 @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\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: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 // line-height: 1;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family: \"Open Sans\", 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 \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none;\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 \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"button-group\";\n\n.tna-button {\n padding: 0.25rem 1rem;\n\n display: inline-block;\n\n @include typography.relative-font-size(18);\n @include typography.main-font-weight-bold;\n text-decoration: none;\n text-align: center;\n line-height: #{math.div(16, 18) * 2};\n text-wrap: balance;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", 0.25rem);\n\n transition:\n color 200ms,\n background-color 200ms,\n border-color 200ms;\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n\n transition:\n color 50ms,\n background-color 50ms,\n border-color 50ms;\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--small {\n padding: 0.125rem 0.5rem;\n\n @include typography.relative-font-size(14);\n }\n\n &--accent {\n @include colour.colour-background(\"button-accent-background\");\n\n @include colour.colour-border(\"button-accent-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accent-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--solid-hover,\n .tna-background-accent-light &,\n .tna-background-accent &:not(.tna-button--accent) {\n &:not(.tna-button--plain):hover {\n @include colour.colour-background(\"page-background\");\n }\n }\n\n .tna-background-accent &--accent {\n @include colour.plain;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"page-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include colour.colour-font(\"page-background\");\n\n @include colour.colour-background(\"font-dark\");\n }\n }\n\n .fa-solid,\n .fa-brands {\n margin-right: 0.5rem;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../utilities\";\n@use \"../button\";\n\n.tna-card {\n @include spacing.space-above;\n\n &__inner {\n display: flex;\n flex-direction: column;\n }\n\n &__heading {\n order: 2;\n }\n\n &__heading-link {\n &::after {\n display: none !important;\n }\n }\n\n &__image-container {\n height: 0;\n margin-bottom: 1rem;\n // padding-bottom: #{math.div(9, 16) * 100%};\n padding-bottom: #{math.div(2, 3) * 100%};\n\n position: relative;\n order: 1;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n max-width: calc(100% - 1rem);\n\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n }\n\n &__body {\n padding-top: 1rem;\n\n order: 3;\n }\n\n &__meta {\n margin-bottom: 1rem;\n padding: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n line-height: 1.3;\n\n list-style: none;\n\n &-item {\n display: flex;\n align-items: center;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n\n .fa-solid {\n margin-right: 0.75rem;\n\n @include colour.colour-font(\"icon-light\");\n }\n }\n }\n\n &__actions {\n margin-top: 2rem;\n\n order: 4;\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n\n .fa-solid,\n .fa-brands {\n margin-right: 0.5rem;\n }\n }\n\n &--contrast,\n &--accent {\n .tna-card__inner {\n padding-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n\n &--contrast {\n @include colour.contrast;\n }\n\n &--accent {\n @include colour.accent;\n\n .tna-hgroup__supertitle {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n }\n\n &--horizontal {\n position: relative;\n\n @include media.on-larger-than-mobile {\n .tna-card__inner {\n margin-left: 50%;\n padding: 2rem;\n }\n\n .tna-card__image-container {\n height: auto;\n margin-bottom: 0;\n padding-bottom: 0;\n\n display: block;\n\n position: absolute;\n inset: 0 50% 0 0;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 0;\n margin-left: 0;\n }\n }\n }\n\n &--horizontal#{&}--contrast,\n &--horizontal#{&}--accent {\n @include media.on-mobile {\n .tna-card__inner {\n padding: 0 0 1rem;\n }\n\n .tna-card__image-container {\n margin-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n }\n\n &:not(#{&}--horizontal) {\n @include colour.on-high-contrast {\n .tna-card__inner {\n padding-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n\n &__meta {\n &-item {\n padding-right: 0.5rem;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n\n .fa-solid {\n margin-right: 0.5rem;\n padding: 0.5rem;\n\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n }\n }\n}\n"]}
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/button/_button-group.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/components/card/card.scss"],"names":[],"mappings":"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","file":"card.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-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 \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&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 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 @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--focus-outline);\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 {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent &:not(#{&}--plain) {\n @include colour.plain;\n\n @include colour.colour-border(\"background\");\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\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 .tna-chip {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n\n .fa-solid,\n .fa-brand {\n padding: 0.375rem 0.25rem;\n\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n\n .tna-chip {\n &:has(.fa-solid, .fa-brand) {\n padding-left: 0;\n\n .fa-solid,\n .fa-brand {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n\n &--accent {\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"accent-background\");\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\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 // text-decoration-thickness: .15em;\n\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;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\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%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 // --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-family: \"Open Sans\", 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 }\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.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-left: 0;\n }\n\n dd {\n padding-right: 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 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 @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\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/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: 0.5rem;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"button-group\";\n\n.tna-button {\n padding: 0.25rem 1rem;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n\n @include typography.main-font-weight-bold;\n text-decoration: none;\n text-align: center;\n line-height: #{math.div(16, 18) 2};\n text-wrap: balance;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", 0.25rem);\n\n cursor: pointer;\n\n &,\n .fa-solid,\n .fa-brands {\n @include typography.relative-font-size(18);\n line-height: #{math.div(16, 18) * 2};\n }\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accent-background\");\n\n @include colour.colour-border(\"button-accent-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accent-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n .fa-solid,\n .fa-brands {\n min-width: 1.25rem;\n\n display: block;\n }\n\n &--small,\n &-group--small & {\n padding: 0 0.5rem;\n\n @include typography.relative-font-size(14);\n line-height: 1.5rem;\n\n .fa-solid,\n .fa-brands {\n @include typography.relative-font-size(18);\n line-height: 2rem;\n }\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2.5rem;\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2rem;\n }\n }\n\n &--icon-only:has(.fa-solid, .fa-brands) {\n @include icon-only;\n }\n\n &--small#{&}--icon-only:has(.fa-solid, .fa-brands),\n &-group--small &--icon-only:has(.fa-solid, .fa-brands) {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile:has(.fa-solid, .fa-brands) {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile:has(.fa-solid, .fa-brands),\n &-group--small &--icon-only-mobile:has(.fa-solid, .fa-brands) {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"page-background\");\n }\n }\n\n .tna-background-accent & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent {\n @include colour.plain;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"page-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include colour.colour-font(\"page-background\");\n\n @include colour.colour-background(\"font-dark\");\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../utilities\";\n@use \"../button\";\n\n.tna-card {\n @include spacing.space-above;\n\n &__inner {\n display: flex;\n flex-direction: column;\n }\n\n &__heading {\n order: 2;\n }\n\n &__heading-link {\n &::after {\n display: none !important;\n }\n }\n\n &__image-container {\n height: 0;\n margin-bottom: 1rem;\n // padding-bottom: #{math.div(9, 16) * 100%};\n padding-bottom: #{math.div(2, 3) * 100%};\n\n position: relative;\n order: 1;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n max-width: calc(100% - 1rem);\n\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n }\n\n &__body {\n padding-top: 1rem;\n\n order: 3;\n }\n\n &__meta {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n line-height: 1.3;\n\n list-style: none;\n\n + p {\n margin-top: 1rem;\n }\n }\n\n &__actions {\n margin-top: 2rem;\n\n order: 4;\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n\n .fa-solid,\n .fa-brands {\n margin-right: 0.5rem;\n }\n }\n\n &--contrast,\n &--accent {\n .tna-card__inner {\n padding-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n\n &--contrast {\n @include colour.contrast;\n }\n\n &--accent {\n @include colour.accent;\n\n .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n }\n\n &--horizontal {\n position: relative;\n\n @include media.on-larger-than-mobile {\n .tna-card__inner {\n margin-left: 50%;\n padding: 2rem;\n }\n\n .tna-card__image-container {\n height: auto;\n margin-bottom: 0;\n padding-bottom: 0;\n\n display: block;\n\n position: absolute;\n inset: 0 50% 0 0;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 0;\n margin-left: 0;\n }\n }\n }\n\n &--horizontal#{&}--contrast,\n &--horizontal#{&}--accent {\n @include media.on-mobile {\n .tna-card__inner {\n padding: 0 0 1rem;\n }\n\n .tna-card__image-container {\n margin-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n\n &:not(#{&}--horizontal) {\n .tna-card__inner {\n padding-bottom: 1rem;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 1rem;\n margin-left: 1rem;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n"]}

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

@@ -61,9 +61,6 @@
   }
   &__meta {
-    margin-bottom: 1rem;
-    padding: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 1.5rem;
@@ -72,18 +69,8 @@
     list-style: none;
-    &-item {
-      display: flex;
-      align-items: center;
-      @include colour.colour-font("font-dark");
-      @include typography.detail-font-small;
-      .fa-solid {
-        margin-right: 0.75rem;
-        @include colour.colour-font("icon-light");
-      }
+    + p {
+      margin-top: 1rem;
     }
   }
@@ -123,7 +110,7 @@
   &--accent {
     @include colour.accent;
-    .tna-hgroup__supertitle {
+    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {
       @include colour.contrast;
       @include colour.colour-border("contrast-background");
@@ -179,8 +166,10 @@
     }
   }
-  &:not(#{&}--horizontal) {
-    @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
+    @include colour.colour-border("keyline-dark", 1px);
+    &:not(#{&}--horizontal) {
       .tna-card__inner {
         padding-bottom: 1rem;
       }
@@ -196,24 +185,5 @@
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
-    &__meta {
-      &-item {
-        padding-right: 0.5rem;
-        @include colour.colour-border("keyline-dark", 1px, solid);
-        .fa-solid {
-          margin-right: 0.5rem;
-          padding: 0.5rem;
-          @include colour.colour-font("contrast-font-base");
-          @include colour.colour-background("contrast-background");
-          @include colour.colour-border("keyline-dark", 1px, solid, right);
-        }
-      }
-    }
   }
 }

package/nationalarchives/components/card/card.stories.js CHANGED Viewed

@@ -7,6 +7,8 @@ const argTypes = {
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m", "l"] },
   href: { control: "text" },
+  hrefClasses: { control: "text" },
+  hrefAttributes: { control: "object" },
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
@@ -45,6 +47,8 @@ const Template = ({
   headingLevel,
   headingSize,
   href,
+  hrefClasses,
+  hrefAttributes,
   imageSrc,
   imageAlt,
   imageWidth,
@@ -70,6 +74,8 @@ const Template = ({
       headingLevel,
       headingSize,
       href,
+      hrefClasses,
+      hrefAttributes,
       imageSrc,
       imageAlt,
       imageWidth,
@@ -302,81 +308,3 @@ Sources.args = {
   htmlElement: "article",
   classes: "tna-card--demo",
 };
-export const WithoutImage = Template.bind({});
-WithoutImage.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "s",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-const GridTemplate = ({
-  title,
-  supertitle,
-  headingLevel,
-  headingSize,
-  href,
-  imageSrc,
-  imageAlt,
-  imageWidth,
-  imageHeight,
-  imageSources,
-  label,
-  body,
-  text,
-  actions,
-  horizontal,
-  htmlElement,
-  classes,
-  attributes,
-}) =>
-  `<div class="tna-container">
-    ${Array(12)
-      .fill(
-        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
-          ${Card({
-            params: {
-              title,
-              supertitle,
-              headingLevel,
-              headingSize,
-              href,
-              imageSrc,
-              imageAlt,
-              imageWidth,
-              imageHeight,
-              imageSources,
-              label,
-              body,
-              text,
-              actions,
-              horizontal,
-              htmlElement,
-              classes,
-              attributes,
-            },
-          })}
-        </div>`,
-      )
-      .join("")}
-  </div>`;
-export const Grid = GridTemplate.bind({});
-Grid.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "s",
-  href: "#",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};

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

@@ -8,7 +8,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -19,7 +19,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -30,7 +30,7 @@
         "headingSize": "xl",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -40,7 +40,7 @@
         "headingLevel": 1,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -51,7 +51,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</div></li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -85,7 +85,7 @@
         "headingLevel": 3,
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -99,7 +99,7 @@
         "imageHeight": 360,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -119,7 +119,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -134,7 +134,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -151,7 +151,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\" title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {
@@ -162,7 +162,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -173,7 +173,7 @@
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -184,7 +184,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -195,7 +195,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -206,7 +206,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -219,7 +219,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]