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

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

@@ -1,3 +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.
+ *******************************************************************/
+
 // 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';
@@ -8,7 +17,7 @@ import {
   CartItem as component,
   CartItemProps,
   CartItemSkeleton,
-  Icon,
+  Icon, Button,
 } from '@adobe-commerce/elsie/components';
 import { WarningWithCircle } from '@adobe-commerce/elsie/icons';
 
@@ -34,13 +43,13 @@ const meta: Meta<CartItemProps> = {
       options: ['Image', 'None'],
       mapping: {
         Image: (
-          <Image
-            src="https://picsum.photos/132/184"
-            width="132"
-            height="184"
-            alt="Some alternative text"
-            loading="lazy"
-          />
+            <Image
+                src="https://picsum.photos/132/184"
+                width="132"
+                height="184"
+                alt="Some alternative text"
+                loading="lazy"
+            />
         ),
         None: undefined,
       },
@@ -74,9 +83,9 @@ const meta: Meta<CartItemProps> = {
       options: ['Description', 'None'],
       mapping: {
         Description: (
-          <div>
-            Secondary product information such as brand name, description, etc.
-          </div>
+            <div>
+              Secondary product information such as brand name, description, etc.
+            </div>
         ),
         None: undefined,
       },
@@ -109,12 +118,12 @@ const meta: Meta<CartItemProps> = {
       options: ['Attributes', 'none'],
       mapping: {
         Attributes: (
-          <div>
             <div>
-              Activity: Gym, Hiking, Overnight, School, Trail, Travel, Urban
+              <div>
+                Activity: Gym, Hiking, Overnight, School, Trail, Travel, Urban
+              </div>
+              <div>Material: Nylon, Polyester</div>
             </div>
-            <div>Material: Nylon, Polyester</div>
-          </div>
         ),
         none: undefined,
       },
@@ -161,10 +170,10 @@ const meta: Meta<CartItemProps> = {
       options: ['Total', 'Final', 'None'],
       mapping: {
         Total: (
-          <>
-            <Price amount={59.98} variant="strikethrough" />
-            <Price amount={55.95} sale />
-          </>
+            <>
+              <Price amount={59.98} variant="strikethrough" />
+              <Price amount={55.95} sale />
+            </>
         ),
         Final: <Price amount={55.95} sale />,
         None: undefined,
@@ -183,9 +192,9 @@ const meta: Meta<CartItemProps> = {
       options: ['totalExcludingTax', 'None'],
       mapping: {
         totalExcludingTax: (
-          <>
-            <Price amount={53.99} weight="normal" />
-          </>
+            <>
+              <Price amount={53.99} weight="normal" />
+            </>
         ),
         None: undefined,
       },
@@ -268,9 +277,9 @@ const meta: Meta<CartItemProps> = {
       mapping: {
         none: null,
         RunningOut: (
-          <span>
+            <span>
             <Icon source={WarningWithCircle} size={'16'} aria-hidden={true} />{' '}
-            Out of stock!
+              Out of stock!
           </span>
         ),
       },
@@ -311,6 +320,31 @@ const meta: Meta<CartItemProps> = {
       description: 'Name for the component.',
       table: { defaultValue: { summary: 'null' } },
     },
+    actions: {
+      control: {
+        type: 'select',
+        labels: {
+          Button: 'Button',
+          None: 'None'
+        },
+      },
+      description: 'Wishlist control.',
+      options: ['Button', 'None'],
+      mapping: {
+        Button: (
+            <Button
+                size="medium"
+                type="submit"
+                icon={<Icon source="Heart" />}
+                variant="tertiary"
+            >
+              Move to wishlist
+            </Button>
+        ),
+        None: undefined,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
     footer: {
       control: {
         type: 'check',
@@ -325,19 +359,19 @@ const meta: Meta<CartItemProps> = {
       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>Free Shipping</div>
+              <div>
+                Delivery Estimate
+                <p>Order now for delivery Aug 26 - Aug 28 to ZIP code: 80201</p>
+              </div>
             </div>
-          </div>
         ),
         Returns: (
-          <div>
-            Final-sale items, identified by a price ending in .99 or .97, cannot
-            be canceled or returned.
-          </div>
+            <div>
+              Final-sale items, identified by a price ending in .99 or .97, cannot
+              be canceled or returned.
+            </div>
         ),
       },
       table: { defaultValue: { summary: 'null' } },
@@ -384,6 +418,7 @@ type Story = StoryObj<CartItemProps>;
  *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
  *  discount={<div>50% off</div>}
  *  savings={<div>$25 Savings</div>}
+ *  actions={<div>Wishlist</div>}
  *  configurations={{ Color: 'Blue', Size: 'L' }}
  *  onRemove={() => console.log('onRemove')}
  *  onQuantity={(value) => console.log('onQuantity', value)}
@@ -404,6 +439,7 @@ export const CartItem: Story = {
     description: 'Description' as any,
     discount: 'none' as any,
     savings: 'none' as any,
+    actions: 'Button' as any,
     footer: null as any,
     warning: 'none' as any,
     alert: 'none' as any,
@@ -417,47 +453,51 @@ export const CartItem: Story = {
   },
   play: async () => {
     const canvasElement = document.querySelector(
-      '#storybook-root'
+        '#storybook-root'
     ) as HTMLElement;
     const canvas = within(canvasElement);
 
     const itemImage = document.querySelector(
-      '.dropin-cart-item__image'
+        '.dropin-cart-item__image'
     ) as HTMLElement;
     expect(itemImage).toBeVisible();
     const itemTitle = document.querySelector(
-      '.dropin-cart-item__title'
+        '.dropin-cart-item__title'
     ) as HTMLElement;
     expect(itemTitle).toBeVisible();
     const itemSku = document.querySelector(
-      '.dropin-cart-item__sku'
+        '.dropin-cart-item__sku'
     ) as HTMLElement;
     expect(itemSku).toBeVisible();
     const itemConfigurations = document.querySelector(
-      '.dropin-cart-item__configurations'
+        '.dropin-cart-item__configurations'
     ) as HTMLElement;
     expect(itemConfigurations).toBeVisible();
     const itemPrice = document.querySelector(
-      '.dropin-cart-item__price'
+        '.dropin-cart-item__price'
     ) as HTMLElement;
     expect(itemPrice).toBeVisible();
     const quantityStepper = document.querySelector(
-      '.dropin-cart-item__quantity'
+        '.dropin-cart-item__quantity'
     ) as HTMLElement;
     expect(quantityStepper).toBeVisible();
     const itemTotal = document.querySelector(
-      '.dropin-cart-item__total'
+        '.dropin-cart-item__total'
     ) as HTMLElement;
     expect(itemTotal).toBeVisible();
+    const actions = document.querySelector(
+        '.dropin-cart-item__buttons'
+    ) as HTMLElement;
+    expect(actions).toBeVisible();
 
     const increaseButton = document.querySelector(
-      'button[aria-label="Increase Quantity"]'
+        'button[aria-label="Increase Quantity"]'
     ) as HTMLElement;
     const decreaseButton = document.querySelector(
-      'button[aria-label="Decrease Quantity"]'
+        'button[aria-label="Decrease Quantity"]'
     ) as HTMLElement;
 
-    // Without this wait test failing intermittently as click event is triggerning before even element fully loaded
+    // Without this wait test failing intermittently as click event is triggering before even element fully loaded
     await new Promise((resolve) => setTimeout(resolve, 500));
     await userEvent.click(increaseButton);
     await expect(await canvas.findByDisplayValue('2')).toBeTruthy();