From a48a6e2f486e719d6eadc1e957230243239410b8 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 20 Sep 2023 14:29:45 +0100 Subject: [PATCH] Expand card meta to multiple items --- CHANGELOG.md | 2 +- .../components/button/button.scss | 2 - .../components/card/card.scss | 48 +++++++++++++++++-- .../components/card/card.stories.js | 26 +++++++++- .../components/card/fixtures.json | 17 ++++++- .../components/card/macro-options.json | 18 ++++++- .../components/card/template.njk | 17 ++++--- .../cookie-banner/cookie-banner.mjs | 4 +- src/nationalarchives/tools/_typography.scss | 2 + .../utilities/_typography.scss | 7 ++- src/nationalarchives/variables/_colour.scss | 2 + 11 files changed, 121 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1477fdff..eb0147a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Allow use of custom variables when loading SCSS -- Cards can now have a short meta text under the title +- Cards can now have meta text/icons under the title ### Changed diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index d6adc65e..2a199c47 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -93,8 +93,6 @@ } } - .fa, - .fa-regular, .fa-solid, .fa-brands { margin-right: 0.5rem; diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 5f134c91..132ce966 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -56,11 +56,31 @@ &__body { order: 3; + } + + &__meta { + margin-bottom: 0.5rem; + padding: 0; + + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + + line-height: 1.3; - &-meta { - margin-bottom: 0.5rem; + list-style: none; - line-height: 1.3; + &-item { + display: flex; + align-items: center; + + @include typography.detail-font-small; + + .fa-solid { + margin-right: 0.75rem; + + @include colour.colour-font("icon-light"); + } } } @@ -73,8 +93,6 @@ &__action { @include typography.main-font-weight-bold; - .fa, - .fa-regular, .fa-solid, .fa-brands { margin-right: 0.5rem; @@ -104,6 +122,8 @@ .tna-hgroup__supertitle { @include colour.invert; + + @include colour.colour-border("contrast-background"); } } @@ -173,5 +193,23 @@ @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 { + 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); + } + } + } } } diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js index 776fc775..405ca0bf 100644 --- a/src/nationalarchives/components/card/card.stories.js +++ b/src/nationalarchives/components/card/card.stories.js @@ -13,7 +13,7 @@ const argTypes = { imageHeight: { control: { type: "number", min: 1 } }, imageSources: { control: "object" }, label: { control: "text" }, - meta: { control: "text" }, + meta: { control: "object" }, body: { control: "text" }, text: { control: "text" }, actions: { control: "object" }, @@ -97,7 +97,6 @@ Standard.args = { imageWidth: 1996, imageHeight: 1331, label: "New", - meta: "By Max Smith, 24th September 2023", body: "

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

", htmlElement: "article", classes: "tna-card--demo", @@ -118,6 +117,29 @@ Simple.args = { classes: "tna-card--demo", }; +export const Meta = Template.bind({}); +Meta.args = { + supertitle: "Card supertitle", + title: "Card title", + headingLevel: 3, + headingSize: "m", + href: "#", + imageSrc: + "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", + imageAlt: "The National Archives office", + imageWidth: 1996, + imageHeight: 1331, + label: "New", + meta: [ + { text: "24th September 2023", icon: "calendar" }, + { text: "From £16", icon: "ticket" }, + { text: "Online", icon: "location-dot" }, + ], + body: "

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

", + htmlElement: "article", + classes: "tna-card--demo", +}; + export const Boxed = Template.bind({}); Boxed.args = { supertitle: "Card supertitle", diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json index 57c2c0c7..42a7f341 100644 --- a/src/nationalarchives/components/card/fixtures.json +++ b/src/nationalarchives/components/card/fixtures.json @@ -59,10 +59,23 @@ "options": { "title": "Card title", "headingLevel": 3, - "meta": "Card meta", + "meta": [ + { + "text": "24th September 2023", + "icon": "calendar" + }, + { + "text": "From £16", + "icon": "ticket" + }, + { + "text": "Online", + "icon": "location-dot" + } + ], "body": "

Card body

" }, - "html": "

Card title

Card meta

Card body

", + "html": "

Card title

  • 24th September 2023
  • From £16
  • Online

Card body

", "hidden": false }, { diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json index 644f67a6..a52d27e7 100644 --- a/src/nationalarchives/components/card/macro-options.json +++ b/src/nationalarchives/components/card/macro-options.json @@ -100,9 +100,23 @@ }, { "name": "meta", - "type": "string", + "type": "array", "required": false, - "description": "A small piece of additional information akin to a subtitle, displayed between the title and the body." + "description": "Small pieces of additional information akin to subtitles, displayed between the title and the body.", + "params": [ + { + "name": "text", + "type": "string", + "required": true, + "description": "The text element of the meta data." + }, + { + "name": "icon", + "type": "string", + "required": false, + "description": "The name of a font-awesome icon, without the prefixed `fa-`." + } + ] }, { "name": "body", diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk index 478f7d54..1a0b2b65 100644 --- a/src/nationalarchives/components/card/template.njk +++ b/src/nationalarchives/components/card/template.njk @@ -58,13 +58,16 @@ {%- endif -%}
{%- if params.meta -%} -

- - - {{ params.meta }} - - -

+ {%- endif -%} {%- if params.text -%}

{{ params.text }}

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs index 694df138..7ab58e63 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs @@ -37,7 +37,9 @@ export class CookieBanner { this.loadScriptsOnAccept = this.$module.getAttribute("data-acceptscripts"); - this.cookiePreferencesSet = this.$module.getAttribute("data-preferenceskey"); + this.cookiePreferencesSet = this.$module.getAttribute( + "data-preferenceskey", + ); const cookieBannerHidden = this.cookies.hasValue( this.cookiePreferencesSet, true, diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss index 4937dbc3..50bce89e 100644 --- a/src/nationalarchives/tools/_typography.scss +++ b/src/nationalarchives/tools/_typography.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "colour"; @use "../variables/typography"; @mixin relative-font-size($fontSizePx) { @@ -34,6 +35,7 @@ } @mixin detail-font-small { + @include colour.colour-font("font-dark"); @include detail-font; @include relative-font-size(14); text-transform: uppercase; diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 869d11ef..3a21ea8e 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -211,15 +211,16 @@ small { %chip { max-width: max-content; - padding: 0.375em 0.5rem; + padding: 0.125em 0.25rem; display: block; - @include colour.colour-font("font-dark"); @include typography.detail-font-small; line-height: 1; @include colour.accent; + + @include colour.colour-border("accent-background", 0.125rem); } .tna-chip { @@ -245,6 +246,8 @@ small { @include colour.colour-font("font-dark"); @include typography.heading-font; + text-wrap: balance; + a { display: inline-block; diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index 24f83a0d..4ba8c24a 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -39,6 +39,7 @@ $colour-palette-default: ( "font-base": $base-font, "font-dark": map.get($colour-palette-brand, "black"), "font-light": rgba($base-font, 0.7), + "icon-light": rgba($base-font, 0.45), "link": #1d70ab, "link-visited": #4c2c92, "focus-outline": map.get($colour-palette-brand, "blue"), @@ -87,6 +88,7 @@ $colour-palette-dark: map.merge( "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95), "font-dark": map.get($colour-palette-brand, "white"), "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5), + "icon-light": rgba(map.get($colour-palette-brand, "white"), 0.35), "link": map.get($colour-palette-brand, "blue"), "link-visited": map.get($colour-palette-default, "contrast-link-visited"), "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),