@nationalarchives/frontend 0.1.54 → 0.1.56

package/nationalarchives/components/accordion/accordion.scss

@@ -0,0 +1,105 @@
+@use "sass:math";
+@use "../../tools/colour";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+
+.tna-accordion {
+  @include spacing.space-above;
+
+  @include colour.colour-border("keyline", 1px, solid, top);
+  // @include colour.thick-keyline-dark(top);
+  // @include colour.thick-keyline-accent(top);
+
+  &__details {
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+
+    position: relative;
+    z-index: 1;
+  }
+
+  &__details:has(&__summary:focus) {
+    z-index: 2;
+  }
+
+  &__summary {
+    padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)
+      spacing.space(1);
+
+    position: relative;
+
+    @include typography.main-font-weight-bold;
+    list-style: none;
+
+    border-radius: 0.1px;
+
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::before {
+      content: "";
+
+      width: 0;
+      height: 0;
+
+      position: absolute;
+      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
+      right: 0.75rem;
+
+      border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
+      border-color: colour.colour-var("font-light") transparent;
+      border-style: solid;
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+      @include colour.colour-background("background-tint");
+
+      &::before {
+        border-color: colour.colour-var("font-dark") transparent;
+      }
+    }
+  }
+
+  &__content {
+    padding: spacing.space(1);
+
+    &:has(.tna-table-wrapper):has(.tna-table) {
+      padding-right: 0;
+      padding-left: 0;
+
+      .tna-table {
+        &__caption {
+          padding-top: 0;
+          padding-bottom: spacing.space(1);
+
+          font-size: inherit;
+          line-height: inherit;
+          text-align: left;
+          caption-side: top;
+        }
+      }
+
+      .tna-table-wrapper {
+        padding-right: 0;
+        padding-left: 0;
+
+        left: 0;
+
+        .tna-table {
+          width: calc(100% - #{spacing.space(2)});
+          margin-right: spacing.space(1);
+          margin-left: spacing.space(1);
+        }
+      }
+    }
+  }
+
+  &__details[open] &__summary {
+    &::before {
+      border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
+    }
+  }
+}

package/nationalarchives/components/accordion/accordion.stories.js

