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 108aa65e..9af37cf5 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..0e844ec4 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 @@ -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/**" 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 cf7d30e3..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 @@ -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 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", 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/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; 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/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; diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 815ce0ae..c02071d6 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 { @@ -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 {