feat: add new cards grid block

components/JsonToHtml/renderOptions.tsx

@@ -17,7 +17,8 @@ import type {
 import { RTEMarkType } from "@/types/rte/node"
 import type { RenderOptions } from "@/types/rte/option"
 
-function extractPossibleAttributes(attrs: Attributes) {
+function extractPossibleAttributes(attrs: Attributes | undefined) {
+  if (!attrs) return {}
   const props: Record<string, any> = {}
   if (attrs.id) {
     props.id = attrs.id

components/Loyalty/Blocks/CardGrid/cardGrid.module.css

@@ -1,28 +0,0 @@
-.container {
-  display: grid;
-  gap: 2.4rem;
-}
-
-.subtitle {
-  margin: 0;
-}
-
-.titleContainer {
-  display: grid;
-  gap: 0.8rem;
-}
-
-.cardContainer {
-  display: grid;
-  gap: 1.6rem;
-}
-
-@media screen and (min-width: 950px) {
-  .cardContainer {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .cardWrapper:last-child {
-    grid-column: span 2;
-  }
-}

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -1,41 +0,0 @@
-import { _ } from "@/lib/translation"
-
-import Card from "@/components/TempDesignSystem/Card"
-import Title from "@/components/Title"
-
-import styles from "./cardGrid.module.css"
-
-import { CardGridProps } from "@/types/components/loyalty/blocks"
-
-export default function CardGrid({ card_grid }: CardGridProps) {
-  return (
-    <section className={styles.container}>
-      <header className={styles.titleContainer}>
-        <Title as="h3" level="h2" weight="semiBold" uppercase>
-          {card_grid.title}
-        </Title>
-        {card_grid.subtitle ? (
-          <Title
-            as="h5"
-            level="h3"
-            weight="regular"
-            className={styles.subtitle}
-          >
-            {card_grid.subtitle}
-          </Title>
-        ) : null}
-      </header>
-      <div className={styles.cardContainer}>
-        {card_grid.cards.map((card, i) => (
-          <div className={styles.cardWrapper} key={`${card.title}+${i}`}>
-            <Card
-              subtitle={card.subtitle}
-              title={card.title}
-              link={card.link}
-            />
-          </div>
-        ))}
-      </div>
-    </section>
-  )
-}

components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css

@@ -0,0 +1,4 @@
+.section {
+  display: grid;
+  gap: 2.4rem;
+}

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -0,0 +1,44 @@
+import { _ } from "@/lib/translation"
+
+import Header from "@/components/MyPages/Blocks/Header"
+import Card from "@/components/TempDesignSystem/Card"
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
+
+import styles from "./cardsGrid.module.css"
+
+import { CardsGridProps } from "@/types/components/loyalty/blocks"
+
+export default function CardsGrid({ cards_grid }: CardsGridProps) {
+  return (
+    <section className={styles.section}>
+      <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
+      <CardGrid variant={cards_grid.layout}>
+        {cards_grid.cards.map((card) => (
+          <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 && {
+                href: card.secondaryButton.link.href,
+                title: card.secondaryButton.link.title,
+                openInNewTab: card.secondaryButton.open_in_new_tab,
+                isExternal: card.secondaryButton.isExternal,
+              }
+            }
+            primaryButton={
+              card.primaryButton && {
+                href: card.primaryButton.link.href,
+                title: card.primaryButton.link.title,
+                openInNewTab: card.primaryButton.open_in_new_tab,
+                isExternal: card.primaryButton.isExternal,
+              }
+            }
+          />
+        ))}
+      </CardGrid>
+    </section>
+  )
+}

components/Loyalty/Blocks/index.tsx

@@ -2,7 +2,7 @@ import JsonToHtml from "@/components/JsonToHtml"
 import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
-import CardGrid from "./CardGrid"
+import CardsGrid from "./CardsGrid"
 
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
@@ -10,8 +10,6 @@ import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
 export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block) => {
     switch (block.__typename) {
-      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
-        return <CardGrid card_grid={block.card_grid} />
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
           <section>
@@ -31,6 +29,8 @@ export function Blocks({ blocks }: BlocksProps) {
             subtitle={block.shortcuts.preamble}
           />
         )
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
+        return <CardsGrid cards_grid={block.cards_grid} />
       default:
         return null
     }

components/TempDesignSystem/Card/variants.ts

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./card.module.css"
+
+export const cardVariants = cva(styles.container, {
+  variants: {
+    theme: {
+      one: styles.themeOne,
+      two: styles.themeTwo,
+      three: styles.themeThree,
+    },
+  },
+  defaultVariants: {
+    theme: "one",
+  },
+})

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -37,14 +37,19 @@
 }
 
 @media screen and (min-width: 950px) {
-  .twoColumnGrid {
+  .twoColumnGrid,
+  .twoPlusOne {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .treeColumnGrid {
+  .threeColumnGrid {
     grid-template-columns: repeat(3, 1fr);
   }
 
+  .twoPlusOne > *:last-child {
+    grid-column: span 2;
+  }
+
   .carousel {
     grid-auto-flow: unset;
     margin: 0;