Add prefixNode prop to InputPhone component

This commit introduces a new prop, prefixNode, to the InputPhone component. This allows for greater flexibility in customizing the component, as users can now provide a custom node to be rendered as a prefix in the input field. This enhances the component's versatility and adaptability to various use cases.

Author: Hector Arce De Las Heras

src/components/inputDropdown/inputDropdown.styled.ts

@@ -23,10 +23,11 @@ type InputDropdownCustomHeightType = {
   useActionBottomSheet?: boolean;
 };
 
-export const InputDropdownStyled = styled.div`
+export const InputDropdownStyled = styled.div<InputDropdownStylesType>`
   position: relative;
   display: flex;
   flex-direction: column;
+  ${({ styles }) => getStyles(styles?.inputDropdownContainer)}
 `;
 
 const buildHeight = ({
@@ -57,7 +58,7 @@ export const ListContainerStyled = styled.div<
   InputDropdownStylesType & InputDropdownCustomHeightType
 >`
   transition: height 200ms;
-  ${({ styles }) => getStyles(styles?.searchListContainer)}/* div { */
+  ${({ styles }) => getStyles(styles?.searchListContainer)}
 `;
 
 export const InputDropdownListStyled = styled.div<

src/components/inputDropdown/inputDropdown.tsx

@@ -135,7 +135,7 @@ const InputDropdownBoundary = <V extends string | unknown>(
       </FallbackComponent>
     }
   >
-    <InputDropdownComponent {...props} />
+    <InputDropdownComponent {...props} ref={ref} />
   </ErrorBoundary>
 );
 

src/components/inputDropdown/inputDropdownStandAlone.tsx

@@ -26,6 +26,7 @@ export const InputDropdownStandAloneComponent = (
   return (
     <InputDropdownStyled
       data-testid={`${props.dataTestId}InputDropdown`}
+      styles={props.styles?.[props.state]}
       onKeyDown={e => {
         if (props.device === DeviceBreakpointsType.DESKTOP && isKeyTabPressed(e.key)) {
           props.onOpenOptions(false);

src/components/inputDropdown/stories/inputDropdown.stories.tsx

@@ -58,6 +58,7 @@ const commonArgs: IInputDropdown = {
         label: 'option 2',
       },
     ],
+    ['aria-label']: 'Label',
   },
 };
 

src/components/inputDropdown/types/inputDropdown.ts

@@ -14,11 +14,16 @@ import {
   InputDropdownStylesProps,
 } from './inputDropdownTheme';
 
+export type InputDropdownOptionsAriasTypes = Pick<
+  React.AriaAttributes,
+  'aria-label' | 'aria-labelledby'
+>;
+
 export type InputDropdownOptionsType = {
   options: ListOptionsOptionType[];
   optionVariant?: string;
   listOptionsVariant?: string;
-};
+} & InputDropdownOptionsAriasTypes;
 
 export interface IPopoverDropdownList {
   open: boolean;

src/components/inputDropdown/types/inputDropdownTheme.ts

@@ -7,6 +7,7 @@ export type InputDropdownStateProps = InputBasicStateProps & {
   popoverVariant?: { [key in DeviceBreakpointsType]?: string };
   useActionBottomSheet?: { [key in DeviceBreakpointsType]?: boolean };
   actionBottomSheetVariant?: string;
+  inputDropdownContainer?: CommonStyleType;
   searchListContainer?: CommonStyleType;
   searchListSubContainer?: CommonStyleType;
   loaderExpandedContainer?: CommonStyleType;

src/components/inputPhone/inputPhoneStandAlone.tsx

@@ -37,16 +37,16 @@ export const InputPhoneStandAloneComponent = (
     : inputAffixId;
 
   const flagVariant =
-    props.flag.variant ?? props.styles?.[props.state]?.affixIconHighlighted?.variant;
-  const flagSize = props.flag.size ?? props.styles?.[props.state]?.affixIconHighlighted?.size;
+    props.flag?.variant ?? props.styles?.[props.state]?.affixIconHighlighted?.variant;
+  const flagSize = props.flag?.size ?? props.styles?.[props.state]?.affixIconHighlighted?.size;
   const renderAffix = () => (
     <AffixStyled ref={measuredRef} id={extraAriaLabelledBy} styles={props.styles?.[props.state]}>
       {props.prefixNode ? (
         props.prefixNode
       ) : (
         <>
           <AffixIconWrapperStyled styles={props.styles?.[props.state]}>
-            {props.flag.type && flagVariant && flagSize ? (
+            {props.flag?.type && flagVariant && flagSize ? (
               <IconHighlighted
                 backgroundColor={props.styles?.[props.state]?.affixIconHighlighted?.backgroundColor}
                 size={
@@ -82,38 +82,50 @@ export const InputPhoneStandAloneComponent = (
       <Input
         {...props}
         ref={ref}
-        bottomExtraStyles={getExtraStyles(
-          POSITIONS.BOTTOM,
-          POSITIONS.LEFT,
-          width,
-          props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
-          props.styles?.[props.state]?.helpMessage?.position
-        )}
-        centerExtraStyles={getExtraStyles(
-          POSITIONS.CENTER,
-          POSITIONS.LEFT,
-          width,
-          props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
-          props.styles?.[props.state]?.helpMessage?.position
-        )}
+        bottomExtraStyles={
+          props.styles?.[props.state]?.bottomExtraStyles ??
+          getExtraStyles(
+            POSITIONS.BOTTOM,
+            POSITIONS.LEFT,
+            width,
+            props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
+            props.styles?.[props.state]?.helpMessage?.position
+          )
+        }
+        centerExtraStyles={
+          props.styles?.[props.state]?.centerExtraStyles ??
+          getExtraStyles(
+            POSITIONS.CENTER,
+            POSITIONS.LEFT,
+            width,
+            props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
+            props.styles?.[props.state]?.helpMessage?.position
+          )
+        }
         extraAriaLabelledBy={extraAriaLabelledBy}
         id={inputId}
         leftContent={renderAffix()}
-        leftExtraStyles={getExtraStyles(
-          POSITIONS.LEFT,
-          POSITIONS.LEFT,
-          width,
-          props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
-          props.styles?.[props.state]?.helpMessage?.position
-        )}
+        leftExtraStyles={
+          props.styles?.[props.state]?.leftExtraStyles ??
+          getExtraStyles(
+            POSITIONS.LEFT,
+            POSITIONS.LEFT,
+            width,
+            props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
+            props.styles?.[props.state]?.helpMessage?.position
+          )
+        }
         overrideStyles={props.styles}
-        topExtraStyles={getExtraStyles(
-          POSITIONS.TOP,
-          POSITIONS.LEFT,
-          width,
-          props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
-          props.styles?.[props.state]?.helpMessage?.position
-        )}
+        topExtraStyles={
+          props.styles?.[props.state]?.topExtraStyles ??
+          getExtraStyles(
+            POSITIONS.TOP,
+            POSITIONS.LEFT,
+            width,
+            props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
+            props.styles?.[props.state]?.helpMessage?.position
+          )
+        }
         variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}
       />
     </div>

src/components/inputPhone/types/inputPhone.ts

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

src/components/inputPhone/types/inputPhoneTheme.ts

@@ -1,3 +1,5 @@
+import { CSSProp } from 'styled-components';
+
 import { IconHighlightedSizeType } from '@/components/iconHighlighted/types/size';
 import {
   InputBasicStateProps,
@@ -19,6 +21,10 @@ export type InputPhoneStateProps = InputBasicStateProps & {
     backgroundColor?: string;
   };
   affixIconHighlightedContainer?: CommonStyleType;
+  leftExtraStyles?: CSSProp;
+  centerExtraStyles?: CSSProp;
+  topExtraStyles?: CSSProp;
+  bottomExtraStyles?: CSSProp;
 };
 
 export type InputPhoneStylesProps = {