From d92c2a6d3568376b45c879b14d1b72d7143306eb Mon Sep 17 00:00:00 2001 From: Terry Price <102584881+Terry-Price@users.noreply.github.com> Date: Mon, 5 Feb 2024 17:25:34 +0000 Subject: [PATCH 1/6] reduce spacing between radio and checkbox label (#81) Co-authored-by: Andrew Hosgood --- src/nationalarchives/components/checkboxes/checkboxes.scss | 2 +- src/nationalarchives/components/radios/radios.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss index 524efa9c..8938053c 100644 --- a/src/nationalarchives/components/checkboxes/checkboxes.scss +++ b/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; diff --git a/src/nationalarchives/components/radios/radios.scss b/src/nationalarchives/components/radios/radios.scss index ec84b4ac..97893f1d 100644 --- a/src/nationalarchives/components/radios/radios.scss +++ b/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; From caa8d61f16277f6ca38a8a067fb3fd9852acd0e0 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Mon, 5 Feb 2024 18:15:18 +0000 Subject: [PATCH 2/6] Change hero image size (#82) * Change hero image size * Change hero image size --- CHANGELOG.md | 1 + src/nationalarchives/components/hero/hero.scss | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf7d30e3..15d55f7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ 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 ### Deprecated ### Removed diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index a29c9b26..ecb4acc3 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/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; From 6e89d397cc8c32c65bb1dd424913733096d7fcd3 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 6 Feb 2024 12:38:38 +0000 Subject: [PATCH 3/6] Remove italics, update heading font sizes and change padding on blockquotes (#83) * Remove italics, update font sizes * Switch to node20 for GitHub Actions * Switch back to composite for GitHub Actions * Update checkout and setup-node actions to use latest versions * Tweak blockquote padding on small/tiny devices --- .github/actions/lint/action.yml | 4 +-- .github/actions/prototype-kit-test/action.yml | 4 +-- .github/actions/test-package/action.yml | 4 +-- .github/actions/tests/action.yml | 4 +-- .github/workflows/npm-publish.yml | 20 ++++++------- .github/workflows/publish-storybook.yml | 8 ++--- .github/workflows/pull-request.yml | 4 +-- .github/workflows/tests.yml | 8 ++--- CHANGELOG.md | 4 +++ .../components/picture/picture.scss | 3 +- .../utilities/_typography.scss | 30 +++++++++++++------ 11 files changed, 55 insertions(+), 38 deletions(-) diff --git a/.github/actions/lint/action.yml b/.github/actions/lint/action.yml index 6b92aaf1..e4c79778 100644 --- a/.github/actions/lint/action.yml +++ b/.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 diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml index af9d117e..17924d41 100644 --- a/.github/actions/prototype-kit-test/action.yml +++ b/.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 diff --git a/.github/actions/test-package/action.yml b/.github/actions/test-package/action.yml index e53b76d0..e75012bb 100644 --- a/.github/actions/test-package/action.yml +++ b/.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 diff --git a/.github/actions/tests/action.yml b/.github/actions/tests/action.yml index 5ef9b7ae..567a6a31 100644 --- a/.github/actions/tests/action.yml +++ b/.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 diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index a5d3e3fe..b8577598 100644 --- a/.github/workflows/npm-publish.yml +++ b/.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 diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml index 4496c0e7..3c88c3fb 100644 --- a/.github/workflows/publish-storybook.yml +++ b/.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 diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 54eefe99..74b5db78 100644 --- a/.github/workflows/pull-request.yml +++ b/.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 diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 5db00590..fad361a8 100644 --- a/.github/workflows/tests.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 15d55f7c..b3409d08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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 diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index 3d94caeb..81e19edb 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/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 { diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 815ce0ae..d8fe8872 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/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 { @@ -389,6 +396,7 @@ small { &__author { font-style: italic; + @include typography.relative-font-size(16); .tna-blockquote & { margin: 1rem 0 0; @@ -398,6 +406,10 @@ small { content: "\2014" " "; } } + + @include media.on-tiny { + padding: 0.5rem 0.5rem 0.5rem 1rem; + } } .tna-large-paragraph { From 83d69c7f0a20ed0db2b0fedb58d956821d4db805 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 6 Feb 2024 12:44:37 +0000 Subject: [PATCH 4/6] Don't use TurboSnap on PRs --- .github/workflows/pull-request.yml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 74b5db78..0e844ec4 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -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/**" From 32add185763b8b7f53889dd4fc5673b0bcdb330f Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 6 Feb 2024 14:05:58 +0000 Subject: [PATCH 5/6] Remove italic styling on blockquote author --- src/nationalarchives/utilities/_typography.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index d8fe8872..c02071d6 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -395,7 +395,6 @@ small { } &__author { - font-style: italic; @include typography.relative-font-size(16); .tna-blockquote & { From e309b31f7e543d2f415ab55700984c8b8d1b282e Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 6 Feb 2024 14:13:46 +0000 Subject: [PATCH 6/6] v0.1.36 --- CHANGELOG.md | 13 +++++++++---- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3409d08..cef33802 100644 --- a/CHANGELOG.md +++ b/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 @@ -25,7 +33,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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 @@ -34,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 diff --git a/package-lock.json b/package-lock.json index e9f4edad..8747c46b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nationalarchives/frontend", - "version": "0.1.35", + "version": "0.1.36", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nationalarchives/frontend", - "version": "0.1.35", + "version": "0.1.36", "license": "MIT", "devDependencies": { "@babel/core": "^7.23.2", diff --git a/package.json b/package.json index a81c894e..2c5e5f23 100644 --- a/package.json +++ b/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",