@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/CartItem/CartItem.tsx

@@ -0,0 +1,444 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes, useContext } from 'preact/compat';
+import { classes, VComponent } from '@adobe/elsie/lib';
+import {
+  Button,
+  CartItemSkeleton,
+  Icon,
+  Incrementer,
+  UIContext,
+  ProgressSpinner,
+  Picker,
+} from '@adobe/elsie/components';
+import { useText } from '@adobe/elsie/i18n';
+import { Trash } from '@adobe/elsie/icons';
+
+import '@adobe/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;
+  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,
+  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>
+
+        {/* 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,29 @@
+import { FunctionComponent } from 'preact';
+import { Skeleton, SkeletonRow } from '@adobe/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,3 @@
+export * from '@adobe/elsie/components/CartItem/CartItem';
+export * from '@adobe/elsie/components/CartItem/CartItemSkeleton';
+export { CartItem as default } from '@adobe/elsie/components/CartItem/CartItem';

package/src/components/CartList/CartList.css

@@ -0,0 +1,26 @@
+/* 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,102 @@
+// 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/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}
+    />
+  ));
+}

package/src/components/CartList/CartList.tsx

@@ -0,0 +1,31 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, Children } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+
+import '@adobe/elsie/components/CartList/CartList.css';
+
+export interface CartListProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CartList: FunctionComponent<CartListProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div {...props} className={classes(['dropin-cart-list', className])}>
+      <div
+        className="dropin-cart-list__wrapper"
+        aria-live="assertive"
+        aria-relevant="all"
+      >
+        {Children.map(children, (child, key) => {
+          return (
+            <div key={key} className="dropin-cart-list__item">
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/CartList/index.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/CartList/CartList';
+export { CartList as default } from '@adobe/elsie/components/CartList/CartList';