@nationalarchives/frontend 0.1.23-prerelease → 0.1.25-prerelease

package/nationalarchives/{_prototype-kit.scss → prototype-kit.scss}

@@ -9,8 +9,8 @@
 
 .tna-template__body {
   p {
-    color: inherit;
-    font-family: inherit;
-    font-weight: inherit;
+    // color: inherit;
+    // font-family: inherit;
+    // font-weight: inherit;
   }
 }

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

@@ -2,6 +2,7 @@ import SkipLink from "../../../components/skip-link/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
+import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
 import CookieBanner from "../../../components/cookie-banner/template.njk";
 import Gallery from "../../../components/gallery/template.njk";
@@ -27,7 +28,7 @@ const argTypes = {
   },
   accent: {
     control: "radio",
-    options: ["none", /*"black",*/ "yellow", "pink", "orange", "green", "blue"],
+    options: ["none", "black", "yellow", "pink", "orange", "green", "blue"],
   },
 };
 
@@ -104,7 +105,7 @@ const Template = ({ theme, accent }) => {
         phase: "beta",
         message:
           'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
-        classes: "tna-phase-banner--accent",
+        accent: true,
       },
     })}
     ${Header({
@@ -235,8 +236,8 @@ const Template = ({ theme, accent }) => {
         </div>
         <div class="tna-column tna-column--no-padding tna-column--width-1-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
           <div class="tna-container tna-container--no-padding">
-            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
-              <div class="tna-aside tna-background--contrast">
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-vertical-m tna-!--no-margin-top-large">
+              <div class="tna-aside tna-background-contrast">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
                 <div class="tna-button-group">
                   ${Button({
@@ -249,8 +250,8 @@ const Template = ({ theme, accent }) => {
                 </div>
               </div>
             </div>
-            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-m tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
-              <div class="tna-aside tna-background--accent">
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-vertical-m tna-!--no-margin-top-large tna-!--no-margin-bottom-large">
+              <div class="tna-aside tna-background-accent">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
                 <div class="tna-button-group">
                   ${Button({
@@ -316,13 +317,13 @@ const Template = ({ theme, accent }) => {
             <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
-            <a href="#">Reaerching with The National Archives</a>
+            <a href="#">Researching with The National Archives</a>
           </h2>
           <p>Lorem ipsum <a href="#">link</a></p>
           <hgroup class="tna-hgroup-m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">
-              <a href="#">Reaerching with The National Archives</a>
+              <a href="#">Researching with The National Archives</a>
             </h2>
           </hgroup>
           <p>Lorem ipsum <a href="#">link</a></p>
@@ -394,6 +395,32 @@ const Template = ({ theme, accent }) => {
                 "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
             },
           })}
+          <h2 class="tna-heading-l">
+            Featured records
+          </h2>
+          ${FeaturedRecords({
+            params: {
+              items: [
+                {
+                  imageSrc:
+                    "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+                  imageWidth: 576,
+                  imageHeight: 591,
+                  collection: "TS 11/45/167",
+                  title: "Court records relating to Robert Wedderburn's trial",
+                  href: "#",
+                  date: "1819–1820",
+                },
+                {
+                  collection: "HO 42/191",
+                  title: "Home office letters",
+                  href: "#",
+                  date: "1819",
+                },
+              ],
+              classes: "tna-featured-records--demo",
+            },
+          })}
         </div>
       </div>
       <hr>
@@ -419,64 +446,68 @@ const Template = ({ theme, accent }) => {
           classes: "tna-hero--demo",
         },
       })}
-      <div class="tna-container tna-section tna-!--padding-bottom-s">
-        <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              classes: "tna-!--margin-bottom-m",
-            },
-          })}
-        </div>
-        <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              style: "boxed",
-              classes: "tna-!--margin-bottom-m",
-            },
-          })}
-        </div>
-        <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              style: "accent",
-              classes: "tna-!--margin-bottom-m",
-            },
-          })}
-        </div>
+      <div class="tna-section tna-!--padding-bottom-s">
+        <ul class="tna-ul tna-ul--plain tna-container">
+          <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                classes: "tna-!--margin-bottom-m",
+              },
+            })}
+          </li>
+          <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                style: "boxed",
+                classes: "tna-!--margin-bottom-m",
+              },
+            })}
+          </li>
+          <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                style: "accent",
+                classes: "tna-!--margin-bottom-m",
+              },
+            })}
+          </li>
+        </ul>
       </div>
       <hr>
