@nationalarchives/frontend 0.1.28-prerelease → 0.1.30

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({
@@ -1395,9 +1404,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>Text</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>
+          <!--
           <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: {
@@ -1419,45 +1446,7 @@ const CombinationsTemplate = () => {
                 plain: true,
               },
             })}
-            <!--${Button({
-              params: {
-                text: "Button",
-                accent: true,
-                class: "tna-button--solid-hover",
-              },
-            })}-->
           </div>
-          <!--${Pagination({
-            params: {
-              previous: {
-                href: "#",
-              },
-              items: [
-                {
-                  number: 1,
-                  href: "#",
-                },
-                {
-                  ellipsis: true,
-                },
-                {
-                  number: 7,
-                  current: true,
-                  href: "#",
-                },
-                {
-                  ellipsis: true,
-                },
-                {
-                  number: 42,
-                  href: "#",
-                },
-              ],
-              next: {
-                href: "#",
-              },
-            },
-          })}-->
         </div>
       </div>
     </div>`,

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/tools/_colour.scss

@@ -282,6 +282,7 @@
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
   --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
+  --icon-light: #{map.get(colour.$colour-palette-default, "icon-light")};
   // --link: #{map.get(colour.$colour-palette-default, "link")};
   // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
   --keyline: #{map.get(colour.$colour-palette-default, "keyline")};

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

@@ -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");
-    }
   }
 }
 
@@ -376,16 +336,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/nationalarchives/variables/_colour.scss

@@ -52,7 +52,7 @@ $colour-palette-default: (
   "background-tint": #ededed,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
-  "font-light": hex-to-rgb($base-font, 0.7),
+  "font-light": brand-colour("black", 0.58),
   "icon-light": hex-to-rgb($base-font, 0.45),
   "link": $link-colour,
   "link-visited": $link-colour-visited,
@@ -106,7 +106,7 @@ $colour-palette-dark: map.merge(
     "background-tint": #333,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
-    "font-light": brand-colour("white", 0.5),
+    "font-light": brand-colour("white", 0.51),
     "icon-light": brand-colour("white", 0.35),
     "link": brand-colour("blue"),
     "link-visited": #a8f,
@@ -171,8 +171,6 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
-    "link": #69f,
-    "link-visited": #b9f,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.28-prerelease",
+  "version": "0.1.30",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",