@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/CartItem/CartItem.d.ts

@@ -0,0 +1,25 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+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;
+    total: VNode;
+    sku: VNode;
+    quantity?: number;
+    description?: VNode;
+    configurations?: {
+        [key: string]: any;
+    };
+    warning?: VNode;
+    alert?: VNode;
+    loading?: boolean;
+    updating?: boolean;
+    onRemove?: () => void;
+    onQuantity?: (value: number) => void;
+}
+export declare const CartItem: FunctionComponent<CartItemProps>;
+//# sourceMappingURL=CartItem.d.ts.map

package/components/CartItem/CartItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItem.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAc,MAAM,eAAe,CAAC;AAa3D,OAAO,+CAA+C,CAAC;AAEvD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACxC,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA+OrD,CAAC"}

package/components/CartItem/CartItem.jsx

@@ -0,0 +1,124 @@
+import { useContext } from 'preact/compat';
+import { classes, VComponent } from '@adobe/elsie/lib';
+import { Button, CartItemSkeleton, Icon, Incrementer, UIContext, ProgressSpinner, } from '@adobe/elsie/components';
+import { useText } from '@adobe/elsie/i18n';
+import { Trash } from '@adobe/elsie/icons';
+import '@adobe/elsie/components/CartItem/CartItem.css';
+export const CartItem = ({ className, children, ariaLabel, image, title, price, taxIncluded = false, total, sku, configurations, warning, alert, quantity = 1, description, loading = false, updating = false, onQuantity, onRemove, ...props }) => {
+    const { locale } = useContext(UIContext);
+    const labels = useText({
+        each: 'Dropin.CartItem.each.label',
+        quantity: 'Dropin.CartItem.quantity.label',
+        remove: 'Dropin.CartItem.remove.label',
+        removeDefault: 'Dropin.CartItem.removeDefault.label',
+        taxIncluded: 'Dropin.CartItem.taxIncluded.label',
+        updating: 'Dropin.CartItem.updating.label',
+        updatingDefault: 'Dropin.ProgressSpinner.updating.label',
+    });
+    if (loading)
+        return <CartItemSkeleton />;
+    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 */}
+        <VComponent node={image} className={classes(['dropin-cart-item__image'])}/>
+
+        {/* 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 */}
+        <VComponent node={sku} className={classes(['dropin-cart-item__sku'])}/>
+        {/* 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 */}
+        <span className={classes(['dropin-cart-item__price'])}>
+          {!onQuantity && (<span className="dropin-cart-item__price__quantity">
+              {quantity.toLocaleString(locale)} x{' '}
+            </span>)}
+
+          <VComponent node={price} role="text"/>
+
+          {quantity > 1 && (<>
+              &nbsp;
+              {labels.each}
+            </>)}
+
+          {taxIncluded && (<span data-testid="tax-message" className="dropin-cart-item__price-tax-message">
+              &nbsp;
+              {labels.taxIncluded}
+            </span>)}
+        </span>
+
+        {/* Quantity */}
+        <div className={classes([
+            'dropin-cart-item__quantity',
+            ['dropin-cart-item__quantity--edit', !!onQuantity],
+        ])}>
+          {onQuantity ? (<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}/>) : (<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],
+        ])}>
+          <VComponent node={total} role="text"/>
+
+          {taxIncluded && (<span data-testid="tax-message" className={classes(['dropin-cart-item__total-tax-message'])}>
+              &nbsp;
+              {labels.taxIncluded}
+            </span>)}
+        </div>
+      </div>
+
+      {/* Remove Item */}
+      {onRemove && (<Button className={classes(['dropin-cart-item__remove'])} variant="tertiary" onClick={() => onRemove?.()} icon={<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/components/CartItem/CartItem.stories.d.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { CartItemProps } from '@adobe/elsie/components';
+/**
+ * Use CartItems to display a product item in Cart.
+ */
+declare const meta: Meta<CartItemProps>;
+export default meta;
+type Story = StoryObj<CartItemProps>;
+/**
+ * ```tsx
+ * <CartItem
+ *  ariaLabel="Short Name"
+ *  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={<Price amount={53.99} weight="normal" />}
+ *  total={<>
+ *    <Price amount={59.98} variant="strikethrough" />
+ *    <Price amount={55.95} sale />
+ *  </>}
+ *  warning={<span> Only 5 left!</span>}
+ *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ *  onRemove={() => console.log('onRemove')}
+ *  onQuantity={(value) => console.log('onQuantity', value)}
+ * />
+ * ```
+ */
+export declare const CartItem: Story;
+/**
+ * ```tsx
+ * <CartItem
+ *  ariaLabel="Short Name"
+ *  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={<Price amount={53.99} weight="normal" />}
+ *  total={<>
+ *    <Price amount={59.98} variant="strikethrough" />
+ *    <Price amount={55.95} sale />
+ *  </>}
+ *  warning={<span> Only 5 left!</span>}
+ *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ * />
+ * ```
+ */
+export declare const ReadOnly: Story;
+export declare const Skeleton: Story;
+//# sourceMappingURL=CartItem.stories.d.ts.map

package/components/CartItem/CartItem.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItem.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAIL,aAAa,EAGd,MAAM,yBAAyB,CAAC;AAGjC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAyM7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/components/CartItem/CartItem.stories.jsx

@@ -0,0 +1,309 @@
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { Price, Image, CartItem as component, CartItemSkeleton, Icon, } from '@adobe/elsie/components';
+import { WarningWithCircle } from '@adobe/elsie/icons';
+/**
+ * Use CartItems to display a product item in Cart.
+ */
+const meta = {
+    title: 'Components/CartItem',
+    component,
+    parameters: {
+        layout: 'padded', // centered | fullscreen
+    },
+    argTypes: {
+        image: {
+            control: {
+                type: 'select',
+                labels: {
+                    Image: 'Image',
+                },
+            },
+            description: 'Product image.',
+            options: ['Image'],
+            mapping: {
+                Image: (<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy"/>),
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        title: {
+            control: {
+                type: 'select',
+                labels: {
+                    Short: 'Short Name',
+                    Long: 'Long Name',
+                },
+            },
+            description: 'A title of the product.',
+            options: ['Short', 'Long'],
+            mapping: {
+                Short: <div>Short Name</div>,
+                Long: <div>Product with an extremely extremely long name</div>,
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        description: {
+            control: {
+                type: 'select',
+                labels: {
+                    Description: 'Description',
+                },
+            },
+            description: 'Description of the product.',
+            options: ['Description'],
+            mapping: {
+                Description: (<div>
+            Secondary product information such as brand name, description, etc.
+          </div>),
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        sku: {
+            control: {
+                type: 'select',
+                labels: {
+                    none: 'none',
+                    Sku: 'SKU: 59YK7',
+                },
+            },
+            description: 'A sku of the product.',
+            options: ['none', 'Sku'],
+            mapping: {
+                none: null,
+                Sku: <div>SKU: 59YK7</div>,
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        quantity: {
+            control: {
+                type: 'number',
+            },
+            description: 'The quantity of the product.',
+            table: { defaultValue: { summary: '1' } },
+        },
+        price: {
+            control: {
+                type: 'select',
+                labels: {
+                    Price: 'Item Price',
+                },
+            },
+            description: 'The price of each item.',
+            options: ['Price'],
+            mapping: {
+                Price: <Price amount={53.99} weight="normal"/>,
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        total: {
+            control: {
+                type: 'select',
+                labels: {
+                    Total: 'Total',
+                },
+            },
+            description: 'The total price of the product.',
+            options: ['Total'],
+            mapping: {
+                Total: (<>
+            <Price amount={59.98} variant="strikethrough"/>
+            <Price amount={55.95} sale/>
+          </>),
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        taxIncluded: {
+            control: {
+                type: 'boolean',
+            },
+            description: 'Render tax included message.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        configurations: {},
+        warning: {
+            control: {
+                type: 'select',
+                labels: {
+                    none: 'none',
+                    RunningOut: 'Only 1 left in stock',
+                },
+            },
+            description: 'A warning message.',
+            options: ['none', 'RunningOut'],
+            mapping: {
+                none: null,
+                RunningOut: <span> Only 5 left!</span>,
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        alert: {
+            control: {
+                type: 'select',
+                labels: {
+                    none: 'none',
+                    RunningOut: 'Out of stock',
+                },
+            },
+            description: 'Alert message.',
+            options: ['none', 'RunningOut'],
+            mapping: {
+                none: null,
+                RunningOut: (<span>
+            <Icon source={WarningWithCircle} size={'16'} aria-hidden={true}/>{' '}
+            Out of stock!
+          </span>),
+            },
+            table: { defaultValue: { summary: 'null' } },
+        },
+        loading: {
+            control: {
+                type: 'boolean',
+            },
+            description: 'Loading state.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        updating: {
+            control: {
+                type: 'boolean',
+            },
+            description: 'Updating state.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        onQuantity: {
+            description: 'Quantity update handler.',
+            table: {
+                type: { summary: 'function' },
+            },
+            action: 'onQuantity',
+        },
+        onRemove: {
+            description: 'Add a remove handler.',
+            table: {
+                type: { summary: 'function' },
+            },
+            action: 'onRemove',
+        },
+        ariaLabel: {
+            control: {
+                type: 'text',
+            },
+            description: 'Name for the component.',
+            table: { defaultValue: { summary: 'null' } },
+        },
+    },
+};
+export default meta;
+/**
+ * ```tsx
+ * <CartItem
+ *  ariaLabel="Short Name"
+ *  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={<Price amount={53.99} weight="normal" />}
+ *  total={<>
+ *    <Price amount={59.98} variant="strikethrough" />
+ *    <Price amount={55.95} sale />
+ *  </>}
+ *  warning={<span> Only 5 left!</span>}
+ *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ *  onRemove={() => console.log('onRemove')}
+ *  onQuantity={(value) => console.log('onQuantity', value)}
+ * />
+ * ```
+ */
+export const CartItem = {
+    args: {
+        ariaLabel: 'Short Name',
+        image: 'Image',
+        title: 'Short',
+        price: 'Price',
+        total: 'Total',
+        sku: 'Sku',
+        quantity: 1,
+        description: 'Description',
+        warning: 'none',
+        alert: 'none',
+        loading: false,
+        updating: false,
+        configurations: {
+            Color: 'Blue',
+            Size: 'L',
+            Multiple: '1, 2, 3',
+        },
+    },
+    play: async () => {
+        const canvasElement = document.querySelector('#storybook-root');
+        const canvas = within(canvasElement);
+        const itemImage = document.querySelector('.dropin-cart-item__image');
+        expect(itemImage).toBeVisible();
+        const itemTitle = document.querySelector('.dropin-cart-item__title');
+        expect(itemTitle).toBeVisible();
+        const itemSku = document.querySelector('.dropin-cart-item__sku');
+        expect(itemSku).toBeVisible();
+        const itemConfigurations = document.querySelector('.dropin-cart-item__configurations');
+        expect(itemConfigurations).toBeVisible();
+        const itemPrice = document.querySelector('.dropin-cart-item__price');
+        expect(itemPrice).toBeVisible();
+        const quantityStepper = document.querySelector('.dropin-cart-item__quantity');
+        expect(quantityStepper).toBeVisible();
+        const itemTotal = document.querySelector('.dropin-cart-item__total');
+        expect(itemTotal).toBeVisible();
+        const increaseButton = document.querySelector('button[aria-label="Increase Quantity"]');
+        const decreaseButton = document.querySelector('button[aria-label="Decrease Quantity"]');
+        // Without this wait test failing intermittently as click event is triggerning before even element fully loaded
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('2')).toBeTruthy();
+        await userEvent.click(decreaseButton);
+        await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+    },
+};
+/**
+ * ```tsx
+ * <CartItem
+ *  ariaLabel="Short Name"
+ *  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={<Price amount={53.99} weight="normal" />}
+ *  total={<>
+ *    <Price amount={59.98} variant="strikethrough" />
+ *    <Price amount={55.95} sale />
+ *  </>}
+ *  warning={<span> Only 5 left!</span>}
+ *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ * />
+ * ```
+ */
+export const ReadOnly = {
+    args: {
+        ariaLabel: 'Short Name',
+        image: 'Image',
+        title: 'Short',
+        price: 'Price',
+        total: 'Total',
+        sku: 'Sku',
+        quantity: 1,
+        description: 'Description',
+        warning: 'none',
+        alert: 'none',
+        loading: false,
+        updating: false,
+        configurations: {
+            Color: 'Blue',
+            Size: 'L',
+        },
+        onQuantity: undefined,
+        onRemove: undefined,
+    },
+};
+export const Skeleton = {
+    render: () => <CartItemSkeleton />,
+};

package/components/CartItem/CartItem.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=CartItem.test.d.ts.map

package/components/CartItem/CartItem.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItem.test.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItem.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}

package/components/CartItem/CartItem.test.jsx

@@ -0,0 +1,71 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { fireEvent, render, screen } from '@adobe/elsie/lib/tests';
+import { CartItem } from '@adobe/elsie/components/CartItem';
+jest.useFakeTimers();
+describe('Base/Components/CartItem', () => {
+    test('renders', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>}/>);
+        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item\\"><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
+    });
+    test('renders with configurations', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} configurations={{ Color: 'Blue', size: 'L' }}/>);
+        const $configurations = container.querySelector('.dropin-cart-item__configurations');
+        expect($configurations?.innerHTML).toMatchInlineSnapshot(`"<li class=\\"dropin-cart-item__configurations__item\\">Color: <strong class=\\"dropin-cart-item__configurations__item__value\\">Blue</strong></li><li class=\\"dropin-cart-item__configurations__item\\">size: <strong class=\\"dropin-cart-item__configurations__item__value\\">L</strong></li>"`);
+    });
+    test('renders with description', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} description={<div>Description</div>}/>);
+        const $description = container.querySelector('.dropin-cart-item__description');
+        expect($description?.innerHTML).toMatchInlineSnapshot(`"Description"`);
+    });
+    test('onQuantity', () => {
+        const onQuantity = jest.fn();
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} onQuantity={onQuantity}/>);
+        const increase = container.querySelector('.dropin-incrementer__increase-button');
+        expect(increase).toBeTruthy();
+        fireEvent.click(increase);
+        jest.runAllTimers();
+        expect(onQuantity).toHaveBeenCalledWith(2);
+    });
+    test('onRemove', () => {
+        const onRemove = jest.fn();
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} onRemove={onRemove}/>);
+        const remove = container.querySelector('.dropin-cart-item__remove');
+        expect(remove).toBeTruthy();
+        fireEvent.click(remove);
+        expect(onRemove).toHaveBeenCalled();
+    });
+    test('renders with warning', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} warning={<span>warning</span>}/>);
+        const $warning = container.querySelectorAll('.dropin-cart-item__warning');
+        expect($warning.length).toBe(2);
+        expect($warning[0]?.innerHTML).toMatchInlineSnapshot(`"warning"`);
+    });
+    test('renders with alert', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} alert={<span>alert</span>}/>);
+        const $alert = container.querySelectorAll('.dropin-cart-item__alert');
+        expect($alert.length).toBe(2);
+        expect($alert[0]?.innerHTML).toMatchInlineSnapshot(`"alert"`);
+    });
+    test('renders skeleton', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} warning={<span>warning</span>} loading/>);
+        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item dropin-cart-item-skeleton\\"><div style=\\"--row-gap-spacing: var(--spacing-medium);\\" role=\\"status\\" aria-label=\\"Loading...\\" class=\\"dropin-skeleton dropin-cart-item__skeleton dropin-cart-item__wrapper\\"><div class=\\"dropin-cart-item__image\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__title\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__sku\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__price\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__quantity\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__total\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div></div></div></div>"`);
+    });
+    test('renders messages with taxIncluded', () => {
+        render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} taxIncluded/>);
+        const $taxIncluded = screen.getAllByTestId('tax-message');
+        expect($taxIncluded.length).toBe(2);
+    });
+    test('renders "each" label', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} quantity={2}/>);
+        const $each = container.querySelector('.dropin-cart-item__price');
+        expect($each?.innerHTML).toMatchInlineSnapshot(`"<span class=\\"dropin-cart-item__price__quantity\\">2 x </span><div role=\\"text\\">$9.99</div>&nbsp;each"`);
+    });
+    test('renders progress spinner when updating', () => {
+        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} updating/>);
+        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item dropin-cart-item--updating\\"><div aria-live=\\"polite\\" role=\\"status\\" aria-label=\\"Item is updating\\" class=\\"dropin-cart-item__spinner dropin-progress-spinner dropin-progress-spinner--shape-size-small dropin-progress-spinner--shape-stroke-4\\"></div><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
+    });
+    test('renders with aria-label', () => {
+        const { container } = render(<CartItem ariaLabel={'Cart Item'} image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>}/>);
+        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item\\"><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
+    });
+});

package/components/CartItem/CartItemSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'preact';
+export declare const CartItemSkeleton: FunctionComponent;
+//# sourceMappingURL=CartItemSkeleton.d.ts.map

package/components/CartItem/CartItemSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItemSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItemSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,eAAO,MAAM,gBAAgB,EAAE,iBAyB9B,CAAC"}

package/components/CartItem/CartItemSkeleton.jsx

@@ -0,0 +1,25 @@
+import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
+export const CartItemSkeleton = () => {
+    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/components/CartItem/CartItemSkeleton.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=CartItemSkeleton.test.d.ts.map

package/components/CartItem/CartItemSkeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItemSkeleton.test.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItemSkeleton.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}