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

…feature/hero-cards
nationalarchives · Dec 6, 2023 · 44c0c91 · 44c0c91
2 parents d206ed1 + 4ae0d38
commit 44c0c91
Show file tree

Hide file tree

Showing 148 changed files with 12,855 additions and 9,710 deletions.
diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml
@@ -38,7 +38,10 @@ runs:
         echo -e "{% from \"nationalarchives/components/breadcrumbs/macro.njk\" import tnaBreadcrumbs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/button/macro.njk\" import tnaButton %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/card/macro.njk\" import tnaCard %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/checkboxes/macro.njk\" import tnaCheckboxes %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -51,17 +54,25 @@ runs:
         echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaPagination %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/radios/macro.njk\" import tnaRadios %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/sensitive-image/macro.njk\" import tnaSensitiveImage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/search-field/macro.njk\" import tnaSearchField %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
-        echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
+        echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/text-input/macro.njk\" import tnaTextInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/textarea/macro.njk\" import tnaTextarea %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
       shell: bash
     - name: Add components to template
       run: >
         echo "\n{% block bodyEnd %}" >> prototype/app/views/index.html &&
         echo "{{ tnaBreadcrumbs({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaButton({text:\"I am a button\",url:\"#\"}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaCheckboxes({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
@@ -74,9 +85,14 @@ runs:
         echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaTextInput({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaTextarea({}) }}" >> prototype/app/views/index.html &&
         echo "{% endblock %}" >> prototype/app/views/index.html
       shell: bash
     - name: Run prototype

diff --git a/.github/actions/tests/action.yml b/.github/actions/tests/action.yml
@@ -13,6 +13,9 @@ runs:
     - name: Install dependencies
       run: npm ci
       shell: bash
+    - name: Validate HTML
+      run: mkdir temp && npm run validatehtml
+      shell: bash
     - name: Build Storybook
       run: npm run build
       shell: bash

diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,5 @@ storybook
 build-storybook.log
 chromatic.config.json
 chromatic.log
-RELEASE_NOTES.txt
+RELEASE_NOTES.txt
+temp
diff --git a/.htmlvalidate.json b/.htmlvalidate.json
@@ -0,0 +1,12 @@
+{
+  "extends": ["html-validate:recommended"],
+
+  "rules": {
+    "close-order": "error",
+    "form-dup-name": 0,
+    "no-inline-style": 0,
+    "no-redundant-role": 0,
+    "no-trailing-whitespace": 0,
+    "void-style": 0
+  }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,7 +2,6 @@ import "../src/nationalarchives/all.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 import Cookies from "../src/nationalarchives/lib/cookies.mjs";
-// import isChromatic from "chromatic/isChromatic";
 
 document.documentElement.classList.add(
   "tna-template",
@@ -14,9 +13,7 @@ if (window.self !== window.top) {
 document.body.classList.add("tna-template__body");
 
 export const parameters = {
-  actions: {
-    // disable: true,
-  },
+  actions: {},
   viewport: { viewports: customViewports },
   options: { showPanel: true },
   a11y: {

diff --git a/.storybook/storybook.scss b/.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";
 
@@ -37,6 +40,27 @@
   }
 }
 
+#storybook-docs {
+  div.docs-story {
+    background-position:
+      16px 16px,
+      16px 16px,
+      16px 16px,
+      16px 16px !important;
+
+    > div {
+      margin: 0;
+      padding: 1rem;
+
+      .innerZoomElementWrapper {
+        > * {
+          border: none !important;
+        }
+      }
+    }
+  }
+}
+
 .sb-story.sb-unstyled {
   @include colour.colour-css-vars;
 
@@ -141,7 +165,105 @@
     padding-left: 0.5rem;
 
     @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-list {
+    margin-top: 1rem;
+
+    flex-wrap: nowrap;
+  }
+
+  .fa-solid {
+    // margin-left: 0.5rem;
+
+    &.light-icon {
+      @include colour.colour-font("icon-light", true);
+    }
+  }
+
+  .tna-button-group {
+    margin-top: 1rem;
+
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+  }
+
+  .tna-pagination {
+    margin-top: 1rem;
+  }
+
+  .dark-text {
+    @include colour.colour-font("font-dark", true);
+  }
 
-    // @include colour.colour-border("keyline", 1px, solid, top);
+  .light-text {
+    @include colour.colour-font("font-light", true);
   }
 }
diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
@@ -65,7 +65,7 @@ const { injectAxe, checkA11y } = require("axe-playwright");
 const DEFAULT_VP_SIZE = { width: 1280, height: 720 };
 
 module.exports = {
-  async preRender(page, story) {
+  async preVisit(page, story) {
     const context = await getStoryContext(page, story);
     const vpName = context.parameters?.viewport?.defaultViewport;
     const vpParams = customViewports[vpName];
@@ -85,7 +85,7 @@ module.exports = {
     }
     await injectAxe(page);
   },
-  async postRender(page, story) {
+  async postVisit(page) {
     await checkA11y(page, "#storybook-root", a11yConfig, "v2");
   },
 };
diff --git a/.storybook/viewports.js b/.storybook/viewports.js
@@ -1,47 +1,5 @@
 export const customViewports = {
   // ...MINIMAL_VIEWPORTS,
-  // largeMin: {
-  //   name: "Smallest large device",
-  //   styles: {
-  //     width: "1025px",
-  //     height: "800px",
-  //   },
-  // },
-  // mediumMax: {
-  //   name: "Largest medium device",
-  //   styles: {
-  //     width: "1024px",
-  //     height: "800px",
-  //   },
-  // },
-  // mediumMin: {
-  //   name: "Smallest medium device",
-  //   styles: {
-  //     width: "769px",
-  //     height: "800px",
-  //   },
-  // },
-  // smallMax: {
-  //   name: "Largest small device",
-  //   styles: {
-  //     width: "768px",
-  //     height: "800px",
-  //   },
-  // },
-  // smallMin: {
-  //   name: "Smallest small device",
-  //   styles: {
-  //     width: "481px",
-  //     height: "800px",
-  //   },
-  // },
-  // tinyMax: {
-  //   name: "Largest tiny device",
-  //   styles: {
-  //     width: "480px",
-  //     height: "800px",
-  //   },
-  // },
   medium: {
     name: "Medium device",
     styles: {