Add details component

.github/actions/prototype-kit-test/action.yml

@@ -44,6 +44,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/details/macro.njk\" import tnaDetails %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -80,6 +81,7 @@ runs:
         echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaDetails({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- New accordion component added
+- New accordion and details components added
 
 ### Changed
 ### Deprecated

src/nationalarchives/components/_index.scss

@@ -7,6 +7,7 @@
 @use "cookie-banner";
 @use "date-input";
 @use "date-search";
+@use "details";
 @use "error-summary";
 @use "featured-records";
 @use "footer";

src/nationalarchives/components/accordion/accordion.mjs

@@ -1,9 +1,35 @@
 export class Accordion {
+  polyfillRequired = null;
+
   constructor($module) {
     this.$module = $module;
-    if (!this.$module) {
+    this.$firstDetailsElement =
+      $module && $module.querySelector(".tna-accordion__details[name]");
+    this.$detailsElements =
+      $module &&
+      this.$firstDetailsElement &&
+      document.querySelectorAll(
+        `.tna-accordion__details[name="${this.$firstDetailsElement.getAttribute("name")}"]`,
+      );
+    if (!this.$module || !this.$detailsElements) {
       return;
     }
-    // TODO: Polyfill details[name] for Firefox
+
+    Array.from(this.$detailsElements).forEach(($detailsElement) => {
+      $detailsElement.addEventListener("toggle", (e) => {
+        const $thisDetailsElement = e.target;
+        if ($thisDetailsElement.hasAttribute("open")) {
+          Array.from(this.$detailsElements)
+            .filter(
+              ($eachDetailsElement) =>
+                $eachDetailsElement !== $thisDetailsElement &&
+                $eachDetailsElement.hasAttribute("open"),
+            )
+            .forEach(($eachDetailsElement) =>
+              $eachDetailsElement.removeAttribute("open"),
+            );
+        }
+      });
+    });
   }
 }

src/nationalarchives/components/accordion/accordion.scss

@@ -5,24 +5,18 @@
 
 .tna-accordion {
   @include spacing.space-above;
-  margin-top: spacing.space(1);
 
-  // @include colour.colour-border("keyline", 1px, solid, top);
-  // @include colour.colour-border("keyline", 1px, solid, bottom);
+  @include colour.colour-border("keyline", 1px, solid, top);
   // @include colour.thick-keyline-dark(top);
   // @include colour.thick-keyline-accent(top);
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &__details {
-    // @include colour.colour-border("keyline", 1px, solid, bottom);
+    @include colour.colour-border("keyline", 1px, solid, bottom);
   }
 
   &__summary {
-    padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
-      spacing.space(2.75);
+    padding: spacing.space(0.5) spacing.space(2.5) spacing.space(0.5)
+      spacing.space(1);
 
     position: relative;
     z-index: 1;
@@ -44,42 +38,26 @@
 
       position: absolute;
       top: calc(50% - 0.5rem);
-      left: 1rem;
+      right: 0.75rem;
 
-      border-width: 0.5rem 0 0.5rem #{math.div(math.sqrt(3), 2)}rem;
-      border-color: transparent transparent transparent
-        colour.colour-var("font-light");
+      border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
+      border-color: colour.colour-var("font-light") transparent transparent
+        transparent;
       border-style: solid;
     }
 
     &:hover {
       @include typography.interacted-text-decoration;
+      @include colour.colour-background("background-tint");
 
-      &::before {
-        border-left-color: colour.colour-var("font-dark");
-      }
-    }
-  }
-
-  &__details[open] &__summary {
-    &::before {
-      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
-
-      border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
-      border-top-color: colour.colour-var("font-light");
-      border-left-color: transparent;
-    }
-
-    &:hover {
       &::before {
         border-top-color: colour.colour-var("font-dark");
       }
     }
   }
 
   &__content {
-    padding: spacing.space(1) spacing.space(1) spacing.space(1)
-      spacing.space(2.75);
+    padding: spacing.space(1);
 
     &:has(.tna-table-wrapper):has(.tna-table) {
       padding-right: 0;
@@ -104,11 +82,27 @@
         left: 0;
 
         .tna-table {
-          width: calc(100% - #{spacing.space(3.75)});
+          width: calc(100% - #{spacing.space(2)});
           margin-right: spacing.space(1);
-          margin-left: spacing.space(2.75);
+          margin-left: spacing.space(1);
         }
       }
     }
   }
+
+  &__details[open] &__summary {
+    &::before {
+      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
+
+      border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
+      border-color: transparent transparent colour.colour-var("font-light")
+        transparent;
+    }
+
+    &:hover {
+      &::before {
+        border-bottom-color: colour.colour-var("font-dark");
+      }
+    }
+  }
 }