feat: 🎸 Add prop for SQForm fields to allow 'validation' as inf

src/components/fields/SQFormDropdown/SQFormDropdown.tsx

@@ -23,6 +23,8 @@ export type SQFormDropdownProps = BaseFieldProps & {
   children: SQFormOption[];
   /** Whether to display empty option - - in options */
   displayEmpty?: boolean;
+  /** Used to display informational Text under the input field same like warning text */
+  informationalText?: string;
   /** Disabled property to disable the input if true */
   isDisabled?: boolean;
   /** Whether or not to show the helper text */
@@ -62,6 +64,7 @@ function SQFormDropdown({
   onChange,
   size = 'auto',
   muiFieldProps = {},
+  informationalText = '',
 }: SQFormDropdownProps): React.ReactElement {
   const {
     formikField: {field},
@@ -71,6 +74,7 @@ function SQFormDropdown({
     name,
     onBlur,
     onChange,
+    informationalText,
   });
   const labelID = label.toLowerCase();
 
@@ -162,7 +166,18 @@ function SQFormDropdown({
           })}
         </Select>
         {!isDisabled && displayHelperText && (
-          <FormHelperText>{HelperTextComponent}</FormHelperText>
+          <FormHelperText
+            sx={{
+              '&.MuiFormHelperText-root': {
+                color: 'var(--color-slate)',
+              },
+              '&.Mui-focused': {
+                color: 'var(--color-textInfoBlue)',
+              },
+            }}
+          >
+            {HelperTextComponent}
+          </FormHelperText>
         )}
       </FormControl>
     </Grid>

src/components/fields/SQFormTextField/SQFormTextField.tsx

@@ -13,6 +13,8 @@ export type SQFormTextFieldProps = BaseFieldProps & {
   isDisabled?: boolean;
   /** Whether or not to show the helper text */
   displayHelperText?: boolean;
+  /** Used to display informational Text under the input field same like warning text */
+  informationalText?: string;
   /** Custom onBlur event callback */
   onBlur?: TextFieldProps['onBlur'];
   /** Custom onChange event callback */
@@ -45,6 +47,7 @@ function SQFormTextField({
   startAdornment,
   endAdornment,
   type = 'text',
+  informationalText = '',
   InputProps,
   inputProps = {},
   maxCharacters,
@@ -62,6 +65,7 @@ function SQFormTextField({
     name,
     onBlur,
     onChange,
+    informationalText,
   });
 
   const [valueLength, setValueLength] = React.useState(() => {
@@ -113,7 +117,22 @@ function SQFormTextField({
           maxLength: maxCharacters,
           ...inputProps,
         }}
-        FormHelperTextProps={{error: isFieldError}}
+        FormHelperTextProps={{
+          error: isFieldError,
+          sx: {
+            '&.MuiFormHelperText-root': {
+              color: 'var(--color-slate)',
+            },
+            '&.Mui-focused': {
+              color: !isFieldRequired
+                ? 'var(--color-textInfoBlue)'
+                : 'var(--color-slate)',
+            },
+            '&.Mui-error': {
+              color: 'var(--color-spanishOrange)',
+            },
+          },
+        }}
         name={name}
         type={type}
         label={labelText}

src/hooks/useForm.tsx

@@ -5,6 +5,7 @@ import {Typography} from '@mui/material';
 import {
   NewReleases as WarningIcon,
   VerifiedUser as VerifiedIcon,
+  Info as InfoIcon,
 } from '@mui/icons-material';
 import type {Theme} from '@mui/material';
 import type {FieldHelperProps, FieldInputProps, FieldMetaProps} from 'formik';
@@ -16,6 +17,7 @@ type ChangeHandler<TChangeEvent> = (
 
 type UseFormParam<TChangeEvent> = {
   name: string;
+  informationalText?: string;
   onBlur?: React.FocusEventHandler;
   onChange?: ChangeHandler<TChangeEvent>;
 };
@@ -91,6 +93,7 @@ export function useForm<TValue, TChangeEvent>({
   name,
   onBlur,
   onChange,
+  informationalText,
 }: UseFormParam<TChangeEvent>): UseFormReturn<TValue, TChangeEvent> {
   _handleError(name);
 
@@ -119,6 +122,7 @@ export function useForm<TValue, TChangeEvent>({
   const isFieldRequired = getFieldStatus() === 'REQUIRED';
   const isFieldError = getFieldStatus() === 'ERROR';
   const isFulfilled = getFieldStatus() === 'USER_FULFILLED';
+  const isFieldInfo = getFieldStatus() === 'FULFILLED';
 
   const handleChange: ChangeHandler<TChangeEvent> = React.useCallback(
     (event) => {
@@ -170,8 +174,28 @@ export function useForm<TValue, TChangeEvent>({
         />
       );
     }
+    if (isFieldInfo && informationalText) {
+      return (
+        <>
+          <InfoIcon sx={SUCCESS_ICON_STYLES} />
+          <Typography
+            component="span"
+            sx={(theme: Theme) => theme.typography.helper}
+          >
+            {informationalText}
+          </Typography>
+        </>
+      );
+    }
     return ' '; // return something so UI space always exists
-  }, [isFieldError, isFieldRequired, isFulfilled, errorMessage]);
+  }, [
+    isFieldError,
+    isFieldRequired,
+    isFulfilled,
+    isFieldInfo,
+    informationalText,
+    errorMessage,
+  ]);
 
   return {
     formikField: {field, meta, helpers},

stories/SQFormDropdown.stories.tsx

@@ -89,4 +89,10 @@ WithValidation.parameters = {
   controls: {exclude: 'schema'},
 };
 
+export const WithInformationalText = Template.bind({});
+WithInformationalText.args = {
+  ...defaultArgs,
+  informationalText: 'Helper Text Here',
+};
+
 export default meta;

stories/SQFormTextField.stories.tsx

@@ -67,3 +67,9 @@ WithValidation.args = {
 WithValidation.parameters = {
   controls: {exclude: 'schema'},
 };
+
+export const WithInformationalText = Template.bind({});
+WithInformationalText.args = {
+  ...defaultArgs,
+  informationalText: 'Helper Text Here',
+};