@nationalarchives/frontend 0.1.58 → 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">

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(

package/nationalarchives/tools/_colour.scss

@@ -173,6 +173,7 @@
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
   --accent-list-marker: var(--accent-border);
+  // --accent-list-marker: var(--font-base);
 
   @include colour-background("background");
 
@@ -199,6 +200,7 @@
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
     --accent-list-marker: var(--accent-border);
+    // --accent-list-marker: var(--font-base);
 
     @include colour-background("background");
 
@@ -359,6 +361,8 @@
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
   --accent-border: #{colour.brand-colour("black")} !important;
   --accent-list-marker: #{colour.brand-colour("black")} !important;
+  --button-background: #{colour.brand-colour("light-grey")} !important;
+  --button-text: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }

package/nationalarchives/utilities/_lists.scss

@@ -4,8 +4,7 @@
 @use "../tools/typography";
 @use "../utilities/typography" as typographyUtils;
 
-.tna-ul,
-.tna-ul > li > ul {
+.tna-ul {
   list-style-type: disc;
 }
 
@@ -13,33 +12,35 @@
 .tna-ol {
   margin: spacing.space(1) 0 0;
 
-  > li > ul,
-  > li > ol {
+  padding: 0 0 0 spacing.space(2);
+
+  &:first-child {
     margin-top: 0;
   }
 
-  &,
-  & > li > ul,
-  & > li > ol {
-    padding: 0 0 0 spacing.space(2);
+  &--plain {
+    padding-left: 0;
 
-    &--plain {
-      padding-left: 0;
+    list-style: none;
+  }
 
-      &,
-      & > li > ul {
-        list-style: none;
-      }
-    }
+  & > li > & {
+    padding-left: spacing.space(1);
+  }
 
-    > li::marker {
+  > li {
+    &::marker {
       @include colour.colour-font("accent-list-marker");
-      font-weight: 700;
+      @include typography.main-font-weight-bold;
     }
   }
 
-  &:first-child {
-    margin-top: 0;
+  &--dashed {
+    > li::marker {
+      content: "—  ";
+      @include colour.colour-font("font-light");
+      @include typography.main-font-weight;
+    }
   }
 }
 

package/nationalarchives/variables/_colour.scss

@@ -127,8 +127,6 @@ $colour-palette-dark: map.merge(
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
     "contrast-background": #101112,
-    "contrast-link-visited":
-      map.get($colour-palette-default, "contrast-link-visited"),
     "accent-border": brand-colour("white"),
     "accent-list-marker": brand-colour("white", 0.51),
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -47,16 +47,16 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addon-docs": "^8.0.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-mdx-gfm": "^8.0.10",
-    "@storybook/html": "^8.0.10",
-    "@storybook/html-webpack5": "^8.0.10",
-    "@storybook/test": "^8.0.10",
-    "@storybook/test-runner": "^0.17.0",
+    "@storybook/addon-a11y": "^8.1.8",
+    "@storybook/addon-docs": "^8.1.8",
+    "@storybook/addon-essentials": "^8.1.8",
+    "@storybook/addon-interactions": "^8.1.8",
+    "@storybook/addon-links": "^8.1.8",
+    "@storybook/addon-mdx-gfm": "^8.1.8",
+    "@storybook/html": "^8.1.8",
+    "@storybook/html-webpack5": "^8.1.8",
+    "@storybook/test": "^8.1.8",
+    "@storybook/test-runner": "^0.18.2",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
@@ -76,7 +76,7 @@
     "sass": "^1.77.0",
     "sass-loader": "^14.2.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.8",
     "style-loader": "^4.0.0",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.0.0",