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

@@ -1,6 +0,0 @@
-.fakeButton {
-  display: flex;
-  align-items: center;
-  border-radius: var(--Corner-radius-rounded);
-  gap: var(--Space-x05);
-}

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

@@ -2,14 +2,14 @@
 
 import { variants } from './variants'
 
-import type { VariantProps } from 'class-variance-authority'
-import type { ComponentProps, PropsWithChildren } from 'react'
-import type { Button } from 'react-aria-components'
+import { cx, type VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'react'
 
 interface FakeButtonProps
-  extends PropsWithChildren,
-    Omit<ComponentProps<typeof Button>, 'children' | 'onPress'>,
-    VariantProps<typeof variants> {}
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
+    VariantProps<typeof variants> {
+  isDisabled?: boolean
+}
 
 export function FakeButton({
   variant,
@@ -18,6 +18,8 @@ export function FakeButton({
   typography,
   children,
   className,
+  isHovered,
+  isDisabled,
   ...props
 }: FakeButtonProps) {
   const classNames = variants({
@@ -25,13 +27,15 @@ export function FakeButton({
     size,
     variant,
     typography,
+    isHovered,
     className,
   })
 
   return (
     <span
-      className={classNames}
-      {...(props as React.HTMLProps<HTMLSpanElement>)}
+      className={cx(classNames)}
+      data-disabled={isDisabled || undefined}
+      {...props}
     >
       {children}
     </span>

packages/design-system/lib/components/FakeButton/variants.ts

@@ -1,6 +1,16 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './fakeButton.module.css'
 import { withButton } from '../Button'
 
-export const variants = cva(styles.fakeButton, withButton({}))
+import buttonStyles from '../Button/button.module.css'
+
+export const variants = cva(
+  buttonStyles.button,
+  withButton({
+    variants: {
+      isHovered: {
+        true: buttonStyles.hovered,
+      },
+    },
+  })
+)