@hanzo/commerce 1.1.8 → 1.1.10

package/components/add-to-cart-widget.tsx

@@ -13,6 +13,7 @@ const AddToCartWidget: React.FC<{
   ghost?: boolean
   disabled?: boolean
   className?: string
+  buttonClx?: string
   isMobile?: boolean
   wide?: boolean
   size?: ButtonSizes
@@ -21,11 +22,12 @@ const AddToCartWidget: React.FC<{
   ghost=false,
   disabled=false,
   className='',
+  buttonClx='',
   size='xs'
 }) => {
 
-  const iconClx = ghost ? 'h-3 w-3 text-muted-3 hover:text-foreground' : 'h-5 w-5 mr-1'
-  const digitClx = ghost ? 'px-1' : 'px-2 font-bold '
+  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-5 mr-1'
+  const digitClx = ghost ? 'px-2 md:px-0.5' : 'sm:px-2 font-bold '
 
   if (disabled) {
     return (
@@ -42,7 +44,7 @@ const AddToCartWidget: React.FC<{
         size={size}
         variant={ghost ? 'ghost' : 'secondary'}
         rounded={ghost ? 'full' : 'xl'}
-        className='px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-end'
+        className={cn('px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-end', buttonClx)}
         key='left'
         onClick={item.decrement.bind(item)}
       >
@@ -58,7 +60,7 @@ const AddToCartWidget: React.FC<{
         size={size}
         variant={ghost ? 'ghost' : 'secondary'}
         rounded={ghost ? 'full' : 'xl'}
-        className='px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-start'
+        className={cn('px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-start', buttonClx)}
         onClick={item.increment.bind(item)}
         key='right'
       >
@@ -71,7 +73,7 @@ const AddToCartWidget: React.FC<{
       size={size}
       variant='secondary'
       rounded='xl'
-      className={className}
+      className={cn(buttonClx, className)}
       onClick={item.increment.bind(item)}
     >
       <Icons.plus className='h-5 w-5 mr-1' aria-hidden='true'/>

package/components/cart-line-item.tsx

@@ -10,6 +10,14 @@ import { formatPrice } from '../util'
 
 const IMG_SIZE=40
 
+const renderTitle = (t: string): React.ReactNode => {
+  const toks = t.split(', ')
+  if (toks.length === 2) {
+    return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>
+  }
+  return <p>{t}</p>
+}
+
 const CartLineItem: React.FC<{
   item: LineItem
   className?: string
@@ -23,21 +31,22 @@ const CartLineItem: React.FC<{
   const imgSize = (isMobile) ? IMG_SIZE * 0.65 : IMG_SIZE
 
   return (
-    <div className='flex flex-row justify-between items-center gap-2 sm:gap-4'>
-    {!!item.img ? (
-      <Image src={item.img} alt={item.title + ' image'} height={imgSize} width={imgSize} className='self-start'/>
-    ) : (
-      <div style={{height: imgSize, width: imgSize}}/ >
-    )}
-      <div className={cn('text-sm font-sans grow', className)} >
-        <div className=''>{item.title}</div>
-        <div className='flex flex-row items-center justify-between'>
-          <div className='flex flex-row items-center'>
-            <AddToCartWidget isMobile={isMobile} className='mr-2' item={item} ghost/>{item.quantity > 1 && '@' + formatPrice(item.price)}
-          </div>
-          <div className='flex flex-row items-center justify-end'>
-            {formatPrice(item.price * item.quantity)}
-          </div>
+    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
+      <div className='flex flex-row justify-between items-center gap-2'>
+      {!!item.img ? (
+        <Image src={item.img} alt={item.title + ' image'} height={imgSize} width={imgSize} className=''/>
+      ) : (
+        <div style={{height: imgSize, width: imgSize}}/ >
+      )}
+        <div className='grow leading-tight'>{renderTitle(item.title)}</div>
+      </div>
+      <div className='flex flex-row items-center justify-between w-full'>
+        <div className='flex flex-row items-center'>
+          <AddToCartWidget isMobile={isMobile} className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
+          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatPrice(item.price)}</span>)}
+        </div>
+        <div className='flex flex-row items-center justify-end'>
+          {formatPrice(item.price * item.quantity)}
         </div>
       </div>
     </div>

package/components/cart.tsx

@@ -28,14 +28,16 @@ const Cart: React.FC<PropsWithChildren & {
   const auth = useAuth()
   
   return (
-    <div className={cn('border p-6 rounded-lg', className)}>
+    <div className={cn('border p-4 rounded-lg', className)}>
       {children}
       <div className='mt-2'>
-        {!!children && <div className='h-[1px] w-pr-80 mb-3 mx-auto bg-muted-3'/>}
+        {!!children && <div className='h-[1px] w-pr-80 mb-4 mx-auto bg-muted-3'/>}
       {cmmc.cartItems.length === 0 ? (
         <p className='text-center mt-4'>No items in cart</p>
       ) : (<>
-        {cmmc.cartItems.map((item, i) => (<CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-4 sm:mb-2'/>))}
+        {cmmc.cartItems.map((item, i) => (
+          <CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-2 md:mb-3'/>
+        ))}
         <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
       </>)}
       </div>

package/components/facet-toggles-widget/facet-image.tsx

@@ -11,29 +11,42 @@ const FacetImage: React.FC<{
 }> = ({
   facetValueDesc
 }) => {
-  if (!facetValueDesc.img) {
+  const {
+    img,
+    imgAR: ar,
+    label
+  } = facetValueDesc
+
+
+  if (!img) {
     return null
   }
-  const isURL = typeof facetValueDesc.img === 'string'
+  const isURL = typeof img === 'string'
   if (isURL) {
     return (
       <Image 
-        src={facetValueDesc.img as string} 
-        alt={`Toggle ${facetValueDesc.label}`} 
-        className={'block mr-1 aspect-square rounded border border-muted-2'}
-        width={ICON_SIZE}
+        src={img as string} 
+        alt={`Toggle ${label}`} 
+        className={'block mr-1 rounded border border-muted-2 ' + (ar ? '' : 'aspect-square')} 
+        width={ar ?  ar * ICON_SIZE : ICON_SIZE}
         height={ICON_SIZE}
       />
     )
   }
+
+    // Otherwise, assume it's a ReactNode of an imported SVG
+
+    // If it's not square, center it in the appropriate dimension
   const svgStyle: any = { position: 'relative' }
-  if (facetValueDesc.imgAR && facetValueDesc.imgAR < 1) {
-    const w = ICON_SIZE * SVG_MULT
-    svgStyle.top = (( 1 / facetValueDesc.imgAR - 1) * w) / 2
-  }
-  else if (facetValueDesc.imgAR && facetValueDesc.imgAR > 1) {
-    const h = ICON_SIZE * SVG_MULT
-    svgStyle.left = (((1 - facetValueDesc.imgAR) * h) / 2)
+  if (ar) {
+    if (ar < 1) {
+      const w = ICON_SIZE * SVG_MULT
+      svgStyle.top = (( 1 / ar - 1) * w) / 2
+    }
+    else if (ar > 1) {
+      const h = ICON_SIZE * SVG_MULT
+      svgStyle.left = (((1 - ar) * h) / 2)
+    }
   }
 
   return (

package/components/facet-toggles-widget/index.tsx

@@ -75,7 +75,7 @@ const FacetTogglesWidget: React.FC<{
         >
           <span className={cn('flex flex-row justify-center gap-1 h-4 items-center')} >
             <FacetImage facetValueDesc={fv} />
-            <span className='whitespace-nowrap'>{fv.label}</span>
+            {(!isMobile || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
           </span>
         </ToggleGroupItem>
       )

package/components/facets-widget.tsx

@@ -17,6 +17,7 @@ const FacetsWidget: React.FC<PropsWithChildren & {
   id?: string
   className?: string
   tabSize?: string 
+  childrenAfter?: boolean
 }> = ({
   children,
   facets,
@@ -27,11 +28,13 @@ const FacetsWidget: React.FC<PropsWithChildren & {
   isMobile=false,
   className='',
   tabSize,
-  id='FacetsWidget'
+  id='FacetsWidget',
+  childrenAfter=true
 }) => {
   const horiz = className.includes('flex-row')
   return (
     <div id={id} className={className} >
+    {!childrenAfter && children}
     {Object.keys(facets).map((key, i) => (
       <FacetTogglesWidget 
         key={i}
@@ -44,7 +47,7 @@ const FacetsWidget: React.FC<PropsWithChildren & {
         tabSize={tabSize}
       />
     ))}
-      {children}
+      {childrenAfter && children}
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",