@brightlayer-ui/react-auth-workflow/components/Error/ErrorMessageBox.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React from 'react';
import Box from '@mui/material/Box';
import Close from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
/**
 * Component that renders a basic message box with an error message and a configurable dismiss button.
 *
 * @param {ErrorMessageBoxProps} props - props of errorMessageBox component
 *
 * @category Component
 */
const ErrorMessageBox = (props) => {
    const { title, errorMessage, backgroundColor, dismissible = true, fontColor, onClose = () => { }, sx } = props;
    return (React.createElement(Box, { sx: [
            {
                width: '100%',
                backgroundColor: backgroundColor || 'error.main',
                borderRadius: 4,
                p: 2,
                color: (t) => fontColor || t.palette.error.contrastText,
                my: 2,
            },
            ...(Array.isArray(sx) ? sx : [sx]),
        ] },
        dismissible !== false && (React.createElement(Close, { "data-testid": 'error-message-box-close', sx: {
                '&:hover': {
                    cursor: 'pointer',
                },
                float: 'right',
            }, onClick: () => {
                onClose();
            } })),
        React.createElement(Box, null,
            React.createElement(Typography, null, title),
            React.createElement(Typography, { variant: "body2" }, errorMessage))));
};
export default ErrorMessageBox;