From b39502fb9f49ccd6ea43d6811c18b291a96e7477 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 27 Oct 2023 16:20:24 +0100 Subject: [PATCH] More pagination examples, tweak dark theme colours (#42) * More pagination examples, tweak dark theme colours * Push all changes to Chromatic on PR * Add header outline in high contrast mode * Adjust high contrast dark mode background * Fix spacing classes in example * Fix spacing classes in example --- .github/workflows/pull-request.yml | 2 +- CHANGELOG.md | 1 + .../components/header/header.scss | 39 +- .../pagination/pagination.stories.js | 354 ++++++++++++++++++ .../colour-schemes/colour-schemes.stories.js | 4 +- src/nationalarchives/variables/_colour.scss | 5 +- 6 files changed, 398 insertions(+), 7 deletions(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index f5f0503f..9616632a 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -29,4 +29,4 @@ jobs: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} storybookBuildDir: storybook exitZeroOnChanges: true - onlyChanged: true + onlyChanged: false diff --git a/CHANGELOG.md b/CHANGELOG.md index 45f69db9..a040a74c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Tweaked dark theme colours - `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future) - Changed Node version from `lts/hydrogen` to `lts/iron` - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile` diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index a2ad547a..f91c8730 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -338,6 +338,10 @@ } } + &--accent { + @include colour.accent; + } + @include media.on-larger-than-mobile { .tna-header__navigation-toggle { display: none; @@ -508,7 +512,38 @@ } } - &--accent { - @include colour.accent; + @include colour.on-high-contrast { + position: relative; + + &::after { + position: absolute; + inset: auto 0 0; + z-index: 1; + + @include colour.colour-border("keyline-dark", 1px, solid, bottom); + + content: ""; + } + + &__navigation { + position: relative; + z-index: 2; + } + + @include media.on-larger-than-mobile { + &__navigation-item-link { + border: 1px transparent solid; + border-bottom: none; + + &:hover, + &--selected { + &, + &:link, + &:visited { + @include colour.colour-border("keyline-dark"); + } + } + } + } } } diff --git a/src/nationalarchives/components/pagination/pagination.stories.js b/src/nationalarchives/components/pagination/pagination.stories.js index da9db06c..652d0c80 100644 --- a/src/nationalarchives/components/pagination/pagination.stories.js +++ b/src/nationalarchives/components/pagination/pagination.stories.js @@ -71,3 +71,357 @@ Standard.args = { }, classes: "tna-pagination--demo", }; + +export const First = Template.bind({}); +First.args = { + items: [ + { + number: 1, + current: true, + href: "#", + }, + { + number: 2, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const Second = Template.bind({}); +Second.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + number: 2, + current: true, + href: "#", + }, + { + number: 3, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const Third = Template.bind({}); +Third.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + number: 2, + href: "#", + }, + { + number: 3, + current: true, + href: "#", + }, + { + number: 4, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const Forth = Template.bind({}); +Forth.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + number: 2, + href: "#", + }, + { + number: 3, + href: "#", + }, + { + number: 4, + current: true, + href: "#", + }, + { + number: 5, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const Fifth = Template.bind({}); +Fifth.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 4, + href: "#", + }, + { + number: 5, + current: true, + href: "#", + }, + { + number: 6, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const LastMinus4 = Template.bind({}); +LastMinus4.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 37, + href: "#", + }, + { + number: 38, + current: true, + href: "#", + }, + { + number: 39, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const LastMinus3 = Template.bind({}); +LastMinus3.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 38, + href: "#", + }, + { + number: 39, + current: true, + href: "#", + }, + { + number: 40, + href: "#", + }, + { + number: 41, + href: "#", + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const LastMinus2 = Template.bind({}); +LastMinus2.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 39, + href: "#", + }, + { + number: 40, + current: true, + href: "#", + }, + { + number: 41, + href: "#", + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const LastMinus1 = Template.bind({}); +LastMinus1.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 40, + href: "#", + }, + { + number: 41, + current: true, + href: "#", + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + classes: "tna-pagination--demo", +}; + +export const Last = Template.bind({}); +Last.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 41, + href: "#", + }, + { + number: 42, + current: true, + href: "#", + }, + ], + classes: "tna-pagination--demo", +}; diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js index ff523170..1a28ebb7 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js @@ -235,7 +235,7 @@ const Template = ({ theme, accent }) => {
-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.

@@ -249,7 +249,7 @@ const Template = ({ theme, accent }) => {
-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.

diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index d805227c..518c6b9f 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -100,7 +100,7 @@ DARK THEME $colour-palette-dark: map.merge( $colour-palette-default, ( - "page-background": #111, + "page-background": #222, "background-tint": #333, "font-base": brand-colour("white", 0.95), "font-dark": brand-colour("white"), @@ -114,7 +114,7 @@ $colour-palette-dark: map.merge( "button-background": brand-colour("white"), "button-hover-text": brand-colour("white"), "button-hover-background": brand-colour("black"), - "contrast-background": #1e1e1e, + "contrast-background": #111, "contrast-link-visited": map.get($colour-palette-default, "contrast-link-visited"), // --accent-background-light is the same as --contrast-background on dark themes @@ -162,6 +162,7 @@ DARK, HIGH_CONTRAST THEME $colour-palette-high-contrast-dark: map.merge( $colour-palette-dark, ( + "page-background": #111, "font-base": brand-colour("white"), "font-light": brand-colour("white"), "icon-light": brand-colour("white", 0.75),