@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/stories/utilities/colour.stories.js

@@ -0,0 +1,189 @@
+import Header from "../../components/header/template.njk";
+import Breadcrumbs from "../../components/breadcrumbs/template.njk";
+import Card from "../../components/card/template.njk";
+import Hero from "../../components/hero/template.njk";
+import Picture from "../../components/picture/template.njk";
+import Tabs from "../../components/tabs/template.njk";
+import Footer from "../../components/footer/template.njk";
+import { supportDynamicColourSchemes } from "../../../../.storybook/preview";
+
+const argTypes = {
+  theme: {
+    control: "radio",
+    options: [
+      "system",
+      "light",
+      "dark",
+      "light high-contrast",
+      "dark high-contrast",
+    ],
+  },
+};
+
+export default {
+  title: "Experimental/Utilities/Colour themes",
+  argTypes,
+};
+
+const Template = ({ theme }) => {
+  if (supportDynamicColourSchemes) {
+    // document.documentElement.classList.remove("tna-template--light-theme");
+    // document.documentElement.classList.add("tna-template--system-theme");
+  }
+  return `<div class="tna-template ${
+    theme === "system"
+      ? "tna-template--system-theme"
+      : theme === "light"
+      ? "tna-template--light-theme"
+      : theme === "dark"
+      ? "tna-template--dark-theme"
+      : theme === "light high-contrast"
+      ? "tna-template--light-theme tna-template--high-contrast-theme"
+      : theme === "dark high-contrast"
+      ? "tna-template--dark-theme tna-template--high-contrast-theme"
+      : ""
+  }">
+  <div class="tna-template__body tna-template__body--padded">
+    ${Header({
+      params: {
+        navigation: [
+          {
+            text: "Alpha",
+            href: "#/alpha",
+            selected: true,
+          },
+          {
+            text: "Beta",
+            href: "#/beta",
+          },
+          {
+            text: "Gamma",
+            href: "#/gamma",
+          },
+        ],
+        colour: "yellow",
+      },
+    })}
+    ${Breadcrumbs({
+      params: {
+        items: [
+          {
+            text: "Alpha",
+            href: "#/alpha",
+          },
+          {
+            text: "Beta",
+            href: "#/beta",
+          },
+          {
+            text: "Gamma",
+            href: "#/gamma",
+          },
+          {
+            text: "Delta",
+            href: "#/delta",
+          },
+          {
+            text: "Epsilon",
+            href: "#/epsilon",
+          },
+        ],
+      },
+    })}
+    <article>
+      ${Hero({
+        params: {
+          heading: "Title",
+          image: {
+            src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+            alt: "The National Archives office",
+            width: 1996,
+            height: 1331,
+          },
+          classes: "tna-hero--demo",
+        },
+      })}
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
+          <hgroup class="tna-hgroup tna-hgroup--l">
+            <p class="tna-hgroup__supertitle">TNA colour theme</p>
+            <h2 class="tna-hgroup__title">Heading</h2>
+          </hgroup>
+          <hr>
+          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <ul class="tna-ul">
+            <li>Alpha</li>
+            <li>Beta</li>
+            <li>Gamma</li>
+          </ul>
+          <a href="#" class="tna-button">Primary button</a>
+          <a href="#" class="tna-button tna-button--secondary">Secondary button</a>
+          <hr>
+          ${Card({
+            params: {
+              heading: {
+                supertitle: "Card supertitle",
+                title: "Card title",
+                level: 3,
+                size: "m",
+                singleSentence: false,
+              },
+              href: "#",
+              image: {
+                src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+                alt: "The National Archives office",
+                width: 1996,
+                height: 1331,
+              },
+              body: "<p>Card body</p>",
+              classes: "tna-card--demo",
+            },
+          })}
+          ${Tabs({
+            params: {
+              title: "Example tabs",
+              items: [
+                {
+                  id: "unique-id-a",
+                  title: "Alpha section",
+                  body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+                },
+                {
+                  id: "unique-id-b",
+                  title: "Beta section",
+                  body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+                },
+                {
+                  id: "unique-id-c",
+                  title: "Gamma section",
+                  body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+                },
+              ],
+              classes: "tna-tabs--demo",
+            },
+          })}
+          ${Picture({
+            params: {
+              src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+              alt: "The National Archives office",
+              width: 1996,
+              height: 1331,
+              caption: "<p>This is a pretty image</p>",
+              transcript: "<p>Lorem ipsum transcript</p>",
+              translation: "<p>Lorem ipsum translation</p>",
+              classes: "tna-picture--demo",
+            },
+          })}
+        </div>
+      </div>
+    <article>
+    ${Footer({})}
+  </div>
+</div>`;
+};
+
+export const Examples = Template.bind({});
+// Examples.parameters = { options: { showPanel: false } };
+Examples.args = {
+  theme: "system",
+};

