@nationalarchives/frontend 0.1.39 → 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",
@@ -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/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/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

@@ -47,6 +47,7 @@
 .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;
@@ -171,8 +172,7 @@ small {
     @extend %chip-accent;
   }
 
-  .fa-solid,
-  .fa-brand {
+  .fa-solid {
     @include colour.colour-font("icon-light");
 
     @include colour.on-high-contrast {
@@ -191,8 +191,7 @@ small {
       @include typography.interacted-text-decoration;
     }
 
-    .fa-solid,
-    .fa-brand {
+    .fa-solid {
       color: inherit;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",