Better Swatch Support (#335)

* Better support for swatches

* Better support for swatches

* Fix glitch for Swatch

* Fix glitch for Swatch

* Fix glitch for Swatch

components/product/Swatch/Swatch.tsx

@@ -4,40 +4,44 @@ import s from './Swatch.module.css'
 import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
-interface Props {
+interface SwatchProps {
   active?: boolean
   children?: any
   className?: string
-  label?: string
   variant?: 'size' | 'color' | string
   color?: string
+  label?: string | null
 }
 
-const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
+const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
   className,
   color = '',
-  label,
+  label = null,
   variant = 'size',
   active,
   ...props
 }) => {
   variant = variant?.toLowerCase()
-  label = label?.toLowerCase()
 
-  const rootClassName = cn(
-    s.root,
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length > 3,
     },
     className
   )
 
   return (
     <Button
-      className={rootClassName}
+      className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
       {...props}
@@ -47,7 +51,7 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
           <Check />
         </span>
       )}
-      {variant === 'size' ? label : null}
+      {variant !== 'color' ? label : null}
     </Button>
   )
 }