diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml index 856d28eb..0acb64c0 100644 --- a/.github/actions/prototype-kit-test/action.yml +++ b/.github/actions/prototype-kit-test/action.yml @@ -44,6 +44,7 @@ runs: echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/details/macro.njk\" import tnaDetails %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && @@ -80,6 +81,7 @@ runs: echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html && echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html && echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaDetails({}) }}" >> prototype/app/views/index.html && echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html && echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html && echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html && diff --git a/CHANGELOG.md b/CHANGELOG.md index 149c92e0..d001cc24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- New accordion component added +- New accordion and details components added ### Changed ### Deprecated diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss index c0a7a4c0..33bbcb42 100644 --- a/src/nationalarchives/components/_index.scss +++ b/src/nationalarchives/components/_index.scss @@ -7,6 +7,7 @@ @use "cookie-banner"; @use "date-input"; @use "date-search"; +@use "details"; @use "error-summary"; @use "featured-records"; @use "footer"; diff --git a/src/nationalarchives/components/accordion/accordion.mjs b/src/nationalarchives/components/accordion/accordion.mjs index 3a220e82..371f9440 100644 --- a/src/nationalarchives/components/accordion/accordion.mjs +++ b/src/nationalarchives/components/accordion/accordion.mjs @@ -1,9 +1,35 @@ export class Accordion { + polyfillRequired = null; + constructor($module) { this.$module = $module; - if (!this.$module) { + this.$firstDetailsElement = + $module && $module.querySelector(".tna-accordion__details[name]"); + this.$detailsElements = + $module && + this.$firstDetailsElement && + document.querySelectorAll( + `.tna-accordion__details[name="${this.$firstDetailsElement.getAttribute("name")}"]`, + ); + if (!this.$module || !this.$detailsElements) { return; } - // TODO: Polyfill details[name] for Firefox + + Array.from(this.$detailsElements).forEach(($detailsElement) => { + $detailsElement.addEventListener("toggle", (e) => { + const $thisDetailsElement = e.target; + if ($thisDetailsElement.hasAttribute("open")) { + Array.from(this.$detailsElements) + .filter( + ($eachDetailsElement) => + $eachDetailsElement !== $thisDetailsElement && + $eachDetailsElement.hasAttribute("open"), + ) + .forEach(($eachDetailsElement) => + $eachDetailsElement.removeAttribute("open"), + ); + } + }); + }); } } diff --git a/src/nationalarchives/components/accordion/accordion.scss b/src/nationalarchives/components/accordion/accordion.scss index 767f6cea..0ed1ac73 100644 --- a/src/nationalarchives/components/accordion/accordion.scss +++ b/src/nationalarchives/components/accordion/accordion.scss @@ -5,24 +5,18 @@ .tna-accordion { @include spacing.space-above; - margin-top: spacing.space(1); - // @include colour.colour-border("keyline", 1px, solid, top); - // @include colour.colour-border("keyline", 1px, solid, bottom); + @include colour.colour-border("keyline", 1px, solid, top); // @include colour.thick-keyline-dark(top); // @include colour.thick-keyline-accent(top); - &:first-child { - margin-top: 0; - } - &__details { - // @include colour.colour-border("keyline", 1px, solid, bottom); + @include colour.colour-border("keyline", 1px, solid, bottom); } &__summary { - padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5) - spacing.space(2.75); + padding: spacing.space(0.5) spacing.space(2.5) spacing.space(0.5) + spacing.space(1); position: relative; z-index: 1; @@ -44,33 +38,18 @@ position: absolute; top: calc(50% - 0.5rem); - left: 1rem; + right: 0.75rem; - border-width: 0.5rem 0 0.5rem #{math.div(math.sqrt(3), 2)}rem; - border-color: transparent transparent transparent - colour.colour-var("font-light"); + border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem; + border-color: colour.colour-var("font-light") transparent transparent + transparent; border-style: solid; } &:hover { @include typography.interacted-text-decoration; + @include colour.colour-background("background-tint"); - &::before { - border-left-color: colour.colour-var("font-dark"); - } - } - } - - &__details[open] &__summary { - &::before { - top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); - - border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem; - border-top-color: colour.colour-var("font-light"); - border-left-color: transparent; - } - - &:hover { &::before { border-top-color: colour.colour-var("font-dark"); } @@ -78,8 +57,7 @@ } &__content { - padding: spacing.space(1) spacing.space(1) spacing.space(1) - spacing.space(2.75); + padding: spacing.space(1); &:has(.tna-table-wrapper):has(.tna-table) { padding-right: 0; @@ -104,11 +82,27 @@ left: 0; .tna-table { - width: calc(100% - #{spacing.space(3.75)}); + width: calc(100% - #{spacing.space(2)}); margin-right: spacing.space(1); - margin-left: spacing.space(2.75); + margin-left: spacing.space(1); } } } } + + &__details[open] &__summary { + &::before { + top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); + + border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem; + border-color: transparent transparent colour.colour-var("font-light") + transparent; + } + + &:hover { + &::before { + border-bottom-color: colour.colour-var("font-dark"); + } + } + } } diff --git a/src/nationalarchives/components/accordion/accordion.stories.js b/src/nationalarchives/components/accordion/accordion.stories.js index 77d26079..786bf49f 100644 --- a/src/nationalarchives/components/accordion/accordion.stories.js +++ b/src/nationalarchives/components/accordion/accordion.stories.js @@ -1,6 +1,6 @@ import Accordion from "./template.njk"; import macroOptions from "./macro-options.json"; -// import { within, userEvent, expect } from "@storybook/test"; +import { fireEvent, expect } from "@storybook/test"; const argTypes = { items: { control: "object" }, @@ -95,3 +95,238 @@ Standard.args = { group: "group-1", classes: "tna-accordion--demo", }; + +export const NoGroup = Template.bind({}); +NoGroup.parameters = { + chromatic: { disableSnapshot: true }, +}; +NoGroup.args = { + items: [ + { + title: "Alpha", + text: "Content", + }, + { + title: "Beta", + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

