fix: passing on fill property to fallback image to support text as overlay with position absolute

Approved-by: Bianca Widstam

packages/design-system/lib/components/Image/index.tsx

@@ -45,7 +45,7 @@ export default function Image({
   }
 
   if (!src || imageError) {
-    return <ImageFallback />
+    return <ImageFallback fill={props.fill} />
   }
 
   return (

packages/design-system/lib/components/ImageFallback/imageFallback.module.css

@@ -7,4 +7,8 @@
   min-width: 200px;
   min-height: 200px;
   background-color: var(--Surface-Feedback-Neutral-light);
+
+  &.fill {
+    position: absolute;
+  }
 }

packages/design-system/lib/components/ImageFallback/index.tsx

@@ -6,18 +6,20 @@ import styles from "./imageFallback.module.css"
 interface ImageFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
   width?: string
   height?: string
+  fill?: boolean
 }
 
 export default function ImageFallback({
   width = "100%",
   height = "100%",
   className,
+  fill = false,
   ...props
 }: ImageFallbackProps) {
   return (
     <div
       {...props}
-      className={cx(styles.imageFallback, className)}
+      className={cx(styles.imageFallback, className, { [styles.fill]: fill })}
       style={{ width, height }}
     >
       <MaterialIcon