@nationalarchives/frontend 0.1.7-prerelease → 0.1.9-prerelease

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

@@ -10,7 +10,7 @@ export default {
 const UnorderedListTemplate = ({ items, plain }) =>
   `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
-    ""
+    "",
   )}</ul>`;
 export const UnorderedList = UnorderedListTemplate.bind({});
 UnorderedList.args = {
@@ -25,7 +25,7 @@ UnorderedListPlain.args = {
 const OrderedListTemplate = ({ items, plain }) =>
   `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
-    ""
+    "",
   )}</ol>`;
 export const OrderedList = OrderedListTemplate.bind({});
 OrderedList.args = {

package/nationalarchives/stories/utilities/typography.mdx

@@ -10,11 +10,26 @@ import * as ListStories from './lists.stories';
 
 We use a set of typefaces...
 
+## Headings
+
 <Canvas of={HeadingStories.Heading1} />
 <Canvas of={HeadingStories.Heading2} />
 <Canvas of={HeadingStories.Heading3} />
+
+## Heading groups
+
+Although visually identical, there are two types of header groups based on whether the group should be read as a single sentence or not.
+
+In the first example, the heading will be read by screen readers as `The story of Alice Hawkins.`
+
 <Canvas of={HeadingGroupStories.HeadingGroup} />
+
+In the second example, the heading will be read as two separate sentences; `Record revealed. The Monteagle Letter.`
+
 <Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+
+## General typography
+
 <Canvas of={TypographyStories.Paragraph} />
 <Canvas of={ListStories.UnorderedList} />
 <Canvas of={ListStories.UnorderedListPlain} />

package/nationalarchives/templates/homepage.njk

@@ -1,63 +1,63 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+{% from "../components/card/macro.njk" import tnaCard %}
 
-{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+{% extends "./layouts/_prototype-kit.njk" %}
 
 {% block pageTitle %}The National Archives | Welcome{% endblock %}
 
 {% block content %}
 <div class="tna-container">
   <div class="tna-column tna-column--full">
-    <h1 class="tna-heading tna-heading--xl">
-      Welcome
-    </h1>
+  <h1 class="tna-heading tna-heading--xl">
+    Welcome
+  </h1>
   </div>
   <div class="tna-column tna-column--full">
-    {{ tnaCard({
-      "heading": {
-        "supertitle": "Card supertitle",
-        "title": "Card title",
-        "level": 2,
-        "size": "m"
-      },
+  {{ 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": "#",
-      "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"
-    }) }}
+      "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
-      },
+  {{ 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": "#",
-      "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"
-        }
-      ]
-    }) }}
+      "title": "Go and do the action"
+    }
+    ]
+  }) }}
   </div>
   {%- endfor %}
 </div>

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,60 +1,57 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
 {#% from "./components/skip-link/macro.njk" import tnaSkipLink -%#}
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en') }}" class="tna-template js-disabled {{ htmlClasses }}">
   <head>
-    <meta charset="utf-8">
-    <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% 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">
-
-    {% 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">
-    {% endblock %}
-
-    {% block head %}{% endblock %}
-
-    {% block stylesheets %}
-        {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
-    {% endblock %}
-
-    {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
-    {% if opengraphImageUrl or assetUrl %}
-    <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
-    {% endif %}
+  <meta charset="utf-8">
+  <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% 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">
+
+  {% 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">
+  {% endblock %}
+
+  {% block head %}{% endblock %}
+
+  {% block stylesheets %}{% endblock %}
+
+  {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
+  {% if opengraphImageUrl or assetUrl %}
+  <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
+  {% endif %}
   </head>
   <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    
-    {% block bodyStart %}{% endblock %}
-
-    {% block skipLink %}
-      {#{ govukSkipLink({
-        href: '#main-content',
-        text: 'Skip to main content'
-      }) }#}
-    {% endblock %}
-
-    {% block header %}
-      <h1>HEADER</h1>
-    {% endblock %}
-
-    {% block main %}
-        {% block beforeContent %}{% endblock %}
-        <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
-          {% block content %}{% endblock %}
-        </main>
-    {% endblock %}
-
-    {% block footer %}
-      <h1>FOOTER</h1>
-    {% endblock %}
-
-    {% block bodyEnd %}{% endblock %}
+  {% block bodyStart %}{% endblock %}
+
+  {% block skipLink %}
+  {#{ govukSkipLink({
+    href: '#main-content',
+    text: 'Skip to main content'
+  }) }#}
+  {% endblock %}
+
+  {% block header %}
+  <h1>HEADER</h1>
+  {% endblock %}
+
+  {% block main %}
+  {% block beforeContent %}{% endblock %}
+  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+    {% block content %}{% endblock %}
+  </main>
+  {% endblock %}
+
+  {% block footer %}
+  <h1>FOOTER</h1>
+  {% endblock %}
+
+  {% block bodyEnd %}{% endblock %}
   </body>
 </html>

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

@@ -0,0 +1,5 @@
+{% extends "./_generic.njk" %}
+
+{% block stylesheets %}
+{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+{% endblock %}

package/nationalarchives/templates/search-results.njk

@@ -1,38 +1,38 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+{% from "../components/card/macro.njk" import tnaCard %}
 
-{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+{% extends "./layouts/_prototype-kit.njk" %}
 
 {% block pageTitle %}The National Archives | Results{% 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 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>",
-                    }) }}
-                </div>
-            {%- endfor %}
-        </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 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>",
+          }) }}
+        </div>
+      {%- endfor %}
+    </main>
+  </div>
 {% endblock %}

package/nationalarchives/templates/topics.njk

@@ -1,42 +1,42 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
-{% from "nationalarchives/components/hero/macro.njk" import tnaHero %}
+{% from "../components/card/macro.njk" import tnaCard %}
+{% from "../components/hero/macro.njk" import tnaHero %}
 
