npm - @nationalarchives/frontend - Versions diffs - 0.1.13-prerelease → 0.1.15-prerelease - Mend

@nationalarchives/frontend 0.1.13-prerelease → 0.1.15-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 (65) hide show

package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.mdx ADDED Viewed

@@ -0,0 +1,85 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ColourStories from './colour-schemes.stories';
+<Meta of={ColourStories} />
+# Colour schemes
+## System theme
+The system theme follows the operating system preference for `prefers-color-scheme` which can either be `light` or `dark`.
+The system theme also follows the preference for `prefers-contrast` which can be `no-preference`, `more`, `less` or `custom`.
+At this time, only `prefers-contrast: no-preference` and `prefers-contrast: more` are supported.
+- [MDN Web Docs - prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+- [MDN Web Docs - prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
+```html
+<html class="tna-template tna-template--system-theme">
+  <head>
+    <title>System theme</title>
+  </head>
+  <body class="tna-template__body">
+  </body>
+</html>
+```
+## Light theme
+```html
+<html class="tna-template tna-template--light-theme">
+  <head>
+    <title>Light theme</title>
+  </head>
+  <body class="tna-template__body">
+  </body>
+</html>
+```
+## Dark theme
+```html
+<html class="tna-template tna-template--dark-theme">
+  <head>
+    <title>Dark theme</title>
+  </head>
+  <body class="tna-template__body">
+  </body>
+</html>
+```
+## High contrast themes
+The high contrast themes are applied on top of the existing light and dark themes with an extra `tna-template--high-contrast-theme` class on the `tna-template` element.
+### Light, high contrast theme
+```html
+<html class="tna-template tna-template--light-theme tna-template--high-contrast-theme">
+  <head>
+    <title>Light, high contrast theme</title>
+  </head>
+  <body class="tna-template__body">
+  </body>
+</html>
+```
+### Dark, high contrast theme
+```html
+<html class="tna-template tna-template--dark-theme tna-template--high-contrast-theme">
+  <head>
+    <title>Dark, high contrast theme</title>
+  </head>
+  <body class="tna-template__body">
+  </body>
+</html>
+```
+## Colour definitions
+The colours are defined in `src/nationalarchives/variables/_colour.scss` as a separate map for each theme.
+This allows you to reference a colour, such as `font-base` without having to worry about which theme is currently in use.

package/nationalarchives/stories/utilities/{colour.stories.js → colour-schemes/colour-schemes.stories.js} RENAMED Viewed

@@ -1,11 +1,12 @@
-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";
+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 IndexGrid from "../../../components/index-grid/template.njk";
+import Message from "../../../components/message/template.njk";
+import Picture from "../../../components/picture/template.njk";
+import Tabs from "../../../components/tabs/template.njk";
+import Footer from "../../../components/footer/template.njk";
 const argTypes = {
   theme: {
@@ -21,15 +22,11 @@ const argTypes = {
 };
 export default {
-  title: "Experimental/Utilities/Colour themes",
+  title: "Utilities/Colour schemes",
   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"
@@ -109,7 +106,6 @@ const Template = ({ theme }) => {
             <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>
@@ -118,7 +114,33 @@ const Template = ({ theme }) => {
           </ul>
           <a href="#" class="tna-button">Primary button</a>
           <a href="#" class="tna-button tna-button--secondary">Secondary button</a>
-          <hr>
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
+          <p class="tna-!--no-margin-bottom">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!__padding-top--xs">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!__padding-top--s">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!__padding-top--m">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!__padding-top--l">Lorem ipsum</p>
+          <p class="tna-!--no-margin-bottom tna-!__padding-top--xl">Lorem ipsum</p>
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
+          ${Message({
+            params: {
+              message:
+                "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+            },
+          })}
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
           ${Card({
             params: {
               heading: {
@@ -135,10 +157,43 @@ const Template = ({ theme }) => {
                 width: 1996,
                 height: 1331,
               },
+              label: "New",
+              body: "<p>Card body</p>",
+              classes: "tna-card--demo",
+            },
+          })}
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
+          ${Card({
+            params: {
+              heading: {
+                supertitle: "Card supertitle",
+                title: "Card title",
+                level: 3,
+                size: "l",
+                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,
+              },
+              label: "New",
               body: "<p>Card body</p>",
+              featured: true,
               classes: "tna-card--demo",
             },
           })}
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
           ${Tabs({
             params: {
               title: "Example tabs",
@@ -162,6 +217,11 @@ const Template = ({ theme }) => {
               classes: "tna-tabs--demo",
             },
           })}
+        </div>
+      </div>
+      <hr>
+      <div class="tna-container">
+        <div class="tna-column tna-column--full">
           ${Picture({
             params: {
               src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
@@ -176,14 +236,65 @@ const Template = ({ theme }) => {
           })}
         </div>
       </div>
+      <hr>
+      ${IndexGrid({
+        params: {
+          heading: "My dogs",
+          items: Array(12)
+            .fill({
+              ...{
+                href: "#",
+                src: "https://picsum.photos/id/237/800/600",
+                alt: "Photo of a puppy",
+                width: "800",
+                height: "600",
+                title: "Cat",
+                subtitle: "4 photos",
+              },
+            })
+            .map((item, index) => {
+              const pseudoRandom = ((index * 29) % 8) + 1;
+              return {
+                ...item,
+                href: `#/category-${index}`,
+                title: `Category #${index + 101}`,
+                subtitle: `${pseudoRandom} photos`,
+              };
+            }),
+          columns: 4,
+          columnsMedium: 3,
+          columnsSmall: 2,
+          columnsTiny: 1,
+        },
+      })}
     <article>
     ${Footer({})}
   </div>
 </div>`;
 };
-export const Examples = Template.bind({});
-// Examples.parameters = { options: { showPanel: false } };
-Examples.args = {
+export const System = Template.bind({});
+// System.parameters = { options: { showPanel: false } };
+System.args = {
   theme: "system",
 };
+export const Light = Template.bind({});
+Light.args = {
+  theme: "light",
+};
+export const Dark = Template.bind({});
+Dark.args = {
+  theme: "dark",
+};
+export const LightHighContrast = Template.bind({});
+LightHighContrast.args = {
+  theme: "light high-contrast",
+};
+export const DarkHighContrast = Template.bind({});
+DarkHighContrast.args = {
+  theme: "dark high-contrast",
+};

package/nationalarchives/stories/utilities/overrides/overrides.mdx ADDED Viewed

@@ -0,0 +1,66 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as OverrideStories from './overrides.stories';
+<Meta of={OverrideStories} />
+# Overrides
+## Margin
+### Top
+- `tna-!--no-margin-top`
+- `tna-!--margin-top-xs`
+- `tna-!--margin-top-s`
+- `tna-!--margin-top-m`
+- `tna-!--margin-top-l`
+- `tna-!--margin-top-xl`
+### Bottom
+- `tna-!--no-margin-bottom`
+- `tna-!--margin-bottom-xs`
+- `tna-!--margin-bottom-s`
+- `tna-!--margin-bottom-m`
+- `tna-!--margin-bottom-l`
+- `tna-!--margin-bottom-xl`
+### Vertical (top and bottom)
+- `tna-!--no-margin-vertical`
+- `tna-!--margin-vertical-xs`
+- `tna-!--margin-vertical-s`
+- `tna-!--margin-vertical-m`
+- `tna-!--margin-vertical-l`
+- `tna-!--margin-vertical-xl`
+## Padding
+### Top
+- `tna-!--no-padding-top`
+- `tna-!--padding-top-xs`
+- `tna-!--padding-top-s`
+- `tna-!--padding-top-m`
+- `tna-!--padding-top-l`
+- `tna-!--padding-top-xl`
+### Bottom
+- `tna-!--no-padding-bottom`
+- `tna-!--padding-bottom-xs`
+- `tna-!--padding-bottom-s`
+- `tna-!--padding-bottom-m`
+- `tna-!--padding-bottom-l`
+- `tna-!--padding-bottom-xl`
+### Vertical (top and bottom)
+- `tna-!--no-padding-vertical`
+- `tna-!--padding-vertical-xs`
+- `tna-!--padding-vertical-s`
+- `tna-!--padding-vertical-m`
+- `tna-!--padding-vertical-l`
+- `tna-!--padding-vertical-xl`

package/nationalarchives/stories/utilities/overrides/overrides.stories.js ADDED Viewed

@@ -0,0 +1,36 @@
+const argTypes = {
+  marginTop: {
+    control: "radio",
+    options: [
+      "none",
+      // "xs",
+      "s",
+      "m",
+      "l",
+      "xl",
+    ],
+  },
+};
+export default {
+  title: "Utilities/Overrides",
+  argTypes,
+};
+const Template = ({ marginTop }) => {
+  const marginClass =
+    marginTop === "none"
+      ? `tna-!--no-margin-top`
+      : `tna-!--margin-top-${marginTop}`;
+  return `<p class="tna-!--no-margin-bottom">Lorem ipsum</p>
+    <p class="tna-!--no-margin-bottom tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
+    <p class="tna-!--no-margin-bottom tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
+    <p class="tna-!--no-margin-bottom tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
+    <p class="tna-!--no-margin-bottom tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
+    <p class="tna-!--no-margin-bottom ${marginClass}">Lorem ipsum (${marginClass})</p>`;
+};
+export const Margin = Template.bind({});
+Margin.args = {
+  marginTop: "none",
+};

package/nationalarchives/stories/utilities/{headings.stories.js → typography/headings.stories.js} RENAMED Viewed

@@ -12,7 +12,8 @@ const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
   params.size ? ` tna-heading--${params.size}` : ""
 }">
   ${params.text} (${params.size.toUpperCase()})
-</h${level}>`;
+</h${level}>
+`;
 const HeadingsTemplate = ({ text }) =>
   `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate(

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

@@ -0,0 +1,34 @@
+const argTypes = {
+  text: { control: "text" },
+};
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+const ParagraphTemplate = ({ paragraphs }) =>
+  paragraphs.map((paragraph) => `<p class="tna-p">${paragraph}</p>`).join("");
+export const Paragraph = ParagraphTemplate.bind({});
+Paragraph.args = {
+  paragraphs: [
+    "This is some body text.",
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh. Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl. Donec dapibus est arcu, vel pellentesque risus pellentesque eget.",
+    "Nam a posuere lectus. Vivamus facilisis est pretium augue aliquet iaculis. Phasellus ligula orci, commodo eget lectus et, tincidunt scelerisque erat. Aliquam in est vel purus ultricies vulputate non sed ligula. Pellentesque ut felis ullamcorper, eleifend erat dapibus, feugiat metus. Phasellus vitae dolor commodo, posuere nisl sed, luctus mauris. Etiam malesuada tincidunt enim, ac fermentum est pulvinar id. Maecenas id accumsan libero. Curabitur at velit nisi. Nullam gravida mauris quam, tempor pharetra risus venenatis vel. Proin quis malesuada lacus. Nulla condimentum facilisis turpis, et elementum leo. Nulla gravida quam mauris, id scelerisque est rhoncus ac.",
+  ],
+};
+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/tools/_colour.scss CHANGED Viewed

@@ -26,59 +26,37 @@
   }
 }
-@mixin colour-font($colour, $inverted: false) {
-  @if $inverted {
-    color: map.get(colour.$colour-palette-dark, $colour);
+@mixin colour-font($colour) {
+  color: map.get(colour.$colour-palette-default, $colour);
+  @if $colour == "accent" {
+    color: var(--#{$colour}, var(--accent-default));
   } @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);
+@mixin colour-background($colour) {
+  background-color: map.get(colour.$colour-palette-default, $colour);
+  @if $colour == "accent" {
+    background-color: var(--#{$colour}, var(--accent-default));
   } @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-border($colour) {
+  border-color: map.get(colour.$colour-palette-default, $colour);
+  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-outline($colour) {
+  outline-color: map.get(colour.$colour-palette-default, $colour);
+  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 colour-fill($colour) {
+  fill: map.get(colour.$colour-palette-default, $colour);
+  fill: var(--#{$colour});
 }
 @mixin fixed {
@@ -88,42 +66,62 @@
 }
 @mixin invert {
+  --font-base: var(--contrast-font-base);
+  --font-dark: var(--contrast-font-dark);
+  --font-light: var(--contrast-font-light);
+  --link: var(--contrast-link);
+  --link-visited: var(--contrast-link-visited);
+  --keyline: var(--contrast-keyline);
+  --keyline-dark: var(--contrast-keyline-dark);
+  @include colour-font("contrast-font-base");
+  @include colour-background("contrast-background");
+}
+@mixin uninvert {
+  @include colour-css-vars;
   .tna-template--system-theme & {
-    @include colour-css-vars-dark;
+    @include colour-css-vars;
     @media (prefers-color-scheme: dark) {
-      @include colour-css-vars;
+      @include colour-css-vars-dark;
     }
     @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast-dark;
+      @include colour-css-vars-high-contrast;
     }
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast;
+      @include colour-css-vars-high-contrast-dark;
     }
   }
   .tna-template--light-theme & {
-    @include colour-css-vars-dark;
+    @include colour-css-vars;
   }
   .tna-template--dark-theme & {
-    @include colour-css-vars;
+    @include colour-css-vars-dark;
   }
   .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-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 }
-%tna-invert {
-  @include invert;
+@mixin on-high-contrast {
+  .tna-template--high-contrast-theme & {
+    @content;
+  }
+  @media (prefers-contrast: more) {
+    .tna-template--system-theme & {
+      @content;
+    }
+  }
 }

package/nationalarchives/tools/_typography.scss CHANGED Viewed

@@ -5,9 +5,17 @@
   font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
 }
+@mixin main-font-weight {
+  font-weight: typography.$font-weight-main;
+}
+@mixin main-font-weight-bold {
+  font-weight: typography.$font-weight-main-bold;
+}
 @mixin main-font {
   font-family: typography.$font-family-main;
-  font-weight: typography.$font-weight-main;
+  @include main-font-weight;
 }
 @mixin heading-font {
@@ -18,4 +26,8 @@
 @mixin detail-font {
   font-family: typography.$font-family-detail;
   font-weight: typography.$font-weight-detail;
+  @include relative-font-size(14);
+  text-transform: uppercase;
+  line-height: #{math.div(typography.$base-font-size-px, 14)};
+  // line-height: 1;
 }

package/nationalarchives/utilities/_global.scss CHANGED Viewed

@@ -4,22 +4,6 @@
 :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 {
@@ -59,7 +43,7 @@
   //   accent-color: colour.$_tna-blue;
   // }
-  /* &--system-theme {
+  &--system-theme {
     @include colour.colour-css-vars;
     @media (prefers-color-scheme: dark) {
@@ -77,7 +61,7 @@
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
-  } */
+  }
   &--light-theme {
     @include colour.colour-css-vars;
@@ -114,11 +98,11 @@
   overflow: auto;
-  &:has(.tna-header):has(#main[role="main"]):has(.tna-footer) {
+  &:has(.tna-header):has(#main-content[role="main"]):has(.tna-footer) {
     display: flex;
     flex-direction: column;
-    #main[role="main"] {
+    #main-content[role="main"] {
       flex: 1;
     }
   }
@@ -150,11 +134,15 @@ canvas {
 }
 hr {
-  margin: 1rem;
+  margin: 3rem 0;
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
-  border-style: solid;
+  border-style: dashed;
+  @include colour.on-high-contrast {
+    border-style: solid;
+  }
 }
 .tna-visually-hidden {