Update tna-frontend to 0.1.23-prerelease

nationalarchives · Oct 25, 2023 · 8b8cad0 · 8b8cad0
1 parent 8f6a17c
commit 8b8cad0
Show file tree

Hide file tree

Showing 16 changed files with 46 additions and 34 deletions.
diff --git a/.metalsmith/markdownRenderer.js b/.metalsmith/markdownRenderer.js
@@ -14,27 +14,27 @@ markdownRenderer.heading = function (text, level) {
   let headingSize = "";
   switch (level) {
     case 1:
-      headingSize = "tna-heading--xl";
+      headingSize = "xl";
       break;
     case 2:
-      headingSize = "tna-heading--l";
+      headingSize = "l";
       break;
     case 3:
-      headingSize = "tna-heading--m";
+      headingSize = "m";
       break;
     case 4:
     case 5:
     case 6:
-      headingSize = "tna-heading--s";
+      headingSize = "s";
       break;
   }
   const slug = slugify(text);
   return level === 1
-    ? `<h${level} class="tna-heading ${headingSize}">
+    ? `<h${level} class="tna-heading-${headingSize}">
   ${text}
 </h${level}>`
     : `
-  <h${level} id="${slug}" class="tna-heading ${headingSize} tna-heading--no-link-arrow">
+  <h${level} id="${slug}" class="tna-heading-${headingSize} tna-heading--no-link-arrow">
     ${text} <a href="#${slug}" aria-hidden="true"><i class="fa-solid fa-link"></i></a>
   </h${level}>`;
 };

diff --git a/build/components/index.html b/build/components/index.html
@@ -27,7 +27,7 @@
   <header class="tna-hero ">
     <img src="https://picsum.photos/id/29/640/360" alt="A placeholder image" class="tna-hero__image"><div class="tna-container tna-hero__inner">
         <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"><h1 class="tna-heading tna-heading--xl tna-hero__heading">
+            <div class="tna-hero__content-inner"><h1 class="tna-heading-xl tna-hero__heading">
                     Components
                 </h1><div class="tna-hero__body"></div>
             </div>

diff --git a/build/index.html b/build/index.html
@@ -27,7 +27,7 @@
   <header class="tna-hero ">
     <img src="https://picsum.photos/id/29/640/360" alt="A placeholder image" class="tna-hero__image"><div class="tna-container tna-hero__inner">
         <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"><h1 class="tna-heading tna-heading--xl tna-hero__heading">
+            <div class="tna-hero__content-inner"><h1 class="tna-heading-xl tna-hero__heading">
                     Welcome
                 </h1><div class="tna-hero__body"><p>Designing services for The National Archives</p></div>
             </div>
@@ -40,7 +40,7 @@
     <div class="tna-container">
       <div class="tna-column tna-column--full">
 
-  <h2 class="tna-heading tna-heading--l">
+  <h2 class="tna-heading-l">
     Welcome to The National Archives Design System
   </h2>
   <p class="tna-p">

diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk
@@ -61,7 +61,8 @@
 {% block header %}
   {{ tnaPhaseBanner({
     phase: "Alpha",
-    message: "This is a new service – <a href='https://github.com/nationalarchives/design-system/issues/new'>give us your feedback</a> to help improve it."
+    message: "This is a new service – <a href='https://github.com/nationalarchives/design-system/issues/new'>give us your feedback</a> to help improve it.",
+    classes: "tna-phase-banner--accent"
   }) }}
 
   {% set topLevelNavigation = [] %}

diff --git a/layouts/_example.njk b/layouts/_example.njk
@@ -70,7 +70,9 @@
                 <td class="tna-table__cell" width="25%">{{option.type}}</td>
                 <td class="tna-table__cell" width="50%">
                   {% if (option.required === true) %}
-                    <strong>Required.</strong>
+                    <p>
+                      <strong>Required.</strong>
+                    </p>
                   {% endif %}
                   {{ option.description | safe }}
                   {% if (option.isComponent) -%}

diff --git a/layouts/collection-page.njk b/layouts/collection-page.njk
@@ -17,11 +17,11 @@
   <div class="tna-container">
     <main class="tna-column tna-column--width-3-4 tna-column--width-2-3-medium tna-column--full-small tna-column--full-tiny {{ mainClasses }} tna-section" id="main-content" role="main">
       {% if group|kebabToSpace|capitalize == title|capitalize %}
-      <h1 class="tna-heading tna-heading--xl">
+      <h1 class="tna-heading-xl">
         {{ title }}
       </h1>
       {% else %}
-      <hgroup class="tna-hgroup tna-hgroup--xl">
+      <hgroup class="tna-hgroup-xl">
         <p class="tna-hgroup__supertitle">{{ group|kebabToSpace|capitalize }}</p>
         <h1 class="tna-hgroup__title">{{ title }}</h1>
       </hgroup>
@@ -40,7 +40,7 @@
       {{ contents | safe }}
     </main>
     <nav id="{{ group }}-list" class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny tna-section" role="navigation" aria-label="{{ title }} navigation">
-      <h2 class="tna-heading tna-heading--l tna-visually-hidden tna-!--visually-hidden">All {{ group }}</h2>
+      <h2 class="tna-heading-l tna-visually-hidden tna-!--visually-hidden">All {{ group }}</h2>
       <ol class="tna-ds-sidebar">
       {% for item in collections[group] %}
         {% if item.path == path %}

diff --git a/layouts/homepage.njk b/layouts/homepage.njk
@@ -7,7 +7,7 @@
 {% block main %}
   {{ tnaHero({
     heading: "Design your service using National Archives styles, components and patterns",
-    body: "<p>Use this design system to make government services consistent with The National Archives. Learn from the research and experience of other service teams and avoid repeating work that has already been done.</p>" + tnaButton({ text: "Get started", href: "/design-system/get-started/", classes: "tna-button--large" }),
+    body: "<p>Use this design system to make government services consistent with The National Archives. Learn from the research and experience of other service teams and avoid repeating work that has already been done.</p><div class=\"tna-button-group\">" + tnaButton({ text: "Get started", href: "/design-system/get-started/", classes: "tna-button--large" }) + "</div>",
     imageSrc: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
     imageAlt: "The front of The National Archives office in Kew",
     imageWidth: 640,

diff --git a/layouts/sitemap.njk b/layouts/sitemap.njk
@@ -4,15 +4,15 @@
   <div class="tna-section">
     <div class="tna-container">
       <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
-        <h1 class="tna-heading tna-heading--xl">
+        <h1 class="tna-heading-xl">
           {{ title }}
         </h1>
         {{ contents | safe }}
-        <h2 class="tna-heading tna-heading--l">
+        <h2 class="tna-heading-l">
           <a href="/design-system">{{ collections.home[0].title }}</a>
         </h2>
         {%- for section in collections.top %}
-        <h2 class="tna-heading tna-heading--l">
+        <h2 class="tna-heading-l">
           <a href="/design-system/{{ section.path }}">{{ section.title }}</a>
         </h2>
         <ul class="tna-ul tna-ul--plain">
@@ -25,7 +25,7 @@
         {%- endfor %}
         <!--
         {%- for page in collections.legal %}
-        <h2 class="tna-heading tna-heading--l">
+        <h2 class="tna-heading-l">
           <a href="/design-system/{{ page.path }}">{{ page.title }}</a>
         </h2>
         {%- endfor %}

diff --git a/lib/index.js b/lib/index.js
@@ -25,7 +25,7 @@ if (cookies.isPolicyAccepted("settings")) {
     "tna-columns__block",
   );
   themeSwitcher.setAttribute("aria-label", "Theme switcher");
-  themeSwitcher.innerHTML = `<h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">Themes</h3>
+  themeSwitcher.innerHTML = `<h3 class="tna-footer__navigation-block-heading tna-heading-m">Themes</h3>
   <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain"></ul>`;
 
   const themeSwitcherItems = themeSwitcher.querySelector(

diff --git a/lib/index.scss b/lib/index.scss
@@ -85,7 +85,7 @@ $code-background: #f1ece9;
   }
 
   &-component-example {
-    @include spacing.space-below;
+    @include spacing.space-above;
 
     @include colour.colour-border("keyline", 1px);
 
@@ -260,7 +260,10 @@ table {
   }
 }
 
-.tna-heading {
+.tna-heading-s,
+.tna-heading-m,
+.tna-heading-l,
+.tna-heading-xl {
   a[href^="#"] {
     width: 1.5rem;
 
@@ -334,6 +337,12 @@ table {
 
   &__cell {
   }
+
+  p {
+    + p {
+      margin-top: 0.5rem;
+    }
+  }
 }
 
 .tna-colour-swatch {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@metalsmith/markdown": "^1.10.0",
     "@metalsmith/permalinks": "^2.5.1",
     "@metalsmith/sass": "^1.6.0",
-    "@nationalarchives/frontend": "^0.1.21-prerelease",
+    "@nationalarchives/frontend": "^0.1.23-prerelease",
     "glob": "^10.3.4",
     "gray-matter": "^4.0.3",
     "js-beautify": "^1.14.8",

diff --git a/src/styles/typography/headings-with-separate-supertitles/index.njk b/src/styles/typography/headings-with-separate-supertitles/index.njk
@@ -3,7 +3,7 @@ title: Headings with separate supertitles
 layout: layout-example.njk
 ---
 
-<hgroup class="tna-hgroup tna-hgroup--xl">
+<hgroup class="tna-hgroup-xl">
   <p class="tna-hgroup__supertitle">Supertitle</p>
   <h1 class="tna-hgroup__title">Title</h1>
 </hgroup>
diff --git a/src/styles/typography/headings-with-supertitles/index.njk b/src/styles/typography/headings-with-supertitles/index.njk
@@ -3,7 +3,7 @@ title: Headings with supertitles
 layout: layout-example.njk
 ---
 
-<hgroup class="tna-hgroup tna-hgroup--xl">
+<hgroup class="tna-hgroup-xl">
   <h1>
     <span class="tna-hgroup__supertitle">Supertitle</span>
     <span class="tna-hgroup__title">Title</span>

diff --git a/src/styles/typography/headings/index.njk b/src/styles/typography/headings/index.njk
@@ -3,7 +3,7 @@ title: Headings
 layout: layout-example.njk
 ---
 
-<h1 class="tna-heading tna-heading--xl">tna-heading--xl</h1>
-<h2 class="tna-heading tna-heading--l">tna-heading--l</h2>
-<h3 class="tna-heading tna-heading--m">tna-heading--m</h3>
-<h4 class="tna-heading tna-heading--s">tna-heading--s</h4>
+<h1 class="tna-heading-xl">tna-heading-xl</h1>
+<h2 class="tna-heading-l">tna-heading-l</h2>
+<h3 class="tna-heading-m">tna-heading-m</h3>
+<h4 class="tna-heading-s">tna-heading-s</h4>
diff --git a/src/styles/typography/index.md b/src/styles/typography/index.md
@@ -10,7 +10,7 @@ group: styles
 
 Write all headings in sentence case.
 
-Use heading tags, such as `<h1>`, `<h2>` and so on, to tag the headings on a page. Apply a heading class, such as `tna-heading--l`, to style them visually. Style headings consistently to create a clear content structure throughout your service.
+Use heading tags, such as `<h1>`, `<h2>` and so on, to tag the headings on a page. Apply a heading class, such as `tna-heading-l`, to style them visually. Style headings consistently to create a clear content structure throughout your service.
 
 {{ example({ group: "styles", item: "typography", example: "headings", html: true, nunjucks: false, open: false }) }}