@nationalarchives/frontend 0.1.29-prerelease → 0.1.31

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

@@ -385,10 +385,19 @@ const Template = ({ theme, accent }) => {
               <a href="#" class="tna-chip">Chip 1</a>
             </li>
             <li class="tna-chip-list__item">
-              <a href="#" class="tna-chip">Chip 2</a>
+              <a href="#" class="tna-chip">
+                <i class="fa-solid fa-heart"></i>
+                Chip 2
+              </a>
             </li>
             <li class="tna-chip-list__item">
-              <a href="#" class="tna-chip">Chip 3</a>
+              <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"></i>
+                Chip 4
+              </a>
             </li>
           </ul>
           ${Message({
@@ -549,8 +558,18 @@ const Template = ({ theme, accent }) => {
               width: 499,
               height: 333,
               caption: "<p>This is a pretty image</p>",
-              transcript: "<p>Lorem ipsum transcript</p>",
-              translation: "<p>Lorem ipsum translation</p>",
+              information: [
+                {
+                  id: "transcript",
+                  title: "Transcript",
+                  body: "<p>Lorem ipsum transcript</p>",
+                },
+                {
+                  id: "translation",
+                  title: "Translation",
+                  body: "<p>Lorem ipsum translation</p>",
+                },
+              ],
               classes: "tna-picture--demo",
             },
           })}
@@ -1395,9 +1414,27 @@ const CombinationsTemplate = () => {
         `${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}">
-          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong></p>
+          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
           <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
-          <p><span class="tna-chip">Chip</span> <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
+          <!--
+          <span class="tna-chip">Chip</span>
+          <a href="#" class="tna-chip">Chip</a>
+          <a href="#" class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</a>
+          <a href="#" class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</a>
+          <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
+          <span class="tna-chip tna-chip--plain">Chip</span>
+          -->
+          <ul class="tna-chip-list">
+            <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"></i>Chip</span>
+            </li>
+            <li class="tna-chip-list__item">
+              <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
+            </li>
+          </ul>
           <div class="tna-button-group">
             ${Button({
               params: {

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

@@ -1,6 +1,7 @@
 const argTypes = {
   items: { control: "object" },
   plain: { control: "boolean" },
+  classes: { control: "text" },
 };
 
 export default {
@@ -8,8 +9,8 @@ export default {
   argTypes,
 };
 
-const UnorderedListTemplate = ({ items, plain }) =>
-  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
+const UnorderedListTemplate = ({ items, plain, classes }) =>
+  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ul>`;
@@ -23,8 +24,8 @@ UnorderedListPlain.args = {
   plain: true,
 };
 
-const OrderedListTemplate = ({ items, plain }) =>
-  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
+const OrderedListTemplate = ({ items, plain, classes }) =>
+  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ol>`;
@@ -38,10 +39,10 @@ OrderedListPlain.args = {
   plain: true,
 };
 
-const DescriptionListTemplate = ({ items, plain }) =>
+const DescriptionListTemplate = ({ items, plain, classes }) =>
   `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
     items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
-  }">${items.reduce(
+  } ${classes}">${items.reduce(
     (list, item) => `${list}
     <dt>
       ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
@@ -129,3 +130,22 @@ ComplexDescriptionList.args = {
     { title: "Eta", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
   ],
 };
+
+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>` : ""}
+        ${item.text}
+      </span>
+    </li>`,
+    "",
+  )}</ul>`;
+export const ChipList = ChipListTemplate.bind({});
+ChipList.args = {
+  items: [
+    { text: "Alpha", icon: "heart" },
+    { text: "Beta" },
+    { text: "Gamma" },
+  ],
+};

package/nationalarchives/stories/utilities/typography/typography.mdx

@@ -15,7 +15,8 @@ import * as TypographyStories from './typography.stories';
 ## Heading groups
 
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-<Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+<Canvas of={HeadingGroupStories.HeadingGroupSingleSentence} />
+<Canvas of={HeadingGroupStories.HeadingGroupPlainSupertitle} />
 
 ## General typography
 

package/nationalarchives/tests/cookies.test.js

@@ -356,6 +356,45 @@ describe("No existing cookies", () => {
     cookies2.set(testKey, testValue);
     expect(mockCallback.mock.calls).toHaveLength(3);
   });
