fix: change isCardWithImages to variant

opengovsg · Aug 5, 2024 · e98e00c · e98e00c
1 parent fdaf46b
commit e98e00c
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,18 +40,38 @@ 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>
 
     {subtitle && <p className={compoundStyles.headingSubtitle()}>{subtitle}</p>}
   </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
@@ -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
@@ -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
@@ -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,