@adobe-commerce/elsie 1.0.0-alpha4 → 1.0.0-beta1

package/src/components/CartItem/CartItem.tsx

@@ -1,6 +1,15 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useContext } from 'preact/compat';
-import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import {classes, VComponent} from '@adobe-commerce/elsie/lib';
 import {
   Button,
   CartItemSkeleton,
@@ -16,7 +25,7 @@ import { Trash } from '@adobe-commerce/elsie/icons';
 import '@adobe-commerce/elsie/components/CartItem/CartItem.css';
 
 export interface CartItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
   ariaLabel?: string;
   image?: VNode;
   title?: VNode;
@@ -35,6 +44,7 @@ export interface CartItemProps
   alert?: VNode;
   discount?: VNode;
   savings?: VNode;
+  actions?: VNode;
   loading?: boolean;
   updating?: boolean;
   onRemove?: () => void;
@@ -44,34 +54,35 @@ export interface CartItemProps
 }
 
 export const CartItem: FunctionComponent<CartItemProps> = ({
-  className,
-  children,
-  ariaLabel,
-  image,
-  title,
-  price,
-  taxIncluded = false,
-  taxExcluded = false,
-  total,
-  totalExcludingTax,
-  sku,
-  configurations,
-  warning,
-  alert,
-  discount,
-  savings,
-  quantity,
-  description,
-  attributes,
-  footer,
-  loading = false,
-  updating = false,
-  quantityType,
-  dropdownOptions,
-  onQuantity,
-  onRemove,
-  ...props
-}) => {
+                                                             className,
+                                                             children,
+                                                             ariaLabel,
+                                                             image,
+                                                             title,
+                                                             price,
+                                                             taxIncluded = false,
+                                                             taxExcluded = false,
+                                                             total,
+                                                             totalExcludingTax,
+                                                             sku,
+                                                             configurations,
+                                                             warning,
+                                                             alert,
+                                                             discount,
+                                                             savings,
+                                                             actions,
+                                                             quantity,
+                                                             description,
+                                                             attributes,
+                                                             footer,
+                                                             loading = false,
+                                                             updating = false,
+                                                             quantityType,
+                                                             dropdownOptions,
+                                                             onQuantity,
+                                                             onRemove,
+                                                             ...props
+                                                           }) => {
   const { locale } = useContext(UIContext);
 
   const labels = useText({
@@ -89,356 +100,368 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   if (loading) return <CartItemSkeleton />;
 
   const quantityComponent =
-    quantityType === 'dropdown' ? (
-      <Picker
-        className={classes(['dropin-cart-item__quantity__picker'])}
-        value={String(quantity)}
-        name="quantity"
-        aria-label={labels.quantity}
-        disabled={updating}
-        variant={'primary'}
-        options={dropdownOptions}
-        handleSelect={(event) =>
-          onQuantity?.(Number((event.target as HTMLSelectElement).value))
-        }
-      />
-    ) : (
-      <Incrementer
-        className={classes(['dropin-cart-item__quantity__incrementer'])}
-        value={quantity}
-        min={1}
-        onValue={(value) => onQuantity?.(Number(value))}
-        name="quantity"
-        aria-label={labels.quantity}
-        disabled={updating}
-      />
-    );
+      quantityType === 'dropdown' ? (
+          <Picker
+              className={classes(['dropin-cart-item__quantity__picker'])}
+              value={String(quantity)}
+              name="quantity"
+              aria-label={labels.quantity}
+              disabled={updating}
+              variant={'primary'}
+              options={dropdownOptions}
+              handleSelect={(event) =>
+                  onQuantity?.(Number((event.target as HTMLSelectElement).value))
+              }
+          />
+      ) : (
+          <Incrementer
+              className={classes(['dropin-cart-item__quantity__incrementer'])}
+              value={quantity}
+              min={1}
+              onValue={(value) => onQuantity?.(Number(value))}
+              name="quantity"
+              aria-label={labels.quantity}
+              disabled={updating}
+          />
+      );
 
   return (
-    <div
-      {...props}
-      className={classes([
-        'dropin-cart-item',
-        ['dropin-cart-item--updating', updating],
-        className,
-      ])}
-    >
-      {updating && (
-        <ProgressSpinner
-          className={classes(['dropin-cart-item__spinner'])}
-          ariaLabel={
-            ariaLabel
-              ? labels.updating?.replace('{product}', ariaLabel)
-              : labels.updatingDefault
-          }
-        />
-      )}
-      <div className="dropin-cart-item__wrapper">
-        {
-          /* Image */
-          image && (
-            <VComponent
-              node={image}
-              className={classes(['dropin-cart-item__image'])}
-            />
-          )
-        }
-
-        {
-          /* Title */
-          title && (
-            <VComponent
-              node={title}
-              className={classes([
-                'dropin-cart-item__title',
-                ['dropin-cart-item__title--edit', !!onQuantity || !!onRemove],
-              ])}
-            />
-          )
-        }
-
-        {
-          /* Description */
-          description && (
-            <VComponent
-              node={description}
-              className={classes(['dropin-cart-item__description'])}
-            />
-          )
-        }
-
-        {
-          /* SKU */
-          sku && (
-            <VComponent
-              node={sku}
-              className={classes(['dropin-cart-item__sku'])}
-            />
-          )
-        }
-        <div className={classes(['dropin-cart-item__savings__wrapper'])}>
-          {/* Discount amount */}
-          {discount && (
-            <VComponent
-              node={discount}
-              className={classes([
-                'dropin-cart-item__discount',
-                'dropin-cart-item__discount__large-screen',
-              ])}
+      <div
+          {...props}
+          className={classes([
+            'dropin-cart-item',
+            ['dropin-cart-item--updating', updating],
+            className,
+          ])}
+      >
+        {updating && (
+            <ProgressSpinner
+                className={classes(['dropin-cart-item__spinner'])}
+                ariaLabel={
+                  ariaLabel
+                      ? labels.updating?.replace('{product}', ariaLabel)
+                      : labels.updatingDefault
+                }
             />
-          )}
+        )}
+        <div className="dropin-cart-item__wrapper">
+          {
+            /* Image */
+              image && (
+                  <VComponent
+                      node={image}
+                      className={classes(['dropin-cart-item__image'])}
+                  />
+              )
+          }
 
-          {/* Savings amount */}
-          {savings && (
-            <VComponent
-              node={savings}
-              className={classes([
-                'dropin-cart-item__savings',
-                'dropin-cart-item__savings__large-screen',
-              ])}
-            />
-          )}
-        </div>
+          {
+            /* Title */
+              title && (
+                  <VComponent
+                      node={title}
+                      className={classes([
+                        'dropin-cart-item__title',
+                        ['dropin-cart-item__title--edit', !!onQuantity || !!onRemove],
+                      ])}
+                  />
+              )
+          }
 
-        {/* Product Attributes */}
-        {attributes && (
-          <div className={classes(['dropin-cart-item__attributes'])}>
-            <VComponent node={attributes} />
-          </div>
-        )}
+          {
+            /* Description */
+              description && (
+                  <VComponent
+                      node={description}
+                      className={classes(['dropin-cart-item__description'])}
+                  />
+              )
+          }
 
-        {
-          /* Configurations */
-          configurations && (
-            <ul className={classes(['dropin-cart-item__configurations'])}>
-              {Object.entries(configurations).map(([key, value]) => (
-                <li
-                  key={key}
-                  className={classes([
-                    'dropin-cart-item__configurations__item',
-                  ])}
-                >
-                  {key}:{' '}
-                  <strong
+          {
+            /* SKU */
+              sku && (
+                  <VComponent
+                      node={sku}
+                      className={classes(['dropin-cart-item__sku'])}
+                  />
+              )
+          }
+          <div className={classes(['dropin-cart-item__savings__wrapper'])}>
+            {/* Discount amount */}
+            {discount && (
+                <VComponent
+                    node={discount}
+                    className={classes([
+                      'dropin-cart-item__discount',
+                      'dropin-cart-item__discount__large-screen',
+                    ])}
+                />
+            )}
+
+            {/* Savings amount */}
+            {savings && (
+                <VComponent
+                    node={savings}
                     className={classes([
-                      'dropin-cart-item__configurations__item__value',
+                      'dropin-cart-item__savings',
+                      'dropin-cart-item__savings__large-screen',
                     ])}
+                />
+            )}
+          </div>
+
+          {/* Product Attributes */}
+          {attributes && (
+              <div className={classes(['dropin-cart-item__attributes'])}>
+                <VComponent node={attributes} />
+              </div>
+          )}
+
+          {
+            /* Configurations */
+              configurations && (
+                  <ul className={classes(['dropin-cart-item__configurations'])}>
+                    {Object.entries(configurations).map(([key, value]) => (
+                        <li
+                            key={key}
+                            className={classes([
+                              'dropin-cart-item__configurations__item',
+                            ])}
+                        >
+                          {key}:{' '}
+                          <strong
+                              className={classes([
+                                'dropin-cart-item__configurations__item__value',
+                              ])}
+                          >
+                            {value}
+                          </strong>
+                        </li>
+                    ))}
+                  </ul>
+              )
+          }
+
+          {
+            /* Price */
+              price && (
+                  <span
+                      className={classes(['dropin-cart-item__price'])}
+                      aria-label={labels.pricePerItem}
                   >
-                    {value}
-                  </strong>
-                </li>
-              ))}
-            </ul>
-          )
-        }
-
-        {
-          /* Price */
-          price && (
-            <span
-              className={classes(['dropin-cart-item__price'])}
-              aria-label={labels.pricePerItem}
-            >
               {quantity && !onQuantity && (
-                <>
+                  <>
                   <span
-                    className="dropin-cart-item__price__quantity"
-                    aria-hidden={true}
+                      className="dropin-cart-item__price__quantity"
+                      aria-hidden={true}
                   >
                     {quantity.toLocaleString(locale)} x{' '}
                   </span>
 
-                  <div className="dropin-cart-item__sr-only">
-                    {labels.quantity}: {quantity?.toLocaleString(locale)};
-                  </div>
-                </>
+                    <div className="dropin-cart-item__sr-only">
+                      {labels.quantity}: {quantity?.toLocaleString(locale)};
+                    </div>
+                  </>
               )}
 
-              <VComponent node={price} role="text" />
+                    <VComponent node={price} role="text" />
 
-              {quantity && quantity > 1 && (
-                <>
-                  &nbsp;
-                  {labels.each}
-                </>
-              )}
+                    {quantity && quantity > 1 && (
+                        <>
+                          &nbsp;
+                          {labels.each}
+                        </>
+                    )}
 
-              {taxIncluded && (
-                <span
-                  data-testid="tax-message"
-                  className="dropin-cart-item__price-tax-message"
-                >
+                    {taxIncluded && (
+                        <span
+                            data-testid="tax-message"
+                            className="dropin-cart-item__price-tax-message"
+                        >
                   &nbsp;
-                  {labels.taxIncluded}
+                          {labels.taxIncluded}
                 </span>
-              )}
+                    )}
 
-              {taxExcluded && (
-                <span
-                  data-testid="tax-message"
-                  className="dropin-cart-item__price-tax-message"
-                >
+                    {taxExcluded && (
+                        <span
+                            data-testid="tax-message"
+                            className="dropin-cart-item__price-tax-message"
+                        >
                   &nbsp;
-                  {labels.taxExcluded}
+                          {labels.taxExcluded}
                 </span>
-              )}
+                    )}
             </span>
-          )
-        }
+              )
+          }
 
-        {/* Quantity */}
-        <div
-          className={classes([
-            'dropin-cart-item__quantity',
-            ['dropin-cart-item__quantity--edit', !!onQuantity],
-          ])}
-        >
-          {onQuantity
-            ? quantityComponent
-            : quantity && (
+          {/* Quantity */}
+          <div
+              className={classes([
+                'dropin-cart-item__quantity',
+                ['dropin-cart-item__quantity--edit', !!onQuantity],
+              ])}
+          >
+            {onQuantity
+                ? quantityComponent
+                : quantity && (
                 <span
-                  className={classes(['dropin-cart-item__quantity__value'])}
+                    className={classes(['dropin-cart-item__quantity__value'])}
                 >
                   {labels.quantity}:{' '}
                   <strong className="dropin-cart-item__quantity__number">
                     {Number(quantity).toLocaleString(locale)}
                   </strong>
                 </span>
-              )}
+            )}
+
+            {/* Warning */}
+            {warning && (
+                <VComponent
+                    node={warning}
+                    className={classes([
+                      'dropin-cart-item__warning',
+                      'dropin-cart-item__warning--quantity',
+                    ])}
+                />
+            )}
+
+            {/* Alert */}
+            {alert && (
+                <VComponent
+                    node={alert}
+                    className={classes([
+                      'dropin-cart-item__alert',
+                      'dropin-cart-item__alert--quantity',
+                    ])}
+                />
+            )}
+
+          </div>
+
+          <div className={classes(['dropin-cart-item__actions'])}>
+            {/* Actions */}
+            {actions && (
+                <VComponent
+                    node={actions}
+                    className={classes(['dropin-cart-item__buttons'])}
+                />
+            )}
+          </div>
 
           {/* Warning */}
           {warning && (
-            <VComponent
-              node={warning}
-              className={classes([
-                'dropin-cart-item__warning',
-                'dropin-cart-item__warning--quantity',
-              ])}
-            />
+              <VComponent
+                  node={warning}
+                  className={classes(['dropin-cart-item__warning'])}
+              />
           )}
 
           {/* Alert */}
           {alert && (
-            <VComponent
-              node={alert}
-              className={classes([
-                'dropin-cart-item__alert',
-                'dropin-cart-item__alert--quantity',
-              ])}
-            />
+              <VComponent
+                  node={alert}
+                  className={classes(['dropin-cart-item__alert'])}
+              />
           )}
-        </div>
 
-        {/* Warning */}
-        {warning && (
-          <VComponent
-            node={warning}
-            className={classes(['dropin-cart-item__warning'])}
-          />
-        )}
-
-        {/* Alert */}
-        {alert && (
-          <VComponent
-            node={alert}
-            className={classes(['dropin-cart-item__alert'])}
-          />
-        )}
-
-        {/* Total */}
-        <div
-          className={classes([
-            'dropin-cart-item__total',
-            ['dropin-cart-item__total--edit', !!onRemove],
-          ])}
-        >
-          <div className="dropin-cart-item__row-total__wrapper">
-            {
-              /* Total */
-              total && (
-                <div className="dropin-cart-item__row-total">
-                  <VComponent node={total} role="text" />
-                </div>
-              )
-            }
+          {/* Total */}
+          <div
+              className={classes([
+                'dropin-cart-item__total',
+                ['dropin-cart-item__total--edit', !!onRemove],
+              ])}
+          >
+            <div className="dropin-cart-item__row-total__wrapper">
+              {
+                /* Total */
+                  total && (
+                      <div className="dropin-cart-item__row-total">
+                        <VComponent node={total} role="text" />
+                      </div>
+                  )
+              }
 
-            {taxIncluded && (
-              <div className="dropin-cart-item__total-tax-included">
+              {taxIncluded && (
+                  <div className="dropin-cart-item__total-tax-included">
                 <span
-                  data-testid="tax-message"
-                  className={classes(['dropin-cart-item__total-tax-message'])}
+                    data-testid="tax-message"
+                    className={classes(['dropin-cart-item__total-tax-message'])}
                 >
                   {labels.taxIncluded}
                 </span>
-              </div>
-            )}
-          </div>
-          {taxExcluded && (
-            <div className="dropin-cart-item__total-tax-excluded">
+                  </div>
+              )}
+            </div>
+            {taxExcluded && (
+                <div className="dropin-cart-item__total-tax-excluded">
               <span
-                data-testid="tax-message"
-                className={classes([
-                  'dropin-cart-item__total-tax-excluded-message',
-                ])}
+                  data-testid="tax-message"
+                  className={classes([
+                    'dropin-cart-item__total-tax-excluded-message',
+                  ])}
               >
                 {totalExcludingTax && (
-                  <VComponent node={totalExcludingTax} role="text" />
+                    <VComponent node={totalExcludingTax} role="text" />
                 )}
                 &nbsp;
                 {labels.taxExcluded}
               </span>
-            </div>
-          )}
+                </div>
+            )}
 
-          {/* Discount amount */}
-          {discount && (
-            <VComponent
-              node={discount}
-              className={classes(['dropin-cart-item__discount'])}
-            />
-          )}
+            {/* Discount amount */}
+            {discount && (
+                <VComponent
+                    node={discount}
+                    className={classes(['dropin-cart-item__discount'])}
+                />
+            )}
 
-          {/* Savings amount */}
-          {savings && (
-            <VComponent
-              node={savings}
-              className={classes(['dropin-cart-item__savings'])}
-            />
+            {/* Savings amount */}
+            {savings && (
+                <VComponent
+                    node={savings}
+                    className={classes(['dropin-cart-item__savings'])}
+                />
+            )}
+
+          </div>
+
+          {/* Footer */}
+          {footer && (
+              <div className={classes(['dropin-cart-item__footer'])}>
+                <VComponent node={footer} />
+              </div>
           )}
         </div>
 
-        {/* Footer */}
-        {footer && (
-          <div className={classes(['dropin-cart-item__footer'])}>
-            <VComponent node={footer} />
-          </div>
+        {/* Remove Item */}
+        {onRemove && (
+            <Button
+                data-testid="cart-item-remove-button"
+                className={classes(['dropin-cart-item__remove'])}
+                variant="tertiary"
+                onClick={() => onRemove?.()}
+                icon={
+                  <Icon
+                      data-testid="cart-item-remove-icon"
+                      source={Trash}
+                      size="24"
+                      stroke="2"
+                      viewBox="0 0 24 24"
+                      aria-label={
+                        ariaLabel
+                            ? labels.remove?.replace('{product}', ariaLabel)
+                            : labels.removeDefault
+                      }
+                  />
+                }
+                disabled={updating}
+            />
         )}
       </div>
-
-      {/* Remove Item */}
-      {onRemove && (
-        <Button
-          data-testid="cart-item-remove-button"
-          className={classes(['dropin-cart-item__remove'])}
-          variant="tertiary"
-          onClick={() => onRemove?.()}
-          icon={
-            <Icon
-              data-testid="cart-item-remove-icon"
-              source={Trash}
-              size="24"
-              stroke="2"
-              viewBox="0 0 24 24"
-              aria-label={
-                ariaLabel
-                  ? labels.remove?.replace('{product}', ariaLabel)
-                  : labels.removeDefault
-              }
-            />
-          }
-          disabled={updating}
-        />
-      )}
-    </div>
   );
 };