@nationalarchives/frontend 0.1.10-prerelease → 0.1.11-prerelease

package/nationalarchives/patterns/featured-collection/template.njk

@@ -0,0 +1,96 @@
+{% from "nationalarchives/components/grid/macro.njk" import tnaGrid %}
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+
+{% set exampleCard = {
+  heading: {
+    title: "Card title",
+    level: 3,
+    size: "m",
+    singleSentence: true
+  },
+  href: "#",
+  image: {
+    src: "https://picsum.photos/id/29/640/360",
+    alt: "A placeholder image"
+  },
+  body: "<p>Card body</p>"
+} %}
+
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = containerClasses.concat('tna-featured-collection') -%}
+
+{{ tnaGrid({
+  columns: [
+    {
+      width: "full",
+      widthMedium: "full",
+      widthSmall: "full",
+      widthTiny: "full",
+      html: "<h2 class=\"tna-heading\">" + params.heading + "</h2>"
+    },
+    {
+      width: "1-2",
+      widthMedium: "2-3",
+      widthSmall: "1-2",
+      widthTiny: "full",
+      html: tnaCard({
+        heading: {
+          title: "Card title",
+          level: 3,
+          size: "m",
+          singleSentence: true
+        },
+        href: "#",
+        image: {
+          src: "https://picsum.photos/id/29/640/360",
+          alt: "A placeholder image",
+          label: "Feature"
+        },
+        body: "<p>Card body</p>"
+      })
+    },
+    {
+      width: "1-2",
+      widthMedium: "1-3",
+      widthSmall: "1-2",
+      widthTiny: "full",
+      html: tnaGrid({
+        columns: [
+          {
+            width: "1-2",
+            widthMedium: "full",
+            widthSmall: "full",
+            widthTiny: "full",
+            html: tnaCard(exampleCard)
+          },
+          {
+            width: "1-2",
+            widthMedium: "full",
+            widthSmall: "full",
+            widthTiny: "full",
+            html: tnaCard(exampleCard)
+          },
+          {
+            width: "1-2",
+            widthMedium: "full",
+            widthSmall: "full",
+            widthTiny: "full",
+            html: tnaCard(exampleCard)
+          },
+          {
+            width: "1-2",
+            widthMedium: "full",
+            widthSmall: "full",
+            widthTiny: "full",
+            html: tnaCard(exampleCard)
+          }
+        ],
+        noPadding: true
+      }),
+      noPadding: true
+    }
+  ],
+  htmlElement: "section",
+  classes: containerClasses | join(' '),
+  attributes: params.attributes
+}) }}

package/nationalarchives/stories/development/contributing.mdx

@@ -8,9 +8,10 @@ import { Meta } from "@storybook/blocks";
 
 1. Create a new directory in `src/nationalarchives/components`
 1. Create an `_index.scss`, `fixtures.json`, `macro-options.json`, `macro.njk`, `template.njk` and a `[myComponent].stories.js` in the directory using other components as a guide
-1. Add the component SCSS to src/nationalarchives/components/_all.scss
+1. Add the component SCSS to `src/nationalarchives/components/_all.scss`
 1. Update `tasks/test-package.js` to check for the files as part of the CI (`...componentFiles("myComponent", true)` where `true` ignores the check for any JavaScript files)
 1. Set the macro in `macro.njk` to be `tnaMyComponent` where "MyComponent" is the name of your component
+1. Add the component import and macro to the prototype kit test in `.github/workflows/ci.yml`
 
 ### Files
 

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 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/_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/_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,26 +1,24 @@
 @use "../features";
-@use "../variables/colour";
+@use "../tools/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-color-scheme: dark) {
+    @include colour.colour-css-vars-dark;
+  }
 
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
+  @media (prefers-contrast: more) {
+    @include colour.colour-css-vars-high-contrast;
 
-      * {
-        background-image: none !important;
-      }
+    * {
+      background-image: none !important;
     }
+  }
 
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
+  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+    @include colour.colour-css-vars-high-contrast-dark;
   }
 }
 
@@ -37,49 +35,67 @@
 
   @include colour.colour-background("page-background");
 
-  &--back-accent {
-    accent-color: colour.$tna-black;
-  }
+  // &--black-accent {
+  //   accent-color: colour.$_tna-black;
+  // }
 
-  &--yellow-accent {
-    accent-color: colour.$tna-yellow;
-  }
+  // &--yellow-accent {
+  //   accent-color: colour.$_tna-yellow;
+  // }
 
-  &--pink-accent {
-    accent-color: colour.$tna-pink;
-  }
+  // &--pink-accent {
+  //   accent-color: colour.$_tna-pink;
+  // }
 
-  &--orange-accent {
-    accent-color: colour.$tna-orange;
-  }
+  // &--orange-accent {
+  //   accent-color: colour.$_tna-orange;
+  // }
 
-  &--green-accent {
-    accent-color: colour.$tna-green;
-  }
+  // &--green-accent {
+  //   accent-color: colour.$_tna-green;
+  // }
 
-  &--blue-accent {
-    accent-color: colour.$tna-blue;
-  }
+  // &--blue-accent {
+  //   accent-color: colour.$_tna-blue;
+  // }
 
-  @if features.$support-colour-schemes {
-    &--light-theme {
-      @include colour.colour-css-vars;
-    }
+  /* &--system-theme {
+    @include colour.colour-css-vars;
 
-    &--dark-theme {
+    @media (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-dark;
     }
 
-    &--high-contrast-theme {
+    @media (prefers-contrast: more) {
       @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-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;
     }
   }
 
@@ -96,7 +112,7 @@
   margin: 0;
   padding: 0;
 
-  // background-color: #fff;
+  // @include colour.colour-background("page-background");
 
   overflow: auto;
 }
@@ -126,6 +142,14 @@ canvas {
   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;

package/nationalarchives/utilities/_index.scss

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