Fixes from v0.1.22-prerelease

.github/workflows/tests.yml

@@ -5,6 +5,10 @@ on:
     branches:
       - '**'
 
+concurrency:
+  group: tests-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   lint:
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -5,7 +5,7 @@ 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.22-prerelease...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.23-prerelease...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+
+## [0.1.23-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.22-prerelease...v0.1.23-prerelease) - 2023-10-25
+
+### Fixed
+
+- Header allows accent colour to be used with `tna-header--accent`
+- More consistent spacing between elements
+
 ## [0.1.22-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.21-prerelease...v0.1.22-prerelease) - 2023-10-24
 
 ### Added

package.json

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

src/nationalarchives/components/card/card.scss

@@ -55,6 +55,8 @@
   }
 
   &__body {
+    padding-top: 1rem;
+
     order: 3;
   }
 

src/nationalarchives/components/header/header.scss

@@ -47,7 +47,9 @@
 .tna-header {
   @include colour.invert;
 
-  background-color: colour.brand-colour("black");
+  &:not(&--accent) {
+    background-color: colour.brand-colour("black");
+  }
 
   .tna-template--system-theme & {
     @media (prefers-contrast: more) and (prefers-color-scheme: light) {

src/nationalarchives/components/index-grid/index-grid.scss

@@ -27,8 +27,6 @@
   &__item {
     @include colour.invert;
 
-    // @include colour.colour-font("contrast-font-base");
-
     height: 100%;
 
     display: flex;
@@ -45,10 +43,7 @@
 
   &__item-image {
     width: 100%;
-    // height: #{math.div(2, 3) * 100%};
     height: auto;
-
-    // object-fit: cover;
   }
 
   &__item-content {
@@ -64,9 +59,7 @@
   }
 
   &__item-title {
-    // @include typography.heading-font;
     text-decoration: underline;
-    // @include typography.relative-font-size(20);
 
     .tna-index-grid__item:hover & {
       &,

src/nationalarchives/components/picture/picture.scss

@@ -10,8 +10,6 @@
   @include spacing.space-above;
 
   &__image-wrapper {
-    // padding: 1rem 0;
-
     position: relative;
 
     background-color: #f4f4f4;
@@ -33,8 +31,6 @@
 
     padding: 1rem 1.5rem;
 
-    // @include colour.colour-font("font-base");
-
     .tna-template--clicked &:focus {
       outline: none;
     }
@@ -47,10 +43,6 @@
   &__caption {
     padding: 1rem 0;
 
-    // position: relative;
-
-    // text-align: center;
-
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
 

src/nationalarchives/components/sensitive-image/sensitive-image.scss

@@ -8,8 +8,6 @@
   &__details {
     position: relative;
 
-    // overflow: hidden;
-
     &::after {
       width: 100%;
       padding-bottom: calc(

src/nationalarchives/components/tabs/tabs.scss

@@ -33,7 +33,6 @@
     @include typography.relative-font-size(20);
     @include typography.heading-font;
     text-decoration: none;
-    // line-height: 1.5;
     text-align: center;
 
     background: transparent;

src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js

@@ -305,6 +305,7 @@ const Template = ({ theme, accent }) => {
             <h2 class="tna-hgroup__title">This is a heading (S)</h2>
           </hgroup>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p class="tna-large-paragraph">Large paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <p class="tna-scene-setter">
             We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.
           </p>

src/nationalarchives/utilities/_lists.scss

@@ -5,7 +5,7 @@
 
 .tna-ul,
 .tna-ol {
-  margin: 1rem 0;
+  margin: 1rem 0 0;
   padding: 0 0 0 2rem;
 
   &:first-child {
@@ -25,7 +25,7 @@
 }
 
 .tna-dl {
-  margin: 1rem 0;
+  margin: 1rem 0 0;
 
   display: flex;
   flex-wrap: wrap;
@@ -44,7 +44,6 @@
     box-sizing: border-box;
 
     word-wrap: break-word;
-    // word-break: break-all;
   }
 
   &--plain {
@@ -146,11 +145,6 @@
 
       dd {
         padding-top: 0;
-        // padding-left: 2rem;
-
-        + dt {
-          // @include colour.colour-border("keyline", 1px, solid, top);
-        }
       }
     }
 
@@ -170,9 +164,6 @@
 
     dt,
     dd {
-      // padding-left: 0;
-      // padding-right: 0;
-
       background: transparent !important;
 
       @include colour.colour-border("keyline-dark", 1px, solid, top);

src/nationalarchives/utilities/_typography.scss

@@ -77,7 +77,11 @@ strong {
 }
 
 p {
-  margin: 1rem 0 0;
+  margin: 2rem 0 0;
+
+  + p {
+    margin-top: 1rem;
+  }
 
   &:first-child {
     margin-top: 0;
@@ -249,7 +253,7 @@ a.tna-chip {
 
 %headings-and-heading-groups {
   @include spacing.space-above;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
   padding-top: 1rem;
 
   &:first-child {
@@ -260,6 +264,10 @@ a.tna-chip {
     margin-bottom: 0;
     padding-bottom: 0;
   }
+
+  + p {
+    margin-top: 1rem;
+  }
 }
 
 .tna-heading {
@@ -347,14 +355,20 @@ a.tna-chip {
   }
 }
 
+.tna-large-paragraph {
+  @include spacing.space-above;
+
+  @include typography.relative-font-size(20);
+}
+
 .tna-scene-setter {
+  @include spacing.space-above;
+
   @include typography.detail-font;
   @include colour.colour-font("font-dark");
   @include typography.relative-font-size(30);
   line-height: math.div(50, 30);
 
-  @include spacing.space-above;
-
   @include media.on-mobile {
     @include typography.relative-font-size(24);
     line-height: 2;