@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/CartItem/CartItem.stories.tsx

@@ -0,0 +1,588 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { expect, within, userEvent } from '@storybook/test';
+
+import {
+  Price,
+  Image,
+  CartItem as component,
+  CartItemProps,
+  CartItemSkeleton,
+  Icon,
+} from '@adobe/elsie/components';
+import { WarningWithCircle } from '@adobe/elsie/icons';
+
+/**
+ * Use CartItems to display a product item in Cart.
+ */
+const meta: Meta<CartItemProps> = {
+  title: 'Components/CartItem',
+  component,
+  parameters: {
+    layout: 'padded', // centered | fullscreen
+  },
+
+  argTypes: {
+    image: {
+      control: {
+        type: 'select',
+        labels: {
+          Image: 'Image',
+        },
+      },
+      description: 'Product image.',
+      options: ['Image', 'None'],
+      mapping: {
+        Image: (
+          <Image
+            src="https://picsum.photos/132/184"
+            width="132"
+            height="184"
+            alt="Some alternative text"
+            loading="lazy"
+          />
+        ),
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    title: {
+      control: {
+        type: 'select',
+        labels: {
+          Short: 'Short Name',
+          Long: 'Long Name',
+        },
+      },
+      description: 'A title of the product.',
+      options: ['Short', 'Long', 'None'],
+      mapping: {
+        Short: <div>Short Name</div>,
+        Long: <div>Product with an extremely extremely long name</div>,
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    description: {
+      control: {
+        type: 'select',
+        labels: {
+          Description: 'Description',
+        },
+      },
+      description: 'Description of the product.',
+      options: ['Description', 'None'],
+      mapping: {
+        Description: (
+          <div>
+            Secondary product information such as brand name, description, etc.
+          </div>
+        ),
+        None: undefined,
+      },
+      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: undefined,
+        Sku: <div>SKU: 59YK7</div>,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    attributes: {
+      control: {
+        type: 'select',
+        labels: {
+          Attributes: 'Attributes',
+        },
+      },
+      description: 'Product attributes.',
+      options: ['Attributes', 'none'],
+      mapping: {
+        Attributes: (
+          <div>
+            <div>
+              Activity: Gym, Hiking, Overnight, School, Trail, Travel, Urban
+            </div>
+            <div>Material: Nylon, Polyester</div>
+          </div>
+        ),
+        none: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    quantity: {
+      control: {
+        type: 'select',
+      },
+      description: 'The quantity of the product.',
+      options: ['1', '3', '10', '100', 'None'],
+      mapping: {
+        1: 1,
+        10: 10,
+        100: 100,
+        None: undefined,
+      },
+      table: { defaultValue: { summary: '1' } },
+    },
+    price: {
+      control: {
+        type: 'select',
+        labels: {
+          Price: 'Item Price',
+        },
+      },
+      description: 'The price of each item.',
+      options: ['Price', 'None'],
+      mapping: {
+        Price: <Price amount={53.99} weight="normal" />,
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    total: {
+      control: {
+        type: 'select',
+        labels: {
+          Total: 'Total',
+          Final: 'Final Only',
+        },
+      },
+      description: 'The total price of the product.',
+      options: ['Total', 'Final', 'None'],
+      mapping: {
+        Total: (
+          <>
+            <Price amount={59.98} variant="strikethrough" />
+            <Price amount={55.95} sale />
+          </>
+        ),
+        Final: <Price amount={55.95} sale />,
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+
+    totalExcludingTax: {
+      control: {
+        type: 'select',
+        labels: {
+          totalExcludingTax: 'totalExcludingTax',
+        },
+      },
+      description: 'The total price excluding tax of the product.',
+      options: ['totalExcludingTax', 'None'],
+      mapping: {
+        totalExcludingTax: (
+          <>
+            <Price amount={53.99} weight="normal" />
+          </>
+        ),
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+
+    taxIncluded: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Render tax included message.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    taxExcluded: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Render tax excluded message.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    configurations: {},
+    discount: {
+      control: {
+        type: 'select',
+        labels: {
+          none: 'none',
+          discount: '50% off',
+        },
+      },
+      description: 'A discount message.',
+      options: ['none', 'discount'],
+      mapping: {
+        none: null,
+        discount: <div>50% off</div>,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    savings: {
+      control: {
+        type: 'select',
+        labels: {
+          none: 'none',
+          savings: '$25 Savings',
+        },
+      },
+      description: 'A savings message.',
+      options: ['none', 'savings'],
+      mapping: {
+        none: null,
+        savings: <div>$25 Savings</div>,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    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' } },
+    },
+    footer: {
+      control: {
+        type: 'check',
+        labels: [
+          'Promotions',
+          'Delivery Terms',
+          'Final Sales and Returns Policy',
+        ],
+      },
+      description: 'Footer content.',
+      options: ['Promotions', 'Delivery', 'Returns'],
+      mapping: {
+        Promotions: <div>Extra 20% Off Clearance with Code: EXTRA20</div>,
+        Delivery: (
+          <div>
+            <div>Free Shipping</div>
+            <div>
+              Delivery Estimate
+              <p>Order now for delivery Aug 26 - Aug 28 to ZIP code: 80201</p>
+            </div>
+          </div>
+        ),
+        Returns: (
+          <div>
+            Final-sale items, identified by a price ending in .99 or .97, cannot
+            be canceled or returned.
+          </div>
+        ),
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    quantityType: {
+      control: {
+        type: 'select',
+      },
+      description: 'Quantity input type.',
+      options: ['stepper', 'dropdown'],
+      table: { defaultValue: { summary: 'stepper' } },
+    },
+    dropdownOptions: {
+      control: {
+        type: 'object',
+      },
+      description: 'Quantity dropdown options.',
+      table: { defaultValue: { summary: 'null' } },
+    },
+  },
+};
+
+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>}
+ *  footer={<div>Extra 20% Off Clearance with Code: EXTRA20</div>}
+ *  sku={<div>SKU: 59YK7</div>}
+ *  attributes={<div>Material: Nylon, Polyester</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>}
+ *  discount={<div>50% off</div>}
+ *  savings={<div>$25 Savings</div>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ *  onRemove={() => console.log('onRemove')}
+ *  onQuantity={(value) => console.log('onQuantity', value)}
+ * />
+ * ```
+ */
+export const CartItem: Story = {
+  args: {
+    ariaLabel: 'Short Name',
+    image: 'Image' as any,
+    title: 'Short' as any,
+    price: 'Price' as any,
+    total: 'Total' as any,
+    totalExcludingTax: 'totalExcludingTax' as any,
+    sku: 'Sku' as any,
+    attributes: 'none' as any,
+    quantity: 1,
+    description: 'Description' as any,
+    discount: 'none' as any,
+    savings: 'none' as any,
+    footer: null as any,
+    warning: 'none' as any,
+    alert: 'none' as any,
+    loading: false,
+    updating: false,
+    configurations: {
+      Color: 'Blue',
+      Size: 'L',
+      Multiple: '1, 2, 3',
+    },
+  },
+  play: async () => {
+    const canvasElement = document.querySelector(
+      '#storybook-root'
+    ) as HTMLElement;
+    const canvas = within(canvasElement);
+
+    const itemImage = document.querySelector(
+      '.dropin-cart-item__image'
+    ) as HTMLElement;
+    expect(itemImage).toBeVisible();
+    const itemTitle = document.querySelector(
+      '.dropin-cart-item__title'
+    ) as HTMLElement;
+    expect(itemTitle).toBeVisible();
+    const itemSku = document.querySelector(
+      '.dropin-cart-item__sku'
+    ) as HTMLElement;
+    expect(itemSku).toBeVisible();
+    const itemConfigurations = document.querySelector(
+      '.dropin-cart-item__configurations'
+    ) as HTMLElement;
+    expect(itemConfigurations).toBeVisible();
+    const itemPrice = document.querySelector(
+      '.dropin-cart-item__price'
+    ) as HTMLElement;
+    expect(itemPrice).toBeVisible();
+    const quantityStepper = document.querySelector(
+      '.dropin-cart-item__quantity'
+    ) as HTMLElement;
+    expect(quantityStepper).toBeVisible();
+    const itemTotal = document.querySelector(
+      '.dropin-cart-item__total'
+    ) as HTMLElement;
+    expect(itemTotal).toBeVisible();
+
+    const increaseButton = document.querySelector(
+      'button[aria-label="Increase Quantity"]'
+    ) as HTMLElement;
+    const decreaseButton = document.querySelector(
+      'button[aria-label="Decrease Quantity"]'
+    ) as HTMLElement;
+
+    // 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>}
+ *  footer={<div>Extra 20% Off Clearance with Code: EXTRA20</div>}
+ *  sku={<div>SKU: 59YK7</div>}
+ *  attributes={<div>Material: Nylon, Polyester</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>}
+ *  discount={<div>50% off</div>}
+ *  savings={<div>$25 Savings</div>}
+ *  configurations={{ Color: 'Blue', Size: 'L' }}
+ * />
+ * ```
+ */
+export const ReadOnly: Story = {
+  args: {
+    ariaLabel: 'Short Name',
+    image: 'Image' as any,
+    title: 'Short' as any,
+    price: 'Price' as any,
+    total: 'Total' as any,
+    sku: 'Sku' as any,
+    attributes: 'none' as any,
+    quantity: 1,
+    description: 'Description' as any,
+    footer: null as any,
+    warning: 'none' as any,
+    alert: 'none' as any,
+    discount: 'none' as any,
+    savings: 'none' as any,
+    loading: false,
+    updating: false,
+    configurations: {
+      Color: 'Blue',
+      Size: 'L',
+    },
+    onQuantity: undefined,
+    onRemove: undefined,
+    taxExcluded: false,
+    totalExcludingTax: <Price amount={53.99} weight="normal" />,
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <CartItemSkeleton />,
+};
+
+/**
+ * ```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>}
+ *  discount={<div>50% off</div>}
+ *  savings={<div>$25 Savings</div>}
+ *  configurations={{ Color: 'Blue', Size: 'L', Multiple: '1, 2, 3' }}
+ *  quantityType="dropdown"
+ *  dropdownOptions={[
+ *   { value: '1', text: '1' },
+ *   { value: '2', text: '2' },
+ *   { value: '3', text: '3' },
+ *  ]}
+ *  onRemove={() => console.log('onRemove')}
+ *  onQuantity={(value) => console.log('onQuantity', value)}
+ * />
+ * ```
+ */
+
+export const DropdownQuantity: Story = {
+  args: {
+    ariaLabel: 'Short Name',
+    image: 'Image' as any,
+    title: 'Short' as any,
+    price: 'Price' as any,
+    total: 'Total' as any,
+    totalExcludingTax: 'totalExcludingTax' as any,
+    sku: 'Sku' as any,
+    quantity: 1,
+    description: 'Description' as any,
+    discount: 'none' as any,
+    savings: 'none' as any,
+    footer: null as any,
+    warning: 'none' as any,
+    alert: 'none' as any,
+    loading: false,
+    updating: false,
+    configurations: {
+      Color: 'Blue',
+      Size: 'L',
+      Multiple: '1, 2, 3',
+    },
+    dropdownOptions: [
+      { value: '1', text: '1' },
+      { value: '2', text: '2' },
+      { value: '3', text: '3' },
+    ],
+    quantityType: 'dropdown',
+  },
+};