Optimisations (#43)

* No link visited state, remove Supria Sans fontface

* Add Supria to Storybook

* Update Chromatic to only build changed components

* @import -> @use

* Refactor colour tools and utilities

* Fix cookie banner params and fixtures

* Add Supria to prototypes

* Spelling mistake

* Allow plain card supertitles

* Fix colour issues

.github/workflows/pull-request.yml

@@ -29,4 +29,10 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
           exitZeroOnChanges: true
-          onlyChanged: false
+          onlyChanged: true
+          externals: |
+            - ".storybook/**"
+            - "src/nationalarchives/variables/**"
+            - "src/nationalarchives/tools/**"
+            - "src/nationalarchives/utilities/**"
+            - "src/nationalarchives/lib/**"

.storybook/storybook.scss

@@ -1,6 +1,8 @@
 @use "../src/nationalarchives/tools/colour";
 @use "../src/nationalarchives/tools/media";
 
+@import "https://use.typekit.net/hkj3kuz.css";
+
 .sb-show-main.sb-main-padded {
   padding: 0;
 }
@@ -24,8 +26,8 @@
     padding: 2rem;
 
     box-shadow:
-      0 1rem 2rem rgba(0, 0, 0, 0.125),
-      0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+      0 1rem 2rem rgb(0 0 0/0.125),
+      0 0.25rem 0.5rem rgb(0 0 0/0.25);
 
     border-radius: 0.25rem;
   }

CHANGELOG.md

@@ -11,16 +11,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial concept of text detail elements
 - Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
+- Allow links to have no visited state with `tna-link--no-visited-state`
+- Card supertitles can be made "plain" with no contrasting colour
 
 ### Changed
 
 - Tweaked dark theme colours
 - `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future)
 - Changed Node version from `lts/hydrogen` to `lts/iron`
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
+- Mixin `colour.invert` changed to `colour.contrast`
+- Background colour classes changed to BEM (`tna-background--accent` -> `tna-background-accent`)
 
 ### Deprecated
 ### Removed
+
+- The `@import` for Supria Sans Condensed (`supria-sans-condensed`) from TypeKit has been removed - each service needs to import their own copy of the fonts
+
 ### Fixed
 
 - Cookie banner URL is now correctly used

src/nationalarchives/components/button/button.scss

@@ -3,7 +3,7 @@
 @use "../../tools/media";
 @use "../../tools/typography";
 @use "../../utilities";
-@import "button-group";
+@use "button-group";
 
 .tna-button {
   padding: 0.25rem 1rem;
@@ -87,14 +87,14 @@
   }
 
   &--solid-hover,
-  .tna-background--accent-light &,
-  .tna-background--accent &:not(.tna-button--accent) {
+  .tna-background-accent-light &,
+  .tna-background-accent &:not(.tna-button--accent) {
     &:not(.tna-button--plain):hover {
       @include colour.colour-background("page-background");
     }
   }
 
-  .tna-background--accent &--accent {
+  .tna-background-accent &--accent {
     @include colour.plain;
 
     @include colour.colour-background("page-background");

src/nationalarchives/components/card/card.scss

@@ -117,14 +117,14 @@
   }
 
   &--contrast {
-    @include colour.invert;
+    @include colour.contrast;
   }
 
   &--accent {
     @include colour.accent;
 
     .tna-hgroup__supertitle {
-      @include colour.invert;
+      @include colour.contrast;
 
       @include colour.colour-border("contrast-background");
     }

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

@@ -20,6 +20,7 @@ const argTypes = {
   actions: { control: "object" },
   horizontal: { control: "boolean" },
   style: { control: "inline-radio", options: ["none", "boxed", "accent"] },
+  plainSupertitle: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -57,6 +58,7 @@ const Template = ({
   actions,
   horizontal,
   style,
+  plainSupertitle,
   htmlElement,
   classes,
   attributes,
@@ -81,6 +83,7 @@ const Template = ({
       actions,
       horizontal,
       style,
+      plainSupertitle,
       htmlElement,
       classes,
       attributes,
@@ -143,6 +146,24 @@ Meta.args = {
   classes: "tna-card--demo",
 };
 
+export const PlainSupertitle = Template.bind({});
+PlainSupertitle.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "s",
+  href: "#",
+  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,
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
+  htmlElement: "article",
+  plainSupertitle: true,
+  classes: "tna-card--demo",
+};
+
 export const Boxed = Template.bind({});
 Boxed.args = {
   supertitle: "Card supertitle",

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

@@ -186,6 +186,12 @@
     "required": false,
     "description": "The style of card to use which can be either `boxed` for an inverted card or `accent` for a card that matches the page's accent colour."
   },
+  {
+    "name": "plainSupertitle",
+    "type": "boolean",
+    "required": false,
+    "description": "Use a plain supertitle, removing the accented background colour."
+  },
   {
     "name": "htmlElement",
     "type": "string",

src/nationalarchives/components/card/template.njk

@@ -13,7 +13,7 @@
   {%- if params.supertitle -%}
     <hgroup class="tna-hgroup-{{ params.headingSize or 's' }} tna-card__heading">
       <h{{ params.headingLevel }} class="tna-hgroup__title">
-        <span class="tna-hgroup__supertitle">{{ params.supertitle }}</span>
+        <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
         {%- if params.href -%}
         <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
         {%- else -%}

src/nationalarchives/components/cookie-banner/cookie-banner.scss

@@ -7,7 +7,7 @@
 @use "../grid";
 
 .tna-cookie-banner {
-  @include colour.invert;
+  @include colour.contrast;
 
   padding-top: 2rem;
   padding-bottom: 2rem;