-{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+{% extends "./layouts/_prototype-kit.njk" %}
 
 {% block pageTitle %}The National Archives | Topics{% 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({
-                    "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>",
-                }) }}
-            </div>
-        {%- endfor %}
+  {{ 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({
+          "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>",
+        }) }}
+      </div>
+    {%- endfor %}
+  </div>
 </main>
 {% endblock %}

package/nationalarchives/tools/_grid.scss

@@ -2,43 +2,68 @@
 @use "../variables/grid";
 
 @mixin columns-generator($count, $suffix: "") {
-  @for $i from 1 through $count - 1 {
-    $simplest-fraction-found: false;
-
-    @for $j from math.div($count, 2) through 1 {
-      @if (
-        $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true
-      ) {
-        .tna-column--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+
+  .tna-column {
+    &--full#{$suffix} {
+      width: 100%;
+      flex: none;
+    }
+
+    @for $i from 1 through $count - 1 {
+      $simplest-fraction-found: false;
+
+      @for $j from math.div($count, 2) through 1 {
+        @if (
+          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true
+        ) {
+          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+            width: math.div(100%, $count) * $i;
+            flex: none;
+          }
+
+          // .column--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;
+          // }
+
+          $simplest-fraction-found: true;
+        }
+      }
+
+      @if $simplest-fraction-found != true {
+        &--width-#{$i}-#{$count}#{$suffix} {
           width: math.div(100%, $count) * $i;
           flex: none;
         }
 
-        // .column--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;
-        // }
+        //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
+        //     margin-right: math.div(100%, $count) * $i;
+        //   }
 
-        $simplest-fraction-found: true;
+        //   .column--margin-left-#{$i}-#{$count}#{$suffix} {
+        //     margin-left: math.div(100%, $count) * $i;
+        //   }
       }
     }
 
-    @if $simplest-fraction-found != true {
-      .tna-column--width-#{$i}-#{$count}#{$suffix} {
-        width: math.div(100%, $count) * $i;
-        flex: none;
-      }
+    @for $i from 1 through 2 {
+      &--flex-#{$i}#{$suffix} {
+        width: auto;
 
-      //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
-      //     margin-right: math.div(100%, $count) * $i;
-      //   }
+        flex: $i 0;
+      }
+    }
 
-      //   .column--margin-left-#{$i}-#{$count}#{$suffix} {
-      //     margin-left: math.div(100%, $count) * $i;
-      //   }
+    @for $i from 1 through 3 {
+      &--order-#{$i}#{$suffix} {
+        order: $i;
+      }
     }
   }
 }

package/nationalarchives/utilities/_global.scss

@@ -1,3 +1,4 @@
+@use "../variables/colour";
 @use "../variables/typography";
 
 .tna-template {
@@ -9,7 +10,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
-  font-size: typography.$base-font-size-px;
+  font-size: #{typography.$base-font-size-px}px;
 
   @media (prefers-reduced-motion) {
     * {
@@ -20,6 +21,7 @@
 }
 
 .tna-template__body {
+  min-height: 100%;
   margin: 0;
   padding: 0;
 
@@ -42,6 +44,11 @@ canvas {
   width: 100%;
 }
 
+[hidden] {
+  display: none;
+}
+
 *:focus {
-  outline: 3px #f0a solid;
+  outline: 0.3125rem colour.$focus-colour solid;
+  outline-offset: 0.125rem;
 }

package/nationalarchives/utilities/_typography.scss

@@ -1,4 +1,6 @@
+@use "../variables/colour";
 @use "../variables/typography";
+@use "../tools/media";
 @use "../tools/typography" as tools;
 
 // Temporary - will eventually bundle font files into package
@@ -8,6 +10,7 @@
 .tna-template {
   font-family: typography.$font-family-main;
   font-weight: typography.$font-weight-main;
+  color: colour.$base-font-colour;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -58,6 +61,7 @@
     margin-top: 0;
     margin-bottom: 1.5rem;
 
+    color: colour.$tna-black;
     font-family: typography.$font-family-heading;
     font-weight: typography.$font-weight-heading;
 
@@ -68,11 +72,27 @@
     &--xl {
       @include tools.relative-font-size(64);
       line-height: 1;
+
+      @include media.on-medium {
+        @include tools.relative-font-size(42);
+      }
+
+      @include media.on-mobile {
+        @include tools.relative-font-size(36);
+      }
     }
 
     &--l {
       @include tools.relative-font-size(32);
       line-height: 1.2;
+
+      @include media.on-medium {
+        @include tools.relative-font-size(26);
+      }
+
+      @include media.on-mobile {
+        @include tools.relative-font-size(24);
+      }
     }
 
     &--m {
@@ -96,6 +116,7 @@
     &__supertitle {
       margin: 0;
 
+      color: colour.$base-font-colour;
       @include tools.relative-font-size(14);
       font-family: typography.$font-family-detail;
       font-weight: typography.$font-weight-detail;
@@ -109,8 +130,12 @@
     &__title {
       margin: 0;
 
+      color: colour.$tna-black;
+
       .tna-hgroup__supertitle {
         display: block;
+
+        color: colour.$base-font-colour;
       }
     }
 

package/nationalarchives/variables/_colour.scss

@@ -1 +1,11 @@
-$base-font-colour: #111 !default;
+$tna-black: #000;
+$tna-yellow: #fc0;
+$tna-pink: #fe1d57;
+$tna-orange: #fd3f03;
+$tna-green: #86bc25;
+$tna-blue: #00b0ff;
+
+$dark: #26262a !default;
+$base-font-colour: #343338 !default;
+$focus-colour: #004c7e !default;
+$keyline-colour: #ccc !default;