Restyle headings

nationalarchives · Oct 4, 2023 · 7695a88 · 7695a88
1 parent aed2176
commit 7695a88
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,7 +23,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Focus on the confirmation message of the cookie banner once accepted or rejected
 - `hideCookieBannerKey` property on cookie banner changed to `cookiesPreferencesSetKey`
-- The heading size of "The National Archives" in the footer is reduced from `l` to `m`
 - When using the prototype kit, `<p>` tags have some alterations that remove the default GOV.UK styling
 - When using the system theme, JavaScript is no longer required to write specific theme classes to the `<html>` element - all of this is done in CSS
 - Standalone CSS such as `components/button.css` no longer includes Font Awesome
@@ -32,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The SCSS mixin `colour-outline` now accepts optional width and style properties
 - In coloured blocks, the custom CSS property `--background` now gets explictly replaced with `--accent-background`, `--contrast-background` or `--accent-background-light`
 - `typography.$base-font-size-px` is now `typography.$relative-1rem-px`
+- `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss
@@ -4,7 +4,7 @@
 .tna-filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.75rem 1rem;
 
   @include spacing.space-below;
 

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -168,7 +168,7 @@ const Template = ({ theme, accent }) => {
       })}
       <div class="tna-container tna-section">
         <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
-          <hgroup class="tna-hgroup tna-hgroup--xl">
+          <hgroup class="tna-hgroup tna-hgroup--l">
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
@@ -300,11 +300,11 @@ const Template = ({ theme, accent }) => {
             </div>
             <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
           </blockquote>
-          <h2 class="tna-heading tna-heading--l">
+          <h2 class="tna-heading tna-heading--m">
             <a href="#">Reaerching with The National Archives</a>
           </h2>
           <p>Lorem ipsum <a href="#">link</a></p>
-          <hgroup class="tna-hgroup tna-hgroup--l">
+          <hgroup class="tna-hgroup tna-hgroup--m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">
               <a href="#">Reaerching with The National Archives</a>

diff --git a/src/nationalarchives/stories/utilities/typography/headings.stories.js b/src/nationalarchives/stories/utilities/typography/headings.stories.js
@@ -19,7 +19,10 @@ const HeadingsTemplate = ({ text }) =>
   `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate(
     { params: { text, size: "l" } },
     2,
-  )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}`;
+  )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}${HeadingTemplate(
+    { params: { text, size: "s" } },
+    4,
+  )}`;
 
 export const Headings = HeadingsTemplate.bind({});
 Headings.args = {

diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js
@@ -19,7 +19,7 @@ Paragraph.args = {
 };
 
 const HeadingLinkTemplate = ({ text, href }) =>
-  `<h2 class="tna-heading">
+  `<h2 class="tna-heading tna-heading--s">
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -323,7 +323,6 @@ small {
 
 %heading {
   @include colour.colour-font("font-dark");
-  @include typography.heading-font;
 
   text-wrap: balance;
 
@@ -351,12 +350,12 @@ small {
 }
 
 %heading-xl {
+  @include typography.heading-font;
   @include typography.relative-font-size(64);
   line-height: 1.2;
 
   @include media.on-medium {
-    // @include typography.relative-font-size(42);
-    @include typography.relative-font-size(50);
+    @include typography.relative-font-size(42);
   }
 
   @include media.on-mobile {
@@ -365,12 +364,12 @@ small {
 }
 
 %heading-l {
+  @include typography.heading-font;
   @include typography.relative-font-size(32);
-  line-height: 1.4;
+  line-height: 1.3;
 
   @include media.on-medium {
-    // @include typography.relative-font-size(26);
-    @include typography.relative-font-size(28);
+    @include typography.relative-font-size(26);
   }
 
   @include media.on-mobile {
@@ -379,11 +378,13 @@ small {
 }
 
 %heading-m {
-  @include typography.relative-font-size(20);
+  @include typography.main-font-weight-bold;
+  @include typography.relative-font-size(22);
   line-height: 1.6;
 }
 
 %heading-s {
+  @include typography.main-font-weight-bold;
   @include typography.relative-font-size(18);
   line-height: 1.6;
 }