@nationalarchives/frontend 0.1.58 → 0.1.60

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");
 
@@ -351,6 +353,8 @@
   --accent-link-visited: #{colour.brand-colour("white")} !important;
   --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
   --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
+  --button-background: #{colour.brand-colour("black")} !important;
+  --button-text: #{colour.brand-colour("white")} !important;
   --button-accent-text: #{colour.brand-colour("white")} !important;
 }
 

package/nationalarchives/tools/_typography.scss

@@ -3,10 +3,15 @@
 @use "colour";
 @use "media";
 
-@mixin relative-font-size($font-size-px) {
+@mixin font-size($font-size-px) {
   font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;
 }
 
+@mixin relative-font-size($font-size-px) {
+  @warn "relative-font-size() will soon be deprecated in favour of font-size().";
+  @include font-size($font-size-px);
+}
+
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
@@ -49,7 +54,7 @@
 
 @mixin detail-font-small {
   @include detail-font;
-  @include relative-font-size(14);
+  @include font-size(14);
   line-height: 1.1;
   text-transform: uppercase;
 }
@@ -72,30 +77,30 @@
   $all-identical: $font-size-default == $font-size-medium and
     $medium-small-and-tiny-identical and $small-and-tiny-identical;
   line-height: $line-height;
-  @include relative-font-size($font-size-default);
+  @include font-size($font-size-default);
 
   @if $all-identical != true {
     @if $medium-small-and-tiny-identical != true {
       @include media.on-medium {
-        @include relative-font-size($font-size-medium);
+        @include font-size($font-size-medium);
       }
 
       @if $small-and-tiny-identical != true {
         @include media.on-small {
-          @include relative-font-size($font-size-small);
+          @include font-size($font-size-small);
         }
 
         @include media.on-tiny {
-          @include relative-font-size($font-size-tiny);
+          @include font-size($font-size-tiny);
         }
       } @else {
         @include media.on-mobile {
-          @include relative-font-size($font-size-small);
+          @include font-size($font-size-small);
         }
       }
     } @else {
       @include media.on-smaller-than-large {
-        @include relative-font-size($font-size-medium);
+        @include font-size($font-size-medium);
       }
     }
   }

package/nationalarchives/utilities/_forms.scss

@@ -86,7 +86,7 @@ select {
   &__hint {
     margin-top: 0;
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
     @include colour.colour-font("font-light");
   }
 

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/utilities/_tables.scss

@@ -19,7 +19,7 @@
 
     caption-side: bottom;
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
   }
 
   &__head {

package/nationalarchives/utilities/_typography.scss

@@ -19,13 +19,11 @@
 
 .tna-template__body {
   color: inherit;
-  @include typography.relative-font-size(typographyVars.$body-font-size-px);
+  @include typography.font-size(typographyVars.$body-font-size-px);
   line-height: typographyVars.$body-line-height;
 
   @include media.on-mobile {
-    @include typography.relative-font-size(
-      typographyVars.$body-font-size-px-mobile
-    );
+    @include typography.font-size(typographyVars.$body-font-size-px-mobile);
   }
 }
 
@@ -68,9 +66,7 @@ a {
 }
 
 small {
-  @include typography.relative-font-size(
-    typographyVars.$body-font-size-px * 0.85
-  );
+  @include typography.font-size(typographyVars.$body-font-size-px * 0.85);
 }
 
 %chip {
@@ -376,7 +372,7 @@ small {
   &__citation {
     margin-top: spacing.space(1);
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
 
     &::before {
       content: "\2014" " ";
@@ -394,11 +390,11 @@ small {
 .tna-large-paragraph {
   @include spacing.space-above;
 
-  @include typography.relative-font-size(22);
+  @include typography.font-size(22);
   @include colour.colour-font("font-dark");
 
   @include media.on-mobile {
-    @include typography.relative-font-size(20);
+    @include typography.font-size(20);
   }
 }
 
@@ -407,11 +403,11 @@ small {
 
   @include typography.detail-font;
   @include colour.colour-font("font-dark");
-  @include typography.relative-font-size(30);
+  @include typography.font-size(30);
   line-height: math.div(50, 30);
 
   @include media.on-mobile {
-    @include typography.relative-font-size(24);
+    @include typography.font-size(24);
     line-height: 2;
   }
 
@@ -425,6 +421,6 @@ small {
   }
 
   &--small {
-    @include typography.relative-font-size(24);
+    @include typography.font-size(24);
   }
 }

package/nationalarchives/variables/_a11y.scss

@@ -1,2 +1,3 @@
 $focus-outline-width: 5px !default;
 $focus-outline-offset: 2px !default;
+$focus-outline-padding: $focus-outline-width + $focus-outline-offset;

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.60",
   "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.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/html": "^8.1.10",
+    "@storybook/html-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/test-runner": "^0.18.2",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
@@ -73,10 +73,10 @@
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
-    "sass": "^1.77.0",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.10",
     "style-loader": "^4.0.0",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.0.0",