@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,146 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { action } from '@storybook/addon-actions';
+import { Input, InputProps } from '@adobe/elsie/components/Input';
+import { Cart } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { expect, userEvent, within } from '@storybook/test';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use Input to let users enter and edit text.
+ */
+const meta: Meta<InputProps> = {
+  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',
+      },
+    },
+    // Add missing argTypes for InputProps
+    onValue: {
+      description: 'Callback function to handle value change',
+      type: 'function',
+    },
+    maxLength: {
+      description: 'Maximum length of the input field',
+      type: 'number',
+    },
+    onUpdateError: {
+      description: 'Callback function to handle error',
+      type: 'function',
+    },
+    id: {
+      description: 'Field id',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InputProps>;
+
+export const Primary: Story = {
+  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') as HTMLElement;
+    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: Story = {
+  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') as HTMLElement;
+    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/src/components/Input/Input.tsx

@@ -0,0 +1,157 @@
+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 { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { useCallback } from 'preact/hooks';
+
+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 const Input: FunctionComponent<InputProps> = ({
+  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: any) => {
+      if (onValue) {
+        try {
+          await onValue(newValue);
+        } catch (e) {
+          if (onUpdateError) {
+            onUpdateError(e as Error);
+          }
+        }
+      }
+    }, 200),
+    [onValue, onUpdateError]
+  );
+
+  const handleOnValue = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+
+    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/src/components/Input/index.ts

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

package/src/components/InputDate/InputDate.css

@@ -0,0 +1,47 @@
+.dropin-input-date {
+  position: relative;
+  width: 100%;
+}
+
+.dropin-input-date__input {
+  max-height: 56px;
+  z-index: 1;
+}
+
+.dropin-input-date input[type='date'] {
+  height: 56px;
+  max-height: 56px;
+  text-align: left;
+}
+
+.dropin-input-date input[type='date']::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+.dropin-input-date__input--ios {
+  z-index: -1;
+  opacity: 0;
+  position: absolute;
+}
+
+.dropin-input-date__icon {
+  cursor: pointer;
+  background-color: var(--color-neutral-50);
+  position: absolute;
+  top: var(--spacing-small);
+  right: var(--spacing-small);
+  border: 0 none;
+  padding: 1px;
+  z-index: 2;
+}
+
+.dropin-input-date__icon svg {
+  color: var(--color-neutral-800);
+}
+
+.dropin-input-date svg.dropin-input--warning-icon {
+  position: absolute;
+  top: 55%;
+  left: 0;
+  transform: translate(-200%, -50%);
+}

package/src/components/InputDate/InputDate.stories.tsx

@@ -0,0 +1,108 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputDate, InputDateProps } from '@adobe/elsie/components/InputDate';
+import { action } from '@storybook/addon-actions';
+import { expect, userEvent, within } from '@storybook/test';
+
+export default {
+  title: 'Components/InputDate',
+  component: InputDate,
+  parameters: {
+    layout: 'fullscreen', // centered | fullscreen
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    name: 'birthdate',
+    label: 'Birthdate',
+    error: '',
+  },
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Form field identifier.',
+    },
+    value: {
+      control: 'text',
+      description: 'Field value.',
+    },
+    label: {
+      control: 'text',
+      description: 'Displayed field label.',
+    },
+    error: {
+      control: 'text',
+      description: 'Field-specific error messages.',
+    },
+    onChange: {
+      action: 'changed',
+      defaultValue: action('onChange'),
+      description:
+        'Function called when the value of the input changes. It is used to capture and handle the input data.',
+    },
+    onBlur: {
+      action: 'blurred',
+      defaultValue: action('onBlur'),
+      description:
+        'Function called when the input loses focus. This can be used to trigger validation or other effects when the user moves away from the input field.',
+    },
+  },
+} as Meta<InputDateProps>;
+
+const Template: StoryObj<InputDateProps> = {
+  render: (args) => (
+    <div style={{ margin: '40px auto', maxWidth: '1200px' }}>
+      <InputDate {...args} />
+    </div>
+  ),
+};
+
+type Story = StoryObj<InputDateProps>;
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    label: 'Birthdate',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const dateInput = canvas.getByRole('textbox', { name: /date/i });
+    await userEvent.type(dateInput, '2023-07-29');
+    expect(dateInput).toHaveValue('2023-07-29');
+  },
+};
+
+export const WithError: Story = {
+  ...Template,
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    error: 'This field is required',
+  },
+};
+
+export const CustomValue: Story = {
+  ...Template,
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    value: new Date('2023-07-29'),
+  },
+};

