From 73dc900ebb3b4a7e16c78fab0ddd134402d1aa1d Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Mon, 16 Sep 2024 14:29:12 +0100 Subject: [PATCH] Add fullAreaClick property to files list component --- CHANGELOG.md | 3 + .../components/files-list/files-list.scss | 61 +++++++++++++++++-- .../files-list/files-list.stories.js | 12 +++- .../components/files-list/fixtures.json | 19 ++++++ .../components/files-list/macro-options.json | 6 ++ .../components/files-list/template.njk | 3 + 6 files changed, 96 insertions(+), 8 deletions(-) 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": "
" }, + { + "name": "fully clickable", + "options": { + "itemHeadingLevel": 3, + "items": [ + { + "id": "file-1", + "text": "Preservation policy part 1", + "href": "#", + "file_type": "PDF", + "file_size": "1.7MB", + "file_extent": "120 pages", + "description": "The principles according to which The National Archives will preserve and care for our archival collections." + } + ], + "fullAreaClick": true + }, + "html": "
" + }, { "name": "with classes", "options": { diff --git a/src/nationalarchives/components/files-list/macro-options.json b/src/nationalarchives/components/files-list/macro-options.json index 76da087a..25eeb6bd 100644 --- a/src/nationalarchives/components/files-list/macro-options.json +++ b/src/nationalarchives/components/files-list/macro-options.json @@ -55,6 +55,12 @@ } ] }, + { + "name": "fullAreaClick", + "type": "boolean", + "required": false, + "description": "If true, allow users to click anywhere on one of the files to follow the link." + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/files-list/template.njk b/src/nationalarchives/components/files-list/template.njk index 4fbddb3a..29a1d3db 100644 --- a/src/nationalarchives/components/files-list/template.njk +++ b/src/nationalarchives/components/files-list/template.njk @@ -1,4 +1,7 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%} +{%- if params.fullAreaClick -%} + {%- set containerClasses = containerClasses.concat('tna-files-list--full-click') -%} +{%- endif -%} {%- set classes = containerClasses | join(' ') -%}