Update TNA Frontend

nationalarchives · Mar 11, 2024 · 34d6a2b · 34d6a2b
1 parent 417c76c
commit 34d6a2b
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 59 deletions.
diff --git a/layouts/homepage.njk b/layouts/homepage.njk
@@ -22,88 +22,52 @@
       </div>
     </div>
     <div class="tna-section tna-!--no-padding-bottom">
-      <ul class="tna-ul tna-ul--plain tna-container">
+      <menu class="tna-ul tna-ul--plain tna-container">
         <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
           {{ tnaCard({
             title: "Styles",
+            href: "/design-system/styles/",
             headingLevel: 2,
             headingSize: "m",
             body: "<p>Make your service look part of The National Archives with guides for applying layout, typography, colour and images.</p>",
-            imageSrc: "https://fakeimg.pl/600x400/9c193a/fff?text=Styles&font=bebas",
-            imageAlt: "",
-            imageWidth: 600,
-            imageHeight: 400,
             htmlElement: "article",
-            hrefClasses: "tna-link--no-visited-state",
-            actions: [
-              {
-                text: "Browse styles",
-                href: "/design-system/styles/"
-              }
-            ]
+            hrefClasses: "tna-link--no-visited-state"
           }) }}
         </li>
         <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
           {{ tnaCard({
             title: "Components",
+            href: "/design-system/components/",
             headingLevel: 2,
             headingSize: "m",
             body: "<p>Save time with reusable, accessible components for forms, navigation, panels, tables and more.</p>",
-            imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Components&font=bebas",
-            imageAlt: "",
-            imageWidth: 600,
-            imageHeight: 400,
             htmlElement: "article",
-            hrefClasses: "tna-link--no-visited-state",
-            actions: [
-              {
-                text: "Browse components",
-                href: "/design-system/components/"
-              }
-            ]
+            hrefClasses: "tna-link--no-visited-state"
           }) }}
         </li>
         <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
           {{ tnaCard({
             title: "Content",
+            href: "/design-system/content/",
             headingLevel: 2,
             headingSize: "m",
             body: "<p>Create content in a consistent and understandable way that makes it easier for users to use your service.</p>",
-            imageSrc: "https://fakeimg.pl/600x400/004c7e/fff?text=Content&font=bebas",
-            imageAlt: "",
-            imageWidth: 600,
-            imageHeight: 400,
             htmlElement: "article",
-            hrefClasses: "tna-link--no-visited-state",
-            actions: [
-              {
-                text: "Browse content",
-                href: "/design-system/content/"
-              }
-            ]
+            hrefClasses: "tna-link--no-visited-state"
           }) }}
         </li>
         <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
           {{ tnaCard({
             title: "Performance",
+            href: "/design-system/performance/",
             headingLevel: 2,
             headingSize: "m",
             body: "<p>Understand the habits of your users to help you make better decisions about how to run your service.</p>",
-            imageSrc: "https://fakeimg.pl/600x400/8f3415/fff?text=Performance&font=bebas",
-            imageAlt: "",
-            imageWidth: 600,
-            imageHeight: 400,
             htmlElement: "article",
-            hrefClasses: "tna-link--no-visited-state",
-            actions: [
-              {
-                text: "Browse performance",
-                href: "/design-system/performance/"
-              }
-            ]
+            hrefClasses: "tna-link--no-visited-state"
           }) }}
         </li>
-      </ul>
+      </menu>
     </div>
     <hr>
     <div class="tna-section">

diff --git a/layouts/sitemap.njk b/layouts/sitemap.njk
@@ -20,7 +20,7 @@
         {% if section.description %}
           <p>{{ section.description }}</p>
         {% endif %}
-        <ul class="tna-ul">
+        <menu class="tna-ul">
           {%- for page in collections[section.group] %}
           <li>
             <a href="/design-system/{{ page.path }}" class="tna-link--no-visited-state">{{ page.title }}</a>
