From 1d33b6a0cd9e8513675b43b16fb3c6b570a74fdd Mon Sep 17 00:00:00 2001
From: cond0r <pinte_catalin@yahoo.com>
Date: Fri, 28 May 2021 10:54:48 +0300
Subject: [PATCH] Update swatch

---
 components/product/Swatch/Swatch.module.css | 10 ++++++++--
 components/product/Swatch/Swatch.tsx        | 12 +++++++-----
 framework/shopify/utils/normalize.ts        | 10 +++++++---
 lib/colors.ts                               |  4 +++-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 051435afd..289163ea4 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -1,8 +1,10 @@
 .root {
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border;
+   shadow-none border-gray-200 border box-border;
+
+  min-width: 3em;
 
   & > span {
     @apply absolute;
@@ -13,6 +15,10 @@
   }
 }
 
+.size {
+  @apply px-3;
+}
+
 .color {
   @apply text-black transition duration-150 ease-in-out;
 
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index c38803b5b..b6de8fad3 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -21,14 +21,14 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   active,
   ...props
 }) => {
-  variant = variant?.toLowerCase()
   label = label?.toLowerCase()
+  const isColor = color !== ''
 
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
-      [s.size]: variant === 'size',
+      [s.size]: !isColor,
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
     },
@@ -38,16 +38,18 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   return (
     <Button
       className={rootClassName}
-      style={color ? { backgroundColor: color } : {}}
+      style={isColor ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(isColor && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {isColor ? (
         <span>
           <Check />
         </span>
+      ) : (
+        label
       )}
-      {variant !== 'color' ? label : null}
     </Button>
   )
 }
diff --git a/framework/shopify/utils/normalize.ts b/framework/shopify/utils/normalize.ts
index 9fdc73f96..3d4a49976 100644
--- a/framework/shopify/utils/normalize.ts
+++ b/framework/shopify/utils/normalize.ts
@@ -16,6 +16,7 @@ import {
 import type { Cart, LineItem } from '../types'
 
 import type { Page } from '../common/get-all-pages'
+import { colorMap } from '@lib/colors'
 
 const money = ({ amount, currencyCode }: MoneyV2) => {
   return {
@@ -38,9 +39,12 @@ const normalizeProductOption = ({
         label: value,
       }
       if (displayName.match(/colou?r/gi)) {
-        output = {
-          ...output,
-          hexColors: [value],
+        const mapedColor = colorMap[value]
+        if (mapedColor) {
+          output = {
+            ...output,
+            hexColors: [mapedColor],
+          }
         }
       }
 
diff --git a/lib/colors.ts b/lib/colors.ts
index 139cda23d..3013de956 100644
--- a/lib/colors.ts
+++ b/lib/colors.ts
@@ -42,7 +42,7 @@ function hexToRgb(hex: string = '') {
   return [r, g, b]
 }
 
-const colorMap: Record<string, string> = {
+export const colorMap: Record<string, string> = {
   aliceblue: '#F0F8FF',
   antiquewhite: '#FAEBD7',
   aqua: '#00FFFF',
@@ -56,6 +56,8 @@ const colorMap: Record<string, string> = {
   blueviolet: '#8A2BE2',
   brown: '#A52A2A',
   burlywood: '#DEB887',
+  burgandy: '#800020',
+  burgundy: '#800020',
   cadetblue: '#5F9EA0',
   chartreuse: '#7FFF00',
   chocolate: '#D2691E',