Merge pull request #469 from etn-ccis/fix/blui-4694-workflow-card-issue

Pass WorkflowCard props to every screen component
etn-ccis · Sep 20, 2023 · 49f1996 · 49f1996
2 parents d75c08c + 41a3480
commit 49f1996
Show file tree

Hide file tree

Showing 17 changed files with 65 additions and 32 deletions.
diff --git a/login-workflow/docs/components/workflow-card.md b/login-workflow/docs/components/workflow-card.md
@@ -10,7 +10,7 @@ import { WorkflowCard, WorkflowCardHeader, WorkflowCardBody, WorkflowCardInstruc
 
 <WorkflowCard {...cardBaseProps}>
   <WorkflowCardHeader {...headerProps} />
-  <WorkflowCardInstructions {...instructionsProps} divider />
+  <WorkflowCardInstructions {...instructionsProps} />
   <WorkflowCardBody>
     {/* Your Screen Contents */}          
   </WorkflowCardBody>
@@ -48,7 +48,7 @@ This component is a simple wrapper that is used for layout. Instructions and you
 | Prop Name | Type | Description | Default |
 |---|---|---|---|
 | instructions | `string \| JSX.Element` | The instructions to display in the card. |  |
-| divider | `boolean` | If true, a dividing line will be displayed below the instruction text | `false` |
+| divider | `boolean` | If true, a dividing line will be displayed below the instruction text | `true` |
 
 The properties of the underlying MUI [Typography](https://mui.com/components/typography/) component are also available.
 
@@ -58,7 +58,7 @@ The WorkflowCardActions is used to configure the buttons that appear at the bott
 
 | Prop Name | Type | Description | Default |
 |---|---|---|---|
-| divider | `boolean` | If true, a dividing line will be displayed above the button panel | `false` |
+| divider | `boolean` | If true, a dividing line will be displayed above the button panel | `true` |
 | showPrevious | `boolean` | Indicates whether the previous button should be displayed | `true` |
 | canGoPrevious | `boolean \| (() => boolean)` | A boolean or function that indicates whether the previous button should be enabled. | `true` |
 | previousLabel | `string` | The label on the previous button |  |

diff --git a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
@@ -132,6 +132,18 @@ describe('WorkflowCardInstructions tests', () => {
         render(<WorkflowCardInstructions instructions="Test" divider={true} />);
         expect(screen.getByText('Test')).toBeInTheDocument();
     });
+
+    it('renders with divider', () => {
+        const { container } = render(<WorkflowCardInstructions instructions="Test" />);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(container.getElementsByClassName('MuiDivider-root').length).toBe(1);
+    });
+
+    it('renders without divider', () => {
+        const { container } = render(<WorkflowCardInstructions instructions="Test" divider={false} />);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(container.getElementsByClassName('MuiDivider-root').length).toBe(0);
+    });
 });
 
 describe('ErrorState tests', () => {

diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
@@ -18,11 +18,6 @@ export type WorkflowCardBaseProps = BoxProps & {
      * A custom background to render behind the card
      */
     backgroundImage?: string;
-
-    /**
-     * An error message to render for the card
-     */
-    error?: boolean | string;
 };
 
 export type WorkflowCardHeaderProps = CardHeaderProps;
@@ -35,6 +30,7 @@ export type WorkflowCardInstructionProps = TypographyProps & {
 
     /**
      * Whether or not to show a divider below the instructions
+     * @default true
      */
     divider?: boolean;
 };

diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx
@@ -42,7 +42,7 @@ const useUtilityClasses = (ownerState: WorkflowCardActionsProps): Record<Workflo
 
 export const WorkflowCardActions: React.FC<WorkflowCardActionsProps> = (props) => {
     const {
-        divider = false,
+        divider = true,
         canGoPrevious,
         showPrevious,
         previousLabel,

diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx
@@ -13,7 +13,7 @@ import { WorkflowCardInstructionProps } from './WorkflowCard.types';
  */
 
 export const WorkflowCardInstructions: React.FC<WorkflowCardInstructionProps> = (props) => {
-    const { instructions, divider, sx, ...otherProps } = props;
+    const { instructions, divider = true, sx, ...otherProps } = props;
 
     return (
         <>

diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
@@ -101,7 +101,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -156,7 +156,6 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
             <WorkflowCardActions
                 {...actionsProps}
                 canGoNext={actionsProps.canGoNext && isFirstNameValid && isLastNameValid}
-                divider
             />
         </WorkflowCard>
     );

diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
@@ -40,10 +40,9 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
         contactPhone = '1-800-123-4567',
         dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
         onDismiss,
-        WorkflowCardBaseProps,
-        WorkflowCardInstructionProps,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        ...otherContactSupportProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -65,9 +64,7 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
 
     return (
         <ContactSupportScreenBase
-            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             emailSupportTitle={emailSupportTitle}
@@ -78,6 +75,7 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
             contactPhone={contactPhone}
             dismissButtonLabel={dismissButtonLabel}
             onDismiss={onDismiss}
+            {...otherContactSupportProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { Divider, Typography } from '@mui/material';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import { Typography } from '@mui/material';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import { ContactSupportScreenProps } from './types';
 import Box, { BoxProps } from '@mui/material/Box';
 import { ContactScreenClassKey, getContactScreenUtilityClass } from './utilityClasses';
@@ -64,11 +70,13 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
         <WorkflowCard {...cardBaseProps} className={defaultClasses.root} data-testid={defaultClasses.root}>
             <WorkflowCardHeader {...headerProps} className={defaultClasses.title} data-testid={defaultClasses.title} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             {icon && (
                 <Box sx={{ m: 3, mb: 5, textAlign: 'center' }} className={defaultClasses.icon}>
                     {icon}
@@ -158,7 +166,6 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
                     </Typography>
                 )}
             </WorkflowCardBody>
-            <Divider />
             <WorkflowCardActions
                 {...actionsProps}
                 nextLabel={dismissButtonLabel || actionsProps.nextLabel}

diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
@@ -69,7 +69,7 @@ export const CreateAccountScreenBase: React.FC<
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -104,7 +104,6 @@ export const CreateAccountScreenBase: React.FC<
             </WorkflowCardBody>
             <WorkflowCardActions
                 {...actionsProps}
-                divider
                 canGoNext={emailInput.length > 0 && isEmailValid && actionsProps.canGoNext}
             ></WorkflowCardActions>
         </WorkflowCard>

diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
@@ -19,6 +19,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
  * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
  * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
  * @param errorDisplayConfig configuration for customizing how errors are displayed
+ * @param onRefetch used to refetch Eula content.
  *
  * @category Component
  */
@@ -38,12 +39,14 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
     const regWorkflow = useRegistrationWorkflowContext();
     const { nextScreen, previousScreen, screenData, currentScreen, totalScreens } = regWorkflow;
     const {
+        WorkflowCardBaseProps,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
         eulaContent,
         checkboxLabel = t('bluiRegistration:REGISTRATION.EULA.AGREE_TERMS'),
         html,
         initialCheckboxValue,
+        ...otherEulaScreenProps
     } = props;
 
     const eulaAccepted = initialCheckboxValue ? initialCheckboxValue : screenData.Eula.accepted;
@@ -156,6 +159,7 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
             eulaContent={eulaData}
             WorkflowCardBaseProps={{
                 loading: isLoading,
+                ...WorkflowCardBaseProps,
             }}
             checkboxLabel={checkboxLabel}
             checkboxProps={checkboxProps}
@@ -165,6 +169,7 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
             onRefetch={onRefetch}
+            {...otherEulaScreenProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { EulaScreenProps } from './types';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
@@ -23,6 +29,7 @@ import ReplaySharpIcon from '@mui/icons-material/ReplaySharp';
  * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
  * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
  * @param errorDisplayConfig configuration for customizing how errors are displayed
+ * @param onRefetch used to refetch Eula content.
  *
  * @category Component
  */
@@ -41,6 +48,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     const [eulaAccepted, setEulaAccepted] = useState(initialCheckboxValue ?? false);
@@ -61,6 +69,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody>
                 {checkboxProps?.disabled ? (
                     <Box

diff --git a/login-workflow/src/screens/EulaScreen/types.ts b/login-workflow/src/screens/EulaScreen/types.ts
@@ -43,7 +43,7 @@ export type EulaScreenProps = WorkflowCardProps & {
     errorDisplayConfig?: ErrorManagerProps;
 
     /**
-     * Function to refectch verify code for retry link
+     * Function to refetch Eula content
      * @returns void
      */
     onRefetch?: () => void;

diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
@@ -29,6 +29,7 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
         onDismiss = (): void => navigate(routeConfig.LOGIN),
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        ...otherExistingAccountSuccessScreenProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -51,10 +52,11 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
     return (
         <SuccessScreenBase
             WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}
             message={message}
-            WorkflowCardActionsProps={workflowCardActionsProps}
+            {...otherExistingAccountSuccessScreenProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -86,7 +86,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
             ) : (
                 <WorkflowCard {...cardBaseProps}>
                     <WorkflowCardHeader {...headerProps} />
-                    <WorkflowCardInstructions {...instructionsProps} divider />
+                    <WorkflowCardInstructions {...instructionsProps} />
                     <WorkflowCardBody>
                         <ErrorManager {...errorDisplayConfig}>
                             <TextField
@@ -119,7 +119,6 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
                         </ErrorManager>
                     </WorkflowCardBody>
                     <WorkflowCardActions
-                        divider
                         {...actionsProps}
                         canGoNext={emailInput.length > 0 && isEmailValid && actionsProps.canGoNext}
                         onNext={handleOnNext}

diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
@@ -53,6 +53,7 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
         canDismiss = true,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        ...otherRegistrationSuccessScreenProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -75,10 +76,11 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
     return (
         <SuccessScreenBase
             WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}
             message={message}
-            WorkflowCardActionsProps={workflowCardActionsProps}
+            {...otherRegistrationSuccessScreenProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import { Divider } from '@mui/material';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import { SuccessScreenProps } from './types';
 import { WorkflowFinishState } from '../../components';
 
@@ -26,15 +31,16 @@ export const SuccessScreenBase: React.FC<SuccessScreenProps> = (props) => {
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody>
                 <WorkflowFinishState icon={icon} title={messageTitle} description={message} />
             </WorkflowCardBody>
-            <Divider />
             <WorkflowCardActions
                 {...actionsProps}
                 nextLabel={dismissButtonLabel || actionsProps.nextLabel}

diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx
@@ -85,7 +85,7 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -129,7 +129,6 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
             </WorkflowCardBody>
             <WorkflowCardActions
                 {...actionsProps}
-                divider
                 canGoNext={verifyCode.length > 0 && isCodeValid && actionsProps.canGoNext}
                 onNext={handleOnNext}
                 onPrevious={handleOnPrevious}