Export button props, improve styling of swatches

components/product/Swatch/Swatch.module.css

@@ -1,25 +1,29 @@
 .root {
-  @apply h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out;
+  @apply h-12 w-12 bg-white text-black rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
+}
+
+.active.size {
+  @apply border-black;
 }
 
-.active,
 .root:hover {
-  @apply border-gray-700;
+  @apply transform scale-110;
 }
 
 .colorViolet {
-  @apply bg-violet;
+  @apply bg-violet !important;
 }
 
 .colorPink {
-  @apply bg-pink;
+  @apply bg-pink !important;
 }
 
 .colorBlack {
-  @apply bg-black;
+  @apply bg-black !important;
 }
 
 .colorWhite,
 .size {
-  @apply bg-white;
+  @apply bg-white !important;
+  @apply border border-gray-200;
 }

components/product/Swatch/Swatch.tsx

@@ -2,8 +2,9 @@ import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
 import { Colors } from '@components/ui/types'
+import Button, { ButtonProps } from '@components/ui/Button'
 
-interface Props {
+interface Props extends ButtonProps {
   className?: string
   children?: any
   active?: boolean
@@ -11,7 +12,7 @@ interface Props {
   size?: string
 }
 
-const Swatch: FC<Props> = ({ className, size, color, active }) => {
+const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
   const rootClassName = cn(
     s.root,
     {
@@ -24,7 +25,41 @@ const Swatch: FC<Props> = ({ className, size, color, active }) => {
     },
     className
   )
-  return <span className={rootClassName}>{size ? size : null}</span>
+
+  // TODO: technically this is a radio
+
+  return (
+    <Button className={rootClassName} {...props}>
+      {color && active && (
+        <span
+          className={cn('absolute', {
+            'text-white': color !== 'white',
+            'text-black': color === 'white',
+          })}
+        >
+          {Check}
+        </span>
+      )}
+      {size}
+    </Button>
+  )
 }
 
 export default Swatch
+
+const Check = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+  >
+    <path
+      d="M20 6L9 17L4 12"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)