fix(striker-ui): add message to OutlinedInputWithLabel

striker-ui/components/OutlinedInputWithLabel.tsx

@@ -3,6 +3,7 @@ import {
   FormControlProps as MUIFormControlProps,
 } from '@mui/material';
 
+import MessageBox, { MessageBoxProps } from './MessageBox';
 import OutlinedInput, { OutlinedInputProps } from './OutlinedInput';
 import OutlinedInputLabel, {
   OutlinedInputLabelProps,
@@ -13,6 +14,7 @@ type OutlinedInputWithLabelOptionalProps = {
   id?: string;
   inputProps?: Partial<OutlinedInputProps>;
   inputLabelProps?: Partial<OutlinedInputLabelProps>;
+  messageBoxProps?: Partial<MessageBoxProps>;
 };
 
 type OutlinedInputWithLabelProps = {
@@ -25,6 +27,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required<OutlinedInputWithLabelOp
     id: '',
     inputProps: {},
     inputLabelProps: {},
+    messageBoxProps: {},
   };
 
 const OutlinedInputWithLabel = ({
@@ -33,24 +36,43 @@ const OutlinedInputWithLabel = ({
   inputProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputProps,
   inputLabelProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputLabelProps,
   label,
-}: OutlinedInputWithLabelProps): JSX.Element => (
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  <MUIFormControl {...formControlProps}>
-    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-    <OutlinedInputLabel {...{ htmlFor: id, ...inputLabelProps }}>
-      {label}
-    </OutlinedInputLabel>
-    <OutlinedInput
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...{
-        fullWidth: formControlProps.fullWidth,
-        id,
-        label,
-        ...inputProps,
-      }}
-    />
-  </MUIFormControl>
-);
+  messageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.messageBoxProps,
+}: OutlinedInputWithLabelProps): JSX.Element => {
+  const {
+    sx: messageBoxSx,
+    text: messageBoxText,
+    ...messageBoxRestProps
+  } = messageBoxProps;
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <MUIFormControl {...formControlProps}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <OutlinedInputLabel {...{ htmlFor: id, ...inputLabelProps }}>
+        {label}
+      </OutlinedInputLabel>
+      <OutlinedInput
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...{
+          fullWidth: formControlProps.fullWidth,
+          id,
+          label,
+          ...inputProps,
+        }}
+      />
+      {messageBoxText && (
+        <MessageBox
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...{
+            ...messageBoxRestProps,
+            sx: { marginTop: '.4em', ...messageBoxSx },
+            text: messageBoxText,
+          }}
+        />
+      )}
+    </MUIFormControl>
+  );
+};
 
 OutlinedInputWithLabel.defaultProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS;