@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-beta1

package/config/jest.js

@@ -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.
  *******************************************************************/
 
 const path = require('path');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.6.0-alpha999",
+  "version": "1.6.0-beta1",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.1",
-    "@adobe-commerce/fetch-graphql": "~1.1.0",
-    "@adobe-commerce/recaptcha": "~1.0.1",
+    "@adobe-commerce/fetch-graphql": "~1.2.0",
+    "@adobe-commerce/recaptcha": "~1.0.2",
     "@adobe-commerce/storefront-design": "~1.0.0",
     "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",

package/src/components/Button/Button.tsx

@@ -25,6 +25,8 @@ export interface ButtonProps
   active?: boolean;
   activeChildren?: ComponentChildren;
   activeIcon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export const Button: FunctionComponent<ButtonProps> = ({

package/src/components/Field/Field.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import '@adobe-commerce/elsie/components/Field/Field.css';
-import { classes } from '@adobe-commerce/elsie/lib';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 
@@ -36,8 +36,23 @@ export const Field: FunctionComponent<FieldProps> = ({
 }) => {
   const id =
     children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
-  const ChildComponent =
-    children && typeof children.type !== 'string' ? children.type : null;
+
+  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}
+        />
+      );
+  }
+
 
   return (
     <div {...props} className={classes(['dropin-field', className])}>
@@ -55,17 +70,7 @@ export const Field: FunctionComponent<FieldProps> = ({
       )}
 
       <div className={classes(['dropin-field__content'])}>
-        {ChildComponent && children && (
-          <ChildComponent
-            {...children.props}
-            id={id}
-            key={children.key}
-            disabled={disabled}
-            size={size}
-            error={!!error}
-            success={!!success && !error}
-          />
-        )}
+        {fieldContent}
       </div>
 
       <div

package/src/components/Incrementer/Incrementer.css

@@ -19,6 +19,12 @@
   opacity: 1;
 }
 
+.dropin-incrementer__content--no-buttons {
+  grid-template-columns: max-content;
+  width: fit-content;
+  margin-inline: auto;
+}
+
 .dropin-incrementer__content--disabled {
   background: var(--color-neutral-300);
   border-radius: var(--shape-border-radius-1);

package/src/components/Incrementer/Incrementer.stories.tsx

@@ -79,6 +79,10 @@ const meta: Meta<IncrementerProps> = {
       description: 'Maximum length of the input field',
       type: 'number',
     },
+    showButtons: {
+      description: 'Show increase/decrease buttons',
+      control: 'boolean',
+    },
   },
 };
 
@@ -170,3 +174,17 @@ export const WithError = {
     await expect(error).toHaveTextContent('Maximum quantity is 100');
   },
 };
+
+export const WithoutButtons: Story = {
+  args: {
+    size: 'medium',
+    onValue: action('onValue'),
+    name: 'incrementerField',
+    value: '1',
+    min: 1,
+    max: 100,
+    disabled: false,
+    'aria-label': 'Quantity',
+    showButtons: false,
+  },
+};

package/src/components/Incrementer/Incrementer.tsx

@@ -28,6 +28,7 @@ export interface IncrementerProps
   max?: number;
   disabled?: boolean;
   maxLength?: number;
+  showButtons?: boolean;
 }
 
 export const Incrementer: FunctionComponent<IncrementerProps> = ({
@@ -42,6 +43,7 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
   onValue,
   onUpdateError,
   size = 'medium',
+  showButtons = true,
   ...props
 }) => {
   const [currentValue, setCurrentValue] = useState<number>(Number(value));
@@ -99,41 +101,44 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         className={classes([
           'dropin-incrementer__content',
           `dropin-incrementer__content--${size}`,
+          ['dropin-incrementer__content--no-buttons', !showButtons],
           [`dropin-incrementer__content--error`, isInvalid],
           [`dropin-incrementer__content--success`, success],
           [`dropin-incrementer__content--disabled`, disabled],
         ])}
       >
         {/* Minus Button */}
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__decrease-button',
-                [`dropin-incrementer__decrease-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue - 1)}
-              disabled={disabled || currentValue < minValue + 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Minus}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__down"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__decrease-button',
+                  [`dropin-incrementer__decrease-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue - 1)}
+                disabled={disabled || currentValue < minValue + 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Minus}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__down"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
 
         {/* Input Field */}
         <input
