isom-1639 infocards on homepage have a short image height when in 2 (#801)

adriangohjw · web-flow · commit b43914874d13 · 2024-10-23T15:41:11.000+08:00
* refactor Infocards stories

* add more stories (different columns)

* enhance Infocards - varying height based no layout

* add more stories

* fix - remain to be h-52 for below md

* fix - styling
diff --git a/packages/components/src/interfaces/complex/InfoCards.ts b/packages/components/src/interfaces/complex/InfoCards.ts
@@ -138,6 +138,7 @@ export type SingleCardWithImageProps = Static<
   typeof SingleCardWithImageSchema
 > & {
   site: IsomerSiteProps
+  layout: IsomerPageLayoutType
   LinkComponent?: LinkComponentType
 }
 export type InfoCardsProps = Static<typeof InfoCardsSchema> & {
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
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
 import type { InfoCardsProps } from "~/interfaces"
+import type { IsomerPageLayoutType } from "~/types"
 import InfoCards from "./InfoCards"
 
 const meta: Meta<InfoCardsProps> = {
@@ -45,137 +46,121 @@ const meta: Meta<InfoCardsProps> = {
 export default meta
 type Story = StoryObj<typeof InfoCards>
 
-export const WithImage: Story = {
-  args: {
+const generateArgs = ({
+  layout = "content",
+  maxColumns,
+  withoutImage = false,
+  isImageFitContain = false,
+}: {
+  layout?: IsomerPageLayoutType
+  maxColumns: "1" | "2" | "3"
+  withoutImage?: boolean
+  isImageFitContain?: boolean
+}): InfoCardsProps => {
+  const cards = [
+    {
+      title:
+        "Testing for a card with a long line length that spans across two lines or more",
+      description:
+        "Explore Duxton with us and leave with a full belly, tipsy mind, and a happy smile.",
+      imageUrl: "https://placehold.co/200x300",
+      imageAlt: "alt text",
+      imageFit: "contain",
+      url: "https://www.google.com",
+    },
+    {
+      title: "Card with short title",
+      description:
+        "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
+      imageUrl:
+        "https://craftypixels.com/placeholder-image/800x400/ffffff/000000&text=Image+with+white+background",
+      imageAlt: "alt text",
+      imageFit: "contain",
+    },
+    {
+      title: "Hover on me to see me change colors",
+      description:
+        "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
+      imageUrl: "https://placehold.co/800x200",
+      imageAlt: "alt text",
+      imageFit: "contain",
+      url: "https://www.google.com",
+    },
+    {
+      title: "Testing a card with a larger image and no description",
+      imageUrl: "https://placehold.co/500x500",
+      imageAlt: "alt text",
+      imageFit: "contain",
+    },
+    {
+      title: "A non-placeholder image version",
+      description: "This is an image that is added using a URL.",
+      imageUrl:
+        "https://images.unsplash.com/photo-1722260613137-f8f5ac432d69?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      imageAlt: "alt text",
+      imageFit: "contain",
+      url: "https://www.google.com",
+    },
+  ]
+
+  if (withoutImage) {
+    cards.forEach((card) => {
+      delete (card as any).imageAlt
+      delete (card as any).imageUrl
+    })
+  }
+
+  if (!isImageFitContain) {
+    cards.forEach((card) => {
+      delete (card as any).imageFit
+    })
+  }
+
+  return {
+    layout: layout,
     title: "Section title ministry highlights",
     subtitle:
       "Section subtitle, maximum 150 chars. These are some of the things we are working on. As a ministry, we focus on delivering value to the members of public.",
-    variant: "cardsWithImages",
-    cards: [
-      {
-        title:
-          "Testing for a card with a long line length that spans across two lines or more",
-        description:
-          "Explore Duxton with us and leave with a full belly, tipsy mind, and a happy smile.",
-        imageUrl: "https://placehold.co/200x300",
-        imageAlt: "alt text",
-        url: "https://www.google.com",
-      },
-      {
-        title: "Card with short title",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-        imageUrl:
-          "https://craftypixels.com/placeholder-image/800x400/ffffff/000000&text=Image+with+white+background",
-        imageAlt: "alt text",
-      },
-      {
-        title: "Hover on me to see me change colors",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-        imageUrl: "https://placehold.co/800x200",
-        imageAlt: "alt text",
-        url: "https://www.google.com",
-      },
-      {
-        title: "Testing a card with a larger image and no description",
-        imageUrl: "https://placehold.co/500x500",
-        imageAlt: "alt text",
-      },
-      {
-        title: "A non-placeholder image version",
-        description: "This is an image that is added using a URL.",
-        imageUrl:
-          "https://images.unsplash.com/photo-1722260613137-f8f5ac432d69?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        imageAlt: "alt text",
-        url: "https://www.google.com",
-      },
-    ],
-  },
+    maxColumns: maxColumns,
+    variant: withoutImage ? "cardsWithoutImages" : "cardsWithImages",
+    cards: cards,
+  } as InfoCardsProps
+}
+
+export const WithImage3Columns: Story = {
+  name: "With Image (3 Cols)",
+  args: generateArgs({ maxColumns: "3" }),
+}
+
+export const WithImage3ColumnsHomepage: Story = {
+  name: "With Image (3 Cols) Homepage",
+  args: generateArgs({ maxColumns: "3", layout: "homepage" }),
+}
+
+export const WithImage2Columns: Story = {
+  name: "With Image (2 Cols)",
+  args: generateArgs({ maxColumns: "2" }),
+}
+
+export const WithImage2ColumnsHomepage: Story = {
+  name: "With Image (2 Cols) Homepage",
+  args: generateArgs({ maxColumns: "2", layout: "homepage" }),
+}
+
+export const WithImage1Columns: Story = {
+  name: "With Image (1 Col)",
+  args: generateArgs({ maxColumns: "1" }),
+}
+
+export const WithImage1ColumnsHomepage: Story = {
+  name: "With Image (1 Col) Homepage",
+  args: generateArgs({ maxColumns: "1", layout: "homepage" }),
 }
 
 export const NoImage: Story = {
-  args: {
-    title: "Section title ministry highlights",
-    subtitle:
-      "Section subtitle, maximum 150 chars. These are some of the things we are working on. As a ministry, we focus on delivering value to the members of public.",
-    variant: "cardsWithoutImages",
-    cards: [
-      {
-        title:
-          "Testing for a card with a long line length that spans across two lines or more",
-        description:
-          "Explore Duxton with us and leave with a full belly, tipsy mind, and a happy smile.",
-        url: "https://www.google.com",
-      },
-      {
-        title: "Card with short title",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-      },
-      {
-        title: "Hover on me to see me change colors",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-        url: "https://www.google.com",
-      },
-      {
-        title: "A yummy, tipsy evening at Duxton",
-      },
-    ],
-  },
+  args: generateArgs({ maxColumns: "3", withoutImage: true }),
 }
 
 export const WithContainImageFit: Story = {
-  args: {
-    title: "Section title ministry highlights",
-    subtitle:
-      "Section subtitle, maximum 150 chars. These are some of the things we are working on. As a ministry, we focus on delivering value to the members of public.",
-    variant: "cardsWithImages",
-    cards: [
-      {
-        title:
-          "Testing for a card with a long line length that spans across two lines or more",
-        description:
-          "Explore Duxton with us and leave with a full belly, tipsy mind, and a happy smile.",
-        imageUrl: "https://placehold.co/200x300",
-        imageAlt: "alt text",
-        imageFit: "contain",
-        url: "https://www.google.com",
-      },
-      {
-        title: "Card with short title",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-        imageUrl:
-          "https://craftypixels.com/placeholder-image/800x400/ffffff/000000&text=Image+with+white+background",
-        imageAlt: "alt text",
-        imageFit: "contain",
-      },
-      {
-        title: "Hover on me to see me change colors",
-        description:
-          "Card description, 200 chars. In the kingdom of Veridonia, the government operates as a benevolent monarchy, guided by ancient traditions and the wisdom of its sovereign.",
-        imageUrl: "https://placehold.co/800x200",
-        imageAlt: "alt text",
-        url: "https://www.google.com",
-        imageFit: "contain",
-      },
-      {
-        title: "Testing a card with a larger image and no description",
-        imageUrl: "https://placehold.co/500x500",
-        imageAlt: "alt text",
-        imageFit: "contain",
-      },
-      {
-        title: "A non-placeholder image version",
-        description: "This is an image that is added using a URL.",
-        imageUrl:
-          "https://images.unsplash.com/photo-1722260613137-f8f5ac432d69?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        imageAlt: "alt text",
-        url: "https://www.google.com",
-        imageFit: "contain",
-      },
-    ],
-  },
+  args: generateArgs({ maxColumns: "3", isImageFitContain: true }),
 }
diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
@@ -36,7 +36,7 @@ const createInfoCardsStyles = tv({
     grid: "grid grid-cols-1 gap-10 md:gap-7 lg:gap-x-16 lg:gap-y-12",
     cardContainer: "group flex flex-col gap-5 outline-0",
     cardImageContainer:
-      "h-[11.875rem] w-full overflow-hidden rounded-lg border border-base-divider-subtle drop-shadow-none transition ease-in md:h-52",
+      "w-full overflow-hidden rounded-lg border border-base-divider-subtle drop-shadow-none transition ease-in",
     cardImage: "h-full w-full object-center",
     cardTextContainer: "flex flex-col gap-2.5 sm:gap-3",
     cardTitleArrow:
@@ -49,11 +49,13 @@ const createInfoCardsStyles = tv({
         container: "py-12 first:pt-0 md:py-16",
         headingContainer: "gap-2.5 lg:max-w-3xl",
         headingSubtitle: "prose-headline-lg-regular",
+        cardImageContainer: "h-[11.875rem] md:h-60",
       },
       default: {
         container: "mt-14 first:mt-0",
         headingContainer: "gap-6",
         headingSubtitle: "prose-body-base",
+        cardImageContainer: "h-[11.875rem] md:h-52",
       },
     },
     isClickableCard: {
@@ -116,10 +118,11 @@ const InfoCardImage = ({
   imageAlt,
   imageFit,
   url,
+  layout,
   site,
 }: Pick<
   SingleCardWithImageProps,
-  "imageUrl" | "imageAlt" | "url" | "imageFit" | "site"
+  "imageUrl" | "imageAlt" | "url" | "imageFit" | "layout" | "site"
 >): JSX.Element => {
   const imgSrc =
     isExternalUrl(imageUrl) || site.assetsBaseUrl === undefined
@@ -128,7 +131,10 @@ const InfoCardImage = ({
 
   return (
     <div
-      className={compoundStyles.cardImageContainer({ isClickableCard: !!url })}
+      className={compoundStyles.cardImageContainer({
+        layout: getTailwindVariantLayout(layout),
+        isClickableCard: !!url,
+      })}
     >
       <ImageClient
         src={imgSrc}
@@ -187,6 +193,7 @@ const InfoCardWithImage = ({
   imageAlt,
   imageFit,
   url,
+  layout,
   site,
   LinkComponent,
 }: SingleCardWithImageProps): JSX.Element => {
@@ -198,6 +205,7 @@ const InfoCardWithImage = ({
         imageAlt={imageAlt}
         url={url}
         site={site}
+        layout={layout}
       />
       <InfoCardText title={title} description={description} url={url} />
     </InfoCardContainer>
@@ -225,6 +233,7 @@ const InfoCards = ({
               <InfoCardWithImage
                 key={idx}
                 {...card}
+                layout={layout}
                 site={site}
                 LinkComponent={LinkComponent}
               />

Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,7 @@ export type SingleCardWithImageProps = Static<`
`138`	`138`	`typeof SingleCardWithImageSchema`
`139`	`139`	`> & {`
`140`	`140`	`site: IsomerSiteProps`
	`141`	`+ layout: IsomerPageLayoutType`
`141`	`142`	`LinkComponent?: LinkComponentType`
`142`	`143`	`}`
`143`	`144`	`export type InfoCardsProps = Static<typeof InfoCardsSchema> & {`