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

…feature/optimisations

.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 &&

.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;

.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";
 

CHANGELOG.md

@@ -5,18 +5,47 @@ 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.33...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.35...HEAD)
 
 ### Added
+### Changed
 
-- Base template can now accept `htmlAttributes`
+- 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`
 
-### Changed
 ### Deprecated
 ### Removed
 ### 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

src/nationalarchives/all.scss

@@ -14,6 +14,5 @@
 
 @use "variables";
 @use "tools";
-@use "lib";
 @use "utilities";
 @use "components";

src/nationalarchives/components/_index.scss

@@ -2,6 +2,7 @@
 @use "button";
 @use "card";
 @use "checkboxes";
+@use "compound-filters";
 @use "cookie-banner";
 @use "date-input";
 @use "date-search";

src/nationalarchives/components/card/card.scss

@@ -117,6 +117,8 @@
   }
 
   &--horizontal {
+    aspect-ratio: auto 3/1;
+
     position: relative;
 
     @include media.on-larger-than-mobile {
@@ -127,6 +129,7 @@
 
       .tna-card__image-container {
         height: auto;
+        min-height: 50%;
         margin-bottom: 0;
         padding-bottom: 0;
 

src/nationalarchives/components/card/card.stories.js

@@ -1,5 +1,6 @@
 import Card from "./template.njk";
 import macroOptions from "./macro-options.json";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   supertitle: { control: "text" },
@@ -288,6 +289,44 @@ HorizontalAccent.args = {
   classes: "tna-card--demo",
 };
 
+export const HorizontalMinimal = Template.bind({});
+HorizontalMinimal.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const HorizontalMobile = Template.bind({});
+HorizontalMobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+HorizontalMobile.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 export const Sources = Template.bind({});
 Sources.args = {
   supertitle: "Card supertitle",

src/nationalarchives/components/checkboxes/macro-options.json

@@ -87,16 +87,28 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "formGroupClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the checkboxes form group."
+  },
+  {
+    "name": "formGroupAttributes",
+    "type": "string",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the checkboxes form group."
+  },
   {
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the checkboxes."
+    "description": "Classes to add to the checkbox elements."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the checkboxes."
+    "description": "HTML attributes (for example data attributes) to add to the checkbox elements."
   }
 ]

src/nationalarchives/components/checkboxes/template.njk

@@ -2,7 +2,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
@@ -22,7 +22,7 @@
     <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
-        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if item.checked %} checked{% endif %}>
+        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
         <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
           {{ item.text }}
         </label>

src/nationalarchives/components/compound-filters/_index.scss

@@ -0,0 +1 @@
+@use "compound-filters";