@nationalarchives/frontend 0.1.57 → 0.1.59

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

@@ -17,20 +17,20 @@ const Template = ({ theme }) => {
 
   const accents = [
     "",
-    "tna-accent-black",
-    "tna-accent-yellow",
     "tna-accent-pink",
     "tna-accent-orange",
+    "tna-accent-yellow",
     "tna-accent-green",
     "tna-accent-blue",
+    "tna-accent-black",
   ];
 
   const blocks = [
     "",
     "tna-background-tint",
-    "tna-background-accent-light",
-    "tna-background-accent",
     "tna-background-contrast",
+    "tna-background-accent",
+    "tna-background-accent-light",
   ];
 
   return `<div class="tna-colour-contrast-demo">
@@ -62,23 +62,70 @@ const Template = ({ theme }) => {
         `${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}">
-          <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-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>
-            <li class="tna-chip-list__item">
-              <span class="tna-chip"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
-            </li>
-            <li class="tna-chip-list__item">
-              <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
-            </li>
-          </ul>
+          <div class="accent-border-example">
+            <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-ul">
+              <li>Alpha</li>
+            </ul>
+          </div>
+          <dl class="tna-dl-chips">
+            <dt>Published</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                <i class="fa-solid fa-calendar"></i>
+                2014
+              </span>
+            </dd>
+            <dt>Author</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                <i class="fa-solid fa-user"></i>
+                James
+              </a>
+            </dd>
+            <dt>Category</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                Research
+              </a>
+            </dd>
+            <dt>Comments</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                3 comments
+              </span>
+            </dd>
+          </dl>
+          <dl class="tna-dl-chips tna-dl-chips--plain">
+            <dt>Published</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                <i class="fa-solid fa-calendar"></i>
+                2014
+              </span>
+            </dd>
+            <dt>Author</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                <i class="fa-solid fa-user"></i>
+                James
+              </a>
+            </dd>
+            <dt>Category</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                Research
+              </a>
+            </dd>
+            <dt>Comments</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                3 comments
+              </span>
+            </dd>
+          </dl>
           ${ErrorSummary({
             params: {
               title: "Error",

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

@@ -389,26 +389,62 @@ const Template = ({ theme, accent }) => {
           <h2 class="tna-heading-l">
             Categories
           </h2>
-          <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">
-                <i class="fa-solid fa-heart" aria-hidden="true"></i>
-                Chip 2
+          <dl class="tna-dl-chips">
+            <dt>Published</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                <i class="fa-solid fa-calendar"></i>
+                2014
+              </span>
+            </dd>
+            <dt>Author</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                <i class="fa-solid fa-user"></i>
+                James
               </a>
-            </li>
-            <li class="tna-chip-list__item">
-              <a href="#" class="tna-chip tna-chip--plain">Chip 3</a>
-            </li>
-            <li class="tna-chip-list__item">
-              <a href="#" class="tna-chip tna-chip--plain">
-                <i class="fa-solid fa-heart" aria-hidden="true"></i>
-                Chip 4
+            </dd>
+            <dt>Category</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                Research
               </a>
-            </li>
-          </ul>
+            </dd>
+            <dt>Comments</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                3 comments
+              </span>
+            </dd>
+          </dl>
+          <dl class="tna-dl-chips tna-dl-chips--plain">
+            <dt>Published</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                <i class="fa-solid fa-calendar"></i>
+                2014
+              </span>
+            </dd>
+            <dt>Author</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                <i class="fa-solid fa-user"></i>
+                James
+              </a>
+            </dd>
+            <dt>Category</dt>
+            <dd>
+              <a class="tna-dl-chips__item">
+                Research
+              </a>
+            </dd>
+            <dt>Comments</dt>
+            <dd>
+              <span class="tna-dl-chips__item">
+                3 comments
+              </span>
+            </dd>
+          </dl>
           ${Warning({
             params: {
               body: "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",

package/nationalarchives/stories/utilities/lists/lists.stories.js

@@ -9,8 +9,8 @@ export default {
   argTypes,
 };
 
-const UnorderedListTemplate = ({ items, plain, classes }) =>
-  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""} ${classes}">${items.reduce(
+const UnorderedListTemplate = ({ items, style, classes = "" }) =>
+  `<ul class="tna-ul${style ? ` tna-ul--${style}` : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ul>`;
@@ -27,11 +27,19 @@ UnorderedListPlain.parameters = {
 };
 UnorderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
-  plain: true,
+  style: "plain",
+};
+export const UnorderedListDashed = UnorderedListTemplate.bind({});
+UnorderedListDashed.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+UnorderedListDashed.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  style: "dashed",
 };
 
-const OrderedListTemplate = ({ items, plain, classes }) =>
-  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""} ${classes}">${items.reduce(
+const OrderedListTemplate = ({ items, style, classes = "" }) =>
+  `<ol class="tna-ol${style ? ` tna-ol--${style}` : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ol>`;
@@ -48,10 +56,26 @@ OrderedListPlain.parameters = {
 };
 OrderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
-  plain: true,
+  style: "plain",
+};
+export const OrderedListDashed = OrderedListTemplate.bind({});
+OrderedListDashed.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OrderedListDashed.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  style: "dashed",
+};
+export const OrderedListNested = OrderedListTemplate.bind({});
+OrderedListNested.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OrderedListNested.args = {
+  items: ["Alpha", "Beta", "Gamma", "Delta"],
+  style: "dashed",
 };
 
-const DescriptionListTemplate = ({ items, plain, classes }) =>
+const DescriptionListTemplate = ({ items, plain, classes = "" }) =>
   `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
     items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
   } ${classes}">${items.reduce(
@@ -162,24 +186,27 @@ ComplexDescriptionList.args = {
   ],
 };
 
-const ChipListTemplate = ({ items, plain, classes }) =>
-  `<ul class="tna-chip-list ${classes}">${items.reduce(
-    (list, item) => `${list}<li class="tna-chip-list__item">
-      <span class="tna-chip${plain ? " tna-chip--plain" : ""}">
-        ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
+const ChipListTemplate = ({ items, plain, classes = "" }) =>
+  `<dl class="tna-dl-chips${plain ? " tna-dl-chips--plain" : ""} ${classes}">${items.reduce(
+    (list, item) => `${list}
+    <dt>${item.title}</dt>
+    <dd>
+      <${item.href ? "a" : "span"} class="tna-dl-chips__item">
+        ${item.icon ? `<i class="fa-solid fa-${item.icon}" aria-hidden="true"></i>` : ""}
         ${item.text}
-      </span>
-    </li>`,
+      </${item.href ? "a" : "span"}>
+    </dd>`,
     "",
-  )}</ul>`;
+  )}</dl>`;
 export const ChipList = ChipListTemplate.bind({});
 ChipList.parameters = {
   chromatic: { disableSnapshot: true },
 };
 ChipList.args = {
   items: [
-    { text: "Alpha", icon: "heart" },
-    { text: "Beta" },
-    { text: "Gamma" },
+    { title: "Published", text: "Saturday 28 June 2014", icon: "calendar" },
+    { title: "Author", text: "James Cronan", icon: "user", href: "#" },
+    { title: "Category", text: "Records and research", href: "#" },
+    { title: "Comments", text: "3 comments" },
   ],
 };