Expand card meta to multiple items

nationalarchives · Sep 20, 2023 · a48a6e2 · a48a6e2
1 parent bae1652
commit a48a6e2
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   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: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
+  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
@@ -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": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p class=\"tna-card__body-meta\"><small><strong>Card meta</strong></small></p><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m 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>",
       "hidden": false
     },
     {

diff --git 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
@@ -58,13 +58,16 @@
   {%- endif -%}
     <div class="tna-card__body">
     {%- if params.meta -%}
-      <p class="tna-card__body-meta">
-        <small>
-          <strong>
-            {{ params.meta }}
-          </strong>
-        </small>
-      </p>
+      <ul class="tna-card__meta">
+        {%- for item in params.meta -%}
+        <li class="tna-card__meta-item">
+          {%- if item.icon -%}
+          <i class="fa-solid fa-{{ item.icon }}"></i>
+          {%- endif -%}
+          {{ item.text }}
+        </li>
+        {%- endfor -%}
+      </ul>
     {%- endif -%}
     {%- if params.text -%}
       <p>{{ params.text }}</p>

diff --git 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
@@ -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
@@ -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
@@ -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),