Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass WorkflowCard props to every screen component #469

Merged
merged 12 commits into from
Sep 20, 2023
+65 −32
Merged

Pass WorkflowCard props to every screen component #469

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ca0bee4
Pass WorkflowCard props to every screen component
ektaghag-eaton Sep 11, 2023
9263502
Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflow…
ektaghag-eaton Sep 12, 2023
8c21cd9
Update unused proos as otherProps
ektaghag-eaton Sep 12, 2023
160f7fc
Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflow…
ektaghag-eaton Sep 13, 2023
2769d8e
fix other props
ektaghag-eaton Sep 13, 2023
c5a4536
Fix otherProps for success screen
ektaghag-eaton Sep 13, 2023
d0fa294
Add test case for default divider
ektaghag-eaton Sep 15, 2023
17b6763
Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflow…
ektaghag-eaton Sep 16, 2023
c8bca9d
Fix prettier
ektaghag-eaton Sep 16, 2023
747ed28
Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflow…
ektaghag-eaton Sep 20, 2023
39c2cc1
Remove test code
ektaghag-eaton Sep 20, 2023
41a3480
Add test case for divider
ektaghag-eaton Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions login-workflow/docs/components/workflow-card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { WorkflowCard, WorkflowCardHeader, WorkflowCardBody, WorkflowCardInstruc

<WorkflowCard {...cardBaseProps}>
<WorkflowCardHeader {...headerProps} />
<WorkflowCardInstructions {...instructionsProps} divider />
<WorkflowCardInstructions {...instructionsProps} />
<WorkflowCardBody>
{/* Your Screen Contents */}
</WorkflowCardBody>
Expand Down Expand Up @@ -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.

Expand All @@ -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 | |
Expand Down
156 changes: 152 additions & 4 deletions login-workflow/example/src/navigation/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable */
ektaghag-eaton marked this conversation as resolved.
Show resolved Hide resolved
import React from 'react';
import {
AuthContextProvider,
Expand All @@ -8,6 +9,10 @@ import {
RegistrationContextProvider,
ResetPasswordScreen,
RegistrationWorkflow,
EulaScreen,
AccountDetailsScreen,
CreateAccountScreen,
VerifyCodeScreen,
} from '@brightlayer-ui/react-auth-workflow';
import { useApp } from '../contexts/AppContextProvider';
import { useNavigate } from 'react-router';
Expand All @@ -19,6 +24,8 @@ import { routes } from './Routing';
import { ExampleHome } from '../screens/ExampleHome';
import i18nAppInstance from '../translations/i18n';
import { ChangePassword } from '../components/ChangePassword';
import EatonLogo from '../assets/images/eaton_stacked_logo.png';
import { Home } from '@mui/icons-material';

export const AppRouter: React.FC = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -54,23 +61,77 @@ export const AppRouter: React.FC = () => {
path={'/forgot-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ForgotPasswordScreen />
<ForgotPasswordScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home />,
}}
WorkflowCardBaseProps={{
loading: true,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: true,
}}
/>
</ReactRouterGuestGuard>
}
/>
<Route
path={'/contact-support'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ContactSupportScreen />
<ContactSupportScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home />,
}}
WorkflowCardBaseProps={{
loading: true,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: false,
}}
/>
</ReactRouterGuestGuard>
}
/>
<Route
path={'/reset-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ResetPasswordScreen />
<ResetPasswordScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home />,
}}
WorkflowCardBaseProps={{
loading: true,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: false,
}}
/>
</ReactRouterGuestGuard>
}
/>
Expand Down Expand Up @@ -116,7 +177,94 @@ export const AppRouter: React.FC = () => {
</RegistrationContextProvider>
}
>
<Route path={'/self-registration'} element={<RegistrationWorkflow />} />
<Route
path={'/self-registration'}
element={
<RegistrationWorkflow>
{/* Eula Screen */}
{/* <EulaScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: true,
}}
WorkflowCardHeaderProps={{
avatar: <Home/>,
title: 'Test Title',
}}
WorkflowCardBaseProps={{
loading: true,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: true,
}}
/> */}
{/* AccountDetailsScreen */}
{/* <AccountDetailsScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home/>
}}
WorkflowCardBaseProps={{
loading: false,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: false,
}}
/> */}
{/* CreateAccountScreen */}
{/* <CreateAccountScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home/>
}}
WorkflowCardBaseProps={{
loading: false,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: false,
}}
/> */}
{/* Verify code Screen */}
<VerifyCodeScreen
WorkflowCardInstructionProps={{
instructions: 'Test Instruction',
divider: false,
}}
WorkflowCardHeaderProps={{
avatar: <Home />,
}}
WorkflowCardBaseProps={{
loading: true,
backgroundImage: EatonLogo,
}}
WorkflowCardActionsProps={{
nextLabel: 'Go',
fullWidthButton: true,
showPrevious: false,
divider: false,
}}
/>
</RegistrationWorkflow>
}
/>
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
Expand Down
5 changes: 0 additions & 5 deletions login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import { WorkflowCardInstructionProps } from './WorkflowCard.types';
*/

