Add headings to files list

nationalarchives · Jul 16, 2024 · b3532f0 · b3532f0
1 parent 160edb0
commit b3532f0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 17 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.0...HEAD)
 
 ### Added
+
+- Added `itemHeadingLevel` to file list component and changed file titles to headings
+
 ### Changed
 
 - Tables are no longer automatically 100% width but can be made to be with `.tna-table--full`

diff --git a/src/nationalarchives/components/files-list/files-list.scss b/src/nationalarchives/components/files-list/files-list.scss
@@ -36,18 +36,12 @@
   }
 
   &__item {
-    // width: 100%;
-
-    // @include media.on-large {
-    //   width: calc(50% - spacing.space(1.5));
-    // }
   }
 
   &__link {
   }
 
   &__item-title {
-    @include typography.main-font-weight-bold;
   }
 
   &__item-meta {

diff --git a/src/nationalarchives/components/files-list/files-list.stories.js b/src/nationalarchives/components/files-list/files-list.stories.js
@@ -2,6 +2,7 @@ import Files from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
+  itemHeadingLevel: { control: { type: "number", min: 1, max: 6 } },
   items: { control: "object" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -18,13 +19,9 @@ export default {
   argTypes,
 };
 
-const Template = ({ items, classes, attributes }) =>
+const Template = ({ itemHeadingLevel, items, classes, attributes }) =>
   Files({
-    params: {
-      items,
-      classes,
-      attributes,
-    },
+    params: { itemHeadingLevel, items, classes, attributes },
   });
 
 export const Default = Template.bind({});

diff --git a/src/nationalarchives/components/files-list/fixtures.json b/src/nationalarchives/components/files-list/fixtures.json
@@ -4,6 +4,7 @@
     {
       "name": "default",
       "options": {
+        "itemHeadingLevel": 3,
         "items": [
           {
             "text": "Preservation policy part 1",
@@ -29,11 +30,12 @@
           }
         ]
       },
-      "html": "<div class=\"tna-files-list\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\"><p class=\"tna-files-list__item-title\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></p><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></li><li class=\"tna-files-list__item\"><p class=\"tna-files-list__item-title\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 2</a></p><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></li><li class=\"tna-files-list__item\"><p class=\"tna-files-list__item-title\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 3</a></p><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></li></ul></div>"
+      "html": "<div class=\"tna-files-list\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\">Preservation policy part 1</a></h3><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></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 2</a></h3><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></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 3</a></h3><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></li></ul></div>"
     },
     {
       "name": "with classes",
       "options": {
+        "itemHeadingLevel": 3,
         "items": [
           {
             "text": "Preservation policy part 1",
@@ -46,11 +48,12 @@
         ],
         "classes": "files__test-class"
       },
-      "html": "<div class=\"tna-files-list files__test-class\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\"><p class=\"tna-files-list__item-title\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></p><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></li></ul></div>"
+      "html": "<div class=\"tna-files-list files__test-class\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\">Preservation policy part 1</a></h3><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></li></ul></div>"
     },
     {
       "name": "with attributes",
       "options": {
+        "itemHeadingLevel": 3,
         "items": [
           {
             "text": "Preservation policy part 1",
@@ -65,7 +68,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-files-list\" data-testattribute=\"foobar\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\"><p class=\"tna-files-list__item-title\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></p><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></li></ul></div>"
+      "html": "<div class=\"tna-files-list\" data-testattribute=\"foobar\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\"><!--!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\">Preservation policy part 1</a></h3><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></li></ul></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/files-list/macro-options.json b/src/nationalarchives/components/files-list/macro-options.json
@@ -1,4 +1,10 @@
 [
+  {
+    "name": "itemHeadingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>` for each of the file item titles."
+  },
   {
     "name": "items",
     "type": "array",

diff --git a/src/nationalarchives/components/files-list/template.njk b/src/nationalarchives/components/files-list/template.njk
@@ -5,9 +5,9 @@
   <ul class="tna-files-list__items">
     {%- for item in params.items %}
     <li class="tna-files-list__item">
-      <p class="tna-files-list__item-title">
+      <h{{ params.itemHeadingLevel }} class="tna-files-list__item-title tna-heading-s">
         <a href="{{ item.href }}" class="tna-files-list__link">{{ item.text }}</a>
-      </p>
+      </h{{ params.itemHeadingLevel }}>
       <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
         <dt>File type</dt>
         <dd>