@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js

@@ -9,6 +9,7 @@ import Header from "../../../components/header/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
 import Message from "../../../components/message/template.njk";
+import Pagination from "../../../components/pagination/template.njk";
 import PhaseBanner from "../../../components/phase-banner/template.njk";
 import Picture from "../../../components/picture/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
@@ -40,13 +41,13 @@ const Template = ({ theme, accent }) => {
     supertitle: "Card supertitle",
     title: "Card title",
     headingLevel: 3,
-    headingSize: "m",
+    headingSize: "s",
     href: "#",
     imageSrc:
       "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
     imageAlt: "The National Archives office",
-    imageWidth: 1996,
-    imageHeight: 1331,
+    imageWidth: 499,
+    imageHeight: 333,
     label: "New",
     body: "<p>Card body</p>",
     actions: [
@@ -86,11 +87,13 @@ const Template = ({ theme, accent }) => {
       : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
+    <!--
     ${CookieBanner({
       params: {
         cookiesUrl: "#",
       },
     })}
+    -->
     ${SkipLink({
       params: {
         href: "main-content",
@@ -101,6 +104,7 @@ const Template = ({ theme, accent }) => {
         phase: "beta",
         message:
           'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
+        classes: "tna-phase-banner--accent",
       },
     })}
     ${Header({
@@ -126,48 +130,53 @@ const Template = ({ theme, accent }) => {
         ],
       },
     })}
-    ${Breadcrumbs({
-      params: {
-        items: [
-          {
-            text: "Alpha",
-            href: "#/alpha",
-          },
-          {
-            text: "Beta",
-            href: "#/beta",
-          },
-          {
-            text: "Gamma",
-            href: "#/gamma",
-          },
-          {
-            text: "Delta",
-            href: "#/delta",
-          },
-          {
-            text: "Epsilon",
-            href: "#/epsilon",
+    <div class="tna-container">
+      <div class="tna-column tna-column--full">
+        ${Breadcrumbs({
+          params: {
+            items: [
+              {
+                text: "Alpha",
+                href: "#/alpha",
+              },
+              {
+                text: "Beta",
+                href: "#/beta",
+              },
+              {
+                text: "Gamma",
+                href: "#/gamma",
+              },
+              {
+                text: "Delta",
+                href: "#/delta",
+              },
+              {
+                text: "Epsilon",
+                href: "#/epsilon",
+              },
+            ],
           },
-        ],
-      },
-    })}
+        })}
+      </div>
+    </div>
     <main id="main-content" role="main">
       ${Hero({
         params: {
           heading: "Title",
-          image: {
-            src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-            alt: "The National Archives office",
-            width: 1996,
-            height: 1331,
-          },
+          body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+          imageSrc:
+            "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+          imageAlt: "The National Archives office",
+          imageWidth: 499,
+          imageHeight: 333,
+          imageCaption: "An interesting photo by a famous photographer ©2023",
           classes: "tna-hero--demo",
         },
       })}
       <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-l">
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
@@ -224,50 +233,74 @@ const Template = ({ theme, accent }) => {
             })}
           </div>
         </div>
-        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny">
-          <div class="tna-aside tna-background--contrast tna-!--margin-top-l-small tna-!--margin-top-xl-tiny">
-            <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>
-          </div>
-          <div class="tna-aside tna-background--accent">
-            <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>
+        <div class="tna-column tna-column--no-padding tna-column--width-1-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
+          <div class="tna-container tna-container--no-padding">
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
+              <div class="tna-aside tna-background--contrast">
+                <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>
+                <div class="tna-button-group">
+                  ${Button({
+                    params: {
+                      text: "Accent button",
+                      href: "#",
+                      accent: true,
+                    },
+                  })}
+                </div>
+              </div>
+            </div>
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-m tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
+              <div class="tna-aside tna-background--accent">
+                <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>
+                <div class="tna-button-group">
+                  ${Button({
+                    params: {
+                      text: "Primary button",
+                      href: "#",
+                      classes: "tna-button--solid-hover",
+                    },
+                  })}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <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>
@@ -281,18 +314,66 @@ 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-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-m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">
               <a href="#">Reaerching with The National Archives</a>
             </h2>
           </hgroup>
           <p>Lorem ipsum <a href="#">link</a></p>
-          <h2 class="tna-heading tna-heading--l">
+        </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-m">
+            Descriptions
+          </h3>
+          <dl class="tna-dl">
+            <dt>Alpha</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Beta</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Gamma</dt>
+            <dd>Lorem ipsum</dd>
+          </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-m">
+            Descriptions
+          </h3>
+          <dl class="tna-dl tna-dl--plain">
+            <dt>Alpha</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Beta</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Gamma</dt>
+            <dd>Lorem ipsum</dd>
+          </dl>
+        </div>
+        <div class="tna-column tna-column--full tna-!--margin-top-m">
+          <h3 class="tna-heading-m">
+            Descriptions
+          </h3>
+          <dl class="tna-dl tna-dl--icon-padding ">
+            <dt>
+              <i class="fa-solid fa-landmark"></i>
+              Held by
+            </dt>
+            <dd>The National Archives, Kew</dd>
+            <dt>
+              <i class="fa-solid fa-calendar"></i>
+              Date
+            </dt>
+            <dd>1972–1979</dd>
+            <dt>
+              <i class="fa-solid fa-database"></i>
+              Reference
+            </dt>
+            <dd>LC 4</dd>
+          </dl>
+          <h2 class="tna-heading-l">
             Categories
           </h2>
           <ul class="tna-chip-list">
@@ -317,15 +398,26 @@ const Template = ({ theme, accent }) => {
       <hr>
       <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
-          <p class="tna-!--no-margin-bottom">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!--padding-top-xs">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!--padding-top-s">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!--padding-top-m">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!--padding-top-l">Lorem ipsum</p>
-          <p class="tna-!--no-margin-bottom tna-!--padding-top-xl">Lorem ipsum</p>
+          <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>
         </div>
       </div>
-      <hr>
+      ${Hero({
+        params: {
+          imageSrc:
+            "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+          imageAlt: "The National Archives office",
+          imageWidth: 499,
+          imageHeight: 333,
+          imageCaption: "An interesting photo by a famous photographer ©2023",
+          classes: "tna-hero--demo",
+        },
+      })}
       <div class="tna-container tna-section tna-!--padding-bottom-s">
         <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
@@ -395,17 +487,17 @@ const Template = ({ theme, accent }) => {
                 {
                   id: "unique-id-a",
                   title: "Alpha section",
-                  body: '<h2 class="tna-heading">Alpha title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Alpha title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-b",
                   title: "Beta section",
-                  body: '<h2 class="tna-heading">Beta title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Beta title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-c",
                   title: "Gamma section",
-                  body: '<h2 class="tna-heading">Gamma title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Gamma title</h2><p>Lorem ipsum</p>',
                 },
               ],
               classes: "tna-tabs--demo",
@@ -420,8 +512,8 @@ const Template = ({ theme, accent }) => {
             params: {
               src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
               alt: "The National Archives office",
-              width: 1996,
-              height: 1331,
+              width: 499,
+              height: 333,
               caption: "<p>This is a pretty image</p>",
               transcript: "<p>Lorem ipsum transcript</p>",
               translation: "<p>Lorem ipsum translation</p>",
@@ -521,9 +613,51 @@ const Template = ({ theme, accent }) => {
         })}
         <div class="tna-container">
           <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                landmarkLabel: "My dogs 1 results",
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="#" class="tna-button" role="button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
             </div>
           </div>
         </div>
@@ -561,9 +695,51 @@ const Template = ({ theme, accent }) => {
         })}
         <div class="tna-container">
           <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                landmarkLabel: "My dogs 2 results",
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="#" class="tna-button" role="button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
             </div>
           </div>
         </div>
@@ -601,9 +777,51 @@ const Template = ({ theme, accent }) => {
         })}
         <div class="tna-container">
           <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                landmarkLabel: "My dogs 3 results",
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="#" class="tna-button" role="button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
             </div>
           </div>
         </div>
@@ -641,8 +859,51 @@ const Template = ({ theme, accent }) => {
         })}
         <div class="tna-container">
           <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                landmarkLabel: "My dogs 4 results",
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button" role="button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
             </div>
           </div>
         </div>
@@ -730,7 +991,7 @@ const Template = ({ theme, accent }) => {
             ],
           },
           {
-            title: "Our websites help",
+            title: "Our websites",
             items: [
               {
                 text: "UK Government Web Archive",

package/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 = {};

package/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>`;

package/nationalarchives/stories/utilities/typography/headings.stories.js

@@ -8,8 +8,8 @@ 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}>
@@ -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 = {