@dropins/tools 0.21.1-beta1 → 0.21.2-alpha1

package/components/InLineAlert/InLineAlert.test.jsx

@@ -0,0 +1,77 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { InLineAlert, } from '@adobe/elsie/components/InLineAlert';
+// mock icons
+jest.mock('@adobe/elsie/icons', () => ({
+    CheckWithCircle: jest.fn(({ className }) => (<svg className={className} id="CheckWithCircle"/>)),
+    Close: jest.fn(({ className }) => <svg className={className} id="Close"/>),
+    WarningFilled: jest.fn(({ className }) => (<svg className={className} id="WarningFilled"/>)),
+}));
+describe('Base/Components/InLineAlert', () => {
+    const defaultProps = {
+        heading: 'InLineAlert heading',
+        description: 'InLineAlert description',
+        type: 'error',
+        icon: <div>icon</div>,
+        onDismiss: jest.fn(),
+    };
+    test('renders', () => {
+        const { container } = render(<InLineAlert {...defaultProps}/>);
+        const element = container.querySelector('.dropin-in-line-alert');
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        expect(element).not.toBeNull();
+        const icon = container.querySelector('.dropin-in-line-alert__icon');
+        expect(icon).not.toBeNull();
+    });
+    test('renders warning variant if no variant is provided', () => {
+        const { container } = render(<InLineAlert {...defaultProps} type={undefined}/>);
+        const element = container.querySelector('.dropin-in-line-alert--warning');
+        const icon = container.querySelector('.dropin-in-line-alert__icon');
+        expect(!!container).toEqual(true);
+        expect(element).not.toBeNull();
+        expect(icon).not.toBeNull();
+    });
+    test('renders additional action', () => {
+        const additionalAction = {
+            label: 'Additional action',
+            onClick: jest.fn(),
+        };
+        const { container } = render(<InLineAlert {...defaultProps} additionalActions={[additionalAction]}/>);
+        const element = container.querySelector('.dropin-in-line-alert__additional-action');
+        expect(!!container).toEqual(true);
+        expect(element).not.toBeNull();
+        element.click();
+        expect(additionalAction.onClick).toHaveBeenCalled();
+    });
+    test('renders multiple additional actions', () => {
+        const additionalActions = [
+            {
+                label: 'Additional action 1',
+                onClick: jest.fn(),
+            },
+            {
+                label: 'Additional action 2',
+                onClick: jest.fn(),
+            },
+        ];
+        const { container } = render(<InLineAlert {...defaultProps} additionalActions={additionalActions}/>);
+        const elements = container.querySelectorAll('.dropin-in-line-alert__additional-action'
+        // eslint-disable-next-line
+        );
+        expect(!!container).toEqual(true);
+        expect(elements.length).toEqual(2);
+        elements.forEach((element, index) => {
+            element.click();
+            expect(additionalActions[index].onClick).toHaveBeenCalled();
+        });
+    });
+    describe('Interactions:', () => {
+        test('calls onDismiss when dismiss button is clicked', () => {
+            const { container } = render(<InLineAlert {...defaultProps}/>);
+            const dismissButton = container.querySelector('.dropin-in-line-alert__dismiss-button');
+            dismissButton.click();
+            expect(defaultProps.onDismiss).toHaveBeenCalled();
+        });
+    });
+});

package/components/InLineAlert/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@adobe/elsie/components/InLineAlert/InLineAlert';
+export { InLineAlert as default } from '@adobe/elsie/components/InLineAlert/InLineAlert';
+//# sourceMappingURL=index.d.ts.map

package/components/InLineAlert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InLineAlert/index.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC;AAChE,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,iDAAiD,CAAC"}

package/components/InLineAlert/index.js

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/InLineAlert/InLineAlert';
+export { InLineAlert as default } from '@adobe/elsie/components/InLineAlert/InLineAlert';

package/components/Incrementer/Incrementer.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Incrementer/Incrementer.css';
+export interface IncrementerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'size'> {
+    name?: string;
+    size?: 'medium' | 'large';
+    onValue?: (value: any) => void;
+    onUpdateError?: (error: Error) => void;
+    error?: boolean;
+    success?: boolean;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    maxLength?: number;
+}
+export declare const Incrementer: FunctionComponent<IncrementerProps>;
+//# sourceMappingURL=Incrementer.d.ts.map

