From e237a69ae2d56098018553d2f9355d6b31c64932 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 22 May 2024 09:40:32 +0100 Subject: [PATCH] CSS tweaks to accordion and details components (#122) --- .../components/accordion/accordion.scss | 6 +- .../components/accordion/accordion.stories.js | 75 +++++++++++++++++++ .../components/details/details.scss | 2 +- 3 files changed, 78 insertions(+), 5 deletions(-) diff --git a/src/nationalarchives/components/accordion/accordion.scss b/src/nationalarchives/components/accordion/accordion.scss index 25c84349..87d04f7f 100644 --- a/src/nationalarchives/components/accordion/accordion.scss +++ b/src/nationalarchives/components/accordion/accordion.scss @@ -22,7 +22,7 @@ } &__summary { - padding: spacing.space(0.5) spacing.space(2.5) spacing.space(0.5) + padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5) spacing.space(1); position: relative; @@ -45,7 +45,7 @@ height: 0; position: absolute; - top: calc(50% - 0.5rem); + top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); right: 0.75rem; border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem; @@ -99,8 +99,6 @@ &__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; } } diff --git a/src/nationalarchives/components/accordion/accordion.stories.js b/src/nationalarchives/components/accordion/accordion.stories.js index c20ebe2e..3fdc8f02 100644 --- a/src/nationalarchives/components/accordion/accordion.stories.js +++ b/src/nationalarchives/components/accordion/accordion.stories.js @@ -96,6 +96,81 @@ Standard.args = { classes: "tna-accordion--demo", }; +export const OpenItems = Template.bind({}); +OpenItems.parameters = { + chromatic: { disableSnapshot: true }, +}; +OpenItems.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: ``, + open: true, + }, + { + 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-2", + classes: "tna-accordion--demo", +}; + export const NoGroup = Template.bind({}); NoGroup.parameters = { chromatic: { disableSnapshot: true }, diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss index 49e8a718..3054e5b8 100644 --- a/src/nationalarchives/components/details/details.scss +++ b/src/nationalarchives/components/details/details.scss @@ -39,7 +39,7 @@ position: absolute; top: calc(50% - 0.5rem); - left: 1rem; + left: 0.75rem; border-width: 0.5rem 0 0.5rem #{math.div(math.sqrt(3), 2)}rem; border-color: transparent transparent transparent