From 95cfe822561e15eaa4cbae3643418554d56855ea Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 14:12:39 +0200
Subject: [PATCH 1/2] feat: update link titles to include arrows + ui updates

---
 components/Section/Header/header.module.css | 29 ++++++++++++++-------
 components/Section/Header/index.tsx         | 17 +++++++++---
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css
index f96cc08d2..93a893e31 100644
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -2,19 +2,30 @@
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: 1fr auto;
+  align-items: baseline;
 }
 
 .title {
-  grid-column: 1/2;
-  grid-row: 1/2;
-}
-
-.link {
-  grid-column: 2/-1;
-  grid-row: 1/2;
+  grid-column: 1 / 2;
 }
 
 .subtitle {
-  grid-column: 1/-1;
-  grid-row: 2;
+  grid-column: 1 / 2;
+}
+
+.linkWrapper {
+  display: flex;
+  align-items: baseline;
+  grid-column: 2 / 3;
+  gap: var(--Spacing-x-half);
+  justify-self: end;
+}
+
+.link {
+  display: flex;
+  align-items: baseline;
+}
+
+.icon {
+  align-self: center;
 }
diff --git a/components/Section/Header/index.tsx b/components/Section/Header/index.tsx
index c4354bd5e..0537b526a 100644
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -1,3 +1,4 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,12 +22,20 @@ export default function SectionHeader({
       >
         {title}
       </Title>
+      {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
       {link ? (
-        <Link className={styles.link} href={link.href} variant="myPage">
-          {link.text}
-        </Link>
+        <span className={styles.linkWrapper}>
+          <ArrowRight color="burgundy" className={styles.icon} />
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={link.href}
+            variant="myPage"
+          >
+            {link.text}
+          </Link>
+        </span>
       ) : null}
-      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
     </header>
   )
 }

From f009611028b101c6c2755dfd34ba51f323c691c9 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 15:29:36 +0200
Subject: [PATCH 2/2] feat: collapse arrow link to its own column on mobile

---
 components/Section/Header/header.module.css | 38 ++++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css
index 93a893e31..e5d762621 100644
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -1,31 +1,51 @@
 .header {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr;
   align-items: baseline;
 }
 
-.title {
-  grid-column: 1 / 2;
-}
-
+.title,
 .subtitle {
-  grid-column: 1 / 2;
+  grid-column: 1 / -1;
 }
 
 .linkWrapper {
   display: flex;
   align-items: baseline;
-  grid-column: 2 / 3;
   gap: var(--Spacing-x-half);
-  justify-self: end;
+  grid-column: 1 / -1;
+  justify-self: start;
 }
 
 .link {
   display: flex;
-  align-items: baseline;
+  align-items: center;
 }
 
 .icon {
   align-self: center;
 }
+
+@media screen and (min-width: 768px) {
+  .header {
+    grid-template-columns: 1fr auto;
+  }
+
+  .title {
+    grid-column: 1 / 2;
+  }
+
+  .subtitle {
+    grid-column: 1 / 2;
+  }
+
+  .linkWrapper {
+    grid-column: 2 / 3;
+    justify-self: end;
+  }
+
+  .link {
+    align-items: baseline;
+  }
+}