@nationalarchives/frontend 0.31.0 → 0.33.0

package/nationalarchives/tools/_colour.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use "sass:map";
+@use "sass:meta";
 @use "../variables/borders";
 @use "../variables/forms";
 @use "../variables/colour";
@@ -85,16 +86,17 @@ $base-colours: (
 }
 
 @mixin colour-font($colour, $important: false) {
-  color: colour-var($colour) if($important, !important, null);
+  color: colour-var($colour) if(sass($important): !important; else: null);
 }
 
 @mixin colour-background($colour, $important: false) {
-  background-color: colour-var($colour) if($important, !important, null);
+  background-color: colour-var($colour)
+    if(sass($important): !important; else: null);
 }
 
 @mixin colour-background-brand($brandColour, $important: false) {
   background-color: #{brand-colour($brandColour)}
-    if($important, !important, null);
+    if(sass($important): !important; else: null);
 }
 
 @mixin colour-border(
@@ -109,37 +111,41 @@ $base-colours: (
       border-#{$direction}: $width
         colour-var($colour)
         $style
-        if($important, !important, null);
+        if(sass($important): !important; else: null);
     } @else {
       border-#{$direction}-color: colour-var($colour)
-        if($important, !important, null);
+        if(sass($important): !important; else: null);
     }
   } @else {
     @if $width != "" {
       border: $width
         colour-var($colour)
         $style
-        if($important, !important, null);
+        if(sass($important): !important; else: null);
     } @else {
       border-color: var(
           --#{$colour},
           #{map.get(colour.$colour-palette-default, $colour)}
         )
-        if($important, !important, null);
+        if(sass($important): !important; else: null);
     }
   }
 }
 
 @mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
   @if $width != "" {
-    outline: $width colour-var($colour) $style if($important, !important, null);
+    outline: $width
+      colour-var($colour)
+      $style
+      if(sass($important): !important; else: null);
   } @else {
-    outline-color: colour-var($colour) if($important, !important, null);
+    outline-color: colour-var($colour)
+      if(sass($important): !important; else: null);
   }
 }
 
 @mixin colour-fill($colour, $important: false) {
-  fill: colour-var($colour) if($important, !important, null);
+  fill: colour-var($colour) if(sass($important): !important; else: null);
 }
 
 %colour-input {
@@ -534,17 +540,25 @@ $base-colours: (
   }
 }
 
+%image-loader-background {
+  background: linear-gradient(
+    -45deg,
+    rgb(0 0 0 / 25%),
+    rgb(255 255 255 / 25%),
+    rgb(0 0 0 / 25%)
+  );
+  background-size: 500% 500%;
+  background-position: 0 50%;
+
+  animation: image-loader-background ease-in-out 1.2s infinite;
+
+  @media (prefers-reduced-motion) {
+    animation: none !important;
+  }
+}
+
 @mixin image-loader-background {
   @if features.$image-loader-animations {
-    background: linear-gradient(
-      -45deg,
-      rgb(0 0 0 / 25%),
-      rgb(255 255 255 / 25%),
-      rgb(0 0 0 / 25%)
-    );
-    background-size: 500% 500%;
-    background-position: 0 50%;
-
-    animation: image-loader-background ease-in-out 1.2s infinite;
+    @extend %image-loader-background;
   }
 }

package/nationalarchives/tools/_spacing.scss

@@ -4,21 +4,37 @@
 @use "../variables/typography";
 @use "../tools/media";
 
+/*
+ * ------------------------------------------
+ * Spacing is created with rem rather than px
+ * units as when users use a custom font size
+ * some browsers handle the resize of rem and
+ * em separately from px which causes spacing
+ * and layout issues, so to ensure everything
+ * remaians consistent we use rem for spacing
+ * and typography. The original intention was
+ * separation so that we could scale the type
+ * without affecting spacing, but in practice
+ * there are too many ways to change the font
+ * size in various browsers and devices
+ * ------------------------------------------
+ */
 @function space($size) {
-  @return #{$size * spacing.$spacing-unit-px}px;
+  // @return #{$size * spacing.$spacing-unit-px}px;
+  @return #{$size}rem;
 }
 
 %space-above {
   margin-top: space(2);
-
-  &:first-child {
-    margin-top: 0;
-  }
+  @extend %no-space-above-for-first-children;
 }
 
 %space-only-above {
   margin: #{space(2)} 0 0;
+  @extend %no-space-above-for-first-children;
+}
 
