@nationalarchives/frontend 0.1.43 → 0.1.44

package/nationalarchives/templates/plain.njk

@@ -0,0 +1,94 @@
+{% extends 'nationalarchives/templates/layouts/_prototype-kit.njk' %}
+
+{% from 'nationalarchives/components/breadcrumbs/macro.njk' import tnaBreadcrumbs %}
+
+{% set pageTitle = 'Plain page' %}
+{% set theme = 'light' %}
+{% set themeAccent = 'blue' %}
+
+{% block beforeContent %}
+<div class="tna-container">
+  <div class="tna-column tna-column--full">
+    {{ tnaBreadcrumbs({
+      items: [
+        {
+          text: 'Home',
+          href: '/'
+        }
+      ]
+    }) }}
+  </div>
+</div>
+{% endblock %}
+
+{% block content %}
+  <div class="tna-section">
+    <div class="tna-container">
+      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+        <h1 class="tna-heading-xl">
+          {{ pageTitle }}
+        </h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at magna est. Sed vel fermentum arcu. Suspendisse viverra est nec interdum tincidunt. Phasellus dictum, turpis eget iaculis tincidunt, ex metus porttitor turpis, ut pulvinar risus erat quis dui. Nam semper sapien a ipsum congue pharetra.</p>
+        <p>Donec cursus, eros eu egestas aliquam, ipsum ligula suscipit metus, eget maximus turpis nisl vitae ex. Etiam ornare convallis quam a consequat. Etiam sodales aliquet nulla, id rutrum justo accumsan sed.</p>
+        <ul class="tna-ul">
+          <li>Alpha</li>
+          <li>Beta</li>
+          <li>Gamma</li>
+        </ul>
+        <ol class="tna-ol">
+          <li>Alpha</li>
+          <li>Beta</li>
+          <li>Gamma</li>
+        </ol>
+        <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>
+          <dt>Delta</dt>
+          <dd>Lorem ipsum</dd>
+          <dt>Epsilon</dt>
+          <dd>Lorem ipsum</dd>
+        </dl>
+        <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>
+      </div>
+    </div>
+  </div>
+{% endblock %}

package/nationalarchives/tools/_a11y.scss

@@ -11,5 +11,5 @@
 }
 
 @mixin active-outline {
-  outline-offset: a11y.$focus-outline-offset * 2;
+  outline-offset: 0;
 }

package/nationalarchives/tools/_spacing.scss

@@ -10,8 +10,20 @@
   }
 }
 
-@mixin space-above {
-  @extend %space-above;
+%space-only-above {
+  margin: 2rem 0 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+@mixin space-above($zero-other-margins: false) {
+  @if $zero-other-margins {
+    @extend %space-only-above;
+  } @else {
+    @extend %space-above;
+  }
 }
 
 @function space($size) {

package/nationalarchives/utilities/_global.scss

@@ -19,14 +19,12 @@
   margin: 0;
   padding: 0;
 
-  &:has(:is(.tna-global-header, .tna-header)):has(
-      #main-content[role="main"]
-    ):has(.tna-footer) {
+  &:has(:is(.tna-global-header, .tna-header)):has(.tna-main):has(.tna-footer) {
     display: flex;
     flex-direction: column;
-
-    #main-content {
-      flex: 1;
-    }
   }
 }
+
+.tna-main {
+  flex: 1;
+}

package/nationalarchives/utilities/_lists.scss

@@ -70,7 +70,7 @@
 }
 
 .tna-dl {
-  margin: 1rem 0 0;
+  @include spacing.space-above(true);
 
   display: flex;
   flex-wrap: wrap;

package/nationalarchives/variables/_grid.scss

@@ -1,4 +1,4 @@
-$largest-container-width: 75.25rem !default;
+$largest-container-width: 80rem !default;
 
 $gutter-width: 2rem !default;
 $gutter-width-tiny: 1rem !default;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build": "storybook build -o storybook --webpack-stats-json",
-    "test": "node tasks/test-fixtures.js && jest && test-storybook --maxWorkers=1",
+    "test": "npm run test:fixtures && npm run test:unit && npm run test:storybook",
+    "test:fixtures": "node tasks/test-fixtures.js",
+    "test:unit": "jest --verbose",
+    "test:storybook": "test-storybook --maxWorkers=1",
     "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",

package/nationalarchives/templates/homepage.njk

@@ -1,17 +0,0 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
-
-{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
-
-{% block pageTitle %}Welcome - The National Archives{% endblock %}
-
-{% block content %}
-  <div class="tna-section">
-    <div class="tna-container">
-      <div class="tna-column tna-column--full">
-        <h1 class="tna-heading-xl">
-          Welcome
-        </h1>
-      </div>
-    </div>
-  </div>
-{% endblock %}

package/nationalarchives/templates/search-results.njk

@@ -1,34 +0,0 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
-
-{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
-
-{% block pageTitle %}Search - The National Archives{% endblock %}
-
-{% block main %}
-  <div class="tna-container">
-    <div class="tna-column tna-column--1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny">
-      <h2>Search filters...</h2>
-    </div>
-    <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-xl">
-          Search results for "foobar"
-        </h1>
-      </div>
-      {% for item in range(0, 6) -%}
-        <div class="tna-column tna-column--width-1-2 tna-column--width-full-small tna-column--width-full-tiny">
-          {{ tnaCard({
-            supertitle: "Card supertitle",
-            title: "Card title",
-            headingLevel: 2,
-            href: "#",
-            imageSrc: "https://loremflickr.com/640/360",
-            imageAlt: "A placeholder image",
-            body: "<p>Card body</p>"
-          }) }}
-        </div>
-      {%- endfor %}
-    </main>
-  </div>
-{% endblock %}

package/nationalarchives/templates/topics.njk

@@ -1,38 +0,0 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
-{% from "nationalarchives/components/hero/macro.njk" import tnaHero %}
-
-{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
-
-{% block pageTitle %}Topics - The National Archives{% endblock %}
-
-{% block main %}
-<main class="tna-main-wrapper">
-  {{ tnaHero({
-    heading: "Title",
-    body: "<p>Body</p>",
-    image: {
-      src: "https://picsum.photos/id/29/640/360",
-      alt: "A placeholder image",
-      information: "Photo of some mountains by a famous photographer, ©2012"
-    }
-  }) }}
-  <div class="tna-container">
-    <div class="tna-column tna-column--full">
-      <h2>Topic title</h2>
-    </div>
-    {% for item in range(0, 6) -%}
-      <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-full-small tna-column--width-full-tiny">
-        {{ tnaCard({
-            supertitle: "Card supertitle",
-            title: "Card title",
-            headingLevel: 2,
-            href: "#",
-            imageSrc: "https://loremflickr.com/640/360",
-            imageAlt: "A placeholder image",
-            body: "<p>Card body</p>"
-          }) }}
-      </div>
-    {%- endfor %}
-  </div>
-</main>
-{% endblock %}

package/nationalarchives/tests/analytics.test.js

@@ -1,11 +0,0 @@
-import { describe, expect, test } from "@jest/globals";
-import { GA4 } from "../analytics.mjs";
-
-describe("Analytics", () => {
-  test("Initialisation", async () => {
-    const id = "example-id";
-    const ga4 = new GA4(id);
-
-    expect(ga4.gTagId).toEqual(id);
-  });
-});