import SnackbarContent from "@material-ui/core/SnackbarContent" ; import Typography from "@material-ui/core/Typography" ; import { CloseIcon } from "../icons" ; import clsx from "clsx" ; import React from "react" ; import { CompleteIcon , InfoIcon , NotAllowedIcon , WarningIcon } from "../icons" ; import useStyles from "./styles" ; import type { NotificationProps , NotificationType } from "./types" ; import { Button } from "../Button" ; import { IconButton } from "../IconButton" ; interface IconProps extends React . SVGProps < SVGSVGElement > { type : NotificationType ; } const Icon = ( { type , ... props } ) => { switch ( type ) { case "error" : return < NotAllowedIcon { ... props } / > ; case "warning" : return < WarningIcon { ... props } / > ; case "success" : return < CompleteIcon { ... props } / > ; default : return < InfoIcon { ... props } / > ; } } ; export const Notification = ( { onClose , title , type , action , content , className , ... rest } ) => { const classes = useStyles ( ) ; return ( < div className = { clsx ( classes . snackbarContainer , className ) } data - test = "notification" data - test - type = { type } { ... rest } > < SnackbarContent aria - describedby = "client-snackbar" classes = { { action : classes . snackbarAction , message : classes . messageContainer } } className = { clsx ( classes . snackbar , { [ classes . info ] : type === "info" , [ classes . error ] : type === "error" , [ classes . success ] : type === "success" , [ classes . warning ] : type === "warning" } ) } message = { < div className = { classes . container } > < div > < Icon className = { classes . icon } type = { type } / > < /div> < div > < div className = { classes . title } > < Typography variant = "h5" > { title } < /Typography> < /div> < Typography variant = "body1" > { content } < /Typography> < /div> < /div>} action={[ < div key = "actions" > { ! ! action && ( < Button className = { classes . actionBtn } key = "action" variant = "tertiary" onClick = { action . onClick } data - test = "button-action" > { action . label } < /Button>)} < /div>, < IconButton aria - label = "Close" onClick = { onClose } hoverOutline = { false } variant = "secondary" className = { classes . closeBtn } data - test = "close" > < CloseIcon /> < /IconButton>, ] } /> < /div>); } ; Notification . displayName = "Notification" ;