Updates from ETNA (#158)

* Reduce space above details components * Remove max height for gallery components * Add side padding to plain picture components * Allow sticky sidebars to be unstuck on smaller devices * Fix accordion demo * Added styles for <address> elements * Adjust paragrpah spacing in li and dd elements * Update CHANGELOG.md * Simplify nesting classes for containers and columns * Lint * Update grid stories and macro options
nationalarchives · Aug 16, 2024 · 86ecf1f · 86ecf1f
1 parent 38aae3d
commit 86ecf1f
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,17 +11,29 @@ 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 `<address>` elements
 
 ### Changed
 
 - Refactored tabs component
 - 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 `<p>` elements inside `<li>` and `<dd>` 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -241,7 +241,7 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
         <div class="tna-column tna-column--no-padding tna-column--width-1-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
-          <div class="tna-container tna-container--no-padding">
+          <div class="tna-container tna-container--nested">
             <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-vertical-m tna-!--no-margin-top-large">
               <div class="tna-aside tna-background-contrast">
                 <p>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.</p>
@@ -639,17 +639,17 @@ const Template = ({ theme, accent }) => {
                 {
                   id: "unique-id-a",
                   title: "Alpha section",
-                  body: '<h2 class="tna-heading-l">Alpha title</h2><p>Lorem ipsum</p>',
+                  body: "<p>Lorem ipsum</p>",
                 },
                 {
                   id: "unique-id-b",
                   title: "Beta section",
-                  body: '<h2 class="tna-heading-l">Beta title</h2><p>Lorem ipsum</p>',
+                  body: "<p>Lorem ipsum</p>",
                 },
                 {
                   id: "unique-id-c",
                   title: "Gamma section",
-                  body: '<h2 class="tna-heading-l">Gamma title</h2><p>Lorem ipsum</p>',
+                  body: "<p>Lorem ipsum</p>",
                 },
               ],
               classes: "tna-tabs--demo",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -448,3 +448,8 @@ small {
     }
   }
 }
+
+address {
+  line-height: 1.375;
+  font-style: inherit;
+}