Improve input styles with new mixins

Author: Hector Arce De Las Heras

src/styles/mixins/__tests__/input.mixin.utils.test.ts

@@ -0,0 +1,92 @@
+import {
+  getPaddingLeft,
+  getPaddingLeftFromContainer,
+  getPaddingRight,
+  getPaddingRightFromContainer,
+} from '../input.mixin.utils';
+
+describe('getPaddingLeft', () => {
+  it('should return undefined when padding is not provided', () => {
+    expect(getPaddingLeft()).toBeUndefined();
+  });
+
+  it('should return the same value when padding is provided for all sides', () => {
+    expect(getPaddingLeft('10px')).toBe('10px');
+  });
+
+  it('should return the horizontal padding when vertical and horizontal padding are provided', () => {
+    expect(getPaddingLeft('10px 20px')).toBe('20px');
+  });
+
+  it('should return the horizontal padding when top, horizontal, and bottom padding are provided', () => {
+    expect(getPaddingLeft('10px 20px 30px')).toBe('20px');
+  });
+
+  it('should return the left padding when padding is provided for all four sides', () => {
+    expect(getPaddingLeft('10px 20px 30px 40px')).toBe('40px');
+  });
+
+  it('should return undefined when padding format is not recognized', () => {
+    expect(getPaddingLeft('10px 20px 30px 40px 50px')).toBeUndefined();
+  });
+});
+
+describe('getPaddingRight', () => {
+  it('should return undefined when padding is not provided', () => {
+    expect(getPaddingRight()).toBeUndefined();
+  });
+
+  it('should return the same value when padding is provided for all sides', () => {
+    expect(getPaddingRight('10px')).toBe('10px');
+  });
+
+  it('should return the horizontal padding when vertical and horizontal padding are provided', () => {
+    expect(getPaddingRight('10px 20px')).toBe('20px');
+  });
+
+  it('should return the horizontal padding when top, horizontal, and bottom padding are provided', () => {
+    expect(getPaddingRight('10px 20px 30px')).toBe('20px');
+  });
+
+  it('should return the right padding when padding is provided for all four sides', () => {
+    expect(getPaddingRight('10px 20px 30px 40px')).toBe('20px');
+  });
+
+  it('should return undefined when padding format is not recognized', () => {
+    expect(getPaddingRight('10px 20px 30px 40px 50px')).toBeUndefined();
+  });
+});
+
+describe('getPaddingLeftFromContainer', () => {
+  it('should return padding_left when it is defined', () => {
+    const container = { padding_left: '10px' };
+    expect(getPaddingLeftFromContainer(container)).toBe('10px');
+  });
+
+  it('should return padding from getPaddingLeft when padding_left is not defined', () => {
+    const container = { padding: '10px 20px 30px 40px' };
+    expect(getPaddingLeftFromContainer(container)).toBe('40px');
+  });
+
+  it('should return "0rem" when neither padding_left nor padding is defined', () => {
+    const container = {};
+    expect(getPaddingLeftFromContainer(container)).toBe('0rem');
+  });
+});
+
+describe('getPaddingRightFromContainer', () => {
+  it('should return padding_right when it is defined', () => {
+    const container = { padding_right: '10px' };
+    expect(getPaddingRightFromContainer(container)).toBe('10px');
+  });
+
+  it('should return padding from getPaddingRight when padding_right is not defined', () => {
+    const container = { padding: '10px 20px 30px 40px' };
+    expect(getPaddingRightFromContainer(container)).toBe('20px');
+  });
+
+  it('should return "0rem" when neither padding_right nor padding is defined', () => {
+    const container = {};
+    expect(getPaddingRightFromContainer(container)).toBe('0rem');
+  });
+});

src/styles/mixins/input.mixin.ts

@@ -10,6 +10,8 @@ import { InputStyledProps, LabelStyledProps } from '@/components/input/types/inp
 import { getTypographyStyles } from '@/utils';
 import { pxToRem } from '@/utils/pxToRem/pxToRem';
 
