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