@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
54 lines (53 loc) • 2.24 kB
JavaScript
import React from 'react';
import Box from '@mui/material/Box';
import defaultBackgroundImage from '../../assets/images/background.svg';
import Card from '@mui/material/Card';
import { Spinner } from '../Spinner/Spinner.js';
import { getWorkflowCardUtilityClass } from './Utility.js';
import { unstable_composeClasses as composeClasses, useTheme } from '@mui/material';
const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;
const slots = {
root: ['root'],
card: ['card'],
};
return composeClasses(slots, getWorkflowCardUtilityClass, classes);
};
/**
* Component that renders the workflow card that is used for all screen components.
*
* @param {WorkflowCardBaseProps} props - props of workflowCardBase component
*
* @category Component
*/
export const WorkflowCard = (props) => {
const { loading, backgroundImage, sx, children, ...otherBoxProps } = props;
const defaultClasses = useUtilityClasses(props);
const theme = useTheme();
return (React.createElement(Box, { sx: {
height: '100vh',
width: '100%',
backgroundColor: 'primary.main',
backgroundImage: backgroundImage ? `url(${backgroundImage})` : `url(${defaultBackgroundImage})`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...theme.applyStyles('dark', {
backgroundColor: 'primary.dark',
}),
...sx,
}, className: defaultClasses.root, "data-testid": defaultClasses.root, ...otherBoxProps },
React.createElement(Card, { sx: {
width: '100%',
height: '100%',
maxWidth: { sm: '450px', xs: 'none' },
maxHeight: { sm: '730px', xs: 'none' },
display: 'flex',
flexDirection: 'column',
position: 'relative',
borderRadius: { xs: 0, sm: '4px' },
}, className: defaultClasses.card, "data-testid": defaultClasses.card },
React.createElement(React.Fragment, null,
React.createElement(Spinner, { "data-testid": "blui-spinner", visible: loading }),
children))));
};