", + }, + { + title: "Gamma", + body: ``, + }, + { + title: "Delta", + body: `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Records added and removed between 2020 and 2022. +
YearChinese zodiac signRecords addedSize (megabytes)
2020Rat123,456789
2021Ox456,789123
2022Tiger42,4241,337
Totals622,6692,249
+
`, + }, + ], + classes: "tna-accordion--demo", +}; + +export const Test = Template.bind({}); +Test.args = { + items: [ + { + title: "Alpha", + text: "Content", + }, + { + title: "Beta", + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

", + }, + { + title: "Gamma", + body: ``, + }, + { + title: "Delta", + body: `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Records added and removed between 2020 and 2022. +
YearChinese zodiac signRecords addedSize (megabytes)
2020Rat123,456789
2021Ox456,789123
2022Tiger42,4241,337
Totals622,6692,249
+
`, + }, + ], + group: "group-1", + classes: "tna-accordion--demo", +}; +Test.play = async ({ step }) => { + const $allDetails = Array.from( + document.querySelectorAll(".tna-accordion__details"), + ); + + await step("Initial load", async () => { + await $allDetails.forEach(async ($details) => { + await expect( + $details.querySelector(".tna-accordion__summary"), + ).toBeVisible(); + await expect( + $details.querySelector(".tna-accordion__content"), + ).not.toBeVisible(); + }); + }); + + await step("Open first item", async () => { + await fireEvent.click( + $allDetails[0].querySelector(".tna-accordion__summary"), + ); + console.log($allDetails[0].querySelector(".tna-accordion__summary")); + await $allDetails.forEach(async ($details, index) => { + if (index === 0) { + await expect( + $details.querySelector(".tna-accordion__content"), + ).toBeVisible(); + } else { + await expect( + $details.querySelector(".tna-accordion__content"), + ).not.toBeVisible(); + } + }); + }); + + await step("Close first item", async () => { + await fireEvent.click( + $allDetails[0].querySelector(".tna-accordion__summary"), + ); + await $allDetails.forEach(async ($details) => { + await expect( + $details.querySelector(".tna-accordion__content"), + ).not.toBeVisible(); + }); + }); + + await step("Open first item", async () => { + await fireEvent.click( + $allDetails[0].querySelector(".tna-accordion__summary"), + ); + await $allDetails.forEach(async ($details, index) => { + if (index === 0) { + await expect( + $details.querySelector(".tna-accordion__content"), + ).toBeVisible(); + } else { + await expect( + $details.querySelector(".tna-accordion__content"), + ).not.toBeVisible(); + } + }); + }); + + // TODO: fireEvent doesn't work on Firefox + // await step("Open second item", async () => { + // await fireEvent.click( + // $allDetails[1].querySelector(".tna-accordion__summary"), + // ); + // await $allDetails.forEach(async ($details, index) => { + // if (index === 1) { + // await expect( + // $details.querySelector(".tna-accordion__content"), + // ).toBeVisible(); + // } else { + // await expect( + // $details.querySelector(".tna-accordion__content"), + // ).not.toBeVisible(); + // } + // }); + // }); + + // await step("Close second item", async () => { + // await fireEvent.click( + // $allDetails[1].querySelector(".tna-accordion__summary"), + // ); + // await $allDetails.forEach(async ($details) => { + // await expect( + // $details.querySelector(".tna-accordion__content"), + // ).not.toBeVisible(); + // }); + // }); +}; diff --git a/src/nationalarchives/components/accordion/fixtures.json b/src/nationalarchives/components/accordion/fixtures.json index a11d694f..e4847a21 100644 --- a/src/nationalarchives/components/accordion/fixtures.json +++ b/src/nationalarchives/components/accordion/fixtures.json @@ -3,8 +3,72 @@ "fixtures": [ { "name": "minimal", - "options": {}, - "html": "
" + "options": { + "items": [ + { + "title": "Alpha", + "text": "Content" + }, + { + "title": "Beta", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + } + ] + }, + "html": "
Alpha

Content

Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + { + "name": "with group", + "options": { + "items": [ + { + "title": "Alpha", + "text": "Content" + }, + { + "title": "Beta", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + } + ], + "group": "group-1" + }, + "html": "
Alpha

Content

Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + { + "name": "with classes", + "options": { + "items": [ + { + "title": "Alpha", + "text": "Content" + }, + { + "title": "Beta", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + } + ], + "classes": "accordion__test-class" + }, + "html": "
Alpha

Content

Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + { + "name": "with attributes", + "options": { + "items": [ + { + "title": "Alpha", + "text": "Content" + }, + { + "title": "Beta", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + } + ], + "attributes": { + "data-testattribute": "foobar" + } + }, + "html": "
Alpha

Content

Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" } ] } diff --git a/src/nationalarchives/components/accordion/macro-options.json b/src/nationalarchives/components/accordion/macro-options.json index f922e201..8cba2669 100644 --- a/src/nationalarchives/components/accordion/macro-options.json +++ b/src/nationalarchives/components/accordion/macro-options.json @@ -2,9 +2,34 @@ { "name": "items", "type": "array", - "required": false, + "required": true, "description": "", - "items": [] + "items": [ + { + "name": "title", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "body", + "type": "string", + "required": false, + "description": "The HTML for the main body of the accordion item. Not displayed if `text` is set." + }, + { + "name": "text", + "type": "string", + "required": false, + "description": "The text for the accordion item which will be inserted into a `

