From 90e945be8e7e310276cc66f5f001375ecf88c2a6 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Fri, 20 Oct 2023 18:13:48 +0100
Subject: [PATCH] Fix issues with footer button, message and <dl>

---
 .github/workflows/pull-request.yml            |  2 +-
 .../components/footer/footer.scss             |  4 +--
 .../components/message/message.scss           |  2 ++
 .../utilities/overrides/overrides.stories.js  | 31 ++++++-------------
 src/nationalarchives/utilities/_lists.scss    | 12 ++-----
 .../utilities/_typography.scss                |  4 +++
 6 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 1fd55d1d..e6a8dda1 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build Storybook
-        run: npm run build
+        run: npm run build --webpack-stats-json
       - uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss
index 008d6e4d..27ec84b5 100644
--- a/src/nationalarchives/components/footer/footer.scss
+++ b/src/nationalarchives/components/footer/footer.scss
@@ -17,7 +17,6 @@
 
   .tna-logo {
     margin-top: 2rem;
-    margin-bottom: 1rem;
 
     &__background {
       fill: transparent;
@@ -29,8 +28,9 @@
   }
 
   &__title {
-    margin-top: 0;
+    margin-top: 1rem;
     margin-bottom: 0;
+    padding-top: 0;
   }
 
   &__address {
diff --git a/src/nationalarchives/components/message/message.scss b/src/nationalarchives/components/message/message.scss
index 25e59498..cdcbda73 100644
--- a/src/nationalarchives/components/message/message.scss
+++ b/src/nationalarchives/components/message/message.scss
@@ -31,6 +31,8 @@
   }
 
   &__message {
+    margin-top: 0;
+
     flex: 1;
   }
 }
diff --git a/src/nationalarchives/stories/utilities/overrides/overrides.stories.js b/src/nationalarchives/stories/utilities/overrides/overrides.stories.js
index 06d61614..fae644c9 100644
--- a/src/nationalarchives/stories/utilities/overrides/overrides.stories.js
+++ b/src/nationalarchives/stories/utilities/overrides/overrides.stories.js
@@ -1,30 +1,19 @@
-const argTypes = {
-  marginTop: {
-    control: "radio",
-    options: ["none", "xs", "s", "m", "l", "xl"],
-  },
-};
+const argTypes = {};
 
 export default {
   title: "Utilities/Overrides",
   argTypes,
 };
 
-const Template = ({ marginTop }) => {
-  const marginClass =
-    marginTop === "none"
-      ? `tna-!--no-margin-top`
-      : `tna-!--margin-top-${marginTop}`;
-  return `<p class="tna-!--margin-bottom-xl">Lorem ipsum (tna-!--margin-bottom-xl)</p>
-    <p class="tna-!--margin-bottom-l">Lorem ipsum (tna-!--margin-bottom-l)</p>
-    <p class="tna-!--margin-bottom-m">Lorem ipsum (tna-!--margin-bottom-m)</p>
-    <p class="tna-!--margin-bottom-s">Lorem ipsum (tna-!--margin-bottom-s)</p>
-    <p class="tna-!--margin-bottom-xs">Lorem ipsum (tna-!--margin-bottom-xs)</p>
-    <p class="tna-!--no-margin-bottom">Lorem ipsum (tna-!--no-margin-bottom)</p>
-    <p class="${marginClass}">Lorem ipsum (${marginClass})</p>`;
+const Template = () => {
+  return `<p>Lorem ipsum</p>
+  <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
+  <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
+  <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
+  <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
+  <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
+  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>`;
 };
 
 export const Margin = Template.bind({});
-Margin.args = {
-  marginTop: "none",
-};
+Margin.args = {};
diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss
index f735e4fb..ff5cb4d6 100644
--- a/src/nationalarchives/utilities/_lists.scss
+++ b/src/nationalarchives/utilities/_lists.scss
@@ -58,16 +58,16 @@
   }
 
   dt {
-    width: 25%;
+    width: 30%;
 
     @include typography.main-font-weight-bold;
   }
 
   dd {
-    width: 75%;
+    width: 70%;
 
     + dd {
-      margin-left: 25%;
+      margin-left: 30%;
     }
   }
 
@@ -107,12 +107,6 @@
   }
 
   &:not(&--plain) {
-    dt,
-    dd {
-      // padding-left: 1rem;
-      // padding-right: 1rem;
-    }
-
     dt:first-child,
     dd:nth-of-type(2n) + dt,
     dd:nth-of-type(2n + 1) {
diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
index e37b6041..08e82d28 100644
--- a/src/nationalarchives/utilities/_typography.scss
+++ b/src/nationalarchives/utilities/_typography.scss
@@ -82,6 +82,10 @@ p {
   &:first-child {
     margin-top: 0;
   }
+
+  + * {
+    @include spacing.space-above;
+  }
 }
 
 a {