+%no-space-above-for-first-children {
   &:first-child {
     margin-top: 0;
   }

package/nationalarchives/utilities/_reset.scss

@@ -5,15 +5,6 @@
   margin: 0;
   padding: 0;
 
-  @media (prefers-reduced-motion) {
-    &,
-    &::before,
-    &::after {
-      animation: none !important;
-      transition: none !important;
-    }
-  }
-
   @media (prefers-contrast: more) {
     background-image: none;
   }
@@ -34,30 +25,19 @@
  * If the browser supports -apple-system-body
  * which at the moment is just iOS then using
  * the system body font we can respond to the
- * Dynamic Type setting in iOS
+ * Dynamic Type setting in iOS, however we do
+ * disable it for any non-touch Apple devices
+ * such as Mac OS, because the default system
+ * font size is set to 13px rather than 16px
  * ------------------------------------------
  */
-@supports (font: -apple-system-body) {
+@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
   html {
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font: -apple-system-body;
   }
 }
 
-/*
- * ------------------------------------------
- * Disable Apple's Dynamic Type for non-touch
- * devices (like Mac OS), because the default
- * system body size is defined as 13px rather
- * than 16px like on other devices
- * ------------------------------------------
- */
-@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
-  html {
-    @include typography.font-size(16);
-  }
-}
-
 img,
 svg,
 picture,

package/nationalarchives/utilities/lists/_index.scss

@@ -4,14 +4,36 @@
 @use "../../tools/typography";
 @use "../../utilities/typography" as typographyUtils;
 
