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>
   )
 }

components/Section/Link/index.tsx

@@ -0,0 +1,27 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
+import Link from "@/components/TempDesignSystem/Link"
+
+import { SectionLinkProps } from "./link"
+import { linkVariants } from "./variants"
+
+import styles from "./link.module.css"
+
+export default function SectionLink({ link, variant }: SectionLinkProps) {
+  if (!link) {
+    return null
+  }
+  const classNames = linkVariants({
+    variant,
+  })
+  return (
+    <Link
+      className={classNames}
+      color="burgundy"
+      href={link.href}
+      variant="myPage"
+    >
+      <ArrowRight color="burgundy" className={styles.icon} />
+      {link.text}
+    </Link>
+  )
+}

components/Section/Link/link.module.css

@@ -0,0 +1,30 @@
+.linkWrapper {
+  align-items: baseline;
+  gap: var(--Spacing-x-half);
+}
+
+.mobile {
+  display: flex;
+  grid-column: 1 / -1;
+  justify-self: center;
+}
+
+.desktop {
+  display: none;
+}
+
+.icon {
+  align-self: center;
+}
+
+@media screen and (min-width: 768px) {
+  .mobile {
+    display: none;
+  }
+
+  .desktop {
+    display: flex;
+    grid-column: 2 / 3;
+    justify-self: end;
+  }
+}

components/Section/Link/link.ts

@@ -0,0 +1,9 @@
+import { linkVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface SectionLinkProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
+    VariantProps<typeof linkVariants> {
+  link?: { href: string; text: string }
+}

components/Section/Link/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./link.module.css"
+
+export const linkVariants = cva(styles.linkWrapper, {
+  variants: {
+    variant: {
+      mobile: styles.mobile,
+      desktop: styles.desktop,
+    },
+  },
+  defaultVariants: {
+    variant: "mobile",
+  },
+})