From e98e00c083fa86f90235da5530a9bc92c158fff9 Mon Sep 17 00:00:00 2001
From: dcshzj <27919917+dcshzj@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:29:15 +0800
Subject: [PATCH] fix: change isCardWithImages to variant

---
 .../src/components/PageEditor/constants.ts    |  2 +-
 .../src/interfaces/complex/InfoCards.ts       |  6 +-
 .../complex/InfoCards/InfoCards.stories.tsx   |  4 +-
 .../complex/InfoCards/InfoCards.tsx           | 99 ++++++++++---------
 .../next/layouts/Content/Content.stories.tsx  |  2 +-
 .../layouts/Homepage/Homepage.stories.tsx     |  2 +-
 tooling/build/scripts/generate-sitemap.js     |  2 +-
 7 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/apps/studio/src/components/PageEditor/constants.ts b/apps/studio/src/components/PageEditor/constants.ts
index 297033c2ea..c6856c273c 100644
--- a/apps/studio/src/components/PageEditor/constants.ts
+++ b/apps/studio/src/components/PageEditor/constants.ts
@@ -84,7 +84,7 @@ export const DEFAULT_BLOCKS: Record<
     type: "infocards",
     title: "This is an optional title of the Infocards component",
     subtitle: "This is an optional subtitle for the Infocards component",
