Add prefixNode Prop to InputPhone Component

This commit introduces a new prefixNode prop to the InputPhone component. This new prop enhances the flexibility of the component, allowing users to add a custom prefix node to the input field. This can be particularly useful for displaying additional information or customizing the input field's appearance.

Author: Hector Arce De Las Heras

src/components/input/types/input.ts

@@ -251,7 +251,7 @@ export type IInformationAssociated = IInformationAssociatedDecoration & {
 };
 
 export type InputHelpMessageType = Omit<IText<string>, 'children'> & {
-  content?: string;
+  content?: React.ReactNode | string;
 };
 
 export interface IHelpMessage {

src/components/input/utils/aria.utils.ts

@@ -12,7 +12,7 @@ export const buildAriaLabelledBy = ({
 }: {
   labelId: string;
   extraAriaLabelledBy?: string;
-  helpMessage?: string;
+  helpMessage?: React.ReactNode;
   helpMessageId?: string;
   errorMessage?: string;
   errorMessageId: string;

src/components/inputPhone/inputPhoneStandAlone.tsx

@@ -41,31 +41,37 @@ export const InputPhoneStandAloneComponent = (
   const flagSize = props.flag.size ?? props.styles?.[props.state]?.affixIconHighlighted?.size;
   const renderAffix = () => (
     <AffixStyled ref={measuredRef} id={extraAriaLabelledBy} styles={props.styles?.[props.state]}>
-      <AffixIconWrapperStyled styles={props.styles?.[props.state]}>
-        {props.flag.type && flagVariant && flagSize ? (
-          <IconHighlighted
-            backgroundColor={props.styles?.[props.state]?.affixIconHighlighted?.backgroundColor}
-            size={
-              props.styles?.[props.state]?.affixIconHighlighted?.size as IconHighlightedSizeType
-            }
-            variant={props.styles?.[props.state]?.affixIconHighlighted?.variant}
-            {...props.flag}
-          />
-        ) : (
-          <ElementOrIcon
-            height={props.styles?.[props.state]?.affixIcon?.height}
-            width={props.styles?.[props.state]?.affixIcon?.width}
-            {...props.flag}
-          />
-        )}
-      </AffixIconWrapperStyled>
-      <Text
-        customTypography={props.styles?.[props.state]?.affix}
-        dataTestId={`${props.dataTestId}Suffix`}
-        {...props.prefix}
-      >
-        {props.prefix.content}
-      </Text>
+      {props.prefixNode ? (
+        props.prefixNode
+      ) : (
+        <>
+          <AffixIconWrapperStyled styles={props.styles?.[props.state]}>
+            {props.flag.type && flagVariant && flagSize ? (
+              <IconHighlighted
+                backgroundColor={props.styles?.[props.state]?.affixIconHighlighted?.backgroundColor}
+                size={
+                  props.styles?.[props.state]?.affixIconHighlighted?.size as IconHighlightedSizeType
+                }
+                variant={props.styles?.[props.state]?.affixIconHighlighted?.variant}
+                {...props.flag}
+              />
+            ) : (
+              <ElementOrIcon
+                height={props.styles?.[props.state]?.affixIcon?.height}
+                width={props.styles?.[props.state]?.affixIcon?.width}
+                {...props.flag}
+              />
+            )}
+          </AffixIconWrapperStyled>
+          <Text
+            customTypography={props.styles?.[props.state]?.affix}
+            dataTestId={`${props.dataTestId}Suffix`}
+            {...props.prefix}
+          >
+            {props.prefix?.content}
+          </Text>
+        </>
+      )}
     </AffixStyled>
   );
 

src/components/inputPhone/stories/argtypes.ts

@@ -62,5 +62,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    prefixNode: {
+      description:
+        'Node to show into prefix container. If this prop is passed, the prefix prop will be ignored',
+      control: { type: 'string' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
   };
 };

src/components/inputPhone/types/inputPhone.ts

@@ -26,7 +26,8 @@ export type InputPhonePrefixType = Omit<IText<string>, 'children'> & {
 export interface IInputPhoneStandAlone extends Omit<IInputStandAlone, propsToOmitInputBasic> {
   styles: InputPhoneStylesProps;
   flag: InputPhoneFlagType;
-  prefix: InputPhonePrefixType;
+  prefix?: InputPhonePrefixType;
+  prefixNode?: React.ReactNode;
   inputVariant?: string;
 }