export const WorkflowCardInstructions: React.FC<WorkflowCardInstructionProps> = (props) => {
const { instructions, divider, ...otherProps } = props;

const { instructions, divider = true, ...otherProps } = props;
return (
<>
{typeof instructions === 'string' ? (
Expand Down
4 changes: 2 additions & 2 deletions login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -156,7 +156,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
<WorkflowCardActions
{...actionsProps}
canGoNext={actionsProps.canGoNext && isFirstNameValid && isLastNameValid}
divider
// divider
ektaghag-eaton marked this conversation as resolved.
Show resolved Hide resolved
/>
</WorkflowCard>
);
Expand Down
6 changes: 5 additions & 1 deletion login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
contactEmail = '[email protected]',
contactPhone = '1-800-123-4567',
dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
WorkflowCardBaseProps,
WorkflowCardInstructionProps,
WorkflowCardHeaderProps,
WorkflowCardActionsProps,
ektaghag-eaton marked this conversation as resolved.
Show resolved Hide resolved
} = props;
Expand All @@ -63,14 +65,16 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)

return (
<ContactSupportScreenBase
WorkflowCardBaseProps={WorkflowCardBaseProps}
ektaghag-eaton marked this conversation as resolved.
Show resolved Hide resolved
WorkflowCardHeaderProps={workflowCardHeaderProps}
WorkflowCardInstructionProps={WorkflowCardInstructionProps}
WorkflowCardActionsProps={workflowCardActionsProps}
icon={icon}
emailSupportTitle={emailSupportTitle}
phoneSupportTitle={phoneSupportTitle}
contactEmail={contactEmail}
contactPhone={contactPhone}
dismissButtonLabel={dismissButtonLabel}
WorkflowCardActionsProps={workflowCardActionsProps}
/>
);
};
13 changes: 10 additions & 3 deletions login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -67,11 +73,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}
Expand Down Expand Up @@ -161,7 +169,6 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
</Typography>
)}
</WorkflowCardBody>
<Divider />
<WorkflowCardActions
{...actionsProps}
nextLabel={dismissButtonLabel || actionsProps.nextLabel}
Expand Down
3 changes: 1 addition & 2 deletions login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const CreateAccountScreenBase: React.FC<
return (
<WorkflowCard {...cardBaseProps}>
<WorkflowCardHeader {...headerProps} />
<WorkflowCardInstructions {...instructionsProps} divider />
<WorkflowCardInstructions {...instructionsProps} />
<WorkflowCardBody>
<ErrorManager {...errorDisplayConfig}>
<TextField
Expand Down Expand Up @@ -104,7 +104,6 @@ export const CreateAccountScreenBase: React.FC<
</WorkflowCardBody>
<WorkflowCardActions
{...actionsProps}
divider
canGoNext={emailInput.length > 0 && isEmailValid && actionsProps.canGoNext}
></WorkflowCardActions>
</WorkflowCard>
Expand Down
5 changes: 5 additions & 0 deletions login-workflow/src/screens/EulaScreen/EulaScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -38,7 +39,9 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
const regWorkflow = useRegistrationWorkflowContext();
const { nextScreen, previousScreen, screenData, currentScreen, totalScreens, isInviteRegistration } = regWorkflow;
const {
WorkflowCardBaseProps,
ektaghag-eaton marked this conversation as resolved.
Show resolved Hide resolved
WorkflowCardHeaderProps,
WorkflowCardInstructionProps,
WorkflowCardActionsProps,
eulaContent,
checkboxLabel = t('bluiRegistration:REGISTRATION.EULA.AGREE_TERMS'),
Expand Down Expand Up @@ -160,10 +163,12 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {

return (
<EulaScreenBase
WorkflowCardInstructionProps={WorkflowCardInstructionProps}
WorkflowCardHeaderProps={workflowCardHeaderProps}
eulaContent={eulaData}
WorkflowCardBaseProps={{
loading: isLoading,
...WorkflowCardBaseProps,
}}
checkboxLabel={checkboxLabel}
checkboxProps={checkboxProps}
Expand Down
Loading
Loading