add expandedText prop to MessageManager

src/components/messages/MessageManager.tsx

@@ -24,11 +24,13 @@ export const MessageManager = props => {
     text: ""
   });
   const [opened, setOpened] = useState(false);
+  const [expand, setExpand] = useState(false);
 
   const classes = useStyles({});
   const {
-    action,
-    autohide = 3000,
+    actionBtn,
+    autohide = 9000,
+    expandText,
     title,
     text,
     key,
@@ -105,7 +107,46 @@ export const MessageManager = props => {
         }
         title={title}
         action={[
-          !!onUndo ? (
+          !!expandText ? (
+            <div
+              className={classNames(classes.expandedContainer, {
+                [classes.expandedContainerInfo]: status === "info"
+              })}
+            >
+              <div
+                className={classNames(
+                  classes.expandedContainerContent,
+                  expand ? classes.expandedText : classes.hiddenText
+                )}
+              >
+                <p>{expandText}</p>
+              </div>
+              <button
+                className={classNames(classes.expandBtn, {
+                  [classes.expandBtnInfo]: status === "info"
+                })}
+                onClick={() => {
+                  setExpand(expand => !expand);
+                }}
+              >
+                {!expand ? (
+                  <FormattedMessage
+                    defaultMessage="Expand"
+                    description="snackbar expand"
+                  />
+                ) : (
+                  <FormattedMessage
+                    defaultMessage="Collapse"
+                    description="snackbar collapse"
+                  />
+                )}
+              </button>
+            </div>
+          ) : (
+            undefined
+          ),
+          <div key="actions" className={classes.actionContainer}>
+            {!!onUndo && (
               <Button
                 key="undo"
                 color="default"
@@ -118,34 +159,27 @@ export const MessageManager = props => {
                   description="snackbar button undo"
                 />
               </Button>
-          ) : (
-            undefined
-          ),
-          !!action ? (
+            )}
+            {!!actionBtn && (
               <Button
                 key="action"
                 color="default"
                 size="small"
-              onClick={() => {
-                action();
-                handleClose(null, null);
-              }}
+                onClick={actionBtn.action}
                 data-tc="button-action"
               >
-              <FormattedMessage
-                defaultMessage="Action"
-                description="snackbar button action"
-              />
+                {actionBtn.label}
               </Button>
-          ) : (
-            undefined
-          ),
+            )}
+          </div>,
           <IconButton
             key="close"
             aria-label="Close"
             color="inherit"
             onClick={handleClose as any}
-            className={classes.closeBtn}
+            className={classNames(classes.closeBtn, {
+              [classes.closeBtnInfo]: status === "info"
+            })}
           >
             <CloseIcon />
           </IconButton>,

src/components/messages/index.ts

@@ -1,8 +1,12 @@
 import { createContext } from "react";
 
 export interface IMessage {
-  action?: () => void;
+  actionBtn?: {
+    label: string;
+    action: () => void;
+  };
   autohide?: number;
+  expandText?: string;
   title?: string;
   text: string;
   onUndo?: () => void;

src/components/messages/styles.ts

@@ -15,10 +15,22 @@ export const useStyles = makeStyles(
       from: { transform: "translateX(-100%)" },
       to: { transform: "translateX(0)" }
     },
+    actionContainer: {
+      marginLeft: -8
+    },
     closeBtn: {
+      "& svg": {
+        maxHeight: 18,
+        maxWidth: 18
+      },
+      color: "#fff",
+      padding: 10,
       position: "absolute",
       right: 0,
-      top: 0
+      top: 7
+    },
+    closeBtnInfo: {
+      color: theme.palette.text.primary
     },
     error: {
       "& > div": {
@@ -28,11 +40,60 @@ export const useStyles = makeStyles(
         "&:before": {
           backgroundImage: `url(${errorIcon})`
         },
-
         backgroundColor: theme.palette.error.main,
         color: "#fff"
       }
     },
+    expandBtn: {
+      "&:before": {
+        borderLeft: "4px solid transparent",
+        borderRight: "4px solid transparent",
+        borderTop: "8px solid #fff",
+        content: "''",
+        display: "block",
+        height: 0,
+        position: "absolute",
+        right: 0,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: 0
+      },
+      background: "transparent",
+      border: "none",
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: theme.spacing(2),
+      outline: "none",
+      padding: 0,
+      paddingRight: 15,
+      position: "relative"
+    },
+    expandBtnInfo: {
+      "&:before": {
+        borderTop: `8px solid ${theme.palette.text.primary}`
+      },
+      color: theme.palette.text.primary
+    },
+    expandedContainer: {
+      "& p": {
+        margin: theme.spacing(1, 0)
+      },
+      color: "#fff",
+      marginBottom: 5
+    },
+    expandedContainerContent: {
+      overflow: "hidden",
+      transition: "max-height .6s ease"
+    },
+    expandedContainerInfo: {
+      color: theme.palette.text.secondary
+    },
+    expandedText: {
+      maxHeight: 500
+    },
+    hiddenText: {
+      maxHeight: 0
+    },
     progressBar: {
       backgroundColor: infoColor,
       height: 8,

src/theme.ts

@@ -344,8 +344,9 @@ export default (colors: IThemeColors): Theme =>
             }
           },
           display: "block",
-          paddingBottom: 15,
-          paddingLeft: 0
+          paddingBottom: 10,
+          paddingLeft: 0,
+          paddingRight: 45
         },
         message: {
           fontSize: 16