Changes warning panel appearance according to severity

Signed-off-by: Nicolas Torres <nicolast@backbase.com>

packages/core-components/src/components/WarningPanel/WarningPanel.tsx

@@ -27,25 +27,55 @@ import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React from 'react';
 
+const getWarningTextColor = (
+  severity: Props['severity'],
+  theme: BackstageTheme,
+) => {
+  switch (severity) {
+    case 'error':
+      return theme.palette.errorText;
+    case 'info':
+      return theme.palette.infoText;
+    default:
+      return theme.palette.warningText;
+  }
+};
+
+const getWarningBackgroundColor = (
+  severity: Props['severity'],
+  theme: BackstageTheme,
+) => {
+  switch (severity) {
+    case 'error':
+      return theme.palette.errorBackground;
+    case 'info':
+      return theme.palette.infoBackground;
+    default:
+      return theme.palette.warningBackground;
+  }
+};
+
 const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     marginRight: theme.spacing(1),
-    fill: theme.palette.warningText,
+    fill: ({ severity }: Props) => getWarningTextColor(severity, theme),
   },
 }));
-const ErrorOutlineStyled = () => {
-  const classes = useErrorOutlineStyles();
+
+const ErrorOutlineStyled = ({ severity }: Pick<Props, 'severity'>) => {
+  const classes = useErrorOutlineStyles({ severity });
   return <ErrorOutline classes={classes} />;
 };
-const ExpandMoreIconStyled = () => {
-  const classes = useErrorOutlineStyles();
+const ExpandMoreIconStyled = ({ severity }: Pick<Props, 'severity'>) => {
+  const classes = useErrorOutlineStyles({ severity });
   return <ExpandMoreIcon classes={classes} />;
 };
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   panel: {
-    backgroundColor: theme.palette.warningBackground,
-    color: theme.palette.warningText,
+    backgroundColor: ({ severity }: Props) =>
+      getWarningBackgroundColor(severity, theme),
+    color: ({ severity }: Props) => getWarningTextColor(severity, theme),
     verticalAlign: 'middle',
   },
   summary: {
@@ -53,14 +83,15 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     flexDirection: 'row',
   },
   summaryText: {
-    color: theme.palette.warningText,
+    color: ({ severity }: Props) => getWarningTextColor(severity, theme),
     fontWeight: 'bold',
   },
   message: {
     width: '100%',
     display: 'block',
-    color: theme.palette.warningText,
-    backgroundColor: theme.palette.warningBackground,
+    color: ({ severity }: Props) => getWarningTextColor(severity, theme),
+    backgroundColor: ({ severity }: Props) =>
+      getWarningBackgroundColor(severity, theme),
   },
   details: {
     width: '100%',
@@ -89,7 +120,7 @@ const capitalize = (s: string) => {
  * WarningPanel. Show a user friendly error message to a user similar to ErrorPanel except that the warning panel
  * only shows the warning message to the user.
  *
- * @param {string} [severity=warning] Ability to change the severity of the alert. Not fully implemented. (error, warning, info)
+ * @param {string} [severity=warning] Ability to change the severity of the alert.
  * @param {string} [title] A title for the warning. If not supplied, "Warning" will be used.
  * @param {Object} [message] Optional more detailed user-friendly message elaborating on the cause of the error.
  * @param {Object} [children] Objects to provide context, such as a stack trace or detailed error reporting.
@@ -97,11 +128,16 @@ const capitalize = (s: string) => {
  */
 export const WarningPanel = (props: Props) => {
   const classes = useStyles(props);
-  const { severity, title, message, children, defaultExpanded } = props;
+  const {
+    severity = 'warning',
+    title,
+    message,
+    children,
+    defaultExpanded,
+  } = props;
 
   // If no severity or title provided, the heading will read simply "Warning"
-  const subTitle =
-    (severity ? capitalize(severity) : 'Warning') + (title ? `: ${title}` : '');
+  const subTitle = capitalize(severity) + (title ? `: ${title}` : '');
 
   return (
     <Accordion
@@ -110,10 +146,10 @@ export const WarningPanel = (props: Props) => {
       role="alert"
     >
       <AccordionSummary
-        expandIcon={<ExpandMoreIconStyled />}
+        expandIcon={<ExpandMoreIconStyled severity={severity} />}
         className={classes.summary}
       >
-        <ErrorOutlineStyled />
+        <ErrorOutlineStyled severity={severity} />
         <Typography className={classes.summaryText} variant="subtitle1">
           {subTitle}
         </Typography>