feat(SW-285): Ship support for ContentPageBlocksCardsGrid

components/Content/Blocks/CardsGrid/index.tsx

@@ -0,0 +1,52 @@
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import Card from "@/components/TempDesignSystem/Card"
+import Grids from "@/components/TempDesignSystem/Grids"
+import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
+
+import { CardsGridProps } from "@/types/components/content/blocks"
+import { CardsGridEnum } from "@/types/components/content/enums"
+
+export default function CardsGrid({
+  cards_grid,
+  firstItem = false,
+}: CardsGridProps) {
+  return (
+    <SectionContainer>
+      <SectionHeader
+        title={cards_grid.title}
+        subtitle={cards_grid.preamble}
+        topTitle={firstItem}
+      />
+      <Grids.Stackable>
+        {cards_grid.cards.map((card) => {
+          switch (card.__typename) {
+            case CardsGridEnum.Card: {
+              return (
+                <Card
+                  theme={cards_grid.theme || "one"}
+                  key={card.system.uid}
+                  scriptedTopTitle={card.scripted_top_title}
+                  heading={card.heading}
+                  bodyText={card.body_text}
+                  secondaryButton={card.secondaryButton}
+                  primaryButton={card.primaryButton}
+                />
+              )
+            }
+            case CardsGridEnum.LoyaltyCard:
+              return (
+                <LoyaltyCard
+                  key={card.system.uid}
+                  image={card.image}
+                  heading={card.heading}
+                  bodyText={card.body_text}
+                  link={card.link}
+                />
+              )
+          }
+        })}
+      </Grids.Stackable>
+    </SectionContainer>
+  )
+}

components/Content/Blocks/index.tsx

@@ -2,7 +2,8 @@ import JsonToHtml from "@/components/JsonToHtml"
 // import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
-// import CardsGrid from "./CardsGrid"
+import CardsGrid from "./CardsGrid"
+
 import type { BlocksProps } from "@/types/components/content/blocks"
 import { ContentBlocksTypenameEnum } from "@/types/components/content/enums"
 
@@ -29,6 +30,14 @@ export function Blocks({ blocks }: BlocksProps) {
             title={block.shortcuts.title}
           />
         )
+      case ContentBlocksTypenameEnum.ContentPageBlocksCardsGrid:
+        return (
+          <CardsGrid
+            cards_grid={block.cards_grid}
+            key={`${block.cards_grid.title}-${idx}`}
+            firstItem={firstItem}
+          />
+        )
       default:
         return null
     }