npm - @nationalarchives/frontend - Versions diffs - 0.1.42 → 0.1.44 - Mend

@nationalarchives/frontend 0.1.42 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/nationalarchives/templates/layouts/_generic.njk CHANGED Viewed

@@ -1,18 +1,17 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
-{% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner -%}
-{% from "nationalarchives/components/footer/macro.njk" import tnaFooter -%}
-{% from "nationalarchives/components/header/macro.njk" import tnaHeader -%}
-{% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
+{% from 'nationalarchives/components/cookie-banner/macro.njk' import tnaCookieBanner -%}
+{% from 'nationalarchives/components/footer/macro.njk' import tnaFooter -%}
+{% from 'nationalarchives/components/header/macro.njk' import tnaHeader -%}
+{% from 'nationalarchives/components/skip-link/macro.njk' import tnaSkipLink -%}
-{% set siteTitle = 'The National Archives' %}
-{% set pageTitle = '' %}
+{% set defaultSiteTitle = 'The National Archives' %}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}"{% for attribute, value in htmlAttributes %} {{attribute}}="{{value}}"{% endfor %}>
   <head>
     <meta charset="utf-8">
-    <title>{% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle }}{% else %}{{ siteTitle }}{% endif %}{% endblock %}</title>
+    <title>{% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle or defaultSiteTitle }}{% else %}{{ siteTitle or defaultSiteTitle }}{% endif %}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -36,17 +35,13 @@
     {% block head %}{% endblock %}
-    {% block stylesheets %}
-      <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend') }}/all.css">
-      <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
-    {% endblock %}
+    {% block stylesheets %}{% endblock %}
   </head>
-    <body class="tna-template__body {{ bodyClasses }}"{% for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <body class="tna-template__body {{ bodyClasses }}"{% for attribute, value in bodyAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% block bodyStart %}
       {% block cookies %}
         {{ tnaCookieBanner({
-          cookiesUrl: '#',
-          cookiesPath: "/tna-frontend/"
+          cookiesUrl: '#/cookies'
         }) }}
       {% endblock %}
@@ -64,7 +59,7 @@
     {% block main %}
       {% block beforeContent %}{% endblock %}
-      <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+      <main class="tna-main {{ mainClasses }}" id="main-content">
         {% block content %}{% endblock %}
       </main>
       {% block afterContent %}{% endblock %}
@@ -74,15 +69,6 @@
       {{ tnaFooter({}) }}
     {% endblock %}
-    {% block bodyEnd %}
-      <script src="{{ tnaFrontendJsPath | default('/static/tna-frontend') }}/all.js"></script>
-      <script>
-        if (window.TNAFrontend && window.TNAFrontend.initAll) {
-          document.addEventListener("DOMContentLoaded", function() {
-            window.TNAFrontend.initAll();
-          });
-        }
-      </script>
-    {% endblock %}
+    {% block bodyEnd %}{% endblock %}
   </body>
 </html>

package/nationalarchives/templates/layouts/_prototype-kit.njk CHANGED Viewed

@@ -1,14 +1,14 @@
-{% extends "./_generic.njk" %}
+{% extends './_generic.njk' %}
-{% set assetPath = "/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets" %}
+{% set assetPath = '/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets' %}
 {% block stylesheets %}
-  {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+  {% include 'govuk-prototype-kit/includes/stylesheets-plugins.njk' ignore missing %}
   <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
 {% endblock %}
 {% block bodyEnd %}
-  {% include "govuk-prototype-kit/includes/scripts.njk" %}
+  {% include 'govuk-prototype-kit/includes/scripts.njk' ignore missing %}
   <script>
     if (window.TNAFrontend && window.TNAFrontend.initAll) {
       document.addEventListener("DOMContentLoaded", function() {

package/nationalarchives/templates/list.njk ADDED Viewed

@@ -0,0 +1,55 @@
+{% extends 'nationalarchives/templates/layouts/_prototype-kit.njk' %}
+{% from 'nationalarchives/components/breadcrumbs/macro.njk' import tnaBreadcrumbs %}
+{% from 'nationalarchives/components/card/macro.njk' import tnaCard %}
+{% set pageTitle = 'List page' %}
+{% set theme = 'light' %}
+{% set themeAccent = 'blue' %}
+{% block beforeContent %}
+<div class="tna-background-accent">
+  <div class="tna-container">
+    <div class="tna-column tna-column--full">
+      {{ tnaBreadcrumbs({
+        items: [
+          {
+            text: 'Home',
+            href: '/'
+          }
+        ]
+      }) }}
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block content %}
+<main class="tna-main">
+  <div class="tna-section tna-background-accent tna-!--padding-bottom-xl">
+    <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 class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p>
+      </div>
+    </div>
+  </div>
+  <nav class="tna-section" aria-label="Child pages">
+    <menu class="tna-container tna-ul tna-ul--plain">
+      {%- for item in range(0, 12) %}
+      <li class="tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+        {{ tnaCard({
+          title: "Item " + (item + 1),
+          headingLevel: 2,
+          headingSize: "m",
+          href: "#",
+          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu."
+        }) }}
+      </li>
+      {%- endfor %}
+    </menu>
+  </nav>
+</main>
+{% endblock %}

