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/Loyalty/Blocks/CardsGrid/index.tsx

@@ -1,5 +1,5 @@
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
@@ -13,7 +13,7 @@ export default function CardsGrid({
 }: CardsGridProps) {
   return (
     <SectionContainer>
-      <Header
+      <SectionHeader
         title={cards_grid.title}
         subtitle={cards_grid.preamble}
         topTitle={firstItem}

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -3,7 +3,8 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
@@ -56,7 +57,7 @@ export default function DynamicContent({
           <Subtitle>{dynamicContent.subtitle}</Subtitle>
         </div>
       ) : displayHeader ? (
-        <Header
+        <SectionHeader
           link={dynamicContent.link}
           subtitle={dynamicContent.subtitle}
           title={dynamicContent.title}
@@ -64,6 +65,9 @@ export default function DynamicContent({
         />
       ) : null}
       <DynamicComponentBlock component={dynamicContent.component} />
+      {displayHeader && (
+        <SectionLink link={dynamicContent.link} variant="mobile" />
+      )}
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -2,7 +2,8 @@ import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -47,7 +48,7 @@ export default async function CurrentBenefitsBlock({
 
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <Grids.Scrollable>
         {currentLevel.benefits.map((benefit, idx) => (
           <Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}>
@@ -64,6 +65,7 @@ export default async function CurrentBenefitsBlock({
           </Link>
         ))}
       </Grids.Scrollable>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -4,7 +4,8 @@ import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -39,7 +40,7 @@ export default async function NextLevelBenefitsBlock({
   // TODO: how to handle different count of unlockable benefits?
   return (
     <SectionContainer>
-      <Header title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
       <Grids.Stackable>
         {nextLevel.benefits.map((benefit) => (
           <article key={benefit.title} className={styles.card}>
@@ -63,6 +64,7 @@ export default async function NextLevelBenefitsBlock({
           </article>
         ))}
       </Grids.Stackable>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Overview/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import Friend from "./Friend"
@@ -24,12 +25,13 @@ export default async function Overview({
   }
   return (
     <SectionContainer>
-      <Header link={link} subtitle={subtitle} title={title} topTitle />
+      <SectionHeader link={link} subtitle={subtitle} title={title} topTitle />
       <section className={styles.overview}>
         <Friend user={user} />
         <Divider className={styles.divider} color="peach" />
         <Stats user={user} lang={lang} />
       </section>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
 
@@ -22,7 +23,7 @@ async function CurrentPointsBalance({
   const membership = getMembership(user.memberships)
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <div className={styles.card}>
         <h2>{`${formatMessage({ id: "Total Points" })}*`}</h2>
         <p className={styles.points}>
@@ -32,6 +33,7 @@ async function CurrentPointsBalance({
           {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
         </p>
       </div>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientEarnAndBurn from "./Client"
 
@@ -20,8 +21,9 @@ export default async function EarnAndBurn({
   }
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <ClientEarnAndBurn initialData={initialTransactions} lang={lang} />
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowRightIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -16,12 +16,7 @@ export default function Shortcuts({
 }: ShortcutsProps) {
   return (
     <SectionContainer>
-      <Header
+      <SectionHeader subtitle={subtitle} title={title} topTitle={firstItem} />
-        link={undefined}
-        subtitle={subtitle}
-        title={title}
-        topTitle={firstItem}
-      />
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (
           <Link

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -2,6 +2,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientPreviousStays from "./Client"
 
@@ -24,6 +25,7 @@ export default async function PreviousStays({
         initialPreviousStays={initialPreviousStays}
         lang={lang}
       />
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import StayCard from "../StayCard"
@@ -22,7 +23,7 @@ export default async function SoonestStays({
 
   return (
     <SectionContainer>
-      <Header title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (
@@ -36,6 +37,7 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock lang={lang} />
       )}
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -2,6 +2,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientUpcomingStays from "./Client"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
@@ -29,6 +30,7 @@ export default async function UpcomingStays({
       ) : (
         <EmptyUpcomingStaysBlock lang={lang} />
       )}
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

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 ? (
+      <SectionLink link={link} variant="desktop" />
-        <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}
     </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",
+  },
+})