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