@nationalarchives/frontend 0.1.19-prerelease → 0.1.21-prerelease

package/nationalarchives/components/card/card.scss

@@ -58,6 +58,32 @@
     order: 3;
   }
 
+  &__meta {
+    margin-bottom: 1rem;
+    padding: 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+
+    line-height: 1.3;
+
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: center;
+
+      @include typography.detail-font-small;
+
+      .fa-solid {
+        margin-right: 0.75rem;
+
+        @include colour.colour-font("icon-light");
+      }
+    }
+  }
+
   &__actions {
     margin-top: 2rem;
 
@@ -67,8 +93,6 @@
   &__action {
     @include typography.main-font-weight-bold;
 
-    .fa,
-    .fa-regular,
     .fa-solid,
     .fa-brands {
       margin-right: 0.5rem;
@@ -98,6 +122,8 @@
 
     .tna-hgroup__supertitle {
       @include colour.invert;
+
+      @include colour.colour-border("contrast-background");
     }
   }
 
@@ -134,18 +160,18 @@
   &--horizontal#{&}--accent {
     @include media.on-mobile {
       .tna-card__inner {
-        padding: 0 0 2rem;
+        padding: 0 0 1rem;
       }
 
       .tna-card__image-container {
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
       }
 
       .tna-card__heading,
       .tna-card__body,
       .tna-card__actions {
-        margin-right: 2rem;
-        margin-left: 2rem;
+        margin-right: 1rem;
+        margin-left: 1rem;
       }
     }
   }
@@ -167,5 +193,24 @@
 
   @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 {
+          margin-right: 0.5rem;
+          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);
+        }
+      }
+    }
   }
 }

package/nationalarchives/components/card/card.stories.js

@@ -2,10 +2,10 @@ import Card from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  title: { control: "text" },
   supertitle: { control: "text" },
+  title: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["m", "l"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l"] },
   href: { control: "text" },
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
@@ -13,6 +13,7 @@ const argTypes = {
   imageHeight: { control: { type: "number", min: 1 } },
   imageSources: { control: "object" },
   label: { control: "text" },
+  meta: { control: "object" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
@@ -37,8 +38,8 @@ export default {
 };
 
 const Template = ({
-  title,
   supertitle,
+  title,
   headingLevel,
   headingSize,
   href,
@@ -48,6 +49,7 @@ const Template = ({
   imageHeight,
   imageSources,
   label,
+  meta,
   body,
   text,
   actions,
@@ -59,8 +61,8 @@ const Template = ({
 }) =>
   Card({
     params: {
-      title,
       supertitle,
+      title,
       headingLevel,
       headingSize,
       href,
@@ -70,6 +72,7 @@ const Template = ({
       imageHeight,
       imageSources,
       label,
+      meta,
       body,
       text,
       actions,
@@ -86,15 +89,53 @@ Standard.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
+  headingSize: "s",
+  href: "#",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  label: "New",
+  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 Simple = Template.bind({});
+Simple.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "s",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  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 Meta = Template.bind({});
+Meta.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "s",
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  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",
 };
@@ -104,15 +145,15 @@ Boxed.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
+  headingSize: "s",
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   style: "boxed",
   htmlElement: "article",
   classes: "tna-card--demo",
@@ -123,15 +164,15 @@ Accent.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
+  headingSize: "s",
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   style: "accent",
   htmlElement: "article",
   classes: "tna-card--demo",
@@ -146,10 +187,10 @@ Horizontal.args = {
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
     {
       text: "Card action",
@@ -172,10 +213,10 @@ HorizontalBoxed.args = {
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
     {
       text: "Card action",
@@ -199,10 +240,10 @@ HorizontalAccent.args = {
   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,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
     {
       text: "Card action",
@@ -222,7 +263,7 @@ Sources.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
+  headingSize: "s",
   imageSrc: "https://www.gstatic.com/webp/gallery/2.jpg",
   imageAlt: "A man in a canoe paddling through white water",
   imageWidth: 550,
@@ -233,7 +274,7 @@ Sources.args = {
       type: "image/webp",
     },
   ],
-  body: "<p>Card body</p>",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
 };
@@ -243,8 +284,8 @@ WithoutImage.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
-  body: "<p>Card body</p>",
+  headingSize: "s",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
 };
@@ -302,18 +343,16 @@ const GridTemplate = ({
 
 export const Grid = GridTemplate.bind({});
 Grid.args = {
-  supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
-  headingSize: "m",
+  headingSize: "s",
   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",
-  body: "<p>Card body</p>",
+  imageWidth: 499,
+  imageHeight: 333,
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
 };