Search components (#58)

* Initial commit of form and search elements

* Pure CSS checkboxes, button tweaks

* Use button macro inside other components

* Fix test prototype kit action

* Move "Next" arrow in pagination to the end

* Remove dead areas on checkboxes/radios, add colour

* Additional styling, small radios option

* Allow preselected radio and checkboxes

* Switch checkboxes to inverted on selection

* Add textarea, add more fields to text-input

* Tweak Storybook doc styles

* Replace example profile with more reliable source

* Add more fields to textarea

* Fix spelling in CHANGELOG

* Change error colour

* Remove search-view

* Basic search field styling

* Fix tests

* More updates to form inputs

* Add date-search, fix missing properties

* Update CHANGELOG.md

* Inline form elements

* Further updates to form element structure

* Fix small browser bugs

* Update deps

* Tweak search field

* Remove loads of comments

* Fix small tab JS error

* Add comment

* Add date input coomponent

* Fix lint and test issues

* Update macro options and templates

* Add button group to footer subscribe button

.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

.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: {

.storybook/storybook.scss

@@ -40,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;
 
@@ -144,8 +165,6 @@
     padding-left: 0.5rem;
 
     @include colour.colour-background("background-tint");
-
-    // @include colour.colour-border("keyline", 1px, solid, top);
   }
 }
 

.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");
   },
 };

.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: {

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Form element components have been added: checkboxes, date input, date search, radios, search field, select, text input and textarea
 - High contrast support for chip lists with icons
 - Allow custom cookie path to be passed to cookie banner
 - Index grids can have text/body as well as a title
@@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improvements to high contrast modes
 - Link colours changed for better contrast
 - Index grid heading options have been flattened to match other components
+- Pagination arrows switched from SVGs to Font Awesome icons
 
 ### Deprecated
 ### Removed
@@ -58,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed CSS to counter conflicting GOV.UK paragraph styling
 - Transitions removed from most elements
 - `loadScriptsOnAccept` option for cookie banner removed in favour of callback events
+- Removed the `accent-color` property for form elements
 
 ### Fixed
 
@@ -168,7 +171,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `<nav>` elements in the footer now have a `role="navigation"` attribute
 - The default cookie policies are now `essential`, `usage` and `settings`
 - The SCSS mixin `colour-outline` now accepts optional width and style properties
-- In coloured blocks, the custom CSS property `--background` now gets explictly replaced with `--accent-background`, `--contrast-background` or `--accent-background-light`
+- In coloured blocks, the custom CSS property `--background` now gets explicitly replaced with `--accent-background`, `--contrast-background` or `--accent-background-light`
 - `typography.$base-font-size-px` is now `typography.$relative-1rem-px`
 - `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans
 - Card heading size defaults to `s`

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  modulePathIgnorePatterns: ["/package"],
   testEnvironment: "jsdom",
   transform: {
     "\\.m?js$": "babel-jest",