@nationalarchives/frontend 0.1.20-prerelease → 0.1.21-prerelease

package/nationalarchives/components/hero/hero.scss

@@ -1,137 +1,245 @@
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/typography";
 @use "../../utilities";
 @use "../grid";
 
 .tna-hero {
-  min-height: min(35vw, 480px);
-  // margin-bottom: 2rem;
-  padding-top: 5rem;
-  padding-bottom: 3rem;
+  @include colour.invert-on-mobile;
 
-  display: flex;
-  align-items: flex-end;
+  &__figure {
+    min-height: min(35vw, 480px);
+    margin: 0;
+    padding-top: 8rem;
+    padding-bottom: 4rem;
 
-  position: relative;
+    display: flex;
+    align-items: flex-end;
 
-  @include colour.invert-on-mobile;
+    position: relative;
+  }
 
-  &__image {
+  &__caption {
     width: 100%;
-    height: 100%;
 
     position: absolute;
-    inset: 0;
-    z-index: 1;
+    right: 0;
+    bottom: 0;
+    z-index: 5;
 
-    object-fit: cover;
+    overflow: visible;
   }
 
-  picture#{&}__image img {
+  &__details {
     width: 100%;
-    height: 100%;
 
-    object-fit: cover;
+    overflow: visible;
   }
 
-  &__image-details {
-    position: absolute;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    z-index: 3;
-
-    @include colour.colour-font("font-base");
-  }
+  &__details-summary {
+    width: 1.5rem;
+    height: 1.5rem;
 
-  &__image-details-summary {
-    width: 2rem;
-    height: 2rem;
-
-    position: relative;
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
     z-index: 2;
 
     font-size: 0;
     text-align: center;
-    line-height: 2rem;
+    line-height: 1.5rem;
     list-style: none;
 
-    background-color: #fc0;
+    @include colour.accent;
 
-    border-radius: 1rem;
+    @include colour.colour-border("background", 0.25rem);
+    border-radius: 100%;
 
     cursor: pointer;
+
+    &:hover {
+      @include colour.colour-font("background");
+
+      @include colour.colour-background("font-base");
+    }
   }
 
-  &__image-details-summary-icon {
+  &__details-summary-icon {
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 700;
     text-transform: lowercase;
   }
 
-  &__image-information {
-    width: 20rem;
-    max-width: 45vw;
-    padding: 0.5rem 1rem;
+  &__information {
+    width: 50rem;
+    max-width: 50vw;
+    padding: 0.5rem 3.25rem 0.5rem 1rem;
 
     position: absolute;
     right: 0;
-    bottom: 2.5rem;
+    bottom: 0;
+    z-index: 1;
+
+    @include colour.invert;
+
+    // @include typography.relative-font-size(16);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
     z-index: 1;
 
-    background-color: #fc0;
+    object-fit: cover;
+  }
+
+  &__details[open] &__details-summary {
+    @include colour.invert;
+
+    &::before,
+    &::after {
+      width: 1.5rem;
+      height: 0.125rem;
+
+      display: block;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      @include colour.colour-background("font-dark");
+
+      content: "";
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    &:hover {
+      &::before,
+      &::after {
+        height: 0.25rem;
+      }
+    }
+
+    &-icon {
+      font-size: 0;
+    }
   }
 
   &__inner {
     position: relative;
-    z-index: 2;
+    z-index: 4;
   }
 
   &__content {
   }
 
   &__content-inner {
-    padding: 2.5rem 1.5rem;
+    padding: 1.5rem;
 
     @include colour.colour-background("page-background");
   }
 
   &__heading {
-    margin-bottom: 0;
   }
 
   &__body {
-    margin-top: 1.5rem;
+  }
+
+  &--tint .tna-hero__figure {
+    // @include colour.colour-border("keyline-dark", 1px, solid, top);
+    // @include colour.colour-border("keyline-dark", 1px, solid, bottom);
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+
+      content: "";
+    }
+
+    &::before {
+      z-index: 2;
+
+      background-color: colour.brand-colour("maroon");
+      @include colour.colour-background("accent-background");
+
+      mix-blend-mode: screen;
+    }
+
+    &::after {
+      z-index: 3;
+
+      background-color: colour.brand-colour("cream");
+
+      mix-blend-mode: multiply;
+    }
+
+    .tna-hero__image {
+      filter: grayscale(1) contrast(1.75) brightness(1.2);
+    }
+
+    .tna-hero__content-inner {
+      // @include colour.colour-border("keyline-dark", 1px);
+
+      @include media.on-mobile {
+        // border: none;
+      }
+    }
   }
 
   @include media.on-mobile {
-    padding: 0;
+    &__figure {
+      padding: 0;
 
-    display: block;
+      flex-direction: column;
 
-    &__image {
-      height: 320px;
+      background-color: inherit;
+    }
 
-      position: static;
+    &__caption {
+      position: relative;
+      order: 2;
+    }
+
+    &__details {
     }
 
-    &__image-details {
-      bottom: auto;
-      top: 1.25rem;
+    &__details-summary {
     }
 
-    &__image-details-summary {
+    &__details-summary-icon {
     }
 
-    &__image-details-summary-icon {
+    &__information {
+      width: auto;
+      max-width: none;
+
+      left: 0;
+
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
-    &__image-information {
-      top: 2.5rem;
-      bottom: auto;
+    &__image {
+      position: static;
+
+      order: 1;
     }
 
     &__inner {
+      order: 3;
+
+      background-color: inherit;
     }
 
     &__content {
@@ -151,17 +259,23 @@
     }
   }
 
-  @include media.on-tiny {
-    &__image {
-      height: 240px;
-    }
-  }
-
   @include colour.on-high-contrast {
+    &__information,
     &__content-inner {
       @include colour.colour-border("keyline-dark", 1px);
+    }
 
-      @include media.on-mobile {
+    @include media.on-mobile {
+      &__information {
+        // border-bottom: 0
+      }
+
+      &__inner {
+        @include colour.colour-border("keyline-dark", 1px);
+        border-top: 0;
+      }
+
+      &__content-inner {
         border: none;
       }
     }

package/nationalarchives/components/hero/hero.stories.js

@@ -2,12 +2,20 @@ import Hero from "./template.njk";
 import macroOptions from "./macro-options.json";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   heading: { control: "text" },
   body: { control: "text" },
   text: { 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 } },
+
+  imageCaption: { control: "text" },
+
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -23,13 +31,28 @@ export default {
   argTypes,
 };
 
-const Template = ({ heading, body, text, image, classes, attributes }) =>
+const Template = ({
+  heading,
+  body,
+  text,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageCaption,
+  classes,
+  attributes,
+}) =>
   Hero({
     params: {
       heading,
       body,
       text,
-      image,
+      imageSrc,
+      imageAlt,
+      imageWidth,
+      imageHeight,
+      imageCaption,
       classes,
       attributes,
     },
@@ -38,14 +61,13 @@ const Template = ({ heading, body, text, image, classes, attributes }) =>
 export const Standard = Template.bind({});
 Standard.args = {
   heading: "Title",
-  body: "<p>Body</p>",
-  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,
-    information: "An interesting photo by a famous photographer ©2023",
-  },
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  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,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
   classes: "tna-hero--demo",
 };
 
@@ -53,12 +75,10 @@ Standard.play = async ({ args, canvasElement, step }) => {
   await new Promise((r) => setTimeout(r, 100));
 
   const canvas = within(canvasElement);
-  const image = canvas.getByAltText(args.image.alt);
+  const image = canvas.getByAltText(args.imageAlt);
   const title = canvas.getByText(args.heading);
-  const summary = canvasElement.querySelector(
-    ".tna-hero__image-details-summary",
-  );
-  const information = canvas.getByText(args.image.information);
+  const summary = canvasElement.querySelector(".tna-hero__details-summary");
+  const information = canvas.getByText(args.imageCaption);
 
   await step("Initial load", async () => {
     await expect(image).toBeVisible();
@@ -78,14 +98,45 @@ Standard.play = async ({ args, canvasElement, step }) => {
   });
 };
 
-export const TitleOnly = Template.bind({});
-TitleOnly.args = {
+export const HeadingOnly = Template.bind({});
+HeadingOnly.args = {
   heading: "Title",
-  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: 499,
+  imageHeight: 333,
+  classes: "tna-hero--demo",
+};
+
+export const CaptionWithNoHeading = Template.bind({});
+CaptionWithNoHeading.args = {
+  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,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
+  classes: "tna-hero--demo",
+};
+
+export const Mobile = Template.bind({});
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
   },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+Mobile.args = {
+  heading: "Title",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  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,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
   classes: "tna-hero--demo",
 };

package/nationalarchives/components/hero/macro-options.json

@@ -2,7 +2,7 @@
   {
     "name": "heading",
     "type": "string",
-    "required": true,
+    "required": false,
     "description": ""
   },
   {
@@ -18,42 +18,34 @@
     "description": ""
   },
   {
-    "name": "image",
-    "type": "object",
+    "name": "imageSrc",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageAlt",
+    "type": "string",
     "required": true,
-    "description": "",
-    "params": [
-      {
-        "name": "src",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "alt",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "width",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "height",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "information",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
+    "description": ""
+  },
+  {
+    "name": "imageWidth",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageHeight",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageCaption",
+    "type": "string",
+    "required": false,
+    "description": ""
   },
   {
     "name": "classes",

package/nationalarchives/components/hero/template.njk

@@ -1,34 +1,36 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<header class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image" width="{{ params.image.width }}" height="{{ params.image.height }}">
-  {%- if params.image.information -%}
-  <details class="tna-hero__image-details">
-    <summary class="tna-hero__image-details-summary">
-      <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
-    </summary>
-    <div class="tna-hero__image-information">
-      <p>{{ params.image.information }}</p>
-    </div>
-  </details>
-  {%- endif -%}
-  <div class="tna-container tna-hero__inner">
-    <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
-      <div class="tna-hero__content-inner">
+<{{ 'header' if params.heading else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <figure class="tna-hero__figure">
+    {%- if params.imageCaption -%}
+    <figcaption class="tna-hero__caption">
+      <details class="tna-hero__details">
+        <summary class="tna-hero__details-summary">
+          <span class="tna-hero__details-summary-icon">I</span>mage caption
+        </summary>
+        <div class="tna-hero__information">
+          <p>{{ params.imageCaption }}</p>
+        </div>
+      </details>
+    </figcaption>
+    {%- endif -%}
+    <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" class="tna-hero__image" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+    {%- if params.heading -%}
+    <div class="tna-container tna-hero__inner">
+      <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
+        <div class="tna-hero__content-inner">
         {%- if params.heading -%}
-        <h1 class="tna-heading tna-heading--xl tna-hero__heading">
-          {{ params.heading }}
-        </h1>
+          <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+            {{ params.heading }}
+          </h1>
         {%- endif -%}
         {%- if params.text -%}
-        <div class="tna-hero__body">
           <p>{{ params.text }}</p>
-        </div>
         {%- elseif params.body -%}
-        <div class="tna-hero__body">
           {{ params.body | safe }}
-        </div>
         {%- endif -%}
+        </div>
       </div>
     </div>
-  </div>
-</header>
+    {%- endif -%}
+  </figure>
+</{{ 'header' if params.heading else 'div' }}>