@adobe-commerce/elsie 1.0.0-alpha04071347

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

@@ -0,0 +1,117 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputDate, InputDateProps } from '@adobe-commerce/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,120 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+import { FunctionComponent } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+import { classes, isIOSMobileDevice } from '@adobe-commerce/elsie/lib';
+import { JSX } from 'preact/compat';
+import { Field, Icon, Input, InputProps } from '@adobe-commerce/elsie/components';
+import { Date } from '@adobe-commerce/elsie/icons';
+import { useText } from '@adobe-commerce/elsie/i18n';
+
+import '@adobe-commerce/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,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/InputDate/InputDate';
+export { InputDate as default } from '@adobe-commerce/elsie/components/InputDate/InputDate';

package/src/components/InputPassword/InputPassword.css

@@ -0,0 +1,31 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+.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;
+}

package/src/components/InputPassword/InputPassword.stories.tsx

@@ -0,0 +1,148 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  InputPassword,
+  InputPasswordProps,
+} from '@adobe-commerce/elsie/components/InputPassword';
+import { expect, userEvent, within, fn } from '@storybook/test';
+
+const meta: Meta<InputPasswordProps> = {
+  title: 'Components/InputPassword',
+  component: InputPassword,
+  parameters: {
+    layout: 'fullscreen', // centered | fullscreen
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    name: 'password',
+    required: true,
+    defaultValue: 'password',
+    minLength: 8,
+    requiredCharacterClasses: 2,
+    hideStatusIndicator: true,
+    validateLengthConfig: {
+      status: 'success',
+      icon: 'success',
+      message: 'Strong password',
+    },
+  },
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Field identifier, used for form data.',
+    },
+    placeholder: {
+      description: 'placeholder text',
+      control: 'text',
+    },
+    floatingLabel: {
+      description: 'enable floating label',
+      control: 'text',
+    },
+    defaultValue: {
+      control: 'text',
+      description:
+        'The initial value of the password field. This is typically used as a default value or placeholder for the password input field in a form.',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Marks field as mandatory.',
+    },
+    errorMessage: {
+      description: 'Sets a custom error message for display in the interface',
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom CSS class name.',
+    },
+    autoComplete: {
+      control: 'text',
+      description: 'Enables browser autocomplete.',
+    },
+    hideStatusIndicator: {
+      control: 'boolean',
+      description: 'Hides the status indicator.',
+    },
+    onValue: {
+      description: 'Callback function to handle value change',
+      type: 'function',
+    },
+    onBlur: {
+      description: 'Callback function to handle blur event',
+      type: 'function',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InputPasswordProps>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    required: true,
+    onBlur: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const passwordInput = document.querySelector('input') as HTMLElement;
+    const toggleButton = document.querySelector(
+      '.dropin-input-password__eye-icon'
+    ) as HTMLElement;
+    expect(passwordInput).toHaveAttribute('type', 'password');
+
+    await userEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute('type', 'text');
+
+    await userEvent.clear(passwordInput);
+    await expect(await canvas.findByDisplayValue('')).toBeTruthy();
+    await userEvent.type(passwordInput, 'passwordtest');
+    await expect(await canvas.findByDisplayValue('passwordtest')).toBeTruthy();
+
+    await userEvent.clear(passwordInput);
+    await expect(await canvas.findByDisplayValue('')).toBeTruthy();
+    await userEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute('type', 'password');
+  },
+};
+
+export const WithError: Story = {
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  render: () => {
+    return (
+      <InputPassword
+        errorMessage={'custom error message'}
+        defaultValue={'error'}
+      />
+    );
+  },
+};

package/src/components/InputPassword/InputPassword.tsx