@@ -29,7 +29,7 @@
             -->
           </li>
           {%- endfor %}
-        </ul>
+        </menu>
         {%- endfor %}
       </div>
     </div>

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.42",
+    "@nationalarchives/frontend": "0.1.43",
     "glob": "^10.3.4",
     "gray-matter": "^4.0.3",
     "js-beautify": "^1.14.8",

diff --git a/src/components/card/list/index.njk b/src/components/card/list/index.njk
@@ -7,7 +7,7 @@ private: true
 {% from "nationalarchives/components/card/macro.njk" import tnaCard %}
 
 <div class="tna-section tna-!--no-padding-bottom">
-  <ul class="tna-ul tna-ul--plain tna-container">
+  <menu class="tna-ul tna-ul--plain tna-container">
     {% for i in range(0, 3) -%}
     <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
       {{ tnaCard({
@@ -24,5 +24,5 @@ private: true
       }) }}
     </li>
     {% endfor -%}
-  </ul>
+  </menu>
 </div>
diff --git a/src/index.md b/src/index.md
@@ -6,10 +6,10 @@ description: Designing services for The National Archives
 
 ## What’s new
 
-**1 March 2024**: We've released TNA Frontend v0.1.42
+**11 March 2024**: We've released TNA Frontend v0.1.43
 
-This release introduces a new [error summary component](/design-system/components/error-summary/) as well as renaming the filters component to [quick filters](/design-system/components/quick-filters/).
+This release brings improvements to the markup of the header and footer compoents whilst also improving some aspects of tracking.
 
-Also included is a first draft of a new [analytics library](https://github.com/nationalarchives/tna-frontend/wiki/Analytics) which enables easy tracking of activity when using components from TNA Frontend.
+You can now use cards without images and the style of the pagination element is more subtle.
 
-Read the [full release notes](https://github.com/nationalarchives/tna-frontend/releases/tag/v0.1.42) to see what’s changed.
+Read the [full release notes](https://github.com/nationalarchives/tna-frontend/releases/tag/v0.1.43) to see what’s changed.
diff --git a/src/styles/tables/index.md b/src/styles/tables/index.md
@@ -0,0 +1,11 @@
+---
+layout: collection-page.njk
+title: Tables
+group: styles
+---
+
+{% from "_example.njk" import example %}
+
+Use a tables to display tabular data. Do not use tables to lay out or organise content.
+
+{{ example({ group: "styles", item: "tables", example: "plain-table", html: true, nunjucks: false, size: "m", openHTML: true }) }}
diff --git a/src/styles/tables/plain-table/index.njk b/src/styles/tables/plain-table/index.njk
@@ -0,0 +1,42 @@
+---
+title: Plain table
+layout: layout-example.njk
+private: true
+---
+
+<table class="tna-table">
+  <caption class="tna-table__caption">
+    Records added and removed between 2020 and 2022
+  </caption>
+  <thead class="tna-table__head">
+    <tr class="tna-table__row">
+      <th class="tna-table__header">Year</th>
+      <th class="tna-table__header tna-table__header--numeric">Records added</th>
+      <th class="tna-table__header tna-table__header--numeric">Records removed</th>
+    </tr>
+  </thead>
+  <tbody class="tna-table__body">
+    <tr>
+      <th class="tna-table__header">2020</th>
+      <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+      <td class="tna-table__cell tna-table__cell--numeric">789</td>
+    </tr>
+    <tr>
+      <th class="tna-table__header">2021</th>
+      <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+      <td class="tna-table__cell tna-table__cell--numeric">123</td>
+    </tr>
+    <tr>
+      <th class="tna-table__header">2022</th>
+      <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+      <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+    </tr>
+  </tbody>
+  <tfoot class="tna-table__foot">
+    <tr>
+      <th class="tna-table__header">Total</th>
+      <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+      <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+    </tr>
+  </tfoot>
+</table>