@nationalarchives/frontend 0.1.53 → 0.1.55

package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -1,4 +1,4 @@
-import SkipLink from "../../../components/skip-link/template.njk";
+import Accordion from "../../../components/accordion/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
@@ -16,6 +16,7 @@ import Picture from "../../../components/picture/template.njk";
 import Radios from "../../../components/radios/template.njk";
 import SearchField from "../../../components/search-field/template.njk";
 import Select from "../../../components/select/template.njk";
+import SkipLink from "../../../components/skip-link/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
 import TextInput from "../../../components/text-input/template.njk";
 import Textarea from "../../../components/textarea/template.njk";
@@ -136,7 +137,7 @@ const Template = ({ theme, accent }) => {
             href: "#/visit",
           },
           {
-            text: "What's on",
+            text: "What’s on",
             href: "#/whats-on",
           },
           {
@@ -144,12 +145,12 @@ const Template = ({ theme, accent }) => {
             href: "#/explore-the-collection",
           },
           {
-            text: "Using the archives",
+            text: "Help using the archive",
             href: "#/using-the-archives",
           },
           {
-            text: "Learn",
-            href: "#/learn",
+            text: "Education",
+            href: "#/education",
           },
           {
             text: "Professional guidance and services",
@@ -410,8 +411,7 @@ const Template = ({ theme, accent }) => {
           </ul>
           ${Warning({
             params: {
-              message:
-                "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+              body: "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
             },
           })}
           <h2 class="tna-heading-l">
@@ -425,7 +425,7 @@ const Template = ({ theme, accent }) => {
                   imageWidth: 400,
                   imageHeight: 600,
                   collection: "TS 11/45/167",
-                  title: "Court records relating to Robert Wedderburn's trial",
+                  title: "Court records relating to Robert Wedderburn’s trial",
                   href: "#",
                   date: "1819–1820",
                 },
@@ -439,6 +439,79 @@ const Template = ({ theme, accent }) => {
               classes: "tna-featured-records--demo",
             },
           })}
+          <h2 class="tna-heading-l">
+            Accordion
+          </h2>
+          ${Accordion({
+            params: {
+              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",
+            },
+          })}
         </div>
       </div>
       <hr>

package/nationalarchives/stories/utilities/tables/tables.stories.js

@@ -5,7 +5,7 @@ export default {
 const TableTemplate = () =>
   `<table class="tna-table">
   <caption class="tna-table__caption">
-    Records added and removed between 2020 and 2022
+    Records added and removed between 2020 and 2022.
   </caption>
   <thead class="tna-table__head">
     <tr class="tna-table__row">