passing sx prop

etn-ccis · Aug 5, 2024 · 521f43f · 521f43f
1 parent 78a00d3
commit 521f43f
Show file tree

Hide file tree

Showing 19 changed files with 95 additions and 65 deletions.
diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
@@ -123,4 +123,8 @@ export type WorkflowCardProps = {
      * Props for WorkflowCardActions component
      */
     WorkflowCardActionsProps?: WorkflowCardActionsProps;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: BoxProps['sx']; // or SxProps<Theme>
 };
diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx
@@ -76,6 +76,7 @@ export const AccountDetailsScreen: React.FC<AccountDetailsScreenProps> = (props)
         lastNameTextFieldProps,
         initialFirstName = screenData.AccountDetails.firstName,
         initialLastName = screenData.AccountDetails.lastName,
+        ...otherProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -134,6 +135,7 @@ export const AccountDetailsScreen: React.FC<AccountDetailsScreenProps> = (props)
             lastNameValidator={lastNameValidator}
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
@@ -30,6 +30,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
         lastNameValidator = (): void => {},
         lastNameTextFieldProps,
         errorDisplayConfig,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -87,7 +88,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
     }, []);
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/AccountDetailsScreen/types.ts b/login-workflow/src/screens/AccountDetailsScreen/types.ts
@@ -2,56 +2,55 @@ import { BoxProps, TextFieldProps } from '@mui/material';
 import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';
 import { ErrorManagerProps } from '../../components/Error/types';
 
-export type AccountDetailsScreenProps = WorkflowCardProps &
-    BoxProps & {
-        /**
-         * The label for the first name text field
-         */
-        firstNameLabel?: string;
-
-        /**
-         * The initial value for the first name text field
-         */
-        initialFirstName?: string;
-
-        /**
-         * The function that validates the first name text field
-         * @param {string} firstName - validates first name input length
-         * @returns boolean | string
-         */
-        firstNameValidator?: (firstName: string) => boolean | string;
-
-        /**
-         * The props to pass to the first name field.
-         * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
-         */
-        firstNameTextFieldProps?: TextFieldProps;
-
-        /**
-         * The label for the last name text field
-         */
-        lastNameLabel?: string;
-
-        /**
-         * The initial value for the last name text field
-         */
-        initialLastName?: string;
-
-        /**
-         * The function that validates the last name text field
-         * @param {string} lastName - validates last name input length
-         * @returns boolean | string
-         */
-        lastNameValidator?: (lastName: string) => boolean | string;
-
-        /**
-         * The props to pass to the last name field.
-         * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
-         */
-        lastNameTextFieldProps?: TextFieldProps;
-
-        /**
-         * The configuration for customizing how errors are displayed
-         */
-        errorDisplayConfig?: ErrorManagerProps;
-    };
+export type AccountDetailsScreenProps = WorkflowCardProps & {
+    /**
+     * The label for the first name text field
+     */
+    firstNameLabel?: string;
+
+    /**
+     * The initial value for the first name text field
+     */
+    initialFirstName?: string;
+
+    /**
+     * The function that validates the first name text field
+     * @param {string} firstName - validates first name input length
+     * @returns boolean | string
+     */
+    firstNameValidator?: (firstName: string) => boolean | string;
+
+    /**
+     * The props to pass to the first name field.
+     * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
+     */
+    firstNameTextFieldProps?: TextFieldProps;
+
+    /**
+     * The label for the last name text field
+     */
+    lastNameLabel?: string;
+
+    /**
+     * The initial value for the last name text field
+     */
+    initialLastName?: string;
+
+    /**
+     * The function that validates the last name text field
+     * @param {string} lastName - validates last name input length
+     * @returns boolean | string
+     */
+    lastNameValidator?: (lastName: string) => boolean | string;
+
+    /**
+     * The props to pass to the last name field.
+     * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
+     */
+    lastNameTextFieldProps?: TextFieldProps;
+
+    /**
+     * The configuration for customizing how errors are displayed
+     */
+    errorDisplayConfig?: ErrorManagerProps;
+};
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
@@ -51,6 +51,7 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
         contactPhone,
         dismissButtonLabel,
         onDismiss,
+        ...otherProps
     } = props;
 
     const defaultClasses = useUtilityClasses(props);
@@ -61,7 +62,12 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
-        <WorkflowCard {...cardBaseProps} className={defaultClasses.root} data-testid={defaultClasses.root}>
+        <WorkflowCard
+            {...cardBaseProps}
+            className={defaultClasses.root}
+            data-testid={defaultClasses.root}
+            {...otherProps}
+        >
             <WorkflowCardHeader {...headerProps} className={defaultClasses.title} data-testid={defaultClasses.title} />
             {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             {icon && (

diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx
@@ -70,6 +70,7 @@ export const CreateAccountScreen: React.FC<CreateAccountScreenProps> = (props) =
             return true;
         },
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const workflowCardBaseProps = {
@@ -123,6 +124,7 @@ export const CreateAccountScreen: React.FC<CreateAccountScreenProps> = (props) =
             emailValidator={emailValidator}
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
@@ -28,6 +28,7 @@ export const CreateAccountScreenBase: React.FC<
         emailTextFieldProps,
         inputRef,
         errorDisplayConfig,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -59,7 +60,7 @@ export const CreateAccountScreenBase: React.FC<
     }, []);
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx
@@ -34,6 +34,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
         WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         PasswordProps,
+        ...otherProps
     } = props;
 
     const passwordRef = useRef(null);
