@adobe-commerce/elsie 1.4.0-beta5 → 1.4.0-beta6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.0-beta5",
+  "version": "1.4.0-beta6",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/CartItem/CartItem.tsx

@@ -36,6 +36,7 @@ export interface CartItemProps
   totalExcludingTax?: VNode;
   sku?: VNode;
   quantity?: number;
+  quantityContent?: VNode;
   description?: VNode;
   attributes?: VNode;
   footer?: VNode;
@@ -45,6 +46,7 @@ export interface CartItemProps
   discount?: VNode;
   savings?: VNode;
   actions?: VNode;
+  removeContent?: VNode;
   loading?: boolean;
   updating?: boolean;
   onRemove?: () => void;
@@ -71,7 +73,9 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   discount,
   savings,
   actions,
+  removeContent,
   quantity,
+  quantityContent,
   description,
   attributes,
   footer,
@@ -304,18 +308,20 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
             ['dropin-cart-item__quantity--edit', !!onQuantity],
           ])}
         >
-          {onQuantity
-            ? quantityComponent
-            : quantity && (
-                <span
-                  className={classes(['dropin-cart-item__quantity__value'])}
-                >
-                  {labels.quantity}:{' '}
-                  <strong className="dropin-cart-item__quantity__number">
-                    {Number(quantity).toLocaleString(locale)}
-                  </strong>
-                </span>
-              )}
+          {quantityContent ? (
+            <VComponent node={quantityContent} />
+          ) : onQuantity ? (
+            quantityComponent
+          ) : (
+            quantity && (
+              <span className={classes(['dropin-cart-item__quantity__value'])}>
+                {labels.quantity}:{' '}
+                <strong className="dropin-cart-item__quantity__number">
+                  {Number(quantity).toLocaleString(locale)}
+                </strong>
+              </span>
+            )
+          )}
 
           {/* Warning */}
           {warning && (
@@ -432,12 +438,17 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
 
         {/* Footer */}
         {footer && (
-            <VComponent node={footer} className={classes(['dropin-cart-item__footer'])} />
+          <VComponent
+            node={footer}
+            className={classes(['dropin-cart-item__footer'])}
+          />
         )}
       </div>
 
       {/* Remove Item */}
-      {onRemove && (
+      {removeContent ? (
+        <VComponent node={removeContent} />
+      ) : onRemove ? (
         <Button
           data-testid="cart-item-remove-button"
           className={classes(['dropin-cart-item__remove'])}
@@ -459,7 +470,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
           }
           disabled={updating}
         />
-      )}
+      ) : null}
     </div>
   );
 };