@nationalarchives/frontend 0.1.50 → 0.1.52

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,22 +12,17 @@ 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 = [
     "",
-    // "tna-template--black-accent",
-    "tna-template--yellow-accent",
-    "tna-template--pink-accent",
-    "tna-template--orange-accent",
-    "tna-template--green-accent",
-    "tna-template--blue-accent",
+    "tna-accent-black",
+    "tna-accent-yellow",
+    "tna-accent-pink",
+    "tna-accent-orange",
+    "tna-accent-green",
+    "tna-accent-blue",
   ];
 
   const blocks = [
@@ -51,20 +47,14 @@ 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-template--/g, "").replace(/-accent/g, "") ||
-        "[none]"
+        accent.replace(/tna-accent-/g, "") || "[none]"
       }</strong></p>
     </div>
     ${blocks.reduce(
@@ -72,7 +62,7 @@ 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">
@@ -86,18 +76,42 @@ 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,
+            },
+          })}
           ${TextInput({
             params: {
               label: "Input",
-              id: `name-${theme}-${block}-${accent}`,
-              name: `name-${theme}-${block}-${accent}`,
+              id: `name-${themeSlug}-${block}-${accent}`,
+              name: `name-${themeSlug}-${block}-${accent}`,
               value: `Lorem ipsum`,
             },
           })}
+          ${TextInput({
+            params: {
+              label: "Input",
+              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",
@@ -115,8 +129,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",
@@ -135,8 +149,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",
@@ -181,18 +195,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,15 +191,13 @@ const Template = ({ theme, accent }) => {
     <main class="tna-main" id="main-content">
       ${Hero({
         params: {
-          heading: "Title",
-          body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+          content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
           imageSrc:
             "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
           imageAlt: "The National Archives office",
           imageWidth: 499,
           imageHeight: 333,
           imageCaption: "An interesting photo by a famous photographer ©2023",
-          classes: "tna-hero--demo",
         },
       })}
       <div class="tna-container tna-section">
@@ -465,7 +460,6 @@ const Template = ({ theme, accent }) => {
           imageWidth: 499,
           imageHeight: 333,
           imageCaption: "An interesting photo by a famous photographer ©2023",
-          classes: "tna-hero--demo",
         },
       })}
       <div class="tna-section tna-!--padding-bottom-s">
@@ -720,9 +714,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>
@@ -804,9 +808,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>
@@ -888,9 +902,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>
@@ -972,9 +996,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>
@@ -1056,26 +1090,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>
@@ -1377,20 +1406,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",
+// };