Fix issues with footer button, message and <dl>

nationalarchives · Oct 20, 2023 · 90e945b · 90e945b
1 parent a0f79fb
commit 90e945b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -82,6 +82,10 @@ p {
   &:first-child {
     margin-top: 0;
   }
+
+  + * {
+    @include spacing.space-above;
+  }
 }
 
 a {
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,6 +82,10 @@ p { @@
       &:first-child {
         margin-top: 0;
       }
+      + * {
+        @include spacing.space-above;
+      }
     }
     a {
@@ Expand Down @@