Tweaks from 0.1.24 (#51)

* Move TypeKit CSS to prototype kit config

* GOV.UK prototype kit fixes

* Remove transitions

* Fixed width icons

* Spelling mistake

* More colour examples

* Add styling for tables

* Fix card supertitle

* Allow column alignment

* Change header layout to flexbox

* Adjust hero caption width

* Add color to tint and light accent backgrounds

* Add plain supertitle heading story

* Updates to card component

* Change grid alignment classes

* Lint

* Remove margin and padding from all elements

* Updates and fixes to cookie banner

* Spelling mistake

* Update CHANGELOG.md

* Fix linting and test errors

* Use TNAFrontend from window if available

* Update README.md

* Omit some stories from Chromatic snapshots

* Omit more stories from Chromatic snapshots

* Fix spelling mistake in published assets

* Update README.md

* Rework Cookie class

* More immutability in Cookies class, lint

* Change focus outline colour on dark theme

* Pagination option with no numbers, nested lists

* Update list of cards markup

* Add table wrapper

* Change table to use space-above

* Make smaller tables full width

* Update Cookies library

* Add more linting and unit tests

.babelrc.json

@@ -10,5 +10,10 @@
       }
     ]
   ],
-  "plugins": []
-}
+  "plugins": [],
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+    }
+  }
+}

.eslintrc.js

@@ -1,21 +1,23 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true
+  env: {
+    browser: true,
+    es2021: true,
   },
-  "extends": ["eslint:recommended", "plugin:storybook/recommended"],
-  "overrides": [{
-    "env": {
-      "node": true
+  extends: ["eslint:recommended", "plugin:storybook/recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
     },
-    "files": [".eslintrc.{js,cjs}"],
-    "parserOptions": {
-      "sourceType": "script"
-    }
-  }],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  "rules": {}
-};
+  rules: {},
+};

.github/workflows/npm-publish.yml

@@ -82,11 +82,11 @@ jobs:
       - name: Publish to npm
         run: cd package && npm publish
       - name: Rename package directory
-        run: mv package "nationalarhives-frontend-${{ needs.check.outputs.version }}"
+        run: mv package "tna-frontend-${{ needs.check.outputs.version }}"
       - name: Compress package
-        run: zip -r "nationalarhives-frontend-${{ needs.check.outputs.version }}.zip" "nationalarhives-frontend-${{ needs.check.outputs.version }}"
+        run: zip -r "tna-frontend-${{ needs.check.outputs.version }}.zip" "tna-frontend-${{ needs.check.outputs.version }}"
       - name: Upload the package to the GitHub release
-        run: gh release upload "v${{ needs.check.outputs.version }}" "nationalarhives-frontend-${{ needs.check.outputs.version }}.zip"
+        run: gh release upload "v${{ needs.check.outputs.version }}" "tna-frontend-${{ needs.check.outputs.version }}.zip"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.storybook/preview.js

@@ -1,6 +1,7 @@
 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(
@@ -14,7 +15,7 @@ document.body.classList.add("tna-template__body");
 
 export const parameters = {
   actions: {
-    disable: true,
+    // disable: true,
   },
   viewport: { viewports: customViewports },
   options: { showPanel: true },
@@ -33,6 +34,19 @@ export const parameters = {
   },
 };
 
+export const decorators = [
+  (Story, ctx) => {
+    window.dataLayer = [];
+    window.TNAFrontend = {
+      Cookies,
+    };
+    const cookies = new Cookies();
+    cookies.deleteAll();
+    cookies.destroy();
+    return Story();
+  },
+];
+
 // const fontLoader = async () => ({
 //   fonts: await Promise.all([
 //     document.fonts.load("normal 1em Open Sans"),

CHANGELOG.md

@@ -8,10 +8,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.24-prerelease...HEAD)
 
 ### Added
+
+- Grid columns can be aligned along the cross axis with classes `tna-column--align-top`, `tna-column--align-bottom` and `tna-column--align-centre`
+- Actions and items using the `href` attribute on cards can now have custom classes and attributes
+- Events can now be added when cookie preferences change
+- Table styles added
+- Pagination component has the option to have no numbers
+- Table wrapper for tables wider than the current viewport
+
 ### Changed
+
+- Change many instances of Font Awesome icons to a fixed width
+- Adjusted the width of the hero caption
+- Removed margin and padding from all elements by default
+- The standard cookie policies are always `essential`, `usage` and `settings` - other custom policies can be added
+- Focus outline on dark themes has changed from blue to orange to avoid colour conflict with links
+
 ### Deprecated
 ### Removed
+
+- 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
+
 ### Fixed
+
+- Assets path fixed for GOV.UK prototype kit
+- Colour fixed for plain card supertitles in accented style
+- Header navigation uses flexbox for layout of tabs and top navigation stacks on mobile
+- Explicitly declare font colour for tinted and light accent backgrounds
+- Accepting or declining individual cookie policies now works
+- Removed extra space from nested links
+
 ### Security
 
 ## [0.1.24-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.23-prerelease...v0.1.24-prerelease) - 2023-11-06

README.md

@@ -22,3 +22,25 @@ npm install
 # Start Storybook
 npm start
 ```
+
+## Useful links
+
+- [TNA Frontend Storybook](https://nationalarchives.github.io/tna-frontend/)
+- [TNA Frontend wiki](https://github.com/nationalarchives/tna-frontend/wiki)
+- [National Archives Design System](https://nationalarchives.github.io/design-system/)
+
+## Accessibility
+
+The National Archives Digital Services team works hard to ensure that TNA Frontend is accessible.
+
+Using Frontend will help your service meet [level AA of WCAG 2.2](https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag). But you must still [check that your service meets accessibility requirements](https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction), especially if you extend or modify components.
+
+You should also use:
+
+- [the JavaScript from TNA Frontend](https://github.com/nationalarchives/tna-frontend/wiki/Using-TNA-Frontend#javascript)
+
+You can also read the [accessibility statement for the National Archives Design System](https://nationalarchives.github.io/design-system/accessibility/).
+
+### Accessibility warnings
+
+If you get a warning from a linter or accessibility checker, check our list of [issues you should not need to fix](https://github.com/nationalarchives/tna-frontend/wiki/Accessibility-issues-you-should-not-need-to-fix).

govuk-prototype-kit.config.json

@@ -1,16 +1,8 @@
 {
-  "nunjucksPaths": [
-    "/"
-  ],
-  "scripts": [
-    "/nationalarchives/all.js"
-  ],
-  "assets": [
-    "/nationalarchives/assets"
-  ],
-  "stylesheets": [
-    "/nationalarchives/prototype-kit.css"
-  ],
+  "nunjucksPaths": ["/"],
+  "scripts": ["/nationalarchives/all.js"],
+  "assets": ["/nationalarchives/assets"],
+  "stylesheets": ["/nationalarchives/prototype-kit.css"],
   "templates": [
     {
       "name": "Homepage",

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "\\.m?js$": "babel-jest",
+  },
+};