@nationalarchives/frontend 0.1.38 → 0.1.40

package/nationalarchives/stories/intro.mdx

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Introduction" />
+
+# Welcome
+
+TNA Frontend contains the code you need to start building user interfaces for National Archives platforms and services.
+
+This Storybook instance represents the current working branch (`main`) of [TNA Frontend](https://github.com/nationalarchives/tna-frontend). This may contain unreleased styles and code.
+
+To get the latest release, see the [GitHub releases page](https://github.com/nationalarchives/tna-frontend/releases).

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

@@ -155,7 +155,7 @@ const Template = ({ theme, accent }) => {
             href: "#/learn",
           },
           {
-            text: "Professional guidance & services",
+            text: "Professional guidance and services",
             href: "#/professional-guidance-and-services",
           },
         ],
@@ -241,21 +241,6 @@ const Template = ({ theme, accent }) => {
                 icon: "map-location-dot",
               },
             })}
-            ${Button({
-              params: {
-                text: "Tweet us",
-                href: "#",
-                brandIcon: "twitter",
-              },
-            })}
-            ${Button({
-              params: {
-                text: "Tweet us",
-                href: "#",
-                accent: true,
-                brandIcon: "twitter",
-              },
-            })}
             ${Button({
               params: {
                 text: "Plain button",
@@ -343,7 +328,7 @@ const Template = ({ theme, accent }) => {
             <div class="tna-blockquote__quote">
               <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
             </div>
-            <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
+            <p class="tna-blockquote__citation">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
             <a href="#">Researching with The National Archives</a>
@@ -1209,120 +1194,108 @@ const Template = ({ theme, accent }) => {
     </main>
     ${Footer({
       params: {
-        meta: "<p>Open today<br />09:00&mdash;19:00</p>",
+        meta: "<p>Open today<br>09:00&mdash;19:00</p>",
         social: [
           {
-            text: "Twitter",
-            href: "#",
-            brandIcon: "twitter",
+            href: "https://twitter.com/UKNatArchives",
+            icon: "twitter",
+            title: "Visit us on Twitter",
           },
           {
-            text: "YouTube",
-            href: "#",
-            brandIcon: "youtube",
+            href: "https://www.youtube.com/c/TheNationalArchivesUK",
+            icon: "youtube",
+            title: "Watch us on YouTube",
           },
           {
-            text: "Facebook",
-            href: "#",
-            brandIcon: "facebook",
+            href: "https://www.facebook.com/TheNationalArchives",
+            icon: "facebook",
+            title: "See us on Facebook",
           },
           {
-            text: "Flickr",
-            href: "#",
-            brandIcon: "flickr",
+            href: "https://www.flickr.com/photos/nationalarchives",
+            icon: "flickr",
+            title: "See our Flickr feed",
           },
           {
-            text: "Instagram",
-            href: "#",
-            brandIcon: "instagram",
+            href: "https://www.instagram.com/nationalarchivesuk/",
+            icon: "instagram",
+            title: "See us on Instagram",
           },
           {
-            text: "RSS",
-            href: "#",
+            href: "https://www.nationalarchives.gov.uk/rss/",
             icon: "rss",
+            title: "Read our RSS feed",
           },
         ],
         navigation: [
           {
-            title: "About us",
+            title: "Quick links",
             items: [
               {
-                text: "Our role",
-                href: "#",
+                text: "About us",
+                href: "https://www.nationalarchives.gov.uk/about/)",
               },
               {
-                text: "Our history",
-                href: "#",
+                text: "Contact us",
+                href: "https://www.nationalarchives.gov.uk/contact-us/)",
               },
               {
-                text: "Our collection",
-                href: "#",
+                text: "News",
+                href: "https://www.nationalarchives.gov.uk/about/news/)",
               },
               {
-                text: "Our people",
-                href: "#",
+                text: "Blog",
+                href: "https://blog.nationalarchives.gov.uk/)",
               },
               {
-                text: "How we are run",
-                href: "#",
+                text: "Podcasts and videos",
+                href: "https://media.nationalarchives.gov.uk/)",
               },
               {
-                text: "Our research amd academic collaboration",
-                href: "#",
+                text: "Image library",
+                href: "https://images.nationalarchives.gov.uk/)",
               },
               {
-                text: "News",
-                href: "#",
+                text: "Press room",
+                href: "https://www.nationalarchives.gov.uk/about/press-room/)",
               },
               {
-                text: "Contact us",
-                href: "#",
+                text: "Jobs and careers",
+                href: "https://www.nationalarchives.gov.uk/about/jobs/)",
               },
               {
-                text: "Jobs & careers",
-                href: "#",
+                text: "British citizenship services",
+                href: "https://www.nationalarchives.gov.uk/contact-us/british-citizenship-services/)",
               },
               {
-                text: "Get involved",
-                href: "#",
+                text: "Historical Manuscripts Commission",
+                href: "https://www.nationalarchives.gov.uk/archives-sector/our-archives-sector-role/historical-manuscripts-commission/)",
               },
             ],
           },
           {
-            title: "Our websites",
+            title: "Our other websites",
             items: [
               {
                 text: "UK Government Web Archive",
-                href: "#",
-                newTab: true,
+                href: "https://www.nationalarchives.gov.uk/webarchive/",
               },
               {
                 text: "Legislation.gov.uk",
-                href: "#",
-                newTab: true,
+                href: "https://www.legislation.gov.uk/",
               },
               {
                 text: "Find case law",
-                href: "#",
-                newTab: true,
+                href: "https://caselaw.nationalarchives.gov.uk/",
               },
               {
                 text: "The Gazette",
-                href: "#",
+                href: "https://www.thegazette.co.uk/",
                 newTab: true,
               },
-            ],
-          },
-          {
-            title: "Quick links",
-            items: [
               {
-                text: "Press room",
-                href: "#",
-              },
-              {
-                text: "Venue hire",
-                href: "#",
+                text: "The National Archives Trust",
+                href: "https://www.nationalarchives.gov.uk/about/the-national-archives-trust/",
               },
             ],
           },
@@ -1331,23 +1304,23 @@ const Template = ({ theme, accent }) => {
         legal: [
           {
             text: "Accessibility statement",
-            href: "#",
+            href: "#/accessibility",
           },
           {
             text: "Freedom of information",
-            href: "#",
+            href: "#/freedom-of-information",
           },
           {
             text: "Terms and conditions",
-            href: "#",
+            href: "#/terms-and-conditions",
           },
           {
             text: "Privacy policy",
-            href: "#",
+            href: "#/privacy",
           },
           {
             text: "Cookies",
-            href: "#",
+            href: "#/cookies",
           },
         ],
       },

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

@@ -64,7 +64,7 @@ const BlockquoteTemplate = ({
   <div class="tna-blockquote__quote">
     ${html}
   </div>
-  <p class="tna-blockquote__author">${author}</p>
+  <p class="tna-blockquote__citation">${author}</p>
 </blockquote>`;
 export const Blockquote = BlockquoteTemplate.bind({});
 Blockquote.args = {

package/nationalarchives/tools/_a11y.scss

@@ -0,0 +1,6 @@
+@use "colour";
+
+@mixin focus-outline {
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}

package/nationalarchives/tools/_index.scss

@@ -1,3 +1,4 @@
+@use "a11y";
 @use "colour";
 @use "grid";
 @use "media";

package/nationalarchives/tools/_typography.scss

@@ -6,11 +6,6 @@
   font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
 }
 
-@mixin interacted-text-decoration {
-  text-decoration: underline;
-  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
-}
-
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
@@ -19,9 +14,16 @@
   font-weight: typography.$main-font-weight-bold;
 }
 
-@mixin main-font {
+@mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
-  @include main-font-weight;
+  @if $bold {
+    @include main-font-weight-bold;
+  } @else {
+    @include main-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
 }
 
 @mixin heading-font {
@@ -29,17 +31,15 @@
   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 {
+@mixin detail-font($bold: false) {
   font-family: typography.$detail-font-family;
-  @include detail-font-weight;
+  @if $bold {
+    font-weight: typography.$detail-font-weight-bold;
+  } @else {
+    font-weight: typography.$detail-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
 }
 
 @mixin detail-font-small {
@@ -48,3 +48,8 @@
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
 }
+
+@mixin interacted-text-decoration {
+  text-decoration: underline;
+  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
+}

package/nationalarchives/utilities/_a11y.scss

@@ -1,4 +1,4 @@
-@use "../tools/colour";
+@use "../tools/a11y";
 
 .tna-visually-hidden,
 .tna-\!--visually-hidden {
@@ -26,15 +26,10 @@
   }
 }
 
-@mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
-}
-
 *:focus {
   z-index: 9;
 
-  @include focus-outline;
+  @include a11y.focus-outline;
 }
 
 .tna-\!--no-focus-style {

package/nationalarchives/utilities/_areas.scss

@@ -0,0 +1,31 @@
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+
+.tna-section {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  @include media.on-mobile {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.tna-aside {
+  padding: 2rem;
+
+  @include spacing.space-above;
+
+  @include media.on-mobile {
+    padding: 1rem;
+  }
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px);
+  }
+
+  &--tight {
+    padding: 1rem;
+  }
+}

package/nationalarchives/utilities/_global.scss

@@ -1,8 +1,3 @@
-@use "../tools/colour";
-@use "../tools/media";
-@use "../tools/spacing";
-@use "../variables/typography";
-
 .tna-template {
   min-width: 320px;
   width: 100%;
@@ -17,8 +12,6 @@
    * ------------------------------------------
    */
   -webkit-overflow-scrolling: touch;
-
-  font-size: #{typography.$relative-1rem-px}px;
 }
 
 .tna-template__body {
@@ -35,59 +28,3 @@
     }
   }
 }
-
-img,
-svg,
-picture,
-video,
-canvas {
-  max-width: 100%;
-  height: auto;
-
-  display: block;
-}
-
-video,
-canvas {
-  width: 100%;
-}
-
-[hidden] {
-  display: none;
-}
-
-hr {
-  margin: 0;
-
-  border-width: 1px 0 0;
-  @include colour.colour-border("keyline");
-  border-style: solid;
-}
-
-.tna-section {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-
-  @include media.on-mobile {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-}
-
-.tna-aside {
-  padding: 2rem;
-
-  @include spacing.space-above;
-
-  @include media.on-mobile {
-    padding: 1rem;
-  }
-
-  @include colour.on-high-contrast {
-    @include colour.colour-border("keyline-dark", 1px);
-  }
-
-  &--tight {
-    padding: 1rem;
-  }
-}

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @use "a11y";
+@use "areas";
 @use "colour";
 @use "columns";
 @use "debug";
@@ -6,5 +7,6 @@
 @use "global";
 @use "lists";
 @use "overrides";
+@use "reset";
 @use "tables";
 @use "typography";

package/nationalarchives/utilities/_reset.scss

@@ -0,0 +1,29 @@
+@use "../tools/colour";
+
+img,
+svg,
+picture,
+video,
+canvas {
+  max-width: 100%;
+  height: auto;
+
+  display: block;
+}
+
+video,
+canvas {
+  width: 100%;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+hr {
+  margin: 0;
+
+  border-width: 1px 0 0;
+  @include colour.colour-border("keyline");
+  border-style: solid;
+}

package/nationalarchives/utilities/_typography.scss

@@ -17,14 +17,6 @@
     // font-display: swap;
   }
 
-  // @font-face {
-  //   font-family: "Open Sans";
-  //   src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
-  //   font-weight: typographyVars.$main-font-weight;
-  //   font-style: italic;
-  //   // font-display: swap;
-  // }
-
   @font-face {
     font-family: "Open Sans";
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
@@ -49,12 +41,13 @@
     // font-display: swap;
   }
 } @else {
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
+  font-size: #{typographyVars.$relative-1rem-px}px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -179,8 +172,7 @@ small {
     @extend %chip-accent;
   }
 
-  .fa-solid,
-  .fa-brand {
+  .fa-solid {
     @include colour.colour-font("icon-light");
 
     @include colour.on-high-contrast {
@@ -199,8 +191,7 @@ small {
       @include typography.interacted-text-decoration;
     }
 
-    .fa-solid,
-    .fa-brand {
+    .fa-solid {
       color: inherit;
     }
   }
@@ -394,7 +385,7 @@ small {
     font-weight: 700;
   }
 
-  &__author {
+  &__citation {
     @include typography.relative-font-size(16);
 
     .tna-blockquote & {
@@ -403,6 +394,7 @@ small {
 
     &::before {
       content: "\2014" " ";
+      content: "\2014" " " / "";
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -28,8 +28,9 @@
   "main": "nationalarchives/all.js",
   "exports": {
     ".": {
-      "sass": "./nationalarchives/all.scss",
-      "require": "./nationalarchives/all.js"
+      "css": "./nationalarchives/all.css",
+      "require": "./nationalarchives/all.js",
+      "sass": "./nationalarchives/all.scss"
     },
     "./nationalarchives/": "./nationalarchives/"
   },