@nationalarchives/frontend 0.1.55 → 0.1.57

package/nationalarchives/templates/index-grid.njk

@@ -26,124 +26,122 @@
 {% 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 class="tna-background-accent tna-!--padding-vertical-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>
-  <section class="tna-section">
-    {{ tnaIndexGrid({
-      title: 'Topics',
-      headingLevel: 0,
-      items: [
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        },
-        {
-          href: '#',
-          title: 'Topic',
-          src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
-          alt: 'Topic image',
-          width: 600,
-          height: 400
-        }
-      ],
-      columns: 4,
-      columnsMedium: 3,
-      columnsSmall: 2,
-      columnsTiny: 1
-    }) }}
-  </section>
-</main>
+</div>
+<section class="tna-section">
+  {{ tnaIndexGrid({
+    title: 'Topics',
+    headingLevel: 0,
+    items: [
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      },
+      {
+        href: '#',
+        title: 'Topic',
+        src: 'https://fakeimg.pl/600x400/e4e4e4/343338?text=Topic%20image&font=museo&font_size=48',
+        alt: 'Topic image',
+        width: 600,
+        height: 400
+      }
+    ],
+    columns: 4,
+    columnsMedium: 3,
+    columnsSmall: 2,
+    columnsTiny: 1
+  }) }}
+</section>
 {% endblock %}

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

@@ -5,7 +5,6 @@
 {% block stylesheets %}
   {% include 'govuk-prototype-kit/includes/stylesheets-plugins.njk' ignore missing %}
   <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
-  <link rel="stylesheet" type="text/css" href="/public/stylesheets/application.css">
 {% endblock %}
 
 {% block bodyEnd %}
@@ -14,6 +13,21 @@
     if (window.TNAFrontend && window.TNAFrontend.initAll) {
       document.addEventListener("DOMContentLoaded", function() {
         window.TNAFrontend.initAll();
+        var cookies = new TNAFrontend.Cookies()
+        var theme = cookies.get("theme") || "light"
+        var $tnaTemplate = document.querySelector(".tna-template");
+        if (theme === "light") {
+          $tnaTemplate.classList.remove(
+            "tna-template--system-theme",
+            "tna-template--dark-theme",
+          );
+        } else if (theme === "dark") {
+          $tnaTemplate.classList.remove("tna-template--system-theme");
+          $tnaTemplate.classList.add(`tna-template--dark-theme`);
+        } else if (theme === "system") {
+          $tnaTemplate.classList.remove("tna-template--dark-theme");
+          $tnaTemplate.classList.add(`tna-template--system-theme`);
+        }
       });
     }
   </script>

package/nationalarchives/templates/list.njk

@@ -25,31 +25,29 @@
 {% 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 class="tna-background-accent tna-!--padding-vertical-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>
-  <nav class="tna-section" aria-label="Child pages">
-    <ul 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 %}
-    </ul>
-  </nav>
-</main>
+</div>
+<nav class="tna-section" aria-label="Child pages">
+  <ul 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 %}
+  </ul>
+</nav>
 {% endblock %}

package/nationalarchives/templates/plain.njk

@@ -22,73 +22,73 @@
 {% 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 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/_colour.scss

@@ -124,7 +124,7 @@
 
 @mixin thick-keyline-accent($direction) {
   @include colour-border(
-    "accent-background",
+    "accent-border",
     borders.$thick-border-width,
     solid,
     $direction
@@ -318,6 +318,7 @@
 %yellow-accent {
   --accent-background: #{colour.brand-colour("yellow")} !important;
   --accent-background-light: #{colour.brand-colour("cream")} !important;
+  --accent-border: #{colour.brand-colour("brown")} !important;
   --accent-font-base: #{colour.brand-colour("black")} !important;
   --accent-font-dark: #{colour.brand-colour("black")} !important;
   --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
@@ -361,6 +362,7 @@
 %pink-accent {
   --accent-background: #{colour.brand-colour("maroon")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+  --accent-border: #{colour.brand-colour("pink")} !important;
   --button-accent-background: #{colour.brand-colour("maroon")} !important;
 }
 
@@ -372,6 +374,7 @@
 %orange-accent {
   --accent-background: #{colour.brand-colour("chestnut")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+  --accent-border: #{colour.brand-colour("orange")} !important;
   --button-accent-background: #{colour.brand-colour("chestnut")} !important;
 }
 
@@ -383,6 +386,7 @@
 %green-accent {
   --accent-background: #{colour.brand-colour("forest")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+  --accent-border: #{colour.brand-colour("green")} !important;
   --button-accent-background: #{colour.brand-colour("forest")} !important;
 }
 
@@ -394,6 +398,7 @@
 %blue-accent {
   --accent-background: #{colour.brand-colour("navy")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+  --accent-border: #{colour.brand-colour("blue")} !important;
   --button-accent-background: #{colour.brand-colour("navy")} !important;
 }
 

package/nationalarchives/tools/_media.scss

@@ -90,3 +90,13 @@ $media-tiny: "(max-width: #{$largest-tiny-device-em})";
     @content;
   }
 }
+
+%hide-on-print {
+  @media print {
+    display: none;
+  }
+}
+
+@mixin hide-on-print() {
+  @extend %hide-on-print;
+}

package/nationalarchives/utilities/_areas.scss

@@ -21,7 +21,7 @@
     padding: spacing.space(1);
   }
 
-  @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px);
   }
 

package/nationalarchives/utilities/_lists.scss

@@ -32,12 +32,8 @@
     }
 
     > li::marker {
-      @include colour.colour-font("accent-background");
+      @include colour.colour-font("accent-border");
       font-weight: 700;
-
-      .tna-background-accent & {
-        @include colour.colour-font("font-dark");
-      }
     }
   }
 

package/nationalarchives/utilities/_typography.scss

@@ -190,6 +190,8 @@ small {
     a {
       display: inline-block;
 
+      vertical-align: top;
+
       &::after {
         content: "\203A";
 

package/nationalarchives/variables/_colour.scss

@@ -83,8 +83,9 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent-background": brand-colour("grey"),
+  "accent-background": #afb6b5,
   "accent-background-light": #ededed,
+  "accent-border": brand-colour("grey"),
   "accent-font-base": brand-colour("black"),
   "accent-font-dark": brand-colour("black"),
   "accent-font-light": brand-colour("black", 0.7),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",