Refactor hero component (#114)

* Refactor hero component * Fix broken test
nationalarchives · Apr 4, 2024 · a19ba79 · a19ba79
1 parent e97c2d5
commit a19ba79
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - "Thick" and button border widths are both customisable
 - The colour of a card label can be changed
 - Accent colours can be set on blocks with `tna-accent-pink`, `tna-accent-orange`, `tna-accent-yellow`, `tna-accent-blue` and `tna-accent-green`
+- Hero components can now have a "shifted" style option and can have contrasting, tinted and accent backgrounds
 
 ### Changed
 
@@ -26,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 - Fallbacks for custom CSS properties are defined in the `var()` function rather than in a separate property - this removes any colouring support for browsers without custom CSS properties
+- Hero components no longer have `heading`, `body` or `text` properties - these have been replaced with a `content` property
 
 ### Fixed
 

diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -3,18 +3,38 @@
 @use "../../tools/spacing";
 @use "../../tools/typography";
 
+$padding-units-top: 10 !default;
+$padding-units-bottom: 2 !default;
+$shift-units: 5 !default;
+
 .tna-hero {
-  @include colour.contrast-on-mobile;
+  &--contrast {
+    @include colour.contrast;
+  }
+
+  &--tint {
+    @include colour.tint;
+  }
+
+  &--accent {
+    @include colour.accent;
+
+    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {
+      @include colour.contrast;
+
+      @include colour.colour-border("contrast-background");
+    }
+  }
 
   &__figure {
     min-height: clamp(
-      #{spacing.space(12)},
-      calc(40vw - #{spacing.space(12)}),
+      #{spacing.space($padding-units-top + $padding-units-bottom)},
+      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),
       50rem
     );
     margin: 0;
-    padding-top: spacing.space(8);
-    padding-bottom: spacing.space(4);
+    padding-top: spacing.space($padding-units-top);
+    padding-bottom: spacing.space($padding-units-bottom);
 
     display: flex;
     align-items: flex-end;
@@ -26,8 +46,8 @@
     width: 100%;
 
     position: absolute;
+    top: 0;
     right: 0;
-    bottom: 0;
     z-index: 5;
 
     overflow: visible;
@@ -44,8 +64,8 @@
     height: 1.5rem;
 
     position: absolute;
+    top: spacing.space(0.5);
     right: spacing.space(0.5);
-    bottom: spacing.space(0.5);
     z-index: 2;
 
     font-size: 0;
@@ -81,8 +101,8 @@
       spacing.space(1);
 
     position: absolute;
+    top: 0;
     right: 0;
-    bottom: 0;
     z-index: 1;
 
     @include colour.contrast;
@@ -150,6 +170,10 @@
     z-index: 4;
   }
 
+  &:not(#{&}--accent):not(#{&}--tint) &__inner {
+    @include colour.contrast-on-mobile;
+  }
+
   &__content {
   }
 
@@ -165,18 +189,24 @@
   &__body {
   }
 
+  &--shifted {
+    margin-bottom: spacing.space($shift-units - $padding-units-bottom);
+  }
+
+  &--shifted &__content-inner {
+    position: relative;
+    top: spacing.space($shift-units);
+  }
+
   @include media.on-mobile {
     &__figure {
       min-height: auto;
       padding: 0;
 
       flex-direction: column;
-
-      background-color: inherit;
     }
 
     &__caption {
-      position: relative;
       order: 2;
     }
 
@@ -194,8 +224,6 @@
       max-width: none;
 
       left: 0;
-
-      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__image {
@@ -210,17 +238,17 @@
 
     &__inner {
       order: 3;
-
-      background-color: inherit;
     }
 
     &__content {
     }
 
     &__content-inner {
       padding: spacing.space(2) 0;
+    }
 
-      background-color: transparent;
+    &--shifted &__content-inner {
+      position: static;
     }
 
     &__heading {

diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js
@@ -4,16 +4,19 @@ import { within, userEvent, expect } from "@storybook/test";
 import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
-  heading: { control: "text" },
-  body: { control: "text" },
-  text: { control: "text" },
+  content: { control: "text" },
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
   imageHeight: { control: { type: "number", min: 1 } },
   imageType: { control: "text" },
   imageSources: { control: "object" },
   imageCaption: { control: "text" },
+  style: {
+    control: "inline-radio",
+    options: ["none", "contrast", "tint", "accent"],
+  },
+  shifted: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -30,61 +33,59 @@ export default {
 };
 
 const Template = ({
-  heading,
-  body,
-  text,
+  content,
   imageSrc,
   imageAlt,
   imageWidth,
   imageHeight,
   imageType,
   imageSources,
   imageCaption,
+  style,
+  shifted,
   classes,
   attributes,
 }) =>
   Hero({
     params: {
-      heading,
-      body,
-      text,
+      content,
       imageSrc,
       imageAlt,
       imageWidth,
       imageHeight,
       imageType,
       imageSources,
       imageCaption,
+      style,
+      shifted,
       classes,
       attributes,
     },
   });
 
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: "Title",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  content: `<h1 class="tna-heading-xl">Title</h1><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",
 };
 
 Standard.play = async ({ args, canvasElement, step }) => {
   await new Promise((r) => setTimeout(r, 100));
 
   const canvas = within(canvasElement);
   const image = canvas.getByAltText(args.imageAlt);
-  const title = canvas.getByText(args.heading);
+  const content = canvasElement.querySelector(".tna-hero__content");
   const summary = canvasElement.querySelector(".tna-hero__details-summary");
   const information = canvas.getByText(args.imageCaption);
 
   await step("Initial load", async () => {
     await expect(image).toBeVisible();
-    await expect(title).toBeVisible();
+    await expect(content).toBeVisible();
     await expect(summary).toBeVisible();
     await expect(information).not.toBeVisible();
   });
@@ -100,15 +101,93 @@ Standard.play = async ({ args, canvasElement, step }) => {
   });
 };
 
-export const HeadingOnly = Template.bind({});
-HeadingOnly.args = {
-  heading: "Title",
+export const LargeContent = Template.bind({});
+LargeContent.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+LargeContent.args = {
+  content: `<hgroup class="tna-hgroup-xl">
+  <p class="tna-hgroup__supertitle">Focus on</p>
+  <h1 class="tna-hgroup__title">‘Not acceptable’: Gay Switchboard’s attempts to become a charity</h1>
+</hgroup>
+<p class="tna-large-paragraph">Switchboard LGBT+ Helpline is one of the oldest telephone help services for lesbian, gay, bisexual, transgender and queer people in the UK. Despite high demand for its support, prejudice and laws meant Switchboard’s journey to register as a charity was not easy.</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",
+  style: "accent",
+};
+
+export const Accent = Template.bind({});
+Accent.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Accent.args = {
+  content: `<hgroup class="tna-hgroup-xl">
+  <p class="tna-hgroup__supertitle">Supertitle</p>
+  <h1 class="tna-hgroup__title">Title</h1>
+</hgroup>
+<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",
+  style: "accent",
+};
+
+export const Contrast = Template.bind({});
+Contrast.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Contrast.args = {
+  content: `<hgroup class="tna-hgroup-xl">
+  <p class="tna-hgroup__supertitle">Supertitle</p>
+  <h1 class="tna-hgroup__title">Title</h1>
+</hgroup>
+<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,
-  classes: "tna-hero--demo",
+  imageCaption: "An interesting photo by a famous photographer ©2023",
+  style: "contrast",
+};
+
+export const Tint = Template.bind({});
+Tint.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Tint.args = {
+  content: `<hgroup class="tna-hgroup-xl">
+  <p class="tna-hgroup__supertitle">Supertitle</p>
+  <h1 class="tna-hgroup__title">Title</h1>
+</hgroup>
+<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",
+  style: "tint",
+};
+
+export const Shifted = Template.bind({});
+Shifted.args = {
+  content: `<h1 class="tna-heading-xl">Title</h1><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",
+  style: "accent",
+  shifted: true,
 };
 
 export const CaptionWithNoHeading = Template.bind({});
@@ -122,16 +201,14 @@ CaptionWithNoHeading.args = {
   imageWidth: 499,
   imageHeight: 333,
   imageCaption: "An interesting photo by a famous photographer ©2023",
-  classes: "tna-hero--demo",
 };
 
 export const Sources = Template.bind({});
 Sources.parameters = {
   chromatic: { disableSnapshot: true },
 };
 Sources.args = {
-  heading: "Title",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  content: `<h1 class="tna-heading-xl">Title</h1><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",
@@ -146,7 +223,6 @@ Sources.args = {
       height: 404,
     },
   ],
-  classes: "tna-hero--demo",
 };
 
 export const Mobile = Template.bind({});
@@ -159,13 +235,11 @@ Mobile.parameters = {
   },
 };
 Mobile.args = {
-  heading: "Title",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  content: `<h1 class="tna-heading-xl">Title</h1><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",
 };