-      <div class="tna-container tna-section">
-        <div class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              horizontal: true,
-              classes: "tna-!--margin-bottom-m",
-            },
-          })}
-        </div>
-        <div class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              horizontal: true,
-              style: "boxed",
-              classes: "tna-!--margin-bottom-m",
-            },
-          })}
-        </div>
-        <div class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
-          ${Card({
-            params: {
-              ...cardDefaultOptions,
-              horizontal: true,
-              style: "accent",
-            },
-          })}
-        </div>
+      <div class="tna-section">
+        <ul class="tna-ul tna-ul--plain tna-container">
+          <li class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                horizontal: true,
+                classes: "tna-!--margin-bottom-m",
+              },
+            })}
+          </li>
+          <li class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                horizontal: true,
+                style: "boxed",
+                classes: "tna-!--margin-bottom-m",
+              },
+            })}
+          </li>
+          <li class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
+            ${Card({
+              params: {
+                ...cardDefaultOptions,
+                horizontal: true,
+                style: "accent",
+              },
+            })}
+          </li>
+        </ul>
       </div>
       <hr>
       <div class="tna-container tna-section">
@@ -585,7 +616,7 @@ const Template = ({ theme, accent }) => {
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 1", level: 3, href: "#" },
-            items: Array(12)
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -663,11 +694,11 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--contrast">
+      <div class="tna-section tna-background-tint">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 2", level: 3, href: "#" },
-            items: Array(12)
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -745,11 +776,11 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--accent-light">
+      <div class="tna-section tna-background-contrast">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 3", level: 3, href: "#" },
-            items: Array(12)
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -780,7 +811,7 @@ const Template = ({ theme, accent }) => {
           <div class="tna-column tna-column--full">
             ${Pagination({
               params: {
-                landmarkLabel: "My dogs 3 results",
+                landmarkLabel: "My dogs 2 results",
                 previous: {
                   href: "#",
                 },
@@ -827,11 +858,93 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--accent">
+      <div class="tna-section tna-background-accent-light">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 4", level: 3, href: "#" },
-            items: Array(12)
+            items: Array(6)
+              .fill({
+                ...{
+                  href: "#",
+                  src: "https://picsum.photos/id/237/800/600",
+                  alt: "Photo of a puppy",
+                  width: "800",
+                  height: "600",
+                  title: "Cat",
+                  subtitle: "4 photos",
+                },
+              })
+              .map((item, index) => {
+                const pseudoRandom = ((index * 29) % 8) + 1;
+                return {
+                  ...item,
+                  href: `#/category-${index}`,
+                  title: `Category #${index + 101}`,
+                  subtitle: `${pseudoRandom} photos`,
+                };
+              }),
+            columns: 4,
+            columnsMedium: 3,
+            columnsSmall: 2,
+            columnsTiny: 1,
+          },
+        })}
+        <div class="tna-container">
+          <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                landmarkLabel: "My dogs 3 results",
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
+            <div class="tna-button-group">
+              <a href="#" class="tna-button" role="button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tna-section tna-background-accent">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs 5", level: 3, href: "#" },
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -1041,7 +1154,7 @@ const Template = ({ theme, accent }) => {
             href: "#",
           },
           {
-            text: "Terms and condidtions",
+            text: "Terms and conditions",
             href: "#",
           },
           {
@@ -1060,7 +1173,9 @@ const Template = ({ theme, accent }) => {
 };
 
 export const System = Template.bind({});
-// System.parameters = { options: { showPanel: false } };
+System.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 System.args = {
   theme: "system",
   accent: "pink",

package/nationalarchives/stories/utilities/lists/lists.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ListStories from './lists.stories';
+
+<Meta of={ListStories} />
+
+# Lists
+
+<Canvas of={ListStories.UnorderedList} />
+<Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.DescriptionList} />
+<Canvas of={ListStories.DescriptionListWithIcons} />
+
+## Plain versions
+
+<Canvas of={ListStories.UnorderedListPlain} />
+<Canvas of={ListStories.OrderedListPlain} />
+<Canvas of={ListStories.PlainDescriptionList} />
+<Canvas of={ListStories.PlainDescriptionListWithIcons} />

package/nationalarchives/stories/utilities/{typography → lists}/lists.stories.js

@@ -4,7 +4,7 @@ const argTypes = {
 };
 
 export default {
-  title: "Utilities/Typography",
+  title: "Utilities/Lists",
   argTypes,
 };
 

package/nationalarchives/stories/utilities/overrides/overrides.mdx

@@ -5,42 +5,49 @@ import * as OverrideStories from './overrides.stories';
 
 # Overrides
 
-## Properties
+## Options
 
-Property options: `margin`, `padding`
+`property`:
 
-```css
-tna-!--no-[property]-[direction]
-```
+- `margin`
+- `padding`
 
-### No margin/padding
-
-Direction options:
+`direction`:
 
 - `top`
 - `bottom`
 - `vertical` - `top` and `bottom`
 
-```css
+## Removing space
+
+```
+// For all devices
 tna-!--no-[property]-[direction]
 ```
 
-### Sizes
+`device` options (optional):
 
-Size options: `xs`, `s`, `m`, `l`, `xl`, `xxl`
+- `large`
+- `medium`
+- `small`
+- `tiny`
 
-```css
-tna-!--[property]-[direction]-[size]
 ```
-
-### Responsive
-
-Device options: `medium`, `small`, `tiny`
-
-```css
+// For a specific device size
 tna-!--no-[property]-[direction]-[device]
-tna-!--[property]-[direction]-[size]-[device]
 ```
 
+## Adding space
 
+`size` options:
 
+- `xs`
+- `s`
+- `m`
+- `l`
+- `xl`
+- `xxl`
+
+```css
+tna-!--[property]-[direction]-[size]
+```

package/nationalarchives/stories/utilities/overrides/overrides.stories.js

@@ -1,3 +1,5 @@
+import { customViewports } from "../../../../../.storybook/viewports";
+
 const argTypes = {};
 
 export default {
@@ -6,14 +8,29 @@ export default {
 };
 
 const Template = () => {
-  return `<p>Lorem ipsum</p>
+  return `<div class="tna-spacing-demo">
+  <p>Lorem ipsum</p>
   <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
   <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
   <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
   <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
   <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
-  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>`;
+  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
+  <p class="tna-!--margin-top-xxl">Lorem ipsum (tna-!--margin-top-xxl)</p>
+</div>`;
 };
 
 export const Margin = Template.bind({});
 Margin.args = {};
+
+export const MarginMobile = Template.bind({});
+MarginMobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+    disableSnapshot: true,
+  },
+};
+MarginMobile.args = {};

package/nationalarchives/stories/utilities/tables/tables.mdx

@@ -0,0 +1,8 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as TableStories from './tables.stories';
+
+<Meta of={TableStories} />
+
+# Tables
+
+<Canvas of={TableStories.Table} />

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

@@ -0,0 +1,45 @@
+export default {
+  title: "Utilities/Tables",
+};
+
+const TableTemplate = () =>
+  `<table class="tna-table">
+  <caption class="tna-table__caption tna-heading-m tna-visually-hidden">Primary options</caption>
+  <thead class="tna-table__head">
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="col">Name</th>
+      <th class="tna-table__header" scope="col">Type</th>
+      <th class="tna-table__header" scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody class="tna-table__body">
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">items</th>
+      <td class="tna-table__cell">array</td>
+      <td class="tna-table__cell">
+        <p><strong>Required.</strong></p>
+        <p>See items.</p>
+      </td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">noCollapse</th>
+      <td class="tna-table__cell">string</td>
+      <td class="tna-table__cell"></td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">classes</th>
+      <td class="tna-table__cell">string</td>
+      <td class="tna-table__cell">
+        <p>Classes to add to the breadcrumbs.</p>
+      </td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">attributes</th>
+      <td class="tna-table__cell">object</td>
+      <td class="tna-table__cell">
+        <p>HTML attributes (for example data attributes) to add to the breadcrumbs.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>`;
+export const Table = TableTemplate.bind({});