Merge branch 'main' of github.com:nationalarchives/tna-frontend into …

…feature/search-components

.storybook/storybook.scss

@@ -1,5 +1,8 @@
+@use "sass:math";
+
 @use "../src/nationalarchives/tools/colour";
 @use "../src/nationalarchives/tools/media";
+@use "../src/nationalarchives/tools/typography";
 
 @import "https://use.typekit.net/hkj3kuz.css";
 
@@ -164,3 +167,85 @@
     @include colour.colour-background("background-tint");
   }
 }
+
+.tna-colour-contrast-demo {
+  width: 0;
+  max-width: calc(100% - 1px);
+  display: table;
+  table-layout: auto;
+
+  border-top: rgb(0 0 0/0.25) 1px solid;
+  border-left: rgb(0 0 0/0.25) 1px solid;
+
+  &__header {
+    display: table-header-group;
+  }
+
+  &__block {
+    width: #{math.div(100%, 6)};
+    padding: 1rem;
+
+    display: table-cell;
+
+    @include typography.main-font-weight-bold;
+
+    border-right: rgb(0 0 0/0.25) 1px solid;
+    border-bottom: rgb(0 0 0/0.25) 1px solid;
+  }
+
+  &__examples {
+    display: table-row-group;
+  }
+
+  &__theme-accent {
+    display: table-row;
+  }
+
+  &__example {
+    display: table-cell;
+
+    border-right: rgb(0 0 0/0.25) 1px solid;
+    border-bottom: rgb(0 0 0/0.25) 1px solid;
+
+    &:first-child {
+      min-width: 7rem;
+      padding: 1rem;
+
+      @include typography.relative-font-size(14);
+    }
+
+    &-content {
+      height: 100%;
+      padding: 1rem;
+    }
+  }
+
+  &__link {
+    &--visited {
+      @include colour.colour-font("link-visited", true);
+    }
+  }
+
+  .tna-template {
+    min-width: 15.25rem;
+
+    p:not(:first-child) {
+      margin-top: 0.25rem;
+    }
+  }
+
+  .tna-chip {
+    margin: 1rem 0;
+  }
+
+  .tna-button-group {
+    margin-top: 1rem;
+
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+  }
+
+  .tna-pagination {
+    margin-top: 1rem;
+  }
+}

CHANGELOG.md

@@ -18,16 +18,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Card meta information changed to chip list
 - Improvements to high contrast modes
+- Link colours changed for better contrast
 - Index grid heading options have been flattened to match other components
 
 ### Deprecated
 ### Removed
 
 - Removed generic `accent` CSS variable
+- The black theme accent has been removed
 
 ### Fixed
 
 - Multiple line spacing for chip lists fixed
+- Accented chips can now be used on accented backgrounds
 - Index grid can now be used on a contrast background
 
 ### Security

src/nationalarchives/components/button/button.scss

@@ -148,14 +148,20 @@
     }
   }
 
-  &--solid-hover,
-  .tna-background-accent-light &,
-  .tna-background-accent &:not(.tna-button--accent) {
+  &--solid-hover {
     &:not(.tna-button--plain):hover {
+      @include colour.colour-font("font-dark");
+
       @include colour.colour-background("page-background");
     }
   }
 
+  .tna-background-accent & {
+    &:hover {
+      @include colour.colour-font("font-dark");
+    }
+  }
+
   .tna-background-accent &--accent {
     @include colour.plain;
 

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

@@ -33,7 +33,7 @@ const argTypes = {
   },
   accent: {
     control: "radio",
-    options: ["none", "black", "yellow", "pink", "orange", "green", "blue"],
+    options: ["none", "yellow", "pink", "orange", "green", "blue"],
   },
 };
 
@@ -78,19 +78,17 @@ const Template = ({ theme, accent }) => {
               ? "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"
-                : ""
+    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">
     <!--
@@ -263,7 +261,6 @@ const Template = ({ theme, accent }) => {
                     params: {
                       text: "Primary button",
                       href: "#",
-                      classes: "tna-button--solid-hover",
                     },
                   })}
                 </div>
@@ -1336,3 +1333,144 @@ DarkHighContrast.args = {
   theme: "dark high-contrast",
   accent: "pink",
 };
+
+const CombinationsTemplate = () => {
+  const themes = [
+    "tna-template--light-theme",
+    "tna-template--light-theme tna-template--high-contrast-theme",
+    "tna-template--dark-theme",
+    "tna-template--dark-theme tna-template--high-contrast-theme",
+  ];
+
+  const accents = [
+    "",
+    // "tna-template--black-accent",
+    "tna-template--yellow-accent",
+    "tna-template--pink-accent",
+    "tna-template--orange-accent",
+    "tna-template--green-accent",
+    "tna-template--blue-accent",
+  ];
+
+  const blocks = [
+    "",
+    "tna-background-tint",
+    "tna-background-accent-light",
+    "tna-background-accent",
+    "tna-background-contrast",
+  ];
+
+  return `<div class="tna-colour-contrast-demo">
+  <div class="tna-colour-contrast-demo__header">
+    <div class="tna-colour-contrast-demo__block">
+      Blocks
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__block">
+      ${block.replace(/^tna-background-/, "") || "Base"}
+    </div>`,
+      "",
+    )}
+  </div>
+  <div class="tna-colour-contrast-demo__examples">
+  ${themes.reduce(
+    (themeOutput, theme) =>
+      `${themeOutput}${accents.reduce(
+        (
+          accentOutput,
+          accent,
+        ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
+    <div class="tna-colour-contrast-demo__example">
+      <p>Theme: <strong>${theme
+        .replace(/tna-template--/g, "")
+        .replace(/-theme/g, "")}</strong></p>
+      <p>Accent: <strong>${
+        accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
+        "[none]"
+      }</strong></p>
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${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><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>
+          <div class="tna-button-group">
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                accent: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                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>`,
+      "",
+    )}
+  </div>`,
+        "",
+      )}`,
+    "",
+  )}
+  </div>
+</div>`;
+};
+
+export const Combinations = CombinationsTemplate.bind({});
+Combinations.args = {};