From eaef1108f5a7945ea8f873cc4d146a3155c078e8 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 8 Mar 2024 16:30:47 +0000 Subject: [PATCH] Add top border to cards without images (#99) --- CHANGELOG.md | 1 + .../components/button/button.scss | 3 +-- .../components/card/card.scss | 6 +++++ .../components/card/card.stories.js | 11 +++++++++ .../error-summary/error-summary.scss | 2 +- .../featured-records/featured-records.scss | 2 +- .../components/footer/footer.scss | 2 +- .../global-header/global-header.scss | 4 ++-- .../components/header/header.scss | 4 ++-- .../components/hero/hero.scss | 2 +- .../components/message/message.scss | 5 ++-- .../components/skip-link/skip-link.scss | 2 +- src/nationalarchives/tools/_colour.scss | 24 +++++++++++++++++++ src/nationalarchives/utilities/_forms.scss | 2 +- src/nationalarchives/utilities/_tables.scss | 2 +- .../utilities/_typography.scss | 4 ++-- 16 files changed, 58 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a732b907..38625018 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - The default pagination style is plain buttons but can be changed with the `solid` option - Added some attributes to the HTML of the headers to reduce reliance on the JavaScript +- Cards without images now get a top border ### Deprecated ### Removed diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 5913df2b..fad367d4 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -21,8 +21,7 @@ @include colour.colour-background("button-background"); - @include colour.colour-border("button-background", 0.25rem); - // border-radius: 0.1px; + @include colour.colour-border("button-background", 4px); cursor: pointer; diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 1144b37e..3bceee0e 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -165,6 +165,12 @@ } } + &__inner:has(&__heading + &__body) { + padding-top: 0.5rem; + + @include colour.thick-keyline-dark(top); + } + @include colour.on-high-contrast-and-forced-colours { @include colour.colour-border("keyline-dark", 1px); diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js index af7352b0..7580d616 100644 --- a/src/nationalarchives/components/card/card.stories.js +++ b/src/nationalarchives/components/card/card.stories.js @@ -209,6 +209,17 @@ Accent.args = { classes: "tna-card--demo", }; +export const NoImage = Template.bind({}); +NoImage.args = { + title: "Card title", + headingLevel: 3, + headingSize: "s", + href: "#", + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.

", + htmlElement: "article", + classes: "tna-card--demo", +}; + export const Horizontal = Template.bind({}); Horizontal.args = { supertitle: "Card supertitle", diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss index 83793d2a..68972060 100644 --- a/src/nationalarchives/components/error-summary/error-summary.scss +++ b/src/nationalarchives/components/error-summary/error-summary.scss @@ -12,7 +12,7 @@ @include colour.colour-background("page-background"); - @include colour.colour-border("form-error", 0.25rem, solid); + @include colour.colour-border("form-error", 0.3125rem, solid); &:focus { outline: none; diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index d55e36ce..375db42e 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -11,7 +11,7 @@ list-style: none; - @include colour.colour-border("accent-background", 0.375rem, solid, top); + @include colour.thick-keyline-accent(top); &__item { padding: 2rem; diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index 6aaea931..2995235e 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -200,7 +200,7 @@ &__navigation { &-block { &-items { - @include colour.colour-border("keyline-dark", 0.25rem, solid, top); + @include colour.colour-border("keyline-dark", 4px, solid, top); } } } diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 975fbfef..eba11174 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -317,8 +317,8 @@ background-color: rgb(255 255 255 / 10%); - @include colour.colour-border("keyline-dark", 3px, solid, top); - @include colour.colour-border("keyline-dark", 3px, solid, bottom); + @include colour.colour-border("keyline-dark", 2px, solid, top); + @include colour.colour-border("keyline-dark", 2px, solid, bottom); } &__navigation-item { diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index 048bc129..328c8428 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -383,8 +383,8 @@ background-color: rgb(255 255 255 / 10%); - @include colour.colour-border("keyline-dark", 3px, solid, top); - @include colour.colour-border("keyline-dark", 3px, solid, bottom); + @include colour.colour-border("keyline-dark", 2px, solid, top); + @include colour.colour-border("keyline-dark", 2px, solid, bottom); } &__navigation-item { diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index 358ba8d6..82458fcc 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/src/nationalarchives/components/hero/hero.scss @@ -50,7 +50,7 @@ @include colour.accent; - @include colour.colour-border("background", 0.25rem); + @include colour.colour-border("background", 4px); border-radius: 100%; cursor: pointer; diff --git a/src/nationalarchives/components/message/message.scss b/src/nationalarchives/components/message/message.scss index a5274d8e..4093d6c3 100644 --- a/src/nationalarchives/components/message/message.scss +++ b/src/nationalarchives/components/message/message.scss @@ -13,10 +13,9 @@ @include colour.accent-light; - background-color: colour.brand-colour("cream"); + @include colour.colour-background-brand("cream"); - @include colour.colour-border("keyline-dark", 0.5rem, solid, left); - border-left-color: colour.brand-colour("yellow"); + @include colour.thick-keyline-brand(left, "yellow"); @include media.on-tiny { flex-direction: column; diff --git a/src/nationalarchives/components/skip-link/skip-link.scss b/src/nationalarchives/components/skip-link/skip-link.scss index d618687c..3744f4aa 100644 --- a/src/nationalarchives/components/skip-link/skip-link.scss +++ b/src/nationalarchives/components/skip-link/skip-link.scss @@ -28,7 +28,7 @@ &:focus { @include colour.colour-background("button-background", $important: true); - @include colour.colour-border("focus-outline", 0.3125rem, $important: true); + @include colour.colour-border("focus-outline", 5px, $important: true); outline: none !important; } diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 0c926fc1..02282d77 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -97,6 +97,10 @@ background-color: var(--#{$colour}) if($important, !important, null); } +@mixin colour-background-brand($brandColour, $important: false) { + background-color: #{brand-colour($brandColour)} if($important, !important, null); +} + @mixin colour-border( $colour, $width: "", @@ -159,6 +163,26 @@ fill: var(--#{$colour}) if($important, !important, null); } +@mixin thick-keyline($direction) { + @include colour-border("keyline", 5px, solid, $direction); +} + +@mixin thick-keyline-dark($direction) { + @include colour-border("keyline-dark", 5px, solid, $direction); +} + +@mixin thick-keyline-accent($direction) { + @include colour-border("accent-background", 5px, solid, $direction); +} + +@mixin thick-keyline-error($direction) { + @include colour-border("form-error", 5px, solid, $direction); +} + +@mixin thick-keyline-brand($direction, $brandColour) { + border-#{$direction}: 5px #{brand-colour($brandColour)} solid; +} + %light { @include colour-css-vars("form-error"); diff --git a/src/nationalarchives/utilities/_forms.scss b/src/nationalarchives/utilities/_forms.scss index 496f8aa6..6add11a0 100644 --- a/src/nationalarchives/utilities/_forms.scss +++ b/src/nationalarchives/utilities/_forms.scss @@ -17,7 +17,7 @@ select { &--error { padding-left: 1rem; - @include colour.colour-border("form-error", 0.25rem, solid, left); + @include colour.thick-keyline-error(left); } } diff --git a/src/nationalarchives/utilities/_tables.scss b/src/nationalarchives/utilities/_tables.scss index b45af81d..869c9fd6 100644 --- a/src/nationalarchives/utilities/_tables.scss +++ b/src/nationalarchives/utilities/_tables.scss @@ -56,7 +56,7 @@ } &__head &__header { - @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom); + @include colour.colour-border("keyline-dark", 4px, solid, bottom); } p { diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index c6aa70d9..f970a889 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -136,7 +136,7 @@ small { %chip-accent { @include colour.accent; - @include colour.colour-border("accent-background", 0.125rem); + @include colour.colour-border("accent-background", 2px); .tna-background-accent & { @include colour.contrast; @@ -363,7 +363,7 @@ small { margin-left: 0; padding: 1rem 1rem 1rem 2rem; - @include colour.colour-border("accent-background", 0.375rem, solid, left); + @include colour.thick-keyline-accent(left); &__quote { font-weight: 700;