diff --git a/CHANGELOG.md b/CHANGELOG.md index ecc81c58..a1a33de7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - New option `accentMeta` on card component to make meta tags accented - Added image loader animations to card, hero, index grid, gallery and picture components +- Containers can be nested with `.tna-container--nested` +- Sticky sidebars can be "unstuck" on smaller devices with `.tna-sidebar--static-on-mobile` +- Added classeless styles for `
` elements ### Changed @@ -18,10 +21,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed unnecessary `title` attributes from footer, gallery, hero and index grid components - Added lazy loading to gallery images - The `title` of gallery components is now optional +- Reduced space above details components +- Added side padding to plain picture components +- Adjusted spacing of `

` elements inside `

  • ` and `
    ` elements ### Deprecated ### Removed + +- Removed container `--no-padding-all` classes and replaced with `--no-padding` classes for both containers and columns + ### Fixed + +- Removed max height for gallery components + ### Security ## [0.2.7](https://github.com/nationalarchives/tna-frontend/compare/v0.2.6...v0.2.7) - 2024-08-12 diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss index 4f9cd6b0..818fe11d 100644 --- a/src/nationalarchives/components/details/details.scss +++ b/src/nationalarchives/components/details/details.scss @@ -5,7 +5,11 @@ @use "../../tools/typography"; .tna-details { - @include spacing.space-above; + margin-top: spacing.space(1); + + &:first-child { + margin-top: 0; + } &__details { } diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss index f851fa25..e448d0aa 100644 --- a/src/nationalarchives/components/gallery/gallery.scss +++ b/src/nationalarchives/components/gallery/gallery.scss @@ -202,6 +202,8 @@ } &__navigation { + max-height: 40rem; + max-height: clamp(15rem, calc(100vh - #{spacing.space(2)}), 40rem); padding: spacing.space(1); grid-column: 1 / 3; @@ -285,10 +287,6 @@ @include colour.colour-background("background"); } - &--interactive { - max-height: 175dvh; - } - &--interactive &__item-figure-inner { max-height: 50vh; aspect-ratio: 3 / 2; @@ -349,6 +347,10 @@ overflow: auto; } + &:fullscreen &__navigation { + max-height: none; + } + @media (aspect-ratio >= 1/1) { &:fullscreen &__header { grid-column: 2 / 3; diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index 6d6b458b..bd8e5d3f 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/src/nationalarchives/components/picture/picture.scss @@ -62,13 +62,25 @@ box-shadow: none; } + @include media.on-larger-than-mobile { + &--plain { + margin-right: spacing.space(2); + margin-left: spacing.space(2); + } + } + + @include media.on-small { + &--plain { + margin-right: spacing.space(1); + margin-left: spacing.space(1); + } + } + @include media.on-tiny { &__image-wrapper { padding: 0; } - } - @include media.on-tiny { .tna-column & { width: calc(100% + #{grid.gutter-width-tiny-double()}); diff --git a/src/nationalarchives/components/sidebar/sidebar.scss b/src/nationalarchives/components/sidebar/sidebar.scss index e0a0cbe7..caa072e9 100644 --- a/src/nationalarchives/components/sidebar/sidebar.scss +++ b/src/nationalarchives/components/sidebar/sidebar.scss @@ -12,13 +12,6 @@ &__heading { } - &__items { - padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding}); - } - - &__item { - } - &__items, &__item-children { display: flex; @@ -28,6 +21,17 @@ list-style: none; } + &__items { + padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding}); + + &:focus { + outline: none; + } + } + + &__item { + } + &__item-children { } @@ -120,6 +124,24 @@ top: 0; } + @include media.on-small { + &--static-on-mobile, + &--static-on-small { + max-height: none; + + position: static; + } + } + + @include media.on-tiny { + &--static-on-mobile, + &--static-on-tiny { + max-height: none; + + position: static; + } + } + &--sticky &__items { margin: 0; padding-bottom: a11y.$focus-outline-padding; @@ -131,7 +153,7 @@ &--sticky#{&}--contents &__items, &--sticky#{&}--pages &__items { - // More padding right for separation from scrollbar + padding-right: spacing.space(1); } &--sticky#{&}--sections &__items, diff --git a/src/nationalarchives/utilities/colour/colour-themes.stories.js b/src/nationalarchives/utilities/colour/colour-themes.stories.js index c669dc2d..3b8da74c 100644 --- a/src/nationalarchives/utilities/colour/colour-themes.stories.js +++ b/src/nationalarchives/utilities/colour/colour-themes.stories.js @@ -241,7 +241,7 @@ const Template = ({ theme, accent }) => {
    -
    +

    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.

    @@ -639,17 +639,17 @@ const Template = ({ theme, accent }) => { { id: "unique-id-a", title: "Alpha section", - body: '

    Alpha title

    Lorem ipsum

    ', + body: "

    Lorem ipsum

    ", }, { id: "unique-id-b", title: "Beta section", - body: '

    Beta title

    Lorem ipsum

    ', + body: "

    Lorem ipsum

    ", }, { id: "unique-id-c", title: "Gamma section", - body: '

    Gamma title

    Lorem ipsum

    ', + body: "

    Lorem ipsum

    ", }, ], classes: "tna-tabs--demo", diff --git a/src/nationalarchives/utilities/grid/_index.scss b/src/nationalarchives/utilities/grid/_index.scss index 8e431831..0352e466 100644 --- a/src/nationalarchives/utilities/grid/_index.scss +++ b/src/nationalarchives/utilities/grid/_index.scss @@ -19,19 +19,31 @@ box-sizing: border-box; - &--no-padding, - &--no-padding-all { + & &--no-padding { max-width: gridVars.$largest-container-width - grid.gutter-width-double(); + padding-right: 0; + padding-left: 0; } &--max { max-width: none; } - &--centred { + &--centred, + &--align-centre { justify-content: center; } + &--align-right { + justify-content: flex-end; + } + + & &--nested { + width: auto; + margin-right: -#{grid.gutter-width()}; + margin-left: -#{grid.gutter-width()}; + } + @at-root #{selector.unify("ul", &)} { list-style: none; } @@ -43,11 +55,9 @@ box-sizing: border-box; - &--container { - display: flex; - flex-wrap: wrap; - align-items: stretch; - justify-content: stretch; + & &--no-padding { + padding-right: 0; + padding-left: 0; } &--align-top { @@ -69,32 +79,26 @@ @include grid.columns-generator(gridVars.$column-count-medium, "medium"); } +@include media.on-small { + @include grid.columns-generator(gridVars.$column-count-small, "small"); +} + @include media.on-tiny { .tna-container { padding-right: grid.gutter-width-tiny-half(); padding-left: grid.gutter-width-tiny-half(); + + & &--nested { + width: auto; + margin-right: -#{grid.gutter-width-tiny()}; + margin-left: -#{grid.gutter-width-tiny()}; + } } .tna-column { padding-right: grid.gutter-width-tiny-half(); padding-left: grid.gutter-width-tiny-half(); } -} -@include media.on-small { - @include grid.columns-generator(gridVars.$column-count-small, "small"); -} - -@include media.on-tiny { @include grid.columns-generator(gridVars.$column-count-tiny, "tiny"); } - -.tna-container--no-padding, -.tna-container--no-padding-all, -.tna-container--no-padding-all > .tna-column, -.tna-column--no-padding, -.tna-column--container--no-padding-all, -.tna-column--container--no-padding-all > .tna-column { - padding-right: 0; - padding-left: 0; -} diff --git a/src/nationalarchives/utilities/grid/grid.stories.js b/src/nationalarchives/utilities/grid/grid.stories.js index 301060a9..73f264fb 100644 --- a/src/nationalarchives/utilities/grid/grid.stories.js +++ b/src/nationalarchives/utilities/grid/grid.stories.js @@ -5,7 +5,7 @@ const argTypes = { columns: { control: "object" }, maxWidth: { control: "boolean" }, noPadding: { control: "boolean" }, - noPaddingAll: { control: "boolean" }, + nested: { control: "boolean" }, htmlElement: { control: "text" }, classes: { control: "text" }, attributes: { control: "object" }, @@ -26,7 +26,7 @@ const Template = ({ columns, maxWidth, noPadding, - noPaddingAll, + nested, htmlElement, classes, attributes, @@ -36,7 +36,7 @@ const Template = ({ columns, maxWidth, noPadding, - noPaddingAll, + nested, htmlElement, classes, attributes, diff --git a/src/nationalarchives/utilities/grid/macro-options.json b/src/nationalarchives/utilities/grid/macro-options.json index 95ab17c5..1e53b132 100644 --- a/src/nationalarchives/utilities/grid/macro-options.json +++ b/src/nationalarchives/utilities/grid/macro-options.json @@ -164,7 +164,7 @@ "description": "" }, { - "name": "noPaddingAll", + "name": "nested", "type": "boolean", "required": false, "description": "" diff --git a/src/nationalarchives/utilities/grid/template.njk b/src/nationalarchives/utilities/grid/template.njk index 12548d56..8fe56480 100644 --- a/src/nationalarchives/utilities/grid/template.njk +++ b/src/nationalarchives/utilities/grid/template.njk @@ -6,8 +6,8 @@ {%- if params.noPadding -%} {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%} {%- endif -%} -{%- if params.noPaddingAll -%} - {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%} +{%- if params.nested -%} + {%- set containerClasses = containerClasses.concat('tna-container--nested') -%} {%- endif -%} {%- set classes = containerClasses | join(' ') -%} <{{ htmlElement }} class="tna-container{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}> diff --git a/src/nationalarchives/utilities/lists/_index.scss b/src/nationalarchives/utilities/lists/_index.scss index cbddfbe4..54d960e1 100644 --- a/src/nationalarchives/utilities/lists/_index.scss +++ b/src/nationalarchives/utilities/lists/_index.scss @@ -276,3 +276,14 @@ ol { } } } + +li, +dd { + p { + margin-top: spacing.space(0.25); + + &:first-child { + margin-top: 0; + } + } +} diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/nationalarchives/utilities/typography/_index.scss index c25183e0..87518527 100644 --- a/src/nationalarchives/utilities/typography/_index.scss +++ b/src/nationalarchives/utilities/typography/_index.scss @@ -448,3 +448,8 @@ small { } } } + +address { + line-height: 1.375; + font-style: inherit; +}