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/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",
+  },
+})