@adobe-commerce/elsie 1.7.0-beta1 → 1.7.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.7.0-beta1",
+  "version": "1.7.0-beta3",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/CartItem/CartItem.css

@@ -276,6 +276,13 @@
   color: var(--color-neutral-800);
 }
 
+.dropin-cart-item__row-total-footer {
+  margin-top: var(--spacing-xsmall);
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
 .dropin-cart-item__total-tax-message {
   margin-left: var(--spacing-xxsmall);
 }

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

@@ -17,7 +17,8 @@ import {
   CartItem as component,
   CartItemProps,
   CartItemSkeleton,
-  Icon, Button,
+  Icon,
+  Button,
 } from '@adobe-commerce/elsie/components';
 import { WarningWithCircle } from '@adobe-commerce/elsie/icons';
 
@@ -43,13 +44,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,
       },
@@ -83,9 +84,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,
       },
@@ -118,12 +119,12 @@ const meta: Meta<CartItemProps> = {
       options: ['Attributes', 'none'],
       mapping: {
         Attributes: (
+          <div>
             <div>
-              <div>
-                Activity: Gym, Hiking, Overnight, School, Trail, Travel, Urban
-              </div>
-              <div>Material: Nylon, Polyester</div>
+              Activity: Gym, Hiking, Overnight, School, Trail, Travel, Urban
             </div>
+            <div>Material: Nylon, Polyester</div>
+          </div>
         ),
         none: undefined,
       },
@@ -170,10 +171,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,
@@ -192,9 +193,9 @@ const meta: Meta<CartItemProps> = {
       options: ['totalExcludingTax', 'None'],
       mapping: {
         totalExcludingTax: (
-            <>
-              <Price amount={53.99} weight="normal" />
-            </>
+          <>
+            <Price amount={53.99} weight="normal" />
+          </>
         ),
         None: undefined,
       },
@@ -277,9 +278,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>
         ),
       },
@@ -325,26 +326,42 @@ const meta: Meta<CartItemProps> = {
         type: 'select',
         labels: {
           Button: 'Button',
-          None: 'None'
+          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>
+          <Button
+            size="medium"
+            type="submit"
+            icon={<Icon source="Heart" />}
+            variant="tertiary"
+          >
+            Move to wishlist
+          </Button>
         ),
         None: undefined,
       },
       table: { defaultValue: { summary: 'null' } },
     },
