@nationalarchives/frontend 0.1.27-prerelease → 0.1.29-prerelease

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

@@ -819,7 +819,7 @@ const Template = ({ theme, accent }) => {
           <div class="tna-column tna-column--full">
             ${Pagination({
               params: {
-                landmarkLabel: "My dogs 2 results",
+                landmarkLabel: "My dogs 3 results",
                 previous: {
                   href: "#",
                 },
@@ -903,7 +903,7 @@ const Template = ({ theme, accent }) => {
           <div class="tna-column tna-column--full">
             ${Pagination({
               params: {
-                landmarkLabel: "My dogs 3 results",
+                landmarkLabel: "My dogs 4 results",
                 previous: {
                   href: "#",
                 },
@@ -987,7 +987,7 @@ const Template = ({ theme, accent }) => {
           <div class="tna-column tna-column--full">
             ${Pagination({
               params: {
-                landmarkLabel: "My dogs 4 results",
+                landmarkLabel: "My dogs 5 results",
                 previous: {
                   href: "#",
                 },
@@ -1395,9 +1395,9 @@ 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></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>
+          <p><span class="tna-chip">Chip</span> <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
           <div class="tna-button-group">
             ${Button({
               params: {
@@ -1419,45 +1419,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/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/_forms.scss

@@ -44,6 +44,7 @@
   }
 
   &__legend {
+    margin-bottom: 0.5rem;
   }
 
   &__heading {

package/nationalarchives/utilities/_typography.scss

@@ -107,15 +107,15 @@ a {
     }
   }
 
-  @include colour.on-high-contrast {
-    &:active {
-      box-shadow: none;
-    }
+  // @include colour.on-high-contrast {
+  //   &:active {
+  //     box-shadow: none;
+  //   }
 
-    &:hover:not(:focus) {
-      box-shadow: 0 0 0 0.3125rem var(--focus-outline);
-    }
-  }
+  //   &:hover:not(:focus) {
+  //     box-shadow: 0 0 0 0.3125rem var(--focus-outline);
+  //   }
+  // }
 
   // &[target="_blank"]:not([title*="opens in a new"]) {
   //   &::after {

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.27-prerelease",
+  "version": "0.1.29-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -9,7 +9,8 @@
     "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
-    "package:scripts": "webpack"
+    "package:scripts": "webpack",
+    "validatehtml": "node tasks/generate-fixture-html.js && html-validate temp"
   },
   "repository": {
     "type": "git",
@@ -64,6 +65,7 @@
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.15",
     "glob": "^10.3.10",
+    "html-validate": "^8.7.3",
     "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",