fix(SW-217): Styling fixes for teaser-card

app/[lang]/(preview)/preview/[contentType]/[uid]/page.tsx

@@ -1,9 +1,10 @@
 import { ContentstackLivePreview } from "@contentstack/live-preview-utils"
 import { notFound } from "next/navigation"
 
-import ContentPage from "@/components/ContentType/ContentPage"
 import HotelPage from "@/components/ContentType/HotelPage"
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
+import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
+import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import { setLang } from "@/i18n/serverContext"
 
@@ -32,11 +33,13 @@ export default async function PreviewPage({
         return <ContentPage />
       case "loyalty-page":
         return <LoyaltyPage />
+      case "collection-page":
+        return <CollectionPage />
       case "hotel-page":
         return <HotelPage />
       default:
         console.log({ PREVIEW: params })
-        const type: never = params.contentType
+        const type = params.contentType
         console.error(`Unsupported content type given: ${type}`)
         notFound()
     }

components/Sidebar/index.tsx

@@ -60,7 +60,7 @@ export default function Sidebar({ blocks }: SidebarProps) {
               <TeaserCard
                 title={block.teaser_card.heading}
                 description={block.teaser_card.body_text}
-                style={block.teaser_card.theme}
+                intent={block.teaser_card.theme}
                 key={block.teaser_card.system.uid}
                 primaryButton={block.teaser_card.primaryButton}
                 secondaryButton={block.teaser_card.secondaryButton}

components/TempDesignSystem/TeaserCard/index.tsx

@@ -19,25 +19,23 @@ export default function TeaserCard({
   sidePeekButton,
   sidePeekContent,
   image,
-  style = "default",
+  intent,
   alwaysStack = false,
   className,
 }: TeaserCardProps) {
-  const cardClasses = teaserCardVariants({ style, alwaysStack, className })
+  const classNames = teaserCardVariants({ intent, alwaysStack, className })
 
   return (
-    <article className={cardClasses}>
+    <article className={classNames}>
       {image && (
-        <div className={styles.imageContainer}>
+        <Image
-          <Image
+          src={image.url}
-            src={image.url}
+          alt={image.meta?.alt || ""}
-            alt={image.meta?.alt || ""}
+          className={styles.image}
-            className={styles.backgroundImage}
+          width={Math.ceil(image.dimensions.aspectRatio * 200)}
-            width={399}
+          height={200}
-            height={201}
+          focalPoint={image.focalPoint}
-            focalPoint={image.focalPoint}
+        />
-          />
-        </div>
       )}
       <div className={styles.content}>
         <Subtitle textAlign="left" type="two" color="black">

components/TempDesignSystem/TeaserCard/teaserCard.module.css

@@ -18,24 +18,17 @@
   border: 1px solid var(--Base-Border-Subtle);
 }
 
-.imageContainer {
+.image {
   width: 100%;
-  height: 12.58625rem; /* 201.38px / 16 = 12.58625rem */
+  height: 12.5rem; /* 200px */
-  overflow: hidden;
-}
-
-.backgroundImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
 }
 
 .content {
-  display: flex;
+  display: grid;
-  flex-direction: column;
   gap: var(--Spacing-x-one-and-half);
-  align-items: flex-start;
   padding: var(--Spacing-x2) var(--Spacing-x3);
+  grid-template-rows: auto 1fr auto;
+  flex-grow: 1;
 }
 
 .description {
@@ -53,17 +46,6 @@
   width: 100%;
 }
 
-.body {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* line-height variables are in %, so using the value in rem instead */
-  max-height: calc(3 * 1.5rem);
-}
-
 @media (min-width: 1367px) {
   .card:not(.alwaysStack) .ctaContainer {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

components/TempDesignSystem/TeaserCard/variants.ts

@@ -4,7 +4,7 @@ import styles from "./teaserCard.module.css"
 
 export const teaserCardVariants = cva(styles.card, {
   variants: {
-    style: {
+    intent: {
       default: styles.default,
       featured: styles.featured,
     },
@@ -14,7 +14,7 @@ export const teaserCardVariants = cva(styles.card, {
     },
   },
   defaultVariants: {
-    style: "default",
+    intent: "default",
     alwaysStack: false,
   },
 })