@nationalarchives/frontend 0.1.16-prerelease → 0.1.18-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/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 "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>

package/nationalarchives/tools/_colour.scss

@@ -31,24 +31,69 @@
   }
 }
 
-@mixin colour-font($colour, $important: false) {
-  color: map.get(colour.$colour-palette-default, $colour);
-  @if $colour == "accent" {
-    color: var(--#{$colour}, var(--accent-default))
-      if($important, !important, null);
+@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}) if($important, !important, null);
+    --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-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))
-      if($important, !important, null);
-  } @else {
-    background-color: var(--#{$colour}) if($important, !important, null);
-  }
+  background-color: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin colour-border(
@@ -120,8 +165,9 @@
   --keyline: var(--contrast-keyline);
   --keyline-dark: var(--contrast-keyline-dark);
 
-  // @include colour-font("contrast-font-base");
   @include colour-background("contrast-background");
+
+  @include colour-font("font-base");
 }
 
 @mixin invert {
@@ -138,8 +184,9 @@
     --keyline: var(--contrast-keyline);
     --keyline-dark: var(--contrast-keyline-dark);
 
-    // @include colour-font("contrast-font-base");
     @include colour-background("contrast-background");
+
+    @include colour-font("font-base");
   }
 }
 
@@ -147,40 +194,38 @@
   @extend %invert-on-mobile;
 }
 
-@mixin uninvert {
-  @include colour-css-vars;
-
-  .tna-template--system-theme & {
-    @include colour-css-vars;
+%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));
 
-    @media (prefers-color-scheme: dark) {
-      @include colour-css-vars-dark;
-    }
+  @include colour-background("accent-background");
 
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast;
-    }
+  @include colour-font("font-base");
+}
 
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast-dark;
-    }
-  }
+@mixin accent {
+  @extend %accent;
+}
 
-  .tna-template--light-theme & {
-    @include colour-css-vars;
-  }
+%accent-background {
+  @include colour-background("accent-background");
+}
 
-  .tna-template--dark-theme & {
-    @include colour-css-vars-dark;
-  }
+@mixin accent-background {
+  @extend %accent-background;
+}
 
-  .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast;
-  }
+%light-accent-background {
+  @include colour-background("accent-background-light");
+}
 
-  .tna-template--high-contrast-theme.tna-template--dark-theme & {
-    @include colour-css-vars-high-contrast-dark;
-  }
+@mixin light-accent-background {
+  @extend %light-accent-background;
 }
 
 @mixin on-high-contrast {

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/_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";

package/nationalarchives/utilities/_global.scss

@@ -1,5 +1,6 @@
 @use "../features";
 @use "../tools/colour";
+@use "../tools/media";
 @use "../variables/typography";
 
 :root {
@@ -19,29 +20,7 @@
 
   @include colour.colour-background("page-background");
 
-  // &--black-accent {
-  //   accent-color: colour.$_tna-black;
-  // }
-
-  // &--yellow-accent {
-  //   accent-color: colour.$_tna-yellow;
-  // }
-
-  // &--pink-accent {
-  //   accent-color: colour.$_tna-pink;
-  // }
-
-  // &--orange-accent {
-  //   accent-color: colour.$_tna-orange;
-  // }
-
-  // &--green-accent {
-  //   accent-color: colour.$_tna-green;
-  // }
-
-  // &--blue-accent {
-  //   accent-color: colour.$_tna-blue;
-  // }
+  accent-color: var(--accent);
 
   &--system-theme {
     @include colour.colour-css-vars;
@@ -83,6 +62,32 @@
     }
   }
 
+  @include colour.accent-css-vars("black"); // TODO: Temp
+
+  // &--black-accent {
+  //   @include colour.accent-css-vars("black");
+  // }
+
+  &--yellow-accent {
+    @include colour.accent-css-vars("yellow");
+  }
+
+  &--pink-accent {
+    @include colour.accent-css-vars("pink");
+  }
+
+  &--orange-accent {
+    @include colour.accent-css-vars("orange");
+  }
+
+  &--green-accent {
+    @include colour.accent-css-vars("green");
+  }
+
+  &--blue-accent {
+    @include colour.accent-css-vars("blue");
+  }
+
   @media (prefers-reduced-motion) {
     * {
       animation: none !important;
@@ -134,17 +139,56 @@ canvas {
 }
 
 hr {
-  margin: 3rem 0;
+  margin: 2rem 0;
 
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
-  border-style: dashed;
+  border-style: solid;
+
+  // @include colour.on-high-contrast {
+  //   border-style: solid;
+  // }
+}
+
+.tna-section {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  @include media.on-mobile {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.tna-aside {
+  margin-bottom: 2rem;
+  padding: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media.on-mobile {
+    padding: 1rem;
+  }
 
   @include colour.on-high-contrast {
-    border-style: solid;
+    @include colour.colour-border("keyline-dark", 1px);
   }
 }
 
+.tna-background--contrast {
+  @include colour.invert;
+}
+
+.tna-background--accent {
+  @include colour.accent;
+}
+
+.tna-background--accent-light {
+  @include colour.light-accent-background;
+}
+
 .tna-visually-hidden {
   width: 1px !important;
   height: 1px !important;

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @forward "debug";
+@forward "font-awesome";
 @forward "global";
 @forward "overrides";
 @forward "typography";

package/nationalarchives/utilities/_overrides.scss

@@ -1,21 +1,45 @@
 @use "../variables/spacing";
 @use "../tools/media";
 
-@each $property in margin, padding {
-  @each $direction in top, bottom {
-    .tna-\!--no-#{$property}-#{$direction},
-    .tna-\!--no-#{$property}-vertical {
-      #{$property}-#{$direction}: 0 !important;
+@mixin no-spacing-generator($suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      .tna-\!--no-#{$property}-#{$direction}#{$suffix},
+      .tna-\!--no-#{$property}-vertical#{$suffix} {
+        #{$property}-#{$direction}: 0 !important;
+      }
     }
   }
 }
 
-@mixin overrides($spacing) {
+@include no-spacing-generator;
+
+@include media.on-medium {
+  @include no-spacing-generator("medium");
+}
+
+@include media.on-small {
+  @include no-spacing-generator("small");
+}
+
+@include media.on-tiny {
+  @include no-spacing-generator("tiny");
+}
+
+@mixin overrides($spacing, $suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+
   @each $property in margin, padding {
     @each $direction in top, bottom {
       @each $size, $amount in $spacing {
-        .tna-\!--#{$property}-#{$direction}-#{$size},
-        .tna-\!--#{$property}-vertical-#{$size} {
+        .tna-\!--#{$property}-#{$direction}-#{$size}#{$suffix},
+        .tna-\!--#{$property}-vertical-#{$size}#{$suffix} {
           #{$property}-#{$direction}: #{$amount}rem !important;
         }
       }
@@ -25,6 +49,14 @@
 
 @include overrides(spacing.$spacing);
 
-@include media.on-mobile {
-  @include overrides(spacing.$spacing-mobile);
+@include media.on-medium {
+  @include overrides(spacing.$spacing, "medium");
+}
+
+@include media.on-small {
+  @include overrides(spacing.$spacing-mobile, "small");
+}
+
+@include media.on-tiny {
+  @include overrides(spacing.$spacing-mobile, "tiny");
 }