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 `
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: 'Lorem ipsum
', + body: "Lorem ipsum
", }, { id: "unique-id-b", title: "Beta section", - body: 'Lorem ipsum
', + body: "Lorem ipsum
", }, { id: "unique-id-c", title: "Gamma section", - body: '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; +}