+
+  test("Custom policies", async () => {
+    const cookies = new Cookies({ extraPolicies: ["custom"] });
+
+    expect(cookies.policies).toHaveProperty("essential");
+    expect(cookies.policies).toHaveProperty("settings");
+    expect(cookies.policies).toHaveProperty("usage");
+    expect(cookies.policies).toHaveProperty("custom");
+    expect(cookies.policies.custom).toEqual(false);
+    expect(cookies.isPolicyAccepted("custom")).toEqual(false);
+
+    cookies.acceptPolicy("custom");
+    expect(cookies.policies.custom).toEqual(true);
+    expect(cookies.isPolicyAccepted("custom")).toEqual(true);
+
+    cookies.rejectPolicy("custom");
+    expect(cookies.policies.custom).toEqual(false);
+    expect(cookies.isPolicyAccepted("custom")).toEqual(false);
+
+    cookies.acceptAllPolicies();
+    expect(cookies.policies.custom).toEqual(true);
+    expect(cookies.isPolicyAccepted("custom")).toEqual(true);
+
+    cookies.rejectAllPolicies();
+    expect(cookies.policies.custom).toEqual(false);
+    expect(cookies.isPolicyAccepted("custom")).toEqual(false);
+  });
+
+  test("Custom policy key", async () => {
+    const cookies = new Cookies({ policiesKey: ["custom"] });
+
+    expect(cookies.all).not.toHaveProperty("cookies_policy");
+    expect(cookies.all).toHaveProperty("custom");
+
+    expect(cookies.policies.settings).toEqual(false);
+
+    cookies.acceptAllPolicies();
+    expect(cookies.policies.settings).toEqual(true);
+  });
 });
 
 describe("Existing cookies", () => {

package/nationalarchives/utilities/_lists.scss

@@ -29,6 +29,46 @@
   }
 }
 
+@mixin stacked-dl {
+  dt,
+  dd {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  dd {
+    padding-left: 1rem;
+  }
+
+  &.tna-dl--plain {
+    dt {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .fa-solid {
+        margin-top: 0;
+      }
+    }
+
+    dd {
+      margin-left: 0;
+      padding-top: 0;
+    }
+  }
+
+  &:not(.tna-dl--plain) {
+    dt {
+      @include colour.colour-background("background-tint");
+    }
+
+    dd {
+      background: transparent !important;
+
+      margin-left: 0;
+    }
+  }
+}
+
 .tna-dl {
   margin: 1rem 0 0;
 
@@ -53,11 +93,16 @@
 
   &--plain {
     dt {
+      padding-top: 0;
+      // padding-bottom: 0;
       padding-left: 0;
     }
 
     dd {
+      // margin-bottom: 0.5rem;
+      padding-top: 0;
       padding-right: 0;
+      // padding-bottom: 0;
     }
   }
 
@@ -101,6 +146,8 @@
       padding-left: 2rem !important;
 
       .fa-solid {
+        margin-top: -0.25rem;
+
         left: 0;
       }
     }
@@ -132,36 +179,12 @@
     }
   }
 
-  @include media.on-tiny {
-    dt,
-    dd {
-      width: 100%;
-      margin-left: 0;
-    }
-
-    dd {
-      padding-left: 1rem;
-    }
-
-    &--plain {
-      dt {
-        padding-bottom: 0;
-      }
-
-      dd {
-        padding-top: 0;
-      }
-    }
-
-    &:not(&--plain) {
-      dt {
-        @include colour.colour-background("background-tint");
-      }
+  &--stacked {
+    @include stacked-dl;
+  }
 
-      dd {
-        background: transparent !important;
-      }
-    }
+  @include media.on-tiny {
+    @include stacked-dl;
   }
 
   @include colour.on-high-contrast-and-forced-colours {

package/nationalarchives/utilities/_typography.scss

@@ -41,7 +41,6 @@
     // font-display: swap;
   }
 } @else {
-  // @import "https://use.typekit.net/hkj3kuz.css";
   @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
@@ -52,6 +51,7 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
+  text-size-adjust: none;
   direction: ltr;
 }
 
@@ -107,16 +107,6 @@ a {
     }
   }
 
-  // @include colour.on-high-contrast {
-  //   &:active {
-  //     box-shadow: none;
-  //   }
-
-  //   &:hover:not(:focus) {
-  //     box-shadow: 0 0 0 0.3125rem var(--focus-outline);
-  //   }
-  // }
-
   // &[target="_blank"]:not([title*="opens in a new"]) {
   //   &::after {
   //     content: "" / " (opens in a new window)"