package/nationalarchives/templates/plain.njk ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,15 @@
+@use "../variables/a11y";
 @use "colour";
 @mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 5px, solid);
-  outline-offset: 2px;
+  @include colour.colour-outline(
+    "focus-outline",
+    a11y.$focus-outline-width,
+    solid
+  );
+  outline-offset: a11y.$focus-outline-offset;
+}
+@mixin active-outline {
+  outline-offset: 0;
 }

package/nationalarchives/tools/_colour.scss CHANGED Viewed

@@ -97,6 +97,10 @@
   background-color: var(--#{$colour}) if($important, !important, null);
 }
+@mixin colour-background-brand($brandColour, $important: false) {
+  background-color: #{brand-colour($brandColour)} if($important, !important, null);
+}
 @mixin colour-border(
   $colour,
   $width: "",
@@ -159,6 +163,26 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
+@mixin thick-keyline($direction) {
+  @include colour-border("keyline", 5px, solid, $direction);
+}
+@mixin thick-keyline-dark($direction) {
+  @include colour-border("keyline-dark", 5px, solid, $direction);
+}
+@mixin thick-keyline-accent($direction) {
+  @include colour-border("accent-background", 5px, solid, $direction);
+}
+@mixin thick-keyline-error($direction) {
+  @include colour-border("form-error", 5px, solid, $direction);
+}
+@mixin thick-keyline-brand($direction, $brandColour) {
+  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
+}
 %light {
   @include colour-css-vars("form-error");

package/nationalarchives/tools/_spacing.scss CHANGED Viewed

@@ -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/_a11y.scss CHANGED Viewed

@@ -32,6 +32,10 @@
   @include a11y.focus-outline;
 }
+*:active {
+  @include a11y.active-outline;
+}
 .tna-\!--no-focus-style {
   &:focus {
     outline: none;

package/nationalarchives/utilities/_forms.scss CHANGED Viewed

@@ -17,7 +17,7 @@ select {
     &--error {
       padding-left: 1rem;
-      @include colour.colour-border("form-error", 0.25rem, solid, left);
+      @include colour.thick-keyline-error(left);
     }
   }

package/nationalarchives/utilities/_global.scss CHANGED Viewed

@@ -19,12 +19,12 @@
   margin: 0;
   padding: 0;
-  &:has(.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 CHANGED Viewed

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

package/nationalarchives/utilities/_reset.scss CHANGED Viewed

@@ -1,5 +1,10 @@
 @use "../tools/colour";
+* {
+  margin: 0;
+  padding: 0;
+}
 img,
 svg,
 picture,
@@ -21,8 +26,6 @@ canvas {
 }
 hr {
-  margin: 0;
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
   border-style: solid;

package/nationalarchives/utilities/_tables.scss CHANGED Viewed

@@ -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,10 +61,19 @@
     &:last-child {
       padding-right: 0;
     }
+    &--numeric {
+      text-align: right;
+    }
   }
   &__head &__header {
-    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+    @include colour.colour-border("keyline-dark", 4px, solid, bottom);
+  }
+  &__foot &__header,
+  &__foot &__cell {
+    @include colour.colour-border("keyline-dark", 4px, solid, top);
   }
   p {

package/nationalarchives/utilities/_typography.scss CHANGED Viewed

@@ -68,11 +68,6 @@
   }
 }
-* {
-  margin: 0;
-  padding: 0;
-}
 strong {
   @include typography.main-font-weight-bold;
 }
@@ -80,16 +75,9 @@ strong {
 p {
   @include spacing.space-above;
-  + p/*,
-  + .tna-ul,
-  + .tna-ol,
-  + .tna-blockquote*/ {
+  + p {
     margin-top: 1rem;
   }
-  // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {
-  //   margin-top: 1rem;
-  // }
 }
 a {
@@ -116,12 +104,6 @@ a {
       @include colour.colour-font("link");
     }
   }
-  // &[target="_blank"]:not([title*="opens in a new"]) {
-  //   &::after {
-  //     content: "" / " (opens in a new window)"
-  //   }
-  // }
 }
 small {
@@ -154,7 +136,7 @@ small {
 %chip-accent {
   @include colour.accent;
-  @include colour.colour-border("accent-background", 0.125rem);
+  @include colour.colour-border("accent-background", 2px);
   .tna-background-accent & {
     @include colour.contrast;
@@ -381,7 +363,7 @@ small {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
-  @include colour.colour-border("accent-background", 0.375rem, solid, left);
+  @include colour.thick-keyline-accent(left);
   &__quote {
     font-weight: 700;

package/nationalarchives/variables/_a11y.scss ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ $focus-outline-width: 5px !default;
2	+ $focus-outline-offset: 2px !default;

package/nationalarchives/variables/_grid.scss CHANGED Viewed

@@ -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/nationalarchives/variables/_index.scss CHANGED Viewed

@@ -1,3 +1,4 @@
+@use "a11y";
 @use "assets";
 @use "colour";
 @use "features";

package/package.json CHANGED Viewed

@@ -1,11 +1,14 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.42",
+  "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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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);
-  });
-});