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

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
-            src={image.url}
-            alt={image.meta?.alt || ""}
-            className={styles.backgroundImage}
-            width={399}
-            height={201}
-            focalPoint={image.focalPoint}
-          />
-        </div>
+        <Image
+          src={image.url}
+          alt={image.meta?.alt || ""}
+          className={styles.image}
+          width={Math.ceil(image.dimensions.aspectRatio * 200)}
+          height={200}
+          focalPoint={image.focalPoint}
+        />
       )}
       <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 */
-  overflow: hidden;
-}
-
-.backgroundImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  height: 12.5rem; /* 200px */
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   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,
   },
 })