Feat/BOOK-63 hotel subpages branding

* feat(BOOK-63): Replaced css variables and components to apply hotel branding on subpages
* feat(BOOK-63): Replaced css variables and components to apply hotel branding on hotel page map view

Approved-by: Christel Westerberg
Approved-by: Matilda Landström

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

@@ -4,7 +4,7 @@ import NextImage, { ImageProps as NextImageProps } from 'next/image'
 
 import ImageFallback from '../ImageFallback'
 
-import type { CSSProperties } from 'react'
+import { useState, type CSSProperties, type SyntheticEvent } from 'react'
 import { imageLoader } from './imageLoader'
 
 type FocalPoint = {
@@ -22,8 +22,11 @@ export default function Image({
   focalPoint,
   dimensions,
   style,
+  src,
+  onError,
   ...props
 }: ImageProps) {
+  const [imageError, setImageError] = useState(false)
   const styles: CSSProperties = focalPoint
     ? {
         objectFit: 'cover',
@@ -32,14 +35,24 @@ export default function Image({
       }
     : { ...style }
 
-  if (!props.src) {
+  function handleError(error: SyntheticEvent<HTMLImageElement, Event>) {
+    if (onError) {
+      onError(error)
+    } else {
+      setImageError(true)
+    }
+  }
+
+  if (!src || imageError) {
     return <ImageFallback />
   }
 
   return (
     <NextImage
       {...props}
+      src={src}
       style={styles}
+      onError={handleError}
       loader={imageLoader({ dimensions, focalPoint })}
     />
   )