Merged in feat/1525-info-card-themes (pull request #1300)

feat(SW-1525): Add theme support for InfoCard component

* feat(1525): Add theme support for InfoCard component

* refactor(1525): Update InfoCard theme typing


Approved-by: Christian Andolf

components/Blocks/CardsGrid.tsx

@@ -64,6 +64,7 @@ export default function CardsGrid({
                   heading={card.heading}
                   bodyText={card.bodyText}
                   image={card.image}
+                  theme={card.theme ?? "one"}
                   primaryButton={card.primaryButton}
                   secondaryButton={card.secondaryButton}
                   imagePosition={index % 2 === 0 ? "right" : "left"}

lib/graphql/Fragments/Blocks/InfoCard.graphql

@@ -16,6 +16,7 @@ fragment InfoCardBlock on InfoCard {
   body_text
   image
   title
+  theme
 
   primary_button {
     is_contentstack_link

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

@@ -5,6 +5,7 @@ import { systemSchema } from "../../system"
 import { buttonSchema } from "../utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "../utils/linkConnection"
 
+import { INFO_CARD_THEMES } from "@/types/components/blocks/infoCard"
 import { CardsEnum } from "@/types/enums/cards"
 
 export const infoCardBlockSchema = z.object({
@@ -13,6 +14,7 @@ export const infoCardBlockSchema = z.object({
   heading: z.string().optional().default(""),
   body_text: z.string().optional().default(""),
   image: tempImageVaultAssetSchema,
+  theme: z.enum(INFO_CARD_THEMES).nullable(),
   title: z.string().optional(),
   primary_button: buttonSchema.optional().nullable(),
   secondary_button: buttonSchema.optional().nullable(),
@@ -26,6 +28,7 @@ export function transformInfoCardBlock(card: typeof infoCardBlockSchema._type) {
     heading: card.heading,
     bodyText: card.body_text,
     image: card.image,
+    theme: card.theme,
     title: card.title,
     primaryButton: card.primary_button?.href ? card.primary_button : undefined,
     secondaryButton: card.secondary_button?.href

types/components/blocks/infoCard.ts

@@ -9,6 +9,14 @@ type CardTheme = Exclude<
   "image"
 >
 
+export const INFO_CARD_THEMES = [
+  "one",
+  "two",
+  "three",
+  "primaryInverted",
+  "primaryStrong",
+] as const satisfies readonly CardTheme[]
+
 export interface InfoCardProps {
   scriptedTopTitle?: string
   heading: string