@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

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

@@ -5,62 +5,42 @@ import * as OverrideStories from './overrides.stories';
 
 # 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`
+## Properties
+
+Property options: `margin`, `padding`
+
+```css
+tna-!--no-[property]-[direction]
+```
+
+### No margin/padding
+
+Direction options:
+
+- `top`
+- `bottom`
+- `vertical` - `top` and `bottom`
+
+```css
+tna-!--no-[property]-[direction]
+```
+
+### Sizes
+
+Size options: `xs`, `s`, `m`, `l`, `xl`, `xxl`
+
+```css
+tna-!--[property]-[direction]-[size]
+```
+
+### Responsive
+
+Device options: `medium`, `small`, `tiny`
+
+```css
+tna-!--no-[property]-[direction]-[device]
+tna-!--[property]-[direction]-[size]-[device]
+```
+
 
 

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

@@ -1,14 +1,7 @@
 const argTypes = {
   marginTop: {
     control: "radio",
-    options: [
-      "none",
-      // "xs",
-      "s",
-      "m",
-      "l",
-      "xl",
-    ],
+    options: ["none", "xs", "s", "m", "l", "xl"],
   },
 };
 
@@ -22,12 +15,13 @@ const Template = ({ marginTop }) => {
     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>`;
+  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>`;
 };
 
 export const Margin = Template.bind({});

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

