diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index b09ee993..c543c740 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -29,10 +29,6 @@ jobs: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} storybookBuildDir: storybook exitZeroOnChanges: true - # onlyChanged: true - # externals: | - # - ".storybook/**" - # - "src/nationalarchives/variables/**" - # - "src/nationalarchives/tools/**" - # - "src/nationalarchives/utilities/**" - # - "src/nationalarchives/lib/**" + onlyChanged: true + externals: | + - (.storybook|src)/** diff --git a/CHANGELOG.md b/CHANGELOG.md index 69f680c6..7c6effc4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,12 +10,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Footer component can now contain an optional theme selector which requires the component to have JavaScript initialised -- The Cookie library is now a singleton +- Hero components have a new split layout option ### Changed + +- Removed single `content` property in hero components in favour of separate fields (i.e. `title`, `text`/`body`) +- Nested unordered lists use the same marker +- The Cookie library is now a singleton +- Improved typeface definitions and includes + ### Deprecated ### Removed ### Fixed + +- Date search component text updated to use the defined detail font + ### Security ## [0.1.52](https://github.com/nationalarchives/tna-frontend/compare/v0.1.51...v0.1.52) - 2024-04-04 diff --git a/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf b/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf deleted file mode 100644 index 29ff6938..00000000 Binary files a/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf and /dev/null differ diff --git a/src/nationalarchives/assets/fonts/OpenSans-SemiBold.ttf b/src/nationalarchives/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 00000000..e5ab4644 Binary files /dev/null and b/src/nationalarchives/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/src/nationalarchives/components/button/button-group.stories.js b/src/nationalarchives/components/button/button-group.stories.js index a99cff9d..31cef1aa 100644 --- a/src/nationalarchives/components/button/button-group.stories.js +++ b/src/nationalarchives/components/button/button-group.stories.js @@ -105,14 +105,6 @@ Group.args = { ], }; -const GroupOfSmallTemplate = ({ buttons }) => - `
- ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}`, small: true })).join("")} -
`; - -export const GroupOfSmall = GroupOfSmallTemplate.bind({}); -GroupOfSmall.args = Group.args; - const SmallGroupTemplate = ({ buttons }) => `
${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")} diff --git a/src/nationalarchives/components/button/fixtures.json b/src/nationalarchives/components/button/fixtures.json index 4c5b83aa..c4f35b23 100644 --- a/src/nationalarchives/components/button/fixtures.json +++ b/src/nationalarchives/components/button/fixtures.json @@ -27,6 +27,82 @@ }, "html": "Log in" }, + { + "name": "with icon", + "options": { + "text": "Log in", + "href": "#", + "icon": "heart" + }, + "html": "Log in" + }, + { + "name": "with right aligned icon", + "options": { + "text": "Log in", + "href": "#", + "icon": "heart", + "rightAlignIcon": true + }, + "html": "Log in" + }, + { + "name": "icon only", + "options": { + "text": "Log in", + "href": "#", + "icon": "heart", + "iconOnly": true + }, + "html": "Log in" + }, + { + "name": "icon only on mobile", + "options": { + "text": "Log in", + "href": "#", + "icon": "heart", + "iconOnlyOnMobile": true + }, + "html": "Log in" + }, + { + "name": "small", + "options": { + "text": "Log in", + "href": "#", + "small": true + }, + "html": "Log in" + }, + { + "name": "plain", + "options": { + "text": "Log in", + "href": "#", + "plain": true + }, + "html": "Log in" + }, + { + "name": "button element", + "options": { + "text": "Log in", + "href": "#", + "buttonElement": true + }, + "html": "" + }, + { + "name": "button element with type", + "options": { + "text": "Log in", + "href": "#", + "buttonElement": true, + "buttonType": "submit" + }, + "html": "" + }, { "name": "with classes", "options": { diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json index 1f210002..8cf0d5dc 100644 --- a/src/nationalarchives/components/card/macro-options.json +++ b/src/nationalarchives/components/card/macro-options.json @@ -22,7 +22,7 @@ "type": "string", "required": false, "default": "m", - "description": "The physical size of the card title." + "description": "The physical size of the card title (`xl`, `l`, `m` or `s`)." }, { "name": "href", diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js b/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js index f50b5b00..e9e226b0 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js @@ -72,7 +72,6 @@ Accept.args = { serviceName: "My service", cookiesUrl: "#", allowInsecure: true, - style: "contrast", classes: "tna-cookie-banner--demo", }; Accept.play = async ({ canvasElement }) => { @@ -115,7 +114,6 @@ export const Reject = Template.bind({}); Reject.args = { serviceName: "My service", cookiesUrl: "#", - style: "contrast", classes: "tna-cookie-banner--demo", }; Reject.play = async ({ canvasElement }) => { @@ -153,7 +151,6 @@ CustomPolicies.args = { serviceName: "My service", cookiesUrl: "#", policies: "custom", - style: "contrast", classes: "tna-cookie-banner--demo", }; CustomPolicies.parameters = { @@ -192,7 +189,6 @@ Existing.args = { serviceName: "My service", cookiesUrl: "#", allowInsecure: true, - style: "contrast", classes: "tna-cookie-banner--demo", }; Existing.decorators = [ diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss index 10412515..c8ad173b 100644 --- a/src/nationalarchives/components/date-search/date-search.scss +++ b/src/nationalarchives/components/date-search/date-search.scss @@ -1,6 +1,7 @@ @use "../../variables/forms"; @use "../../tools/colour"; @use "../../tools/spacing"; +@use "../../tools/typography"; .tna-date-search { max-width: 100%; @@ -11,6 +12,7 @@ @include colour.light; @include colour.colour-font("input-foreground"); + @include typography.detail-font; font-size: inherit; line-height: 2rem; diff --git a/src/nationalarchives/components/footer/analytics.js b/src/nationalarchives/components/footer/analytics.js index 20971aea..1ffd28a5 100644 --- a/src/nationalarchives/components/footer/analytics.js +++ b/src/nationalarchives/components/footer/analytics.js @@ -90,6 +90,14 @@ export default [ data_link: valueGetters.text, }, }, + { + eventName: "theme.change", + targetElement: ".tna-footer__theme-selector-button", + on: "click", + data: { + value: valueGetters.value, + }, + }, ], }, ]; diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json index 622aa5d6..194bde15 100644 --- a/src/nationalarchives/components/hero/fixtures.json +++ b/src/nationalarchives/components/hero/fixtures.json @@ -12,89 +12,177 @@ "html": "
\"The
" }, { - "name": "with content", + "name": "with a title", "options": { - "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", - "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "title": "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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "html": "
\"The

Title

" + }, + { + "name": "with a different size title", + "options": { + "title": "Title", + "headingSize": "m", + "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

" + }, + { + "name": "with a different level title", + "options": { + "title": "Title", + "headingLevel": "2", + "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

" + }, + { + "name": "with a title and supertitle", + "options": { + "supertitle": "Title", + "title": "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

TitleTitle

" + }, + { + "name": "with text", + "options": { + "text": "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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "with body", + "options": { + "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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { "name": "accent style", "options": { - "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "title": "Title", + "text": "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" }, - "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { "name": "contrast style", "options": { - "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "title": "Title", + "text": "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": "contrast" }, - "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" }, { "name": "tint style", "options": { - "content": "

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "title": "Title", + "text": "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.

" + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "title": "Title", + "text": "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 + "layout": "shift" }, - "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + "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.

", + "title": "Title", + "text": "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": "shift" + }, + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "split", + "options": { + "title": "Title", + "text": "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, + "layout": "split" + }, + "html": "
\"The

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

" + }, + { + "name": "split with style", + "options": { + "title": "Title", + "text": "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 + "layout": "split" }, - "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", "options": { - "heading": "Title", + "title": "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

Title

" }, { "name": "image with caption", diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index 1c8894b3..a4cf6e41 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/src/nationalarchives/components/hero/hero.scss @@ -1,4 +1,7 @@ +@use "sass:math"; + @use "../../tools/colour"; +@use "../../tools/grid"; @use "../../tools/media"; @use "../../tools/spacing"; @use "../../tools/typography"; @@ -111,9 +114,6 @@ $shift-units: 5 !default; } &__image { - width: 100%; - height: 100%; - position: absolute; inset: 0; z-index: 1; @@ -189,15 +189,55 @@ $shift-units: 5 !default; &__body { } - &--shifted { + &--shift { margin-bottom: spacing.space($shift-units - $padding-units-bottom); } - &--shifted &__content-inner { + &--shift &__content-inner { position: relative; top: spacing.space($shift-units); } + &--shift:not(#{&}--accent):not(#{&}--tint) &__content-inner { + @include colour.contrast; + } + + &--split { + } + + &--split:not(#{&}--accent):not(#{&}--tint) { + @include colour.contrast; + } + + &--split &__figure { + min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem); + padding-top: spacing.space(2); + padding-bottom: spacing.space(2); + + box-sizing: border-box; + + align-items: center; + } + + &--split &__information { + max-width: 50%; + + box-sizing: border-box; + } + + &--split &__image { + left: 50%; + } + + &--split &__content { + width: 50%; + padding-right: grid.gutter-width(); + } + + &--split &__content-inner { + padding: 0; + } + @include media.on-mobile { &__figure { min-height: auto; @@ -219,7 +259,8 @@ $shift-units: 5 !default; &__details-summary-icon { } - &__information { + &__information, + &--split &__information { width: auto; max-width: none; @@ -248,16 +289,32 @@ $shift-units: 5 !default; padding-left: 0; } - &--shifted &__content-inner { - position: static; - } - &__heading { } &__body { margin-top: spacing.space(1); } + + &--shift &__content-inner { + position: static; + } + + &--split &__figure { + min-height: auto; + padding-top: 0; + padding-bottom: 0; + } + + &--split &__content { + width: 100%; + padding-right: grid.gutter-width-half(); + } + + &--split &__content-inner { + padding-top: spacing.space(2); + padding-bottom: spacing.space(2); + } } @include colour.on-high-contrast-and-forced-colours { diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js index a7452c46..53495249 100644 --- a/src/nationalarchives/components/hero/hero.stories.js +++ b/src/nationalarchives/components/hero/hero.stories.js @@ -4,7 +4,12 @@ import { within, userEvent, expect } from "@storybook/test"; import { customViewports } from "../../../../.storybook/viewports"; const argTypes = { - content: { control: "text" }, + supertitle: { control: "text" }, + title: { control: "text" }, + headingLevel: { control: { type: "number", min: 1, max: 6 } }, + headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + body: { control: "text" }, + text: { control: "text" }, imageSrc: { control: { type: "file", accept: ".jpg" } }, imageAlt: { control: "text" }, imageWidth: { control: { type: "number", min: 1 } }, @@ -16,7 +21,10 @@ const argTypes = { control: "inline-radio", options: ["none", "contrast", "tint", "accent"], }, - shifted: { control: "boolean" }, + layout: { + control: "inline-radio", + options: ["plain", "shift", "split"], + }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -33,7 +41,12 @@ export default { }; const Template = ({ - content, + supertitle, + title, + headingLevel, + headingSize, + body, + text, imageSrc, imageAlt, imageWidth, @@ -42,13 +55,18 @@ const Template = ({ imageSources, imageCaption, style, - shifted, + layout, classes, attributes, }) => Hero({ params: { - content, + supertitle, + title, + headingLevel, + headingSize, + body, + text, imageSrc, imageAlt, imageWidth, @@ -57,7 +75,7 @@ const Template = ({ imageSources, imageCaption, style, - shifted, + layout, classes, attributes, }, @@ -65,7 +83,8 @@ const Template = ({ export const Standard = Template.bind({}); Standard.args = { - content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + title: "Title", + text: "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", @@ -106,18 +125,15 @@ 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.

`, + supertitle: "Focus on", + title: "‘Not acceptable’: Gay Switchboard’s attempts to become a charity", + body: `

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({}); @@ -125,11 +141,9 @@ Accent.parameters = { chromatic: { disableSnapshot: true }, }; Accent.args = { - content: `
-

