@adobe-commerce/elsie 1.4.1-alpha009 → 1.5.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.1-alpha009",
+  "version": "1.5.0-beta1",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -26,7 +26,7 @@
     "cleanup": "rimraf dist"
   },
   "devDependencies": {
-    "@adobe-commerce/event-bus": "~1.0.0",
+    "@adobe-commerce/event-bus": "~1.0.1",
     "@adobe-commerce/fetch-graphql": "~1.1.0",
     "@adobe-commerce/recaptcha": "~1.0.1",
     "@adobe-commerce/storefront-design": "~1.0.0",

package/src/components/CartItem/CartItem.tsx

@@ -36,6 +36,7 @@ export interface CartItemProps
   totalExcludingTax?: VNode;
   sku?: VNode;
   quantity?: number;
+  quantityContent?: VNode;
   description?: VNode;
   attributes?: VNode;
   footer?: VNode;
@@ -45,6 +46,7 @@ export interface CartItemProps
   discount?: VNode;
   savings?: VNode;
   actions?: VNode;
+  removeContent?: VNode;
   loading?: boolean;
   updating?: boolean;
   onRemove?: () => void;
@@ -71,7 +73,9 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   discount,
   savings,
   actions,
+  removeContent,
   quantity,
+  quantityContent,
   description,
   attributes,
   footer,
@@ -304,18 +308,20 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
             ['dropin-cart-item__quantity--edit', !!onQuantity],
           ])}
         >
