Add fullAreaClick property to files list component

nationalarchives · Sep 16, 2024 · 73dc900 · 73dc900
1 parent 27ddcae
commit 73dc900
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -35,6 +35,25 @@
       },
       "html": "<div class=\"tna-files-list\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\" width=\"24\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\"/></svg><ul class=\"tna-files-list__items\"><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\" aria-describedby=\"file-1\">Preservation policy part 1</a></h3><div class=\"tna-files-list__item-body\" id=\"file-1\"><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></div></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\" aria-describedby=\"file-2\">Preservation policy part 2</a></h3><div class=\"tna-files-list__item-body\" id=\"file-2\"><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></div></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\" aria-describedby=\"file-3\">Preservation policy part 3</a></h3><div class=\"tna-files-list__item-body\" id=\"file-3\"><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl></div></li></ul></div>"
     },
+    {
+      "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": "<div class=\"tna-files-list tna-files-list--full-click\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\" width=\"24\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\"/></svg><ul class=\"tna-files-list__items\"><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\" aria-describedby=\"file-1\">Preservation policy part 1</a></h3><div class=\"tna-files-list__item-body\" id=\"file-1\"><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></div></li></ul></div>"
+    },
     {
       "name": "with classes",
       "options": {

diff --git 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
@@ -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(' ') -%}
 <div class="tna-files-list{% if classes %} {{ classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="tna-files-list__icon" width="24"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>