@@ -157,36 +162,38 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
           {...props}
         />
 
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          {/* Plus/Add button */}
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__increase-button',
-                [`dropin-incrementer__increase-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue + 1)}
-              disabled={disabled || currentValue > maxValue - 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.increaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Add}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__add"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            {/* Plus/Add button */}
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__increase-button',
+                  [`dropin-incrementer__increase-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue + 1)}
+                disabled={disabled || currentValue > maxValue - 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.increaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Add}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__add"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
       </div>
       {isInvalid && (
         <p className="dropin-incrementer__content--error-message">

package/src/components/MultiSelect/MultiSelect.css

@@ -0,0 +1,273 @@
+/********************************************************************
+ *  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.
+ *******************************************************************/
+
+.dropin-multi-select {
+  position: relative;
+  min-width: 300px;
+}
+
+.dropin-multi-select__input-hidden {
+  display: none;
+}
+
+.dropin-multi-select__container {
+  min-height: 56px;
+  box-sizing: border-box;
+  border: var(--shape-border-width-1) solid var(--color-neutral-600);
+  border-radius: var(--shape-border-radius-1);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  cursor: text;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xsmall);
+  transition: all 0.2s ease;
+  background-color: var(--color-neutral-50);
+}
+
+.dropin-multi-select__container--with-floating-label {
+  padding: var(--spacing-small) var(--spacing-small) var(--spacing-xsmall)
+    var(--spacing-small);
+}
+
+.dropin-multi-select__container:hover {
+  border-color: var(--color-neutral-700);
+}
+
+.dropin-multi-select__container--open {
+  border-color: var(--color-neutral-700);
+}
+
+.dropin-multi-select__container--disabled {
+  background-color: var(--color-neutral-200);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dropin-multi-select__container--error {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+}
+
+.dropin-multi-select__container--success {
+  border: var(--shape-border-width-2) solid var(--color-positive-500);
+}
+
+.dropin-multi-select__tags-area {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  max-width: calc(100% - 30px);
+  overflow: hidden;
+}
+
+.dropin-multi-select__tag {
+  padding: 2px 16px;
+}
+
+.dropin-multi-select__floating-label {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+  cursor: text;
+  background-color: var(--color-neutral-50);
+  padding: 0 var(--spacing-xxsmall);
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  color: var(--color-neutral-500);
+  pointer-events: none;
+  transition: all 0.2s ease;
+  z-index: 1;
+}
+
+.dropin-multi-select__container--with-floating-label.dropin-multi-select__container--has-value,
+.dropin-multi-select__container--with-floating-label.dropin-multi-select__container--open,
+.dropin-multi-select__container--with-floating-label:focus-within {
+  padding-top: var(--spacing-big);
+}
+
+.dropin-multi-select__container--with-floating-label.dropin-multi-select__container--has-value
+  .dropin-multi-select__floating-label,
+.dropin-multi-select__container--with-floating-label.dropin-multi-select__container--open
+  .dropin-multi-select__floating-label,
+.dropin-multi-select__container--with-floating-label:focus-within
+  .dropin-multi-select__floating-label {
+  top: 12px;
+  left: 12px;
+  transform: translateY(0);
+  font-size: 12px;
+  color: var(--color-neutral-800);
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  background-color: var(--color-neutral-50);
+  z-index: 2;
+}
+
+.dropin-multi-select__tag-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s ease;
+  color: var(--color-neutral-600);
+}
+
+.dropin-multi-select__search {
+  outline: none;
+  background: transparent;
+  border: none;
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  padding: 0;
+}
+
+.dropin-multi-select__search:empty {
+  width: 100%;
+}
+
+.dropin-multi-select__search::placeholder {
+  font: var(--type-body-1-default-font);
+}
+
+.dropin-multi-select__container--with-floating-label
+  .dropin-multi-select__search::placeholder {
+  opacity: 0;
+}
+
+.dropin-multi-select__container--with-floating-label.dropin-multi-select__container--open
+  .dropin-multi-select__search::placeholder {
+  opacity: 1;
+}
+
+.dropin-multi-select__tags-area--has-values .dropin-multi-select__search {
+  width: 30px;
+}
+
+.dropin-multi-select__chevron {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+}
+
+.dropin-multi-select__chevron--open {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.dropin-multi-select__dropdown {
+  position: absolute;
+  overflow: hidden;
+  z-index: 50;
+  width: 100%;
+  margin-top: var(--spacing-xxsmall);
+  background-color: var(--color-neutral-50);
+  border: var(--shape-border-width-1) solid var(--color-neutral-700);
+  border-radius: var(--shape-border-radius-1);
+  box-shadow: var(--shape-shadow-1);
+  box-sizing: border-box;
+}
+
+.dropin-multi-select__controls {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
+  background-color: var(--color-neutral-200);
+}
+
+.dropin-multi-select__button {
+  flex: 1;
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  cursor: pointer;
+}
+
+.dropin-multi-select__button--deselect-all:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dropin-multi-select__button--deselect-all:disabled:hover {
+  background-color: var(--color-neutral-200);
+}
+
+.dropin-multi-select__button--select-all,
+.dropin-multi-select__button--deselect-all {
+  padding-left: var(--spacing-xsmall);
+  padding-right: var(--spacing-xsmall);
+}
+
+.dropin-multi-select__options {
+  overflow: auto;
+}
+
+.dropin-multi-select__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--spacing-xxsmall) 0;
+}
+
+.dropin-multi-select__option {
+  padding: var(--spacing-xsmall) 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color 0.15s ease;
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-multi-select__option:hover {
+  background-color: var(--color-neutral-300);
+}
+
+.dropin-multi-select__option--focused {
+  background-color: var(--color-neutral-200);
+}
+
+.dropin-multi-select__option--selected {
+  color: var(--color-brand-700);
+  font: var(--type-body-1-emphasized-font);
+  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
+}
+
+.dropin-multi-select__option-label {
+  flex: 1;
+}
+
+.dropin-multi-select__option-label--disabled {
+  color: var(--color-neutral-200);
+}
+
+.dropin-multi-select__no-results {
+  padding: var(--spacing-small);
+  text-align: center;
+  font: var(--type-body-1-default-font);
+  color: var(--color-neutral-500);
+}
+
+.dropin-multi-select__sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}