@@ -0,0 +1,410 @@
+import Accordion from "./template.njk";
+import macroOptions from "./macro-options.json";
+import { fireEvent, expect } from "@storybook/test";
+
+const argTypes = {
+  items: { control: "object" },
+  group: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Accordion",
+  argTypes,
+};
+
+const Template = ({ items, group, classes, attributes }) =>
+  Accordion({
+    params: { items, group, classes, attributes },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      title: "Alpha",
+      text: "Content",
+    },
+    {
+      title: "Beta",
+      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
+    },
+    {
+      title: "Gamma",
+      body: `<ul class="tna-ul">
+  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
+  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
+  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
+</ul>`,
+    },
+    {
+      title: "Delta",
+      body: `<div class="tna-table-wrapper">
+  <table class="tna-table">
+    <caption class="tna-table__caption">
+      Records added and removed between 2020 and 2022.
+    </caption>
+    <thead class="tna-table__head">
+      <tr class="tna-table__row">
+        <th class="tna-table__header" scope="col">Year</th>
+        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+      </tr>
+    </thead>
+    <tbody class="tna-table__body">
+      <tr>
+        <th class="tna-table__header" scope="row">2020</th>
+        <td class="tna-table__cell">Rat</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+        <td class="tna-table__cell tna-table__cell--numeric">789</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2021</th>
+        <td class="tna-table__cell">Ox</td>
+        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2022</th>
+        <td class="tna-table__cell">Tiger</td>
+        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+      </tr>
+    </tbody>
+    <tfoot class="tna-table__foot">
+      <tr>
+        <th class="tna-table__header" scope="row">Totals</th>
+        <td class="tna-table__cell"></td>
+        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>`,
+    },
+  ],
+  group: "group-1",
+  classes: "tna-accordion--demo",
+};
+
+export const OpenItems = Template.bind({});
+OpenItems.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OpenItems.args = {
+  items: [
+    {
+      title: "Alpha",
+      text: "Content",
+    },
+    {
+      title: "Beta",
+      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
+    },
+    {
+      title: "Gamma",
+      body: `<ul class="tna-ul">
+  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
+  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
+  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
+</ul>`,
+      open: true,
+    },
+    {
+      title: "Delta",
+      body: `<div class="tna-table-wrapper">
+  <table class="tna-table">
+    <caption class="tna-table__caption">
+      Records added and removed between 2020 and 2022.
+    </caption>
+    <thead class="tna-table__head">
+      <tr class="tna-table__row">
+        <th class="tna-table__header" scope="col">Year</th>
+        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+      </tr>
+    </thead>
+    <tbody class="tna-table__body">
+      <tr>
+        <th class="tna-table__header" scope="row">2020</th>
+        <td class="tna-table__cell">Rat</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+        <td class="tna-table__cell tna-table__cell--numeric">789</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2021</th>
+        <td class="tna-table__cell">Ox</td>
+        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2022</th>
+        <td class="tna-table__cell">Tiger</td>
+        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+      </tr>
+    </tbody>
+    <tfoot class="tna-table__foot">
+      <tr>
+        <th class="tna-table__header" scope="row">Totals</th>
+        <td class="tna-table__cell"></td>
+        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>`,
+    },
+  ],
+  group: "group-2",
+  classes: "tna-accordion--demo",
+};
+
+export const NoGroup = Template.bind({});
+NoGroup.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+NoGroup.args = {
+  items: [
+    {
+      title: "Alpha",
+      text: "Content",
+    },
+    {
+      title: "Beta",
+      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
+    },
+    {
+      title: "Gamma",
+      body: `<ul class="tna-ul">
+  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
+  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
+  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
+</ul>`,
+    },
+    {
+      title: "Delta",
+      body: `<div class="tna-table-wrapper">
+  <table class="tna-table">
+    <caption class="tna-table__caption">
+      Records added and removed between 2020 and 2022.
+    </caption>
+    <thead class="tna-table__head">
+      <tr class="tna-table__row">
+        <th class="tna-table__header" scope="col">Year</th>
+        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+      </tr>
+    </thead>
+    <tbody class="tna-table__body">
+      <tr>
+        <th class="tna-table__header" scope="row">2020</th>
+        <td class="tna-table__cell">Rat</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+        <td class="tna-table__cell tna-table__cell--numeric">789</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2021</th>
+        <td class="tna-table__cell">Ox</td>
+        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2022</th>
+        <td class="tna-table__cell">Tiger</td>
+        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+      </tr>
+    </tbody>
+    <tfoot class="tna-table__foot">
+      <tr>
+        <th class="tna-table__header" scope="row">Totals</th>
+        <td class="tna-table__cell"></td>
+        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>`,
+    },
+  ],
+  classes: "tna-accordion--demo",
+};
+
+export const Test = Template.bind({});
+Test.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Test.args = {
+  items: [
+    {
+      title: "Alpha",
+      text: "Content",
+    },
+    {
+      title: "Beta",
+      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
+    },
+    {
+      title: "Gamma",
+      body: `<ul class="tna-ul">
+  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
+  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
+  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
+</ul>`,
+    },
+    {
+      title: "Delta",
+      body: `<div class="tna-table-wrapper">
+  <table class="tna-table">
+    <caption class="tna-table__caption">
+      Records added and removed between 2020 and 2022.
+    </caption>
+    <thead class="tna-table__head">
+      <tr class="tna-table__row">
+        <th class="tna-table__header" scope="col">Year</th>
+        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+      </tr>
+    </thead>
+    <tbody class="tna-table__body">
+      <tr>
+        <th class="tna-table__header" scope="row">2020</th>
+        <td class="tna-table__cell">Rat</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+        <td class="tna-table__cell tna-table__cell--numeric">789</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2021</th>
+        <td class="tna-table__cell">Ox</td>
+        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2022</th>
+        <td class="tna-table__cell">Tiger</td>
+        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+      </tr>
+    </tbody>
+    <tfoot class="tna-table__foot">
+      <tr>
+        <th class="tna-table__header" scope="row">Totals</th>
+        <td class="tna-table__cell"></td>
+        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>`,
+    },
+  ],
+  group: "group-1",
+  classes: "tna-accordion--demo",
+};
+Test.play = async ({ step }) => {
+  const $allDetails = Array.from(
+    document.querySelectorAll(".tna-accordion__details"),
+  );
+
+  await step("Initial load", async () => {
+    await $allDetails.forEach(async ($details) => {
+      await expect(
+        $details.querySelector(".tna-accordion__summary"),
+      ).toBeVisible();
+      await expect(
+        $details.querySelector(".tna-accordion__content"),
+      ).not.toBeVisible();
+    });
+  });
+
+  await step("Open first item", async () => {
+    await fireEvent.click(
+      $allDetails[0].querySelector(".tna-accordion__summary"),
+    );
+    console.log($allDetails[0].querySelector(".tna-accordion__summary"));
+    await $allDetails.forEach(async ($details, index) => {
+      if (index === 0) {
+        await expect(
+          $details.querySelector(".tna-accordion__content"),
+        ).toBeVisible();
+      } else {
+        await expect(
+          $details.querySelector(".tna-accordion__content"),
+        ).not.toBeVisible();
+      }
+    });
+  });
+
+  await step("Close first item", async () => {
+    await fireEvent.click(
+      $allDetails[0].querySelector(".tna-accordion__summary"),
+    );
+    await $allDetails.forEach(async ($details) => {
+      await expect(
+        $details.querySelector(".tna-accordion__content"),
+      ).not.toBeVisible();
+    });
+  });
+
+  await step("Open first item", async () => {
+    await fireEvent.click(
+      $allDetails[0].querySelector(".tna-accordion__summary"),
+    );
+    await $allDetails.forEach(async ($details, index) => {
+      if (index === 0) {
+        await expect(
+          $details.querySelector(".tna-accordion__content"),
+        ).toBeVisible();
+      } else {
+        await expect(
+          $details.querySelector(".tna-accordion__content"),
+        ).not.toBeVisible();
+      }
+    });
+  });
+
+  // TODO: fireEvent doesn't work on Firefox
+  // await step("Open second item", async () => {
+  //   await fireEvent.click(
+  //     $allDetails[1].querySelector(".tna-accordion__summary"),
+  //   );
+  //   await $allDetails.forEach(async ($details, index) => {
+  //     if (index === 1) {
+  //       await expect(
+  //         $details.querySelector(".tna-accordion__content"),
+  //       ).toBeVisible();
+  //     } else {
+  //       await expect(
+  //         $details.querySelector(".tna-accordion__content"),
+  //       ).not.toBeVisible();
+  //     }
+  //   });
+  // });
+
+  // await step("Close second item", async () => {
+  //   await fireEvent.click(
+  //     $allDetails[1].querySelector(".tna-accordion__summary"),
+  //   );
+  //   await $allDetails.forEach(async ($details) => {
+  //     await expect(
+  //       $details.querySelector(".tna-accordion__content"),
+  //     ).not.toBeVisible();
+  //   });
+  // });
+};

