@nationalarchives/frontend 0.1.18-prerelease → 0.1.19-prerelease

package/nationalarchives/components/card/card.scss

@@ -0,0 +1,171 @@
+@use "sass:math";
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../utilities";
+@use "../button";
+
+.tna-card {
+  @include spacing.space-below;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__heading {
+    order: 2;
+  }
+
+  &__heading-link {
+    &::after {
+      display: none !important;
+    }
+  }
+
+  &__image-container {
+    height: 0;
+    margin-bottom: 1rem;
+    // padding-bottom: #{math.div(9, 16) * 100%};
+    padding-bottom: #{math.div(2, 3) * 100%};
+
+    position: relative;
+    order: 1;
+  }
+
+  &__image {
+    position: absolute;
+    inset: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
+  }
+
+  &__image-label {
+    max-width: calc(100% - 1rem);
+
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
+
+  &__body {
+    order: 3;
+  }
+
+  &__actions {
+    margin-top: 2rem;
+
+    order: 4;
+  }
+
+  &__action {
+    @include typography.main-font-weight-bold;
+
+    .fa,
+    .fa-regular,
+    .fa-solid,
+    .fa-brands {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &--contrast,
+  &--accent {
+    .tna-card__inner {
+      padding-bottom: 1rem;
+    }
+
+    .tna-card__heading,
+    .tna-card__body,
+    .tna-card__actions {
+      margin-right: 1rem;
+      margin-left: 1rem;
+    }
+  }
+
+  &--contrast {
+    @include colour.invert;
+  }
+
+  &--accent {
+    @include colour.accent;
+
+    .tna-hgroup__supertitle {
+      @include colour.invert;
+    }
+  }
+
+  &--horizontal {
+    position: relative;
+
+    @include media.on-larger-than-mobile {
+      .tna-card__inner {
+        margin-left: 50%;
+        padding: 2rem;
+      }
+
+      .tna-card__image-container {
+        height: auto;
+        margin-bottom: 0;
+        padding-bottom: 0;
+
+        display: block;
+
+        position: absolute;
+        inset: 0 50% 0 0;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &--horizontal#{&}--contrast,
+  &--horizontal#{&}--accent {
+    @include media.on-mobile {
+      .tna-card__inner {
+        padding: 0 0 2rem;
+      }
+
+      .tna-card__image-container {
+        margin-bottom: 2rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 2rem;
+        margin-left: 2rem;
+      }
+    }
+  }
+
+  &:not(#{&}--horizontal) {
+    @include colour.on-high-contrast {
+      .tna-card__inner {
+        padding-bottom: 1rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 1rem;
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px);
+  }
+}

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

@@ -2,24 +2,33 @@ import Card from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  heading: { control: "object" },
+  title: { control: "text" },
+  supertitle: { control: "text" },
+  headingLevel: { control: { type: "number", min: 1, max: 6 } },
+  headingSize: { control: "inline-radio", options: ["m", "l"] },
   href: { control: "text" },
-  image: { control: "object" },
+  imageSrc: { control: { type: "file", accept: ".jpg" } },
+  imageAlt: { control: "text" },
+  imageWidth: { control: { type: "number", min: 1 } },
+  imageHeight: { control: { type: "number", min: 1 } },
+  imageSources: { control: "object" },
   label: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
   horizontal: { control: "boolean" },
-  style: { control: "text" },
+  style: { control: "inline-radio", options: ["none", "boxed", "accent"] },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
-  argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType,
-  )?.description;
+  const macroOption = macroOptions.find((option) => option.name === argType);
+  argTypes[argType] = {
+    ...argTypes[argType],
+    description: macroOption?.description,
+  };
 });
 
 export default {
@@ -28,9 +37,16 @@ export default {
 };
 
 const Template = ({
-  heading,
+  title,
+  supertitle,
+  headingLevel,
+  headingSize,
   href,
-  image,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageSources,
   label,
   body,
   text,
@@ -43,9 +59,16 @@ const Template = ({
 }) =>
   Card({
     params: {
-      heading,
+      title,
+      supertitle,
+      headingLevel,
+      headingSize,
       href,
-      image,
+      imageSrc,
+      imageAlt,
+      imageWidth,
+      imageHeight,
+      imageSources,
       label,
       body,
       text,
@@ -60,72 +83,53 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-    singleSentence: false,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  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>",
-  // actions: [
-  //   {
-  //     text: "Card action",
-  //     href: "#",
-  //     title: "Go and do the action",
-  //   },
-  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };
 
 export const Boxed = Template.bind({});
 Boxed.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-    singleSentence: false,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  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>",
-  style: "contrast",
+  style: "boxed",
   htmlElement: "article",
   classes: "tna-card--demo",
 };
 
 export const Accent = Template.bind({});
 Accent.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-    singleSentence: false,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  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>",
   style: "accent",
@@ -135,20 +139,41 @@ Accent.args = {
 
 export const Horizontal = Template.bind({});
 Horizontal.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-    singleSentence: false,
-  },
-  href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  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>",
+  actions: [
+    {
+      text: "Card action",
+      href: "#",
+      title: "Go and do the action",
+      icon: "calendar",
+    },
+  ],
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const HorizontalBoxed = Template.bind({});
+HorizontalBoxed.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  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>",
   actions: [
@@ -156,17 +181,85 @@ Horizontal.args = {
       text: "Card action",
       href: "#",
       title: "Go and do the action",
+      icon: "calendar",
     },
   ],
   horizontal: true,
+  style: "boxed",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const HorizontalAccent = Template.bind({});
+HorizontalAccent.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  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>",
+  actions: [
+    {
+      text: "Card action",
+      href: "#",
+      title: "Go and do the action",
+      icon: "calendar",
+    },
+  ],
+  horizontal: true,
+  style: "accent",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Sources = Template.bind({});
+Sources.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
+  imageSrc: "https://www.gstatic.com/webp/gallery/2.jpg",
+  imageAlt: "A man in a canoe paddling through white water",
+  imageWidth: 550,
+  imageHeight: 404,
+  imageSources: [
+    {
+      imageSrc: "https://www.gstatic.com/webp/gallery/2.webp",
+      type: "image/webp",
+    },
+  ],
+  body: "<p>Card body</p>",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
+  body: "<p>Card body</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
 };
 
 const GridTemplate = ({
-  heading,
+  title,
+  supertitle,
+  headingLevel,
+  headingSize,
   href,
-  image,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageSources,
   label,
   body,
   text,
@@ -179,12 +272,19 @@ const GridTemplate = ({
   `<div class="tna-container">
     ${Array(12)
       .fill(
-        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
           ${Card({
             params: {
-              heading,
+              title,
+              supertitle,
+              headingLevel,
+              headingSize,
               href,
-              image,
+              imageSrc,
+              imageAlt,
+              imageWidth,
+              imageHeight,
+              imageSources,
               label,
               body,
               text,
@@ -202,28 +302,18 @@ const GridTemplate = ({
 
 export const Grid = GridTemplate.bind({});
 Grid.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    singleSentence: false,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  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>",
-  // actions: [
-  //   {
-  //     text: "Card action",
-  //     href: "#",
-  //     title: "Go and do the action",
-  //   },
-  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };