Merge branch 'master' of https://github.com/vercel/commerce into shopify-i18n

README.md

@@ -50,7 +50,7 @@ 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"],

commerce.config.json

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

components/product/Swatch/Swatch.module.css

@@ -1,39 +1,52 @@
-.root {
+.swatch {
+  box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
+  @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
-   shadow-none border-gray-200 border box-border;
-
-  min-width: 3em;
-
-  & > span {
-    @apply absolute;
+  p-0 shadow-none border-gray-200 border box-border;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
 }
 
-  &:hover {
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
+
+.swatch:hover {
   @apply transform scale-110 bg-hover;
 }
-}
 
-.size {
-  @apply px-3;
+.swatch > span {
+  @apply absolute;
 }
 
 .color {
   @apply text-black transition duration-150 ease-in-out;
+}
 
-  &:hover {
+.color :hover {
   @apply text-black;
 }
 
-  &.dark,
-  &.dark:hover {
+.color.dark,
+.color.dark:hover {
   color: white !important;
 }
-}
 
 .active {
-  &.size {
   @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,52 +4,54 @@ 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
 }) => {
-  label = label?.toLowerCase()
-  const isColor = color !== ''
+  variant = variant?.toLowerCase()
 
-  const rootClassName = cn(
-    s.root,
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
     {
       [s.active]: active,
-      [s.size]: !isColor,
+      [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}
-      style={isColor ? { backgroundColor: color } : {}}
+      className={swatchClassName}
+      style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
-      {...(isColor && { title: label })}
       {...props}
     >
-      {isColor ? (
+      {variant === 'color' && active && (
         <span>
           <Check />
         </span>
-      ) : (
-        label
       )}
+      {variant !== 'color' ? label : null}
     </Button>
   )
 }