@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/CartItem/CartItem.tsx

@@ -0,0 +1,467 @@
+/********************************************************************
+ *  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 {
+  Button,
+  CartItemSkeleton,
+  Icon,
+  Incrementer,
+  UIContext,
+  ProgressSpinner,
+  Picker,
+} from '@adobe-commerce/elsie/components';
+import { useText } from '@adobe-commerce/elsie/i18n';
+import { Trash } from '@adobe-commerce/elsie/icons';
+
+import '@adobe-commerce/elsie/components/CartItem/CartItem.css';
+
+export interface CartItemProps
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
+  ariaLabel?: string;
+  image?: VNode;
+  title?: VNode;
+  price?: VNode;
+  taxIncluded?: boolean;
+  taxExcluded?: boolean;
+  total?: VNode;
+  totalExcludingTax?: VNode;
+  sku?: VNode;
+  quantity?: number;
+  description?: VNode;
+  attributes?: VNode;
+  footer?: VNode;
+  configurations?: { [key: string]: any };
+  warning?: VNode;
+  alert?: VNode;
+  discount?: VNode;
+  savings?: VNode;
+  actions?: VNode;
+  loading?: boolean;
+  updating?: boolean;
+  onRemove?: () => void;
+  onQuantity?: (value: number) => void;
+  quantityType?: 'stepper' | 'dropdown';
+  dropdownOptions?: { value: string; text: string }[];
+}
+
+export const CartItem: FunctionComponent<CartItemProps> = ({
+                                                             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({
+    each: 'Dropin.CartItem.each.label',
+    pricePerItem: 'Dropin.CartItem.pricePerItem.label',
+    quantity: 'Dropin.CartItem.quantity.label',
+    remove: 'Dropin.CartItem.remove.label',
+    removeDefault: 'Dropin.CartItem.removeDefault.label',
+    taxIncluded: 'Dropin.CartItem.taxIncluded.label',
+    taxExcluded: 'Dropin.CartItem.taxExcluded.label',
+    updating: 'Dropin.CartItem.updating.label',
+    updatingDefault: 'Dropin.ProgressSpinner.updating.label',
+  });
+
+  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}
+          />
+      );
+
+  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',
+                    ])}
+                />
+            )}
+
+            {/* Savings amount */}
+            {savings && (
+                <VComponent
+                    node={savings}
+                    className={classes([
+                      '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}
+                  >
+              {quantity && !onQuantity && (
+                  <>
+                  <span
+                      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>
+                  </>
+              )}
+
+                    <VComponent node={price} role="text" />
+
+                    {quantity && quantity > 1 && (
+                        <>
+                          &nbsp;
+                          {labels.each}
+                        </>
+                    )}
+
+                    {taxIncluded && (
+                        <span
+                            data-testid="tax-message"
+                            className="dropin-cart-item__price-tax-message"
+                        >
+                  &nbsp;
+                          {labels.taxIncluded}
+                </span>
+                    )}
+
+                    {taxExcluded && (
+                        <span
+                            data-testid="tax-message"
+                            className="dropin-cart-item__price-tax-message"
+                        >
+                  &nbsp;
+                          {labels.taxExcluded}
+                </span>
+                    )}
+            </span>
+              )
+          }
+
+          {/* 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'])}
+                >
+                  {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'])}
+              />
+          )}
+
+          {/* 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>
+                  )
+              }
+
+              {taxIncluded && (
+                  <div className="dropin-cart-item__total-tax-included">
+                <span
+                    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">
+              <span
+                  data-testid="tax-message"
+                  className={classes([
+                    'dropin-cart-item__total-tax-excluded-message',
+                  ])}
+              >
+                {totalExcludingTax && (
+                    <VComponent node={totalExcludingTax} role="text" />
+                )}
+                &nbsp;
+                {labels.taxExcluded}
+              </span>
+                </div>
+            )}
+
+            {/* Discount amount */}
+            {discount && (
+                <VComponent
+                    node={discount}
+                    className={classes(['dropin-cart-item__discount'])}
+                />
+            )}
+
+            {/* 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>
+
+        {/* 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>
+  );
+};

package/src/components/CartItem/CartItemSkeleton.tsx

@@ -0,0 +1,38 @@
+/********************************************************************
+ *  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 } from 'preact';
+import { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';
+
+export const CartItemSkeleton: FunctionComponent = () => {
+  return (
+    <div className="dropin-cart-item dropin-cart-item-skeleton">
+      <Skeleton className="dropin-cart-item__skeleton dropin-cart-item__wrapper">
+        <div className="dropin-cart-item__image">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+        <div className="dropin-cart-item__title">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+        <div className="dropin-cart-item__sku">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+        <div className="dropin-cart-item__price">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+        <div className="dropin-cart-item__quantity">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+        <div className="dropin-cart-item__total">
+          <SkeletonRow className="dropin-cart-item__skeleton__item" />
+        </div>
+      </Skeleton>
+    </div>
+  );
+};

package/src/components/CartItem/index.ts

@@ -0,0 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/CartItem/CartItem';
+export * from '@adobe-commerce/elsie/components/CartItem/CartItemSkeleton';
+export { CartItem as default } from '@adobe-commerce/elsie/components/CartItem/CartItem';

package/src/components/CartList/CartList.css

@@ -0,0 +1,35 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-cart-list {
+  container-type: inline-size;
+  container-name: cart-item;
+}
+
+.dropin-cart-list__wrapper {
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-gap: var(--spacing-medium);
+}
+
+/* Large and above */
+@container cart-item (width >= 737px) {
+  .dropin-cart-list__wrapper {
+    grid-gap: 0;
+  }
+
+  .dropin-cart-list__item:not(:last-child)::after {
+    content: '';
+    display: block;
+    border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
+    margin: var(--spacing-medium) 0;
+  }
+}

package/src/components/CartList/CartList.stories.tsx

@@ -0,0 +1,111 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  CartList as component,
+  CartListProps,
+  CartItem,
+  Image,
+  Price,
+} from '@adobe-commerce/elsie/components';
+
+/**
+ * Use CartList to display a list of product items in Cart.
+ */
+const meta: Meta<CartListProps> = {
+  title: 'Components/CartList',
+  component,
+  parameters: {
+    layout: 'padded', // centered | fullscreen
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: 'select',
+        labels: {
+          Products5: '5 Products',
+          Products3: '3 Products',
+          Products1: '1 Product',
+        },
+      },
+      description: 'Items in the list.',
+      options: ['Products5', 'Products3', 'Products1'],
+      mapping: {
+        Products5: renderItems(5),
+        Products3: renderItems(3),
+        Products1: renderItems(1),
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CartListProps>;
+
+/**
+ * ```tsx
+ * <CartList>
+ *  <CartItem .../>
+ * </CartList>
+ * ```
+ */
+export const CartList: Story = {
+  args: {
+    children: 'Products5' as any,
+  },
+  // Flaky storybook smoke test
+  tags: ['skip'],
+};
+
+function renderItems(count: number) {
+  return Array.from({ length: count }, (_, i) => i + 1).map((key) => (
+    <CartItem
+      key={key}
+      image={
+        <Image
+          src="https://picsum.photos/132/184"
+          width="132"
+          height="184"
+          alt="Some alternative text"
+          loading="lazy"
+        />
+      }
+      title={<div>Product Name</div>}
+      description={
+        <div>
+          Secondary product information such as brand name, description, etc.
+        </div>
+      }
+      sku={<div>SKU: 59YK7</div>}
+      quantity={1}
+      price={
+        <span>
+          <Price
+            amount={53.99}
+            style={{ fontWeight: 'inherit', color: 'inherit' }}
+          />
+        </span>
+      }
+      total={
+        <span>
+          <Price amount={59.98} variant="strikethrough" />{' '}
+          <Price amount={55.95} sale />
+        </span>
+      }
+      configurations={{ Color: 'Blue', Size: 'L' }}
+      onRemove={() => {}}
+      onQuantity={() => {}}
+      taxIncluded={true}
+    />
+  ));
+}