Enhance Code Readability and User Interface of Application

This commit focuses on improving the code readability and user interface of the application. The changes are primarily in the ErrorMessageStandAlone component and the style properties.

Key changes include:

errorMessage.tsx: Refactored the rendering of error messages and error icons to improve readability. This change simplifies the conditional rendering by checking for an error state before rendering the error icon and message.
input.stories.tsx: Removed the icon property from commonArgs, shifting towards using leftIcon and rightIcon properties for icon placement.
styles.ts: Updated padding and alignment properties in commonProps for better alignment and spacing. This includes changing the padding property in inputContainer, updating the text_align property in helpMessage, and adjusting the left and right properties in inputIconContainerRight and inputIconContainerLeft to use constants from SPACINGS.
input.mixin.ts: Modified the getIconPadding function to ensure the padding is correctly calculated when only one value is provided.
These changes enhance the readability of the code and the user interface, leading to a better user experience and easier maintenance.

Author: Hector Arce De Las Heras

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

@@ -54,10 +54,6 @@ function backspace(element) {
   fireEvent.keyUp(element, sharedEventConfig);
 }
 
-global.structuredClone = jest.fn(val => {
-  return JSON.parse(JSON.stringify(val));
-});
-
 const writeText = jest.fn();
 
 Object.assign(navigator, {
@@ -295,7 +291,7 @@ describe('New Input Component', () => {
       informationAssociatedValue: undefined,
       informationAssociatedIcon: undefined,
     };
-    const { container, getByText, getByAltText } = renderProvider(
+    const { container, getByText, getByLabelText } = renderProvider(
       <Input
         {...commonProps}
         {...informationAssociatedConfig}
@@ -308,7 +304,7 @@ describe('New Input Component', () => {
     const errorMessage = getByText('ERROR');
     expect(errorMessage).toBeInTheDocument();
 
-    const errorIcon = getByAltText('Error alt text');
+    const errorIcon = getByLabelText('Error alt text');
     expect(errorIcon).toBeInTheDocument();
     // A11Y and w3c validator
     const results = await axe(container);

src/components/input/components/errorMessage.tsx

@@ -15,23 +15,20 @@ export const ErrorMessageStandAlone = (props: IErrorMessage): JSX.Element => {
       id={props.errorMessageId}
       styles={props.styles}
     >
-      {props.errorMessage?.content && hasError(props.state) ? (
-        <Text
-          customTypography={props.styles?.errorMessage}
-          dataTestId={`${props.dataTestId}ErrorMessage`}
-          {...props.errorMessage}
-        >
-          {props.errorIcon?.icon && (
-            <ErrorIconWrapperStyled styles={props.styles}>
-              <ElementOrIcon
-                customIconStyles={props.styles?.errorMessageIcon}
-                {...props.errorIcon}
-              />
-            </ErrorIconWrapperStyled>
-          )}
-          {props.errorMessage.content}
-        </Text>
-      ) : null}
+      {hasError(props.state) && (
+        <>
+          <ErrorIconWrapperStyled styles={props.styles}>
+            <ElementOrIcon customIconStyles={props.styles?.errorMessageIcon} {...props.errorIcon} />
+          </ErrorIconWrapperStyled>
+          <Text
+            customTypography={props.styles?.errorMessage}
+            dataTestId={`${props.dataTestId}ErrorMessage`}
+            {...props.errorMessage}
+          >
+            {props.errorMessage?.content}
+          </Text>
+        </>
+      )}
     </InputErrorStyled>
   );
 };

src/components/input/components/informationAssociated.tsx

@@ -44,9 +44,7 @@ export const InformationAssociatedStandAlone = (
       />
     ) : (
       <ElementOrIcon
-        color={props.styles?.informationAssociatedIcon?.color}
-        height={props.styles?.informationAssociatedIcon?.height}
-        width={props.styles?.informationAssociatedIcon?.width}
+        customIconStyles={props.styles?.informationAssociatedIcon}
         {...props.informationAssociatedIcon}
       />
     );

src/components/input/index.ts

@@ -5,3 +5,5 @@ export { InputControlled } from './inputControlled';
 export { InputUnControlled as Input } from './inputUnControlled';
 
 export * from './input.styled';
+
+export * from './utils';

src/components/input/input.styled.ts

@@ -52,6 +52,7 @@ export const InfoAssociatedButtonStyled = styled.div<InformationAssociatedStyled
 export const InputErrorAndHelpMessageWrapperStyled = styled.div`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `;
 
 export const InputErrorStyled = styled.div<ErrorMessageStyledProps>`
@@ -179,8 +180,6 @@ export const InputStyled = styled.input<InputStyledProps>`
     cursor: ${cursorPointer};
   `}
 
-  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

@@ -79,7 +79,7 @@ const InputStandAloneComponent = (
         aria-labelledby={buildAriaLabelledBy({
           extraAriaLabelledBy,
           labelId,
-          helpMessage: helpMessage?.content,
+          helpMessage: helpMessage?.content as string,
           helpMessageId,
           errorMessage: errorMessage?.content,
           errorMessageId,

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

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ICONS } from '@/assets';
-import { IconHighlightedType } from '@/components/iconHighlighted';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
@@ -40,15 +39,12 @@ const commonArgs: IInputUnControlled = {
   title: { content: 'Title', component: InputTitleComponentType.H1 },
   errorMessage: { content: 'Error message' },
   errorIcon: { icon: ICONS.ICON_PLACEHOLDER },
-  highlightedInformationAssociatedIcon: {
+  informationAssociatedIcon: {
     icon: ICONS.ICON_PLACEHOLDER,
     altText: 'unicorn alt text',
-    type: IconHighlightedType.INFORMATIVE,
     position: InputIconPosition.LEFT,
   },
   informationAssociatedValue: { content: 'Lorem ipsum dolor sit. Lorem ipsum dolor sit amet' },
-  iconPosition: InputIconPosition.RIGHT,
-  icon: { icon: ICONS.ICON_PLACEHOLDER },
   leftIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'icon alt text' },
   rightIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'icon alt text' },
   secondaryLabel: labelSecondary(themeSelected),

src/designSystem/kubit/components/input/styles.ts

@@ -43,7 +43,6 @@ const commonProps = {
   },
   inputContainer: {
     opacity: '1',
-    padding_left: SPACINGS.spacing_50,
     padding: SPACINGS.spacing_250,
     background_color: COLORS.NEUTRAL.color_neutral_bg_250,
     border_width: BORDERS.border_50,
@@ -57,7 +56,7 @@ const commonProps = {
     color: COLORS.NEUTRAL.color_neutral_font_50,
   },
   helpMessage: {
-    font_align: TEXT_ALIGN.left,
+    text_align: TEXT_ALIGN.left,
     font_weight: FONT_WEIGHT.font_weight_300,
     color: COLORS.NEUTRAL.color_neutral_font_100,
     font_variant: TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
@@ -85,14 +84,14 @@ const commonProps = {
     position: 'absolute',
     top: '50%',
     transform: 'translate(0%, -50%)',
-    left: '0.625rem',
+    left: SPACINGS.spacing_250,
   },
   inputIconContainerRight: {
     position: 'absolute',
     top: '50%',
     transform: 'translate(0%, -50%)',
     left: 'auto',
-    right: '1.1rem',
+    right: SPACINGS.spacing_250,
   },
   loaderContainer: {
     position: 'absolute',
@@ -170,6 +169,7 @@ const errorProps = {
   errorMessageIcon: {
     width: SIZES.size_150,
     height: SIZES.size_150,
+    color: COLORS.FEEDBACK.color_feedbackError_icon_100,
   },
   placeholder: {
     ...commonProps.placeholder,

src/styles/mixins/input.mixin.ts

@@ -193,7 +193,7 @@ export const getIconPadding = (
   rightIcon?: boolean,
   styles?: InputBasicStateProps
 ): CSSProp | undefined => {
-  const padding = styles?.inputContainer?.padding?.split(' ')[1] || null;
+  const padding = styles?.inputContainer?.padding?.split(' ')[1] || styles?.inputContainer?.padding;
   const iconWidth = styles?.inputIcon?.width;
 
   if (leftIcon && rightIcon) {