-ul,
-ol {
-  margin: 0;
-  padding: 0;
+ul {
+  list-style-type: disc;
+
+  & & {
+    list-style-type: circle;
+  }
+
+  & & & {
+    list-style-type: square;
+  }
+
+  & & & & {
+    list-style-type: disc;
+  }
 }
 
-.tna-ul {
-  list-style-type: disc;
+ol {
+  list-style-type: decimal;
+
+  & & {
+    list-style-type: lower-alpha;
+  }
+
+  & & & {
+    list-style-type: lower-roman;
+  }
+
+  & & & & {
+    list-style-type: decimal;
+  }
 }
 
 .tna-ul,
@@ -25,16 +47,12 @@ ol {
 
   &--plain {
     padding-left: 0;
-  }
 
-  &--plain,
-  &--no-list-style {
-    list-style: none;
-  }
+    list-style: none !important;
 
-  & > li > & {
-    margin-top: 0;
-    padding-left: spacing.space(1.25);
+    > li::marker {
+      content: "";
+    }
   }
 
   > li {
@@ -43,21 +61,20 @@ ol {
     }
   }
 
-  &--spaced > li + li {
-    margin-top: spacing.space(0.5);
-  }
-
-  &--spaced > li > & {
-    margin-top: spacing.space(1);
-    margin-bottom: spacing.space(1);
-  }
-
   &--dashed {
     > li::marker {
       content: "—  ";
       @include typography.main-font-weight;
     }
   }
+
+  &--spaced > li + li {
+    margin-top: spacing.space(0.5);
+  }
+
+  &:not(&--plain) > li > & {
+    padding-left: spacing.space(1.25);
+  }
 }
 
 .tna-dl-chips {
@@ -105,211 +122,130 @@ ol {
 }
 
 @mixin stacked-dl {
-  > dt,
-  > dd {
-    width: 100%;
-    margin-left: 0;
-  }
+  display: block;
 
-  > dd {
-    padding-left: spacing.space(1);
-  }
-
-  &.tna-dl--plain {
-    > dt {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .fa-solid {
-        margin-top: 0;
-      }
-    }
+  &--lined {
+    padding-bottom: 0;
 
     > dd {
-      margin-left: 0;
+      border-top: none;
+
       padding-top: 0;
+      padding-bottom: spacing.space(0.5);
     }
   }
 
-  &:not(.tna-dl--plain) {
+  &--zebra {
     > dt {
-      @include colour.colour-background("background-tint");
+      --background: var(--background-tint);
 
-      @include colour.colour-font("font-base");
+      @include colour.colour-background("background");
     }
 
-    > dd {
-      margin-left: 0;
-
-      background: transparent !important;
-    }
-  }
-
-  @include colour.on-high-contrast-and-forced-colours {
-    > dd {
-      border-top: none !important;
-    }
-
-    &.tna-dl--plain {
-      > dt {
-        padding-top: spacing.space(0.5) !important;
-      }
-    }
-
-    &.tna-dl--icon-padding.tna-dl--plain {
-      > dt {
-        .fa-solid {
-          margin-top: spacing.space(0.5) !important;
-        }
-      }
-    }
-
-    &.tna-dl--stacked:not(.tna-dl--plain) {
-      > dt {
-        padding-bottom: 0 !important;
-      }
+    > dd:nth-child(1n) {
+      background: none;
     }
   }
 }
 
 .tna-dl {
-  @include spacing.space-above(true);
+  @include spacing.space-above;
 
-  display: flex;
-  flex-wrap: wrap;
-
-  &:first-child {
-    margin-top: 0;
-  }
+  display: grid;
+  grid-template-columns: max-content;
+  gap: spacing.space(0.5) 0;
 
   > dt,
   > dd {
     margin: 0;
-    padding: spacing.space(0.5) spacing.space(1);
 
-    box-sizing: border-box;
+    overflow-wrap: break-word;
+  }
 
+  > dt {
+    @include typography.main-font-weight-bold;
     position: relative;
 
-    overflow-wrap: break-word;
-  }
+    .fa-solid,
+    .fa-brands {
+      display: block;
 
-  &--plain {
-    > dt {
-      padding-top: 0;
-      padding-left: 0;
-    }
+      position: absolute;
+      top: 0;
+      left: 0;
 
-    > dd {
-      padding-top: 0;
-      padding-right: 0;
+      line-height: inherit;
+      @include colour.colour-font("icon-light");
     }
   }
 
-  &--plain#{&}--spaced {
-    > dt,
-    > dd {
-      padding-bottom: spacing.space(1.25);
+  &:has(> dt > .fa-solid, > dt > .fa-brands) {
+    > dt {
+      padding-left: spacing.space(2);
     }
   }
 
-  > dt {
-    width: 30%;
-
-    @include typography.main-font-weight-bold;
-  }
-
   > dd {
-    width: 70%;
+    padding-left: spacing.space(2);
 
-    + dd {
-      margin-left: 30%;
-    }
+    grid-column-start: 2;
   }
 
-  &--icon-padding {
-    > dt {
-      padding-left: 3rem !important;
-
-      position: relative;
+  &--lined {
+    padding-bottom: spacing.space(0.5);
+    @include colour.colour-border("keyline", 1px, solid, bottom);
 
-      .fa-solid {
-        overflow: visible;
+    /* stylelint-disable-next-line no-descending-specificity */
+    > dt,
+    > dd {
+      padding-top: spacing.space(0.5);
+      @include colour.colour-border("keyline", 1px, solid, top);
 
-        position: absolute;
+      .fa-solid,
+      .fa-brands {
         top: spacing.space(0.5);
-        left: spacing.space(1);
-
-        line-height: inherit;
-
-        @include colour.colour-font("icon-light");
       }
     }
   }
 
-  &--icon-padding#{&}--plain {
-    > dt {
-      padding-left: spacing.space(2) !important;
+  &--zebra {
+    gap: 0;
 
-      .fa-solid {
-        top: 0;
-        left: 0;
-      }
+    /* stylelint-disable-next-line no-descending-specificity */
+    > dt,
+    > dd {
+      padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
+        spacing.space(1);
     }
 
-    > dd {
-      padding-left: spacing.space(2);
+    > dt {
+      .fa-solid,
+      .fa-brands {
+        top: spacing.space(0.5);
+        left: spacing.space(1);
+      }
     }
-  }
 
-  &:not(&--plain) {
     > dt:first-child,
     > dd:nth-of-type(2n) + dt,
     > dd:nth-of-type(2n + 1) {
       @include colour.tint;
     }
-  }
-
-  @include media.on-small {
-    > dt {
-      width: 35%;
-    }
-
-    > dd {
-      width: 65%;
 
-      + dd {
-        margin-left: 35%;
+    &:has(> dt > .fa-solid, > dt > .fa-brands) {
+      > dt {
+        padding-left: spacing.space(3);
       }
     }
   }
 
-  &--stacked {
+  &--stacked#{&} {
     @include stacked-dl;
   }
 
-  @include media.on-tiny {
+  @include media.on-mobile {
     @include stacked-dl;
   }
-
-  @include colour.on-high-contrast-and-forced-colours {
-    @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-
-    > dt,
-    > dd {
-      background: transparent !important;
-
-      @include colour.colour-border("keyline-dark", 1px, solid, top);
-    }
-
-    &--plain {
-      > dt,
-      > dt .fa-solid,
-      > dd {
-        padding-top: spacing.space(0.5);
-      }
-    }
-  }
 }
 
 li,