Merged in feat/section-header-link (pull request #314)

Feat(WEB-359): Update section link for mobile

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Arvid Norlin

components/Section/Header/header.module.css

@@ -10,23 +10,6 @@
   grid-column: 1 / -1;
 }
 
-.linkWrapper {
-  display: flex;
-  align-items: baseline;
-  gap: var(--Spacing-x-half);
-  grid-column: 1 / -1;
-  justify-self: start;
-}
-
-.link {
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  align-self: center;
-}
-
 @media screen and (min-width: 768px) {
   .header {
     grid-template-columns: 1fr auto;
@@ -39,13 +22,4 @@
   .subtitle {
     grid-column: 1 / 2;
   }
-
-  .linkWrapper {
-    grid-column: 2 / 3;
-    justify-self: end;
-  }
-
-  .link {
-    align-items: baseline;
-  }
 }

components/Section/Header/index.tsx

@@ -1,8 +1,8 @@
-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"
 
+import SectionLink from "../Link"
+
 import styles from "./header.module.css"
 
 import type { HeaderProps } from "@/types/components/myPages/header"
@@ -23,19 +23,7 @@ export default function SectionHeader({
         {title}
       </Title>
       {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
-      {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}
+      <SectionLink link={link} variant="desktop" />
     </header>
   )
 }