Initial concept of text detail elements

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.23-prerelease...HEAD)
 
 ### Added
+
+- Initial concept of text detail elements
+
 ### Changed
 ### Deprecated
 ### Removed

src/nationalarchives/components/card/card.scss

@@ -76,6 +76,7 @@
       display: flex;
       align-items: center;
 
+      @include colour.colour-font("font-dark");
       @include typography.detail-font-small;
 
       .fa-solid {

src/nationalarchives/components/footer/footer.scss

@@ -105,7 +105,6 @@
       }
 
       &-items {
-        margin-top: 0;
       }
 
       &-item {

src/nationalarchives/components/header/header.scss

@@ -245,6 +245,10 @@
     margin: 0;
     padding: 1.25rem 0;
 
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem 1.5rem;
+
     // order: 1;
 
     list-style: none;
@@ -253,13 +257,12 @@
   }
 
   &__top-navigation-item {
-    margin-left: 1.5rem;
-
-    display: inline-block;
+    display: block;
   }
 
   &__top-navigation-item-link {
-    display: inline-block;
+    display: flex;
+    align-items: center;
 
     text-decoration: none;
     @include typography.relative-font-size(16);
@@ -395,7 +398,7 @@
     &__top-navigation-items {
       padding: 0.5rem 1rem;
 
-      // text-align: center;
+      justify-content: flex-start;
 
       @include colour.colour-background("page-background");
 

src/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -28,7 +28,7 @@ HeadingLink.args = {
   href: "#",
 };
 
-const SceneSetterTemplate = ({ text, href }) =>
+const SceneSetterTemplate = ({ text }) =>
   `<p class="tna-scene-setter">
     ${text}
   </p>`;
@@ -37,6 +37,12 @@ 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 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,

src/nationalarchives/tools/_typography.scss

@@ -35,7 +35,6 @@
 }
 
 @mixin detail-font-small {
-  @include colour.colour-font("font-dark");
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;

src/nationalarchives/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:selector";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -100,6 +101,12 @@ a {
   &:active {
     @include typography.interacted-text-decoration;
   }
+
+  // &[target="_blank"]:not([title*="opens in a new"]) {
+  //   &::after {
+  //     content: "" / " (opens in a new window)"
+  //   }
+  // }
 }
 
 small {
@@ -108,6 +115,47 @@ small {
   );
 }
 
+.tna-detail[title][data-type] {
+  padding: 0 0.375rem;
+
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  gap: 0.5rem;
+
+  vertical-align: baseline;
+
+  background-color: #ccc;
+
+  &::after {
+    @include colour.colour-font("font-base");
+    @include typography.detail-font-small;
+    vertical-align: baseline;
+
+    content: attr(data-type) / "";
+  }
+
+  &[data-type="misc"] {
+    background-color: #f28482;
+  }
+
+  &[data-type="loc"] {
+    background-color: #edae49;
+  }
+
+  &[data-type="per"] {
+    background-color: #b5e2fa;
+  }
+
+  @at-root #{selector.unify("a", &)} {
+    @include colour.colour-font("font-base");
+
+    &::after {
+      text-decoration: none;
+    }
+  }
+}
+
 .tna-chip-list {
   @include spacing.space-above;
   margin-bottom: 0;
@@ -129,6 +177,7 @@ small {
 
   display: block;
 
+  @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;