Export button props, improve styling of swatches

components/product/ProductView/ProductView.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import s from './ProductView.module.css'
 import { Button } from '@components/ui'
 import { Swatch } from '@components/product'
@@ -24,11 +24,22 @@ interface Props {
   product: Product
 }
 
+interface Choices {
+  size?: string | null
+  color?: string | null
+}
+
 const COLORS: Colors[] = ['pink', 'black', 'white']
+const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
 
 const ProductView: FC<Props> = ({ product, productData, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
+  const [choices, setChoices] = useState<Choices>({
+    size: null,
+    color: null,
+  })
+
   const addToCart = async () => {
     // TODO: loading state by awating the promise
     await addItem({
@@ -38,6 +49,9 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
     openSidebar()
   }
 
+  const activeSize = choices.size
+  const activeColor = choices.color
+
   return (
     <div className={cn(s.root, className)}>
       <div className="absolute">
@@ -48,26 +62,44 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
           {productData.prices}
         </div>
       </div>
-      <div className="flex-1 h-full p-24">
-        <div className="bg-violet h-full"></div>
+      <div className="flex-1 h-48 p-24">
+        <div className="bg-violet h-48"></div>
       </div>
       <div className="flex-1 flex flex-col">
         <section className="pb-4">
           <h2 className="uppercase font-medium">Color</h2>
           <div className="flex flex-row py-4">
-            {COLORS.map((c) => (
-              <Swatch key={c} color={c} />
+            {COLORS.map((color) => (
+              <Swatch
+                key={color}
+                color={color}
+                active={color === activeColor}
+                onClick={() =>
+                  setChoices((choices) => {
+                    return { ...choices, color }
+                  })
+                }
+              />
             ))}
           </div>
         </section>
         <section className="pb-4">
           <h2 className="uppercase font-medium">Size</h2>
           <div className="flex flex-row py-4">
-            <Swatch size="S" />
-            <Swatch size="M" />
-            <Swatch size="L" />
-            <Swatch size="XL" />
-            <Swatch size="XXL" />
+            {SIZES.map((size) => {
+              return (
+                <Swatch
+                  size={size.toUpperCase()}
+                  key={`size-${size}`}
+                  active={size === activeSize}
+                  onClick={() =>
+                    setChoices((choices) => {
+                      return { ...choices, size }
+                    })
+                  }
+                />
+              )
+            })}
           </div>
         </section>
         <section className="pb-12">

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

components/ui/Button/Button.module.css

@@ -1,17 +1,17 @@
 .root {
-  @apply cursor-pointer inline-flex px-10 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center;
+  @apply cursor-pointer inline-flex px-10 rounded-sm leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
 }
 
 .root:hover {
-  @apply bg-white text-black border-black;
+  @apply bg-gray-800;
 }
 
 .root:focus {
-  @apply border-gray-700 shadow-outline;
+  @apply shadow-outline;
 }
 
 .root[data-active] {
-  @apply bg-gray-200;
+  @apply bg-gray-600;
 }
 
 s.filled {

components/ui/Button/Button.tsx

@@ -9,7 +9,7 @@ import mergeRefs from 'react-merge-refs'
 import { useButton } from 'react-aria'
 import s from './Button.module.css'
 
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
   variant?: 'filled' | 'outlined' | 'flat' | 'none'
@@ -18,7 +18,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   Component?: string | JSXElementConstructor<any>
 }
 
-const Button: React.FC<Props> = forwardRef((props, buttonRef) => {
+const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
     variant = 'filled',

components/ui/Button/index.ts

@@ -1 +1,2 @@
 export { default } from './Button'
+export * from './Button'