Headings and typograpy updates (#23)

* WIP: Change headings markup * Lint and update fixtures * Fix headers, split typograpy out * Reinstate <ul> and <dl> margin-top * Adjust padding for plain <dd> list with icons * Fix headings in cards * Reorder card headings * Fix more headings and spacing * Change space-below to space-above * Update card fixtures * Add missing space below headers * Fix issues with footer button, message and <dl> * Fix spacing on footer lists * Build Storybook with Webpack stats file * Reduce space above lists * Fix linting issues, message spacing * Remove unnecessary * selector
nationalarchives · Oct 20, 2023 · 80afced · 80afced
1 parent 0d2291f
commit 80afced
Show file tree

Hide file tree

Showing 34 changed files with 385 additions and 369 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - External link icons changed from CSS to icon font in header and footer
 - External links in footer have titles suffixed with "opens in new tab"
 - Links in footer and text in buttons have balanced wrapping applied
+- Header and header group class modifiers have been moved to separate blocks (`tna-heading tna-heading--xl` -> `tna-heading-xl`)
 
 ### Deprecated
 ### Removed

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "storybook build -o storybook",
+    "build": "storybook build -o storybook --webpack-stats-json",
     "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
     "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",

diff --git a/src/nationalarchives/components/button/_button-group.scss b/src/nationalarchives/components/button/_button-group.scss
@@ -7,7 +7,7 @@
   align-items: center;
   gap: 1rem;
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   @include media.on-tiny {
     flex-direction: column;

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -7,7 +7,7 @@
 @use "../button";
 
 .tna-card {
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   &__inner {
     display: flex;

diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -8,7 +8,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -19,7 +19,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup tna-hgroup--s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -30,7 +30,7 @@
         "headingSize": "xl",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -40,7 +40,7 @@
         "headingLevel": 1,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -51,7 +51,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -85,7 +85,7 @@
         "headingLevel": 3,
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -99,7 +99,7 @@
         "imageHeight": 360,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -119,7 +119,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -134,7 +134,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -151,7 +151,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {
@@ -162,7 +162,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -173,7 +173,7 @@
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -184,7 +184,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -195,7 +195,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -206,7 +206,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -219,7 +219,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -11,7 +11,7 @@
 <{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
   {%- if params.supertitle -%}
-    <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 's' }} tna-card__heading">
+    <hgroup class="tna-hgroup-{{ params.headingSize or 's' }} tna-card__heading">
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         <span class="tna-hgroup__supertitle">{{ params.supertitle }}</span>
         {%- if params.href -%}
@@ -22,7 +22,7 @@
       </h{{ params.headingLevel }}>
     </hgroup>
   {%- else -%}
-    <h{{ params.headingLevel }} class=" tna-heading tna-heading--{{ params.headingSize or 's' }} tna-card__heading">
+    <h{{ params.headingLevel }} class=" tna-heading-{{ params.headingSize or 's' }} tna-card__heading">
       {%- if params.href -%}
       <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
       {%- else -%}

diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk
@@ -4,7 +4,7 @@
 <div class="tna-cookie-banner {{ containerClasses | join(' ') }}" role="region" aria-label="Cookie usage" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies else 'usage,settings' }}" data-preferenceskey="{{ params.cookiesPreferencesSetKey if params.cookiesPreferencesSetKey else 'cookies_preferences_set' }}"{% if params.loadScriptsOnAccept %} data-acceptscripts="{{ params.loadScriptsOnAccept }}"{% endif %}{%- 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 tna-heading--m">This website uses cookies</h2>
+      <h2 class="tna-heading-m">This website uses cookies</h2>
       <p>We use some essential cookies to make this service work.</p>
       <p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
       <div class="tna-button-group">

diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss
@@ -6,7 +6,7 @@
   flex-wrap: wrap;
   gap: 0.75rem 1rem;
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   &__item {
   }