diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss index 9e98832b..9501e218 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -259,6 +259,12 @@ flex-wrap: nowrap; } + .tna-form__group-contents, + .tna-form__heading { + font-size: 0; + line-height: 0; + } + .tna-pagination { margin-top: 1rem; } diff --git a/CHANGELOG.md b/CHANGELOG.md index fb2367b0..e5c60a5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast` - The card style of `boxed` has been changed to `contrast` in line with other components +- Changed `tna-select--plain` to `tna-select--styled` +- Updated button styles - icon sizes, padding and gaps on small and icon-only buttons +- Removed slash on void elements (updating `
` to `
`) +- Italicise picture element captions to distinguish from regular text +- Use `text-wrap: pretty;` for headings ### Deprecated ### Removed diff --git a/src/nationalarchives/all.scss b/src/nationalarchives/all.scss index 7c7352f8..60630fc1 100644 --- a/src/nationalarchives/all.scss +++ b/src/nationalarchives/all.scss @@ -1,13 +1,15 @@ /*! - * ------------------------------------------------ - * The National Archives Frontend - * https://github.com/nationalarchives/tna-frontend - * ------------------------------------------------ + * ------------------------------------------ + * + * TNA Frontend + * github.com/nationalarchives/tna-frontend + * * Explore 1,000 years of history - * https://www.nationalarchives.gov.uk/ - * ------------------------------------------------ + * www.nationalarchives.gov.uk + * + * ------------------------------------------ * MIT Licence - * ------------------------------------------------ + * ------------------------------------------ */ @use "variables"; diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index ffd97165..90dc7180 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -9,14 +9,15 @@ padding: 0.25rem 1rem; display: inline-flex; - align-items: center; + align-items: baseline; justify-content: center; - gap: 0.5rem; + gap: 0.75rem; + @include typography.relative-font-size(18); @include typography.main-font-weight-bold; + line-height: #{math.div(16, 18) * 2}; text-decoration: none; text-align: center; - line-height: #{math.div(16, 18) * 2}; text-wrap: balance; @include colour.colour-background("button-background"); @@ -25,13 +26,6 @@ cursor: pointer; - &, - .fa-solid, - .fa-brands { - @include typography.relative-font-size(18); - line-height: #{math.div(16, 18) * 2}; - } - &, &:link, &:visited { @@ -45,6 +39,14 @@ background: transparent; } + .fa-solid, + .fa-brands { + display: block; + + font-size: 0.9em; + line-height: #{math.div(16, 18) * 2}; + } + &--plain { @include typography.main-font-weight; @@ -83,13 +85,6 @@ flex-direction: row-reverse; } - .fa-solid, - .fa-brands { - min-width: 1.25rem; - - display: block; - } - &--small, &-group--small & { padding: 0 0.5rem; @@ -99,7 +94,6 @@ .fa-solid, .fa-brands { - @include typography.relative-font-size(18); line-height: 2rem; } } @@ -111,10 +105,13 @@ gap: 0; font-size: 0; + line-height: 0; .fa-solid, .fa-brands { width: 2.5rem; + + @include typography.relative-font-size(18); } } @@ -125,6 +122,8 @@ .fa-solid, .fa-brands { width: 2rem; + + @include typography.relative-font-size(18 * 0.9); } } diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index db3bd80d..2d4c52d0 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -4,7 +4,7 @@ { "name": "minimal", "options": {}, - "html": "", + "html": "", "hidden": false }, { @@ -152,7 +152,7 @@ } ] }, - "html": "", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index 991ae25d..51236bdb 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -104,11 +104,11 @@ {%- endfor -%} -
+
{%- else -%}
-
+
{%- endif -%} diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index ca165d05..de3e8913 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -7,7 +7,7 @@
- + {{ params.exit.text }} {%- if params.exit.target == "_blank" -%} diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index caa834f9..c1215ad9 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/src/nationalarchives/components/picture/picture.scss @@ -47,10 +47,11 @@ } &__caption { - margin: 0 2rem; + margin: 0 1rem; padding: 1rem; @include typography.relative-font-size(16); + font-style: italic; @include colour.colour-border("keyline", 1px, solid, bottom); } @@ -79,6 +80,14 @@ margin-right: 0; margin-left: 0; } + + @if grid.$gutter-width-tiny != 1.5rem { + &__caption, + &__transcript { + padding-right: grid.$gutter-width-tiny; + padding-left: grid.$gutter-width-tiny; + } + } } @include colour.on-high-contrast-and-forced-colours { diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss index a8b98f8e..88cefcb1 100644 --- a/src/nationalarchives/components/select/select.scss +++ b/src/nationalarchives/components/select/select.scss @@ -19,7 +19,7 @@ @include colour.colour-border("input-border", forms.$form-field-border-width); border-radius: 0; - &--plain { + &--styled { padding: 0 2.5rem 0 0.75rem; appearance: none; diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js index 27d8a694..74de0c5c 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js @@ -87,9 +87,10 @@ const Template = () => { ${TextInput({ params: { + label: "Input", id: `name-${theme}-${block}-${accent}`, name: `name-${theme}-${block}-${accent}`, - value: `name-${theme}-${block}-${accent}`, + value: `Lorem ipsum`, }, })} ${Checkboxes({ @@ -132,6 +133,7 @@ const Template = () => { })} ${Select({ params: { + label: "Select", id: `sort-${theme}-${block}-${accent}`, name: `sort-${theme}-${block}-${accent}`, items: [ diff --git a/src/nationalarchives/templates/layouts/_generic.njk b/src/nationalarchives/templates/layouts/_generic.njk index c03cdddd..543bd2fe 100644 --- a/src/nationalarchives/templates/layouts/_generic.njk +++ b/src/nationalarchives/templates/layouts/_generic.njk @@ -1,13 +1,18 @@ {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #} + {% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner -%} {% from "nationalarchives/components/footer/macro.njk" import tnaFooter -%} {% from "nationalarchives/components/header/macro.njk" import tnaHeader -%} {% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%} + +{% set siteTitle = 'The National Archives' %} +{% set pageTitle = '' %} + - {% block pageTitle %}The National Archives{% endblock %} + {% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle }}{% else %}{{ siteTitle }}{% endif %}{% endblock %} diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index e8cf4f64..324d6e6d 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -208,13 +208,12 @@ small { %heading { @include colour.colour-font("font-dark"); + text-wrap: pretty; &:not(.tna-heading--no-link-arrow) { a { display: inline-block; - // text-wrap: balance; - &::after { padding-left: 0.25rem; @@ -225,11 +224,11 @@ small { content: "\203A"; } - // &:hover { - // &::after { - // padding-left: 0.5rem; - // } - // } + &:hover { + &::after { + padding-left: 0.5rem; + } + } } } }