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

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { cx } from 'class-variance-authority'
+import NextLink from 'next/link'
 import { type ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
 import { memo, useState } from 'react'
 import { useFocusWithin } from 'react-aria'
@@ -35,6 +35,7 @@ import { HotelType } from '@scandic-hotels/common/constants/hotelType'
 import type { Lang } from '@scandic-hotels/common/constants/language'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
 import { BookingCodeChip } from '../BookingCodeChip'
+import { FakeButton } from '../FakeButton'
 import { TripAdvisorChip } from '../TripAdvisorChip'
 
 type Price = {
@@ -147,6 +148,7 @@ export const HotelCardComponent = memo(
   }: HotelCardProps) => {
     const searchParams = useSearchParams()
     const [isFocusWithin, setIsFocusWithin] = useState(false)
+    const [isPricesHovered, setIsPricesHovered] = useState(false)
     const { focusWithinProps } = useFocusWithin({
       onFocusWithin: onFocusIn,
       onBlurWithin: onFocusOut,
@@ -295,6 +297,8 @@ export const HotelCardComponent = memo(
             hotelId={hotel.id}
             removeBookingCodeFromSearchParams={!!(bookingCode && fullPrice)}
             searchParams={searchParams}
+            onHoverStart={() => setIsPricesHovered(true)}
+            onHoverEnd={() => setIsPricesHovered(false)}
           >
             {!prices ? (
               <NoPriceAvailableCard />
@@ -358,24 +362,20 @@ export const HotelCardComponent = memo(
                     ))}
                   </div>
                 ) : null}
-                {isDisabled ? (
-                  <div className={cx(styles.fakeButton, styles.disabled)}>
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <span>{notEnoughPointsLabel}</span>
-                    </Typography>
-                  </div>
-                ) : (
-                  <div className={styles.fakeButton}>
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <span>
-                        {intl.formatMessage({
-                          id: 'common.seeRooms',
-                          defaultMessage: 'See rooms',
-                        })}
-                      </span>
-                    </Typography>
-                  </div>
-                )}
+                <FakeButton
+                  variant="Primary"
+                  size="Medium"
+                  isDisabled={!!isDisabled}
+                  typography="Body/Paragraph/mdBold"
+                  isHovered={isPricesHovered}
+                >
+                  {isDisabled
+                    ? notEnoughPointsLabel
+                    : intl.formatMessage({
+                        id: 'common.seeRooms',
+                        defaultMessage: 'See rooms',
+                      })}
+                </FakeButton>
               </>
             )}
           </PricesWrapper>
@@ -396,6 +396,8 @@ interface PricesWrapperProps {
   pathname: string
   removeBookingCodeFromSearchParams: boolean
   searchParams: ReadonlyURLSearchParams
+  onHoverStart: () => void
+  onHoverEnd: () => void
 }
 function PricesWrapper({
   children,
@@ -404,6 +406,8 @@ function PricesWrapper({
   pathname,
   removeBookingCodeFromSearchParams,
   searchParams,
+  onHoverStart,
+  onHoverEnd,
 }: PricesWrapperProps) {
   const content = <div className={styles.prices}>{children}</div>
 
@@ -422,8 +426,13 @@ function PricesWrapper({
   const href = `${pathname}?${params.toString()}`
 
   return (
-    <Link href={href} color="none" className={styles.link}>
+    <NextLink
+      href={href}
+      className={styles.link}
+      onMouseEnter={onHoverStart}
+      onMouseLeave={onHoverEnd}
+    >
       {content}
-    </Link>
+    </NextLink>
   )
 }