Supertitle

-

Title

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + supertitle: "Supertitle", + title: "Title", + text: "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", @@ -144,11 +158,9 @@ Contrast.parameters = { chromatic: { disableSnapshot: true }, }; Contrast.args = { - content: `
-

Supertitle

-

Title

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + supertitle: "Supertitle", + title: "Title", + text: "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", @@ -163,11 +175,9 @@ Tint.parameters = { chromatic: { disableSnapshot: true }, }; Tint.args = { - content: `
-

Supertitle

-

Title

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + supertitle: "Supertitle", + title: "Title", + text: "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", @@ -179,7 +189,22 @@ Tint.args = { export const Shifted = Template.bind({}); Shifted.args = { - content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + title: "Title", + text: "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", + layout: "shift", +}; + +export const Split = Template.bind({}); +Split.args = { + title: "Title", + text: "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", @@ -187,7 +212,7 @@ Shifted.args = { imageHeight: 333, imageCaption: "An interesting photo by a famous photographer ©2023", style: "accent", - shifted: true, + layout: "split", }; export const CaptionWithNoHeading = Template.bind({}); @@ -208,7 +233,8 @@ Sources.parameters = { chromatic: { disableSnapshot: true }, }; Sources.args = { - content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + title: "Title", + text: "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", @@ -235,7 +261,9 @@ Mobile.parameters = { }, }; Mobile.args = { - content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + supertitle: "Supertitle", + title: "Title", + text: "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", diff --git a/src/nationalarchives/components/hero/macro-options.json b/src/nationalarchives/components/hero/macro-options.json index df9c3238..4fe717dc 100644 --- a/src/nationalarchives/components/hero/macro-options.json +++ b/src/nationalarchives/components/hero/macro-options.json @@ -1,6 +1,37 @@ [ { - "name": "content", + "name": "supertitle", + "type": "string", + "required": false, + "description": "The smaller title to display above the main hero title." + }, + { + "name": "title", + "type": "string", + "required": false, + "description": "The main title of the hero. If set, then `headingLevel` also needs to be set." + }, + { + "name": "headingLevel", + "type": "number", + "required": false, + "description": "The heading level which represents an element from `

` through to `

`. Default is `1`." + }, + { + "name": "headingSize", + "type": "string", + "required": false, + "default": "m", + "description": "The physical size of the hero title (`xl`, `l`, `m` or `s`). Default is `xl`." + }, + { + "name": "body", + "type": "string", + "required": false, + "description": "" + }, + { + "name": "text", "type": "string", "required": false, "description": "" @@ -86,8 +117,8 @@ "description": "The style of hero to use. This can be `contrast`, `tint` or `accent`." }, { - "name": "shifted", - "type": "boolean", + "name": "style", + "type": "string", "required": false, "description": "" }, diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk index db6e3edf..023edac5 100644 --- a/src/nationalarchives/components/hero/template.njk +++ b/src/nationalarchives/components/hero/template.njk @@ -6,10 +6,13 @@ {%- elseif params.style == "accent" -%} {%- set containerClasses = containerClasses.concat('tna-hero--accent') -%} {%- endif -%} -{%- if params.shifted -%} - {%- set containerClasses = containerClasses.concat('tna-hero--shifted') -%} +{%- if params.layout == "shift" -%} + {%- set containerClasses = containerClasses.concat('tna-hero--shift') -%} +{%- elseif params.layout == "split" -%} + {%- set containerClasses = containerClasses.concat('tna-hero--split') -%} {%- endif -%} -<{{ 'header' if params.content else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> +{% set hasContent = params.title or params.body or params.text %} +<{{ 'header' if hasContent else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{%- if params.imageCaption %}
@@ -30,14 +33,32 @@ {%- endif %} {{ params.imageAlt }} - {%- if params.content %} + {%- if hasContent %}
- {{ params.content | safe }} + {%- if params.title %} + {%- if params.supertitle %} +
+ + {{ params.supertitle }} + {{ params.title }} + +
+ {%- else %} + + {{ params.title }} + + {%- endif %} + {%- endif %} + {%- if params.text %} +

{{ params.text }}

+ {%- else %} + {{ params.body | safe }} + {%- endif %}
{%- endif %}
- + diff --git a/src/nationalarchives/components/index-grid/macro-options.json b/src/nationalarchives/components/index-grid/macro-options.json index 86a37f0a..6a5b3438 100644 --- a/src/nationalarchives/components/index-grid/macro-options.json +++ b/src/nationalarchives/components/index-grid/macro-options.json @@ -16,7 +16,7 @@ "type": "string", "required": false, "default": "m", - "description": "The physical size of the index grid title." + "description": "The physical size of the index grid title (`xl`, `l`, `m` or `s`)." }, { "name": "headingHref", diff --git a/src/nationalarchives/lib/functions.scss b/src/nationalarchives/lib/functions.scss new file mode 100644 index 00000000..4423578a --- /dev/null +++ b/src/nationalarchives/lib/functions.scss @@ -0,0 +1,16 @@ +@use "sass:string"; + +@function str-replace($string, $search, $replace: "") { + $index: string.index($string, $search); + + @if $index { + @return string.slice($string, 1, $index - 1) + $replace + + str-replace( + string.slice($string, $index + string.length($search)), + $search, + $replace + ); + } + + @return $string; +} 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 f5b4dda4..1346ec34 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -191,7 +191,8 @@ const Template = ({ theme, accent }) => {
${Hero({ params: { - content: `

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`, + title: "Title", + text: "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", diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss index 1c20535b..205cfbb1 100644 --- a/src/nationalarchives/utilities/_global.scss +++ b/src/nationalarchives/utilities/_global.scss @@ -1,4 +1,12 @@ .tna-template { + /* + * ------------------------------------------ + * A minimum page width of 320px is needed in + * order to meet the WCAG AA success criteria + * for 1.4.10 (Reflow) + * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html + * ------------------------------------------ + */ min-width: 320px; width: 100%; height: 100%; diff --git a/src/nationalarchives/utilities/_imports.scss b/src/nationalarchives/utilities/_imports.scss new file mode 100644 index 00000000..8d591c01 --- /dev/null +++ b/src/nationalarchives/utilities/_imports.scss @@ -0,0 +1,57 @@ +@use "../variables/assets"; +@use "../variables/typography"; +@use "../lib/functions"; + +@if typography.$use-local-fonts { + @font-face { + font-family: typography.$main-font-family-name; + src: url("#{assets.$tna-font-path}/#{typography.$main-font-file}"); + font-weight: typography.$main-font-weight; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: typography.$main-font-family-name; + src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-medium}"); + font-weight: typography.$main-font-weight-medium; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: typography.$main-font-family-name; + src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-bold}"); + font-weight: typography.$main-font-weight-bold; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: typography.$detail-font-family-name; + src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file}"); + font-weight: typography.$detail-font-weight; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: typography.$detail-font-family-name; + src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file-bold}"); + font-weight: typography.$detail-font-weight-bold; + font-style: normal; + font-display: swap; + } +} @else { + $main-font-family-name: functions.str-replace( + typography.$main-font-family-name, + " ", + "+" + ); + $detail-font-family-name: functions.str-replace( + typography.$detail-font-family-name, + " ", + "+" + ); + @import url("https://fonts.googleapis.com/css2?family=#{$main-font-family-name}:wght@#{typography.$main-font-weight}..#{typography.$main-font-weight-bold}&family=#{$detail-font-family-name}:wght@#{typography.$detail-font-weight}..#{typography.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */ +} diff --git a/src/nationalarchives/utilities/_index.scss b/src/nationalarchives/utilities/_index.scss index aeea52b4..20c52be2 100644 --- a/src/nationalarchives/utilities/_index.scss +++ b/src/nationalarchives/utilities/_index.scss @@ -5,6 +5,7 @@ @use "debug"; @use "forms"; @use "global"; +@use "imports"; @use "lists"; @use "overrides"; @use "reset"; diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss index 6f5b067e..3049d07e 100644 --- a/src/nationalarchives/utilities/_lists.scss +++ b/src/nationalarchives/utilities/_lists.scss @@ -4,32 +4,45 @@ @use "../tools/typography"; .tna-ul, -.tna-ol { - margin: spacing.space(1) 0 0; - padding: 0 0 0 spacing.space(2); +.tna-ul ul { + list-style-type: disc; +} - &:first-child { +.tna-ul, +.tna-ol { + ul, + ol { margin-top: 0; } - li::marker { - @include colour.colour-font("accent-background"); - font-weight: 700; + &, + & ul, + & ol { + margin: spacing.space(1) 0 0; + padding: 0 0 0 spacing.space(2); + + &--plain { + padding-left: 0; - .tna-background-accent & { - @include colour.colour-font("font-dark"); + &, + & ul, + & ol { + list-style: none; + } } - } - &--plain { - padding-left: 0; + &:first-child { + margin-top: 0; + } - list-style: none; - } + li::marker { + @include colour.colour-font("accent-background"); + font-weight: 700; - .tna-ul, - .tna-ol { - margin-top: 0; + .tna-background-accent & { + @include colour.colour-font("font-dark"); + } + } } } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index bec535bd..b81e5129 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -1,48 +1,11 @@ @use "sass:math"; @use "sass:selector"; -@use "../variables/assets"; @use "../variables/typography" as typographyVars; @use "../tools/colour"; @use "../tools/media"; @use "../tools/spacing"; @use "../tools/typography"; -@if typographyVars.$use-local-fonts { - @font-face { - font-family: "Open Sans"; - src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf"); - font-weight: typographyVars.$main-font-weight; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "Open Sans"; - src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf"); - font-weight: typographyVars.$main-font-weight-bold; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "Roboto Mono"; - src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf"); - font-weight: typographyVars.$detail-font-weight; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "Roboto Mono"; - src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf"); - font-weight: typographyVars.$detail-font-weight-bold; - font-style: normal; - font-display: swap; - } -} @else { - @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */ -} - .tna-template { @include colour.colour-font("font-base"); @include typography.main-font; @@ -121,6 +84,7 @@ small { @include colour.colour-font("font-base"); @include typography.detail-font-small; line-height: 1; + text-align: center; } %chip-plain { diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss index bd5c25e3..f261ec8f 100644 --- a/src/nationalarchives/variables/_typography.scss +++ b/src/nationalarchives/variables/_typography.scss @@ -1,5 +1,24 @@ +/* + * ------------------------------------------ + * The typefaces, sizes and spacings that are + * defined in this file have been selected to + * ensure 100% match with the latest National + * Archives brand guidelines - avoid changing + * or overwriting any of these values without + * signing off with the Digital Services team + * first + * ------------------------------------------ + */ + $relative-1rem-px: 16; // 16px = 1rem +/* + * ------------------------------------------ + * When true, use the included font files for + * Open Sans and Roboto Mono, rather than the + * versions hosted by Google Fonts + * ------------------------------------------ + */ $use-local-fonts: false !default; $body-font-size-px: 18 !default; @@ -8,18 +27,50 @@ $body-line-height: 1.75 !default; $interactive-text-decoration-thickness: 3.5px !default; -$main-font: "Open Sans" !default; -$main-font-family: $main-font, sans-serif !default; +$main-font-family-name: "Open Sans" !default; +$main-font-family: + #{$main-font-family-name}, + sans-serif; $main-font-weight: 400 !default; $main-font-weight-medium: 600 !default; $main-font-weight-bold: 700 !default; +$main-font-file: "OpenSans-Regular.ttf" !default; +$main-font-file-medium: "OpenSans-SemiBold.ttf" !default; +$main-font-file-bold: "OpenSans-Bold.ttf" !default; -$heading-font-family: supria-sans-condensed, "Arial Narrow", sans-serif !default; +/* + * ------------------------------------------ + * To use Supria Sans Condensed (which is the + * approved heading typeface for The National + * Archives), you need to obtain a licence to + * properly embed the CSS files with the font + * definitions in your service - check with a + * member of the Digital Services team on how + * to get a licence + * ------------------------------------------ + */ +$heading-font-family-name: "supria-sans-condensed" !default; +$heading-font-family: + #{$heading-font-family-name}, + "Arial Narrow", + sans-serif; $heading-font-weight: 500 !default; -$detail-font-family: "Roboto Mono", monospace !default; +/* + * ------------------------------------------ + * The detail font should be a monospace font + * and is used for chips, supertitles as well + * as the date search component + * ------------------------------------------ + */ +$detail-font-family-name: "Roboto Mono" !default; +$detail-font-family: + #{$detail-font-family-name}, + monospace; $detail-font-weight: 400 !default; $detail-font-weight-bold: 500 !default; +$detail-font-file: "RobotoMono-Regular.ttf" !default; +$detail-font-file-bold: "RobotoMono-Medium.ttf" !default; $heading-xl-font-size-default: 64 !default; $heading-xl-font-size-medium: 48 !default;