npm - @nationalarchives/frontend - Versions diffs - 0.1.20-prerelease → 0.1.21-prerelease - Mend

@nationalarchives/frontend 0.1.20-prerelease → 0.1.21-prerelease

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 (134) hide show

package/nationalarchives/templates/homepage.njk CHANGED Viewed

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

@@ -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,21 @@
       {% 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>
+        window.TNAFrontend.initAll();
+      </script>
+      #}
+      <script type="module">
+        import { initAll } from "{{ tnaFrontendJsPath | default('/static/tna-frontend/all.js') }}";
+        initAll();
+      </script>
+    {% endblock %}
   </body>
 </html>

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

@@ -1,5 +1,15 @@
 {% extends "./_generic.njk" %}
 {% block stylesheets %}
-{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+  <link href="/public/stylesheets/unbranded.css" media="all" rel="stylesheet" type="text/css" />
+  <link href="/plugin-assets/@nationalarchives/frontend/nationalarchives/all.css" media="all" rel="stylesheet" type="text/css" />
+  {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+{% endblock %}
+{% block bodyEnd %}
+  {% include "govuk-prototype-kit/includes/scripts.njk" %}
+  <script>
+    window.TNAFrontend.initAll()
+  </script>
 {% endblock %}

package/nationalarchives/templates/search-results.njk CHANGED Viewed

@@ -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">
@@ -19,17 +19,13 @@
       {% 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 CHANGED Viewed

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

@@ -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) {
@@ -166,9 +175,11 @@
 }
 %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 +189,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 +200,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 +214,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 +225,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 +244,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 +261,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 +282,8 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
+  @include colour-background("background");
 }
 @mixin light-accent-background {

package/nationalarchives/tools/_media.scss CHANGED Viewed

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

package/nationalarchives/tools/_typography.scss CHANGED Viewed

@@ -1,8 +1,9 @@
 @use "sass:math";
+@use "colour";
 @use "../variables/typography";
 @mixin relative-font-size($fontSizePx) {
-  font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
+  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
 }
 @mixin interacted-text-decoration {
@@ -34,9 +35,10 @@
 }
 @mixin detail-font-small {
+  @include colour.colour-font("font-dark");
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;
-  line-height: #{math.div(typography.$base-font-size-px, 14)};
+  line-height: #{math.div(typography.$relative-1rem-px, 14)};
   // line-height: 1;
 }

package/nationalarchives/utilities/_a11y.scss CHANGED Viewed

@@ -1,3 +1,5 @@
+@use "../tools/colour";
 .tna-visually-hidden {
   width: 1px !important;
   height: 1px !important;
@@ -22,3 +24,16 @@
     content: "\00a0";
   }
 }
+*:focus {
+  z-index: 9;
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}
+.tna-\!--no-focus-style {
+  &:focus {
+    outline: none;
+  }
+}

package/nationalarchives/utilities/_debug.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@use "../features";
+@use "../variables/features";
 /*
  * ==========================================

package/nationalarchives/utilities/_global.scss CHANGED Viewed

@@ -1,4 +1,3 @@
-@use "../features";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -13,11 +12,17 @@
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  /*
+   * ------------------------------------------
+   * Support ended with iOS 13 released on 19th
+   * September 2019. Deprecate in the future if
+   * iOS <13 share drops low enough.
+   * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling
+   * ------------------------------------------
+   */
   -webkit-overflow-scrolling: touch;
-  font-size: #{typography.$base-font-size-px}px;
+  font-size: #{typography.$relative-1rem-px}px;
   @include colour.colour-background("page-background");
@@ -102,8 +107,6 @@
   margin: 0;
   padding: 0;
-  overflow: auto;
   &:has(.tna-header):has(#main-content[role="main"]):has(.tna-footer) {
     display: flex;
     flex-direction: column;
@@ -133,23 +136,12 @@ canvas {
   display: none;
 }
-*:focus {
-  // outline: 0.3125rem colour.$focus-colour solid;
-  outline: 0.3125rem solid;
-  @include colour.colour-outline("focus-outline");
-  outline-offset: 0.125rem;
-}
 hr {
   margin: 2rem 0;
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
   border-style: solid;
-  // @include colour.on-high-contrast {
-  //   border-style: solid;
-  // }
 }
 .tna-section {
@@ -176,14 +168,20 @@ hr {
   }
 }
-.tna-background--contrast {
-  @include colour.invert;
-}
+.tna-background {
+  &--contrast {
+    @include colour.invert;
+  }
-.tna-background--accent {
-  @include colour.accent;
-}
+  &--accent {
+    @include colour.accent;
+  }
-.tna-background--accent-light {
-  @include colour.light-accent-background;
+  &--accent-light {
+    @include colour.light-accent-background;
+  }
+  &--tint {
+    @include colour.tint-background;
+  }
 }