Enhance Styling Flexibility of InputCurrencyStandAloneComponent

This commit enhances the InputCurrencyStandAloneComponent and its associated types, allowing for more flexible styling options. The changes introduce optional extra styles for different positions (top, bottom, left, right, center).

Key changes include:

inputCurrencyStandAlone.tsx: The InputCurrencyStandAloneComponent has been updated to check if there are any specific styles defined for different positions in the props. If these styles are not defined, it falls back to the default getExtraStyles function.
inputCurrencyTheme.ts: New optional style properties (leftExtraStyles, centerExtraStyles, rightExtraStyles, topExtraStyles, bottomExtraStyles) have been added to the InputCurrencyStateProps type. These properties accept CSS props, allowing for custom styles to be applied to the different positions of the InputCurrencyStandAloneComponent.
These changes provide more flexibility in styling the InputCurrencyStandAloneComponent, enhancing its usability and adaptability.

Author: Hector Arce De Las Heras

src/components/inputCurrency/inputCurrencyStandAlone.tsx

@@ -71,50 +71,65 @@ export const InputCurrencyStandAloneComponent = (
   return (
     <Input
       ref={ref}
-      bottomExtraStyles={getExtraStyles(
-        POSITIONS.BOTTOM,
-        props.currencyPosition,
-        width,
-        props.currencyNameContainerPosition === InputContentPosition.OUT ||
-          props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
-        props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
-      )}
-      centerExtraStyles={getExtraStyles(
-        POSITIONS.CENTER,
-        props.currencyPosition,
-        width,
-        props.currencyNameContainerPosition === InputContentPosition.OUT ||
-          props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT
-      )}
+      bottomExtraStyles={
+        props.styles?.[props.state]?.bottomExtraStyles ??
+        getExtraStyles(
+          POSITIONS.BOTTOM,
+          props.currencyPosition,
+          width,
+          props.currencyNameContainerPosition === InputContentPosition.OUT ||
+            props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
+          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
+        )
+      }
+      centerExtraStyles={
+        props.styles?.[props.state]?.centerExtraStyles ??
+        getExtraStyles(
+          POSITIONS.CENTER,
+          props.currencyPosition,
+          width,
+          props.currencyNameContainerPosition === InputContentPosition.OUT ||
+            props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT
+        )
+      }
       extraAriaLabelledBy={extraAriaLabelledBy}
       id={inputId}
       leftContent={props.currencyPosition === POSITIONS.LEFT ? renderAffix() : undefined}
-      leftExtraStyles={getExtraStyles(
-        POSITIONS.LEFT,
-        props.currencyPosition,
-        width,
-        props.currencyNameContainerPosition === InputContentPosition.OUT ||
-          props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
-        props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
-      )}
+      leftExtraStyles={
+        props.styles?.[props.state]?.leftExtraStyles ??
+        getExtraStyles(
+          POSITIONS.LEFT,
+          props.currencyPosition,
+          width,
+          props.currencyNameContainerPosition === InputContentPosition.OUT ||
+            props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
+          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
+        )
+      }
       overrideStyles={props.styles}
       rightContent={props.currencyPosition === POSITIONS.RIGHT ? renderAffix() : undefined}
-      rightExtraStyles={getExtraStyles(
-        POSITIONS.RIGHT,
-        props.currencyPosition,
-        width,
-        props.currencyNameContainerPosition === InputContentPosition.OUT ||
-          props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
-        props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
-      )}
-      topExtraStyles={getExtraStyles(
-        POSITIONS.TOP,
-        props.currencyPosition,
-        width,
-        props.currencyNameContainerPosition === InputContentPosition.OUT ||
-          props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
-        props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
-      )}
+      rightExtraStyles={
+        props.styles?.[props.state]?.rightExtraStyles ??
+        getExtraStyles(
+          POSITIONS.RIGHT,
+          props.currencyPosition,
+          width,
+          props.currencyNameContainerPosition === InputContentPosition.OUT ||
+            props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
+          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
+        )
+      }
+      topExtraStyles={
+        props.styles?.[props.state]?.topExtraStyles ??
+        getExtraStyles(
+          POSITIONS.TOP,
+          props.currencyPosition,
+          width,
+          props.currencyNameContainerPosition === InputContentPosition.OUT ||
+            props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
+          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
+        )
+      }
       truncate={true}
       variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}
       {...props}

src/components/inputCurrency/types/inputCurrencyTheme.ts

@@ -1,3 +1,5 @@
+import { CSSProp } from 'styled-components';
+
 import {
   InputBasicStateProps,
   InputContentPosition,
@@ -12,6 +14,11 @@ export type InputCurrencyStateProps = InputBasicStateProps & {
   currencyNameContainerPosition?: InputContentPosition;
   currencyName?: TypographyTypes;
   inputVariant?: string;
+  leftExtraStyles?: CSSProp;
+  centerExtraStyles?: CSSProp;
+  rightExtraStyles?: CSSProp;
+  topExtraStyles?: CSSProp;
+  bottomExtraStyles?: CSSProp;
 };
 
 export type InputCurrencyStylesProps = {