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} />

apps/scandic-web/components/MeetingPackageWidget/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { useState } from "react"
 import {
-  Button,
+  Button as ButtonRAC,
   Dialog,
   DialogTrigger,
   Modal,
@@ -10,6 +11,7 @@ import {
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -29,6 +31,7 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
   const isDesktop = useMediaQuery("(min-width: 948px)", {
     initializeWithValue: false,
   })
+  const [isHovered, setIsHovered] = useState(false)
 
   return isDesktop ? (
     <MeetingPackageWidgetContent {...props} />
@@ -36,7 +39,11 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
     <div className={props.className}>
       <DialogTrigger>
         <div className={styles.buttonWrapper}>
-          <Button className={styles.button}>
+          <ButtonRAC
+            className={styles.button}
+            onHoverStart={() => setIsHovered(true)}
+            onHoverEnd={() => setIsHovered(false)}
+          >
             <span className={styles.fakeInput}>
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <span>
@@ -55,18 +62,19 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
                 </span>
               </Typography>
             </span>
-            <span className={styles.fakeButton}>
+            <FakeButton
+              variant="Primary"
+              size="Medium"
+              typography="Body/Supporting text (caption)/smBold"
+              isHovered={isHovered}
+            >
               <MaterialIcon icon="search" color="CurrentColor" />
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <span>
-                  {intl.formatMessage({
-                    id: "bookingWidget.button.search",
-                    defaultMessage: "Search",
-                  })}
-                </span>
-              </Typography>
-            </span>
-          </Button>
+              {intl.formatMessage({
+                id: "bookingWidget.button.search",
+                defaultMessage: "Search",
+              })}
+            </FakeButton>
+          </ButtonRAC>
         </div>
         <ModalOverlay isDismissable className={styles.overlay}>
           <Modal className={styles.modal}>

apps/scandic-web/components/MeetingPackageWidget/meetingPackageWidget.module.css

@@ -14,12 +14,6 @@
   background-color: transparent;
   width: 100%;
   cursor: pointer;
-
-  &:hover .fakeButton {
-    background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
-    border-color: var(--Component-Button-Brand-Primary-Border-Hover);
-    color: var(--Component-Button-Brand-Primary-On-fill-Hover);
-  }
 }
 
 .fakeInput {
@@ -35,20 +29,6 @@
   color: var(--Text-Interactive-Placeholder);
 }
 
-.fakeButton {
-  border-radius: var(--Corner-radius-rounded);
-  border-width: 2px;
-  border-style: solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x05);
-  padding: 10px var(--Space-x2);
-  background-color: var(--Component-Button-Brand-Primary-Fill-Default);
-  border-color: var(--Component-Button-Brand-Primary-Border-Default);
-  color: var(--Component-Button-Brand-Primary-On-fill-Default);
-}
-
 .overlay {
   position: fixed;
   inset: 0;