` element. Overwrites `body` if it is set." + } + ] + }, + { + "name": "group", + "type": "string", + "required": false, + "description": "The name of the accordion group. If set, only one item in the named group can be opened at a time." }, { "name": "classes", diff --git a/src/nationalarchives/components/details/_index.scss b/src/nationalarchives/components/details/_index.scss new file mode 100644 index 00000000..f68be28e --- /dev/null +++ b/src/nationalarchives/components/details/_index.scss @@ -0,0 +1 @@ +@use "details"; diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss new file mode 100644 index 00000000..0d324276 --- /dev/null +++ b/src/nationalarchives/components/details/details.scss @@ -0,0 +1,111 @@ +@use "sass:math"; +@use "../../variables/borders"; +@use "../../tools/colour"; +@use "../../tools/spacing"; +@use "../../tools/typography"; + +.tna-details { + @include spacing.space-above; + + &__details { + } + + &__summary { + padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5) + spacing.space(2.75); + + position: relative; + z-index: 1; + + @include colour.colour-font("link"); + text-decoration: underline; + text-decoration-thickness: 1.5px; + + list-style: none; + + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + &::before { + content: ""; + + width: 0; + height: 0; + + position: absolute; + top: calc(50% - 0.5rem); + left: 1rem; + + border-width: 0.5rem 0 0.5rem #{math.div(math.sqrt(3), 2)}rem; + border-color: transparent transparent transparent + colour.colour-var("link"); + border-style: solid; + } + + &:hover { + @include typography.interacted-text-decoration; + } + } + + &__content { + padding: 0 0 0 spacing.space(2.75); + + &:has(.tna-table-wrapper):has(.tna-table) { + padding-right: 0; + padding-left: 0; + + .tna-table { + &__caption { + padding-top: 0; + padding-bottom: spacing.space(1); + + font-size: inherit; + line-height: inherit; + text-align: left; + caption-side: top; + } + } + + .tna-table-wrapper { + padding-right: 0; + padding-left: 0; + + left: 0; + + .tna-table { + width: calc(100% - #{spacing.space(3.75)}); + margin-right: spacing.space(1); + margin-left: spacing.space(2.75); + } + } + } + } + + &__details[open] &__summary { + &::before { + top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); + + border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem; + border-color: colour.colour-var("link") transparent transparent + transparent; + } + } + + &__details[open] &__content { + position: relative; + + &::before { + content: ""; + + display: block; + + position: absolute; + inset: 0 auto 0 calc(1.5rem - #{math.div(borders.$thick-border-width, 2)}); + + @include colour.thick-keyline(left); + } + } +} diff --git a/src/nationalarchives/components/details/details.stories.js b/src/nationalarchives/components/details/details.stories.js new file mode 100644 index 00000000..52fcaf6f --- /dev/null +++ b/src/nationalarchives/components/details/details.stories.js @@ -0,0 +1,33 @@ +import Details from "./template.njk"; +import macroOptions from "./macro-options.json"; + +const argTypes = { + title: { control: "text" }, + body: { control: "text" }, + text: { control: "text" }, + classes: { control: "text" }, + attributes: { control: "object" }, +}; + +Object.keys(argTypes).forEach((argType) => { + argTypes[argType].description = macroOptions.find( + (option) => option.name === argType, + )?.description; +}); + +export default { + title: "Components/Details", + argTypes, +}; + +const Template = ({ title, body, text, classes, attributes }) => + Details({ + params: { title, body, text, classes, attributes }, + }); + +export const Standard = Template.bind({}); +Standard.args = { + title: "Details", + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

", + classes: "tna-details--demo", +}; diff --git a/src/nationalarchives/components/details/fixtures.json b/src/nationalarchives/components/details/fixtures.json new file mode 100644 index 00000000..6241ef7f --- /dev/null +++ b/src/nationalarchives/components/details/fixtures.json @@ -0,0 +1,33 @@ +{ + "component": "details", + "fixtures": [ + { + "name": "minimal", + "options": { + "title": "Alpha", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + "html": "
Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + { + "name": "with classes", + "options": { + "title": "Alpha", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

", + "classes": "details__test-class" + }, + "html": "
Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + }, + { + "name": "with attributes", + "options": { + "title": "Alpha", + "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

", + "attributes": { + "data-testattribute": "foobar" + } + }, + "html": "
Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.

Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.

Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.

" + } + ] +} diff --git a/src/nationalarchives/components/details/macro-options.json b/src/nationalarchives/components/details/macro-options.json new file mode 100644 index 00000000..1a45c105 --- /dev/null +++ b/src/nationalarchives/components/details/macro-options.json @@ -0,0 +1,32 @@ +[ + { + "name": "title", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "body", + "type": "string", + "required": false, + "description": "The HTML for the main body of the details. Not displayed if `text` is set." + }, + { + "name": "text", + "type": "string", + "required": false, + "description": "The text for the details which will be inserted into a `

