diff --git a/CHANGELOG.md b/CHANGELOG.md index 99b12173..96808d70 100644 --- 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 index 799cf855..622aa5d6 100644 --- a/src/nationalarchives/components/hero/fixtures.json +++ b/src/nationalarchives/components/hero/fixtures.json @@ -4,70 +4,108 @@ { "name": "minimal", "options": { - "heading": "Title", "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 }, - "html": "
\"The

Title

" + "html": "
\"The
" }, { - "name": "with body", + "name": "with content", "options": { - "heading": "Title", + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", "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 }, - "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { - "name": "with text", + "name": "accent style", "options": { - "heading": "Title", - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", "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 + "imageHeight": 333, + "style": "accent" }, - "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { - "name": "with caption", + "name": "contrast style", "options": { - "heading": "Title", + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", "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": "contrast" }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The

Title

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { - "name": "image only", + "name": "tint style", "options": { + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "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, + "style": "tint" + }, + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "shifted", + "options": { + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "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, + "shifted": true + }, + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "shifted with style", + "options": { + "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "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, + "style": "accent", + "shifted": true + }, + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "with caption", + "options": { + "heading": "Title", "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" }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { - "name": "image only with no caption", + "name": "image with caption", "options": { "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 + "imageHeight": 333, + "imageCaption": "An interesting photo by a famous photographer ©2023" }, - "html": "
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "image with different type", @@ -79,7 +117,7 @@ "imageType": "image/png", "imageCaption": "An interesting photo by a famous photographer ©2023" }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "with alternative image sources", @@ -96,7 +134,7 @@ } ] }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "with alternative image sources with media queries", @@ -114,7 +152,7 @@ } ] }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "with alternative image sources with different width/heights", @@ -133,12 +171,11 @@ } ] }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "with classes", "options": { - "heading": "Title", "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", "imageAlt": "The National Archives office", "imageWidth": 499, @@ -146,12 +183,11 @@ "imageCaption": "An interesting photo by a famous photographer ©2023", "classes": "hero__test-class" }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The

Title

" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" }, { "name": "with attributes", "options": { - "heading": "Title", "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", "imageAlt": "The National Archives office", "imageWidth": 499, @@ -161,7 +197,7 @@ "data-testattribute": "foobar" } }, - "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The

Title

" + "html": "
About this image
An interesting photo by a famous photographer ©2023
\"The
" } ] } diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index c73cdf43..dc8ce02a 100644 --- 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,8 +238,6 @@ &__inner { order: 3; - - background-color: inherit; } &__content { @@ -219,8 +245,10 @@ &__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 index eb09ba1a..a7452c46 100644 --- a/src/nationalarchives/components/hero/hero.stories.js +++ b/src/nationalarchives/components/hero/hero.stories.js @@ -4,9 +4,7 @@ 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 } }, @@ -14,6 +12,11 @@ const argTypes = { 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,9 +33,7 @@ export default { }; const Template = ({ - heading, - body, - text, + content, imageSrc, imageAlt, imageWidth, @@ -40,14 +41,14 @@ const Template = ({ imageType, imageSources, imageCaption, + style, + shifted, classes, attributes, }) => Hero({ params: { - heading, - body, - text, + content, imageSrc, imageAlt, imageWidth, @@ -55,6 +56,8 @@ const Template = ({ imageType, imageSources, imageCaption, + style, + shifted, classes, attributes, }, @@ -62,15 +65,13 @@ const Template = ({ export const Standard = Template.bind({}); Standard.args = { - heading: "Title", - body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, 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 }) => { @@ -78,13 +79,13 @@ Standard.play = async ({ args, canvasElement, step }) => { 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: `
+

Focus on

+

‘Not acceptable’: Gay Switchboard’s attempts to become a charity

+
+

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.

`, + 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: `
+

Supertitle

+

Title

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + 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: `
+

Supertitle

+

Title

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, 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: `
+

Supertitle

+

