Optimisations and improvements (#142)

* Removed and rename some components

* Update fixtures

* Remove old components from package test

* Remove old components from prototype kit test

* Reduce number of colour mixins to decrease package size

* Update CHANGELOG.md

* Fix prototype kit test

* Allow manual build on PR

* Allow manual build on PR

* Allow manual build on PR

* Change nullish coalescing to ||

* Allow manual build on PR

* Split form-error CSS variable

* Fix error message colour

* Split out form colour stories

* Split out component SCSS for presentation and forms

* Move grid to utilities

* Fix conflicting container/ul styles

* Update package test

* Update gallery fixtures

* Remove some reset rules

* Add reset for lists

* Force rebuild on manual PR run

* Fix button colours on accented backgrounds

* Fix PR workflow logic

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

@@ -46,12 +46,10 @@ runs:
         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/details/macro.njk\" import tnaDetails %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\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/files/macro.njk\" import tnaFiles %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/files-list/macro.njk\" import tnaFilesList %}\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 &&
         echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/global-header/macro.njk\" import tnaGlobalHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
-        echo -e "{% from \"nationalarchives/components/grid/macro.njk\" import tnaGrid %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/header/macro.njk\" import tnaHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/hero/macro.njk\" import tnaHero %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/index-grid/macro.njk\" import tnaIndexGrid %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -60,23 +58,23 @@ runs:
         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/quick-filters/macro.njk\" import tnaQuickFilters %}\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/records-list/macro.njk\" import tnaRecordsList %}\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/search-filters/macro.njk\" import tnaSearchFilters %}\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/sidebar/macro.njk\" import tnaSidebar %}\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/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 &&
-        echo -e "{% from \"nationalarchives/components/warning/macro.njk\" import tnaWarning %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
+        echo -e "{% from \"nationalarchives/components/warning/macro.njk\" import tnaWarning %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/utilities/grid/macro.njk\" import tnaGrid %}\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 "{{ tnaAccordion({}) }}" >> 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 "{{ tnaButton({text:\"I am a button\",href:\"#\"}) }}" >> 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 &&
@@ -85,8 +83,7 @@ runs:
         echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaDetails({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaFiles({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaFilesList({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGlobalHeader({}) }}" >> prototype/app/views/index.html &&
@@ -99,9 +96,8 @@ runs:
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaQuickFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaRecordsList({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaSearchFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSidebar({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&

.github/workflows/pull-request.yml

@@ -7,7 +7,7 @@ on:
       - synchronize
   workflow_dispatch:
     inputs:
-      onlyChanged:
+      testAllStories:
         type: boolean
         description: Test all stories on Chromatic
         required: false
@@ -32,7 +32,7 @@ jobs:
       - name: Build Storybook
         run: npm run build:storybook:tests
       - uses: chromaui/action@v1
-        if: ${{ inputs.onlyChanged == 'true' }}
+        if: ${{ inputs.testAllStories != 'true' }}
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
@@ -41,9 +41,10 @@ jobs:
           externals: |
             - (.storybook|src)/**
       - uses: chromaui/action@v1
-        if: ${{ inputs.onlyChanged == 'false' }}
+        if: ${{ inputs.testAllStories == 'true' }}
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
           exitZeroOnChanges: true
+          forceRebuild: true
           onlyChanged: false

.storybook/storybook.scss

@@ -278,12 +278,6 @@
     flex-wrap: nowrap;
   }
 
-  .tna-form__group-contents,
-  .tna-form__heading {
-    font-size: 0;
-    line-height: 0;
-  }
-
   .tna-pagination {
     margin-top: 1rem;
   }

CHANGELOG.md

@@ -13,13 +13,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Increased maximum depth of contents sidebar to three levels
 - Removed the redundant `role` attribute from `<fieldset>` of the date input component
 - Allow each item in a checkboxes component to have a `name` attribute that will override the main `name`
+- Renamed "files" component to "files list" (`files` -> `files-list`, `tnaFiles()` -> `tnaFilesList()`)
+- Renamed "featured records" component to "records list" (`featured-records` -> `records-list`, `tnaFeaturedRecords()` -> `tnaRecordsList()`)
+- SCSS mixin `colour.light` changed to `colour.always-light`
+- Index grid items within contrast blocks are now accented
+- Colour variables `--button-accent-text` and `--button-accent-background` have changed to `--button-accented-text` and `--button-accented-background`
+- Colour variable `form-error` split into `form-error-border` and `form-error-text`
+- Moved the grid component to utilities
 
 ### Deprecated
+
+- Removed `colour.plain` SCSS mixin
+
 ### Removed
+
+- Removed search filters component
+- Removed sensitive image component
+- Removed `width: 100%;` from reset of `<video>` and `<canvas>` elements
+
 ### Fixed
 
 - Added missing space above files list
 - Fixed alignment of warning text when a short body is used
+- Incorrect `aria-labeledby` attribute changed to `aria-labelledby` in gallery items
+- Add better labels for buttons in gallery component
 
 ### Security
 

src/nationalarchives/all.mjs

@@ -7,8 +7,6 @@ import { Gallery } from "./components/gallery/gallery.mjs";
 import { GlobalHeader } from "./components/global-header/global-header.mjs";
 import { Header } from "./components/header/header.mjs";
 import { Picture } from "./components/picture/picture.mjs";
-import { SearchFilters } from "./components/search-filters/search-filters.mjs";
-import { SensitiveImage } from "./components/sensitive-image/sensitive-image.mjs";
 import { SkipLink } from "./components/skip-link/skip-link.mjs";
 import { Tabs } from "./components/tabs/tabs.mjs";
 import Cookies from "./lib/cookies.mjs";
@@ -93,20 +91,6 @@ const initAll = (options) => {
     new Picture($picture);
   });
 
-  const $searchFilters = $scope.querySelectorAll(
-    '[data-module="tna-search-filters"]',
-  );
-  $searchFilters.forEach(($searchFilter) => {
-    new SearchFilters($searchFilter);
-  });
-
-  const $sensitiveImages = $scope.querySelectorAll(
-    '[data-module="tna-sensitive-image"]',
-  );
-  $sensitiveImages.forEach(($sensitiveImage) => {
-    new SensitiveImage($sensitiveImage);
-  });
-
   const $skipLinks = $scope.querySelectorAll('[data-module="tna-skip-link"]');
   $skipLinks.forEach(($skipLink) => {
     new SkipLink($skipLink);
@@ -164,8 +148,6 @@ export {
   GlobalHeader,
   Header,
   Picture,
-  SearchFilters,
-  SensitiveImage,
   SkipLink,
   Tabs,
 };

src/nationalarchives/components/_forms.scss

@@ -0,0 +1,9 @@
+@use "checkboxes";
+@use "date-input";
+@use "date-search";
+@use "error-summary";
+@use "radios";
+@use "search-field";
+@use "select";
+@use "text-input";
+@use "textarea";

src/nationalarchives/components/_index.scss

@@ -1,35 +1,2 @@
-@use "accordion";
-@use "breadcrumbs";
-@use "button";
-@use "card";
-@use "checkboxes";
-@use "compound-filters";
-@use "cookie-banner";
-@use "date-input";
-@use "date-search";
-@use "details";
-@use "error-summary";
-@use "featured-records";
-@use "files";
-@use "footer";
-@use "gallery";
-@use "global-header";
-@use "grid";
-@use "header";
-@use "hero";
-@use "index-grid";
-@use "pagination";
-@use "phase-banner";
-@use "picture";
-@use "quick-filters";
-@use "radios";
-@use "sensitive-image";
-@use "search-field";
-@use "search-filters";
-@use "select";
-@use "sidebar";
-@use "skip-link";
-@use "tabs";
-@use "text-input";
-@use "textarea";
-@use "warning";
+@use "presentation";
+@use "forms";

src/nationalarchives/components/_presentation.scss

@@ -0,0 +1,23 @@
+@use "accordion";
+@use "breadcrumbs";
+@use "button";
+@use "card";
+@use "compound-filters";
+@use "cookie-banner";
+@use "details";
+@use "files-list";
+@use "footer";
+@use "gallery";
+@use "global-header";
+@use "header";
+@use "hero";
+@use "index-grid";
+@use "pagination";
+@use "phase-banner";
+@use "picture";
+@use "quick-filters";
+@use "records-list";
+@use "sidebar";
+@use "skip-link";
+@use "tabs";
+@use "warning";

src/nationalarchives/components/button/button.scss

@@ -85,14 +85,14 @@ $button-border-width: 4px !default;
   }
 
   &--accent {
-    @include colour.colour-background("button-accent-background");
+    @include colour.colour-background("button-accented-background");
 
-    @include colour.colour-border("button-accent-background");
+    @include colour.colour-border("button-accented-background");
 
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("button-accent-text");
+      @include colour.colour-font("button-accented-text");
     }
 
     &:hover {
@@ -185,22 +185,22 @@ $button-border-width: 4px !default;
   }
 
   .tna-background-accent &--accent {
-    @include colour.plain;
+    @include colour.contrast;
 
-    @include colour.colour-background("background");
+    @include colour.colour-background("button-background");
 
-    @include colour.colour-border("background");
+    @include colour.colour-border("button-background");
 
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("font-dark");
+      @include colour.colour-font("button-text");
     }
 
     &:hover {
-      @include colour.colour-font("background");
+      @include colour.colour-font("font-dark");
 
-      @include colour.colour-background("font-dark");
+      @include colour.colour-background("background");
     }
   }
 

src/nationalarchives/components/checkboxes/checkboxes.scss

@@ -45,7 +45,7 @@
         top: 0;
         left: 0;
 
-        @include colour.light;
+        @include colour.always-light;
       }
 
       &::before {

src/nationalarchives/components/date-input/date-input.scss

@@ -21,7 +21,7 @@
       display: block;
       box-sizing: border-box;
 
-      @include colour.light;
+      @include colour.always-light;
       @include colour.colour-font("input-foreground");
       font-size: inherit;
       line-height: 2rem;
@@ -39,7 +39,7 @@
       }
 
       .tna-form__group--error & {
-        @include colour.colour-border("form-error");
+        @include colour.colour-border("form-error-border");
       }
     }
   }

src/nationalarchives/components/date-search/date-search.scss

@@ -10,7 +10,7 @@
   display: block;
   box-sizing: border-box;
 
-  @include colour.light;
+  @include colour.always-light;
   @include colour.colour-font("input-foreground");
   @include typography.detail-font;
   font-size: inherit;
@@ -22,7 +22,7 @@
   border-radius: 0;
 
   .tna-form__group--error & {
-    @include colour.colour-border("form-error");
+    @include colour.colour-border("form-error-border");
   }
 
   &--max-width {

src/nationalarchives/components/error-summary/error-summary.mjs

@@ -9,7 +9,7 @@ export class ErrorSummary {
     }
 
     const disableAutoFocus =
-      this.$module.getAttribute("data-disableautofocus") === "true" ?? false;
+      this.$module.getAttribute("data-disableautofocus") === "true" || false;
 
     if (!disableAutoFocus) {
       this.setFocus(this.$module);

src/nationalarchives/components/error-summary/error-summary.scss

@@ -2,17 +2,16 @@
 @use "../../tools/media";
 @use "../../tools/spacing";
 @use "../../tools/typography";
-@use "../../utilities";
 
 .tna-error-summary {
   @include spacing.space-above;
   padding: spacing.space(1);
 
-  @include colour.plain;
+  @include colour.always-light;
 
   @include colour.colour-background("background");
 
-  @include colour.colour-border("form-error", 0.3125rem, solid);
+  @include colour.colour-border("form-error-border", 0.3125rem, solid);
 
   &:focus {
     outline: none;
@@ -33,7 +32,7 @@
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("form-error");
+      @include colour.colour-font("form-error-text");
     }
   }
 }