Better Swatch Support (#335)

* Better support for swatches

* Better support for swatches

* Fix glitch for Swatch

* Fix glitch for Swatch

* Fix glitch for Swatch

README.md

@@ -50,7 +50,8 @@ NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
 NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
 ```
 
-And change the `tsconfig.json` to resolve to the chosen provider:
+And check that the `tsconfig.json` resolves to the chosen provider:
+
 ```
   "@framework": ["framework/shopify"],
   "@framework/*": ["framework/shopify/*"]

commerce.config.json

@@ -1,6 +1,5 @@
 {
   "features": {
-    "wishlist": true,
-    "customCheckout": false
+    "wishlist": true
   }
 }

components/product/Swatch/Swatch.module.css

@@ -1,33 +1,52 @@
-.root {
+.swatch {
+  box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
   @apply h-12 w-12 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;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
+}
 
-  & > span {
-    @apply absolute;
-  }
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
 
-  &:hover {
-    @apply transform scale-110 bg-hover;
-  }
+.swatch:hover {
+  @apply transform scale-110 bg-hover;
+}
+
+.swatch > span {
+  @apply absolute;
 }
 
 .color {
   @apply text-black transition duration-150 ease-in-out;
+}
 
-  &:hover {
-    @apply text-black;
-  }
+.color :hover {
+  @apply text-black;
+}
 
-  &.dark,
-  &.dark:hover {
-    color: white !important;
-  }
+.color.dark,
+.color.dark:hover {
+  color: white !important;
 }
 
 .active {
-  &.size {
-    @apply border-accents-9 border-2;
-  }
+  @apply border-accents-9 border-2;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.textLabel {
+  @apply w-auto px-4;
+  min-width: 3rem;
+}
+
+.active.textLabel {
+  @apply border-accents-9 border-2;
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(1rem - 1px);
 }

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

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/vendure"],
-      "@framework/*": ["framework/vendure/*"]
+      "@framework": ["framework/bigcommerce"],
+      "@framework/*": ["framework/bigcommerce/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],