diff --git a/CHANGELOG.md b/CHANGELOG.md index ac305620..729d2d96 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.2.13...HEAD) ### Added + +- Items in a files list can be made entirely clickable using the `fullAreaClick` property + ### Changed - Updated the default `aria-label` on breadcrumbs components from "Breadcrumb" to "Breadcrumbs" diff --git a/src/nationalarchives/components/files-list/files-list.scss b/src/nationalarchives/components/files-list/files-list.scss index 326fe16a..f9f399de 100644 --- a/src/nationalarchives/components/files-list/files-list.scss +++ b/src/nationalarchives/components/files-list/files-list.scss @@ -1,3 +1,4 @@ +@use "../../tools/a11y"; @use "../../tools/colour"; @use "../../tools/media"; @use "../../tools/spacing"; @@ -22,12 +23,11 @@ &__items { margin: 0; - padding: 0 0 0 spacing.space(1); + padding: 0; display: flex; flex-direction: column; - // flex-wrap: wrap; - gap: spacing.space(1.5) spacing.space(4); + gap: spacing.space(1); flex: 1; list-style: none; @@ -37,11 +37,53 @@ } &__item { + padding: 0 0 0 spacing.space(1); + + position: relative; } &__link { } + &--full-click { + border-radius: 0.1px; + } + + &--full-click &__link { + &::before { + content: ""; + + position: absolute; + inset: 0; + z-index: 3; + + border-radius: 0.1px; + } + + &:hover, + &:focus-visible, + &:active { + &::before { + @include colour.thick-keyline(left); + } + } + + &:focus-visible, + &:active { + outline: none; + + &::before { + @include a11y.focus-outline; + } + } + + &:active { + &::before { + @include a11y.active-outline; + } + } + } + &__item-title { } @@ -67,12 +109,19 @@ } &__items { - padding-top: spacing.space(1); + border-left-width: 0; + } + + &__item { padding-left: 0; + } - border-left: none; + &--full-click &__items { + border-left-width: 1px; + } - border-top-width: 1px; + &--full-click &__item { + padding-left: spacing.space(1); } } } diff --git a/src/nationalarchives/components/files-list/files-list.stories.js b/src/nationalarchives/components/files-list/files-list.stories.js index e4eb2640..1e7fe74a 100644 --- a/src/nationalarchives/components/files-list/files-list.stories.js +++ b/src/nationalarchives/components/files-list/files-list.stories.js @@ -4,6 +4,7 @@ import macroOptions from "./macro-options.json"; const argTypes = { itemHeadingLevel: { control: { type: "number", min: 1, max: 6 } }, items: { control: "object" }, + fullAreaClick: { control: "boolean" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -19,13 +20,20 @@ export default { argTypes, }; -const Template = ({ itemHeadingLevel, items, classes, attributes }) => +const Template = ({ + itemHeadingLevel, + items, + fullAreaClick, + classes, + attributes, +}) => Files({ - params: { itemHeadingLevel, items, classes, attributes }, + params: { itemHeadingLevel, items, fullAreaClick, classes, attributes }, }); export const Default = Template.bind({}); Default.args = { + itemHeadingLevel: 3, items: [ { id: "file-1", diff --git a/src/nationalarchives/components/files-list/fixtures.json b/src/nationalarchives/components/files-list/fixtures.json index 81382634..be338592 100644 --- a/src/nationalarchives/components/files-list/fixtures.json +++ b/src/nationalarchives/components/files-list/fixtures.json @@ -35,6 +35,25 @@ }, "html": "
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.