WIP: Change headings markup

nationalarchives · Oct 19, 2023 · 88566d3 · 88566d3
1 parent 0d2291f
commit 88566d3
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 64 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/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/footer/template.njk b/src/nationalarchives/components/footer/template.njk
@@ -9,7 +9,7 @@
           <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z"/>
         </g>
       </svg>
-      <h2 class="tna-heading tna-heading--m tna-footer__title">The National Archives</h2>
+      <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
       <address class="tna-footer__address">
         Kew, Richmond<br />
         TW9 4DU
@@ -50,7 +50,7 @@
     <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 }}">
-        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
           {{ group.title }}
         </h3>
         <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
@@ -72,7 +72,7 @@
     {%- if params.showNewsletter -%}
     <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
       <div class="tna-footer__mailing-list">
-        <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
+        <h3 class="tna-footer__navigation-block-heading tna-heading-m">
           Join the National Archives' mailing list
         </h3>
         <p>

diff --git a/src/nationalarchives/components/gallery/template.njk b/src/nationalarchives/components/gallery/template.njk
@@ -32,7 +32,7 @@
           items: item.tabs
         }) }}
         {%- else -%}
-        <h{{ params.heading.level + 1 }} class="tna-heading tna-heading--m">
+        <h{{ params.heading.level + 1 }} class="tna-heading-m">
           {{ item.tabs[0].title }}
         </h{{ params.heading.level + 1 }}>
         {{ item.tabs[0].body|safe }}

diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk
@@ -19,7 +19,7 @@
       <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
         <div class="tna-hero__content-inner">
         {%- if params.heading -%}
-          <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+          <h1 class="tna-heading-xl tna-hero__heading">
             {{ params.heading }}
           </h1>
         {%- endif -%}

diff --git a/src/nationalarchives/components/profile/template.njk b/src/nationalarchives/components/profile/template.njk
@@ -4,7 +4,7 @@
     <img src="https://avatar.iran.liara.run/public/68" width="200" height="200" alt="Photo of Max Smith" />
   </div>
   <div class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-column--order-1 tna-column--order-3-small tna-column--order-3-tiny">
