@nationalarchives/frontend 0.1.51 → 0.1.53

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

@@ -1,5 +1,6 @@
 import Button from "../../../components/button/template.njk";
 import Checkboxes from "../../../components/checkboxes/template.njk";
+import ErrorSummary from "../../../components/error-summary/template.njk";
 import Radios from "../../../components/radios/template.njk";
 import Select from "../../../components/select/template.njk";
 import TextInput from "../../../components/text-input/template.njk";
@@ -11,13 +12,8 @@ export default {
   argTypes,
 };
 
-const Template = () => {
-  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 Template = ({ theme }) => {
+  const themeSlug = theme.replace(" ", "-").toLowerCase();
 
   const accents = [
     "",
@@ -31,8 +27,8 @@ const Template = () => {
 
   const blocks = [
     "",
-    "tna-background-accent-light",
     "tna-background-tint",
+    "tna-background-accent-light",
     "tna-background-accent",
     "tna-background-contrast",
   ];
@@ -51,17 +47,12 @@ const Template = () => {
     )}
   </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">
+  ${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-accent-/g, "") || "[none]"
       }</strong></p>
@@ -71,10 +62,13 @@ const Template = () => {
         `${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}">
-          <h6 class="tna-heading-s">Heading</h6>
+          <h1 class="tna-heading-s">Heading</h1>
           <p>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
           <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
-          <ul class="tna-chip-list">
+          <ul class="tna-ul">
+            <li>Alpha</li>
+          </ul>
+          <ul class="tna-chip-list tna-!--margin-top-xs">
             <li class="tna-chip-list__item">
               <span class="tna-chip">Chip</span>
             </li>
@@ -85,18 +79,43 @@ const Template = () => {
               <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
             </li>
           </ul>
+          ${ErrorSummary({
+            params: {
+              title: "Error",
+              headingLevel: 2,
+              items: [
+                {
+                  text: "Error",
+                  href: `name-${themeSlug}-${block}-${accent}-2`,
+                },
+              ],
+              disableAutoFocus: true,
+              classes: "tna-!--margin-top-s",
+            },
+          })}
+          ${TextInput({
+            params: {
+              label: "Input",
+              id: `name-${themeSlug}-${block}-${accent}`,
+              name: `name-${themeSlug}-${block}-${accent}`,
+              value: `Lorem ipsum`,
+            },
+          })}
           ${TextInput({
             params: {
               label: "Input",
-              id: `name-${theme}-${block}-${accent}`,
-              name: `name-${theme}-${block}-${accent}`,
+              id: `name-${themeSlug}-${block}-${accent}-2`,
+              name: `name-${themeSlug}-${block}-${accent}-2`,
               value: `Lorem ipsum`,
+              error: {
+                text: "Error",
+              },
             },
           })}
           ${Checkboxes({
             params: {
-              id: `categories-${theme}-${block}-${accent}`,
-              name: `categories-${theme}-${block}-${accent}`,
+              id: `categories-${themeSlug}-${block}-${accent}`,
+              name: `categories-${themeSlug}-${block}-${accent}`,
               items: [
                 {
                   text: "Alpha",
@@ -114,8 +133,8 @@ const Template = () => {
           })}
           ${Radios({
             params: {
-              id: `type-${theme}-${block}-${accent}`,
-              name: `type-${theme}-${block}-${accent}`,
+              id: `type-${themeSlug}-${block}-${accent}`,
+              name: `type-${themeSlug}-${block}-${accent}`,
               items: [
                 {
                   text: "Alpha",
@@ -134,8 +153,8 @@ const Template = () => {
           ${Select({
             params: {
               label: "Select",
-              id: `sort-${theme}-${block}-${accent}`,
-              name: `sort-${theme}-${block}-${accent}`,
+              id: `sort-${themeSlug}-${block}-${accent}`,
+              name: `sort-${themeSlug}-${block}-${accent}`,
               items: [
                 {
                   text: "Relevance",
@@ -180,18 +199,48 @@ const Template = () => {
       "",
     )}
   </div>`,
-        "",
-      )}`,
     "",
   )}
   </div>
 </div>`;
 };
 