-          {onQuantity
-            ? quantityComponent
-            : quantity && (
-                <span
-                  className={classes(['dropin-cart-item__quantity__value'])}
-                >
-                  {labels.quantity}:{' '}
-                  <strong className="dropin-cart-item__quantity__number">
-                    {Number(quantity).toLocaleString(locale)}
-                  </strong>
-                </span>
-              )}
+          {quantityContent ? (
+            <VComponent node={quantityContent} />
+          ) : onQuantity ? (
+            quantityComponent
+          ) : (
+            quantity && (
+              <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 && (
@@ -432,12 +438,17 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
 
         {/* Footer */}
         {footer && (
-            <VComponent node={footer} className={classes(['dropin-cart-item__footer'])} />
+          <VComponent
+            node={footer}
+            className={classes(['dropin-cart-item__footer'])}
+          />
         )}
       </div>
 
       {/* Remove Item */}
-      {onRemove && (
+      {removeContent ? (
+        <VComponent node={removeContent} />
+      ) : onRemove ? (
         <Button
           data-testid="cart-item-remove-button"
           className={classes(['dropin-cart-item__remove'])}
@@ -459,7 +470,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
           }
           disabled={updating}
         />
-      )}
+      ) : null}
     </div>
   );
 };

package/src/components/InputFile/InputFile.css

@@ -0,0 +1,49 @@
+/********************************************************************
+ *  Copyright 2025 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://cssguidelin.es/#bem-like-naming */
+
+.dropin-input-file__input {
+    display: none;
+}
+
+.dropin-input-file__label {
+    border: 0 none;
+    cursor: pointer;
+    border-radius: var(--shape-border-radius-3);
+    padding: var(--spacing-xsmall) var(--spacing-medium);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-brand-500);
+    color: var(--color-neutral-50);
+    font: var(--type-button-2-font);
+    letter-spacing: var(--type-button-2-letter-spacing);
+}
+
+.dropin-input-file__label:hover {
+    background-color: var(--color-button-hover);
+}
+
+.dropin-input-file__icon {
+    height: 24px;
+    margin-right: var(--spacing-xsmall);
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/InputFile/InputFile.stories.tsx

@@ -0,0 +1,90 @@
+/********************************************************************
+ *  Copyright 2025 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 { InputFile, InputFileProps } from '@adobe-commerce/elsie/components/InputFile';
+import { action } from '@storybook/addon-actions';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use InputFile to upload files.
+ */
+const meta: Meta<InputFileProps> = {
+  title: 'Components/InputFile',
+  component: InputFile,
+  argTypes: {
+    label: {
+      description: 'Label for the input file.',
+      type: 'string',
+    },
+    accept: {
+      description: 'Restrict selectable file types',
+      type: 'string',
+    },
+    multiple: {
+      description: 'Allow multiple files selection.',
+      type: { 
+        name: 'boolean', 
+        required: false 
+      },
+    },
+    id: {
+      description: 'id',
+      type: { 
+        required: false, 
+        name: 'string' 
+      },
+      control: 'text',
+    },
+    onChange: {
+      description: 'Handler for when the file selection changes.',
+      control: false,
+      table: {
+        type: { 
+          summary: 'function' 
+        },
+      },
+    },
+    icon: {
+      description: 'Optional icon.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InputFileProps>;
+
+export const Default: Story = {
+  args: {
+    label: 'Upload File',
+    id: 'single-file-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    label: 'Upload Multiple Files',
+    id: 'multiple-files-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    multiple: true,
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};

package/src/components/InputFile/InputFile.tsx

@@ -0,0 +1,59 @@
+/********************************************************************
+ *  Copyright 2025 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. 
+ *******************************************************************/
+
+import { FunctionComponent, VNode } from 'preact';
+import { useId } from 'preact/hooks';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/InputFile/InputFile.css';
+
+export interface InputFileProps extends Omit<HTMLAttributes<HTMLInputElement>, 'type' | 'icon'> {
+  accept?: string;
+  onChange?: (event: Event) => void;
+  label?: string;
+  multiple?: boolean;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const InputFile: FunctionComponent<InputFileProps> = ({
+  accept,
+  onChange,
+  label = 'Upload Document',
+  icon,
+  className,
+  multiple,
+  id: providedId,
+  ...props
+}) => {
+  
+  const generatedId = useId();
+  const id = providedId || generatedId;
+
+  const handleChange = (e: Event) => {
+    onChange?.(e);
+  };
+
+  return (
+    <div className={classes(['dropin-input-file', className])}>
+      <label htmlFor={id} className="dropin-input-file__label">
+        {icon && <span className="dropin-input-file__icon">{icon}</span>}
+        {label}
+      </label>
+      <input
+        id={id}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        className="dropin-input-file__input"
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/InputFile/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2025 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. 
+ *******************************************************************/
+  
+export * from '@adobe-commerce/elsie/components/InputFile/InputFile';
+export { InputFile as default } from '@adobe-commerce/elsie/components/InputFile/InputFile';

package/src/components/ProductItemCard/ProductItemCardSkeleton.css

@@ -9,23 +9,10 @@
 
 /* https://cssguidelin.es/#bem-like-naming */
 
-.dropin-product-item-card__skeleton {
-  gap: var(--spacing-small);
-}
-
 .dropin-product-item-card__skeleton__image {
-  height: 375px;
-}
-
-.dropin-product-item-card__skeleton__content {
-  grid-column: 1/-1;
-}
-
-/* .dropin-product-item-card__skeleton__image {
   width: 100%;
-  height: auto;
+  height: 370px;
 }
-*/
 
 /* Medium (portrait tablets and large phones, 768px and up) */
 /* @media only screen and (min-width: 768px) { } */

package/src/components/ProductItemCard/ProductItemCardSkeleton.tsx

@@ -19,10 +19,11 @@ export const ProductItemCardSkeleton: FunctionComponent = () => {
           fullWidth={true}
           className="dropin-product-item-card__skeleton__image"
         />
-        <div className="dropin-product-item-card__content dropin-product-item-card__skeleton__content">
+      </Skeleton>
+      <Skeleton className="dropin-product-item-card__content dropin-product-item-card__skeleton__content">
           <SkeletonRow
             fullWidth={true}
-            size="large"
+            size="xsmall"
             className="dropin-product-item-card__skeleton__item"
           />
           <SkeletonRow
@@ -32,11 +33,10 @@ export const ProductItemCardSkeleton: FunctionComponent = () => {
           />
           <SkeletonRow
             fullWidth={true}
-            size="small"
+            size="xsmall"
             className="dropin-product-item-card__skeleton__item"
           />
-        </div>{' '}
-      </Skeleton>
+        </Skeleton>
     </div>
   );
 };

package/src/components/index.ts

@@ -48,3 +48,4 @@ export * from '@adobe-commerce/elsie/components/Tag';
 export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
 export * from '@adobe-commerce/elsie/components/ProductItemCard';
+export * from '@adobe-commerce/elsie/components/InputFile';

package/src/docs/API/event-bus.mdx

@@ -5,48 +5,265 @@ import { Meta, Unstyled } from '@storybook/blocks';
 
 # Event Bus
 
-## Usage
+The Event Bus provides a communication system for different parts of your application to exchange messages and stay synchronized. It enables event-driven architecture for drop-ins, allowing Containers to react to changes from other Containers and communicate data changes to the storefront.
+
+## Import
+
+From drop-in project using the SDK
 
 ```ts
-// from drop-in project (SDK)
 import { events } from '@adobe-commerce/elsie/lib';
+```
+
 
-// from host site
+From integration project (storefront)
+
+```js
 import { events } from '@dropins/tools/event-bus.js';
 ```
 
-## Methods
+## Core Methods
+
+### Subscribe to Events
+
+Subscribe to events and receive notifications when they occur.
+
+```ts
+const eventListener = events.on('<event>', (payload) => {
+  // Handle the event payload
+  console.log('Event received:', payload);
+});
+
+// Stop listening to the event
+eventListener.off();
+```
 
-### Listener
+**Example:**
 ```ts
-const onEvent = events.on('<event>', (payload) => {
-  //...handle payload
+// Listen for cart updates
+const cartListener = events.on('cart/data', (cartData) => {
+  if (cartData) {
+    console.log(`Cart has ${cartData.totalQuantity} items`);
+    updateCartUI(cartData);
+  } else {
+    console.log('Cart is empty');
+    showEmptyCart();
+  }
 });
 
-// Stop listening to event
-onEvent.off();
+// Later, when you want to stop listening
+cartListener.off();
+```
+
+### Emit Events
+
+Broadcast events to all listeners across your application.
+
+```ts
+events.emit('<event>', payload);
+```
+
+**Examples:**
+```ts
+// Emit cart data
+const cartData = {
+  id: 'cart-123',
+  totalQuantity: 2,
+  items: [
+    { uid: 'item-1', quantity: 1, sku: 'PROD-001', name: 'Product Name' }
+  ]
+};
+
+events.emit('cart/data', cartData);
 ```
 
-### Emit
+### Get Last Event Payload
+
+Retrieve the most recent payload for a specific event.
+
+```ts
+const lastPayload = events.lastPayload('<event>');
+```
 
+**Example:**
 ```ts
-events.emit('<event>', <payload>);
+// Get the current cart state without waiting for an event
+const currentCart = events.lastPayload('cart/data');
+
+if (currentCart) {
+  console.log('Current cart total:', currentCart.totalQuantity);
+}
 ```
 
-### Logging
+### Enable Debug Logging
+
+Turn on console logging to debug event flow.
 
 ```ts
-// Enable logging
+// Enable logging to see all events in console
 events.enableLogger(true);
+```
 
-// Disable logging
-events.enableLogger(false);
+## Advanced Features
+
+### Eager Loading
+
+Execute the event handler immediately with the last known payload when subscribing. This is useful for getting the current state without waiting for the next event.
+
+```ts
+// Handler will execute immediately if there's a previous payload
+const listener = events.on('cart/data', (cartData) => {
+  console.log('Cart data received:', cartData);
+}, { eager: true });
 ```
 
-### Get Latest Payload
+**Use Cases:**
+- Initialize UI components with current state
+- Avoid waiting for the first event emission
+- Ensure components have the latest data on mount
+
+### Event Scoping
+
+Create namespaced events to avoid conflicts between different parts of your application.
+
+```ts
+// Subscribe to a scoped event
+const scopedListener = events.on('data/update', (data) => {
+  console.log('Scoped data received:', data);
+}, { scope: 'feature-a' });
+
+// Emit a scoped event
+events.emit('data/update', payload, { scope: 'feature-a' });
+
+// Get last payload for a scoped event
+const lastScopedData = events.lastPayload('data/update', { scope: 'feature-a' });
+```
+
+**Scoped Event Names:**
+When using scopes, the actual event name becomes `scope/event`. For example:
+- `'feature-a/data/update'` instead of `'data/update'`
+- `'module-b/user/action'` instead of `'user/action'`
+
+**Use Cases:**
+- Separate different features or modules
+- Different contexts within the same application
+- Component-specific event handling
+
+### Combining Options
+
+Use both eager loading and scoping together for powerful event handling.
 
 ```ts
-events.lastPayload('<event>'): EventPayload | undefined;
+// Subscribe to a scoped event with eager loading
+const listener = events.on('locale', (locale) => {
+  console.log('Current locale:', locale);
+}, { 
+  eager: true, 
+  scope: 'user-preferences' 
+});
 ```
 
+## Event-Driven Drop-ins
+
+The Event Bus enables drop-ins to be truly event-driven, allowing for loose coupling between components and seamless communication across the application.
+
+### Container-to-Container Communication
+
+Containers can react to changes from other Containers, enabling complex interactions without direct dependencies.
+
+```ts
+// Product Container: Emits when a product is added to cart
+function ProductContainer() {
+  const handleAddToCart = (product) => {
+    // Add to cart logic...
+    
+    // Notify other containers about the cart change
+    events.emit('cart/data', updatedCartData);
+  };
+  
+  return (
+    <button onClick={() => handleAddToCart(product)}>
+      Add to Cart
+    </button>
+  );
+}
+
+// Cart Container: Reacts to cart changes from any source
+function CartContainer() {
+  useEffect(() => {
+    const cartListener = events.on('cart/data', (cartData) => {
+      updateCartDisplay(cartData);
+      updateCartBadge(cartData.totalQuantity);
+    }, { eager: true });
+    
+    return () => cartListener.off();
+  }, []);
+  
+  return <CartDisplay />;
+}
+
+// Mini Cart Container: Also reacts to the same cart changes
+function MiniCartContainer() {
+  useEffect(() => {
+    const cartListener = events.on('cart/data', (cartData) => {
+      updateMiniCart(cartData);
+    }, { eager: true });
+    
+    return () => cartListener.off();
+  }, []);
+  
+  return <MiniCart />;
+}
+```
+
+### Storefront Communication
+
+Drop-ins can communicate data changes to the storefront, enabling seamless integration with the host application.
+
+```ts
+// Authentication Container: Notifies storefront of login/logout
+function AuthContainer() {
+  const handleLogin = (userData) => {
+    // Login logic...
+    
+    // Notify storefront of authentication change
+    events.emit('authenticated', true);
+  };
+  
+  const handleLogout = () => {
+    // Logout logic...
+    
+    // Notify storefront of authentication change
+    events.emit('authenticated', false);
+  };
+  
+  return <AuthForm onLogin={handleLogin} onLogout={handleLogout} />;
+}
+
+// Storefront can listen for authentication changes
+// This would be in the host application
+const authListener = events.on('authenticated', (isAuthenticated) => {
+  if (isAuthenticated) {
+    showUserMenu();
+    enableCheckout();
+  } else {
+    hideUserMenu();
+    disableCheckout();
+  }
+}, { eager: true });
+```
+
+
+
+## Best Practices
+
+1. **Always unsubscribe** from events when components unmount to prevent memory leaks
+2. **Use scopes** to organize events by feature or component
+3. **Enable eager loading** when you need immediate access to current state
+4. **Use descriptive event names** that clearly indicate what data they contain
+5. **Handle null/undefined payloads** gracefully in your event handlers
+6. **Enable logging during development** to debug event flow
+7. **Keep event payloads lightweight** to avoid performance issues
+8. **Document your event contracts** so other developers know what to expect
+
 </Unstyled>