+    rowTotalFooter: {
+      control: {
+        type: 'check',
+        labels: ['Super Offer Badge'],
+      },
+      description: 'Content displayed right below the total row price.',
+      options: ['SuperOffer'],
+      mapping: {
+        SuperOffer: (
+          <div style={{ color: 'var(--color-alert-800)', fontWeight: 'bold' }}>
+            Super offer
+          </div>
+        ),
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
     footer: {
       control: {
         type: 'check',
@@ -354,24 +371,24 @@ const meta: Meta<CartItemProps> = {
           'Final Sales and Returns Policy',
         ],
       },
-      description: 'Footer content.',
+      description: 'Footer content displayed at the bottom of the cart item.',
       options: ['Promotions', 'Delivery', 'Returns'],
       mapping: {
         Promotions: <div>Extra 20% Off Clearance with Code: EXTRA20</div>,
         Delivery: (
+          <div>
+            <div>Free Shipping</div>
             <div>
-              <div>Free Shipping</div>
-              <div>
-                Delivery Estimate
-                <p>Order now for delivery Aug 26 - Aug 28 to ZIP code: 80201</p>
-              </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>
+          <div>
+            Final-sale items, identified by a price ending in .99 or .97, cannot
+            be canceled or returned.
+          </div>
         ),
       },
       table: { defaultValue: { summary: 'null' } },
@@ -440,7 +457,6 @@ export const CartItem: Story = {
     discount: 'none' as any,
     savings: 'none' as any,
     actions: 'Button' as any,
-    footer: null as any,
     warning: 'none' as any,
     alert: 'none' as any,
     loading: false,
@@ -453,48 +469,48 @@ 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'
+      '.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 triggering before even element fully loaded
@@ -542,7 +558,6 @@ export const ReadOnly: Story = {
     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,
@@ -608,7 +623,6 @@ export const DropdownQuantity: Story = {
     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,
@@ -626,3 +640,34 @@ export const DropdownQuantity: Story = {
     quantityType: 'dropdown',
   },
 };
+
+export const WithPromotionalBadge: Story = {
+  args: {
+    ariaLabel: 'Short Name',
+    image: 'Image' as any,
+    title: 'Short' as any,
+    price: 'Price' as any,
+    rowTotalFooter: 'SuperOffer' as any,
+    total: 'Final' as any,
+    sku: 'Sku' as any,
+    quantity: 1,
+    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',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // Verify row total footer is rendered below the total
+    const rowTotalFooter = canvasElement.querySelector(
+      '.dropin-cart-item__row-total-footer'
+    ) as HTMLElement;
+    expect(rowTotalFooter).toBeTruthy();
+    expect(rowTotalFooter?.textContent).toContain('Super offer');
+  },
+};

package/src/components/CartItem/CartItem.tsx

@@ -30,6 +30,7 @@ export interface CartItemProps
   image?: VNode;
   title?: VNode;
   price?: VNode;
+  rowTotalFooter?: VNode;
   taxIncluded?: boolean;
   taxExcluded?: boolean;
   total?: VNode;
@@ -62,6 +63,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   image,
   title,
   price,
+  rowTotalFooter,
   taxIncluded = false,
   taxExcluded = false,
   total,
@@ -434,6 +436,14 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
               className={classes(['dropin-cart-item__savings'])}
             />
           )}
+
+          {/* Row Total Footer */}
+          {rowTotalFooter && (
+            <VComponent
+              node={rowTotalFooter}
+              className={classes(['dropin-cart-item__row-total-footer'])}
+            />
+          )}
         </div>
 
         {/* Footer */}

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

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -67,6 +67,12 @@ export const CartList: Story = {
   tags: ['skip'],
 };
 
+export const WithPromotionalBadges: Story = {
+  args: {
+    children: renderItemsWithPromos(3),
+  },
+};
+
 function renderItems(count: number) {
   return Array.from({ length: count }, (_, i) => i + 1).map((key) => (
     <CartItem
@@ -109,3 +115,60 @@ function renderItems(count: number) {
     />
   ));
 }
+
+function renderItemsWithPromos(count: number) {
+  return Array.from({ length: count }, (_, i) => i + 1).map((key) => {
+    // Show promo badge on first and third items as an example
+    const showPromo = key === 1 || key === 3;
+
+    return (
+      <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 {key}</div>}
+        description={
+          <div>
+            Secondary product information such as brand name, description, etc.
+          </div>
+        }
+        sku={<div>SKU: 59YK{key}</div>}
+        quantity={1}
+        price={
+          <span>
+            <Price
+              amount={53.99}
+              style={{ fontWeight: 'inherit', color: 'inherit' }}
+            />
+          </span>
+        }
+        rowTotalFooter={
+          showPromo ? (
+            <div
+              style={{ color: 'var(--color-alert-800)', fontWeight: 'bold' }}
+            >
+              Super offer
+            </div>
+          ) : undefined
+        }
+        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/Picker/Picker.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -316,3 +316,21 @@ export const MandatoryFieldFloatingLabelWithValue: Story = {
     ],
   },
 };
+
+export const SingleOption: Story = {
+  name: 'Single option',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    defaultOption: {
+      value: 'option1',
+      text: 'Only Option',
+    },
+    options: [
+      {
+        value: 'option1',
+        text: 'Only Option',
+      },
+    ],
+  },
+};

package/src/components/Picker/Picker.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
@@ -74,6 +74,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
 }) => {
   const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
+  const isDisabled = disabled || options?.length === 1;
 
   // find the first option that is not disabled
   const firstAvailableOption = options?.find((option) => !option.disabled);
@@ -143,7 +144,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
         ['dropin-picker__floating', !!floatingLabel],
         ['dropin-picker__selected', isSelected],
         ['dropin-picker__error', error],
-        ['dropin-picker__disabled', disabled],
+        ['dropin-picker__disabled', isDisabled],
         ['dropin-picker__icon', icon],
       ])}
     >