@@ -22,7 +22,7 @@ const Template = ({
     ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
   <h${level} class="tna-hgroup__title">
     <span class="tna-hgroup__supertitle">${supertitle}</span>
-    ${title}
+    <span class="tna-hgroup__title">${title}</span>
   </h${level}>
 </hgroup>`
     : `<hgroup class="tna-hgroup tna-hgroup--${size}">

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

@@ -13,6 +13,7 @@ We use a set of typefaces...
 ## Headings
 
 <Canvas of={HeadingStories.Headings} />
+<Canvas of={TypographyStories.HeadingLink} />
 
 ## Heading groups
 
@@ -30,6 +31,7 @@ In the second example, the heading will be read as two separate sentences; `Reco
 
 <Canvas of={TypographyStories.Paragraph} />
 <Canvas of={TypographyStories.Blockquote} />
+<Canvas of={TypographyStories.SceneSetter} />
 <Canvas of={ListStories.UnorderedList} />
 <Canvas of={ListStories.UnorderedListPlain} />
 <Canvas of={ListStories.OrderedList} />

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

@@ -18,6 +18,25 @@ Paragraph.args = {
   ],
 };
 
+const HeadingLinkTemplate = ({ text, href }) =>
+  `<h2 class="tna-heading">
+    <a href="${href}">${text}</a>
+  </h2>`;
+export const HeadingLink = HeadingLinkTemplate.bind({});
+HeadingLink.args = {
+  text: "Reaerching with The National Archives",
+  href: "#",
+};
+
+const SceneSetterTemplate = ({ text, href }) =>
+  `<p class="tna-scene-setter">
+    ${text}
+  </p>`;
+export const SceneSetter = SceneSetterTemplate.bind({});
+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 BlockquoteTemplate = ({
   html,
   author,
@@ -26,7 +45,7 @@ const BlockquoteTemplate = ({
     ${html}
   </div>
   <p class="tna-blockquote__author">${author}</p>
-</p>`;
+</blockquote>`;
 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>",

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,5 +1,5 @@
 {# 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 -%#}
+{% from "./components/skip-link/macro.njk" import tnaSkipLink -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>
@@ -23,15 +23,17 @@
     {% block stylesheets %}{% endblock %}
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    {% block skipLink %}
-    {#{ govukSkipLink({
-      href: '#main-content',
-      text: 'Skip to main content'
-    }) }#}
+    {% block bodyStart %}
+      {% block cookies %}{% endblock %}
+      
+      {% block skipLink %}
+      {{ tnaSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }}
+      {% endblock %}
     {% endblock %}
 
-    {% block bodyStart %}{% endblock %}
-
     {% block header %}{% endblock %}
 
     {% block main %}

package/nationalarchives/tools/_colour.scss

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../features";
 @use "../variables/colour";
+@use "../tools/media";
+
+@function brand-colour($colour) {
+  @return map.get(colour.$colour-palette-brand, $colour);
+}
 
 @mixin colour-css-vars() {
   @each $name, $value in colour.$colour-palette-default {
@@ -26,46 +31,132 @@
   }
 }
 
-@mixin colour-font($colour) {
-  color: map.get(colour.$colour-palette-default, $colour);
-  @if $colour == "accent" {
-    color: var(--#{$colour}, var(--accent-default));
+@mixin accent-css-vars($colour) {
+  @if $colour == "yellow" {
+    --accent: #{brand-colour("yellow")} !important;
+    --accent-background: #{brand-colour("yellow")} !important;
+    --accent-background-light: #{brand-colour("cream")} !important;
+    --accent-font-base: #{brand-colour("black")} !important;
+    --accent-font-dark: #{brand-colour("black")} !important;
+    --accent-font-light: #{rgba(brand-colour("black"), 0.7)} !important;
+    --accent-link: #{brand-colour("black")} !important;
+    --accent-link-visited: #{brand-colour("black")} !important;
+    --accent-keyline: #{rgba(brand-colour("black"), 0.5)} !important;
+    --accent-keyline-dark: #{rgba(brand-colour("black"), 0.8)} !important;
+    --button-accent-background: #{brand-colour("yellow")} !important;
   } @else {
-    color: var(--#{$colour});
+    --accent-font-base: #{brand-colour("white")} !important;
+    --accent-font-dark: #{brand-colour("white")} !important;
+    --accent-font-light: #{rgba(brand-colour("white"), 0.7)} !important;
+    --accent-link: #{brand-colour("white")} !important;
+    --accent-link-visited: #{brand-colour("white")} !important;
+    --accent-keyline: #{rgba(brand-colour("white"), 0.5)} !important;
+    --accent-keyline-dark: #{rgba(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 {
+      --button-accent-text: #{brand-colour("white")} !important;
+      @if $colour == "pink" {
+        --accent: #{brand-colour("pink")} !important;
+        --accent-background: #{brand-colour("maroon")} !important;
+        --accent-background-light: #{brand-colour("pastel-pink")} !important;
+        --button-accent-background: #{brand-colour("maroon")} !important;
+      } @else if $colour == "orange" {
+        --accent: #{brand-colour("orange")} !important;
+        --accent-background: #{brand-colour("chestnut")} !important;
+        --accent-background-light: #{brand-colour("pastel-orange")} !important;
+        --button-accent-background: #{brand-colour("chestnut")} !important;
+      } @else if $colour == "green" {
+        --accent: #{brand-colour("green")} !important;
+        --accent-background: #{brand-colour("forest")} !important;
+        --accent-background-light: #{brand-colour("pastel-green")} !important;
+        --button-accent-background: #{brand-colour("forest")} !important;
+      } @else if $colour == "blue" {
+        --accent: #{brand-colour("blue")} !important;
+        --accent-background: #{brand-colour("navy")} !important;
+        --accent-background-light: #{brand-colour("pastel-blue")} !important;
+        --button-accent-background: #{brand-colour("navy")} !important;
+      }
+    }
   }
 }
 
-@mixin colour-background($colour) {
+@mixin colour-font($colour, $important: false) {
+  color: map.get(colour.$colour-palette-default, $colour);
+  color: var(--#{$colour}) if($important, !important, null);
+}
+
+@mixin colour-background($colour, $important: false) {
   background-color: map.get(colour.$colour-palette-default, $colour);
-  @if $colour == "accent" {
-    background-color: var(--#{$colour}, var(--accent-default));
-  } @else {
-    background-color: var(--#{$colour});
-  }
+  background-color: var(--#{$colour}) if($important, !important, null);
 }
 
-@mixin colour-border($colour) {
-  border-color: map.get(colour.$colour-palette-default, $colour);
-  border-color: var(--#{$colour});
+@mixin colour-border(
+  $colour,
+  $width: "",
+  $style: solid,
+  $direction: "",
+  $important: false
+) {
+  @if $direction != "" {
+    @if $width != "" {
+      $property: border-#{$direction};
+      border-#{$direction}: $width
+        map.get(colour.$colour-palette-default, $colour)
+        $style
+        if($important, !important, null);
+      border-#{$direction}: $width
+        var(--#{$colour})
+        $style
+        if($important, !important, null);
+    } @else {
+      border-#{$direction}-color: map.get(
+          colour.$colour-palette-default,
+          $colour
+        )
+        if($important, !important, null);
+      border-#{$direction}-color: var(--#{$colour})
+        if($important, !important, null);
+    }
+  } @else {
+    @if $width != "" {
+      border: $width
+        map.get(colour.$colour-palette-default, $colour)
+        $style
+        if($important, !important, null);
+      border: $width var(--#{$colour}) $style if($important, !important, null);
+    } @else {
+      border-color: map.get(colour.$colour-palette-default, $colour)
+        if($important, !important, null);
+      border-color: var(--#{$colour}) if($important, !important, null);
+    }
+  }
 }
 
-@mixin colour-outline($colour) {
-  outline-color: map.get(colour.$colour-palette-default, $colour);
-  outline-color: var(--#{$colour});
+@mixin colour-outline($colour, $important: false) {
+  outline-color: map.get(colour.$colour-palette-default, $colour)
+    if($important, !important, null);
+  outline-color: var(--#{$colour}) if($important, !important, null);
 }
 
-@mixin colour-fill($colour) {
-  fill: map.get(colour.$colour-palette-default, $colour);
-  fill: var(--#{$colour});
+@mixin colour-fill($colour, $important: false) {
+  fill: map.get(colour.$colour-palette-default, $colour)
+    if($important, !important, null);
+  fill: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin fixed {
   @include colour-css-vars;
 
-  @include colour-font("font-base");
+  // @include colour-font("font-base");
 }
 
-@mixin invert {
+%invert {
   --font-base: var(--contrast-font-base);
   --font-dark: var(--contrast-font-dark);
   --font-light: var(--contrast-font-light);
@@ -74,44 +165,67 @@
   --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;
+  @include colour-font("font-base");
+}
 
-  .tna-template--system-theme & {
-    @include colour-css-vars;
+@mixin invert {
+  @extend %invert;
+}
 
-    @media (prefers-color-scheme: dark) {
-      @include colour-css-vars-dark;
-    }
+%invert-on-mobile {
+  @include media.on-mobile {
+    --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);
 
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast;
-    }
+    @include colour-background("contrast-background");
 
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast-dark;
-    }
+    @include colour-font("font-base");
   }
+}
 
-  .tna-template--light-theme & {
-    @include colour-css-vars;
-  }
+@mixin invert-on-mobile {
+  @extend %invert-on-mobile;
+}
 
-  .tna-template--dark-theme & {
-    @include colour-css-vars-dark;
-  }
+%accent {
+  --font-base: var(--accent-font-base, var(--accent-font-base));
+  --font-dark: var(--accent-font-dark, var(--accent-font-dark));
+  --font-light: var(--accent-font-light, var(--accent-font-light));
+  --link: var(--accent-link, var(--accent-link));
+  --link-visited: var(--accent-link-visited, var(--accent-link-visited));
+  --keyline: var(--accent-keyline, var(--accent-keyline));
+  --keyline-dark: var(--accent-keyline-dark, var(--accent-keyline-dark));
 
-  .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast;
-  }
+  @include colour-background("accent-background");
 
-  .tna-template--high-contrast-theme.tna-template--dark-theme & {
-    @include colour-css-vars-high-contrast-dark;
-  }
+  @include colour-font("font-base");
+}
+
+@mixin accent {
+  @extend %accent;
+}
+
+%accent-background {
+  @include colour-background("accent-background");
+}
+
+@mixin accent-background {
+  @extend %accent-background;
+}
+
+%light-accent-background {
+  @include colour-background("accent-background-light");
+}
+
+@mixin light-accent-background {
+  @extend %light-accent-background;
 }
 
 @mixin on-high-contrast {

package/nationalarchives/tools/_index.scss

@@ -1,4 +1,3 @@
-@forward "assets";
 @forward "colour";
 @forward "grid";
 @forward "media";

package/nationalarchives/tools/_typography.scss

@@ -5,6 +5,11 @@
   font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
 }
 
+@mixin interacted-text-decoration {
+  text-decoration: underline;
+  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
+}
+
 @mixin main-font-weight {
   font-weight: typography.$font-weight-main;
 }
@@ -26,6 +31,14 @@
 @mixin detail-font {
   font-family: typography.$font-family-detail;
   font-weight: typography.$font-weight-detail;
+}
+
+@mixin detail-font-weight-bold {
+  font-weight: typography.$font-weight-detail-bold;
+}
+
+@mixin detail-font-small {
+  @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;
   line-height: #{math.div(typography.$base-font-size-px, 14)};

package/nationalarchives/utilities/_debug.scss

@@ -1,11 +1,51 @@
 @use "../features";
 
+/*
+ * ==========================================
+ * WCAG 2.2 SC 2.5.8
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
+ * ------------------------------------------
+ * AA - Small green circles should not intersect
+ * ------------------------------------------
+ */
 @if features.$debug-interactable-areas {
   a,
   button,
   label[for] {
     background-color: rgba(#f0a, 0.25) !important;
 
-    box-shadow: 0 0 0 1px #f0a !important;
+    box-shadow:
+      0 0 0 2px #f0a,
+      0 0 0.5rem #f0a !important;
+
+    position: relative;
+
+    &::before {
+      width: 20px;
+      height: 20px;
+
+      display: block;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      background-color: rgba(#0f3, 0.25) !important;
+
+      border-radius: 100%;
+      outline: 2px #0f3 solid;
+      outline-offset: 10px;
+
+      box-shadow:
+        0 0 0 2px #0f3,
+        0 0 0.5rem #0f3 !important;
+
+      transform: translateX(-50%) translateY(-50%);
+
+      content: "";
+    }
+
+    .tna-template--dark-theme & {
+    }
   }
 }

package/nationalarchives/utilities/_font-awesome.scss

@@ -0,0 +1,5 @@
+@import "../variables/assets";
+$fa-font-path: $tna-font-path !default;
+@import "../lib/font-awesome/fontawesome";
+@import "../lib/font-awesome/solid";
+@import "../lib/font-awesome/brands";