@nationalarchives/frontend 0.2.6 → 0.2.8

package/nationalarchives/utilities/_animations.scss

@@ -0,0 +1,10 @@
+@keyframes image-loader-background {
+  0%,
+  100% {
+    background-position: 0 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @use "a11y";
+@use "animations";
 @use "areas";
 @use "colour";
 @use "columns";

package/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;
-}

package/nationalarchives/utilities/grid/macro-options.json

@@ -164,7 +164,7 @@
     "description": ""
   },
   {
-    "name": "noPaddingAll",
+    "name": "nested",
     "type": "boolean",
     "required": false,
     "description": ""

package/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 %}>

package/nationalarchives/utilities/lists/_index.scss

@@ -276,3 +276,14 @@ ol {
     }
   }
 }
+
+li,
+dd {
+  p {
+    margin-top: spacing.space(0.25);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}

package/nationalarchives/utilities/typography/_index.scss

@@ -448,3 +448,8 @@ small {
     }
   }
 }
+
+address {
+  line-height: 1.375;
+  font-style: inherit;
+}

package/nationalarchives/variables/_features.scss

@@ -1 +1,2 @@
 $debug-interactable-areas: false !default;
+$disable-image-loader-animations: false !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",