Merged in feat/SW-1383-content-card-start-page (pull request #1252)

feat(SW-1383): Implement ContentCard for the Start Page

* feat(SW-1383): Implement ContentCard

- Add ContentCard component
- Use within CarouselCards component

* fix(SW-1383): adjust carousel and content card styling

* refactor(SW-1383): optimize ContentCard component styling and props

* feat(SW-1383): move ContentCard image check out of component

* feat(SW-1383): Add optional link prop to ContentCard component

* refactor(SW-1383): Make ContentCard component linkable


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra

server/routers/contentstack/schemas/blocks/cards/contentCard.ts

@@ -14,21 +14,21 @@ export const contentCardSchema = z.object({
   image: tempImageVaultAssetSchema,
   body_text: z.string(),
   promo_text: z.string().optional(),
-  has_primary_button: z.boolean(),
-  has_secondary_button: z.boolean(),
-  primary_button: buttonSchema,
-  secondary_button: buttonSchema,
+  has_card_link: z.boolean(),
+  card_link: buttonSchema,
   system: systemSchema,
 })
 
 export const contentCardRefSchema = z.object({
   __typename: z.literal(CardsEnum.ContentCard),
-  primary_button: linkConnectionRefsSchema,
-  secondary_button: linkConnectionRefsSchema,
+  card_link: linkConnectionRefsSchema,
   system: systemSchema,
 })
 
 export function transformContentCard(card: typeof contentCardSchema._type) {
+  // Return null if image or image URL is missing
+  if (!card.image?.url) return null
+
   return {
     __typename: card.__typename,
     title: card.title,
@@ -36,9 +36,12 @@ export function transformContentCard(card: typeof contentCardSchema._type) {
     image: card.image,
     bodyText: card.body_text,
     promoText: card.promo_text,
-    primaryButton: card.has_primary_button ? card.primary_button : undefined,
-    secondaryButton: card.has_secondary_button
-      ? card.secondary_button
+    link: card.has_card_link
+      ? {
+          href: card.card_link.href,
+          openInNewTab: card.card_link.openInNewTab,
+          isExternal: card.card_link.isExternal,
+        }
       : undefined,
   }
 }

server/routers/contentstack/schemas/blocks/carouselCards.ts

@@ -69,11 +69,13 @@ export const carouselCardsSchema = z.object({
           heading: data.heading,
           enableFilters: false,
           filterCategories: [],
-          cards: data.card_groups.flatMap((group) =>
-            group.cardConnection.edges.map((edge) =>
-              transformContentCard(edge.node)
+          cards: data.card_groups
+            .flatMap((group) =>
+              group.cardConnection.edges.map((edge) =>
+                transformContentCard(edge.node)
+              )
             )
-          ),
+            .filter((card): card is NonNullable<typeof card> => card !== null),
           defaultFilter: null,
           link: data.link
             ? { href: data.link.href, text: data.link.title }
@@ -102,10 +104,13 @@ export const carouselCardsSchema = z.object({
         enableFilters: true,
         filterCategories,
         cards: data.card_groups.flatMap((group) =>
-          group.cardConnection.edges.map((edge) => ({
-            ...transformContentCard(edge.node),
-            filterId: group.filter_category.filter_identifier,
-          }))
+          group.cardConnection.edges
+            .map((edge) => transformContentCard(edge.node))
+            .filter((card): card is NonNullable<typeof card> => card !== null)
+            .map((card) => ({
+              ...card,
+              filterId: group.filter_category.filter_identifier,
+            }))
         ),
         defaultFilter: data.default_filter,
         link: data.link