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

…feature/search-field-border-and-tinted-background

.github/actions/prototype-kit-test/action.yml

@@ -39,6 +39,7 @@ runs:
         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/compound-filters/macro.njk\" import tnaCompoundFilters %}\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 &&
@@ -70,6 +71,7 @@ runs:
         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 "{{ tnaCompoundFilters({}) }}" >> 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 &&

.github/actions/tests/action.yml

@@ -17,7 +17,7 @@ runs:
       run: mkdir temp && npm run validatehtml
       shell: bash
     - name: Build Storybook
-      run: npm run build
+      run: npm run build --test
       shell: bash
     - name: Start Storybook
       run: npm start &

.storybook/preview-head.html

@@ -28,38 +28,3 @@
     document.addEventListener("DOMContentLoaded", removeAllClasses, false);
   }
 </script>
-<!-- <link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Bold.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/RobotoMono-Regular.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/fa-solid-900.woff2"
-  as="font"
-  type="font/woff2"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/fa-brands-400.woff2"
-  as="font"
-  type="font/woff2"
-  crossorigin="anonymous"
-/> -->

.storybook/preview.js

@@ -1,10 +1,12 @@
 import "../src/nationalarchives/all.scss";
+import "../src/nationalarchives/font-awesome.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 import Cookies from "../src/nationalarchives/lib/cookies.mjs";
 
 document.documentElement.classList.add(
   "tna-template",
+  "tna-template--light-theme",
   "tna-template--yellow-accent",
 );
 if (window.self !== window.top) {
@@ -42,13 +44,3 @@ export const decorators = [
     return Story();
   },
 ];
-
-// const fontLoader = async () => ({
-//   fonts: await Promise.all([
-//     document.fonts.load("normal 1em Open Sans"),
-//     document.fonts.load("bold 1em Open Sans"),
-//     document.fonts.load("normal 1em Roboto Mono"),
-//   ]),
-// });
-
-// export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];

.storybook/storybook.scss

@@ -155,10 +155,6 @@
   max-width: 480px;
 }
 
-.tna-picture--demo {
-  // max-width: 480px;
-}
-
 .tna-spacing-demo {
   p {
     padding-right: 0.5rem;
@@ -259,6 +255,12 @@
     flex-wrap: nowrap;
   }
 
+  .tna-form__group-contents,
+  .tna-form__heading {
+    font-size: 0;
+    line-height: 0;
+  }
+
   .tna-pagination {
     margin-top: 1rem;
   }

.storybook/test-runner.js

@@ -1,61 +1,3 @@
-// https://storybook.js.org/addons/@storybook/test-runner
-
-// const { toMatchImageSnapshot } = require("jest-image-snapshot");
-// const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
-
-// module.exports = {
-//   setup() {
-//     expect.extend({ toMatchImageSnapshot });
-//   },
-//   async postRender(page, context) {
-//     // the #root element wraps the story. From Storybook 7.0 onwards, the selector should be #storybook-root
-//     const elementHandler = await page.$("#storybook-root");
-//     const innerHTML = await elementHandler.innerHTML();
-//     expect(innerHTML).toMatchSnapshot();
-
-//     // If you want to take screenshot of multiple browsers, use
-//     // page.context().browser().browserType().name() to get the browser name to prefix the file name
-//     const image = await page.screenshot();
-//     expect(image).toMatchImageSnapshot({
-//       customSnapshotsDir,
-//       customSnapshotIdentifier: context.id,
-//     });
-//   },
-// };
-
-// const { getStoryContext } = require('@storybook/test-runner');
-// const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
-
-// module.exports = {
-//   async preRender(page, context) {
-//     await injectAxe(page);
-//   },
-//   async postRender(page, context) {
-//     // Get entire context of a story, including parameters, args, argTypes, etc.
-//     const storyContext = await getStoryContext(page, context);
-
-//     // Do not test a11y for stories that disable a11y
-//     if (storyContext.parameters?.a11y?.disable) {
-//       return;
-//     }
-
-//     // Apply story-level a11y rules
-//     await configureAxe(page, {
-//       rules: storyContext.parameters?.a11y?.config?.rules,
-//     });
-
-//     // from Storybook 7.0 onwards, the selector should be #storybook-root
-//     await checkA11y(page, '#root', {
-//       detailedReport: true,
-//       detailedReportOptions: {
-//         html: true,
-//       },
-//       // pass axe options defined in @storybook/addon-a11y
-//       axeOptions: storyContext.parameters?.a11y?.options,
-//     });
-//   },
-// };
-
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 

.storybook/viewports.js

@@ -1,5 +1,4 @@
 export const customViewports = {
-  // ...MINIMAL_VIEWPORTS,
   medium: {
     name: "Medium device",
     styles: {

CHANGELOG.md

@@ -5,14 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.32...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.35...HEAD)
 
 ### Added
 ### Changed
 
 - The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
 - The card style of `boxed` has been changed to `contrast` in line with other components
 - The background tint colour on the light theme is slightly darker for better contrast with the page background
+- Set smaller minimum width for search field inputs
+- Added more space between the text and chevron in a heading link
+- Split out Font Awesome into a separate CSS file
+- Change the default `htmlLang` from `en-GB` to `en`
 
 ### Deprecated
 ### Removed
@@ -22,6 +26,48 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.1.35](https://github.com/nationalarchives/tna-frontend/compare/v0.1.34...v0.1.35) - 2024-01-16
+
+### Added
+
+- More icon sizes added
+
+### Changed
+
+- Images on horizontal cards are now at least a 3:2 aspect ratio
+- Icon assets have been renamed from `apple-touch-icon-xxx.png` to `icon-xxx.png`
+
+## [0.1.34](https://github.com/nationalarchives/tna-frontend/compare/v0.1.33...v0.1.34) - 2024-01-10
+
+### Added
+
+- Base template can now accept `htmlAttributes`
+- Compound filters can be used to show currently selected search filters
+
+### Changed
+
+- Changed `attributes` to `formGroupAttributes` and `classes` to `formClasses` on checkboxes and radios - `attributes` and `classes` now get applied to each checkbox and radio element
+
+### Fixed
+
+- Fixed `href` property of pagination `previous` and `next` links
+
+## [0.1.33](https://github.com/nationalarchives/tna-frontend/compare/v0.1.32...v0.1.33) - 2023-12-29
+
+### Added
+
+- Added italic version of Open Sans
+
+### Changed
+
+- The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
+- The card style of `boxed` has been changed to `contrast` in line with other components
+- Changed `tna-select--plain` to `tna-select--styled`
+- Updated button styles - icon sizes, padding and gaps on small and icon-only buttons
+- Removed slash on void elements (updating `<hr />` to `<hr>`)
+- Italicise picture element captions to distinguish from regular text
+- Use `text-wrap: pretty;` for headings
+
 ## [0.1.32](https://github.com/nationalarchives/tna-frontend/compare/v0.1.31...v0.1.32) - 2023-12-18
 
 ### Added