package/src/components/InputDate/InputDate.tsx

@@ -0,0 +1,111 @@
+import { FunctionComponent } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+import { classes, isIOSMobileDevice } from '@adobe/elsie/lib';
+import { JSX } from 'preact/compat';
+import { Field, Icon, Input, InputProps } from '@adobe/elsie/components';
+import { Date } from '@adobe/elsie/icons';
+import { useText } from '@adobe/elsie/i18n';
+
+import '@adobe/elsie/components/InputDate/InputDate.css';
+import { useCallback } from 'react';
+
+export interface InputDateProps extends Omit<InputProps, 'error' | 'value'> {
+  label?: string;
+  name?: string;
+  error?: string;
+  value?: Date;
+}
+
+export const InputDate: FunctionComponent<InputDateProps> = ({
+  name = '',
+  error,
+  value,
+  label,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(value?.toString() ?? '');
+  const iosInputRef = useRef<HTMLInputElement>(null);
+  const dictionary = useText({
+    picker: 'Dropin.InputDate.picker',
+  });
+
+  const handleOnFocus: JSX.MouseEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      event.currentTarget.setAttribute('type', 'date');
+
+      if (!isIOSMobileDevice()) return;
+
+      iosInputRef.current.focus();
+    },
+    []
+  );
+
+  const handleOnClick: JSX.MouseEventHandler<HTMLButtonElement> = useCallback(
+    (event) => {
+      const input = event.currentTarget.parentElement?.querySelector('input');
+      input?.focus();
+      input?.showPicker();
+    },
+    []
+  );
+
+  const handleOnBlur: JSX.MouseEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      event.currentTarget.setAttribute('type', 'text');
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
+  const handleInputChange: JSX.MouseEventHandler<HTMLInputElement> =
+    useCallback(
+      (event) => {
+        setInternalValue(event.target.value);
+        onChange?.(event);
+      },
+      [onChange]
+    );
+
+  return (
+    <div className={classes(['dropin-input-date'])}>
+      {/* This simple input is needed only for iOS devices to trigger the date picker. */}
+      {isIOSMobileDevice() ? (
+        <input
+          ref={iosInputRef}
+          data-testid="inputDateIos"
+          className="dropin-input-date__input--ios"
+          type="date"
+          onChange={handleInputChange}
+        />
+      ) : null}
+      <Field error={error}>
+        <Input
+          data-testid="input-date"
+          error={!!error}
+          name={name}
+          value={internalValue}
+          placeholder={label}
+          floatingLabel={label}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onChange={handleInputChange}
+          aria-labelledby={label}
+          className="dropin-input-date__input"
+          {...props}
+        />
+      </Field>
+
+      <button
+        type="button"
+        data-testid="dropin-input-date__icon"
+        className="dropin-input-date__icon"
+        aria-label={dictionary.picker}
+        onClick={handleOnClick}
+      >
+        <Icon source={Date} size="24" />
+      </button>
+    </div>
+  );
+};

package/src/components/InputDate/index.ts

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

package/src/components/InputPassword/InputPassword.css

@@ -0,0 +1,22 @@
+.dropin-input-password {
+  position: relative;
+}
+
+.dropin-input-password > div:first-child {
+  margin-bottom: var(--spacing-small);
+}
+
+.dropin-input-password .dropin-input-password__eye-icon {
+  position: absolute;
+  padding: 0;
+  height: 24px;
+  top: 17px;
+  right: 17px;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.dropin-input-password--error .dropin-input-password__eye-icon {
+  right: var(--spacing-xbig);
+  transition: all 0.3s ease-in-out;
+}