From a7b471fc35612db4f19b10df6eb0bfca629c2a07 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Wed, 6 Dec 2023 17:02:48 +0000
Subject: [PATCH] <dl> element improvements

---
 CHANGELOG.md                                  |  4 +
 .../stories/utilities/lists/lists.stories.js  | 19 ++---
 src/nationalarchives/utilities/_lists.scss    | 81 ++++++++++++-------
 3 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0943d3f6..10b3bb78 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.1.29-prerelease...HEAD)
 
 ### Added
+
+- `<dl>` elements can now be stacked with `<dl class="tna-dl tna-dl--stacked">`
+
 ### Changed
 
 - Cookies class parameter `extraPolicies` moved to key inside the options object parameter
@@ -17,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Chip colours and icons in chip lists fixed
+- Better support for `<dl class="tna-dl">` elements
 
 ### Security
 
diff --git a/src/nationalarchives/stories/utilities/lists/lists.stories.js b/src/nationalarchives/stories/utilities/lists/lists.stories.js
index 43b6426c..8686e7ba 100644
--- a/src/nationalarchives/stories/utilities/lists/lists.stories.js
+++ b/src/nationalarchives/stories/utilities/lists/lists.stories.js
@@ -1,6 +1,7 @@
 const argTypes = {
   items: { control: "object" },
   plain: { control: "boolean" },
+  classes: { control: "text" },
 };
 
 export default {
@@ -8,8 +9,8 @@ export default {
   argTypes,
 };
 
-const UnorderedListTemplate = ({ items, plain }) =>
-  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
+const UnorderedListTemplate = ({ items, plain, classes }) =>
+  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ul>`;
@@ -23,8 +24,8 @@ UnorderedListPlain.args = {
   plain: true,
 };
 
-const OrderedListTemplate = ({ items, plain }) =>
-  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
+const OrderedListTemplate = ({ items, plain, classes }) =>
+  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ol>`;
@@ -38,10 +39,10 @@ OrderedListPlain.args = {
   plain: true,
 };
 
-const DescriptionListTemplate = ({ items, plain }) =>
+const DescriptionListTemplate = ({ items, plain, classes }) =>
   `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
     items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
-  }">${items.reduce(
+  } ${classes}">${items.reduce(
     (list, item) => `${list}
     <dt>
       ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
@@ -130,10 +131,10 @@ ComplexDescriptionList.args = {
   ],
 };
 
-const ChipListTemplate = ({ items }) =>
-  `<ul class="tna-chip-list">${items.reduce(
+const ChipListTemplate = ({ items, plain, classes }) =>
+  `<ul class="tna-chip-list ${classes}">${items.reduce(
     (list, item) => `${list}<li class="tna-chip-list__item">
-      <span class="tna-chip">
+      <span class="tna-chip${plain ? " tna-chip--plain" : ""}">
         ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
         ${item.text}
       </span>
diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss
index 542569a5..efff54c6 100644
--- a/src/nationalarchives/utilities/_lists.scss
+++ b/src/nationalarchives/utilities/_lists.scss
@@ -29,6 +29,46 @@
   }
 }
 
+@mixin stacked-dl {
+  dt,
+  dd {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  dd {
+    padding-left: 1rem;
+  }
+
+  &.tna-dl--plain {
+    dt {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .fa-solid {
+        margin-top: 0;
+      }
+    }
+
+    dd {
+      margin-left: 0;
+      padding-top: 0;
+    }
+  }
+
+  &:not(.tna-dl--plain) {
+    dt {
+      @include colour.colour-background("background-tint");
+    }
+
+    dd {
+      background: transparent !important;
+
+      margin-left: 0;
+    }
+  }
+}
+
 .tna-dl {
   margin: 1rem 0 0;
 
@@ -53,11 +93,16 @@
 
   &--plain {
     dt {
+      padding-top: 0;
+      // padding-bottom: 0;
       padding-left: 0;
     }
 
     dd {
+      // margin-bottom: 0.5rem;
+      padding-top: 0;
       padding-right: 0;
+      // padding-bottom: 0;
     }
   }
 
@@ -101,6 +146,8 @@
       padding-left: 2rem !important;
 
       .fa-solid {
+        margin-top: -0.25rem;
+
         left: 0;
       }
     }
@@ -132,36 +179,12 @@
     }
   }
 
-  @include media.on-tiny {
-    dt,
-    dd {
-      width: 100%;
-      margin-left: 0;
-    }
-
-    dd {
-      padding-left: 1rem;
-    }
-
-    &--plain {
-      dt {
-        padding-bottom: 0;
-      }
-
-      dd {
-        padding-top: 0;
-      }
-    }
-
-    &:not(&--plain) {
-      dt {
-        @include colour.colour-background("background-tint");
-      }
+  &--stacked {
+    @include stacked-dl;
+  }
 
-      dd {
-        background: transparent !important;
-      }
-    }
+  @include media.on-tiny {
+    @include stacked-dl;
   }
 
   @include colour.on-high-contrast-and-forced-colours {