@@ -130,59 +120,73 @@ small {
   );
 }
 
-%chip {
+%chip-base {
   max-width: max-content;
   padding: 0.125em 0.25rem;
 
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 
-  @include colour.colour-font("font-dark");
+  @include colour.colour-font("font-base");
   @include typography.detail-font-small;
   line-height: 1;
+}
+
+%chip-plain {
+  padding: 0;
+
+  background-color: transparent;
 
+  border: none;
+}
+
+%chip-accent {
   @include colour.accent;
 
   @include colour.colour-border("accent-background", 0.125rem);
 
-  .tna-background-accent &:not(#{&}--plain) {
-    @include colour.plain;
+  .tna-background-accent & {
+    @include colour.contrast;
 
-    @include colour.colour-border("background");
+    @include colour.colour-border("contrast-background");
   }
 }
 
 .tna-chip {
-  @extend %chip;
+  @extend %chip-base;
 
   &--plain {
-    padding: 0;
+    @extend %chip-plain;
+  }
 
-    color: inherit;
+  &:not(#{&}--plain) {
+    @extend %chip-accent;
+  }
 
-    background-color: transparent;
+  .fa-solid,
+  .fa-brand {
+    @include colour.colour-font("icon-light");
+
+    @include colour.on-high-contrast {
+      padding-right: 0.5rem;
 
-    border: none;
+      color: inherit;
+
+      @include colour.colour-border("keyline-dark", 1px, solid, right);
+    }
   }
 
   @at-root #{selector.unify("a", &)} {
     text-decoration: none;
 
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-dark");
-    }
-
     &:hover {
       @include typography.interacted-text-decoration;
     }
 
-    &--plain {
-      &,
-      &:link,
-      &:visited {
-        color: inherit;
-      }
+    .fa-solid,
+    .fa-brand {
+      color: inherit;
     }
   }
 }
@@ -199,50 +203,6 @@ small {
   &__item {
     display: flex;
     align-items: center;
-
-    .tna-chip {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .fa-solid,
-    .fa-brand {
-      @include colour.colour-font("icon-light");
-    }
-
-    @include colour.on-high-contrast {
-      @include colour.colour-border("keyline-dark", 1px, solid);
-
-      .fa-solid,
-      .fa-brand {
-        padding: 0.375rem 0.25rem;
-
-        @include colour.colour-font("contrast-font-base");
-
-        @include colour.colour-background("contrast-background");
-
-        @include colour.colour-border("keyline-dark", 1px, solid, right);
-      }
-
-      .tna-chip {
-        &:has(.fa-solid, .fa-brand) {
-          padding-left: 0;
-
-          .fa-solid,
-          .fa-brand {
-            margin-right: 0.5rem;
-          }
-        }
-      }
-    }
-  }
-
-  &--accent {
-    .fa-solid,
-    .fa-brand {
-      @include colour.colour-font("accent-background");
-    }
   }
 }
 
@@ -253,8 +213,7 @@ small {
     a {
       display: inline-block;
 
-      text-wrap: balance;
-      // text-decoration-thickness: .1em;
+      // text-wrap: balance;
 
       &::after {
         padding-left: 0.25rem;
@@ -266,13 +225,11 @@ small {
         content: "\203A";
       }
 
-      &:hover {
-        // text-decoration-thickness: .15em;
-
-        &::after {
-          padding-left: 0.5rem;
-        }
-      }
+      // &:hover {
+      //   &::after {
+      //     padding-left: 0.5rem;
+      //   }
+      // }
     }
   }
 }
@@ -376,16 +333,14 @@ small {
   &__supertitle {
     margin: 0 0 0.25rem;
 
-    @extend %chip;
+    @extend %chip-base;
 
     &--plain {
-      padding: 0;
-
-      color: inherit;
-
-      background-color: transparent;
+      @extend %chip-plain;
+    }
 
-      border: none;
+    &:not(#{&}--plain) {
+      @extend %chip-accent;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.29-prerelease",
+  "version": "0.1.31",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -34,10 +34,6 @@
     "./nationalarchives/": "./nationalarchives/"
   },
   "sass": "nationalarchives/all.scss",
-  "engines": {
-    "npm": "9.x",
-    "node": "18.x"
-  },
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
   "devDependencies": {
     "@babel/core": "^7.23.2",