@@ -162,6 +163,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
             WorkflowCardInstructionProps={workflowCardInstructionProps}
             PasswordProps={passwordProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx
@@ -24,10 +24,10 @@ export const CreatePasswordScreenBase: React.FC<React.PropsWithChildren<CreatePa
     const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
     const passwordProps = props.PasswordProps || { onPasswordChange: () => ({}) };
-    const { errorDisplayConfig } = props;
+    const { errorDisplayConfig, ...otherProps } = props;
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
@@ -34,6 +34,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
         checkboxProps,
         errorDisplayConfig,
         refreshConfig,
+        ...otherProps
     } = props;
 
     const { t } = useTranslation();
@@ -58,7 +59,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
     };
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody sx={{ pt: 2 }}>

diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx
@@ -72,6 +72,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
         slots = {},
         slotProps = {},
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const workflowCardBaseProps = {
@@ -174,6 +175,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
                 },
             }}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -32,6 +32,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
         showSuccessScreen,
         errorDisplayConfig,
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -73,7 +74,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
             {showSuccessScreen ? (
                 getSuccessScreen(slotProps?.SuccessScreen || {}, slots?.SuccessScreen)
             ) : (
-                <WorkflowCard {...cardBaseProps}>
+                <WorkflowCard {...cardBaseProps} {...otherProps}>
                     <WorkflowCardHeader {...headerProps} />
                     <WorkflowCardInstructions {...instructionsProps} />
                     <WorkflowCardBody>

diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx
@@ -74,6 +74,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
         projectImage,
         header,
         footer,
+        ...otherProps
     } = props;
 
     return (
@@ -119,6 +120,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
             projectImage={projectImage}
             header={header}
             footer={footer}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.tsx b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.tsx
@@ -45,6 +45,7 @@ export const OktaLoginScreen: React.FC<OktaLoginScreenProps> = (props) => {
         projectImage,
         header,
         footer,
+        ...otherProps
     } = props;
 
     useEffect(() => {
@@ -83,6 +84,7 @@ export const OktaLoginScreen: React.FC<OktaLoginScreenProps> = (props) => {
             projectImage={projectImage}
             header={header}
             footer={footer}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx
@@ -40,6 +40,7 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = (props) =
         PasswordProps,
         slots = {},
         slotProps = {},
+        ...otherProps
     } = props;
 
     const [passwordInput, setPasswordInput] = useState(PasswordProps?.initialNewPasswordValue ?? '');
@@ -199,6 +200,7 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = (props) =
                       }
                     : errorDisplayConfig.onClose,
             }}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx
@@ -27,7 +27,7 @@ export const ResetPasswordScreenBase: React.FC<React.PropsWithChildren<ResetPass
     const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
     const passwordProps = props.PasswordProps || { onPasswordChange: () => ({}) };
-    const { showSuccessScreen, slots, slotProps = {}, errorDisplayConfig } = props;
+    const { showSuccessScreen, slots, slotProps = {}, errorDisplayConfig, ...otherProps } = props;
 
     const getSuccessScreen = (
         _props?: SuccessScreenProps,
@@ -39,7 +39,7 @@ export const ResetPasswordScreenBase: React.FC<React.PropsWithChildren<ResetPass
             {showSuccessScreen ? (
                 getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen)
             ) : (
-                <WorkflowCard {...cardBaseProps}>
+                <WorkflowCard {...cardBaseProps} {...otherProps}>
                     <WorkflowCardHeader {...headerProps} />
                     <WorkflowCardInstructions {...instructionsProps} divider />
                     <WorkflowCardBody>

diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx
@@ -19,15 +19,15 @@ import Box from '@mui/material/Box';
  */
 
 export const SuccessScreenBase: React.FC<SuccessScreenProps> = (props) => {
-    const { EmptyStateProps, dismissButtonLabel = '', canDismiss, onDismiss } = props;
+    const { EmptyStateProps, dismissButtonLabel = '', canDismiss, onDismiss, ...otherProps } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
     const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx
@@ -55,6 +55,7 @@ export const VerifyCodeScreen: React.FC<VerifyCodeScreenProps> = (props) => {
         verifyCodeInputLabel = t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.VERIFICATION'),
         initialValue = screenData.VerifyCode.code,
         verifyCodeTextFieldProps,
+        ...otherProps
     } = props;
 
     const handleOnNext = useCallback(
@@ -153,6 +154,7 @@ export const VerifyCodeScreen: React.FC<VerifyCodeScreenProps> = (props) => {
             codeValidator={codeValidator}
             errorDisplayConfig={errorDisplayConfig}
             verifyCodeTextFieldProps={verifyCodeTextFieldProps}
+            {...otherProps}
         />
     );
 };