@nationalarchives/frontend 0.1.56 → 0.1.58

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

@@ -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.",
@@ -717,7 +753,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 1",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -811,7 +847,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 2",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -905,7 +941,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 3",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -999,7 +1035,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 4",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -1093,7 +1129,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 5",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{

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

@@ -162,24 +162,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" },
   ],
 };