@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/stories/utilities/typography/lists.stories.js

@@ -1,5 +1,6 @@
 const argTypes = {
   items: { control: "object" },
+  plain: { control: "boolean" },
 };
 
 export default {
@@ -36,3 +37,95 @@ OrderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
   plain: true,
 };
+
+const DescriptionListTemplate = ({ items, plain }) =>
+  `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
+    items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
+  }">${items.reduce(
+    (list, item) => `${list}
+    <dt>
+      ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
+      ${item.title}
+    </dt>
+    ${
+      Array.isArray(item.description)
+        ? item.description.reduce(
+            (descriptions, description) =>
+              `${descriptions}<dd>${description}</dd>`,
+            "",
+          )
+        : `<dd>${item.description}</dd>`
+    }`,
+    "",
+  )}
+</dl>`;
+
+export const DescriptionList = DescriptionListTemplate.bind({});
+DescriptionList.args = {
+  items: [
+    { title: "Alpha", description: "Lorem ipsum" },
+    { title: "Beta", description: "Lorem ipsum" },
+    { title: "Gamma", description: "Lorem ipsum" },
+    { title: "Delta", description: "Lorem ipsum" },
+    { title: "Epsilon", description: "Lorem ipsum" },
+    { title: "Zeta", description: "Lorem ipsum" },
+    { title: "Eta", description: "Lorem ipsum" },
+  ],
+};
+
+export const PlainDescriptionList = DescriptionListTemplate.bind({});
+PlainDescriptionList.args = {
+  items: [
+    { title: "Alpha", description: "Lorem ipsum" },
+    { title: "Beta", description: "Lorem ipsum" },
+    { title: "Gamma", description: "Lorem ipsum" },
+    { title: "Delta", description: "Lorem ipsum" },
+  ],
+  plain: true,
+};
+
+export const DescriptionListWithIcons = DescriptionListTemplate.bind({});
+DescriptionListWithIcons.args = {
+  items: [
+    {
+      title: "Held by",
+      description: "The National Archives, Kew",
+      icon: "landmark",
+    },
+    { title: "Date", description: "1972&ndash;1979", icon: "calendar" },
+    { title: "Reference", description: "LC 4", icon: "database" },
+  ],
+};
+
+export const PlainDescriptionListWithIcons = DescriptionListTemplate.bind({});
+PlainDescriptionListWithIcons.args = {
+  items: [
+    {
+      title: "Held by",
+      description: "The National Archives, Kew",
+      icon: "landmark",
+    },
+    { title: "Date", description: "1972&ndash;1979", icon: "calendar" },
+    { title: "Reference", description: "LC 4", icon: "database" },
+  ],
+  plain: true,
+};
+
+export const ComplexDescriptionList = DescriptionListTemplate.bind({});
+ComplexDescriptionList.args = {
+  items: [
+    { title: "Alpha", description: "Lorem ipsum" },
+    { title: "Beta", description: "Lorem ipsum" },
+    {
+      title: "Gamma",
+      description: ["Lorem ipsum 1", "Lorem ipsum 2", "Lorem ipsum 3"],
+    },
+    {
+      title: "Delta",
+      description: ["Lorem ipsum 1", "Lorem ipsum 2", "Lorem ipsum 3"],
+    },
+    { title: "Epsilon", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
+    { title: "Zeta", description: "Lorem ipsum" },
+    { title: "Eta", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
+  ],
+};

package/nationalarchives/stories/utilities/typography/typography.mdx

@@ -32,7 +32,17 @@ In the second example, the heading will be read as two separate sentences; `Reco
 <Canvas of={TypographyStories.Paragraph} />
 <Canvas of={TypographyStories.Blockquote} />
 <Canvas of={TypographyStories.SceneSetter} />
+
+## Lists
+
 <Canvas of={ListStories.UnorderedList} />
-<Canvas of={ListStories.UnorderedListPlain} />
 <Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.DescriptionList} />
+<Canvas of={ListStories.DescriptionListWithIcons} />
+
+### Plain versions
+
+<Canvas of={ListStories.UnorderedListPlain} />
 <Canvas of={ListStories.OrderedListPlain} />
+<Canvas of={ListStories.PlainDescriptionList} />
+<Canvas of={ListStories.PlainDescriptionListWithIcons} />

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -19,7 +19,7 @@ Paragraph.args = {
 };
 
 const HeadingLinkTemplate = ({ text, href }) =>
-  `<h2 class="tna-heading">
+  `<h2 class="tna-heading-s">
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});

package/nationalarchives/templates/homepage.njk

@@ -1,64 +1,17 @@
-{% from "../components/card/macro.njk" import tnaCard %}
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
 
-{% extends "./layouts/_prototype-kit.njk" %}
+{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
 
-{% block pageTitle %}The National Archives | Welcome{% endblock %}
+{% block pageTitle %}Welcome - The National Archives{% endblock %}
 
 {% block content %}
-<div class="tna-container">
-  <div class="tna-column tna-column--full">
-  <h1 class="tna-heading tna-heading--xl">
-    Welcome
-  </h1>
+  <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>
-  <div class="tna-column tna-column--full">
-  {{ tnaCard({
-    "heading": {
-    "supertitle": "Card supertitle",
-    "title": "Card title",
-    "level": 2,
-    "size": "m"
-    },
-    "href": "#",
-    "image": {
-    "src": "https://loremflickr.com/640/360",
-    "alt": "A placeholder image"
-    },
-    "body": "<p>Card body</p>",
-    "actions": [
-    {
-      "text": "Card action",
-      "href": "#",
-      "title": "Go and do the action"
-    }
-    ],
-    "featured": true,
-    "htmlElement": "article"
-  }) }}
-  </div>
-  {% for item in range(0, 6) -%}
-  <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny">
-  {{ tnaCard({
-    "heading": {
-    "supertitle": "Card supertitle",
-    "title": "Card title",
-    "level": 3
-    },
-    "href": "#",
-    "image": {
-    "src": "https://loremflickr.com/640/360",
-    "alt": "A placeholder image"
-    },
-    "body": "<p>Card body</p>",
-    "actions": [
-    {
-      "text": "Card action",
-      "href": "#",
-      "title": "Go and do the action"
-    }
-    ]
-  }) }}
-  </div>
-  {%- endfor %}
-</div>
 {% endblock %}

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,8 +1,10 @@
 {# 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 -%}
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en-GB') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}">
   <head>
     <meta charset="utf-8">
     <title>{% block pageTitle %}The National Archives{% endblock %}</title>
@@ -12,34 +14,38 @@
 
     {% block headIcons %}
     <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
-    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/mask-icon.svg" color="{{ themeColor | default('#000000') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
     {% endblock %}
 
     {% block head %}{% endblock %}
 
-    {% block stylesheets %}{% endblock %}
+    {% block stylesheets %}
+      <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend') }}/all.css">
+    {% endblock %}
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
     {% block bodyStart %}
       {% block cookies %}
-      {{ tnaCookieBanner({
-        url: '#'
-      }) }}
+        {{ tnaCookieBanner({
+          url: '#'
+        }) }}
       {% endblock %}
       
       {% block skipLink %}
       {{ tnaSkipLink({
-        href: '#main-content',
+        href: 'main-content',
         text: 'Skip to main content'
       }) }}
       {% endblock %}
     {% endblock %}
 
-    {% block header %}{% endblock %}
+    {% block header %}
+      {{ tnaHeader({}) }}
+    {% endblock %}
 
     {% block main %}
       {% block beforeContent %}{% endblock %}
@@ -49,8 +55,19 @@
       {% block afterContent %}{% endblock %}
     {% endblock %}
 
-    {% block footer %}{% endblock %}
+    {% block footer %}
+      {{ tnaFooter({}) }}
+    {% endblock %}
 
-    {% block bodyEnd %}{% 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 %}
   </body>
 </html>

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

@@ -3,3 +3,14 @@
 {% block stylesheets %}
 {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
 {% endblock %}
+
+{% block bodyEnd %}
+  {% include "govuk-prototype-kit/includes/scripts.njk" %}
+  <script>
+    if (window.TNAFrontend && window.TNAFrontend.initAll) {
+      document.addEventListener("DOMContentLoaded", function() {
+        window.TNAFrontend.initAll();
+      });
+    }
+  </script>
+{% endblock %}

package/nationalarchives/templates/search-results.njk

@@ -1,8 +1,8 @@
-{% from "../components/card/macro.njk" import tnaCard %}
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
 
-{% extends "./layouts/_prototype-kit.njk" %}
+{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
 
-{% block pageTitle %}The National Archives | Results{% endblock %}
+{% block pageTitle %}Search - The National Archives{% endblock %}
 
 {% block main %}
   <div class="tna-container">
@@ -12,24 +12,20 @@
     <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 tna-heading--xl">
+        <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({
-            "heading": {
-              "supertitle": "Card supertitle",
-              "title": "Card title",
-              "level": 2
-            },
-            "href": "#",
-            "image": {
-              "src": "https://loremflickr.com/640/360",
-              "alt": "A placeholder image"
-            },
-            "body": "<p>Card body</p>",
+            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 %}

package/nationalarchives/templates/topics.njk

@@ -1,19 +1,19 @@
-{% from "../components/card/macro.njk" import tnaCard %}
-{% from "../components/hero/macro.njk" import tnaHero %}
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+{% from "nationalarchives/components/hero/macro.njk" import tnaHero %}
 
-{% extends "./layouts/_prototype-kit.njk" %}
+{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}
 
-{% block pageTitle %}The National Archives | Topics{% endblock %}
+{% 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"
+    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">
@@ -23,18 +23,14 @@
     {% 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({
-          "heading": {
-            "supertitle": "Card supertitle",
-            "title": "Card title",
-            "level": 3
-          },
-          "href": "#",
-          "image": {
-            "src": "https://loremflickr.com/640/360",
-            "alt": "A placeholder image"
-          },
-          "body": "<p>Card body</p>",
-        }) }}
+            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>

package/nationalarchives/tools/_colour.scss

@@ -1,10 +1,9 @@
 @use "sass:map";
-@use "../features";
 @use "../variables/colour";
 @use "../tools/media";
 
-@function brand-colour($colour) {
-  @return map.get(colour.$colour-palette-brand, $colour);
+@function brand-colour($colour, $opacity: 1) {
+  @return colour.brand-colour($colour, $opacity);
 }
 
 @mixin colour-css-vars() {
@@ -38,20 +37,22 @@
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
     --accent-font-dark: #{brand-colour("black")} !important;
-    --accent-font-light: #{rgba(brand-colour("black"), 0.7)} !important;
+    --accent-font-light: #{brand-colour("black", 0.7)} !important;
+    --accent-icon-light: #{brand-colour("black", 0.45)} !important;
     --accent-link: #{brand-colour("black")} !important;
     --accent-link-visited: #{brand-colour("black")} !important;
-    --accent-keyline: #{rgba(brand-colour("black"), 0.5)} !important;
-    --accent-keyline-dark: #{rgba(brand-colour("black"), 0.8)} !important;
+    --accent-keyline: #{brand-colour("black", 0.5)} !important;
+    --accent-keyline-dark: #{brand-colour("black", 0.8)} !important;
     --button-accent-background: #{brand-colour("yellow")} !important;
   } @else {
     --accent-font-base: #{brand-colour("white")} !important;
     --accent-font-dark: #{brand-colour("white")} !important;
-    --accent-font-light: #{rgba(brand-colour("white"), 0.7)} !important;
+    --accent-font-light: #{brand-colour("white", 0.7)} !important;
+    --accent-icon-light: #{brand-colour("white", 0.45)} !important;
     --accent-link: #{brand-colour("white")} !important;
     --accent-link-visited: #{brand-colour("white")} !important;
-    --accent-keyline: #{rgba(brand-colour("white"), 0.5)} !important;
-    --accent-keyline-dark: #{rgba(brand-colour("white"), 0.8)} !important;
+    --accent-keyline: #{brand-colour("white", 0.5)} !important;
+    --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
 
     @if $colour == "black" {
       // --accent: #{brand-colour("light-grey")} !important;
@@ -143,10 +144,18 @@
   }
 }
 
-@mixin colour-outline($colour, $important: false) {
-  outline-color: map.get(colour.$colour-palette-default, $colour)
-    if($important, !important, null);
-  outline-color: var(--#{$colour}) if($important, !important, null);
+@mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
+  @if $width != "" {
+    outline: $width
+      map.get(colour.$colour-palette-default, $colour)
+      $style
+      if($important, !important, null);
+    outline: $width var(--#{$colour}) $style if($important, !important, null);
+  } @else {
+    outline-color: map.get(colour.$colour-palette-default, $colour)
+      if($important, !important, null);
+    outline-color: var(--#{$colour}) if($important, !important, null);
+  }
 }
 
 @mixin colour-fill($colour, $important: false) {
@@ -155,20 +164,52 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
-%fixed {
-  @include colour-css-vars;
+%plain {
+  .tna-template--system-theme & {
+    @include colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour-css-vars;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour-css-vars-dark;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 
-  @include colour-font("font-base");
+  --background: var(--page-background);
 }
 
-@mixin fixed {
-  @extend %fixed;
+@mixin plain {
+  @extend %plain;
 }
 
 %invert {
+  --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);
   --font-dark: var(--contrast-font-dark);
   --font-light: var(--contrast-font-light);
+  --icon-light: var(--contrast-icon-light);
   --link: var(--contrast-link);
   --link-visited: var(--contrast-link-visited);
   --keyline: var(--contrast-keyline);
@@ -178,7 +219,7 @@
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
 
-  @include colour-background("contrast-background");
+  @include colour-background("background");
 
   @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
@@ -189,9 +230,11 @@
 
 %invert-on-mobile {
   @include media.on-mobile {
+    --background: var(--contrast-background);
     --font-base: var(--contrast-font-base);
     --font-dark: var(--contrast-font-dark);
     --font-light: var(--contrast-font-light);
+    --icon-light: var(--contrast-icon-light);
     --link: var(--contrast-link);
     --link-visited: var(--contrast-link-visited);
     --keyline: var(--contrast-keyline);
@@ -201,7 +244,7 @@
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
 
-    @include colour-background("contrast-background");
+    @include colour-background("background");
 
     @include colour-font("font-base", false, colour.$colour-palette-dark);
   }
@@ -212,15 +255,17 @@
 }
 
 %accent {
+  --background: var(--accent-background);
   --font-base: var(--accent-font-base);
   --font-dark: var(--accent-font-dark);
   --font-light: var(--accent-font-light);
+  --icon-light: var(--accent-icon-light);
   --link: var(--accent-link);
   --link-visited: var(--accent-link-visited);
   --keyline: var(--accent-keyline);
   --keyline-dark: var(--accent-keyline-dark);
 
-  @include colour-background("accent-background");
+  @include colour-background("background");
 
   @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
@@ -229,6 +274,14 @@
   @extend %accent;
 }
 
+%tint-background {
+  @include colour-background("background-tint");
+}
+
+@mixin tint-background {
+  @extend %tint-background;
+}
+
 %accent-background {
   @include colour-background("accent-background");
 }
@@ -238,8 +291,7 @@
 }
 
 %light-accent-background {
-  @include colour-background("accent-background-light");
-
+  --background: var(--accent-background-light);
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
   --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
@@ -260,6 +312,8 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
+
+  @include colour-background("background");
 }
 
 @mixin light-accent-background {

package/nationalarchives/tools/_grid.scss

@@ -24,13 +24,13 @@
             flex: none;
           }
 
-          // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
-          //   margin-right: math.div(100%, $count) * $i;
-          // }
+          &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+            margin-right: math.div(100%, $count) * $i;
+          }
 
-          // .column--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
-          //   margin-left: math.div(100%, $count) * $i;
-          // }
+          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+            margin-left: math.div(100%, $count) * $i;
+          }
 
           $simplest-fraction-found: true;
         }
@@ -42,13 +42,13 @@
           flex: none;
         }
 
-        //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
-        //     margin-right: math.div(100%, $count) * $i;
-        //   }
+        &--margin-right-#{$i}-#{$count}#{$suffix} {
+          margin-right: math.div(100%, $count) * $i;
+        }
 
-        //   .column--margin-left-#{$i}-#{$count}#{$suffix} {
-        //     margin-left: math.div(100%, $count) * $i;
-        //   }
+        &--margin-left-#{$i}-#{$count}#{$suffix} {
+          margin-left: math.div(100%, $count) * $i;
+        }
       }
     }
 

package/nationalarchives/tools/_media.scss

@@ -61,3 +61,9 @@
     @content;
   }
 }
+
+@mixin on-print() {
+  @media print {
+    @content;
+  }
+}