@adobe-commerce/elsie 1.6.0 → 1.7.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.6.0",
+  "version": "1.7.0-beta2",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -58,7 +58,6 @@
     "@storybook/preact": "^8.2.3",
     "@storybook/preact-vite": "^8.2.3",
     "@storybook/preact-webpack5": "^8.2.3",
-    "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/test": "^8.2.3",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.2.3",

package/src/components/CartItem/CartItem.css

@@ -45,6 +45,16 @@
   height: auto;
 }
 
+.dropin-cart-item__image:is(a),
+.dropin-cart-item__image a {
+  display: inline-block;
+}
+
+.dropin-cart-item__image:is(a) img,
+.dropin-cart-item__image a img {
+  display: block;
+}
+
 .dropin-cart-item__title {
   font: var(--type-body-1-default-font);
   letter-spacing: var(--type-body-1-default-letter-spacing);
@@ -266,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);
 }
@@ -283,7 +300,8 @@
 }
 
 /*  Smallish / Medium */
-@container cart-item (width >= 400px) and (width < 737px) {
+@container cart-item (width >=400px) and (width < 737px) {
+
   .dropin-cart-item__title,
   .dropin-cart-item__sku,
   .dropin-cart-item__attributes,
@@ -313,7 +331,8 @@
 }
 
 /* Large */
-@container cart-item (width >= 737px) and (width < 1192px) {
+@container cart-item (width >=737px) and (width < 1192px) {
+
   /* Grid */
   .dropin-cart-item__wrapper {
     grid-template-columns: repeat(12, 1fr);
@@ -391,7 +410,7 @@
 }
 
 /* Extra Large */
-@container cart-item (width >= 1192px) {
+@container cart-item (width >=1192px) {
   .dropin-cart-item {
     --item-group-spacing: var(--spacing-xxsmall);
     --group-spacing: var(--spacing-small);

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/Field/Field.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 */

package/src/components/Field/Field.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
@@ -230,6 +230,48 @@ export const CheckboxField: Story = {
   },
 };
 
+/**
+ * Field with a label that includes a required asterisk.
+ * The asterisk is automatically wrapped in a `<span class="dropin-label-required">` for consistent styling.
+ *
+ * ```ts
+ * import { Field } from '@adobe-commerce/elsie/components/Field';
+ * import { Input } from '@adobe-commerce/elsie/components/Input';
+ * ```
+ *
+ * This example demonstrates:
+ * - Automatic asterisk wrapping in field labels
+ * - The asterisk can be styled independently using `.dropin-label-required`
+ * - Works with any child component (Input, Picker, etc.)
+ */
+export const WithRequiredAsterisk: Story = {
+  render: (args) => (
+    <Field {...args}>
+      <Input name="requiredField" placeholder="Enter your email" />
+    </Field>
+  ),
+  args: {
+    label: 'Email Address',
+    hint: 'We will never share your email',
+    required: true,
+    error: '',
+    success: '',
+    size: 'medium',
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    // Verify the label is rendered
+    const label = canvasElement.querySelector('.dropin-field__label');
+    await expect(label).toBeTruthy();
+    await expect(label?.textContent).toBe('Email Address *');
+
+    // Verify the asterisk is wrapped in a span with required class
+    const asteriskSpan = label?.querySelector('.dropin-label-required');
+    await expect(asteriskSpan).toBeTruthy();
+    await expect(asteriskSpan?.textContent).toBe('*');
+  },
+};
+
 /**
  * ```ts
  * import { Field } from '@adobe-commerce/elsie/components/Field';

package/src/components/Field/Field.tsx

@@ -2,13 +2,17 @@
  *  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 '@adobe-commerce/elsie/components/Field/Field.css';
-import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import {
+  classes,
+  VComponent,
+  wrapRequiredAsterisk,
+} from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 
@@ -32,6 +36,7 @@ export const Field: FunctionComponent<FieldProps> = ({
   size = 'medium',
   disabled = false,
   children,
+  required,
   ...props
 }) => {
   const id =
@@ -40,20 +45,19 @@ export const Field: FunctionComponent<FieldProps> = ({
   let fieldContent: VNode | string | null = null;
 
   if (children && typeof children !== 'string') {
-      fieldContent = (
-        <VComponent
-          node={children}
-          id={id}
-          key={children.key}
-          disabled={disabled}
-          size={size}
-          error={!!error}
-          success={!!success && !error}
-        />
-      );
+    fieldContent = (
+      <VComponent
+        node={children}
+        id={id}
+        key={children.key}
+        disabled={disabled}
+        size={size}
+        error={!!error}
+        success={!!success && !error}
+      />
+    );
   }
 
-
   return (
     <div {...props} className={classes(['dropin-field', className])}>
       {label && (
@@ -65,13 +69,11 @@ export const Field: FunctionComponent<FieldProps> = ({
           ])}
           htmlFor={id}
         >
-          {label}
+          {wrapRequiredAsterisk(label, !!required)}
         </label>
       )}
 
-      <div className={classes(['dropin-field__content'])}>
-        {fieldContent}
-      </div>
+      <div className={classes(['dropin-field__content'])}>{fieldContent}</div>
 
       <div
         className={classes([

package/src/components/Input/Input.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 */