@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

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/_all.scss

@@ -1,3 +1,4 @@
+@use "assets";
 @use "grid";
 @use "media";
 @use "typography";

package/nationalarchives/tools/_assets.scss

@@ -0,0 +1,5 @@
+@use "../variables/assets";
+
+@function tna-asset-url($asset) {
+  @return #{assets.$tna-assets-path}/#{$asset};
+}

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/tools/_media.scss

@@ -1,17 +1,18 @@
 @use "../variables/media";
 
-//   0 ============= 480 ===== 768 == 1024 ==========================
-//   |               |         |      |
-//   | TINY          | SMALL   | MED  | LARGE
-//   |               |         |      |
-//   |<------------->|         .      .            on-tiny
-//   |<----------------------->|      .            on-mobile
+//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)
+//   |         .     |         |      |
+//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------
+//   |         .     |         |      |
+//   |<------------->|         |      |            on-tiny
+//   |<----------------------->|      |            on-mobile
 //   |<------------------------------>|            on-smaller-than-large
-//   .               |<------->|      .            on-small
-//   .               |<-------------------------   on-larger-than-tiny
-//   .               .         |<---->|            on-medium
-//   .               .         |<---------------   on-larger-than-mobile
-//   .               .         .      |<--------   on-large
+//   |         .     |<------->|      |            on-small
+//   |         .     |<-------------------------   on-larger-than-tiny
+//   |         .     |         |<---->|            on-medium
+//   |         .     |         |<---------------   on-larger-than-mobile
+//   |         .     |         |      |<--------   on-large
+//   |<------->.     |         |      |            Smallest device
 
 @mixin on-large() {
   @media #{media.$media-large} {

package/nationalarchives/utilities/_global.scss

@@ -1,5 +1,29 @@
+@use "../features";
+@use "../variables/colour";
 @use "../variables/typography";
 
+:root {
+  @include colour.colour-css-vars;
+
+  @if features.$support-colour-schemes {
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour.colour-css-vars-high-contrast;
+
+      * {
+        background-image: none !important;
+      }
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+}
+
 .tna-template {
   min-width: 320px;
   width: 100%;
@@ -9,7 +33,55 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
-  font-size: typography.$base-font-size-px;
+  font-size: #{typography.$base-font-size-px}px;
+
+  @include colour.colour-background("page-background");
+
+  &--back-accent {
+    accent-color: colour.$tna-black;
+  }
+
+  &--yellow-accent {
+    accent-color: colour.$tna-yellow;
+  }
+
+  &--pink-accent {
+    accent-color: colour.$tna-pink;
+  }
+
+  &--orange-accent {
+    accent-color: colour.$tna-orange;
+  }
+
+  &--green-accent {
+    accent-color: colour.$tna-green;
+  }
+
+  &--blue-accent {
+    accent-color: colour.$tna-blue;
+  }
+
+  @if features.$support-colour-schemes {
+    &--light-theme {
+      @include colour.colour-css-vars;
+    }
+
+    &--dark-theme {
+      @include colour.colour-css-vars-dark;
+    }
+
+    &--high-contrast-theme {
+      @include colour.colour-css-vars-high-contrast;
+
+      * {
+        background-image: none !important;
+      }
+
+      &.tna-template--dark-theme {
+        @include colour.colour-css-vars-high-contrast-dark;
+      }
+    }
+  }
 
   @media (prefers-reduced-motion) {
     * {
@@ -20,10 +92,11 @@
 }
 
 .tna-template__body {
+  min-height: 100%;
   margin: 0;
   padding: 0;
 
-  background-color: #fff;
+  // background-color: #fff;
 
   overflow: auto;
 }
@@ -42,6 +115,33 @@ canvas {
   width: 100%;
 }
 
+[hidden] {
+  display: none;
+}
+
 *:focus {
-  outline: 3px #f0a solid;
+  // outline: 0.3125rem colour.$focus-colour solid;
+  outline: 0.3125rem solid;
+  @include colour.colour-outline("focus-outline");
+  outline-offset: 0.125rem;
+}
+
+.tna-visually-hidden {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+  z-index: -1 !important;
+
+  overflow: hidden !important;
+
+  clip: rect(0, 0, 0, 0) !important;
+
+  border: 0 !important;
+
+  background-color: transparent !important;
 }