From 0e95221f98378baee990fcb54ef3c942e4fc85df Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 30 May 2024 13:40:47 +0100 Subject: [PATCH] Improve forced color support (#127) * Improve forced color support * Remove hover state for header logos with no link --- CHANGELOG.md | 6 + .../components/accordion/accordion.scss | 25 ++ .../components/breadcrumbs/breadcrumbs.scss | 17 -- .../components/button/button.scss | 6 + .../cookie-banner/cookie-banner.scss | 6 +- .../components/details/details.scss | 25 ++ .../featured-records/featured-records.scss | 3 +- .../components/footer/footer.scss | 2 + .../components/global-header/fixtures.json | 2 +- .../global-header/global-header.scss | 27 +- .../components/global-header/template.njk | 2 +- .../components/header/fixtures.json | 2 +- .../components/header/header.scss | 29 ++- .../components/header/header.stories.js | 41 +++ .../components/header/template.njk | 2 +- .../components/phase-banner/phase-banner.scss | 2 + .../components/radios/radios.scss | 8 +- .../components/search-field/search-field.scss | 6 + .../search-filters/search-filters.scss | 25 ++ .../components/skip-link/skip-link.scss | 3 + .../components/tabs/tabs.scss | 6 +- .../global-header-package.scss | 2 - src/nationalarchives/templates/fixtures.json | 10 +- src/nationalarchives/templates/index-grid.njk | 234 +++++++++--------- src/nationalarchives/templates/list.njk | 48 ++-- src/nationalarchives/templates/plain.njk | 134 +++++----- src/nationalarchives/tools/_colour.scss | 7 +- src/nationalarchives/tools/_media.scss | 10 + src/nationalarchives/utilities/_areas.scss | 2 +- src/nationalarchives/utilities/_lists.scss | 6 +- .../utilities/_typography.scss | 2 + src/nationalarchives/variables/_colour.scss | 3 +- 32 files changed, 429 insertions(+), 274 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b1245d05..00a1cfb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Detail summaries no longer stretch the full width of the container - Index grid `headingHref` changed to `href` +- Common page elements such as headers and footers are hidden when using print styles +- Accented keylines now use the more saturated variant of their colour for increased contrast with other accented elements ### Deprecated @@ -27,6 +29,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - The theme stored in a cookie is now reflected in pages using the prototype kit - Removed duplicated source from hero image `` elements +- Better support for forced colors mode on several components +- Remove duplicated `
` element on index-grid and list prototype kit templates +- Accented header component colour fixed +- Removed hover state for header logos with no link ### Security diff --git a/src/nationalarchives/components/accordion/accordion.scss b/src/nationalarchives/components/accordion/accordion.scss index 87d04f7f..a2b4acee 100644 --- a/src/nationalarchives/components/accordion/accordion.scss +++ b/src/nationalarchives/components/accordion/accordion.scss @@ -102,4 +102,29 @@ border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem; } } + + @include colour.on-forced-colours { + &__summary { + &::before { + content: "\2193"; + + width: auto; + height: auto; + + top: calc(50% - 0.5rem); + + line-height: 1rem; + + border: none; + } + } + + &__details[open] &__summary { + &::before { + content: "\2191"; + + border: none; + } + } + } } diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss index 195d458f..96500da6 100644 --- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss +++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss @@ -58,23 +58,6 @@ &:hover { @include colour.colour-font("font-dark"); } - - @include colour.on-high-contrast-and-forced-colours { - padding-right: spacing.space(0.75); - padding-left: spacing.space(0.75); - - text-decoration: none; - - @include colour.colour-border("keyline-dark", 1px); - - &:hover { - text-decoration: underline; - - @include colour.colour-font("contrast-background"); - - @include colour.colour-background("contrast-font-base"); - } - } } button#{&}__link { diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 9ac41aa8..fcb7ad0e 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -181,4 +181,10 @@ $button-border-width: 4px !default; @include colour.colour-background("font-dark"); } } + + @include colour.on-forced-colours { + &:hover { + @include typography.interacted-text-decoration; + } + } } diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss index 6f0ecdb7..72b08d25 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.scss +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.scss @@ -7,6 +7,8 @@ padding-top: spacing.space(2); padding-bottom: spacing.space(2); + @include media.hide-on-print; + &--contrast { @include colour.contrast; } @@ -40,8 +42,4 @@ &--rejected { } } - - @include media.on-print { - display: none; - } } diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss index 0f4d18f8..4f9cd6b0 100644 --- a/src/nationalarchives/components/details/details.scss +++ b/src/nationalarchives/components/details/details.scss @@ -112,4 +112,29 @@ @include colour.thick-keyline(left); } } + + @include colour.on-forced-colours { + &__summary { + &::before { + content: "\2192"; + + width: auto; + height: auto; + + top: calc(50% - 0.5rem); + + line-height: 1rem; + + border: none; + } + } + + &__details[open] &__summary { + &::before { + content: "\2193"; + + border: none; + } + } + } } diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index 48f6852d..23908c22 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -20,9 +20,8 @@ align-items: center; gap: spacing.space(2); - border-top-width: 0; - @include colour.colour-border("keyline", 1px); + border-top-width: 0; } &__image { diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index bc341317..1fd979a9 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -4,6 +4,8 @@ @use "../../tools/typography"; .tna-footer { + @include media.hide-on-print; + &__inner { @include colour.contrast; diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index ca21c0c3..4bc35ea7 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -33,7 +33,7 @@ } ] }, - "html": "
The National Archives
" + "html": "
" } ] } diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index babe7c49..3f5ff755 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -15,6 +15,8 @@ rgb(0 0 0 / 100%) 100% ); + @include media.hide-on-print; + .tna-template--dark-theme & { background: colour.brand-colour("black"); } @@ -42,11 +44,13 @@ text-decoration: none; - &:hover { - text-decoration: none; + &--link { + &:hover { + text-decoration: none; - @include colour.colour-outline("font-dark", 0.3125rem, solid); - outline-offset: 1px; + @include colour.colour-outline("font-dark", 0.3125rem, solid); + outline-offset: 1px; + } } } @@ -390,4 +394,19 @@ @include colour.colour-font("link", true); } } + + @include colour.on-forced-colours { + &__navigation-button { + height: auto; + + line-height: 2; + + border: none; + @include typography.relative-font-size(18); + } + + &__hamburger { + display: none; + } + } } diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 59faf206..841fd429 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -7,7 +7,7 @@
{% if params.logo.href -%} -
Go to the current National Archives website
The National ArchivesBeta
" + "html": "
Go to the current National Archives website
The National ArchivesBeta
" } ] } diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index e550be6e..28e3df25 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -16,6 +16,8 @@ rgb(0 0 0 / 100%) 100% ); + @include media.hide-on-print; + .tna-template--dark-theme & { background: colour.brand-colour("black"); } @@ -65,24 +67,26 @@ padding-bottom: spacing.space(1.5); } - &__logo-link { + &__logo-contents { display: flex; align-items: flex-end; color: inherit; text-decoration: none; - &, - &:link, - &:visited { - color: inherit; - } + &--link { + &, + &:link, + &:visited { + color: inherit; + } - &:hover:not(:focus) { - text-decoration: none; + &:hover:not(:focus) { + text-decoration: none; - @include colour.colour-outline("font-dark", 0.3125rem, solid); - outline-offset: 1px; + @include colour.colour-outline("font-dark", 0.3125rem, solid); + outline-offset: 1px; + } } } @@ -297,6 +301,11 @@ &--accent { @include colour.accent; + background: colour.colour-var("background"); + } + + &--accent &__navigation { + @include colour.contrast-on-mobile; } @include media.on-medium { diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js index f4a26de0..ef9446ec 100644 --- a/src/nationalarchives/components/header/header.stories.js +++ b/src/nationalarchives/components/header/header.stories.js @@ -103,6 +103,47 @@ Standard.play = async ({ canvasElement }) => { await expect($navigationToggle).not.toBeVisible(); }; +export const Accent = Template.bind({}); +Accent.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Top item 1", + href: "#/top-1", + }, + { + text: "Top item 2", + href: "#/top-2", + icon: "heart", + }, + ], + navigation: [ + { + text: "Alpha", + href: "#/alpha", + selected: true, + }, + { + text: "Beta", + href: "#/beta", + }, + { + text: "Gamma", + href: "#/gamma", + }, + ], + exit: { + text: "Go to the current National Archives website", + href: "#", + target: "_blank", + }, + accent: true, + classes: "tna-header--demo", +}; + export const Mobile = Template.bind({}); Mobile.parameters = { viewport: { diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index bb99af3e..2deb84b7 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -19,7 +19,7 @@ {%- endif -%}
+
+ {{ tnaIndexGrid({ + title: 'Topics', + headingLevel: 0, + items: [ + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + }, + { + href: '#', + title: 'Topic', + src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48', + alt: 'Topic image', + width: 600, + height: 400 + } + ], + columns: 4, + columnsMedium: 3, + columnsSmall: 2, + columnsTiny: 1 + }) }} +
{% endblock %} diff --git a/src/nationalarchives/templates/list.njk b/src/nationalarchives/templates/list.njk index 79201ee1..67fcc89e 100644 --- a/src/nationalarchives/templates/list.njk +++ b/src/nationalarchives/templates/list.njk @@ -25,31 +25,29 @@ {% endblock %} {% block content %} -
-
-
-
-

- {{ pageTitle }} -

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

-
+
+
+
+

+ {{ pageTitle }} +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

- -
+
+ {% endblock %} diff --git a/src/nationalarchives/templates/plain.njk b/src/nationalarchives/templates/plain.njk index c1e9ec5d..b04fa260 100644 --- a/src/nationalarchives/templates/plain.njk +++ b/src/nationalarchives/templates/plain.njk @@ -22,73 +22,73 @@ {% endblock %} {% block content %} -
-
-
-

- {{ pageTitle }} -

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at magna est. Sed vel fermentum arcu. Suspendisse viverra est nec interdum tincidunt. Phasellus dictum, turpis eget iaculis tincidunt, ex metus porttitor turpis, ut pulvinar risus erat quis dui. Nam semper sapien a ipsum congue pharetra.

-

Donec cursus, eros eu egestas aliquam, ipsum ligula suscipit metus, eget maximus turpis nisl vitae ex. Etiam ornare convallis quam a consequat. Etiam sodales aliquet nulla, id rutrum justo accumsan sed.

-
    -
  • Alpha
    • -
  • Beta
    • -
  • Gamma
    • -
-
    -
  1. Alpha
    2. -
  2. Beta
    3. -
  3. Gamma
    4. -
-
-
Alpha
-
Lorem ipsum
-
Beta
-
Lorem ipsum
-
Gamma
-
Lorem ipsum
-
Delta
-
Lorem ipsum
-
Epsilon
-
Lorem ipsum
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Records added and removed between 2020 and 2022. -
YearRecords addedRecords removed
2020123,456789
2021456,789123
202242,4241,337
Total622,6692,249
-
+
+
+
+

+ {{ pageTitle }} +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at magna est. Sed vel fermentum arcu. Suspendisse viverra est nec interdum tincidunt. Phasellus dictum, turpis eget iaculis tincidunt, ex metus porttitor turpis, ut pulvinar risus erat quis dui. Nam semper sapien a ipsum congue pharetra.

+

Donec cursus, eros eu egestas aliquam, ipsum ligula suscipit metus, eget maximus turpis nisl vitae ex. Etiam ornare convallis quam a consequat. Etiam sodales aliquet nulla, id rutrum justo accumsan sed.

+
    +
  • Alpha
    • +
  • Beta
    • +
  • Gamma
    • +
+
    +
  1. Alpha
    2. +
  2. Beta
    3. +
  3. Gamma
    4. +
+
+
Alpha
+
Lorem ipsum
+
Beta
+
Lorem ipsum
+
Gamma
+
Lorem ipsum
+
Delta
+
Lorem ipsum
+
Epsilon
+
Lorem ipsum
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Records added and removed between 2020 and 2022. +
YearRecords addedRecords removed
2020123,456789
2021456,789123
202242,4241,337
Total622,6692,249
+
{% endblock %} diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 9f5ab0f4..136dab8a 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -124,7 +124,7 @@ @mixin thick-keyline-accent($direction) { @include colour-border( - "accent-background", + "accent-border", borders.$thick-border-width, solid, $direction @@ -318,6 +318,7 @@ %yellow-accent { --accent-background: #{colour.brand-colour("yellow")} !important; --accent-background-light: #{colour.brand-colour("cream")} !important; + --accent-border: #{colour.brand-colour("brown")} !important; --accent-font-base: #{colour.brand-colour("black")} !important; --accent-font-dark: #{colour.brand-colour("black")} !important; --accent-font-light: #{colour.brand-colour("black", 0.7)} !important; @@ -361,6 +362,7 @@ %pink-accent { --accent-background: #{colour.brand-colour("maroon")} !important; --accent-background-light: #{colour.brand-colour("pastel-pink")} !important; + --accent-border: #{colour.brand-colour("pink")} !important; --button-accent-background: #{colour.brand-colour("maroon")} !important; } @@ -372,6 +374,7 @@ %orange-accent { --accent-background: #{colour.brand-colour("chestnut")} !important; --accent-background-light: #{colour.brand-colour("pastel-orange")} !important; + --accent-border: #{colour.brand-colour("orange")} !important; --button-accent-background: #{colour.brand-colour("chestnut")} !important; } @@ -383,6 +386,7 @@ %green-accent { --accent-background: #{colour.brand-colour("forest")} !important; --accent-background-light: #{colour.brand-colour("pastel-green")} !important; + --accent-border: #{colour.brand-colour("green")} !important; --button-accent-background: #{colour.brand-colour("forest")} !important; } @@ -394,6 +398,7 @@ %blue-accent { --accent-background: #{colour.brand-colour("navy")} !important; --accent-background-light: #{colour.brand-colour("pastel-blue")} !important; + --accent-border: #{colour.brand-colour("blue")} !important; --button-accent-background: #{colour.brand-colour("navy")} !important; } diff --git a/src/nationalarchives/tools/_media.scss b/src/nationalarchives/tools/_media.scss index cc25abde..e3342b81 100644 --- a/src/nationalarchives/tools/_media.scss +++ b/src/nationalarchives/tools/_media.scss @@ -90,3 +90,13 @@ $media-tiny: "(max-width: #{$largest-tiny-device-em})"; @content; } } + +%hide-on-print { + @media print { + display: none; + } +} + +@mixin hide-on-print() { + @extend %hide-on-print; +} diff --git a/src/nationalarchives/utilities/_areas.scss b/src/nationalarchives/utilities/_areas.scss index e1a3a833..e3a5b0b2 100644 --- a/src/nationalarchives/utilities/_areas.scss +++ b/src/nationalarchives/utilities/_areas.scss @@ -21,7 +21,7 @@ padding: spacing.space(1); } - @include colour.on-high-contrast { + @include colour.on-high-contrast-and-forced-colours { @include colour.colour-border("keyline-dark", 1px); } diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss index a8341d39..06834194 100644 --- a/src/nationalarchives/utilities/_lists.scss +++ b/src/nationalarchives/utilities/_lists.scss @@ -32,12 +32,8 @@ } > li::marker { - @include colour.colour-font("accent-background"); + @include colour.colour-font("accent-border"); font-weight: 700; - - .tna-background-accent & { - @include colour.colour-font("font-dark"); - } } } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 8237f1d8..19c47cd4 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -190,6 +190,8 @@ small { a { display: inline-block; + vertical-align: top; + &::after { content: "\203A"; diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index ae400618..f7ec199d 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -83,8 +83,9 @@ $colour-palette-default: ( "contrast-button-background": brand-colour("white"), "contrast-button-hover-text": brand-colour("white"), "contrast-button-hover-background": brand-colour("black"), - "accent-background": brand-colour("grey"), + "accent-background": #afb6b5, "accent-background-light": #ededed, + "accent-border": brand-colour("grey"), "accent-font-base": brand-colour("black"), "accent-font-dark": brand-colour("black"), "accent-font-light": brand-colour("black", 0.7),