+import { getPaddingLeftFromContainer, getPaddingRightFromContainer } from './input.mixin.utils';
+
 const isStandardLabel = (labelType: string | undefined): boolean => {
   return labelType === LABEL_TYPE.STANDARD;
 };
@@ -175,16 +177,17 @@ export const getIconPaddingDeprecated = (
   position?: InputIconPosition,
   styles?: InputBasicStateProps
 ): CSSProp => {
-  const padding = styles?.inputContainer?.padding?.split(' ')[1] || null;
   const iconWidth = styles?.inputIcon?.width;
 
   if (position === InputIconPosition.RIGHT) {
+    const paddingRight = getPaddingRightFromContainer(styles?.inputContainer);
     return css`
-      padding-right: calc(${padding} + ${iconWidth});
+      padding-right: calc(${paddingRight} + ${iconWidth});
     `;
   }
+  const paddingLeft = getPaddingLeftFromContainer(styles?.inputContainer);
   return css`
-    padding-left: calc(${padding} + ${iconWidth});
+    padding-left: calc(${paddingLeft} + ${iconWidth});
   `;
 };
 
@@ -193,21 +196,24 @@ export const getIconPadding = (
   rightIcon?: boolean,
   styles?: InputBasicStateProps
 ): CSSProp | undefined => {
-  const padding = styles?.inputContainer?.padding?.split(' ')[1] || styles?.inputContainer?.padding;
   const iconWidth = styles?.inputIcon?.width;
 
   if (leftIcon && rightIcon) {
+    const paddingLeft = getPaddingLeftFromContainer(styles?.inputContainer);
+    const paddingRight = getPaddingRightFromContainer(styles?.inputContainer);
     return css`
-      padding-left: calc(${padding} + ${iconWidth});
-      padding-right: calc(${padding} + ${iconWidth});
+      padding-left: calc(${paddingLeft} + ${iconWidth});
+      padding-right: calc(${paddingRight} + ${iconWidth});
     `;
   } else if (leftIcon) {
+    const paddingLeft = getPaddingLeftFromContainer(styles?.inputContainer);
     return css`
-      padding-left: calc(${padding} + ${iconWidth});
+      padding-left: calc(${paddingLeft} + ${iconWidth});
     `;
   } else if (rightIcon) {
+    const paddingRight = getPaddingRightFromContainer(styles?.inputContainer);
     return css`
-      padding-right: calc(${padding} + ${iconWidth});
+      padding-right: calc(${paddingRight} + ${iconWidth});
     `;
   }
   return undefined;

src/styles/mixins/input.mixin.utils.ts

@@ -0,0 +1,47 @@
+import { CommonStyleType } from '@/types';
+
+export const getPaddingLeft = (padding?: string): string | undefined => {
+  if (!padding) {
+    return undefined;
+  }
+  const values = padding.split(' ');
+  switch (values.length) {
+    case 1: // All four sides are the same
+      return values[0];
+    case 2: // Vertical | Horizontal
+      return values[1];
+    case 3: // Top | Horizontal | Bottom
+      return values[1];
+    case 4: // Top | Right | Bottom | Left
+      return values[3];
+    default:
+      return undefined;
+  }
+};
+
+export const getPaddingRight = (padding?: string): string | undefined => {
+  if (!padding) {
+    return undefined;
+  }
+  const values = padding.split(' ');
+  switch (values.length) {
+    case 1: // All four sides are the same
+      return values[0];
+    case 2: // Vertical | Horizontal
+      return values[1];
+    case 3: // Top | Horizontal | Bottom
+      return values[1];
+    case 4: // Top | Right | Bottom | Left
+      return values[1];
+    default:
+      return undefined;
+  }
+};
+
+export const getPaddingLeftFromContainer = (container?: CommonStyleType): string | undefined => {
+  return container?.padding_left ?? getPaddingLeft(container?.padding) ?? '0rem';
+};
+
+export const getPaddingRightFromContainer = (container?: CommonStyleType): string | undefined => {
+  return container?.padding_right ?? getPaddingRight(container?.padding) ?? '0rem';
+};