feat(SW-217): Split up Card to two (Card and TeaserCard)

components/Blocks/CardsGrid.tsx

@@ -1,10 +1,11 @@
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
-import ContentCard from "@/components/TempDesignSystem/ContentCard"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 
+import TeaserCard from "../TempDesignSystem/TeaserCard"
+
 import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
 import { CardsGridEnum } from "@/types/enums/cardsGrid"
 
@@ -22,37 +23,38 @@ export default function CardsGrid({
       <Grids.Stackable>
         {cards_grid.cards.map((card) => {
           switch (card.__typename) {
-            case CardsGridEnum.cards.Card: {
-              return card.isContentCard ? (
-                <ContentCard
+            case CardsGridEnum.cards.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.cards.TeaserCard:
+              return (
+                <TeaserCard
+                  key={card.system.uid}
+                  title={card.heading}
                   description={card.body_text}
-                  backgroundImage={card.backgroundImage}
                   primaryButton={card.primaryButton}
                   secondaryButton={card.secondaryButton}
                   sidePeekButton={card.sidePeekButton}
+                  image={card.image}
                   style="default"
-                  title={card.heading}
-                />
-              ) : (
-                <Card
-                  key={card.system.uid}
-                  bodyText={card.body_text}
-                  heading={card.heading}
-                  primaryButton={card.primaryButton}
-                  secondaryButton={card.secondaryButton}
-                  scriptedTopTitle={card.scripted_top_title}
-                  theme={cards_grid.theme || "one"}
                 />
               )
-            }
             case CardsGridEnum.cards.LoyaltyCard:
               return (
                 <LoyaltyCard
                   key={card.system.uid}
-                  bodyText={card.body_text}
-                  heading={card.heading}
                   image={card.image}
+                  heading={card.heading}
+                  bodyText={card.body_text}
                   link={card.link}
                 />
               )

components/TempDesignSystem/TeaserCard/index.tsx

@@ -7,32 +7,32 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Subtitle from "../Text/Subtitle"
-import { contentCardVariants } from "./variants"
+import { teaserCardVariants } from "./variants"
 
-import styles from "./contentCard.module.css"
+import styles from "./teaserCard.module.css"
 
-import type { ContentCardProps } from "@/types/components/contentCard"
+import type { TeaserCardProps } from "@/types/components/teaserCard"
 
-export default function ContentCard({
+export default function TeaserCard({
   title,
   description,
   primaryButton,
   secondaryButton,
   sidePeekButton,
-  backgroundImage,
+  image,
   style = "default",
   alwaysStack = false,
   className,
-}: ContentCardProps) {
-  const cardClasses = contentCardVariants({ style, alwaysStack, className })
+}: TeaserCardProps) {
+  const cardClasses = teaserCardVariants({ style, alwaysStack, className })
 
   return (
-    <div className={cardClasses}>
-      {backgroundImage && (
+    <article className={cardClasses}>
+      {image && (
         <div className={styles.imageContainer}>
           <Image
-            src={backgroundImage.url}
-            alt={backgroundImage.meta?.alt || ""}
+            src={image.url}
+            alt={image.meta?.alt || ""}
             className={styles.backgroundImage}
             width={399}
             height={201}
@@ -70,6 +70,7 @@ export default function ContentCard({
                 <Link
                   href={primaryButton.href}
                   target={primaryButton.openInNewTab ? "_blank" : undefined}
+                  color="none"
                 >
                   {primaryButton.title}
                 </Link>
@@ -93,6 +94,6 @@ export default function ContentCard({
           </div>
         )}
       </div>
-    </div>
+    </article>
   )
 }

components/TempDesignSystem/TeaserCard/variants.ts

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority"
 
-import styles from "./contentCard.module.css"
+import styles from "./teaserCard.module.css"
 
-export const contentCardVariants = cva(styles.card, {
+export const teaserCardVariants = cva(styles.card, {
   variants: {
     style: {
       default: styles.default,