-    isCardsWithImages: true,
+    variant: "cardsWithImages",
     cards: [
       {
         title: "This is the first card",
diff --git a/packages/components/src/interfaces/complex/InfoCards.ts b/packages/components/src/interfaces/complex/InfoCards.ts
index b02ec3b46f..eb0f2ec685 100644
--- a/packages/components/src/interfaces/complex/InfoCards.ts
+++ b/packages/components/src/interfaces/complex/InfoCards.ts
@@ -53,7 +53,7 @@ const InfoCardsBaseSchema = Type.Object({
 
 const InfoCardsWithImageSchema = Type.Object(
   {
-    isCardsWithImages: Type.Literal(true, { default: true }),
+    variant: Type.Literal("cardsWithImages", { default: "cardsWithImages" }),
     cards: Type.Array(SingleCardWithImageSchema, {
       title: "Cards",
       default: [],
@@ -66,7 +66,9 @@ const InfoCardsWithImageSchema = Type.Object(
 
 const InfoCardsNoImageSchema = Type.Object(
   {
-    isCardsWithImages: Type.Literal(false, { default: false }),
+    variant: Type.Literal("cardsWithoutImages", {
+      default: "cardsWithoutImages",
+    }),
     cards: Type.Array(SingleCardNoImageSchema, {
       title: "Cards",
       default: [],
diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx
index 57382b89b5..e6b3f91fea 100644
--- a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx
+++ b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx
@@ -22,7 +22,7 @@ export const WithImage: Story = {
       "Explore your great neighbourhood with us can’t stretch all the way so this needs a max width",
     subtitle:
       "They will try to close the door on you, just open it. Lion! The other day the grass was brown, now it’s green because I ain’t give up. Never surrender.",
-    isCardsWithImages: true,
+    variant: "cardsWithImages",
     cards: [
       {
         title:
@@ -63,7 +63,7 @@ export const NoImage: Story = {
       "Explore your great neighbourhood with us can’t stretch all the way so this needs a max width",
     subtitle:
       "They will try to close the door on you, just open it. Lion! The other day the grass was brown, now it’s green because I ain’t give up. Never surrender.",
-    isCardsWithImages: false,
+    variant: "cardsWithoutImages",
     cards: [
       {
         title:
diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
index 71a3efdc74..0af2eddae8 100644
--- a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
+++ b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
@@ -1,11 +1,12 @@
+import type { PropsWithChildren } from "react"
 import { BiRightArrowAlt } from "react-icons/bi"
-import { tv } from "tailwind-variants"
 
 import type { InfoCardsProps } from "~/interfaces"
 import type {
   SingleCardNoImageProps,
   SingleCardWithImageProps,
 } from "~/interfaces/complex/InfoCards"
+import { tv } from "~/lib/tv"
 import { ComponentContent } from "../../internal/customCssClass"
 import { Link } from "../../internal/Link"
 
@@ -23,7 +24,7 @@ const createInfoCardsStyles = tv({
     cardTextContainer: "flex flex-col gap-3",
     cardTitle: "text-base-content-strong text-heading-04",
     cardTitleArrow: "mb-1 ml-1.5 inline transition group-hover:translate-x-1",
-    cardDescription: "prose-body-base text-base-content line-clamp-4",
+    cardDescription: "prose-body-base line-clamp-4 text-base-content",
   },
   variants: {
     isClickableCard: {
@@ -39,7 +40,7 @@ const compoundStyles = createInfoCardsStyles()
 const InfoCardsHeadingSection = ({
   title,
   subtitle,
-}: Pick<InfoCardsProps, "title" | "subtitle">) => (
+}: Pick<InfoCardsProps, "title" | "subtitle">): JSX.Element => (
   <div className={compoundStyles.headingContainer()}>
     <h2 className={compoundStyles.headingTitle()}>{title}</h2>
 
@@ -47,10 +48,30 @@ const InfoCardsHeadingSection = ({
   </div>
 )
 
+const InfoCardContainer = ({
+  url,
+  LinkComponent,
+  children,
+}: PropsWithChildren<
+  Pick<SingleCardNoImageProps, "url" | "LinkComponent">
+>): JSX.Element => {
+  return url ? (
+    <Link
+      href={url}
+      className={compoundStyles.cardContainer()}
+      LinkComponent={LinkComponent}
+    >
+      {children}
+    </Link>
+  ) : (
+    <div className={compoundStyles.cardContainer()}>{children}</div>
+  )
+}
+
 const InfoCardImage = ({
   imageUrl,
   imageAlt,
-}: Pick<SingleCardWithImageProps, "imageUrl" | "imageAlt">) => (
+}: Pick<SingleCardWithImageProps, "imageUrl" | "imageAlt">): JSX.Element => (
   <div className={compoundStyles.cardImageContainer()}>
     <img src={imageUrl} alt={imageAlt} className={compoundStyles.cardImage()} />
   </div>
@@ -60,7 +81,10 @@ const InfoCardText = ({
   title,
   description,
   url,
-}: Pick<SingleCardWithImageProps, "title" | "description" | "url">) => (
+}: Pick<
+  SingleCardWithImageProps,
+  "title" | "description" | "url"
+>): JSX.Element => (
   <div className={compoundStyles.cardTextContainer()}>
     <h4 className={compoundStyles.cardTitle({ isClickableCard: !!url })}>
       {title}
@@ -81,19 +105,11 @@ const InfoCardNoImage = ({
   description,
   url,
   LinkComponent,
-}: SingleCardNoImageProps) => {
-  return url ? (
-    <Link
-      href={url}
-      className={compoundStyles.cardContainer()}
-      LinkComponent={LinkComponent}
-    >
-      <InfoCardText title={title} description={description} url={url} />
-    </Link>
-  ) : (
-    <div className={compoundStyles.cardContainer()}>
+}: SingleCardNoImageProps): JSX.Element => {
+  return (
+    <InfoCardContainer url={url} LinkComponent={LinkComponent}>
       <InfoCardText title={title} description={description} url={url} />
-    </div>
+    </InfoCardContainer>
   )
 }
 
@@ -104,52 +120,41 @@ const InfoCardWithImage = ({
   imageAlt,
   url,
   LinkComponent,
-}: SingleCardWithImageProps) => {
-  return url ? (
-    <Link
-      href={url}
-      className={compoundStyles.cardContainer()}
-      LinkComponent={LinkComponent}
-    >
+}: SingleCardWithImageProps): JSX.Element => {
+  return (
+    <InfoCardContainer url={url} LinkComponent={LinkComponent}>
       <InfoCardImage imageUrl={imageUrl} imageAlt={imageAlt} />
       <InfoCardText title={title} description={description} url={url} />
-    </Link>
-  ) : (
-    <div className={compoundStyles.cardContainer()}>
-      <InfoCardImage imageUrl={imageUrl} imageAlt={imageAlt} />
-      <InfoCardText title={title} description={description} url={url} />
-    </div>
+    </InfoCardContainer>
   )
 }
 
 const InfoCards = ({
   title,
   subtitle,
-  isCardsWithImages,
+  variant,
   cards,
   LinkComponent,
-}: InfoCardsProps) => (
+}: InfoCardsProps): JSX.Element => (
   <section className={compoundStyles.container()}>
     {(title || subtitle) && (
       <InfoCardsHeadingSection title={title} subtitle={subtitle} />
     )}
 
     <div className={compoundStyles.grid()}>
-      {isCardsWithImages
-        ? cards.map((card, idx) => (
-            <InfoCardWithImage
-              key={idx}
-              {...card}
-              LinkComponent={LinkComponent}
-            />
-          ))
-        : cards.map((card, idx) => (
-            <InfoCardNoImage
-              key={idx}
-              {...card}
-              LinkComponent={LinkComponent}
-            />
-          ))}
+      {variant === "cardsWithImages" &&
+        cards.map((card, idx) => (
+          <InfoCardWithImage
+            key={idx}
+            {...card}
+            LinkComponent={LinkComponent}
+          />
+        ))}
+
+      {variant === "cardsWithoutImages" &&
+        cards.map((card, idx) => (
+          <InfoCardNoImage key={idx} {...card} LinkComponent={LinkComponent} />
+        ))}
     </div>
   </section>
 )
diff --git a/packages/components/src/templates/next/layouts/Content/Content.stories.tsx b/packages/components/src/templates/next/layouts/Content/Content.stories.tsx
index da11207dc2..b1032354d8 100644
--- a/packages/components/src/templates/next/layouts/Content/Content.stories.tsx
+++ b/packages/components/src/templates/next/layouts/Content/Content.stories.tsx
@@ -1107,7 +1107,7 @@ export const Default: Story = {
           "Explore your great neighbourhood with us can’t stretch all the way so this needs a max width",
         subtitle:
           "They will try to close the door on you, just open it. Lion! The other day the grass was brown, now it’s green because I ain’t give up. Never surrender.",
-        isCardsWithImages: true,
+        variant: "cardsWithImages",
         cards: [
           {
             title: "A yummy, tipsy evening at Duxton",
diff --git a/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx b/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx
index 8fc9814413..a4e7a69fea 100644
--- a/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx
+++ b/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx
@@ -228,7 +228,7 @@ export const Default: Story = {
           "Explore your great neighbourhood with us can’t stretch all the way so this needs a max width",
         subtitle:
           "They will try to close the door on you, just open it. Lion! The other day the grass was brown, now it’s green because I ain’t give up. Never surrender.",
-        isCardsWithImages: true,
+        variant: "cardsWithImages",
         cards: [
           {
             title: "A yummy, tipsy evening at Duxton",
diff --git a/tooling/build/scripts/generate-sitemap.js b/tooling/build/scripts/generate-sitemap.js
index b0d35bc09b..28c8145c81 100644
--- a/tooling/build/scripts/generate-sitemap.js
+++ b/tooling/build/scripts/generate-sitemap.js
@@ -119,7 +119,7 @@ const processDanglingDirectory = async (fullPath, relativePath, name) => {
   const children = await getSiteMapChildrenEntries(fullPath, relativePath);
   const listOfChildPages = {
     type: "infocards",
-    isCardsWithImages: false,
+    variant: "cardsWithoutImages",
     cards: children.map((child) => ({
       title: child.title,
       url: child.permalink,