Spacing refactor (#108)

* Refactor spacing, update global header package * Refactored spacing and typography * Simplify SCSS
nationalarchives · Mar 22, 2024 · 4e8127a · 4e8127a
1 parent c78aa24
commit 4e8127a
Show file tree

Hide file tree

Showing 55 changed files with 531 additions and 347 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,10 +8,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.48...HEAD)
 
 ### Added
+
+- Spacing can now be defined in relative terms (e.g. `1`, `3`, `0.25`) which is converted to absolute values
+
 ### Changed
+
+- Changed grid dimensions (max width, gutters etc.) from `rem` units to `px`
+- Changed all spacing (margin, padding and gap) to use `spacing.space()` tool for relative sizes
+
 ### Deprecated
 ### Removed
+
+- Removed strapline option for global header
+
 ### Fixed
+
+- Removed explicit font size on `tna-template` allowing browser-defined font sizes
+
 ### Security
 
 ## [0.1.48](https://github.com/nationalarchives/tna-frontend/compare/v0.1.47...v0.1.48) - 2024-03-21

diff --git a/src/nationalarchives/analytics.mjs b/src/nationalarchives/analytics.mjs
@@ -246,14 +246,11 @@ class GA4 extends EventTracker {
       return GA4._instance;
     }
     const {
-      id = null,
+      id = "",
       prefix = null,
       initAll = true,
       addTrackingCode = true,
     } = options;
-    if (!id) {
-      throw Error("ID was not specified");
-    }
     super({ prefix, addTrackingCode });
     GA4._instance = this;
     this.gTagId = id;
