Add table examples

nationalarchives · Mar 11, 2024 · e850bcc · e850bcc
1 parent e1f4c95
commit e850bcc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 33 deletions.
diff --git a/src/nationalarchives/stories/utilities/tables/tables.stories.js b/src/nationalarchives/stories/utilities/tables/tables.stories.js
@@ -4,42 +4,44 @@ export default {
 
 const TableTemplate = () =>
   `<table class="tna-table">
-  <caption class="tna-table__caption tna-heading-m tna-visually-hidden">Primary options</caption>
+  <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" scope="col">Name</th>
-      <th class="tna-table__header" scope="col">Type</th>
-      <th class="tna-table__header" scope="col">Description</th>
+      <th class="tna-table__header" scope="col">Year</th>
+      <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+      <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+      <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
     </tr>
   </thead>
   <tbody class="tna-table__body">
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">items</th>
-      <td class="tna-table__cell">array</td>
-      <td class="tna-table__cell">
-        <p><strong>Required.</strong></p>
-        <p>See items.</p>
-      </td>
-    </tr>
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="row">noCollapse</th>
-      <td class="tna-table__cell">string</td>
-      <td class="tna-table__cell"></td>
+    <tr>
+      <th class="tna-table__header" scope="row">2020</th>
+      <td class="tna-table__cell">Rat</td>
+      <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 class="tna-table__row">
-      <th class="tna-table__header" scope="row">classes</th>
-      <td class="tna-table__cell">string</td>
-      <td class="tna-table__cell">
-        <p>Classes to add to the breadcrumbs.</p>
-      </td>
+    <tr>
+      <th class="tna-table__header" scope="row">2021</th>
+      <td class="tna-table__cell">Ox</td>
+      <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 class="tna-table__row">
-      <th class="tna-table__header" scope="row">attributes</th>
-      <td class="tna-table__cell">object</td>
-      <td class="tna-table__cell">
-        <p>HTML attributes (for example data attributes) to add to the breadcrumbs.</p>
-      </td>
+    <tr>
+      <th class="tna-table__header" scope="row">2022</th>
+      <td class="tna-table__cell">Tiger</td>
+      <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" scope="row">Totals</th>
+      <td class="tna-table__cell"></td>
+      <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>`;
 export const Table = TableTemplate.bind({});
diff --git a/src/nationalarchives/utilities/_tables.scss b/src/nationalarchives/utilities/_tables.scss
@@ -4,7 +4,6 @@
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
-@use "../variables/assets";
 @use "../variables/grid";
 
 .tna-table {
@@ -20,23 +19,32 @@
   }
 
   &__caption {
-    text-align: left;
+    padding: 1rem 0;
 
-    @include typography.main-font-weight-bold;
+    caption-side: bottom;
+
+    @include typography.relative-font-size(16);
   }
 
   &__head {
+    vertical-align: bottom;
   }
 
-  &__header {
+  &__body {
+    vertical-align: top;
   }
 
-  &__body {
+  &__foot {
+    @include typography.main-font-weight-bold;
+    vertical-align: top;
   }
 
   &__row {
   }
 
+  &__header {
+  }
+
   &__cell {
   }
 
@@ -53,12 +61,21 @@
     &:last-child {
       padding-right: 0;
     }
+
+    &--numeric {
+      text-align: right;
+    }
   }
 
   &__head &__header {
     @include colour.colour-border("keyline-dark", 4px, solid, bottom);
   }
 
+  &__foot &__header,
+  &__foot &__cell {
+    @include colour.colour-border("keyline-dark", 4px, solid, top);
+  }
+
   p {
     + p {
       margin-top: 0.25rem;