Add link component, make Button be isomorphic with react-aria

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -5,6 +5,7 @@ import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { useCart } from '@lib/bigcommerce/cart'
 import CartItem from '../CartItem'
+import Link from '@components/ui/Link'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
@@ -60,7 +61,9 @@ const CartSidebarView: FC = () => {
             </ul>
           </div>
           <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-            <Button>Proceed to Checkout</Button>
+            <Button href="/checkout" Component={Link}>
+              Proceed to Checkout
+            </Button>
           </div>
         </>
       )}

components/ui/Button/Button.module.css

@@ -10,7 +10,7 @@
   @apply border-gray-700 shadow-outline;
 }
 
-.root:active {
+.root[data-active] {
   @apply bg-gray-700;
 }
 

components/ui/Button/Button.tsx

@@ -1,5 +1,10 @@
 import cn from 'classnames'
-import React, { ButtonHTMLAttributes } from 'react'
+import React, {
+  ButtonHTMLAttributes,
+  JSXElementConstructor,
+  useRef,
+} from 'react'
+import { useButton } from 'react-aria'
 import s from './Button.module.css'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -8,47 +13,55 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'filled' | 'outlined' | 'flat' | 'none'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
+  Component?: string | JSXElementConstructor<any>
 }
 
-export default class Button extends React.Component<Props> {
-  public render() {
-    const {
-      className,
-      variant = 'filled',
-      children,
-      disabled = false,
-      href,
-      active,
-      ...rest
-    } = this.props
+const Button: React.FC<Props> = (props) => {
+  const {
+    className,
+    variant = 'filled',
+    children,
+    href,
+    active,
+    onClick,
+    disabled,
+    Component = 'button',
+    ...rest
+  } = props
+  const ref = useRef<typeof Component>(null)
+  const { buttonProps, isPressed } = useButton(
+    {
+      ...props,
+      // @ts-ignore onClick === onPress for our purposes
+      onPress: onClick,
+      isDisabled: disabled,
+      elementType: Component,
+    },
+    ref
+  )
 
-    let Component: React.ComponentType<
-      React.AnchorHTMLAttributes<
-        HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
-      > &
-        React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
-    > = 'a' as any
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.filled]: variant === 'filled',
+    },
+    className
+  )
 
-    // Catch for buttons / span / stc.
-
-    const rootClassName = cn(
-      s.root,
-      {
-        [s.filled]: variant === 'filled',
-      },
-      className
-    )
-
-    return (
-      <Component
-        className={rootClassName}
-        href={href}
-        aria-pressed={active}
-        data-variant={variant}
-        {...rest}
-      >
-        {children}
-      </Component>
-    )
-  }
+  return (
+    <Component
+      className={rootClassName}
+      href={href}
+      aria-pressed={active}
+      data-variant={variant}
+      ref={ref}
+      {...rest}
+      {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+    >
+      {children}
+    </Component>
+  )
 }
+
+export default Button

components/ui/Link/Link.tsx

@@ -0,0 +1,11 @@
+import NextLink, { LinkProps as NextLinkProps } from 'next/link'
+
+const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
+  return (
+    <NextLink href={href}>
+      <a {...props}>{children}</a>
+    </NextLink>
+  )
+}
+
+export default Link

components/ui/Link/index.ts

@@ -0,0 +1 @@
+export { default } from './Link'