@@ -301,6 +298,9 @@ class GA4 extends EventTracker {
       window[this.ga4Disable] = false;
       this.cookies.set(this.ga4Disable, "false");
       if (!this.trackingCodeAdded && this.addTrackingCode) {
+        if (!this.gTagId) {
+          throw Error("ID was not specified");
+        }
         this.pushToDataLayer({
           "gtm.start": new Date().getTime(),
           event: "gtm.js",

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -1,10 +1,11 @@
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/spacing";
 @use "../../tools/typography";
 
 .tna-breadcrumbs {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: spacing.space(1);
+  padding-bottom: spacing.space(1);
 
   &:focus {
     outline: none !important;
@@ -25,7 +26,7 @@
 
     + .tna-breadcrumbs__item {
       &::before {
-        margin: 0 0.75rem;
+        margin: 0 spacing.space(0.75);
 
         display: inline-block;
 
@@ -59,8 +60,8 @@
     }
 
     @include colour.on-high-contrast-and-forced-colours {
-      padding-right: 0.75rem;
-      padding-left: 0.75rem;
+      padding-right: spacing.space(0.75);
+      padding-left: spacing.space(0.75);
 
       text-decoration: none;
 

diff --git a/src/nationalarchives/components/button/_button-group.scss b/src/nationalarchives/components/button/_button-group.scss
@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 1rem;
+  gap: spacing.space(1);
 
   @include spacing.space-above;
 
@@ -15,6 +15,6 @@
   }
 
   &--small {
-    gap: 0.5rem;
+    gap: spacing.space(0.5);
   }
 }
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -1,16 +1,17 @@
 @use "sass:math";
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/spacing";
 @use "../../tools/typography";
 @use "button-group";
 
 .tna-button {
-  padding: 0.25rem 1rem;
+  padding: spacing.space(0.25) spacing.space(1);
 
   display: inline-flex;
   align-items: baseline;
   justify-content: center;
-  gap: 0.75rem;
+  gap: spacing.space(0.75);
 
   @include typography.relative-font-size(18);
   @include typography.main-font-weight-bold;
@@ -85,7 +86,7 @@
 
   &--small,
   &-group--small & {
-    padding: 0 0.5rem;
+    padding: 0 spacing.space(0.5);
 
     @include typography.relative-font-size(14);
     line-height: 1.5rem;

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -1,8 +1,8 @@
 @use "sass:math";
 @use "../../tools/colour";
-@use "../../tools/typography";
 @use "../../tools/media";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-card {
   @include spacing.space-above;
@@ -24,7 +24,7 @@
 
   &__image-container {
     height: 0;
-    margin-bottom: 1rem;
+    margin-bottom: spacing.space(1);
     padding-bottom: #{math.div(2, 3) * 100%};
 
     position: relative;
@@ -44,38 +44,38 @@
   }
 
   &__image-label {
-    max-width: calc(100% - 1rem);
+    max-width: calc(100% - #{spacing.space(1)});
 
     position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
+    top: spacing.space(0.5);
+    left: spacing.space(0.5);
   }
 
   &__body {
-    padding-top: 1rem;
+    padding-top: spacing.space(1);
 
     order: 3;
   }
 
   &__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem 1.5rem;
+    gap: spacing.space(0.5) spacing.space(1.5);
 
     line-height: 1.3;
 
     list-style: none;
 
     + p {
-      margin-top: 1rem;
+      margin-top: spacing.space(1);
     }
   }
 
   &__actions {
-    margin-top: 1rem;
+    margin-top: spacing.space(1);
 
     display: flex;
-    gap: 1rem 2rem;
+    gap: spacing.space(1) spacing.space(2);
 
     order: 4;
   }
@@ -87,14 +87,14 @@
   &--contrast,
   &--accent {
     .tna-card__inner {
-      padding-bottom: 1rem;
+      padding-bottom: spacing.space(1);
     }
 
     .tna-card__heading,
     .tna-card__body,
     .tna-card__actions {
-      margin-right: 1rem;
-      margin-left: 1rem;
+      margin-right: spacing.space(1);
+      margin-left: spacing.space(1);
     }
   }
 
@@ -120,7 +120,7 @@
     @include media.on-larger-than-mobile {
       .tna-card__inner {
         margin-left: 50%;
-        padding: 2rem;
+        padding: spacing.space(2);
       }
 
       .tna-card__image-container {
@@ -148,24 +148,24 @@
   &--horizontal#{&}--accent {
     @include media.on-mobile {
       .tna-card__inner {
-        padding: 0 0 1rem;
+        padding: 0 0 spacing.space(1);
       }
 
       .tna-card__image-container {
-        margin-bottom: 1rem;
+        margin-bottom: spacing.space(1);
       }
 
       .tna-card__heading,
       .tna-card__body,
       .tna-card__actions {
-        margin-right: 1rem;
-        margin-left: 1rem;
+        margin-right: spacing.space(1);
+        margin-left: spacing.space(1);
       }
     }
   }
 
   &__inner:has(&__heading + &__body) {
-    padding-top: 0.5rem;
+    padding-top: spacing.space(0.5);
 
     @include colour.thick-keyline-dark(top);
   }
@@ -175,14 +175,14 @@
 
     &:not(#{&}--horizontal) {
       .tna-card__inner {
-        padding-bottom: 1rem;
+        padding-bottom: spacing.space(1);
       }
 
       .tna-card__heading,
       .tna-card__body,
       .tna-card__actions {
-        margin-right: 1rem;
-        margin-left: 1rem;
+        margin-right: spacing.space(1);
+        margin-left: spacing.space(1);
       }
     }
   }

diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss
@@ -2,12 +2,13 @@
 @use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/spacing";
 
 .tna-checkboxes {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: spacing.space(1);
 
   &__item {
     position: relative;
@@ -26,7 +27,7 @@
     }
 
     &-label {
-      padding-left: 3rem;
+      padding-left: spacing.space(3);
 
       display: block;
 
@@ -85,12 +86,12 @@
   }
 
   &--small {
-    gap: 0.5rem;
+    gap: spacing.space(0.5);
   }
 
   &--small &__item {
     &-label {
-      padding-left: 2.25rem;
+      padding-left: spacing.space(2.25);
 
       line-height: 1.5rem;
 
@@ -113,7 +114,7 @@
   &--inline {
     flex-flow: row wrap;
     align-items: center;
-    gap: 1rem 2rem;
+    gap: spacing.space(1) spacing.space(2);
 
     @include media.on-tiny {
       flex-direction: column;

diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss
@@ -8,15 +8,15 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.75rem 1rem;
+  gap: spacing.space(0.75) spacing.space(1);
 
   list-style: none;
 
   &__item {
-    padding: 0 0.125rem 0 0.75rem;
+    padding: 0 spacing.space(0.125) 0 spacing.space(0.75);
 
     display: flex;
-    gap: 0.5rem;
+    gap: spacing.space(0.5);
     align-items: center;
 
     @include typography.relative-font-size(16);

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
@@ -4,8 +4,8 @@
 @use "../../tools/typography";
 
 .tna-cookie-banner {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: spacing.space(2);
+  padding-bottom: spacing.space(2);
 
   &--contrast {
     @include colour.contrast;

diff --git a/src/nationalarchives/components/date-input/date-input.scss b/src/nationalarchives/components/date-input/date-input.scss
@@ -1,10 +1,11 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
+@use "../../tools/spacing";
 @use "../../tools/typography";
 
 .tna-date-input {
   display: flex;
-  gap: 1rem;
+  gap: spacing.space(1);
 
   &__item {
     &-label {
@@ -15,7 +16,7 @@
 
     &-input {
       width: 3rem;
-      padding: 0 0.375rem;
+      padding: 0 spacing.space(0.375);
 
       display: block;
       box-sizing: border-box;

diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss
@@ -1,9 +1,10 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
+@use "../../tools/spacing";
 
 .tna-date-search {
   max-width: 100%;
-  padding: 0 0.375rem;
+  padding: 0 spacing.space(0.375);
 
   display: block;
   box-sizing: border-box;