-    <hgroup class="tna-hgroup tna-hgroup--xl">
+    <hgroup class="tna-hgroup-xl">
       <p class="tna-hgroup__supertitle">Profile</p>
       <h1 class="tna-hgroup__title tna-heading">Max Smith</h1>
     </hgroup>

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -176,7 +176,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--l">
+          <hgroup class="tna-hgroup-l">
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
@@ -269,38 +269,38 @@ const Template = ({ theme, accent }) => {
       <hr>
       <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
-          <h1 class="tna-heading tna-heading--xl">
+          <h1 class="tna-heading-xl">
             This is a heading (XL)
           </h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <h2 class="tna-heading tna-heading--l">
+          <h2 class="tna-heading-l">
             This is a heading (L)
           </h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             This is a heading (M)
           </h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <h4 class="tna-heading tna-heading--s">
+          <h4 class="tna-heading-s">
             This is a heading (S)
           </h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <hgroup class="tna-hgroup tna-hgroup--xl">
+          <hgroup class="tna-hgroup-xl">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (XL)</h2>
           </hgroup>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <hgroup class="tna-hgroup tna-hgroup--l">
+          <hgroup class="tna-hgroup-l">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (L)</h2>
           </hgroup>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <hgroup class="tna-hgroup tna-hgroup--m">
+          <hgroup class="tna-hgroup-m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (M)</h2>
           </hgroup>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <hgroup class="tna-hgroup tna-hgroup--s">
+          <hgroup class="tna-hgroup-s">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (S)</h2>
           </hgroup>
@@ -314,7 +314,7 @@ const Template = ({ theme, accent }) => {
             </div>
             <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
           </blockquote>
-          <h2 class="tna-heading tna-heading--m">
+          <h2 class="tna-heading-m">
             <a href="#">Reaerching with The National Archives</a>
           </h2>
           <p>Lorem ipsum <a href="#">link</a></p>
@@ -327,7 +327,7 @@ const Template = ({ theme, accent }) => {
           <p>Lorem ipsum <a href="#">link</a></p>
         </div>
         <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl">
@@ -340,7 +340,7 @@ const Template = ({ theme, accent }) => {
           </dl>
         </div>
         <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl tna-dl--plain">
@@ -353,7 +353,7 @@ const Template = ({ theme, accent }) => {
           </dl>
         </div>
         <div class="tna-column tna-column--full tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl tna-dl--icon-padding ">
@@ -373,7 +373,7 @@ const Template = ({ theme, accent }) => {
             </dt>
             <dd>LC 4</dd>
           </dl>
-          <h2 class="tna-heading tna-heading--l">
+          <h2 class="tna-heading-l">
             Categories
           </h2>
           <ul class="tna-chip-list">

diff --git a/src/nationalarchives/stories/utilities/typography/heading-groups.stories.js b/src/nationalarchives/stories/utilities/typography/heading-groups.stories.js
@@ -19,13 +19,13 @@ const Template = ({
   singleSentence,
 }) =>
   singleSentence
-    ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
+    ? `<hgroup class="tna-hgroup-${size}">
   <h${level} class="tna-hgroup__title">
   <span class="tna-hgroup__supertitle">${supertitle}</span>
   <span class="tna-hgroup__title">${title}</span>
 </h${level}>
 </hgroup>`
-    : `<hgroup class="tna-hgroup tna-hgroup--${size}">
+    : `<hgroup class="tna-hgroup-${size}">
   <p class="tna-hgroup__supertitle">${supertitle}</p>
   <h${level} class="tna-hgroup__title">${title}</h${level}>
 </hgroup>`;

diff --git a/src/nationalarchives/stories/utilities/typography/headings.stories.js b/src/nationalarchives/stories/utilities/typography/headings.stories.js
@@ -8,9 +8,7 @@ export default {
   argTypes,
 };
 
-const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
-  params.size ? ` tna-heading--${params.size}` : ""
-}">
+const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading-${params.size}">
   ${params.text} (${params.size.toUpperCase()})
 </h${level}>
 `;

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 tna-heading--s">
+  `<h2 class="tna-heading-s">
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});

diff --git a/src/nationalarchives/templates/homepage.njk b/src/nationalarchives/templates/homepage.njk
@@ -8,7 +8,7 @@
   <div class="tna-section">
     <div class="tna-container">
       <div class="tna-column tna-column--full">
-        <h1 class="tna-heading tna-heading--xl">
+        <h1 class="tna-heading-xl">
           Welcome
         </h1>
       </div>

diff --git a/src/nationalarchives/templates/search-results.njk b/src/nationalarchives/templates/search-results.njk
@@ -12,7 +12,7 @@
     <main class="tna-main-wrapper tna-column tna-column--container tna-column--3-4 tna-column--width-2-3-medium tna-column--full-small tna-column--full-tiny {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
       {% block beforeContent %}{% endblock %}
       <div class="tna-column tna-column--full">
-        <h1 class="tna-heading tna-heading--xl">
+        <h1 class="tna-heading-xl">
           Search results for "foobar"
         </h1>
       </div>

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -79,8 +79,12 @@ strong {
 p {
   margin: 0 0 1rem;
 
-  @include media.on-tiny {
-    margin-bottom: 1rem;
+  // @include media.on-tiny {
+  //   margin-bottom: 1rem;
+  // }
+
+  + *:not(p, ul, ol) {
+    margin-top: 2rem;
   }
 
   &:last-child {
@@ -124,8 +128,8 @@ small {
 
 .tna-ul,
 .tna-ol {
-  margin-top: 0;
-  margin-right: 0;
+  // margin-top: 0;
+  // margin-right: 0;
   margin-left: 0;
   padding: 0 0 0 2rem;
 
@@ -331,6 +335,8 @@ small {
 }
 
 %heading {
+  @extend %headings-and-heading-groups;
+
   @include colour.colour-font("font-dark");
 
   text-wrap: balance;
@@ -359,6 +365,8 @@ small {
 }
 
 %heading-xl {
+  @extend %heading;
+
   @include typography.heading-font;
   @include typography.relative-font-size(64);
   line-height: 1.2;
@@ -373,6 +381,8 @@ small {
 }
 
 %heading-l {
+  @extend %heading;
+
   @include typography.heading-font;
   @include typography.relative-font-size(32);
   line-height: 1.3;
@@ -387,38 +397,59 @@ small {
 }
 
 %heading-m {
+  @extend %heading;
+
   @include typography.main-font-weight-bold;
   @include typography.relative-font-size(22);
   line-height: 1.6;
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(20);
+  }
 }
 
 %heading-s {
+  @extend %heading;
+
   @include typography.main-font-weight-bold;
   @include typography.relative-font-size(18);
   line-height: 1.6;
 }
 
-.tna-heading {
-  @extend %heading;
+%headings-and-heading-groups {
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
 
-  &--xl {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.tna-heading {
+  &-xl {
     @extend %heading-xl;
   }
 
-  &--l {
+  &-l {
     @extend %heading-l;
   }
 
-  &--m {
+  &-m {
     @extend %heading-m;
   }
 
-  &--s {
+  &-s {
     @extend %heading-s;
   }
 }
 
 .tna-hgroup {
+  @extend %headings-and-heading-groups;
+
   &__supertitle {
     margin: 0 0 0.25rem;
 
@@ -429,46 +460,25 @@ small {
     margin: 0;
 
     display: block;
-
-    @extend %heading;
   }
 
-  &--xl &__title {
+  &-xl &__title {
     @extend %heading-xl;
   }
 
-  &--l &__title {
+  &-l &__title {
     @extend %heading-l;
   }
 
-  &--m &__title {
+  &-m &__title {
     @extend %heading-m;
   }
 
-  &--s &__title {
+  &-s &__title {
     @extend %heading-s;
   }
 }
 
-.tna-heading,
-.tna-hgroup {
-  margin-top: 3rem;
-  margin-bottom: 1rem;
-
-  // &--m,
-  // &--s {
-  //   margin-bottom: 0.5rem;
-  // }
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .tna-blockquote {
   margin-top: 0;
   margin-right: 0;