-export const Combinations = Template.bind({});
-Combinations.parameters = {
+export const Light = Template.bind({});
+Light.parameters = {
   a11y: {
-    disable: true,
+    // disable: true,
   },
 };
-Combinations.args = {};
+Light.args = {
+  theme: "",
+};
+
+export const Dark = Template.bind({});
+Dark.parameters = {
+  a11y: {
+    // disable: true,
+  },
+};
+Dark.args = {
+  theme: "tna-template--dark-theme",
+};
+
+export const HighContrast = Template.bind({});
+HighContrast.parameters = {
+  a11y: {
+    // disable: true,
+  },
+};
+HighContrast.args = {
+  theme: "tna-template--high-contrast-theme",
+};
+
+export const DarkHighContrast = Template.bind({});
+DarkHighContrast.parameters = {
+  a11y: {
+    // disable: true,
+  },
+};
+DarkHighContrast.args = {
+  theme: "tna-template--dark-theme tna-template--high-contrast-theme",
+};

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

@@ -28,8 +28,8 @@ const argTypes = {
       "system",
       "light",
       "dark",
-      "light high-contrast",
-      "dark high-contrast",
+      // "light high-contrast",
+      // "dark high-contrast",
     ],
   },
   accent: {
@@ -46,7 +46,6 @@ export default {
 const Template = ({ theme, accent }) => {
   document.documentElement.classList.remove(
     "tna-template",
-    "tna-template--light-theme",
     "tna-template--yellow-accent",
   );
 
@@ -75,15 +74,13 @@ const Template = ({ theme, accent }) => {
   return `<div class="tna-template ${
     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"
-              : ""
+      : theme === "dark"
+        ? "tna-template--dark-theme"
+        : theme === "high-contrast"
+          ? "tna-template--high-contrast-theme"
+          : theme === "dark high-contrast"
+            ? "tna-template--dark-theme tna-template--high-contrast-theme"
+            : ""
   } ${
     accent === "yellow"
       ? "tna-template--yellow-accent"
@@ -194,7 +191,8 @@ const Template = ({ theme, accent }) => {
     <main class="tna-main" id="main-content">
       ${Hero({
         params: {
-          content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+          title: "Title",
+          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
           imageSrc:
             "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
           imageAlt: "The National Archives office",
@@ -717,9 +715,19 @@ const Template = ({ theme, accent }) => {
                 classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
+            ${SearchField({
+              params: {
+                label: "Catalogue search results",
+                headingLevel: 3,
+                headingSize: "l",
+                id: "search1",
+                name: "q",
+              },
+            })}
             <div class="tna-button-group">
               <a href="#" class="tna-button">Primary button</a>
               <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
               <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
@@ -801,9 +809,19 @@ const Template = ({ theme, accent }) => {
                 classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
+            ${SearchField({
+              params: {
+                label: "Catalogue search results",
+                headingLevel: 3,
+                headingSize: "l",
+                id: "search2",
+                name: "q",
+              },
+            })}
             <div class="tna-button-group">
               <a href="#" class="tna-button">Primary button</a>
               <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
               <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
@@ -885,9 +903,19 @@ const Template = ({ theme, accent }) => {
                 classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
+            ${SearchField({
+              params: {
+                label: "Catalogue search results",
+                headingLevel: 3,
+                headingSize: "l",
+                id: "search3",
+                name: "q",
+              },
+            })}
             <div class="tna-button-group">
               <a href="#" class="tna-button">Primary button</a>
               <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
               <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
@@ -969,9 +997,19 @@ const Template = ({ theme, accent }) => {
                 classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
+            ${SearchField({
+              params: {
+                label: "Catalogue search results",
+                headingLevel: 3,
+                headingSize: "l",
+                id: "search4",
+                name: "q",
+              },
+            })}
             <div class="tna-button-group">
               <a href="#" class="tna-button">Primary button</a>
               <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
               <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
@@ -1053,26 +1091,21 @@ const Template = ({ theme, accent }) => {
                 classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
-            <div class="tna-button-group">
-              <a href="#" class="tna-button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent">Accent button</a>
-              <a href="" class="tna-button tna-button--plain">Plain button</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="tna-section tna-background-contrast">
-        <div class="tna-container">
-          <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
             ${SearchField({
               params: {
                 label: "Catalogue search results",
                 headingLevel: 3,
                 headingSize: "l",
-                id: "search1",
+                id: "search5",
                 name: "q",
               },
             })}
+            <div class="tna-button-group">
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
+            </div>
           </div>
         </div>
       </div>
@@ -1374,20 +1407,20 @@ Dark.args = {
   accent: "pink",
 };
 
-export const LightHighContrast = Template.bind({});
-LightHighContrast.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LightHighContrast.args = {
-  theme: "light high-contrast",
-  accent: "pink",
-};
+// export const LightHighContrast = Template.bind({});
+// LightHighContrast.parameters = {
+//   chromatic: { disableSnapshot: true },
+// };
+// LightHighContrast.args = {
+//   theme: "light high-contrast",
+//   accent: "pink",
+// };
 
-export const DarkHighContrast = Template.bind({});
-DarkHighContrast.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-DarkHighContrast.args = {
-  theme: "dark high-contrast",
-  accent: "pink",
-};
+// export const DarkHighContrast = Template.bind({});
+// DarkHighContrast.parameters = {
+//   chromatic: { disableSnapshot: true },
+// };
+// DarkHighContrast.args = {
+//   theme: "dark high-contrast",
+//   accent: "pink",
+// };