package/nationalarchives/stories/utilities/typography.mdx

@@ -31,6 +31,7 @@ In the second example, the heading will be read as two separate sentences; `Reco
 ## General typography
 
 <Canvas of={TypographyStories.Paragraph} />
+<Canvas of={TypographyStories.Blockquote} />
 <Canvas of={ListStories.UnorderedList} />
 <Canvas of={ListStories.UnorderedListPlain} />
 <Canvas of={ListStories.OrderedList} />

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

@@ -12,3 +12,18 @@ export const Paragraph = ParagraphTemplate.bind({});
 Paragraph.args = {
   text: "This is some body text",
 };
+
+const BlockquoteTemplate = ({
+  html,
+  author,
+}) => `<blockquote class="tna-blockquote">
+  <div class="tna-blockquote__quote">
+    ${html}
+  </div>
+  <p class="tna-blockquote__author">${author}</p>
+</p>`;
+export const Blockquote = BlockquoteTemplate.bind({});
+Blockquote.args = {
+  html: "<p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>",
+  author: "Douglas Adams, Mostly Harmless",
+};

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,7 +1,7 @@
 {# 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 js-disabled {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
   <head>
   <meta charset="utf-8">
   <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>

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

@@ -0,0 +1,129 @@
+@use "sass:map";
+@use "../features";
+@use "../variables/colour";
+
+@mixin colour-css-vars() {
+  @each $name, $value in colour.$colour-palette-default {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-dark() {
+  @each $name, $value in colour.$colour-palette-dark {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-high-contrast() {
+  @each $name, $value in colour.$colour-palette-high-contrast {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-css-vars-high-contrast-dark() {
+  @each $name, $value in colour.$colour-palette-high-contrast-dark {
+    --#{$name}: #{$value};
+  }
+}
+
+@mixin colour-font($colour, $inverted: false) {
+  @if $inverted {
+    color: map.get(colour.$colour-palette-dark, $colour);
+  } @else {
+    color: map.get(colour.$colour-palette-default, $colour);
+  }
+  @if features.$support-colour-schemes {
+    color: var(--#{$colour});
+  }
+}
+
+@mixin colour-background($colour, $inverted: false) {
+  @if $inverted {
+    background-color: map.get(colour.$colour-palette-dark, $colour);
+  } @else {
+    background-color: map.get(colour.$colour-palette-default, $colour);
+  }
+  @if features.$support-colour-schemes {
+    background-color: var(--#{$colour});
+  }
+}
+
+@mixin colour-border($colour, $inverted: false) {
+  @if $inverted {
+    border-color: map.get(colour.$colour-palette-dark, $colour);
+  } @else {
+    border-color: map.get(colour.$colour-palette-default, $colour);
+  }
+  @if features.$support-colour-schemes {
+    border-color: var(--#{$colour});
+  }
+}
+
+@mixin colour-outline($colour, $inverted: false) {
+  @if $inverted {
+    outline-color: map.get(colour.$colour-palette-dark, $colour);
+  } @else {
+    outline-color: map.get(colour.$colour-palette-default, $colour);
+  }
+  @if features.$support-colour-schemes {
+    outline-color: var(--#{$colour});
+  }
+}
+
+@mixin colour-fill($colour, $inverted: false) {
+  @if $inverted {
+    fill: map.get(colour.$colour-palette-dark, $colour);
+  } @else {
+    fill: map.get(colour.$colour-palette-default, $colour);
+  }
+  @if features.$support-colour-schemes {
+    fill: var(--#{$colour});
+  }
+}
+
+@mixin fixed {
+  @include colour-css-vars;
+
+  @include colour-font("font-base");
+}
+
+@mixin invert {
+  .tna-template--system-theme & {
+    @include colour-css-vars-dark;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour-css-vars;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast-dark;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour-css-vars-high-contrast;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour-css-vars-dark;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour-css-vars;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
+
+  .tna-template--dark-theme.tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
+
+  @include colour-font("font-base", true);
+  @include colour-background("page-background", true);
+}
+
+%tna-invert {
+  @include invert;
+}

package/nationalarchives/tools/_grid.scss

@@ -52,7 +52,7 @@
       }
     }
 
-    @for $i from 1 through 2 {
+    @for $i from 1 through 3 {
       &--flex-#{$i}#{$suffix} {
         width: auto;
 
@@ -60,7 +60,7 @@
       }
     }
 
-    @for $i from 1 through 3 {
+    @for $i from 1 through 4 {
       &--order-#{$i}#{$suffix} {
         order: $i;
       }

package/nationalarchives/tools/_index.scss

@@ -0,0 +1,5 @@
+@forward "assets";
+@forward "colour";
+@forward "grid";
+@forward "media";
+@forward "typography";

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

@@ -4,3 +4,18 @@
 @mixin relative-font-size($fontSizePx) {
   font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
 }
+
+@mixin main-font {
+  font-family: typography.$font-family-main;
+  font-weight: typography.$font-weight-main;
+}
+
+@mixin heading-font {
+  font-family: typography.$font-family-heading;
+  font-weight: typography.$font-weight-heading;
+}
+
+@mixin detail-font {
+  font-family: typography.$font-family-detail;
+  font-weight: typography.$font-weight-detail;
+}

package/nationalarchives/utilities/_debug.scss

@@ -0,0 +1,11 @@
+@use "../features";
+
+@if features.$debug-interactable-areas {
+  a,
+  button,
+  label[for] {
+    background-color: rgba(#f0a, 0.25) !important;
+
+    box-shadow: 0 0 0 1px #f0a !important;
+  }
+}

package/nationalarchives/utilities/_global.scss

@@ -1,6 +1,27 @@
-@use "../variables/colour";
+@use "../features";
+@use "../tools/colour";
 @use "../variables/typography";
 
+:root {
+  @include colour.colour-css-vars;
+
+  @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%;
@@ -12,6 +33,72 @@
 
   font-size: #{typography.$base-font-size-px}px;
 
+  @include colour.colour-background("page-background");
+
+  // &--black-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;
+  // }
+
+  /* &--system-theme {
+    @include colour.colour-css-vars;
+
+    @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;
+    }
+  } */
+
+  &--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) {
     * {
       animation: none !important;
@@ -25,7 +112,7 @@
   margin: 0;
   padding: 0;
 
-  background-color: #fff;
+  // @include colour.colour-background("page-background");
 
   overflow: auto;
 }
@@ -49,6 +136,36 @@ canvas {
 }
 
 *:focus {
-  outline: 0.3125rem colour.$focus-colour solid;
+  // outline: 0.3125rem colour.$focus-colour solid;
+  outline: 0.3125rem solid;
+  @include colour.colour-outline("focus-outline");
   outline-offset: 0.125rem;
 }
+
+hr {
+  margin: 1rem;
+
+  border-width: 1px 0 0;
+  @include colour.colour-border("keyline");
+  border-style: solid;
+}
+
+.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;
+}

package/nationalarchives/utilities/_index.scss

@@ -0,0 +1,3 @@
+@forward "debug";
+@forward "global";
+@forward "typography";