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/hotelCard.module.css

@@ -87,19 +87,13 @@
   width: 100%;
 }
 
-.link: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);
-  }
+.link {
+  text-decoration: none;
+  color: inherit;
 
-  .priceCard {
-    background: linear-gradient(
-      0deg,
-      var(--Surface-Primary-Hover) 0%,
-      var(--Surface-Primary-Hover) 100%
-    );
+  &:focus-visible {
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px;
   }
 }
 
@@ -113,28 +107,6 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.fakeButton {
-  min-width: 160px;
-  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);
-}
-
-.fakeButton.disabled {
-  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
-  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
-  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
-}
-
 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .imageContainer {
     height: 180px;
@@ -178,10 +150,6 @@
     margin-bottom: var(--Space-x15);
   }
 
-  .pageListing .fakeButton {
-    width: 100%;
-  }
-
   .pageListing .prices {
     width: 260px;
   }

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