Merged in fix/SW-2817-activity-card (pull request #2160)

Fix/SW-2816: activity card span full width

* fix(SW-2816): image span full width

* fix(SW-2817): improve image blurriness


Approved-by: Erik Tiekstra

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -20,13 +20,13 @@
   height: 100%;
 }
 
-.imageWrapper {
+.imageContainer {
   display: flex;
   width: 100%;
   height: 100%;
 }
 
-.imageWrapper::after {
+.imageGradient::after {
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,

apps/scandic-web/components/TempDesignSystem/Card/card.ts

@@ -24,8 +24,6 @@ export interface CardProps
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
-  imageHeight?: number
-  imageWidth?: number
   imageGradient?: boolean
   onPrimaryButtonClick?: () => void
   onSecondaryButtonClick?: () => void

apps/scandic-web/components/TempDesignSystem/Card/index.tsx

@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import Link from "next/link"
 
 import Image from "@/components/Image"
@@ -27,8 +28,6 @@ export default function Card({
   className,
   theme,
   backgroundImage,
-  imageHeight,
-  imageWidth,
   imageGradient,
   onPrimaryButtonClick,
   onSecondaryButtonClick,
@@ -39,16 +38,6 @@ export default function Card({
   const scriptFontColor = getScriptFontColor(theme)
   const bodyFontColor = getBodyFontColor(theme)
 
-  imageHeight = imageHeight || 320
-
-  imageWidth =
-    imageWidth ||
-    (backgroundImage?.dimensions
-      ? backgroundImage.dimensions.aspectRatio >= 1
-        ? backgroundImage.dimensions.aspectRatio * imageHeight
-        : imageHeight / backgroundImage.dimensions.aspectRatio
-      : 420)
-
   return (
     <article
       className={cardVariants({
@@ -58,13 +47,17 @@ export default function Card({
       })}
     >
       {backgroundImage && (
-        <div className={imageGradient ? styles.imageWrapper : ""}>
+        <div
+          className={cx(styles.imageContainer, {
+            [styles.imageGradient]: imageGradient,
+          })}
+        >
           <Image
             src={backgroundImage.url}
             className={styles.image}
             alt={backgroundImage.meta.alt || backgroundImage.title}
-            width={imageWidth}
+            fill
-            height={imageHeight}
+            sizes="(min-width: 1367px) 700px, 900px"
             focalPoint={backgroundImage.focalPoint}
           />
         </div>