diff --git a/login-workflow/docs/components/workflow-card.md b/login-workflow/docs/components/workflow-card.md index e4f3fa92..922dc89d 100644 --- 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 - + {/* Your Screen Contents */} @@ -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 index 1699166d..446d3009 100644 --- 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(); expect(screen.getByText('Test')).toBeInTheDocument(); }); + + it('renders with divider', () => { + const { container } = render(); + expect(screen.getByText('Test')).toBeInTheDocument(); + expect(container.getElementsByClassName('MuiDivider-root').length).toBe(1); + }); + + it('renders without divider', () => { + const { container } = render(); + 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 index f262149e..51d5dc6d 100644 --- 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 index dd4a010d..059d4bc1 100644 --- 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 = (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 index ee5bbf84..195d1966 100644 --- 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 = (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 index 827ceb07..d85737db 100644 --- 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 = (pr return ( - + = (pr ); diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx index 0df3509d..6439fc2c 100644 --- 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 = (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 = (props) return ( = (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 index fcae0b09..c15eda40 100644 --- 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 = (pr const cardBaseProps = props.WorkflowCardBaseProps || {}; const headerProps = props.WorkflowCardHeaderProps || {}; + const instructionsProps = props.WorkflowCardInstructionProps || {}; const actionsProps = props.WorkflowCardActionsProps || {}; return ( + {Object.keys(instructionsProps).length !== 0 && } {icon && ( {icon} @@ -158,7 +166,6 @@ export const ContactSupportScreenBase: React.FC = (pr )} - - + 0 && isEmailValid && actionsProps.canGoNext} > diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx index 6d423357..8c4af58a 100644 --- 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 = (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 = (props) => { eulaContent={eulaData} WorkflowCardBaseProps={{ loading: isLoading, + ...WorkflowCardBaseProps, }} checkboxLabel={checkboxLabel} checkboxProps={checkboxProps} @@ -165,6 +169,7 @@ export const EulaScreen: React.FC = (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 index 43f8043f..c5da4fd4 100644 --- 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 = (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 = (props) => { return ( + {Object.keys(instructionsProps).length !== 0 && } {checkboxProps?.disabled ? ( void; diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx index 3e54f638..026c043e 100644 --- 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 = (props onDismiss = (): void => navigate(routeConfig.LOGIN), WorkflowCardHeaderProps, WorkflowCardActionsProps, + ...otherExistingAccountSuccessScreenProps } = props; const workflowCardHeaderProps = { @@ -51,10 +52,11 @@ export const ExistingAccountSuccessScreen: React.FC = (props return ( ); }; diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 0a0ba4a4..975b6dbc 100644 --- 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 - + 0 && isEmailValid && actionsProps.canGoNext} onNext={handleOnNext} diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx index 96ce66c0..a425dde5 100644 --- 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 = (props) = canDismiss = true, WorkflowCardHeaderProps, WorkflowCardActionsProps, + ...otherRegistrationSuccessScreenProps } = props; const workflowCardHeaderProps = { @@ -75,10 +76,11 @@ export const RegistrationSuccessScreen: React.FC = (props) = return ( ); }; diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx index 7cfb37a9..0c53d650 100644 --- 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 = (props) => { const cardBaseProps = props.WorkflowCardBaseProps || {}; const headerProps = props.WorkflowCardHeaderProps || {}; + const instructionsProps = props.WorkflowCardInstructionProps || {}; const actionsProps = props.WorkflowCardActionsProps || {}; return ( + {Object.keys(instructionsProps).length !== 0 && } - - + 0 && isCodeValid && actionsProps.canGoNext} onNext={handleOnNext} onPrevious={handleOnPrevious}