Spacing updates (#110)

* Separate spacing from font sizes, remove role attributes * Make headings customisable, tweak colours * Update release action to post changelog to Slack
nationalarchives · Mar 26, 2024 · c14d4ef · c14d4ef
1 parent beb030d
commit c14d4ef
Show file tree

Hide file tree

Showing 28 changed files with 317 additions and 206 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -170,11 +170,19 @@ jobs:
       - publish-npm-global-header
     steps:
       - uses: actions/checkout@v4
-      - name: Get release notes
-        id: get-release-notes
-        run: ./tasks/get-release-notes.sh "${{ needs.version-check.outputs.version }}" > RELEASE_NOTES.txt
+      - name: Get the release notes
+        id: release-notes
+        run: |
+          {
+            echo 'RELEASE_NOTES<<EOF'
+            ./tasks/get-release-notes.sh ${{ needs.version-check.outputs.version }}
+            echo EOF
+          } >> "$GITHUB_ENV"
       - uses: rtCamp/action-slack-notify@v2
         env:
           SLACK_TITLE: "`v${{ needs.version-check.outputs.version }}` of `tna-frontend` has just been published"
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
           SLACK_ICON: "https://raw.githubusercontent.com/nationalarchives/tna-frontend/main/src/nationalarchives/assets/images/apple-touch-icon.png"
+          MSG_MINIMAL: true
+          SLACKIFY_MARKDOWN: true
+          SLACK_MESSAGE: ${{ steps.release-notes.outputs.RELEASE_NOTES }}
diff --git a/.htmlvalidate.json b/.htmlvalidate.json
@@ -5,8 +5,6 @@
     "close-order": "error",
     "form-dup-name": 0,
     "no-inline-style": 0,
-    "no-redundant-role": 0,
-    "no-trailing-whitespace": 0,
-    "void-style": 0
+    "no-trailing-whitespace": 0
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,21 +10,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Spacing can now be defined in relative terms (e.g. `1`, `3`, `0.25`) which is converted to absolute values
+- Added a `$spacing-unit-px` variable to allow the setting of the base unit for all spacing
+- Heading sizes and line heights are now customisable
 
 ### 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
+- Tweaked some of the dark and contrasting colours
 
 ### Deprecated
 ### Removed
 
 - Removed strapline option for global header
+- Removed all redundant `role` attributes in line with GOV.UK Frontend v5.3.0
 
 ### Fixed
 
 - Removed explicit font size on `tna-template` allowing browser-defined font sizes
 - Removed focus from elements with a `tabindex` of `-1`
+- Fixed background colour of headers on system themes
 
 ### Security
 

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -172,8 +172,10 @@
 
   @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px);
+  }
 