package/nationalarchives/components/accordion/fixtures.json

@@ -0,0 +1,74 @@
+{
+  "component": "accordion",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {
+        "items": [
+          {
+            "title": "Alpha",
+            "text": "Content"
+          },
+          {
+            "title": "Beta",
+            "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+    },
+    {
+      "name": "with group",
+      "options": {
+        "items": [
+          {
+            "title": "Alpha",
+            "text": "Content"
+          },
+          {
+            "title": "Beta",
+            "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
+          }
+        ],
+        "group": "group-1"
+      },
+      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\" name=\"group-1\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\" name=\"group-1\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "items": [
+          {
+            "title": "Alpha",
+            "text": "Content"
+          },
+          {
+            "title": "Beta",
+            "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
+          }
+        ],
+        "classes": "accordion__test-class"
+      },
+      "html": "<div class=\"tna-accordion accordion__test-class\" data-module=\"tna-accordion\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "items": [
+          {
+            "title": "Alpha",
+            "text": "Content"
+          },
+          {
+            "title": "Beta",
+            "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
+          }
+        ],
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<div class=\"tna-accordion\" data-module=\"tna-accordion\" data-testattribute=\"foobar\"><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Alpha</summary><div class=\"tna-accordion__content\"><p>Content</p></div></details><details class=\"tna-accordion__details\"><summary class=\"tna-accordion__summary\">Beta</summary><div class=\"tna-accordion__content\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></details></div>"
+    }
+  ]
+}

package/nationalarchives/components/accordion/macro-options.json

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "The sections within the accordion.",
+    "items": [
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": "The heading of each accordion section."
+      },
+      {
+        "name": "body",
+        "type": "string",
+        "required": false,
+        "description": "The HTML for the main body of the accordion item. Not displayed if `text` is set."
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "required": false,
+        "description": "The text for the accordion item which will be inserted into a `<p>` element. Overwrites `body` if it is set."
+      },
+      {
+        "name": "open",
+        "type": "boolean",
+        "required": false,
+        "description": "If true, open the accordion item. If a `group` is set, only one item in that group can be open."
+      }
+    ]
+  },
+  {
+    "name": "group",
+    "type": "string",
+    "required": false,
+    "description": "The name of the accordion group. If set, only one item in the named group can be opened at a time."
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the accordion."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the accordion."
+  }
+]

package/nationalarchives/components/accordion/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaAccordion(params) %}
+  {%- include "nationalarchives/components/accordion/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/accordion/template.njk

@@ -0,0 +1,16 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set classes = containerClasses | join(' ') -%}
+<div class="tna-accordion{% if classes %} {{ classes }}{% endif %}" data-module="tna-accordion"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items %}
+  <details class="tna-accordion__details"{%- if params.group %} name="{{ params.group }}"{% endif %}{%- if item.open %} open{% endif %}>
+    <summary class="tna-accordion__summary">{{ item.title }}</summary>
+    <div class="tna-accordion__content">
+      {%- if item.text %}
+        <p>{{ item.text }}</p>
+      {%- else %}
+        {{ item.body | safe }}
+      {%- endif %}
+    </div>
+  </details>
+  {%- endfor %}
+</div>