feat(variant): add variants to toasts

Signed-off-by: Machiko Yasuda <[email protected]>
reactioncommerce · Sep 25, 2019 · 1b32f4c · 1b32f4c
1 parent 4d6ccbf
commit 1b32f4c
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 8 deletions.
diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js
@@ -18,6 +18,7 @@ const Toast = React.forwardRef(function Toast(props, ref) {
       <ToastWrapper
         props={otherProps}
         variant={variant}
+        title={props.title}
         message={message}
       />
     </Snackbar>
@@ -36,6 +37,7 @@ Toast.propTypes = {
    * Message
    */
   message: PropTypes.string,
+  title: PropTypes.string,
   /**
    * Variant: Info, Success, Warning, Error
    */

diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md
@@ -52,8 +52,6 @@ function OpenToast() {
 
 #### Types
 
-<!-- Show all Types of the component used in Reaction Admin -->
-
 ##### Information
 
 <!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
@@ -101,4 +99,151 @@ function OpenToast(props) {
 }
 
 <OpenToast message="Information toast" variant="info" />
+```
+
+##### Success
+
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
+
+Use a X component to allow a user to XX, such as XYXY.
+
+```jsx
+import Button from "../Button";
+import IconButton from "@material-ui/core/IconButton";
+
+function OpenToast(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="primary" onClick={handleClick}>Open success toast</Button>
+      <Toast
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={props.message}
+        variant={props.variant}
+      />
+    </div>
+  );
+}
+
+<OpenToast message="Success toast" variant="success" />
+```
+
+##### Warning
+
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
+
+Use a X component to allow a user to XX, such as XYXY.
+
+```jsx
+import Button from "../Button";
+import IconButton from "@material-ui/core/IconButton";
+
+function OpenToast(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="secondary" onClick={handleClick}>Open warning toast</Button>
+      <Toast
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={props.message}
+        variant={props.variant}
+      />
+    </div>
+  );
+}
+
+<OpenToast message="Warning toast" variant="warning" />
+```
+
+##### Error
+
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
+
+Use a X component to allow a user to XX, such as XYXY.
+
+```jsx
+import Button from "../Button";
+import IconButton from "@material-ui/core/IconButton";
+
+function OpenToast(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="error" onClick={handleClick}>Open error toast</Button>
+      <Toast
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={props.message}
+        variant={props.variant}
+      />
+    </div>
+  );
+}
+
+<OpenToast message="Error toast" variant="error" />
 ```
diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js
@@ -8,12 +8,14 @@ const useStyles = makeStyles((theme) => ({
   success: {
     fontSize: theme.typography.fontSize,
     backgroundColor: theme.palette.colors.forestGreenBackground,
-    color: theme.palette.colors.black
+    color: theme.palette.colors.black,
+    border: `2px solid ${theme.palette.colors.forestGreenBorder}`
   },
   error: {
     fontSize: theme.typography.fontSize,
     backgroundColor: theme.palette.colors.redBackground,
-    color: theme.palette.colors.black
+    color: theme.palette.colors.black,
+    border: `2px solid ${theme.palette.colors.redBorder}`
   },
   info: {
     fontSize: theme.typography.fontSize,
@@ -24,7 +26,8 @@ const useStyles = makeStyles((theme) => ({
   warning: {
     fontSize: theme.typography.fontSize,
     backgroundColor: theme.palette.colors.yellowBackground,
-    color: theme.palette.colors.black
+    color: theme.palette.colors.black,
+    border: `2px solid ${theme.palette.colors.yellowBorder}`
   },
   message: {
     display: "flex",
@@ -46,14 +49,13 @@ export default function ToastWrapper(props) {
       className={clsx(classes[variant], className)}
       message={message}
       {...otherProps}
-    >
-      <div className={classes.message}>{message}</div>
-    </SnackbarContent>
+    />
   );
 }
 
 ToastWrapper.propTypes = {
   className: PropTypes.string,
   message: PropTypes.string,
+  title: PropTypes.string,
   variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired
 };