@nationalarchives/frontend 0.1.23-prerelease → 0.1.24-prerelease

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

@@ -2,6 +2,7 @@ import SkipLink from "../../../components/skip-link/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
+import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
 import CookieBanner from "../../../components/cookie-banner/template.njk";
 import Gallery from "../../../components/gallery/template.njk";
@@ -27,7 +28,7 @@ const argTypes = {
   },
   accent: {
     control: "radio",
-    options: ["none", /*"black",*/ "yellow", "pink", "orange", "green", "blue"],
+    options: ["none", "black", "yellow", "pink", "orange", "green", "blue"],
   },
 };
 
@@ -104,7 +105,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",
+        accent: true,
       },
     })}
     ${Header({
@@ -235,8 +236,8 @@ const Template = ({ theme, accent }) => {
         </div>
         <div class="tna-column tna-column--no-padding tna-column--width-1-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
           <div class="tna-container tna-container--no-padding">
-            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
-              <div class="tna-aside tna-background--contrast">
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-vertical-m tna-!--no-margin-top-large">
+              <div class="tna-aside tna-background-contrast">
                 <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>
                 <div class="tna-button-group">
                   ${Button({
@@ -249,8 +250,8 @@ const Template = ({ theme, accent }) => {
                 </div>
               </div>
             </div>
-            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-top-m tna-!--margin-top-l-medium tna-!--margin-top-l-small tna-!--margin-top-l-tiny">
-              <div class="tna-aside tna-background--accent">
+            <div class="tna-column tna-column--full tna-column--width-1-2-medium tna-column--width-1-2-small tna-!--margin-vertical-m tna-!--no-margin-top-large tna-!--no-margin-bottom-large">
+              <div class="tna-aside tna-background-accent">
                 <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>
                 <div class="tna-button-group">
                   ${Button({
@@ -316,13 +317,13 @@ const Template = ({ theme, accent }) => {
             <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
-            <a href="#">Reaerching with The National Archives</a>
+            <a href="#">Researching with The National Archives</a>
           </h2>
           <p>Lorem ipsum <a href="#">link</a></p>
           <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>
+              <a href="#">Researching with The National Archives</a>
             </h2>
           </hgroup>
           <p>Lorem ipsum <a href="#">link</a></p>
@@ -394,6 +395,32 @@ const Template = ({ theme, accent }) => {
                 "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
             },
           })}
+          <h2 class="tna-heading-l">
+            Featured records
+          </h2>
+          ${FeaturedRecords({
+            params: {
+              items: [
+                {
+                  imageSrc:
+                    "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+                  imageWidth: 576,
+                  imageHeight: 591,
+                  collection: "TS 11/45/167",
+                  title: "Court records relating to Robert Wedderburn's trial",
+                  href: "#",
+                  date: "1819–1820",
+                },
+                {
+                  collection: "HO 42/191",
+                  title: "Home office letters",
+                  href: "#",
+                  date: "1819",
+                },
+              ],
+              classes: "tna-featured-records--demo",
+            },
+          })}
         </div>
       </div>
       <hr>
@@ -663,7 +690,7 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--contrast">
+      <div class="tna-section tna-background-contrast">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 2", level: 3, href: "#" },
@@ -745,7 +772,7 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--accent-light">
+      <div class="tna-section tna-background-accent-light">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 3", level: 3, href: "#" },
@@ -827,7 +854,7 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
-      <div class="tna-section tna-background--accent">
+      <div class="tna-section tna-background-accent">
         ${IndexGrid({
           params: {
             heading: { title: "My dogs 4", level: 3, href: "#" },

package/nationalarchives/stories/utilities/lists/lists.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ListStories from './lists.stories';
+
+<Meta of={ListStories} />
+
+# Lists
+
+<Canvas of={ListStories.UnorderedList} />
+<Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.DescriptionList} />
+<Canvas of={ListStories.DescriptionListWithIcons} />
+
+## Plain versions
+
+<Canvas of={ListStories.UnorderedListPlain} />
+<Canvas of={ListStories.OrderedListPlain} />
+<Canvas of={ListStories.PlainDescriptionList} />
+<Canvas of={ListStories.PlainDescriptionListWithIcons} />

package/nationalarchives/stories/utilities/{typography → lists}/lists.stories.js

@@ -4,7 +4,7 @@ const argTypes = {
 };
 
 export default {
-  title: "Utilities/Typography",
+  title: "Utilities/Lists",
   argTypes,
 };
 

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

@@ -5,42 +5,49 @@ import * as OverrideStories from './overrides.stories';
 
 # Overrides
 
-## Properties
+## Options
 
-Property options: `margin`, `padding`
+`property`:
 
-```css
-tna-!--no-[property]-[direction]
-```
+- `margin`
+- `padding`
 
-### No margin/padding
-
-Direction options:
+`direction`:
 
 - `top`
 - `bottom`
 - `vertical` - `top` and `bottom`
 
-```css
+## Removing space
+
+```
+// For all devices
 tna-!--no-[property]-[direction]
 ```
 
-### Sizes
+`device` options (optional):
 
-Size options: `xs`, `s`, `m`, `l`, `xl`, `xxl`
+- `large`
+- `medium`
+- `small`
+- `tiny`
 
-```css
-tna-!--[property]-[direction]-[size]
 ```
-
-### Responsive
-
-Device options: `medium`, `small`, `tiny`
-
-```css
+// For a specific device size
 tna-!--no-[property]-[direction]-[device]
-tna-!--[property]-[direction]-[size]-[device]
 ```
 
+## Adding space
 
+`size` options:
 
+- `xs`
+- `s`
+- `m`
+- `l`
+- `xl`
+- `xxl`
+
+```css
+tna-!--[property]-[direction]-[size]
+```

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

@@ -1,3 +1,5 @@
+import { customViewports } from "../../../../../.storybook/viewports";
+
 const argTypes = {};
 
 export default {
@@ -6,14 +8,28 @@ export default {
 };
 
 const Template = () => {
-  return `<p>Lorem ipsum</p>
+  return `<div class="tna-spacing-demo">
+  <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>`;
+  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
+  <p class="tna-!--margin-top-xxl">Lorem ipsum (tna-!--margin-top-xxl)</p>
+</div>`;
 };
 
 export const Margin = Template.bind({});
 Margin.args = {};
+
+export const MarginMobile = Template.bind({});
+MarginMobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+MarginMobile.args = {};

package/nationalarchives/stories/utilities/typography/typography.mdx

@@ -2,14 +2,11 @@ import { Meta, Canvas } from "@storybook/blocks";
 import * as HeadingStories from './headings.stories';
 import * as HeadingGroupStories from './heading-groups.stories';
 import * as TypographyStories from './typography.stories';
-import * as ListStories from './lists.stories';
 
 <Meta of={TypographyStories} />
 
 # Typography
 
-We use a set of typefaces...
-
 ## Headings
 
 <Canvas of={HeadingStories.Headings} />
@@ -17,32 +14,13 @@ We use a set of typefaces...
 
 ## Heading groups
 
-Although visually identical, there are two types of header groups based on whether the group should be read as a single sentence or not.
-
-In the first example, the heading will be read by screen readers as `The story of Alice Hawkins.`
-
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-
-In the second example, the heading will be read as two separate sentences; `Record revealed. The Monteagle Letter.`
-
 <Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
 
 ## General typography
 
 <Canvas of={TypographyStories.Paragraph} />
-<Canvas of={TypographyStories.Blockquote} />
+<Canvas of={TypographyStories.LargeParagraph} />
 <Canvas of={TypographyStories.SceneSetter} />
-
-## Lists
-
-<Canvas of={ListStories.UnorderedList} />
-<Canvas of={ListStories.OrderedList} />
-<Canvas of={ListStories.DescriptionList} />
-<Canvas of={ListStories.DescriptionListWithIcons} />
-
-### Plain versions
-
-<Canvas of={ListStories.UnorderedListPlain} />
-<Canvas of={ListStories.OrderedListPlain} />
-<Canvas of={ListStories.PlainDescriptionList} />
-<Canvas of={ListStories.PlainDescriptionListWithIcons} />
+<Canvas of={TypographyStories.SceneSetterSmall} />
+<Canvas of={TypographyStories.Blockquote} />

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

@@ -18,17 +18,28 @@ Paragraph.args = {
   ],
 };
 
+const LargeParagraphTemplate = ({ paragraphs }) =>
+  paragraphs
+    .map((paragraph) => `<p class="tna-large-paragraph">${paragraph}</p>`)
+    .join("");
+export const LargeParagraph = LargeParagraphTemplate.bind({});
+LargeParagraph.args = {
+  paragraphs: [
+    "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.",
+  ],
+};
+
 const HeadingLinkTemplate = ({ text, href }) =>
   `<h2 class="tna-heading-s">
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});
 HeadingLink.args = {
-  text: "Reaerching with The National Archives",
+  text: "Researching with The National Archives",
   href: "#",
 };
 
-const SceneSetterTemplate = ({ text, href }) =>
+const SceneSetterTemplate = ({ text }) =>
   `<p class="tna-scene-setter">
     ${text}
   </p>`;
@@ -37,6 +48,21 @@ SceneSetter.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
 
+const SceneSetterSmallTemplate = ({ text }) =>
+  `<p class="tna-scene-setter tna-scene-setter--small">
+    ${text}
+  </p>`;
+export const SceneSetterSmall = SceneSetterSmallTemplate.bind({});
+SceneSetterSmall.args = {
+  text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
+};
+
+// const TextDetailsTemplate = () =>
+//   `<p>
+//     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
+//   </p>`;
+// export const TextDetails = TextDetailsTemplate.bind({});
+
 const BlockquoteTemplate = ({
   html,
   author,

package/nationalarchives/templates/layouts/_generic.njk

@@ -25,6 +25,7 @@
 
     {% block stylesheets %}
       <link rel="stylesheet" type="text/css" href="{{ tnaFrontendCssPath | default('/static/tna-frontend') }}/all.css">
+      <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
     {% endblock %}
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>

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

@@ -1,7 +1,8 @@
 {% extends "./_generic.njk" %}
 
 {% block stylesheets %}
-{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+  {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+  <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
 {% endblock %}
 
 {% block bodyEnd %}

package/nationalarchives/tools/_colour.scss

@@ -53,14 +53,7 @@
     --accent-link-visited: #{brand-colour("white")} !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;
-      // --accent-background: #{brand-colour("black")} !important;
-      // --accent-background-light: #{brand-colour("light-grey")} !important;
-      // --button-accent-text: #{brand-colour("black")} !important;
-      // --button-accent-background: #{brand-colour("grey")} !important;
-    } @else {
+    @if $colour != "black" {
       --button-accent-text: #{brand-colour("white")} !important;
       @if $colour == "pink" {
         --accent: #{brand-colour("pink")} !important;
@@ -204,7 +197,7 @@
   @extend %plain;
 }
 
-%invert {
+%contrast {
   --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);
   --font-dark: var(--contrast-font-dark);
@@ -224,11 +217,11 @@
   @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
 
-@mixin invert {
-  @extend %invert;
+@mixin contrast {
+  @extend %contrast;
 }
 
-%invert-on-mobile {
+%contrast-on-mobile {
   @include media.on-mobile {
     --background: var(--contrast-background);
     --font-base: var(--contrast-font-base);
@@ -250,8 +243,8 @@
   }
 }
 
-@mixin invert-on-mobile {
-  @extend %invert-on-mobile;
+@mixin contrast-on-mobile {
+  @extend %contrast-on-mobile;
 }
 
 %accent {
@@ -274,12 +267,12 @@
   @extend %accent;
 }
 
-%tint-background {
+%tint {
   @include colour-background("background-tint");
 }
 
-@mixin tint-background {
-  @extend %tint-background;
+@mixin tint {
+  @extend %tint;
 }
 
 %accent-background {
@@ -290,7 +283,7 @@
   @extend %accent-background;
 }
 
-%light-accent-background {
+%accent-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")};
@@ -316,8 +309,8 @@
   @include colour-background("background");
 }
 
-@mixin light-accent-background {
-  @extend %light-accent-background;
+@mixin accent-light {
+  @extend %accent-light;
 }
 
 @mixin on-high-contrast {

package/nationalarchives/tools/_spacing.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../variables/spacing";
+@use "../tools/media";
 
 %space-above {
   margin-top: 2rem;
@@ -13,10 +14,98 @@
   @extend %space-above;
 }
 
-@function spacing($size) {
+@function space($size) {
   @return map.get(spacing.$spacing, $size);
 }
 
-@function spacing-mobile($size) {
+@function space-mobile($size) {
   @return map.get(spacing.$spacing-mobile, $size);
 }
+
+@mixin no-spacing-generator($suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      $combined-direction: "";
+      @if $direction == top or $direction == bottom {
+        $combined-direction: vertical;
+      } @else if $direction == right or $direction == left {
+        $combined-direction: horizontal;
+      }
+      @if $combined-direction {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix},
+        .tna-\!--no-#{$property}-#{$combined-direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      } @else {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-generator($suffix: "") {
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      @each $size, $amount in spacing.$spacing {
+        @if $direction == all {
+          .tna-\!--#{$property}-#{$size} {
+            #{$property}: #{$amount} !important;
+          }
+        } @else {
+          $combined-direction: "";
+          @if $direction == top or $direction == bottom {
+            $combined-direction: vertical;
+          } @else if $direction == right or $direction == left {
+            $combined-direction: horizontal;
+          }
+          @if $combined-direction {
+            .tna-\!--#{$property}-#{$direction}-#{$size},
+            .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          } @else {
+            .tna-\!--#{$property}-#{$direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include media.on-mobile {
+    @each $property in margin, padding {
+      @each $direction in top, bottom {
+        @each $size, $amount in spacing.$spacing-mobile {
+          @if $direction == all {
+            .tna-\!--#{$property}-#{$size} {
+              #{$property}: #{$amount} !important;
+            }
+          } @else {
+            $combined-direction: "";
+            @if $direction == top or $direction == bottom {
+              $combined-direction: vertical;
+            } @else if $direction == right or $direction == left {
+              $combined-direction: horizontal;
+            }
+            @if $combined-direction {
+              .tna-\!--#{$property}-#{$direction}-#{$size},
+              .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            } @else {
+              .tna-\!--#{$property}-#{$direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/nationalarchives/tools/_typography.scss

@@ -12,30 +12,37 @@
 }
 
 @mixin main-font-weight {
-  font-weight: typography.$font-weight-main;
+  font-weight: typography.$main-font-weight;
 }
 
 @mixin main-font-weight-bold {
-  font-weight: typography.$font-weight-main-bold;
+  font-weight: typography.$main-font-weight-bold;
 }
 
 @mixin main-font {
-  font-family: typography.$font-family-main;
+  font-family: typography.$main-font-family;
   @include main-font-weight;
 }
 
 @mixin heading-font {
-  font-family: typography.$font-family-heading;
-  font-weight: typography.$font-weight-heading;
+  font-family: typography.$heading-font-family;
+  font-weight: typography.$heading-font-weight;
+}
+
+@mixin detail-font-weight {
+  font-weight: typography.$detail-font-weight;
+}
+
+@mixin detail-font-weight-bold {
+  font-weight: typography.$detail-font-weight-bold;
 }
 
 @mixin detail-font {
-  font-family: typography.$font-family-detail;
-  font-weight: typography.$font-weight-detail;
+  font-family: typography.$detail-font-family;
+  @include detail-font-weight;
 }
 
 @mixin detail-font-small {
-  @include colour.colour-font("font-dark");
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;

package/nationalarchives/utilities/_a11y.scss

@@ -1,6 +1,7 @@
 @use "../tools/colour";
 
-.tna-visually-hidden {
+.tna-visually-hidden,
+.tna-\!--visually-hidden {
   width: 1px !important;
   height: 1px !important;
   margin: 0 !important;