Title

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + 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: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + 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,7 +201,6 @@ CaptionWithNoHeading.args = { imageWidth: 499, imageHeight: 333, imageCaption: "An interesting photo by a famous photographer ©2023", - classes: "tna-hero--demo", }; export const Sources = Template.bind({}); @@ -130,8 +208,7 @@ Sources.parameters = { chromatic: { disableSnapshot: true }, }; Sources.args = { - heading: "Title", - body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, 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: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, 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", }; diff --git a/src/nationalarchives/components/hero/macro-options.json b/src/nationalarchives/components/hero/macro-options.json index 206053c0..df9c3238 100644 --- a/src/nationalarchives/components/hero/macro-options.json +++ b/src/nationalarchives/components/hero/macro-options.json @@ -1,18 +1,6 @@ [ { - "name": "heading", - "type": "string", - "required": false, - "description": "" - }, - { - "name": "body", - "type": "string", - "required": false, - "description": "" - }, - { - "name": "text", + "name": "content", "type": "string", "required": false, "description": "" @@ -91,6 +79,18 @@ "required": false, "description": "" }, + { + "name": "style", + "type": "string", + "required": false, + "description": "The style of hero to use. This can be `contrast`, `tint` or `accent`." + }, + { + "name": "shifted", + "type": "boolean", + "required": false, + "description": "" + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk index 89d92401..db6e3edf 100644 --- a/src/nationalarchives/components/hero/template.njk +++ b/src/nationalarchives/components/hero/template.njk @@ -1,10 +1,20 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%} -<{{ 'header' if params.heading else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> +{%- if params.style == "contrast" -%} + {%- set containerClasses = containerClasses.concat('tna-hero--contrast') -%} +{%- elseif params.style == "tint" -%} + {%- set containerClasses = containerClasses.concat('tna-hero--tint') -%} +{%- elseif params.style == "accent" -%} + {%- set containerClasses = containerClasses.concat('tna-hero--accent') -%} +{%- endif -%} +{%- if params.shifted -%} + {%- set containerClasses = containerClasses.concat('tna-hero--shifted') -%} +{%- endif -%} +<{{ 'header' if params.content else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{%- if params.imageCaption %}
- + About this image
{{ params.imageCaption | safe }}
@@ -20,23 +30,14 @@ {%- endif %} {{ params.imageAlt }} - {%- if params.heading %} + {%- if params.content %}
- {%- if params.heading %} -

- {{ params.heading }} -

- {%- endif %} - {%- if params.text %} -

{{ params.text }}

- {%- elseif params.body %} - {{ params.body | safe }} - {%- endif %} + {{ params.content | safe }}
{%- endif %}
- + diff --git a/src/nationalarchives/components/search-filters/search-filters.scss b/src/nationalarchives/components/search-filters/search-filters.scss index c7609baa..7c3de9f9 100644 --- a/src/nationalarchives/components/search-filters/search-filters.scss +++ b/src/nationalarchives/components/search-filters/search-filters.scss @@ -108,7 +108,7 @@ &__item { padding: spacing.space(0.75); - @include colour.colour-background("background-tint"); + @include colour.tint; @include colour.colour-border("keyline", 1px); border-width: 0 1px 1px; diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js index a64fd267..21bacaf7 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -202,7 +202,6 @@ const Template = ({ theme, accent }) => { imageWidth: 499, imageHeight: 333, imageCaption: "An interesting photo by a famous photographer ©2023", - classes: "tna-hero--demo", }, })}
@@ -465,7 +464,6 @@ const Template = ({ theme, accent }) => { imageWidth: 499, imageHeight: 333, imageCaption: "An interesting photo by a famous photographer ©2023", - classes: "tna-hero--demo", }, })}
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 95020576..21c82d4b 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -293,7 +293,10 @@ } %tint { - @include colour-background("background-tint"); + --background: var(--background-tint); + + @include colour-background("background"); + @include colour-font("font-base"); } diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss index c5269d40..78dcef46 100644 --- a/src/nationalarchives/utilities/_lists.scss +++ b/src/nationalarchives/utilities/_lists.scss @@ -59,6 +59,8 @@ &:not(.tna-dl--plain) { dt { @include colour.colour-background("background-tint"); + + @include colour.colour-font("font-base"); } dd { @@ -158,7 +160,7 @@ dt:first-child, dd:nth-of-type(2n) + dt, dd:nth-of-type(2n + 1) { - @include colour.colour-background("background-tint"); + @include colour.tint; } } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index e98d6fef..bec535bd 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -428,6 +428,10 @@ small { @include typography.relative-font-size(22); @include colour.colour-font("font-dark"); + + @include media.on-mobile { + @include typography.relative-font-size(20); + } } .tna-scene-setter {