@nationalarchives/frontend 0.1.24-prerelease → 0.1.25-prerelease

package/nationalarchives/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

@@ -446,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">
@@ -612,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: "#",
@@ -690,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: "#",
@@ -772,11 +776,93 @@ 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: "#",
+                  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 2 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-light">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs 4", level: 3, href: "#" },
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -857,8 +943,8 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 4", level: 3, href: "#" },
-            items: Array(12)
+            heading: { title: "My dogs 5", level: 3, href: "#" },
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -1068,7 +1154,7 @@ const Template = ({ theme, accent }) => {
             href: "#",
           },
           {
-            text: "Terms and condidtions",
+            text: "Terms and conditions",
             href: "#",
           },
           {
@@ -1087,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/overrides/overrides.stories.js

@@ -30,6 +30,7 @@ MarginMobile.parameters = {
   },
   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({});

package/nationalarchives/stories/utilities/typography/heading-groups.stories.js

@@ -3,7 +3,7 @@ const argTypes = {
   title: { control: "text" },
   level: { control: "number", min: 1, max: 6, step: 1 },
   size: { control: "radio", options: ["m", "l", "xl"] },
-  singleSentence: { control: "boolean" },
+  plainSupertitle: { control: "boolean" },
 };
 
 export default {
@@ -11,35 +11,75 @@ export default {
   argTypes,
 };
 
-const Template = ({
+const HeadingGroupTemplate = ({
   supertitle,
   title,
-  level = 3,
-  size = "l",
-  singleSentence,
+  level,
+  size,
+  plainSupertitle,
 }) =>
-  singleSentence
-    ? `<hgroup class="tna-hgroup-${size}">
-  <h${level} class="tna-hgroup__title">
-  <span class="tna-hgroup__supertitle">${supertitle}</span>
-  <span class="tna-hgroup__title">${title}</span>
-</h${level}>
-</hgroup>`
-    : `<hgroup class="tna-hgroup-${size}">
-  <p class="tna-hgroup__supertitle">${supertitle}</p>
+  `<hgroup class="tna-hgroup-${size}">
+  <p class="tna-hgroup__supertitle${
+    plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+  }">${supertitle}</p>
   <h${level} class="tna-hgroup__title">${title}</h${level}>
 </hgroup>`;
 
-export const HeadingGroup = Template.bind({});
+export const HeadingGroup = HeadingGroupTemplate.bind({});
 HeadingGroup.args = {
+  supertitle: "Record revealed",
+  title: "The Monteagle Letter",
+  level: 3,
+  size: "l",
+  plainSupertitle: false,
+};
+
+const HeadingGroupSingleSentenceTemplate = ({
+  supertitle,
+  title,
+  level,
+  size,
+  plainSupertitle,
+}) =>
+  `<hgroup class="tna-hgroup-${size}">
+  <h${level} class="tna-hgroup__title">
+    <span class="tna-hgroup__supertitle${
+      plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+    }">${supertitle}</span>
+    <span class="tna-hgroup__title">${title}</span>
+  </h${level}>
+</hgroup>`;
+
+export const HeadingGroupSingleSentence =
+  HeadingGroupSingleSentenceTemplate.bind({});
+HeadingGroupSingleSentence.args = {
   supertitle: "The story of",
   title: "Alice Hawkins",
-  singleSentence: true,
+  level: 3,
+  size: "l",
+  plainSupertitle: false,
 };
 
-export const HeadingGroupSeparated = Template.bind({});
-HeadingGroupSeparated.args = {
+const HeadingGroupPlainSupertitleTemplate = ({
+  supertitle,
+  title,
+  level,
+  size,
+  plainSupertitle,
+}) =>
+  `<hgroup class="tna-hgroup-${size}">
+  <p class="tna-hgroup__supertitle${
+    plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+  }">${supertitle}</p>
+  <h${level} class="tna-hgroup__title">${title}</h${level}>
+</hgroup>`;
+
+export const HeadingGroupPlainSupertitle =
+  HeadingGroupPlainSupertitleTemplate.bind({});
+HeadingGroupPlainSupertitle.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
-  singleSentence: false,
+  level: 3,
+  size: "l",
+  plainSupertitle: true,
 };

package/nationalarchives/templates/layouts/_prototype-kit.njk

@@ -1,5 +1,7 @@
 {% extends "./_generic.njk" %}
 
+{% set assetPath = "/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets" %}
+
 {% block stylesheets %}
   {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
   <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">