@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

package/nationalarchives/prototype-kit.scss

@@ -6,11 +6,3 @@
 );
 
 @use "all";
-
-.tna-template__body {
-  p {
-    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 Checkboxes from "../../../components/checkboxes/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";
@@ -13,7 +14,11 @@ import Message from "../../../components/message/template.njk";
 import Pagination from "../../../components/pagination/template.njk";
 import PhaseBanner from "../../../components/phase-banner/template.njk";
 import Picture from "../../../components/picture/template.njk";
+import Radios from "../../../components/radios/template.njk";
+import Select from "../../../components/select/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
+import TextInput from "../../../components/text-input/template.njk";
+import Textarea from "../../../components/textarea/template.njk";
 
 const argTypes = {
   theme: {
@@ -28,7 +33,7 @@ const argTypes = {
   },
   accent: {
     control: "radio",
-    options: ["none", "black", "yellow", "pink", "orange", "green", "blue"],
+    options: ["none", "yellow", "pink", "orange", "green", "blue"],
   },
 };
 
@@ -64,28 +69,26 @@ const Template = ({ theme, accent }) => {
     theme === "system"
       ? "tna-template--system-theme"
       : theme === "light"
-      ? "tna-template--light-theme"
-      : theme === "dark"
-      ? "tna-template--dark-theme"
-      : theme === "light high-contrast"
-      ? "tna-template--light-theme tna-template--high-contrast-theme"
-      : theme === "dark high-contrast"
-      ? "tna-template--dark-theme tna-template--high-contrast-theme"
-      : ""
+        ? "tna-template--light-theme"
+        : theme === "dark"
+          ? "tna-template--dark-theme"
+          : theme === "light high-contrast"
+            ? "tna-template--light-theme tna-template--high-contrast-theme"
+            : theme === "dark high-contrast"
+              ? "tna-template--dark-theme tna-template--high-contrast-theme"
+              : ""
   } ${
-    accent === "black"
-      ? "tna-template--black-accent"
-      : accent === "yellow"
+    accent === "yellow"
       ? "tna-template--yellow-accent"
       : accent === "pink"
-      ? "tna-template--pink-accent"
-      : accent === "orange"
-      ? "tna-template--orange-accent"
-      : accent === "green"
-      ? "tna-template--green-accent"
-      : accent === "blue"
-      ? "tna-template--blue-accent"
-      : ""
+        ? "tna-template--pink-accent"
+        : accent === "orange"
+          ? "tna-template--orange-accent"
+          : accent === "green"
+            ? "tna-template--green-accent"
+            : accent === "blue"
+              ? "tna-template--blue-accent"
+              : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
     <!--
@@ -258,7 +261,6 @@ const Template = ({ theme, accent }) => {
                     params: {
                       text: "Primary button",
                       href: "#",
-                      classes: "tna-button--solid-hover",
                     },
                   })}
                 </div>
@@ -446,64 +448,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">
@@ -611,8 +617,10 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 1", level: 3, href: "#" },
-            items: Array(12)
+            title: "My dogs 1",
+            headingLevel: 3,
+            headingHref: "#",
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -679,7 +687,91 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
+              },
+            })}
+            <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-tint">
+        ${IndexGrid({
+          params: {
+            title: "My dogs 2",
+            headingLevel: 3,
+            headingHref: "#",
+            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 tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -693,8 +785,10 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-contrast">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 2", level: 3, href: "#" },
-            items: Array(12)
+            title: "My dogs 3",
+            headingLevel: 3,
+            headingHref: "#",
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -761,7 +855,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -775,8 +869,10 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent-light">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 3", level: 3, href: "#" },
-            items: Array(12)
+            title: "My dogs 4",
+            headingLevel: 3,
+            headingHref: "#",
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -843,7 +939,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -857,8 +953,10 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 4", level: 3, href: "#" },
-            items: Array(12)
+            title: "My dogs 5",
+            headingLevel: 3,
+            headingHref: "#",
+            items: Array(6)
               .fill({
                 ...{
                   href: "#",
@@ -925,7 +1023,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -936,6 +1034,123 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
+      <div class="tna-section">
+        <div class="tna-container">
+          <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
+            <form>
+              <h2 class="tna-heading tna-heading--l">
+                Forms
+              </h2>
+              ${TextInput({
+                params: {
+                  label: "Enter your name",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "name",
+                  name: "name",
+                  autofill: "name",
+                },
+              })}
+              ${TextInput({
+                params: {
+                  label: "Enter your email",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "email",
+                  name: "email",
+                  autofill: "email",
+                },
+              })}
+              ${Select({
+                params: {
+                  label: "Sort by",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "sort",
+                  name: "sort",
+                  items: [
+                    {
+                      text: "Relevance",
+                      value: "relevance",
+                    },
+                    {
+                      text: "Date",
+                      value: "date",
+                    },
+                    {
+                      text: "Title",
+                      value: "title",
+                    },
+                  ],
+                },
+              })}
+              ${Radios({
+                params: {
+                  label: "Type",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "type",
+                  name: "type",
+                  items: [
+                    {
+                      text: "Audio",
+                      value: "audio",
+                    },
+                    {
+                      text: "Image",
+                      value: "image",
+                    },
+                    {
+                      text: "Video",
+                      value: "video",
+                    },
+                  ],
+                },
+              })}
+              ${Checkboxes({
+                params: {
+                  label: "Categories",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "categories",
+                  name: "categories",
+                  items: [
+                    {
+                      text: "Alpha",
+                      value: "alpha",
+                    },
+                    {
+                      text: "Beta",
+                      value: "beta",
+                    },
+                    {
+                      text: "Gamma",
+                      value: "gamma",
+                    },
+                  ],
+                },
+              })}
+              ${Textarea({
+                params: {
+                  label: "Enter your feedback",
+                  headingLevel: 3,
+                  headingSize: "m",
+                  id: "feedback",
+                  name: "feedback",
+                },
+              })}
+              <div class="tna-button-group">
+                <button type="button" class="tna-button">
+                  Submit
+                </button>
+                <a href="#" class="tna-button tna-button--plain">
+                  Skip
+                </a>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
     </main>
     ${Footer({
       params: {
@@ -1068,7 +1283,7 @@ const Template = ({ theme, accent }) => {
             href: "#",
           },
           {
-            text: "Terms and condidtions",
+            text: "Terms and conditions",
             href: "#",
           },
           {
@@ -1087,7 +1302,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",
@@ -1116,3 +1333,144 @@ DarkHighContrast.args = {
   theme: "dark high-contrast",
   accent: "pink",
 };
+
+const CombinationsTemplate = () => {
+  const themes = [
+    "tna-template--light-theme",
+    "tna-template--light-theme tna-template--high-contrast-theme",
+    "tna-template--dark-theme",
+    "tna-template--dark-theme tna-template--high-contrast-theme",
+  ];
+
+  const accents = [
+    "",
+    // "tna-template--black-accent",
+    "tna-template--yellow-accent",
+    "tna-template--pink-accent",
+    "tna-template--orange-accent",
+    "tna-template--green-accent",
+    "tna-template--blue-accent",
+  ];
+
+  const blocks = [
+    "",
+    "tna-background-tint",
+    "tna-background-accent-light",
+    "tna-background-accent",
+    "tna-background-contrast",
+  ];
+
+  return `<div class="tna-colour-contrast-demo">
+  <div class="tna-colour-contrast-demo__header">
+    <div class="tna-colour-contrast-demo__block">
+      Blocks
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__block">
+      ${block.replace(/^tna-background-/, "") || "Base"}
+    </div>`,
+      "",
+    )}
+  </div>
+  <div class="tna-colour-contrast-demo__examples">
+  ${themes.reduce(
+    (themeOutput, theme) =>
+      `${themeOutput}${accents.reduce(
+        (
+          accentOutput,
+          accent,
+        ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
+    <div class="tna-colour-contrast-demo__example">
+      <p>Theme: <strong>${theme
+        .replace(/tna-template--/g, "")
+        .replace(/-theme/g, "")}</strong></p>
+      <p>Accent: <strong>${
+        accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
+        "[none]"
+      }</strong></p>
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
+      <div class="tna-template__body">
+        <div class="tna-colour-contrast-demo__example-content ${block}">
+          <p>Text</p>
+          <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
+          <span class="tna-chip">Chip</span>
+          <div class="tna-button-group">
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                accent: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                plain: true,
+              },
+            })}
+            <!--${Button({
+              params: {
+                text: "Button",
+                accent: true,
+                class: "tna-button--solid-hover",
+              },
+            })}-->
+          </div>
+          <!--${Pagination({
+            params: {
+              previous: {
+                href: "#",
+              },
+              items: [
+                {
+                  number: 1,
+                  href: "#",
+                },
+                {
+                  ellipsis: true,
+                },
+                {
+                  number: 7,
+                  current: true,
+                  href: "#",
+                },
+                {
+                  ellipsis: true,
+                },
+                {
+                  number: 42,
+                  href: "#",
+                },
+              ],
+              next: {
+                href: "#",
+              },
+            },
+          })}-->
+        </div>
+      </div>
+    </div>`,
+      "",
+    )}
+  </div>`,
+        "",
+      )}`,
+    "",
+  )}
+  </div>
+</div>`;
+};
+
+export const Combinations = CombinationsTemplate.bind({});
+Combinations.args = {};