@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

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

@@ -1,5 +1,7 @@
+import SkipLink from "../../../components/skip-link/template.njk";
 import Header from "../../../components/header/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
+import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
@@ -19,6 +21,10 @@ const argTypes = {
       "dark high-contrast",
     ],
   },
+  accent: {
+    control: "radio",
+    options: ["none", /*"black",*/ "yellow", "pink", "orange", "green", "blue"],
+  },
 };
 
 export default {
@@ -26,7 +32,33 @@ export default {
   argTypes,
 };
 
-const Template = ({ theme }) => {
+const Template = ({ theme, accent }) => {
+  const cardDefaultOptions = {
+    heading: {
+      supertitle: "Card supertitle",
+      title: "Card title",
+      level: 3,
+      size: "m",
+      singleSentence: false,
+    },
+    href: "#",
+    image: {
+      src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+      alt: "The National Archives office",
+      width: 1996,
+      height: 1331,
+    },
+    label: "New",
+    body: "<p>Card body</p>",
+    actions: [
+      {
+        text: "Card action",
+        href: "#",
+        title: "Go and do the action",
+      },
+    ],
+  };
+
   return `<div class="tna-template ${
     theme === "system"
       ? "tna-template--system-theme"
@@ -39,10 +71,33 @@ const Template = ({ theme }) => {
       : theme === "dark high-contrast"
       ? "tna-template--dark-theme tna-template--high-contrast-theme"
       : ""
+  } ${
+    accent === "black"
+      ? "tna-template--black-accent"
+      : 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"
+      : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
+    ${SkipLink({
+      params: {
+        href: "main-content",
+      },
+    })}
     ${Header({
       params: {
+        logo: {
+          strapline: "Colours",
+          href: "#/",
+        },
         navigation: [
           {
             text: "Alpha",
@@ -87,7 +142,7 @@ const Template = ({ theme }) => {
         ],
       },
     })}
-    <article>
+    <main id="main-content" role="main">
       ${Hero({
         params: {
           heading: "Title",
@@ -100,36 +155,139 @@ const Template = ({ theme }) => {
           classes: "tna-hero--demo",
         },
       })}
-      <div class="tna-container">
-        <div class="tna-column tna-column--full">
-          <hgroup class="tna-hgroup tna-hgroup--l">
+      <div class="tna-container tna-section">
+        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
+          <hgroup class="tna-hgroup tna-hgroup--xl">
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <p class="tna-p">This is some body text <a href="#">link</a>.</p>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p class="tna-p">Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl.</p>
+          <p class="tna-p">Donec dapibus est arcu, vel pellentesque risus pellentesque eget.</p>
           <ul class="tna-ul">
             <li>Alpha</li>
             <li>Beta</li>
             <li>Gamma</li>
           </ul>
-          <a href="#" class="tna-button">Primary button</a>
-          <a href="#" class="tna-button tna-button--secondary">Secondary button</a>
+          <div class="tna-button-group">
+            ${Button({
+              params: {
+                text: "Primary button",
+                href: "#",
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Accent button",
+                href: "#",
+                accent: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Explore the collection",
+                href: "#",
+                icon: "map-location-dot",
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Tweet us",
+                href: "#",
+                brandIcon: "twitter",
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Tweet us",
+                href: "#",
+                accent: true,
+                brandIcon: "twitter",
+              },
+            })}
+          </div>
         </div>
-      </div>
-      <hr>
-      <div class="tna-container">
-        <div class="tna-column tna-column--full">
-          <p class="tna-!--no-margin-bottom">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!__padding-top--xs">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!__padding-top--s">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!__padding-top--m">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!__padding-top--l">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!__padding-top--xl">Lorem ipsum</p>
+        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny">
+          <div class="tna-aside tna-background--contrast tna-!--margin-top-l-small tna-!--margin-top-xl-tiny">
+            <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          </div>
+          <div class="tna-aside tna-background--accent">
+            <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          </div>
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
+          <h1 class="tna-heading tna-heading--xl">
+            This is a heading (XL)
+          </h1>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <h2 class="tna-heading tna-heading--l">
+            This is a heading (L)
+          </h2>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <h3 class="tna-heading tna-heading--m">
+            This is a heading (M)
+          </h3>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <h4 class="tna-heading tna-heading--s">
+            This is a heading (S)
+          </h4>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <hgroup class="tna-hgroup tna-hgroup--xl">
+            <p class="tna-hgroup__supertitle">Supertitle</p>
+            <h2 class="tna-hgroup__title">This is a heading (XL)</h2>
+          </hgroup>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <hgroup class="tna-hgroup tna-hgroup--l">
+            <p class="tna-hgroup__supertitle">Supertitle</p>
+            <h2 class="tna-hgroup__title">This is a heading (L)</h2>
+          </hgroup>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <hgroup class="tna-hgroup tna-hgroup--m">
+            <p class="tna-hgroup__supertitle">Supertitle</p>
+            <h2 class="tna-hgroup__title">This is a heading (M)</h2>
+          </hgroup>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <hgroup class="tna-hgroup tna-hgroup--s">
+            <p class="tna-hgroup__supertitle">Supertitle</p>
+            <h2 class="tna-hgroup__title">This is a heading (S)</h2>
+          </hgroup>
+          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p class="tna-scene-setter">
+            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>.
+          </p>
+          <blockquote class="tna-blockquote">
+            <div class="tna-blockquote__quote">
+              <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+            </div>
+            <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
+          </blockquote>
+          <h2 class="tna-heading tna-heading--l">
+            <a href="#">Reaerching with The National Archives</a>
+          </h2>
+          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <hgroup class="tna-hgroup tna-hgroup--l">
+            <p class="tna-hgroup__supertitle">Supertitle</p>
+            <h2 class="tna-hgroup__title">
+              <a href="#">Reaerching with The National Archives</a>
+            </h2>
+          </hgroup>
+          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <ul class="tna-chip-list">
+            <li class="tna-chip-list__item">
+              <a href="#" class="tna-chip">Chip 1</a>
+            </li>
+            <li class="tna-chip-list__item">
+              <a href="#" class="tna-chip">Chip 2</a>
+            </li>
+            <li class="tna-chip-list__item">
+              <a href="#" class="tna-chip">Chip 3</a>
+            </li>
+          </ul>
           ${Message({
             params: {
               message:
@@ -139,54 +297,61 @@ const Template = ({ theme }) => {
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
+          <p class="tna-!--no-margin-bottom">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!--padding-top-xs">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!--padding-top-s">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!--padding-top-m">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!--padding-top-l">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!--padding-top-xl">Lorem ipsum</p>
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
-            params: {
-              heading: {
-                supertitle: "Card supertitle",
-                title: "Card title",
-                level: 3,
-                size: "m",
-                singleSentence: false,
-              },
-              href: "#",
-              image: {
-                src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-                alt: "The National Archives office",
-                width: 1996,
-                height: 1331,
-              },
-              label: "New",
-              body: "<p>Card body</p>",
-              classes: "tna-card--demo",
-            },
+            params: { ...cardDefaultOptions },
+          })}
+        </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" },
+          })}
+        </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" },
           })}
         </div>
       </div>
       <hr>
       <div class="tna-container">
-        <div class="tna-column tna-column--full">
+        <div class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
           ${Card({
             params: {
-              heading: {
-                supertitle: "Card supertitle",
-                title: "Card title",
-                level: 3,
-                size: "l",
-                singleSentence: false,
-              },
-              href: "#",
-              image: {
-                src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-                alt: "The National Archives office",
-                width: 1996,
-                height: 1331,
-              },
-              label: "New",
-              body: "<p>Card body</p>",
-              featured: true,
-              classes: "tna-card--demo",
+              ...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>
@@ -201,17 +366,17 @@ const Template = ({ theme }) => {
                 {
                   id: "unique-id-a",
                   title: "Alpha section",
-                  body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+                  body: '<h2 class="tna-heading">Alpha title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-b",
                   title: "Beta section",
-                  body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+                  body: '<h2 class="tna-heading">Beta title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-c",
                   title: "Gamma section",
-                  body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+                  body: '<h2 class="tna-heading">Gamma title</h2><p>Lorem ipsum</p>',
                 },
               ],
               classes: "tna-tabs--demo",
@@ -237,38 +402,271 @@ const Template = ({ theme }) => {
         </div>
       </div>
       <hr>
-      ${IndexGrid({
-        params: {
-          heading: "My dogs",
-          items: Array(12)
-            .fill({
-              ...{
+      <div class="tna-section tna-background--contrast">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs", href: "#" },
+            items: Array(12)
+              .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">
+            <div class="tna-button-group">
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tna-section tna-background--accent-light">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs", href: "#" },
+            items: Array(12)
+              .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">
+            <div class="tna-button-group">
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tna-section tna-background--accent">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs", href: "#" },
+            items: Array(12)
+              .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">
+            <div class="tna-button-group">
+              <a href="#" class="tna-button">Primary button</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    ${Footer({
+      params: {
+        meta: "<p>Open today<br />09:00&mdash;19:00</p>",
+        social: [
+          {
+            text: "Twitter",
+            href: "#",
+            image: "./images/footer/twitter.svg",
+          },
+          {
+            text: "YouTube",
+            href: "#",
+            image: "./images/footer/youtube.svg",
+          },
+          {
+            text: "Facebook",
+            href: "#",
+            image: "./images/footer/facebook.svg",
+          },
+          {
+            text: "Flickr",
+            href: "#",
+            image: "./images/footer/flickr.svg",
+          },
+          {
+            text: "Instagram",
+            href: "#",
+            image: "./images/footer/instagram.svg",
+          },
+          {
+            text: "RSS",
+            href: "#",
+            image: "./images/footer/rss.svg",
+          },
+        ],
+        navigation: [
+          {
+            title: "About us",
+            items: [
+              {
+                text: "Our role",
                 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,
-        },
-      })}
-    <article>
-    ${Footer({})}
+              {
+                text: "Our history",
+                href: "#",
+              },
+              {
+                text: "Our collection",
+                href: "#",
+              },
+              {
+                text: "Our people",
+                href: "#",
+              },
+              {
+                text: "How we are run",
+                href: "#",
+              },
+              {
+                text: "Our research amd academic collaboration",
+                href: "#",
+              },
+              {
+                text: "News",
+                href: "#",
+              },
+              {
+                text: "Contact us",
+                href: "#",
+              },
+              {
+                text: "Jobs & careers",
+                href: "#",
+              },
+              {
+                text: "Get involved",
+                href: "#",
+              },
+            ],
+          },
+          {
+            title: "Our websites help",
+            items: [
+              {
+                text: "UK Government Web Archive",
+                href: "#",
+                newTab: true,
+              },
+              {
+                text: "Legislation.gov.uk",
+                href: "#",
+                newTab: true,
+              },
+              {
+                text: "Find case law",
+                href: "#",
+                newTab: true,
+              },
+              {
+                text: "The Gazette",
+                href: "#",
+                newTab: true,
+              },
+            ],
+          },
+          {
+            title: "Quick links",
+            items: [
+              {
+                text: "Press room",
+                href: "#",
+              },
+              {
+                text: "Venue hire",
+                href: "#",
+              },
+            ],
+          },
+        ],
+        showNewsletter: true,
+        legal: [
+          {
+            text: "Accessibility statement",
+            href: "#",
+          },
+          {
+            text: "Freedom of information",
+            href: "#",
+          },
+          {
+            text: "Terms and condidtions",
+            href: "#",
+          },
+          {
+            text: "Privacy policy",
+            href: "#",
+          },
+          {
+            text: "Cookies",
+            href: "#",
+          },
+        ],
+      },
+    })}
   </div>
 </div>`;
 };
@@ -277,24 +675,29 @@ export const System = Template.bind({});
 // System.parameters = { options: { showPanel: false } };
 System.args = {
   theme: "system",
+  accent: "pink",
 };
 
 export const Light = Template.bind({});
 Light.args = {
   theme: "light",
+  accent: "pink",
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
   theme: "dark",
+  accent: "pink",
 };
 
 export const LightHighContrast = Template.bind({});
 LightHighContrast.args = {
   theme: "light high-contrast",
+  accent: "pink",
 };
 
 export const DarkHighContrast = Template.bind({});
 DarkHighContrast.args = {
   theme: "dark high-contrast",
+  accent: "pink",
 };