-    &:not(#{&}--horizontal) {
+  &:not(#{&}--horizontal) {
+    @include colour.on-high-contrast-and-forced-colours {
       .tna-card__inner {
         padding-bottom: spacing.space(1);
       }

diff --git a/src/nationalarchives/components/cookie-banner/fixtures.json b/src/nationalarchives/components/cookie-banner/fixtures.json
diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk
@@ -8,7 +8,7 @@
 {%- elseif params.style == "tint" -%}
   {%- set containerClasses = containerClasses.concat('tna-cookie-banner--tint') -%}
 {%- endif -%}
-<section class="tna-cookie-banner {{ containerClasses | join(' ') }}" data-module="tna-cookie-banner" role="region" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} hidden>
+<section class="tna-cookie-banner {{ containerClasses | join(' ') }}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} hidden>
   <div class="tna-container">
     <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
       <h2 class="tna-heading-m">This website uses cookies</h2>

diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
@@ -26,7 +26,7 @@
         <h3 class="tna-!--visually-hidden">
           Follow us
         </h3>
-        <nav class="tna-footer__social" role="navigation" aria-label="Social">
+        <nav class="tna-footer__social" aria-label="Social">
           <ul class="tna-ul tna-ul--plain tna-footer__social-items">
           {%- for item in params.social %}
             <li class="tna-footer__social-item">
@@ -61,7 +61,7 @@
     {%- if params.navigation %}
     <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
       {%- for group in params.navigation %}
-      <nav class="tna-footer__navigation-block tna-columns__block" role="navigation" aria-label="{{ group.title }}">
+      <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
         {%- if not group.hideTitle %}
         <h3 class="tna-footer__navigation-block-heading tna-heading-m">
           {{ group.title }}
@@ -102,7 +102,7 @@
   </div>
   <div class="tna-container">
     {%- if params.legal %}
-    <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="Legal">
+    <nav class="tna-footer__legal tna-column tna-column--full" aria-label="Legal">
       <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
         {%- for item in params.legal %}
         <li class="tna-footer__legal-item">

diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
@@ -10,6 +10,7 @@
   padding-top: spacing.space(1);
 
   @include colour.contrast;
+  background: #000;
 
   .tna-template--light-theme & {
     background: linear-gradient(
@@ -19,11 +20,7 @@
     );
   }
 
-  .tna-template--dark-theme & {
-    background: #000;
-  }
-
-  .tna-template--system-theme {
+  .tna-template--system-theme & {
     @media (prefers-color-scheme: light) {
       background: linear-gradient(
         0deg,
@@ -361,7 +358,7 @@
     }
 
     &__navigation {
-      width: calc(100% + #{grid.gutter-width(2)});
+      width: calc(100% + #{grid.gutter-width-double()});
 
       left: -#{grid.gutter-width()};
     }
@@ -382,7 +379,7 @@
     }
 
     &__navigation {
-      width: calc(100% + #{grid.gutter-width-tiny(2)});
+      width: calc(100% + #{grid.gutter-width-tiny-double()});
 
       left: -#{grid.gutter-width-tiny()};
     }
@@ -391,4 +388,10 @@
       padding: spacing.space(0.5) grid.gutter-width-tiny();
     }
   }
+
+  @include colour.on-high-contrast {
+    &__top-navigation-link {
+      @include colour.colour-font("link");
+    }
+  }
 }
diff --git a/src/nationalarchives/components/grid/grid.scss b/src/nationalarchives/components/grid/grid.scss
@@ -8,8 +8,8 @@
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding-right: grid.gutter-width(0.5);
-  padding-left: grid.gutter-width(0.5);
+  padding-right: grid.gutter-width-half();
+  padding-left: grid.gutter-width-half();
 
   box-sizing: border-box;
 
@@ -20,7 +20,7 @@
 
   &--no-padding,
   &--no-padding-all {
-    max-width: gridVars.$largest-container-width - grid.gutter-width(2);
+    max-width: gridVars.$largest-container-width - grid.gutter-width-double();
   }
 
   &--max {
@@ -33,8 +33,8 @@
 }
 
 .tna-column {
-  padding-right: grid.gutter-width(0.5);
-  padding-left: grid.gutter-width(0.5);
+  padding-right: grid.gutter-width-half();
+  padding-left: grid.gutter-width-half();
 
   box-sizing: border-box;
 
@@ -66,13 +66,13 @@
 
 @include media.on-tiny {
   .tna-container {
-    padding-right: grid.gutter-width-tiny(0.5);
-    padding-left: grid.gutter-width-tiny(0.5);
+    padding-right: grid.gutter-width-tiny-half();
+    padding-left: grid.gutter-width-tiny-half();
   }
 
   .tna-column {
-    padding-right: grid.gutter-width-tiny(0.5);
-    padding-left: grid.gutter-width-tiny(0.5);
+    padding-right: grid.gutter-width-tiny-half();
+    padding-left: grid.gutter-width-tiny-half();
   }
 }
 

diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -21,7 +21,7 @@
     );
   }
 
-  .tna-template--system-theme {
+  .tna-template--system-theme & {
     @media (prefers-color-scheme: light) {
       background: linear-gradient(
         0deg,
@@ -482,22 +482,22 @@
     }
   }
 
-  @include colour.on-high-contrast {
-    &::after {
-      @include colour.colour-border("keyline-dark");
-    }
-
-    @include media.on-larger-than-mobile {
-      &__navigation-item-link {
-        &:hover,
-        &--selected {
-          &,
-          &:link,
-          &:visited {
-            @include colour.colour-border("keyline-dark");
-          }
-        }
-      }
-    }
-  }
+  // @include colour.on-high-contrast {
+  //   &::after {
+  //     @include colour.colour-border("keyline-dark");
+  //   }
+
+  //   @include media.on-larger-than-mobile {
+  //     &__navigation-item-link {
+  //       &:hover,
+  //       &--selected {
+  //         &,
+  //         &:link,
+  //         &:visited {
+  //           @include colour.colour-border("keyline-dark");
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 }
diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -61,7 +61,7 @@
 
   @include media.on-tiny {
     .tna-column & {
-      width: calc(100% + #{grid.gutter-width-tiny(2)});
+      width: calc(100% + #{grid.gutter-width-tiny-double()});
 
       position: relative;
       left: -#{grid.gutter-width-tiny()};

diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss
@@ -9,7 +9,7 @@ $textarea-vertical-padding: 0.25 !default;
 .tna-textarea {
   width: 100%;
   min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) + (
-      spacing.space($textarea-vertical-padding, 2)
+      spacing.space($textarea-vertical-padding * 2)
     )};
   padding: spacing.space($textarea-vertical-padding) spacing.space(0.5);
 

diff --git a/src/nationalarchives/global-header-package.scss b/src/nationalarchives/global-header-package.scss
@@ -3,7 +3,7 @@
 @use "sass:math";
 // @use "variables/assets";
 @use "variables/grid" as gridVars with (
-  $largest-container-width: 1300px,
+  $largest-container-width: 1270px,
   $gutter-width: math.div(30, 16),
   $gutter-width-tiny: math.div(15, 16)
 );
@@ -195,9 +195,11 @@ hr {
 
     &-item {
       margin-left: 0;
+      margin-bottom: 0;
     }
 
     &-link {
+      display: flex !important;
       @include colour.colour-font("font-light", true);
 
       &:hover {
@@ -221,12 +223,28 @@ hr {
   .tna-heading-m {
     font-weight: 400;
     line-height: 1.5;
+    letter-spacing: -0.025em;
   }
 
   &__social-item,
   &__navigation-block-item,
   &__legal-item {
     margin-left: 0;
+    margin-bottom: 0;
+  }
+
+  &__social-item-link {
+    box-sizing: content-box;
+  }
+
+  address {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0 !important;
+    @include colour.colour-border("keyline", 1px, solid, top);
+    border-bottom: none !important;
   }
 
   &__licence p {
@@ -276,6 +294,12 @@ hr {
       background: none;
     }
 
+    &:hover:focus {
+      color: unset !important;
+
+      background: unset !important;
+    }
+
     &.tna-link--no-visited-state {
       &:visited {
         @include colour.colour-font("link");