@nationalarchives/frontend 0.1.25-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>
@@ -615,7 +617,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 1", level: 3, href: "#" },
+            title: "My dogs 1",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -683,7 +687,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -697,7 +701,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-tint">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 2", level: 3, href: "#" },
+            title: "My dogs 2",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -765,7 +771,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -779,7 +785,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-contrast">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 3", level: 3, href: "#" },
+            title: "My dogs 3",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -847,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">
@@ -861,7 +869,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent-light">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 4", level: 3, href: "#" },
+            title: "My dogs 4",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -929,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">
@@ -943,7 +953,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 5", level: 3, href: "#" },
+            title: "My dogs 5",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -1011,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">
@@ -1022,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: {
@@ -1204,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 = {};

package/nationalarchives/stories/utilities/forms/forms.mdx

@@ -0,0 +1,117 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as TextInputStories from "../../../components/text-input/text-input.stories";
+import * as TextareaStories from "../../../components/textarea/textarea.stories";
+import * as DateInputStories from "../../../components/date-input/date-input.stories";
+import * as DateSearchStories from "../../../components/date-search/date-search.stories";
+import * as SelectStories from "../../../components/select/select.stories";
+import * as RadiosStories from "../../../components/radios/radios.stories";
+import * as CheckboxesStories from "../../../components/checkboxes/checkboxes.stories";
+import * as SearchFieldStories from "../../../components/search-field/search-field.stories";
+
+<Meta title="Utilities/Form elements" />
+
+# Form elements
+
+<Canvas of={TextInputStories.Standard} />
+<Canvas of={TextareaStories.Standard} />
+<Canvas of={SelectStories.Standard} />
+<Canvas of={RadiosStories.Standard} />
+<Canvas of={RadiosStories.Small} />
+<Canvas of={CheckboxesStories.Standard} />
+<Canvas of={CheckboxesStories.Small} />
+<Canvas of={DateSearchStories.Standard} />
+<Canvas of={DateInputStories.Standard} />
+<Canvas of={SearchFieldStories.Standard} />
+
+## Inline
+
+<Canvas of={TextInputStories.Inline} />
+<Canvas of={TextareaStories.Inline} />
+<Canvas of={SelectStories.Inline} />
+<Canvas of={RadiosStories.Inline} />
+<Canvas of={CheckboxesStories.Inline} />
+<Canvas of={DateSearchStories.Inline} />
+<Canvas of={DateInputStories.Inline} />
+
+## Structure
+
+### Single form elements
+
+```html
+<div class="tna-form__group"> <!-- Optional: "tna-form__group--error" -->
+
+  <div class="tna-form__group-contents">
+
+    <h4 class="tna-form__heading tna-form__heading--m">
+      <label class="tna-form__label" for="tna-form__ELEMENT-ID">
+        <!-- Field title -->
+      </label>
+    </h4>
+
+    <!-- Optional hint
+    <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+      [Hint text]
+    </p>
+    -->
+
+    <!-- Optional error
+    <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+      <span class="tna-!--visually-hidden">Error:</span> [Error text]
+    </p>
+    -->
+
+  </div>
+
+  <!-- Field id="tna-form__ELEMENT-ID"
+    If hint:
+      aria-describedby="tna-form__ELEMENT-ID-hint"
+    If error:
+      aria-describedby="tna-form__ELEMENT-ID-error"
+    If hint and error:
+      aria-describedby="tna-form__ELEMENT-ID-hint tna-form__ELEMENT-ID-error"
+  -->
+
+</div>
+```
+
+### Fieldset (multiple inputs - e.g. checkboxes and radios)
+
+```html
+<div class="tna-form__group"> <!-- Optional: "tna-form__group--error" -->
+
+  <fieldset class="tna-form__fieldset"><!-- Fieldset
+      If hint:
+        aria-describedby="tna-form__ELEMENT-ID-hint"
+      If error:
+        aria-describedby="tna-form__ELEMENT-ID-error"
+      If hint and error:
+        aria-describedby="tna-form__ELEMENT-ID-hint tna-form__ELEMENT-ID-error"
+    -->
+
+    <div class="tna-form__group-contents">
+
+      <legend class="tna-form__legend">
+        <h4 class="tna-form__heading tna-form__heading--m">
+          <!-- Field title -->
+        </h4>
+      </legend>
+
+      <!-- Optional hint
+      <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+        [Hint text]
+      </p>
+      -->
+
+      <!-- Optional error
+      <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+        <span class="tna-!--visually-hidden">Error:</span> [Error text]
+      </p>
+      -->
+
+    </div>
+  </fieldset>
+
+  <!-- Fields -->
+  
+</div>
+```

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -57,12 +57,6 @@ SceneSetterSmall.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
 
-// const TextDetailsTemplate = () =>
-//   `<p>
-//     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
-//   </p>`;
-// export const TextDetails = TextDetailsTemplate.bind({});
-
 const BlockquoteTemplate = ({
   html,
   author,

package/nationalarchives/templates/layouts/_generic.njk

@@ -28,7 +28,7 @@
       <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
     {% endblock %}
   </head>
-    <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <body class="tna-template__body {{ bodyClasses }}"{% for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
     {% block bodyStart %}
       {% block cookies %}
         {{ tnaCookieBanner({