From 85ccbbfcef4f77f9b2ab874938d09380a0ff9347 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Wed, 17 Jul 2024 16:00:16 +0100
Subject: [PATCH] Update the heading link arrow style (#147)

---
 CHANGELOG.md                                  |  1 +
 .../utilities/typography/_index.scss          | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f9e7e42..3ec48f23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Tables are no longer automatically 100% width but can be made to be with `.tna-table--full`
 - `<ul>` elements with the class `.tna-container` have their `list-style` removed
 - The default `htmlElement` option for the card component is now `<article>`
+- Updated the heading link arrow style
 
 ### Deprecated
 ### Removed
diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/nationalarchives/utilities/typography/_index.scss
index 6b5f08c6..1ead4e07 100644
--- a/src/nationalarchives/utilities/typography/_index.scss
+++ b/src/nationalarchives/utilities/typography/_index.scss
@@ -193,19 +193,20 @@ small {
     vertical-align: top;
 
     &::after {
-      content: "\203A";
+      content: "";
 
-      padding-left: spacing.space(0.5);
+      width: 0.3125em;
+      height: 0.3125em;
+      margin-left: 0.375em;
 
       display: inline-block;
 
-      font-weight: 700;
-    }
+      vertical-align: middle;
 
-    &:hover {
-      &::after {
-        padding-left: spacing.space(0.75);
-      }
+      @include colour.colour-border("link", 0.125em, solid, top);
+      @include colour.colour-border("link", 0.125em, solid, right);
+
+      transform: rotate(45deg);
     }
   }
 
@@ -238,6 +239,17 @@ small {
     typographyVars.$heading-l-font-size-tiny,
     typographyVars.$heading-l-line-height
   );
+
+  a {
+    &::after {
+      width: 0.275em;
+      height: 0.275em;
+      margin-left: 0.25em;
+
+      border-top-width: 0.1em;
+      border-right-width: 0.1em;
+    }
+  }
 }
 
 %heading-m {