Enhance Input Component with Left and Right Icons and Update Related Elements

 This commit enhances the Input component by introducing left and right icons, updates the InputIcon component, and revises the test cases. It also includes a few deprecations and minor changes to the stories and styles.

Changes include:

Input component in inputStandAlone.tsx now includes left and right icons, providing more flexibility in the design of the input fields.
InputIcon component in inputIcon.tsx has been updated to support left and right icons. A deprecated version of the component has been introduced to support the old icon prop until it is removed.
Test cases in input.test.tsx have been updated to reflect the changes made to the Input component, including testing for the new left and right icons.
The icon and iconPosition props in the Input component in input.ts have been deprecated. They will be replaced with leftIcon and rightIcon in a future update.
Stories in stories.tsx have been updated to include examples of the new left and right icons.
Styles in input.styled.ts have been updated to accommodate the new left and right icons.
These changes enhance the functionality and flexibility of the Input component.

Author: Hector Arce De Las Heras

src/components/input/__tests__/input.test.tsx

@@ -155,12 +155,12 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('Should call onIconClick when user click on icon', async () => {
+  it('Should call onLeftIconClick when user click on left icon', async () => {
     const onIconClick = jest.fn();
     const { container, getByRole } = renderProvider(
       <Input
         {...commonProps}
-        icon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
+        leftIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
         placeholder={'placeholder'}
       />
     );
@@ -175,6 +175,26 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Should call onRightIconClick when user click on right icon', async () => {
+    const onIconClick = jest.fn();
+    const { container, getByRole } = renderProvider(
+      <Input
+        {...commonProps}
+        placeholder={'placeholder'}
+        rightIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
+      />
+    );
+
+    const triggerButton = getByRole('button', { name: 'Open Info' });
+    fireEvent.click(triggerButton);
+    expect(onIconClick).toHaveBeenCalled();
+
+    // A11Y and w3c validator
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
   it('Should be autoformated the text with mask', async () => {
     const onChange = jest.fn();
     const { container, getByRole } = renderProvider(
@@ -348,12 +368,36 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('Should show icon as img instead of as button', async () => {
+  it('Should show left icon as img instead of as button', async () => {
+    const iconClick = jest.fn();
+    const { container, getByRole } = renderProvider(
+      <Input
+        {...commonProps}
+        leftIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: iconClick }}
+        placeholder={'placeholder'}
+      />
+    );
+
+    const triggerButton = getByRole('button', { name: 'Open Info' });
+    expect(triggerButton).toBeInTheDocument();
+
+    fireEvent.click(triggerButton);
+
+    expect(iconClick).toHaveBeenCalled();
+
+    // A11Y and w3c validator
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Should show right icon as img instead of as button', async () => {
+    const iconClick = jest.fn();
     const { container, getByRole } = renderProvider(
       <Input
         {...commonProps}
-        icon={{ icon: 'UNICORN', altText: 'Open Info' }}
         placeholder={'placeholder'}
+        rightIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: iconClick }}
       />
     );
 

src/components/input/components/inputIcon.tsx

@@ -9,6 +9,36 @@ import { IInputIcon } from '../types/input';
 const InputIconStandAloneComponent = (
   props: IInputIcon,
   ref: React.ForwardedRef<HTMLDivElement>
+): JSX.Element | null => {
+  const icon = props.leftIcon || props.rightIcon;
+  if (!icon || props.loading) {
+    return null;
+  }
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
+    props.rightIcon?.onClick?.(event);
+    props.leftIcon?.onClick?.(event);
+  };
+
+  return (
+    <InputIconStyled ref={ref} iconPosition={props.iconPosition} styles={props.styles}>
+      <ElementOrIcon
+        customIconStyles={props.styles?.inputIcon}
+        disabled={props.disabled}
+        {...props.rightIcon}
+        {...props.leftIcon}
+        onClick={onClick}
+      />
+    </InputIconStyled>
+  );
+};
+
+export const InputIconStandAlone = React.forwardRef(InputIconStandAloneComponent);
+
+// deprecated - remove this function when icon prop is removed
+const InputIconStandAloneDeprecatedComponent = (
+  props: IInputIcon,
+  ref: React.ForwardedRef<HTMLDivElement>
 ): JSX.Element | null => {
   if (!props.icon || props.loading) {
     return null;
@@ -29,4 +59,6 @@ const InputIconStandAloneComponent = (
   );
 };
 
-export const InputIconStandAlone = React.forwardRef(InputIconStandAloneComponent);
+export const InputIconStandAloneDeprecated = React.forwardRef(
+  InputIconStandAloneDeprecatedComponent
+);

src/components/input/components/stories/stories.tsx

@@ -1,7 +1,22 @@
 import * as React from 'react';
 
+import { ICONS } from '@/assets';
 import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
 
+const themeWithAdditionalInfo = [
+  'kubit',
+  'flameLightAlt',
+  'modelBankLightAlt',
+  'horizonLightAlt',
+  'novaLightAlt',
+  'flameLightRegular',
+  'modelBankLightRegular',
+  'horizonLightRegular',
+  'novaLightRegular',
+];
+
+const themeWithoutIcon = themeWithAdditionalInfo.filter(theme => theme !== 'kubit');
+
 // LabelSecondary
 const labelSecondaryStyles = {
   display: 'inline-flex',
@@ -10,16 +25,14 @@ const labelSecondaryStyles = {
   fontWeight: '400',
 };
 
-const themeWithAdditionalInfo = ['kubit'];
-
 export const labelSecondary = (themeSelected: string): React.ReactNode =>
   themeWithAdditionalInfo.includes(themeSelected) && (
     <div style={labelSecondaryStyles}>
       <ReplaceContent width={'fit-content'} />
     </div>
   );
 
-// AddiotionalInfo
+// AdditionalInfo
 const additionalInfoStyles = {
   marginLeft: '0.25rem',
   fontSize: '0.875rem',
@@ -32,3 +45,7 @@ export const additionalInfoAction = (themeSelected: string): React.ReactNode =>
       <ReplaceContent width={'fit-content'} />
     </div>
   );
+
+// Icon
+export const inputIcon = (themeSelected: string): string | undefined =>
+  themeWithoutIcon.includes(themeSelected) ? undefined : ICONS.ICON_PLACEHOLDER;

src/components/input/input.styled.ts

@@ -2,7 +2,8 @@ import styled, { css } from 'styled-components';
 
 // mixins
 import {
-  getPaddingRight,
+  getIconPadding,
+  getIconPaddingDeprecated,
   inputFocusWidthMixin,
   mapBaseStyles,
   mapLabelTypeStyles,
@@ -86,12 +87,13 @@ export const LoaderWrapperStyled = styled.div<LoaderStyledProps>`
 `;
 
 export const InputIconStyled = styled.div<InputIconStyledProps>`
-  ${({ styles }) => getStyles(styles?.inputIconContainer)};
-  ${({ iconPosition, styles }) =>
-    iconPosition === InputIconPosition.RIGHT &&
-    css`
-      ${getStyles(styles?.inputIconContainerRight)};
-    `};
+  ${({ iconPosition, styles }) => css`
+    ${getStyles(
+      iconPosition === InputIconPosition.RIGHT
+        ? styles?.inputIconContainerRight
+        : styles?.inputIconContainer
+    )};
+  `}
 `;
 
 // Input Styles
@@ -135,14 +137,18 @@ export const InputStyled = styled.input<InputStyledProps>`
 
   &:not(:placeholder-shown) {
     ${({ styles }) => mapVariableStyles(styles?.[InputState.FILLED])}
-    ${({ icon, iconPosition, styles, state }) =>
-      icon && iconPosition === InputIconPosition.RIGHT ? getPaddingRight(styles?.[state]) : ''}
+    ${({ icon, iconPosition, leftIcon, rightIcon, styles, state }) =>
+      icon
+        ? getIconPaddingDeprecated(iconPosition, styles?.[state])
+        : getIconPadding(!!leftIcon?.icon, !!rightIcon?.icon, styles?.[state])}
   }
 
   &:placeholder-shown {
     ${({ styles }) => mapVariableStyles(styles?.[InputState.EMPTY])}
-    ${({ icon, iconPosition, styles, state }) =>
-      icon && iconPosition === InputIconPosition.RIGHT ? getPaddingRight(styles?.[state]) : ''}
+    ${({ icon, iconPosition, leftIcon, rightIcon, styles, state }) =>
+      icon
+        ? getIconPaddingDeprecated(iconPosition, styles?.[state])
+        : getIconPadding(!!leftIcon?.icon, !!rightIcon?.icon, styles?.[state])}
   }
 
   &:disabled {
@@ -173,8 +179,8 @@ export const InputStyled = styled.input<InputStyledProps>`
     cursor: ${cursorPointer};
   `}
 
-  padding-left: ${({ styles, state, iconPosition }) =>
-    iconPosition === InputIconPosition.LEFT && styles?.[state]?.inputContainer?.padding_left};
+  padding-left: ${({ styles, state, leftIcon }) =>
+    leftIcon && styles?.[state]?.inputContainer?.padding_left};
   box-shadow: ${({ styles, state }) => styles?.[state]?.inputContainer?.box_shadow};
   ${({
     theme: {

src/components/input/inputStandAlone.tsx

@@ -8,6 +8,7 @@ import {
   HelpMessageStandAlone,
   InformationAssociatedStandAlone,
   InputIconStandAlone,
+  InputIconStandAloneDeprecated,
   LabelStandAlone,
   LoaderStandAlone,
   TextCountStandAlone,
@@ -26,6 +27,7 @@ import {
   AUTOCOMPLETE_TYPE,
   IInputStandAlone,
   InputHelpMessagePosition,
+  InputIconPosition,
   LABEL_TYPE,
   MultipleRef,
 } from './types';
@@ -49,10 +51,23 @@ const InputStandAloneComponent = (
   const helpMessageId = `${props.inputId}HelpText`;
   const errorMessageId = `${props.inputId}Error`;
   const labelId = `${props.inputId}Label`;
-
+  // eslint-disable-next-line complexity
   const buildInput = () => (
     <InputWrapperStyled styles={styles?.[state]}>
       <LoaderStandAlone loader={props.loader} loading={props.loading} styles={styles?.[state]} />
+      <InputIconStandAlone
+        ref={
+          ref && 'refLeftIcon' in ref
+            ? ((ref as unknown as MultipleRef)
+                ?.refLeftIcon as React.MutableRefObject<HTMLDivElement>)
+            : undefined
+        }
+        disabled={isDisabled(state)}
+        iconPosition={InputIconPosition.LEFT}
+        leftIcon={props.leftIcon}
+        state={state}
+        styles={styles?.[state]}
+      />
       <InputStyled
         ref={
           ref && 'refInput' in ref
@@ -82,13 +97,15 @@ const InputStandAloneComponent = (
         id={props.inputId}
         inputMode={inputMode}
         labelType={styles?.[state]?.label?.type}
+        leftIcon={props.leftIcon}
         max={props.max}
         maxLength={props.maxLength}
         min={props.min}
         minLength={props.minLength}
         name={props.name}
         placeholder={props.placeholder}
         required={props.required}
+        rightIcon={props.rightIcon}
         role={props.role}
         state={state}
         styles={styles}
@@ -111,6 +128,20 @@ const InputStandAloneComponent = (
         }}
       />
       <InputIconStandAlone
+        ref={
+          ref && 'refRightIcon' in ref
+            ? ((ref as unknown as MultipleRef)
+                ?.refRightIcon as React.MutableRefObject<HTMLDivElement>)
+            : undefined
+        }
+        disabled={isDisabled(state)}
+        iconPosition={InputIconPosition.RIGHT}
+        rightIcon={props.rightIcon}
+        state={state}
+        styles={styles?.[state]}
+      />
+      {/* remove this <InputIconStandalone> when prop `icon` is removed */}
+      <InputIconStandAloneDeprecated
         ref={
           ref && 'refIcon' in ref
             ? ((ref as unknown as MultipleRef)?.refIcon as React.MutableRefObject<HTMLDivElement>)

src/components/input/stories/argtypes.ts

@@ -26,6 +26,19 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    errorMessageIcon: {
+      type: { name: 'object' },
+      description:
+        'In the error state, the field is accompanied by an error icon and a description of the problem to help resolve it.',
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    // deprecated - remove when `errorMessageIcon` prop is removed
     errorIcon: {
       description:
         'Object with error icon properties. In the error state, the field is accompanied by an error mbIcon and a description of the problem to help resolve it.',
@@ -63,6 +76,30 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
           detail: Object.keys(InputIconPosition).join(', '),
         },
         defaultValue: { summary: InputIconPosition.RIGHT },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    leftIcon: {
+      description: 'Icon to show on the left side of the input',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+          detail: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    rightIcon: {
+      description: 'Icon to show on the right side of the input',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+          detail: 'IElementOrIcon',
+        },
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },

src/components/inputDropdown/hooks/__tests__/useInputDropdown.test.ts

@@ -42,6 +42,11 @@ const mockProps = {
     },
   },
   type: InputTypeType.TEXT,
+  rightIcon: {
+    icon: 'UNICORN',
+    altText: 'Open info',
+    onClick: jest.fn(),
+  },
 };
 
 jest.useFakeTimers();
@@ -111,6 +116,7 @@ test('handleClickIconInputDropdown function', async () => {
       ...mockProps,
       onOpenCloseOptions: mockOnOpenCloseOptions,
       onIconClick: mockOnIconClick,
+      onRightIconClick: mockOnIconClick,
       value: 'label1',
     })
   );