` element. Overwrites `body` if it is set." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the details." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the details." + } +] diff --git a/src/nationalarchives/components/details/macro.njk b/src/nationalarchives/components/details/macro.njk new file mode 100644 index 00000000..98fb9256 --- /dev/null +++ b/src/nationalarchives/components/details/macro.njk @@ -0,0 +1,3 @@ +{% macro tnaDetails(params) %} + {%- include "nationalarchives/components/details/template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/nationalarchives/components/details/template.njk b/src/nationalarchives/components/details/template.njk new file mode 100644 index 00000000..67a9e5fe --- /dev/null +++ b/src/nationalarchives/components/details/template.njk @@ -0,0 +1,14 @@ +{%- set containerClasses = [params.classes] if params.classes else [] -%} +{%- set classes = containerClasses | join(' ') -%} +

+
+ {{ params.title }} +
+ {%- if params.text %} +

{{ params.text }}

+ {%- else %} + {{ params.body | safe }} + {%- endif %} +
+
+
\ No newline at end of file diff --git a/src/nationalarchives/components/search-filters/search-filters.scss b/src/nationalarchives/components/search-filters/search-filters.scss index 193b7e5b..43be5290 100644 --- a/src/nationalarchives/components/search-filters/search-filters.scss +++ b/src/nationalarchives/components/search-filters/search-filters.scss @@ -69,16 +69,12 @@ position: absolute; top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); - right: spacing.space(0.5); + right: spacing.space(0.75); - border-bottom-width: 0; - border-right: 0.5rem transparent solid; - border-left: 0.5rem transparent solid; - - @include colour.colour-border( - "font-base", - #{math.div(math.sqrt(3), 2)}rem - ); + border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem; + border-color: colour.colour-var("font-light") transparent transparent + transparent; + border-style: solid; } &:hover, @@ -86,12 +82,25 @@ @include typography.interacted-text-decoration; background: none; + + &::before { + border-top-color: colour.colour-var("font-dark"); + } } &[aria-expanded="true"] { &::before { - border-top-width: 0; - border-bottom-width: #{math.div(math.sqrt(3), 2)}rem; + top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); + + border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem; + border-color: transparent transparent colour.colour-var("font-light") + transparent; + } + + &:hover { + &::before { + border-bottom-color: colour.colour-var("font-dark"); + } } } } diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss index b927bdd7..ed3aad03 100644 --- a/src/nationalarchives/utilities/_a11y.scss +++ b/src/nationalarchives/utilities/_a11y.scss @@ -32,12 +32,26 @@ @include a11y.focus-outline; } +// *:focus-visible { +// z-index: 9; + +// @include a11y.focus-outline; +// } + +// @supports not selector(:focus-visible) { +// *:focus { +// z-index: 9; + +// @include a11y.focus-outline; +// } +// } + *:active { @include a11y.active-outline; } .tna-\!--no-focus-style, -*[tabindex="-1"]:focus { +*[tabindex="-1"] { &:focus { outline: none; } diff --git a/tasks/test-package.js b/tasks/test-package.js index b7979ffa..25b31bf9 100644 --- a/tasks/test-package.js +++ b/tasks/test-package.js @@ -83,6 +83,7 @@ const checkExists = [ ...componentFiles("cookie-banner", "CookieBanner"), ...componentFiles("date-input"), ...componentFiles("date-search"), + ...componentFiles("details"), ...componentFiles("error-summary", "ErrorSummary"), ...componentFiles("featured-records"), ...componentFiles("footer", "Footer"),