feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -3,6 +3,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
@@ -42,14 +43,18 @@ export default async function HotelListingItem({
 
   return (
     <article className={styles.container}>
-      <Image
-        src={image.src}
-        alt={image.altText || image.altText_En}
-        width={400}
-        height={300}
-        sizes="(min-width: 768px) 400px, 100vw"
-        className={styles.image}
-      />
+      {image?.src ? (
+        <Image
+          src={image.src}
+          alt={image.altText || image.altText_En}
+          width={400}
+          height={300}
+          sizes="(min-width: 768px) 400px, 100vw"
+          className={styles.image}
+        />
+      ) : (
+        <ImageFallback className={styles.image} />
+      )}
       <section className={styles.content}>
         <div className={styles.intro}>
           <HotelLogoIcon hotelId={id} hotelType={hotelType} />