From b03c0df369238d18fccf72ca4b65af57e1b2cbf2 Mon Sep 17 00:00:00 2001
From: okbel <curciobel@gmail.com>
Date: Fri, 28 May 2021 09:16:50 -0300
Subject: [PATCH] Better support for swatches

---
 commerce.config.json                        | 3 +--
 components/product/Swatch/Swatch.module.css | 4 ++++
 components/product/Swatch/Swatch.tsx        | 6 ++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/commerce.config.json b/commerce.config.json
index 08ea78814..a0e7afc5d 100644
--- a/commerce.config.json
+++ b/commerce.config.json
@@ -1,6 +1,5 @@
 {
   "features": {
-    "wishlist": true,
-    "customCheckout": false
+    "wishlist": true
   }
 }
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 051435afd..d4e1b6b13 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -31,3 +31,7 @@
     @apply border-accents-9 border-2;
   }
 }
+
+.wrapper {
+  @apply w-auto px-4;
+}
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 34244321f..cb3adc137 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -37,7 +37,9 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
 
   return (
     <Button
-      className={rootClassName}
+      className={cn(rootClassName, {
+        [s.wrapper]: !color,
+      })}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
       {...props}
@@ -47,7 +49,7 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
           <Check />
         </span>
       )}
-      {variant === 'size' ? label : null}
+      {variant !== 'color' ? label : null}
     </Button>
   )
 }