@@ -0,0 +1,135 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+import { FunctionComponent } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { classes } from '@adobe-commerce/elsie/lib';
+import { Locker, EyeClose, Eye } from '@adobe-commerce/elsie/icons';
+import { Button, Field, Input, Icon } from '@adobe-commerce/elsie/components';
+import { useText } from '@adobe-commerce/elsie/i18n';
+import {
+  PasswordStatusIndicator,
+  PasswordStatusIndicatorProps,
+} from './PasswordStatusIndicator';
+import { HTMLAttributes } from 'preact/compat';
+
+import '@adobe-commerce/elsie/components/InputPassword/InputPassword.css';
+
+export interface InputPasswordProps
+  extends PasswordStatusIndicatorProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'minLength'> {
+  placeholder?: string;
+  floatingLabel?: string;
+  defaultValue?: string;
+  className?: string;
+  name?: string;
+  autoComplete?: string;
+  errorMessage?: string | undefined;
+  required?: boolean;
+  hideStatusIndicator?: boolean;
+  onValue?: (value: any) => void;
+  onBlur?: (event: Event) => void;
+}
+
+export const InputPassword: FunctionComponent<InputPasswordProps> = ({
+  placeholder,
+  floatingLabel,
+  children,
+  name,
+  required,
+  className,
+  minLength,
+  autoComplete,
+  defaultValue = '',
+  hideStatusIndicator = false,
+  uniqueSymbolsStatus,
+  validateLengthConfig,
+  requiredCharacterClasses,
+  errorMessage,
+  onValue,
+  onBlur,
+  ...props
+}) => {
+  const translations = useText({
+    placeholder: 'Dropin.InputPassword.placeholder',
+    floatingLabel: 'Dropin.InputPassword.floatingLabel',
+    buttonShowTitle: 'Dropin.InputPassword.buttonShowTitle',
+    buttonHideTitle: 'Dropin.InputPassword.buttonHideTitle',
+  });
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const toggleShowPassword = useCallback(() => {
+    setShowPassword((prevShowPassword) => !prevShowPassword);
+  }, []);
+
+  const title = !showPassword
+    ? translations.buttonShowTitle
+    : translations.buttonHideTitle;
+
+  return (
+    <div
+      data-testid="passwordFieldInput"
+      className={classes([
+        'dropin-input-password',
+        ['dropin-input-password--error', errorMessage],
+        className,
+      ])}
+      {...props}
+    >
+      <Field error={errorMessage}>
+        <Input
+          autoComplete={autoComplete}
+          name={name ?? 'password'}
+          type={!showPassword ? 'password' : 'text'}
+          placeholder={placeholder || translations.placeholder}
+          floatingLabel={floatingLabel || translations.floatingLabel}
+          aria-label={translations.placeholder}
+          aria-required={required || true}
+          aria-invalid={!!errorMessage}
+          aria-describedby="password-feedback"
+          required={required || false}
+          value={defaultValue}
+          onValue={onValue}
+          icon={<Locker />}
+          onBlur={onBlur}
+          data-testid="passwordInput"
+        />
+      </Field>
+      <Button
+        aria-label={title}
+        title={title}
+        type={'button'}
+        data-testid="toggle-password-icon"
+        variant="tertiary"
+        className={classes([
+          'dropin-input-password__eye-icon',
+          `dropin-input-password__eye-icon--${showPassword ? 'show' : 'hide'}`,
+          className,
+        ])}
+        onClick={toggleShowPassword}
+      >
+        <Icon
+          focusable={false}
+          aria-hidden={showPassword}
+          source={!showPassword ? EyeClose : Eye}
+        />
+      </Button>
+      {hideStatusIndicator ? null : (
+        <PasswordStatusIndicator
+          minLength={minLength}
+          requiredCharacterClasses={requiredCharacterClasses}
+          validateLengthConfig={validateLengthConfig}
+          uniqueSymbolsStatus={uniqueSymbolsStatus}
+        />
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator.css

@@ -0,0 +1,31 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+.dropin-password-status-indicator__item {
+  display: grid;
+  grid-template-columns: 20px auto;
+  align-items: center;
+  justify-content: left;
+  gap: 0 8px;
+
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+.dropin-password-status-indicator__item--pending {
+  color: var(--color-neutral-700, #666);
+}
+
+.dropin-password-status-indicator__item--success {
+  color: var(--color-positive-800, #53824c);
+}
+
+.dropin-password-status-indicator__item--error {
+  color: var(--color-alert-800, #bf4545);
+}

package/src/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator.tsx

@@ -0,0 +1,96 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+import { FunctionComponent, JSX } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import { useText } from '@adobe-commerce/elsie/i18n';
+import {
+  Check,
+  Close as ErrorValidation,
+  Minus as PendingValidation,
+} from '@adobe-commerce/elsie/icons';
+
+import '@adobe-commerce/elsie/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator.css';
+
+type statusTypes = '' | 'success' | 'error' | 'pending';
+
+export interface ValidateLengthConfigProps {
+  status?: statusTypes;
+  icon?: statusTypes;
+  message?: string;
+}
+
+export interface PasswordStatusIndicatorProps {
+  validateLengthConfig?: ValidateLengthConfigProps;
+  uniqueSymbolsStatus?: statusTypes;
+  minLength?: number;
+  requiredCharacterClasses?: number;
+}
+
+const getIcon: { [key: string]: JSX.Element } = {
+  pending: <PendingValidation />,
+  success: <Check />,
+  error: <ErrorValidation style={{ fill: 'red' }} />,
+};
+
+export const PasswordStatusIndicator: FunctionComponent<
+  PasswordStatusIndicatorProps & HTMLAttributes<HTMLDivElement>
+> = ({
+  minLength = 0,
+  requiredCharacterClasses = 0,
+  uniqueSymbolsStatus = 'pending',
+  validateLengthConfig = { status: '', icon: '', message: '' },
+}) => {
+  const translations = useText({
+    chartTwoSymbols: 'Dropin.PasswordStatusIndicator.chartTwoSymbols',
+    chartThreeSymbols: 'Dropin.PasswordStatusIndicator.chartThreeSymbols',
+    chartFourSymbols: 'Dropin.PasswordStatusIndicator.chartFourSymbols',
+  });
+
+  const getMessage = (chart: number) => {
+    switch (chart) {
+      case 2:
+        return translations.chartTwoSymbols;
+      case 3:
+        return translations.chartThreeSymbols;
+      case 4:
+        return translations.chartFourSymbols;
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className={classes(['dropin-password-status-indicator'])}>
+      {minLength > 0 ? (
+        <div
+          className={`dropin-password-status-indicator__item dropin-password-status-indicator__item--${validateLengthConfig.status}`}
+          data-testid={`dropin-password-status-indicator__item--${validateLengthConfig.icon}`}
+        >
+          {getIcon[validateLengthConfig.icon as string]}
+          <span className={`${validateLengthConfig.status}`}>
+            {validateLengthConfig.message}
+          </span>
+        </div>
+      ) : null}
+      {requiredCharacterClasses >= 2 ? (
+        <div
+          className={`dropin-password-status-indicator__item dropin-password-status-indicator__item--${uniqueSymbolsStatus}`}
+          data-testid={`dropin-password-status-indicator__item--${uniqueSymbolsStatus}`}
+        >
+          {getIcon[uniqueSymbolsStatus]}
+          <span className={`pending`}>
+            {getMessage(requiredCharacterClasses)}
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+};