From af23702116829f789a0f4a8023e947873ec4ea15 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Thu, 9 Jan 2025 15:45:35 +0100
Subject: [PATCH] fix(SW-1188): add card variant

---
 .../Header/MainMenu/NavigationMenu/MegaMenu/index.tsx    | 1 +
 components/TempDesignSystem/Card/card.module.css         | 9 ++++++++-
 components/TempDesignSystem/Card/index.tsx               | 9 ++++++++-
 components/TempDesignSystem/Card/variants.ts             | 5 +++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
index 75bafc972..d495924c4 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -111,6 +111,7 @@ export default function MegaMenu({
               onSecondaryButtonClick={handleNavigate}
               imageGradient
               theme="image"
+              height="dynamic"
             />
           </div>
         ) : null}
diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css
index 97d4f7b8a..7556c0d4e 100644
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/components/TempDesignSystem/Card/card.module.css
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   border-radius: var(--Corner-radius-Medium);
-  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -13,6 +12,14 @@
   overflow: hidden;
 }
 
+.fixed {
+  height: 320px; /* Fixed height from Figma */
+}
+
+.dynamic {
+  height: 100%;
+}
+
 .imageWrapper {
   display: flex;
   width: 100%;
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index 2ea270490..99518a066 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -32,6 +32,7 @@ export default function Card({
   imageGradient,
   onPrimaryButtonClick,
   onSecondaryButtonClick,
+  height,
 }: CardProps) {
   const buttonTheme = getButtonTheme(theme)
   const titleFontColor = getTitleFontColor(theme)
@@ -46,15 +47,21 @@ export default function Card({
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)
 
+  const imageWrapper =
+    height === "dynamic"
+      ? `${styles.imageWrapper} ${styles.dynamic}`
+      : `${styles.imageWrapper} ${styles.fixed}`
+
   return (
     <article
       className={cardVariants({
         theme,
+        height,
         className,
       })}
     >
       {backgroundImage && (
-        <div className={imageGradient ? styles.imageWrapper : ""}>
+        <div className={imageGradient ? imageWrapper : ""}>
           <Image
             src={backgroundImage.url}
             className={styles.image}
diff --git a/components/TempDesignSystem/Card/variants.ts b/components/TempDesignSystem/Card/variants.ts
index 8c4ab4e73..4de3b2bd6 100644
--- a/components/TempDesignSystem/Card/variants.ts
+++ b/components/TempDesignSystem/Card/variants.ts
@@ -16,8 +16,13 @@ export const cardVariants = cva(styles.container, {
 
       image: styles.themeImage,
     },
+    height: {
+      fixed: styles.fixed,
+      dynamic: styles.dynamic,
+    },
   },
   defaultVariants: {
     theme: "one",
+    height: "fixed",
   },
 })