Update QuantitySelector

buildheadless · Dec 20, 2023 · 19feef6 · 19feef6
1 parent 98ac991
commit 19feef6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/templates/hydrogen-theme/app/components/QuantitySelector.tsx b/templates/hydrogen-theme/app/components/QuantitySelector.tsx
@@ -6,7 +6,7 @@ export function QuantitySelector(props: {children: React.ReactNode}) {
   );
 }
 
-export function QuantitySelectorButton(
+function Button(
   props: {
     children?: React.ReactNode;
     variant: 'decrease' | 'increase';
@@ -46,8 +46,11 @@ export function QuantitySelectorButton(
   );
 }
 
-export function QuantitySelectorValue(props: {children: React.ReactNode}) {
+function Value(props: {children: React.ReactNode}) {
   return (
     <div className="min-w-[2.5rem] px-2 text-center">{props.children}</div>
   );
 }
+
+QuantitySelector.Button = Button;
+QuantitySelector.Value = Value;
diff --git a/templates/hydrogen-theme/app/components/cart/CartLineItem.tsx b/templates/hydrogen-theme/app/components/cart/CartLineItem.tsx
@@ -16,11 +16,7 @@ import {cx} from 'class-variance-authority';
 
 import {useLocalePath} from '~/hooks/useLocalePath';
 
-import {
-  QuantitySelector,
-  QuantitySelectorButton,
-  QuantitySelectorValue,
-} from '../QuantitySelector';
+import {QuantitySelector} from '../QuantitySelector';
 import {IconRemove} from '../icons/IconRemove';
 
 type OptimisticData = {
@@ -183,7 +179,7 @@ function CartLineQuantityAdjust({line}: {line: CartLine}) {
       </label>
       <QuantitySelector>
         <UpdateCartForm lines={[{id: lineId, quantity: prevQuantity}]}>
-          <QuantitySelectorButton
+          <QuantitySelector.Button
             disabled={optimisticQuantity <= 1}
             value={prevQuantity}
             variant="decrease"
@@ -192,16 +188,16 @@ function CartLineQuantityAdjust({line}: {line: CartLine}) {
               data={{quantity: prevQuantity}}
               id={optimisticId}
             />
-          </QuantitySelectorButton>
+          </QuantitySelector.Button>
         </UpdateCartForm>
-        <QuantitySelectorValue>{optimisticQuantity}</QuantitySelectorValue>
+        <QuantitySelector.Value>{optimisticQuantity}</QuantitySelector.Value>
         <UpdateCartForm lines={[{id: lineId, quantity: nextQuantity}]}>
-          <QuantitySelectorButton value={nextQuantity} variant="increase">
+          <QuantitySelector.Button value={nextQuantity} variant="increase">
             <OptimisticInput
               data={{quantity: nextQuantity}}
               id={optimisticId}
             />
-          </QuantitySelectorButton>
+          </QuantitySelector.Button>
         </UpdateCartForm>
       </QuantitySelector>
     </>

diff --git a/templates/hydrogen-theme/app/components/product/AddToCartForm.tsx b/templates/hydrogen-theme/app/components/product/AddToCartForm.tsx
@@ -10,11 +10,7 @@ import {useEnvironmentVariables} from '~/hooks/useEnvironmentVariables';
 import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {useSelectedVariant} from '~/hooks/useSelectedVariant';
 
-import {
-  QuantitySelector,
-  QuantitySelectorButton,
-  QuantitySelectorValue,
-} from '../QuantitySelector';
+import {QuantitySelector} from '../QuantitySelector';
 import CleanString from '../sanity/CleanString';
 
 export function AddToCartForm(props: {
@@ -35,13 +31,13 @@ export function AddToCartForm(props: {
         {showQuantitySelector && (
           <div className="flex">
             <QuantitySelector>
-              <QuantitySelectorButton
+              <QuantitySelector.Button
                 disabled={isOutOfStock || quantity === 1}
                 onClick={() => setQuantity(quantity - 1)}
                 variant="decrease"
               />
-              <QuantitySelectorValue>{quantity}</QuantitySelectorValue>
-              <QuantitySelectorButton
+              <QuantitySelector.Value>{quantity}</QuantitySelector.Value>
+              <QuantitySelector.Button
                 disabled={isOutOfStock}
                 onClick={() => setQuantity(quantity + 1)}
                 variant="increase"