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

…feature/global-header

.github/actions/lint/action.yml

@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

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

@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

.github/actions/test-package/action.yml

@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

.github/actions/tests/action.yml

@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

.github/workflows/npm-publish.yml

@@ -9,7 +9,7 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get and validate version number
         id: get-version
         run: |
@@ -26,7 +26,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Lint
         uses: ./.github/actions/lint
 
@@ -35,7 +35,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Tests
         uses: ./.github/actions/tests
 
@@ -44,7 +44,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Test build package
         uses: ./.github/actions/test-package
 
@@ -53,7 +53,7 @@ jobs:
     needs:
       - test-package
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: GOV.UK prototype kit test
         uses: ./.github/actions/prototype-kit-test
 
@@ -67,8 +67,8 @@ jobs:
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           registry-url: https://registry.npmjs.org/
@@ -101,8 +101,8 @@ jobs:
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           registry-url: https://registry.npmjs.org/
@@ -131,7 +131,7 @@ jobs:
       - publish-npm
       - publish-npm-cookie-banner
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get release notes
         id: get-release-notes
         run: ./tasks/get-release-notes.sh "${{ needs.check.outputs.version }}" > RELEASE_NOTES.txt

.github/workflows/publish-storybook.yml

@@ -32,10 +32,10 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies
@@ -52,10 +52,10 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies

.github/workflows/pull-request.yml

@@ -14,10 +14,10 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies
@@ -29,10 +29,10 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
           exitZeroOnChanges: true
-          onlyChanged: true
-          externals: |
-            - ".storybook/**"
-            - "src/nationalarchives/variables/**"
-            - "src/nationalarchives/tools/**"
-            - "src/nationalarchives/utilities/**"
-            - "src/nationalarchives/lib/**"
+          # onlyChanged: true
+          # externals: |
+          #   - ".storybook/**"
+          #   - "src/nationalarchives/variables/**"
+          #   - "src/nationalarchives/tools/**"
+          #   - "src/nationalarchives/utilities/**"
+          #   - "src/nationalarchives/lib/**"

.github/workflows/tests.yml

@@ -13,21 +13,21 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Lint
         uses: ./.github/actions/lint
 
   tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Tests
         uses: ./.github/actions/tests
 
   test-package:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Test build package
         uses: ./.github/actions/test-package
 
@@ -36,6 +36,6 @@ jobs:
     needs:
       - test-package
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: GOV.UK prototype kit test
         uses: ./.github/actions/prototype-kit-test

CHANGELOG.md

@@ -5,9 +5,17 @@ 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.35...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.36...HEAD)
 
 ### Added
+### Changed
+### Deprecated
+### Removed
+### Fixed
+### Security
+
+## [0.1.36](https://github.com/nationalarchives/tna-frontend/compare/v0.1.35...v0.1.36) - 2024-02-06
+
 ### Changed
 
 - Tab elements in high contrast mode have an extra keyline to help with visibility
@@ -19,8 +27,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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 the aspect ratio of the hero image to be closer to a 3:1
+- Update large heading size to not be smaller than medium headings on medium devices
+- Remove italicised text from picture element captions and blockquotes, update font sizes
+- Reduce padding between checkboxes, radios and their labels when small
+- Reduce padding on blockquotes on mobile
 
-### Deprecated
 ### Removed
 
 - Removed option for `tna-search-field--no-border` - borders are dictated by the background colours and page theme
@@ -29,8 +41,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Picture elements in high contrast mode have improved borders with no gaps
 
-### Security
-
 ## [0.1.35](https://github.com/nationalarchives/tna-frontend/compare/v0.1.34...v0.1.35) - 2024-01-16
 
 ### Added

package.json

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

src/nationalarchives/components/checkboxes/checkboxes.scss

@@ -90,7 +90,7 @@
 
   &--small &__item {
     &-label {
-      padding-left: 2.5rem;
+      padding-left: 2.25rem;
 
       line-height: 1.5rem;
 

src/nationalarchives/components/hero/hero.scss

@@ -8,7 +8,7 @@
   @include colour.contrast-on-mobile;
 
   &__figure {
-    min-height: min(35vw, 480px);
+    min-height: clamp(12rem, calc(33vw - 12rem), 63rem);
     margin: 0;
     padding-top: 8rem;
     padding-bottom: 4rem;
@@ -194,6 +194,7 @@
 
   @include media.on-mobile {
     &__figure {
+      min-height: auto;
       padding: 0;
 
       flex-direction: column;

src/nationalarchives/components/picture/picture.scss

@@ -51,7 +51,6 @@
     padding: 1rem;
 
     @include typography.relative-font-size(16);
-    font-style: italic;
 
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
@@ -79,6 +78,8 @@
     &__caption {
       margin-right: 0;
       margin-left: 0;
+
+      @include typography.relative-font-size(14);
     }
 
     @if grid.$gutter-width-tiny != 1.5rem {

src/nationalarchives/components/radios/radios.scss

@@ -85,7 +85,7 @@
 
   &--small &__item {
     &-label {
-      padding-left: 2.5rem;
+      padding-left: 2.25rem;
 
       line-height: 1.5rem;
 

src/nationalarchives/utilities/_typography.scss

@@ -17,13 +17,13 @@
     // font-display: swap;
   }
 
-  @font-face {
-    font-family: "Open Sans";
-    src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
-    font-weight: typographyVars.$main-font-weight;
-    font-style: italic;
-    // font-display: swap;
-  }
+  // @font-face {
+  //   font-family: "Open Sans";
+  //   src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
+  //   font-weight: typographyVars.$main-font-weight;
+  //   font-style: italic;
+  //   // font-display: swap;
+  // }
 
   @font-face {
     font-family: "Open Sans";
@@ -87,9 +87,16 @@ strong {
 p {
   @include spacing.space-above;
 
-  + p {
+  + p/*,
+  + .tna-ul,
+  + .tna-ol,
+  + .tna-blockquote*/ {
     margin-top: 1rem;
   }
+
+  // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {
+  //   margin-top: 1rem;
+  // }
 }
 
 a {
@@ -265,7 +272,7 @@ small {
   line-height: 1.3;
 
   @include media.on-medium {
-    @include typography.relative-font-size(26);
+    @include typography.relative-font-size(30);
   }
 
   @include media.on-mobile {
@@ -388,7 +395,7 @@ small {
   }
 
   &__author {
-    font-style: italic;
+    @include typography.relative-font-size(16);
 
     .tna-blockquote & {
       margin: 1rem 0 0;
@@ -398,6 +405,10 @@ small {
       content: "\2014" " ";
     }
   }
+
+  @include media.on-tiny {
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+  }
 }
 
 .tna-large-paragraph {