@madie/madie-design-system 1.0.34 → 1.0.36

package/components/AutoComplete/AutoComplete.jsx

@@ -119,6 +119,16 @@ const AutoComplete = ({
                     inputProps["aria-labelledby"] = `${id}-label`;
                     return (
                         <TextField
+                            sx={{
+                                "& .MuiInputBase-input": {
+                                    opacity: 1,
+                                    color: "#333",
+                                    "&::placeholder": {
+                                        opacity: 1,
+                                        color: "#717171"
+                                    },
+                                },
+                            }}
                             {...params}
                             placeholder={placeholder}
                             inputProps={inputProps}

package/components/Select/index.jsx

@@ -23,12 +23,13 @@ const selectStyles = {
     },
     // input base selector
     "& .MuiInputBase-input": {
+        color: "#333",
         fontFamily: "Rubik",
         fontSize: 14,
         borderRadius: "3px",
         padding: "9px 14px",
         "&::placeholder": {
-            opacity: 0.6,
+            color: "#717171"
         },
     },
     "& 	.MuiSelect-icon": {
@@ -60,7 +61,7 @@ const Select = ({
     ...rest
 }) => {
     const placehold = (
-        <span style={{ opacity: 0.6 }}>
+        <span style={{ color: "#717171" }}>
             {placeHolder?.name || "placeholder"}
         </span>
     );

package/components/TextField/index.jsx

@@ -46,12 +46,13 @@ const TextField = ({
                     },
                     // input base selector
                     "& .MuiInputBase-input": {
+                        color: "#333",
                         fontFamily: "Rubik",
                         fontSize: 14,
                         borderRadius: "3px",
                         padding: "9px 14px",
                         "&::placeholder": {
-                            opacity: 0.6,
+                            color: "#717171"
                         },
                     },
                 }}

package/components/Toast/Toast.stories.js

@@ -41,6 +41,72 @@ export const SuccessToast = () => {
     );
 };
 
+export const WarningToast = () => {
+    const [toastOpen, setToastOpen] = useState(false);
+    return (
+        <div
+            style={{
+                height: "100vh",
+                width: "100vw",
+                backgroundColor: "#242424",
+            }}
+        >
+            <button
+                onClick={() => setToastOpen(true)}
+                style={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "calc(50% - 80px)",
+                }}
+            >
+                Simulate Warning
+            </button>
+            <Toast
+                toastKey="toast-key"
+                toastType="warning"
+                testId="warning-toast"
+                open={toastOpen}
+                message="Something has gone wrong. consider fixing before continuing"
+                onClose={() => setToastOpen(false)}
+                autoHideDuration={3000}
+            />
+        </div>
+    );
+};
+
+export const InfoToast = () => {
+    const [toastOpen, setToastOpen] = useState(false);
+    return (
+        <div
+            style={{
+                height: "100vh",
+                width: "100vw",
+                backgroundColor: "#242424",
+            }}
+        >
+            <button
+                onClick={() => setToastOpen(true)}
+                style={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "calc(50% - 80px)",
+                }}
+            >
+                Simulate Info
+            </button>
+            <Toast
+                toastKey="toast-key"
+                toastType="info"
+                testId="info-toast"
+                open={toastOpen}
+                message="Some useful information"
+                onClose={() => setToastOpen(false)}
+                autoHideDuration={3000}
+            />
+        </div>
+    );
+};
+
 export const DangerToast = () => {
     const [toastOpen, setToastOpen] = useState(false);
     return (

package/components/Toast/index.jsx

@@ -1,73 +1,84 @@
 import React from "react";
-import PropTypes from "prop-types";
+
+import ErrorIcon from "@mui/icons-material/Error"; // warning
+import InfoIcon from "@mui/icons-material/Info"; // info
+import CancelIcon from "@mui/icons-material/Cancel"; // error
+import CheckCircleIcon from "@mui/icons-material/CheckCircle"; //success
+
 import { IconButton, Snackbar } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ClearIcon from "@mui/icons-material/Clear";
+
+import classNames from "classnames";
+import PropTypes from "prop-types";
 
 const Toast = ({
-    open,
+    toastType = "warning",
+    open = true,
     message,
-    toastType, // 'danger | success, more later when mockups come out
-    autoHideDuration,
+    canClose = true,
     onClose,
+    autoHideDuration,
     testId,
     toastKey,
+    toastProps, // props to pass to outer component
+    closeButtonProps, // props to pass to close button
     ...rest
 }) => {
-    const dangerColor = "#D92F2F";
-    const successColor = "#4d7e23";
-    // we can map our colors and icons to make this reusable for multiple info types.
-    const colorMap = {
-        danger: dangerColor,
-        success: successColor,
-    };
-    const iconMap = {
-        danger: ErrorOutlineIcon,
-        success: CheckCircleOutlineIcon,
+    // we have four states to render for
+    const typeSelect = {
+        warning: ErrorIcon,
+        info: InfoIcon,
+        danger: CancelIcon,
+        success: CheckCircleIcon,
     };
-    const selectedColor = colorMap[toastType];
-    const SelectedIcon = iconMap[toastType];
+    const Icon = typeSelect[toastType];
+
+    const toastClass = classNames("toast", toastType);
+    const iconClass = classNames("alert-icon", toastType);
 
-    const Message = (
-        <div className="messageCont">
-            <div>
-                <div className="errorCont">
-                    {SelectedIcon && <SelectedIcon className="leftIcon" />}
-                </div>
-                <p className="messageText" data-testid={testId}>
-                    {message}
-                </p>
-            </div>
-            <div style={{ display: "block" }}>
-                <IconButton
-                    className="icon-button"
-                    aria-label="close"
-                    color="inherit"
-                    sx={{ p: 0 }}
-                    onClick={onClose}
-                    data-testId="close-error-button"
-                >
-                    <CloseIcon />
-                </IconButton>
-            </div>
-        </div>
-    );
     return (
         <Snackbar
             key={toastKey ? toastKey : undefined}
-            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+            anchorOrigin={{ vertical: "top", horizontal: "center" }}
+            autoHideDuration={autoHideDuration}
+            open={open}
+            onClose={onClose}
+            message={
+                <div className={toastClass} {...toastProps}>
+                    <Icon className={iconClass} />
+                    <div id="message" data-testid={testId}>{message}</div>
+                    {canClose && (
+                        <IconButton
+                            onClick={onClose}
+                            sx={{
+                                marginLeft: "auto",
+                                "&:after": {
+                                    content: `''`,
+                                    position: "absolute",
+                                    left: "0px",
+                                    width: "1px",
+                                    height: "40px",
+                                    backgroundColor: "#B0B0B0",
+                                    pointerEvents: "none",
+                                },
+                            }}
+                            {...closeButtonProps}
+                        >
+                            <ClearIcon sx={{ color: "#242424" }} />
+                        </IconButton>
+                    )}
+                </div>
+            }
             sx={{
                 overflow: "hidden",
-                color: selectedColor,
-                borderRadius: 1,
+                // borderRadius: 4,
                 "& .MuiPaper-root": {
                     backgroundColor: "#fff",
                     padding: 0,
-                    color: selectedColor,
                 },
-                "& .MuiSvgIcon-root": {
-                    color: "#242424",
+                "& .MuiSnackbar-root": {
+                    overflow: "hidden",
+                    borderRadius: 4,
                 },
                 "& .MuiSnackbarContent-message": {
                     padding: 0,
@@ -79,50 +90,26 @@ const Toast = ({
                         justifyContent: "space-between",
                         div: {
                             display: "flex",
-                            ".messageText": {
-                                m: 0,
-                                p: 2.375,
-                                fontFamily: "Rubik",
-                                fontWeight: 500,
-                                fontSize: 14,
-                            },
-                            ".errorCont": {
-                                backgroundColor: selectedColor,
-                                ".leftIcon": {
-                                    m: 2,
-                                    color: "#fff",
-                                },
-                            },
-                            ".icon-button": {
-                                m: 2,
-                                "&. MuiSvgIcon-root": {
-                                    color: "#242424",
-                                },
-                            },
                         },
                     },
-                    "& .MuiSvgIcon-root": {
-                        color: "#242424",
-                    },
                 },
             }}
-            autoHideDuration={autoHideDuration}
-            open={open}
-            onClose={onClose}
-            message={message ? Message : undefined}
             {...rest}
         />
     );
 };
 
 Toast.propTypes = {
+    toastType: PropTypes.string,
     open: PropTypes.bool,
-    message: PropTypes.string,
-    toastType: PropTypes.string, // 'danger | success, more later when mockups come out
-    autoHideDuration: PropTypes.number,
+    message: PropTypes.node,
+    canClose: PropTypes.bool,
     onClose: PropTypes.func,
+    autoHideDuration: PropTypes.number,
     testId: PropTypes.string,
     toastKey: PropTypes.string,
+    toastProps: PropTypes.object,
+    closeButtonProps: PropTypes.object,
 };
 
 export default Toast;