@nationalarchives/frontend 0.1.21-prerelease → 0.1.22-prerelease

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

@@ -104,6 +104,7 @@ const Template = ({ theme, accent }) => {
         phase: "beta",
         message:
           'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
+        classes: "tna-phase-banner--accent",
       },
     })}
     ${Header({
@@ -129,32 +130,36 @@ const Template = ({ theme, accent }) => {
         ],
       },
     })}
-    ${Breadcrumbs({
-      params: {
-        items: [
-          {
-            text: "Alpha",
-            href: "#/alpha",
-          },
-          {
-            text: "Beta",
-            href: "#/beta",
-          },
-          {
-            text: "Gamma",
-            href: "#/gamma",
-          },
-          {
-            text: "Delta",
-            href: "#/delta",
-          },
-          {
-            text: "Epsilon",
-            href: "#/epsilon",
+    <div class="tna-container">
+      <div class="tna-column tna-column--full">
+        ${Breadcrumbs({
+          params: {
+            items: [
+              {
+                text: "Alpha",
+                href: "#/alpha",
+              },
+              {
+                text: "Beta",
+                href: "#/beta",
+              },
+              {
+                text: "Gamma",
+                href: "#/gamma",
+              },
+              {
+                text: "Delta",
+                href: "#/delta",
+              },
+              {
+                text: "Epsilon",
+                href: "#/epsilon",
+              },
+            ],
           },
-        ],
-      },
-    })}
+        })}
+      </div>
+    </div>
     <main id="main-content" role="main">
       ${Hero({
         params: {
@@ -171,7 +176,7 @@ const Template = ({ theme, accent }) => {
       })}
       <div class="tna-container tna-section">
         <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
-          <hgroup class="tna-hgroup tna-hgroup--l">
+          <hgroup class="tna-hgroup-l">
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
@@ -264,38 +269,38 @@ const Template = ({ theme, accent }) => {
       <hr>
       <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
-          <h1 class="tna-heading tna-heading--xl">
+          <h1 class="tna-heading-xl">
             This is a heading (XL)
           </h1>
           <p>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.</p>
-          <h2 class="tna-heading tna-heading--l">
+          <h2 class="tna-heading-l">
             This is a heading (L)
           </h2>
           <p>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.</p>
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             This is a heading (M)
           </h3>
           <p>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.</p>
-          <h4 class="tna-heading tna-heading--s">
+          <h4 class="tna-heading-s">
             This is a heading (S)
           </h4>
           <p>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.</p>
-          <hgroup class="tna-hgroup tna-hgroup--xl">
+          <hgroup class="tna-hgroup-xl">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (XL)</h2>
           </hgroup>
           <p>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.</p>
-          <hgroup class="tna-hgroup tna-hgroup--l">
+          <hgroup class="tna-hgroup-l">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (L)</h2>
           </hgroup>
           <p>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.</p>
-          <hgroup class="tna-hgroup tna-hgroup--m">
+          <hgroup class="tna-hgroup-m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (M)</h2>
           </hgroup>
           <p>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.</p>
-          <hgroup class="tna-hgroup tna-hgroup--s">
+          <hgroup class="tna-hgroup-s">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (S)</h2>
           </hgroup>
@@ -309,11 +314,11 @@ const Template = ({ theme, accent }) => {
             </div>
             <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
           </blockquote>
-          <h2 class="tna-heading tna-heading--m">
+          <h2 class="tna-heading-m">
             <a href="#">Reaerching with The National Archives</a>
           </h2>
           <p>Lorem ipsum <a href="#">link</a></p>
-          <hgroup class="tna-hgroup tna-hgroup--m">
+          <hgroup class="tna-hgroup-m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">
               <a href="#">Reaerching with The National Archives</a>
@@ -322,7 +327,7 @@ const Template = ({ theme, accent }) => {
           <p>Lorem ipsum <a href="#">link</a></p>
         </div>
         <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl">
@@ -335,7 +340,7 @@ const Template = ({ theme, accent }) => {
           </dl>
         </div>
         <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl tna-dl--plain">
@@ -348,7 +353,7 @@ const Template = ({ theme, accent }) => {
           </dl>
         </div>
         <div class="tna-column tna-column--full tna-!--margin-top-m">
-          <h3 class="tna-heading tna-heading--m">
+          <h3 class="tna-heading-m">
             Descriptions
           </h3>
           <dl class="tna-dl tna-dl--icon-padding ">
@@ -368,7 +373,7 @@ const Template = ({ theme, accent }) => {
             </dt>
             <dd>LC 4</dd>
           </dl>
-          <h2 class="tna-heading tna-heading--l">
+          <h2 class="tna-heading-l">
             Categories
           </h2>
           <ul class="tna-chip-list">
@@ -393,12 +398,13 @@ const Template = ({ theme, accent }) => {
       <hr>
       <div class="tna-container tna-section">
         <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>
+          <p>Lorem ipsum</p>
+          <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
+          <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
+          <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
+          <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
+          <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
+          <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
         </div>
       </div>
       ${Hero({
@@ -481,17 +487,17 @@ const Template = ({ theme, accent }) => {
                 {
                   id: "unique-id-a",
                   title: "Alpha section",
-                  body: '<h2 class="tna-heading">Alpha title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Alpha title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-b",
                   title: "Beta section",
-                  body: '<h2 class="tna-heading">Beta title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Beta title</h2><p>Lorem ipsum</p>',
                 },
                 {
                   id: "unique-id-c",
                   title: "Gamma section",
-                  body: '<h2 class="tna-heading">Gamma title</h2><p>Lorem ipsum</p>',
+                  body: '<h2 class="tna-heading-l">Gamma title</h2><p>Lorem ipsum</p>',
                 },
               ],
               classes: "tna-tabs--demo",

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

@@ -1,30 +1,19 @@
-const argTypes = {
-  marginTop: {
-    control: "radio",
-    options: ["none", "xs", "s", "m", "l", "xl"],
-  },
-};
+const argTypes = {};
 
 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-!--margin-bottom-xl">Lorem ipsum (tna-!--margin-bottom-xl)</p>
-    <p class="tna-!--margin-bottom-l">Lorem ipsum (tna-!--margin-bottom-l)</p>
-    <p class="tna-!--margin-bottom-m">Lorem ipsum (tna-!--margin-bottom-m)</p>
-    <p class="tna-!--margin-bottom-s">Lorem ipsum (tna-!--margin-bottom-s)</p>
-    <p class="tna-!--margin-bottom-xs">Lorem ipsum (tna-!--margin-bottom-xs)</p>
-    <p class="tna-!--no-margin-bottom">Lorem ipsum (tna-!--no-margin-bottom)</p>
-    <p class="${marginClass}">Lorem ipsum (${marginClass})</p>`;
+const Template = () => {
+  return `<p>Lorem ipsum</p>
+  <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
+  <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
+  <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
+  <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
+  <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
+  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>`;
 };
 
 export const Margin = Template.bind({});
-Margin.args = {
-  marginTop: "none",
-};
+Margin.args = {};

package/nationalarchives/stories/utilities/typography/heading-groups.stories.js

@@ -19,13 +19,13 @@ const Template = ({
   singleSentence,
 }) =>
   singleSentence
-    ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
+    ? `<hgroup class="tna-hgroup-${size}">
   <h${level} class="tna-hgroup__title">
   <span class="tna-hgroup__supertitle">${supertitle}</span>
   <span class="tna-hgroup__title">${title}</span>
 </h${level}>
 </hgroup>`
-    : `<hgroup class="tna-hgroup tna-hgroup--${size}">
+    : `<hgroup class="tna-hgroup-${size}">
   <p class="tna-hgroup__supertitle">${supertitle}</p>
   <h${level} class="tna-hgroup__title">${title}</h${level}>
 </hgroup>`;

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

@@ -8,8 +8,8 @@ export default {
   argTypes,
 };
 
-const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
-  params.size ? ` tna-heading--${params.size}` : ""
+const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading-${
+  params.size
 }">
   ${params.text} (${params.size.toUpperCase()})
 </h${level}>

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

@@ -19,7 +19,7 @@ Paragraph.args = {
 };
 
 const HeadingLinkTemplate = ({ text, href }) =>
-  `<h2 class="tna-heading tna-heading--s">
+  `<h2 class="tna-heading-s">
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});

package/nationalarchives/templates/homepage.njk

@@ -8,7 +8,7 @@
   <div class="tna-section">
     <div class="tna-container">
       <div class="tna-column tna-column--full">
-        <h1 class="tna-heading tna-heading--xl">
+        <h1 class="tna-heading-xl">
           Welcome
         </h1>
       </div>

package/nationalarchives/templates/layouts/_generic.njk

@@ -24,7 +24,7 @@
     {% block head %}{% endblock %}
 
     {% block stylesheets %}
-      <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend/all.css') }}">
+      <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 %}>
@@ -60,15 +60,13 @@
     {% endblock %}
 
     {% block bodyEnd %}
-      {#
-      <script src="{{ tnaFrontendJsPath | default('/static/tna-frontend/all.js') }}"></script>
+      <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();
+        if (window.TNAFrontend && window.TNAFrontend.initAll) {
+          document.addEventListener("DOMContentLoaded", function() {
+            window.TNAFrontend.initAll();
+          });
+        }
       </script>
     {% endblock %}
   </body>

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

@@ -1,15 +1,16 @@
 {% extends "./_generic.njk" %}
 
 {% block stylesheets %}
-  <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" %}
+{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
 {% endblock %}
 
 {% block bodyEnd %}
   {% include "govuk-prototype-kit/includes/scripts.njk" %}
   <script>
-    window.TNAFrontend.initAll()
+    if (window.TNAFrontend && window.TNAFrontend.initAll) {
+      document.addEventListener("DOMContentLoaded", function() {
+        window.TNAFrontend.initAll();
+      });
+    }
   </script>
 {% endblock %}

package/nationalarchives/templates/search-results.njk

@@ -12,7 +12,7 @@
     <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">
+        <h1 class="tna-heading-xl">
           Search results for "foobar"
         </h1>
       </div>

package/nationalarchives/tools/_colour.scss

@@ -164,14 +164,44 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
-%fixed {
-  @include colour-css-vars;
+%plain {
+  .tna-template--system-theme & {
+    @include colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour-css-vars;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour-css-vars-dark;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 
-  @include colour-font("font-base");
+  --background: var(--page-background);
 }
 
-@mixin fixed {
-  @extend %fixed;
+@mixin plain {
+  @extend %plain;
 }
 
 %invert {

package/nationalarchives/tools/_grid.scss

@@ -24,13 +24,13 @@
             flex: none;
           }
 
-          // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
-          //   margin-right: math.div(100%, $count) * $i;
-          // }
+          &--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;
-          // }
+          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+            margin-left: math.div(100%, $count) * $i;
+          }
 
           $simplest-fraction-found: true;
         }
@@ -42,13 +42,13 @@
           flex: none;
         }
 
-        //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
-        //     margin-right: math.div(100%, $count) * $i;
-        //   }
+        &--margin-right-#{$i}-#{$count}#{$suffix} {
+          margin-right: math.div(100%, $count) * $i;
+        }
 
-        //   .column--margin-left-#{$i}-#{$count}#{$suffix} {
-        //     margin-left: math.div(100%, $count) * $i;
-        //   }
+        &--margin-left-#{$i}-#{$count}#{$suffix} {
+          margin-left: math.div(100%, $count) * $i;
+        }
       }
     }
 

package/nationalarchives/tools/_spacing.scss

@@ -1,16 +1,16 @@
 @use "sass:map";
 @use "../variables/spacing";
 
-%space-below {
-  margin-bottom: 2rem;
+%space-above {
+  margin-top: 2rem;
 
-  &:last-child {
-    margin-bottom: 0;
+  &:first-child {
+    margin-top: 0;
   }
 }
 
-@mixin space-below {
-  @extend %space-below;
+@mixin space-above {
+  @extend %space-above;
 }
 
 @function spacing($size) {

package/nationalarchives/utilities/_columns.scss

@@ -0,0 +1,42 @@
+@use "../tools/media";
+@use "../variables/grid";
+
+.tna-columns {
+  column-gap: grid.$gutter-width;
+
+  &--2 {
+    column-count: 2;
+  }
+
+  &--3 {
+    column-count: 3;
+  }
+
+  @include media.on-tiny {
+    column-gap: grid.$gutter-width-tiny;
+  }
+
+  @include media.on-small {
+    @for $i from 1 through 4 {
+      &--#{$i}-small {
+        column-count: $i;
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    @for $i from 1 through 4 {
+      &--#{$i}-tiny {
+        column-count: $i;
+      }
+    }
+  }
+
+  &__block {
+    break-inside: avoid;
+  }
+
+  &:has(&__block:only-of-type) {
+    column-count: 1;
+  }
+}

package/nationalarchives/utilities/_global.scss

@@ -68,11 +68,9 @@
     }
   }
 
-  @include colour.accent-css-vars("black"); // TODO: Temp
-
-  // &--black-accent {
-  //   @include colour.accent-css-vars("black");
-  // }
+  &--black-accent {
+    @include colour.accent-css-vars("black");
+  }
 
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
@@ -137,7 +135,7 @@ canvas {
 }
 
 hr {
-  margin: 2rem 0;
+  margin: 0;
 
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
@@ -157,7 +155,7 @@ hr {
 .tna-aside {
   padding: 2rem;
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   @include media.on-mobile {
     padding: 1rem;
@@ -166,6 +164,10 @@ hr {
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
   }
+
+  &--tight {
+    padding: 1rem;
+  }
 }
 
 .tna-background {

package/nationalarchives/utilities/_index.scss

@@ -1,5 +1,7 @@
 @use "a11y";
+@use "columns";
 @use "debug";
 @use "global";
+@use "lists";
 @use "overrides";
 @use "typography";