package/components/Incrementer/Incrementer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Incrementer.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/Incrementer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,qDAAqD,CAAC;AAE7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkJ3D,CAAC"}

package/components/Incrementer/Incrementer.jsx

@@ -0,0 +1,87 @@
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import { classes, debounce } from '@adobe/elsie/lib';
+import { Add, Minus } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { Localizer, Text } from '@adobe/elsie/i18n';
+import '@adobe/elsie/components/Incrementer/Incrementer.css';
+export const Incrementer = ({ name, value = '1', className, disabled, error, success, min, max, onValue, onUpdateError, size = 'medium', ...props }) => {
+    const [currentValue, setCurrentValue] = useState(Number(value));
+    const minValue = Number(min);
+    const maxValue = Number(max);
+    useEffect(() => {
+        setCurrentValue(Number(value));
+    }, [value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnValueHandler = useCallback(debounce(async (newValue) => {
+        if (onValue) {
+            try {
+                await onValue(newValue);
+            }
+            catch (e) {
+                if (onUpdateError) {
+                    onUpdateError(e);
+                }
+            }
+        }
+    }, 200), [onValue, onUpdateError]);
+    const handleIncrementer = (_value) => {
+        let newValue = _value;
+        if (_value < minValue)
+            newValue = minValue;
+        if (_value > maxValue)
+            newValue = maxValue;
+        debouncedOnValueHandler(newValue);
+        setCurrentValue(newValue);
+    };
+    return (<div className={classes([
+            'dropin-incrementer',
+            `dropin-incrementer--${size}`,
+            className,
+        ])}>
+      <div className={classes([
+            'dropin-incrementer__content',
+            `dropin-incrementer__content--${size}`,
+            [`dropin-incrementer__content--error`, error],
+            [`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"/>)}>
+              <Icon source={Minus} size="16" stroke="1" viewBox="4 2 20 20" className="dropin-incrementer__down"/>
+            </button>
+          </Localizer>
+        </div>
+
+        {/* Input Field */}
+        <input className="dropin-incrementer__input" max={max} min={min} step={1} type="number" name={name} value={currentValue} disabled={disabled} onChange={(e) => {
+            const newValue = e.currentTarget.value;
+            if (newValue !== '') {
+                handleIncrementer(Number(newValue));
+            }
+        }} {...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"/>)}>
+              <Icon source={Add} size="16" stroke="1" viewBox="4 2 20 20" className="dropin-incrementer__add"/>
+            </button>
+          </Localizer>
+        </div>
+      </div>
+    </div>);
+};

package/components/Incrementer/Incrementer.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { IncrementerProps } from '@adobe/elsie/components/Incrementer';
+/**
+ * Use Incrementers to let users increase or decrease a value.
+ */
+declare const meta: Meta<IncrementerProps>;
+export default meta;
+type Story = StoryObj<IncrementerProps>;
+export declare const Primary: Story;
+//# sourceMappingURL=Incrementer.stories.d.ts.map

package/components/Incrementer/Incrementer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Incrementer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/Incrementer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAK7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAuBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAgDrB,CAAC"}

package/components/Incrementer/Incrementer.stories.jsx

@@ -0,0 +1,68 @@
+import { Incrementer, } from '@adobe/elsie/components/Incrementer';
+import { action } from '@storybook/addon-actions';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+/**
+ * Use Incrementers to let users increase or decrease a value.
+ */
+const meta = {
+    title: 'Components/Incrementer',
+    component: Incrementer,
+    argTypes: {
+        name: {
+            description: 'Field name (used for mapping the value in a form)',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        value: {
+            description: 'Field value',
+            type: 'string',
+        },
+        size: {
+            description: 'medium | large',
+            defaultValue: { summary: 'medium' },
+            options: ['medium', 'large'],
+            control: { type: 'radio' },
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        size: 'medium',
+        onValue: action('onValue'),
+        name: 'incrementerField',
+        value: '0',
+        min: 0,
+        max: 100,
+        disabled: false,
+        'aria-label': 'Quantity',
+    },
+    play: async () => {
+        const canvasElement = document.querySelector('#storybook-root');
+        const canvas = within(canvasElement);
+        const decreaseButton = document.querySelector('button[aria-label="Decrease Quantity"]');
+        const inputField = document.querySelector('input');
+        const increaseButton = document.querySelector('button[aria-label="Increase Quantity"]');
+        // Without this wait test failing intermittently as click event is triggerning before even element fully loaded
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+        await userEvent.click(decreaseButton);
+        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+        await userEvent.type(inputField, '99');
+        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+        await userEvent.click(increaseButton);
+        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+        await userEvent.click(decreaseButton);
+        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+        await userEvent.clear(inputField);
+        await userEvent.type(inputField, '0');
+        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+    },
+};

package/components/Incrementer/Incrementer.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=Incrementer.test.d.ts.map

package/components/Incrementer/Incrementer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Incrementer.test.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/Incrementer.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}

package/components/Incrementer/Incrementer.test.jsx

@@ -0,0 +1,112 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent } from '@adobe/elsie/lib/tests';
+import { Incrementer, } from '@adobe/elsie/components/Incrementer';
+jest.useFakeTimers();
+describe('Base/Components/Incrementer', () => {
+    const DEFAULT_PROPS = {
+        name: 'testIncrementer',
+    };
+    test('renders', () => {
+        const { container } = render(<Incrementer {...DEFAULT_PROPS}/>);
+        const elem = container.querySelector('.dropin-incrementer');
+        expect(!!elem).toEqual(true);
+    });
+    test('triggers onChange with empty value()', () => {
+        const mockFn = jest.fn();
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn}/>);
+        const field = container.querySelector('.dropin-incrementer__input');
+        fireEvent.input(field, {
+            target: { value: '' },
+        });
+        jest.runAllTimers();
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+    test('renders the correct shape', () => {
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} aria-label="Item Quantity"/>);
+        const elem = container.querySelector('.dropin-incrementer');
+        expect(elem).toMatchSnapshot();
+    });
+    test('only allow value changes between min and max range.', () => {
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="0" min={1} max={2}/>);
+        const input = container.querySelector('.dropin-incrementer__input');
+        const increase = container.querySelector('.dropin-incrementer__increase-button');
+        const decrease = container.querySelector('.dropin-incrementer__decrease-button');
+        jest.runAllTimers();
+        // Increase
+        fireEvent.click(increase); // 1
+        expect(input.value).toEqual('1');
+        fireEvent.click(increase); // 2 (reached max limit)
+        expect(input.value).toEqual('2');
+        expect(increase.disabled).toEqual(true);
+        // Decrease
+        fireEvent.click(decrease); // 1
+        expect(input.value).toEqual('1');
+        fireEvent.click(decrease); // 1 (reached min limit)
+        expect(input.value).toEqual('1');
+        expect(decrease.disabled).toEqual(true);
+    });
+    test('if value is greater than maxValue test.', () => {
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="4" min={0} max={5}/>);
+        const input = container.querySelector('.dropin-incrementer__input');
+        const increase = container.querySelector('.dropin-incrementer__increase-button');
+        jest.runAllTimers();
+        // Increase
+        fireEvent.click(increase); // 1
+        expect(input.value).toEqual('5');
+        fireEvent.click(increase); // 2 (reached max limit)
+        expect(input.value).toEqual('5');
+        expect(increase.disabled).toEqual(true);
+    });
+    test('handles input update error with error handler given', () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const mockErrorHandler = jest.fn();
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn} onUpdateError={mockErrorHandler}/>);
+        const field = container.querySelector('.dropin-incrementer__input');
+        fireEvent.input(field, { target: { value: '1' } });
+        jest.runAllTimers();
+        expect(field.value).toEqual('1');
+        expect(mockErrorHandler).toHaveBeenCalledTimes(1);
+        expect(mockErrorHandler.mock.calls[0][0]).toMatchInlineSnapshot(`[Error: Mock error!]`);
+    });
+    test('handles quantity update error with no error handler given', () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="3" onValue={mockFn}/>);
+        const field = container.querySelector('.dropin-incrementer__input');
+        fireEvent.input(field, { target: { value: '2' } });
+        expect(mockFn).not.toHaveBeenCalled();
+        jest.runAllTimers();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(field.value).toEqual('2');
+    });
+    test('throws error when handleIncrementer() is called with an error', () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const mockErrorHandler = jest.fn();
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn} onUpdateError={mockErrorHandler}/>);
+        const field = container.querySelector('.dropin-incrementer__input');
+        fireEvent.input(field, { target: { value: 1 } });
+        expect(mockFn).not.toHaveBeenCalled();
+        expect(mockFn).toThrow('Mock error!');
+        jest.runAllTimers();
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+    test('reach the max value range', () => {
+        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="0" min={1} max={2}/>);
+        const input = container.querySelector('.dropin-incrementer__input');
+        const decrease = container.querySelector('.dropin-incrementer__decrease-button');
+        jest.runAllTimers();
+        // Decrease
+        fireEvent.click(decrease); // 1
+        expect(input.value).toEqual('1');
+        fireEvent.click(decrease); // 1 (reached min limit)
+        expect(input.value).toEqual('1');
+        expect(decrease.disabled).toEqual(true);
+        fireEvent.change(input, { target: { value: '0' } });
+        expect(input.value).toEqual('0');
+    });
+});

package/components/Incrementer/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/Incrementer/Incrementer';
+//# sourceMappingURL=index.d.ts.map

package/components/Incrementer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/index.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC"}

package/components/Incrementer/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/components/Incrementer/Incrementer';

package/components/Input/Input.d.ts

@@ -0,0 +1,19 @@
+import '@adobe/elsie/components/Input/Input.css';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'icon'> {
+    id?: string;
+    name?: string;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    error?: boolean;
+    floatingLabel?: string;
+    onUpdateError?: (error: Error) => void;
+    onValue?: (value: any) => void;
+    size?: 'medium' | 'large';
+    success?: boolean;
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    maxLength?: number;
+}
+export declare const Input: FunctionComponent<InputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/components/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAoI/C,CAAC"}

package/components/Input/Input.jsx

@@ -0,0 +1,73 @@
+import { Icon } from '@adobe/elsie/components/Icon';
+import '@adobe/elsie/components/Input/Input.css';
+import { CheckWithCircle, WarningWithCircle } from '@adobe/elsie/icons';
+import { VComponent, classes, debounce } from '@adobe/elsie/lib';
+import { useCallback } from 'preact/hooks';
+export const Input = ({ name, value, variant = 'primary', className, disabled, error, floatingLabel, onValue, onUpdateError, size = 'medium', icon, maxLength, success, ...props }) => {
+    const id = props?.id || name || `dropin-input-${Math.random().toString(36)}`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnValueHandler = useCallback(debounce(async (newValue) => {
+        if (onValue) {
+            try {
+                await onValue(newValue);
+            }
+            catch (e) {
+                if (onUpdateError) {
+                    onUpdateError(e);
+                }
+            }
+        }
+    }, 200), [onValue, onUpdateError]);
+    const handleOnValue = (e) => {
+        const input = e.target;
+        debouncedOnValueHandler(input.value.trim());
+    };
+    return (<div className={classes([
+            'dropin-input-container',
+            `dropin-input-container--${variant}`,
+            [`dropin-input-container--floating`, !!floatingLabel],
+            ['dropin-input-container--disabled', disabled],
+        ])}>
+      {icon && (<VComponent node={icon} className={classes([
+                'dropin-input__field-icon--left',
+                icon.props.className,
+            ])}/>)}
+      <div className="dropin-input-label-container">
+        {/* Input */}
+        <input id={id} onChange={handleOnValue} type="text" maxLength={maxLength} name={name} value={value} {...props} className={classes([
+            'dropin-input',
+            `dropin-input--${size}`,
+            `dropin-input--${variant}`,
+            [`dropin-input--error`, !!error],
+            [`dropin-input--success`, !!success],
+            ['dropin-input--disabled', disabled],
+            [`dropin-input--floating`, !!floatingLabel],
+            [`dropin-input--icon-left`, !!icon],
+            className,
+        ])} disabled={disabled}/>
+
+        {/* Floating Label */}
+        {floatingLabel && (<label htmlFor={id} className={classes([
+                [`dropin-input__label--floating`, !!floatingLabel],
+                [`dropin-input__label--floating--icon-left`, !!icon],
+                [`dropin-input__label--floating--error`, !!error],
+            ])}>
+            {floatingLabel}
+          </label>)}
+      </div>
+
+      {error && (<div className={classes([
+                'dropin-input__field-icon--right',
+                'dropin-input__field-icon--error',
+            ])}>
+          <Icon source={WarningWithCircle} size="16" stroke="2" className="dropin-input--warning-icon" viewBox="-1 -1 26 26"/>
+        </div>)}
+
+      {success && (<div className={classes([
+                'dropin-input__field-icon--right',
+                'dropin-input__field-icon--success',
+            ])}>
+          <Icon source={CheckWithCircle} size="16" stroke="2" className="dropin-input--success-icon" viewBox="-1 -1 26 26"/>
+        </div>)}
+    </div>);
+};

package/components/Input/Input.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputProps } from '@adobe/elsie/components/Input';
+/**
+ * Use Input to let users enter and edit text.
+ */
+declare const meta: Meta<InputProps>;
+export default meta;
+type Story = StoryObj<InputProps>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=Input.stories.d.ts.map

package/components/Input/Input.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAS,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAOlE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAuD1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC"}

package/components/Input/Input.stories.jsx

@@ -0,0 +1,115 @@
+import { action } from '@storybook/addon-actions';
+import { Input } from '@adobe/elsie/components/Input';
+import { Cart } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+/**
+ * Use Input to let users enter and edit text.
+ */
+const meta = {
+    title: 'Components/Input',
+    component: Input,
+    argTypes: {
+        name: {
+            description: 'Field name (used for mapping the value in a form)',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        value: {
+            description: 'Field value',
+            type: 'string',
+        },
+        variant: {
+            description: 'Button variant: `primary`, or `secondary`',
+            defaultValue: { summary: 'primary' },
+            type: 'string',
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+        },
+        size: {
+            options: ['medium', 'large'],
+            control: { type: 'radio' },
+        },
+        placeholder: {
+            description: 'placeholder text',
+            control: 'text',
+        },
+        floatingLabel: {
+            description: 'enable floating label',
+            control: 'text',
+        },
+        disabled: {
+            description: 'disable input field',
+            control: 'boolean',
+        },
+        error: {
+            description: 'enable error handling',
+            control: 'boolean',
+        },
+        success: {
+            description: 'enable success handling',
+            control: 'boolean',
+        },
+        icon: {
+            description: 'left ornamental icon',
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        name: 'inputField',
+        value: '',
+        variant: 'primary',
+        size: 'medium',
+        floatingLabel: '',
+        placeholder: 'Placeholder',
+        disabled: false,
+        error: false,
+        success: false,
+        onValue: action('onValue'),
+        maxLength: 20,
+        icon: <Icon source={Cart}/>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const inputField = document.querySelector('input');
+        await userEvent.type(inputField, 'Storybook Test Text! input max length');
+        await expect(await canvas.findByDisplayValue('Storybook Test Text!')).toBeTruthy();
+        await userEvent.clear(inputField);
+        await expect(await canvas.findByDisplayValue('')).toBeTruthy();
+    },
+};
+export const Secondary = {
+    args: {
+        name: 'inputField',
+        value: 'Storybook Test Text!',
+        variant: 'secondary',
+        size: 'medium',
+        floatingLabel: '',
+        placeholder: 'Placeholder',
+        disabled: false,
+        error: false,
+        success: false,
+        onValue: action('onValue'),
+        maxLength: 20,
+        icon: <Icon source={Cart}/>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const inputField = document.querySelector('input');
+        await userEvent.type(inputField, 'Storybook Test Text! input max length');
+        await expect(await canvas.findByDisplayValue('Storybook Test Text!')).toBeTruthy();
+        await userEvent.clear(inputField);
+        await expect(await canvas.findByDisplayValue('')).toBeTruthy();
+    },
+};

package/components/Input/Input.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=Input.test.d.ts.map

package/components/Input/Input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.test.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}