@@ -165,7 +166,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
         ])}
         name={name}
         aria-label={name}
-        disabled={disabled}
+        disabled={isDisabled}
         onChange={handleOptionClick}
         {...props}
       >

package/src/components/RadioButton/RadioButton.css

@@ -2,9 +2,9 @@
  *  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. 
+ * 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 */
@@ -64,6 +64,11 @@
   box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
 }
 
+.dropin-radio-button__icon {
+  margin-right: var(--spacing-xsmall);
+  flex-shrink: 0;
+}
+
 .dropin-radio-button__description {
   clear: both;
   color: var(--color-neutral-700);

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -14,6 +14,7 @@ import {
   RadioButtonProps,
 } from '@adobe-commerce/elsie/components/RadioButton';
 import { expect, userEvent, within } from '@storybook/test';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
 
 /**
  * Use Radio Buttons to let users select one option from a set of mutually exclusive choices.
@@ -91,6 +92,15 @@ const meta: Meta<RadioButtonProps> = {
         name: 'boolean',
       },
     },
+    icon: {
+      description:
+        'Optional icon to display before the label (SVG or img element)',
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: {
+        type: 'select',
+      },
+    },
   },
 };
 
@@ -124,3 +134,27 @@ export const RadioButtonStory: Story = {
     await expect(radioButton).toBeChecked();
   },
 };
+
+export const RadioButtonWithIcon: Story = {
+  name: 'Radio button with icon',
+  args: {
+    name: 'shipping',
+    label: 'Free Shipping',
+    value: 'free-shipping',
+    description: 'Delivery in 5-7 business days',
+    size: 'medium',
+    disabled: false,
+    error: false,
+    // @ts-ignore - icon is mapped from IconsList
+    icon: 'Delivery',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radioButton = await canvas.findByRole('radio');
+    const radioButtonContainer = radioButton.closest('.dropin-radio-button');
+    const icon = radioButtonContainer?.querySelector(
+      '.dropin-radio-button__icon'
+    );
+    await expect(icon).toBeInTheDocument();
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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';
@@ -13,7 +13,7 @@ import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/RadioButton/RadioButton.css';
 
 export interface RadioButtonProps
-  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label'> {
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label' | 'icon'> {
   label: string | VNode<HTMLAttributes<HTMLElement>>;
   name: string;
   value: string;
@@ -23,6 +23,9 @@ export interface RadioButtonProps
   error?: boolean;
   description?: string;
   busy?: boolean;
+  icon?:
+    | VNode<HTMLAttributes<SVGSVGElement>>
+    | VNode<HTMLAttributes<HTMLImageElement>>;
 }
 
 export const RadioButton: FunctionComponent<RadioButtonProps> = ({
@@ -35,6 +38,7 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
   error = false,
   description = '',
   busy = false,
+  icon,
   className,
   children,
   ...props
@@ -70,6 +74,16 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
           ['dropin-radio-button__label--disabled', disabled],
         ])}
       >
+        {icon && (
+          // @ts-ignore
+          <icon.type
+            {...icon?.props}
+            className={classes([
+              'dropin-radio-button__icon',
+              icon?.props?.className,
+            ])}
+          />
+        )}
         {label}
       </span>
       <span

package/src/components/RadioButton/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/RadioButton/RadioButton';

package/src/lib/get-price-formatter.ts

@@ -53,7 +53,7 @@ export function getPriceFormatter(
 
   const params: Intl.NumberFormatOptions = {
     style: 'currency',
-    currency: currency || 'USD',
+    currency: currency && currency !== 'NONE' ? currency : 'USD',
     // These options are needed to round to whole numbers if that's what you want.
     minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
     maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)