From 3fc26786476042bf285881dffba0c74cd8a33e3a Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 24 Sep 2019 16:23:14 -0700 Subject: [PATCH 01/17] chore(toast): initialize Toast component Signed-off-by: Machiko Yasuda --- package.json | 3 +- package/src/components/Toast/Toast.js | 38 +++++++++++ package/src/components/Toast/Toast.md | 66 +++++++++++++++++++ package/src/components/Toast/Toast.test.js | 8 +++ .../Toast/__snapshots__/Toast.test.js.snap | 3 + package/src/components/Toast/index.js | 1 + package/src/tests/index.js | 5 +- styleguide.config.js | 3 +- styleguide/src/components/Wrapper.js | 5 +- yarn.lock | 17 ++++- 10 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 package/src/components/Toast/Toast.js create mode 100644 package/src/components/Toast/Toast.md create mode 100644 package/src/components/Toast/Toast.test.js create mode 100644 package/src/components/Toast/__snapshots__/Toast.test.js.snap create mode 100644 package/src/components/Toast/index.js diff --git a/package.json b/package.json index 66d28d0e..8b62a925 100644 --- a/package.json +++ b/package.json @@ -101,9 +101,10 @@ "dependencies": { "@babel/polyfill": "~7.2.5", "@material-ui/core": "~4.3.2", - "mdi-material-ui": "~5.8.0", "@reactioncommerce/components-context": "~1.2.0", "commitlint": "^8.0.0", + "mdi-material-ui": "~5.8.0", + "notistack": "^0.9.2", "prop-types": "~15.6.2", "react": "~16.9.0", "react-dom": "~16.9.0" diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js new file mode 100644 index 00000000..281a4a85 --- /dev/null +++ b/package/src/components/Toast/Toast.js @@ -0,0 +1,38 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Snackbar } from "@material-ui/core"; + +/** + * @name Toast + * @param {Object} props Component props + * @returns {React.Component} returns a React component + */ +const Toast = React.forwardRef(function Toast(props, ref) { + const { className, ...otherProps } = props; + return ( + + ); +}); + + +Toast.propTypes = { + /** + * You can provide a `className` prop that will be applied to the outermost DOM element + * rendered by this component. We do not recommend using this for styling purposes, but + * it can be useful as a selector in some situations. + */ + className: PropTypes.string, + /** + * Message + */ + message: PropTypes.object +}; + +Toast.defaultProps = { + +}; + +export default Toast; diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md new file mode 100644 index 00000000..ed40db87 --- /dev/null +++ b/package/src/components/Toast/Toast.md @@ -0,0 +1,66 @@ +### Overview + + + +The X component inherits from the Material-UI [X component](https://material-ui.com/components/X/). Refer to the Material-UI [X docs](https://material-ui.com/api/X/) for more information. + +### Usage + + + +```jsx noeditor +import Button from "../Button"; +import IconButton from "@material-ui/core/IconButton"; +import CloseIcon from "mdi-material-ui/Close"; + +function OpenToast() { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + return ( +
+ + Note archived} + /> +
+ ); +} + + +``` + +#### Types + + + +##### Name of type + + + +Use a X component to allow a user to XX, such as XYXY. + +```jsx + +``` \ No newline at end of file diff --git a/package/src/components/Toast/Toast.test.js b/package/src/components/Toast/Toast.test.js new file mode 100644 index 00000000..9c82293d --- /dev/null +++ b/package/src/components/Toast/Toast.test.js @@ -0,0 +1,8 @@ +import React from "react"; +import { render } from "../../tests/index.js"; +import Toast from "./Toast"; + +test("basic snapshot - only default props", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/package/src/components/Toast/__snapshots__/Toast.test.js.snap b/package/src/components/Toast/__snapshots__/Toast.test.js.snap new file mode 100644 index 00000000..487f72b9 --- /dev/null +++ b/package/src/components/Toast/__snapshots__/Toast.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`basic snapshot - only default props 1`] = ``; diff --git a/package/src/components/Toast/index.js b/package/src/components/Toast/index.js new file mode 100644 index 00000000..201977e2 --- /dev/null +++ b/package/src/components/Toast/index.js @@ -0,0 +1 @@ +export { default } from "./Toast"; diff --git a/package/src/tests/index.js b/package/src/tests/index.js index bfbb0499..7450d1d4 100644 --- a/package/src/tests/index.js +++ b/package/src/tests/index.js @@ -2,6 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { render } from "@testing-library/react"; import { MuiThemeProvider } from "@material-ui/core/styles"; +import { SnackbarProvider } from "notistack"; import defaultTheme from "../theme/defaultTheme"; /** @@ -10,7 +11,9 @@ import defaultTheme from "../theme/defaultTheme"; */ const TestProviders = ({ children }) => ( - {children} + + {children} + ); diff --git a/styleguide.config.js b/styleguide.config.js index 388ff261..f63fec68 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -356,7 +356,8 @@ module.exports = { }), generateSection({ componentNames: [ - "Chip" + "Chip", + "Toast" ], name: "Content" }), diff --git a/styleguide/src/components/Wrapper.js b/styleguide/src/components/Wrapper.js index 01846e99..5fedf5c2 100644 --- a/styleguide/src/components/Wrapper.js +++ b/styleguide/src/components/Wrapper.js @@ -2,6 +2,7 @@ import React from "react"; import DefaultWrapper from "react-styleguidist/lib/client/rsg-components/Wrapper/Wrapper"; import { ComponentsProvider } from "@reactioncommerce/components-context"; import { MuiThemeProvider } from "@material-ui/core/styles"; +import { SnackbarProvider } from "notistack"; import appComponents from "../appComponents"; import { defaultTheme } from "../../../package/src"; @@ -15,7 +16,9 @@ function Wrapper(props) { return ( - + + + ); diff --git a/yarn.lock b/yarn.lock index aafd1638..3c70750a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3044,6 +3044,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.6: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-css@4.2.x: version "4.2.1" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17" @@ -5620,7 +5625,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1: +hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" dependencies: @@ -8550,6 +8555,16 @@ normalize-url@^4.0.0: version "4.3.0" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.3.0.tgz#9c49e10fc1876aeb76dba88bf1b2b5d9fa57b2ee" +notistack@^0.9.2: + version "0.9.2" + resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.2.tgz#333ca7e08e85ae10867b1e8be5d82b149676aad6" + integrity sha512-Z2zi3ankqvwmrQvUx7SHM2X3P8llbPA/O1nM1hqn2fGuffn40Fi8isw701pdxczxA6S7huSyfOE/ZPgeTpWmrQ== + dependencies: + classnames "^2.2.6" + hoist-non-react-statics "^3.3.0" + prop-types "^15.7.2" + react-is "^16.8.6" + npm-audit-report@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-1.3.2.tgz#303bc78cd9e4c226415076a4f7e528c89fc77018" From 4513f0ea853d777b318be2a4ea6d28e1a11c8d5c Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 24 Sep 2019 16:56:15 -0700 Subject: [PATCH 02/17] chore(wrapper): make ToastWrapper component Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 10 ++++++-- package/src/components/Toast/Toast.md | 2 +- .../components/Toast/helpers/ToastWrapper.js | 25 +++++++++++++++++++ package/src/components/Toast/helpers/index.js | 5 ++++ 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 package/src/components/Toast/helpers/ToastWrapper.js create mode 100644 package/src/components/Toast/helpers/index.js diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 281a4a85..250d1508 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -1,6 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Snackbar } from "@material-ui/core"; +import { ToastWrapper } from "./helpers"; /** * @name Toast @@ -8,12 +9,17 @@ import { Snackbar } from "@material-ui/core"; * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const { className, ...otherProps } = props; + const { className, message, ...otherProps } = props; return ( + > + + ); }); diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index ed40db87..a9df3edf 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -42,7 +42,7 @@ function OpenToast() { ContentProps={{ 'aria-describedby': 'message-id', }} - message={Note archived} + message={"Note archived"} /> ); diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js new file mode 100644 index 00000000..409afee9 --- /dev/null +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -0,0 +1,25 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { SnackbarContent } from "@material-ui/core"; + +/** + * @name ToastWrapper + * @param {Object} props Component props + * @returns {React.Component} A React component + */ +export default function ToastWrapper(props) { + const { message, ...otherProps } = props; + + return ( + +
{message}
+ + ); +} + +ToastWrapper.propTypes = { + message: PropTypes.object +}; diff --git a/package/src/components/Toast/helpers/index.js b/package/src/components/Toast/helpers/index.js new file mode 100644 index 00000000..038a1565 --- /dev/null +++ b/package/src/components/Toast/helpers/index.js @@ -0,0 +1,5 @@ +import ToastWrapper from "./ToastWrapper"; + +export { + ToastWrapper +}; From 6e0192c831c94df4048d40ede2834c4b3a21d690 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 24 Sep 2019 18:15:18 -0700 Subject: [PATCH 03/17] style(toast): add info color styles Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 11 +++-- package/src/components/Toast/Toast.md | 44 +++++++++++++++++-- .../components/Toast/helpers/ToastWrapper.js | 40 +++++++++++++++-- 3 files changed, 86 insertions(+), 9 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 250d1508..c042b34d 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -9,7 +9,7 @@ import { ToastWrapper } from "./helpers"; * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const { className, message, ...otherProps } = props; + const { className, message, variant, ...otherProps } = props; return ( @@ -34,11 +35,15 @@ Toast.propTypes = { /** * Message */ - message: PropTypes.object + message: PropTypes.string, + /** + * Variant: Info, Success, Warning, Error + */ + variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired }; Toast.defaultProps = { - + variant: "info" }; export default Toast; diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index a9df3edf..f7a7629a 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -11,7 +11,6 @@ The X component inherits from the Material-UI [X component](https://material-ui. ```jsx noeditor import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import CloseIcon from "mdi-material-ui/Close"; function OpenToast() { const [open, setOpen] = React.useState(false); @@ -55,12 +54,51 @@ function OpenToast() { -##### Name of type +##### Information 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 ( +
+ + +
+ ); +} + + ``` \ No newline at end of file diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index 409afee9..f0ab0762 100644 --- a/package/src/components/Toast/helpers/ToastWrapper.js +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -1,6 +1,36 @@ import React from "react"; import PropTypes from "prop-types"; +import clsx from "clsx"; import { SnackbarContent } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles((theme) => ({ + success: { + fontSize: theme.typography.fontSize, + backgroundColor: theme.palette.colors.forestGreenBackground, + color: theme.palette.colors.black + }, + error: { + fontSize: theme.typography.fontSize, + backgroundColor: theme.palette.colors.redBackground, + color: theme.palette.colors.black + }, + info: { + fontSize: theme.typography.fontSize, + backgroundColor: theme.palette.colors.reactionBlueBackground, + color: theme.palette.colors.black, + border: `2px solid ${theme.palette.colors.reactionBlueBorder}` + }, + warning: { + fontSize: theme.typography.fontSize, + backgroundColor: theme.palette.colors.yellowBackground, + color: theme.palette.colors.black + }, + message: { + display: "flex", + alignItems: "center" + } +})); /** * @name ToastWrapper @@ -8,18 +38,22 @@ import { SnackbarContent } from "@material-ui/core"; * @returns {React.Component} A React component */ export default function ToastWrapper(props) { - const { message, ...otherProps } = props; + const { className, message, variant, ...otherProps } = props; + const classes = useStyles(); return ( -
{message}
+
{message}
 ); } ToastWrapper.propTypes = { - message: PropTypes.object + className: PropTypes.string, + message: PropTypes.string, + variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired }; From 4d6ccbf41100b8394ab2343306e0e307d88c3b1a Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 25 Sep 2019 10:46:52 -0700 Subject: [PATCH 04/17] test(toast): first basic toast Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.test.js | 2 +- .../Toast/__snapshots__/Toast.test.js.snap | 22 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/package/src/components/Toast/Toast.test.js b/package/src/components/Toast/Toast.test.js index 9c82293d..106dc167 100644 --- a/package/src/components/Toast/Toast.test.js +++ b/package/src/components/Toast/Toast.test.js @@ -3,6 +3,6 @@ import { render } from "../../tests/index.js"; import Toast from "./Toast"; test("basic snapshot - only default props", () => { - const { asFragment } = render(); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/package/src/components/Toast/__snapshots__/Toast.test.js.snap b/package/src/components/Toast/__snapshots__/Toast.test.js.snap index 487f72b9..b719f43b 100644 --- a/package/src/components/Toast/__snapshots__/Toast.test.js.snap +++ b/package/src/components/Toast/__snapshots__/Toast.test.js.snap @@ -1,3 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`basic snapshot - only default props 1`] = ``; +exports[`basic snapshot - only default props 1`] = ` + +
+
+
+ Test message +
+
+
+ +`; From 1b32f4c6669b6b26cdfd7d8df4dbd6b997729318 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 25 Sep 2019 14:48:32 -0700 Subject: [PATCH 05/17] feat(variant): add variants to toasts Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 2 + package/src/components/Toast/Toast.md | 149 +++++++++++++++++- .../components/Toast/helpers/ToastWrapper.js | 14 +- 3 files changed, 157 insertions(+), 8 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index c042b34d..0b478b5b 100644 --- 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) { @@ -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 index f7a7629a..642370f8 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -52,8 +52,6 @@ function OpenToast() { #### Types - - ##### Information @@ -101,4 +99,151 @@ function OpenToast(props) { } +``` + +##### Success + + + +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 ( +
+ + +
+ ); +} + + +``` + +##### Warning + + + +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 ( +
+ + +
+ ); +} + + +``` + +##### Error + + + +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 ( +
+ + +
+ ); +} + + ``` \ No newline at end of file diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index f0ab0762..7aa463ca 100644 --- 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} - > -
{message}
- + /> ); } ToastWrapper.propTypes = { className: PropTypes.string, message: PropTypes.string, + title: PropTypes.string, variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired }; From e0a83ed11541f4ab3df6fc57420822663880e607 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 25 Sep 2019 16:03:14 -0700 Subject: [PATCH 06/17] fix(title): add title to toast Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 4 +- package/src/components/Toast/Toast.md | 57 +++++---------- .../components/Toast/helpers/ToastWrapper.js | 70 +++++++++++++++---- 3 files changed, 73 insertions(+), 58 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 0b478b5b..c7d9fb59 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -9,7 +9,7 @@ import { ToastWrapper } from "./helpers"; * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const { className, message, variant, ...otherProps } = props; + const { className, message, variant, title, ...otherProps } = props; return ( diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index 642370f8..b363c715 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -8,46 +8,20 @@ The X component inherits from the Material-UI [X component](https://material-ui. -```jsx noeditor -import Button from "../Button"; -import IconButton from "@material-ui/core/IconButton"; - -function OpenToast() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen(true); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - return ( -
- - -
- ); -} - - +```jsx + ``` #### Types @@ -93,12 +67,13 @@ function OpenToast(props) { }} message={props.message} variant={props.variant} + title={props.title} /> ); } - + ``` ##### Success diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index 7aa463ca..ed47ce22 100644 --- a/package/src/components/Toast/helpers/ToastWrapper.js +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -1,37 +1,67 @@ import React from "react"; import PropTypes from "prop-types"; import clsx from "clsx"; -import { SnackbarContent } from "@material-ui/core"; +import { Paper, Typography } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ + message: { + padding: "8px 0" + }, + title: { + padding: "8px 0 0 0", + fontWeight: theme.typography.fontWeightSemiBold + }, + action: { + display: "flex", + alignItems: "center", + marginLeft: "auto", + paddingLeft: 16, + marginRight: -8 + }, success: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.forestGreenBackground, - color: theme.palette.colors.black, - border: `2px solid ${theme.palette.colors.forestGreenBorder}` + color: theme.palette.colors.forestGreen600, + border: `2px solid ${theme.palette.colors.forestGreenBorder}`, + padding: "8px 16px", + borderRadius: theme.shape.borderRadius, + display: "flex", + flexDirection: "column", + minWidth: 288 }, error: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.redBackground, - color: theme.palette.colors.black, - border: `2px solid ${theme.palette.colors.redBorder}` + color: theme.palette.colors.red600, + border: `2px solid ${theme.palette.colors.redBorder}`, + padding: "8px 16px", + borderRadius: theme.shape.borderRadius, + display: "flex", + flexDirection: "column", + minWidth: 288 }, info: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.reactionBlueBackground, - color: theme.palette.colors.black, - border: `2px solid ${theme.palette.colors.reactionBlueBorder}` + color: theme.palette.colors.reactionBlue600, + border: `2px solid ${theme.palette.colors.reactionBlueBorder}`, + padding: "8px 16px", + borderRadius: theme.shape.borderRadius, + display: "flex", + flexDirection: "column", + minWidth: 288 }, warning: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.yellowBackground, - color: theme.palette.colors.black, - border: `2px solid ${theme.palette.colors.yellowBorder}` - }, - message: { + color: theme.palette.colors.yellow600, + border: `2px solid ${theme.palette.colors.yellowBorder}`, + padding: "8px 16px", + borderRadius: theme.shape.borderRadius, display: "flex", - alignItems: "center" + flexDirection: "column", + minWidth: 288 } })); @@ -41,19 +71,29 @@ const useStyles = makeStyles((theme) => ({ * @returns {React.Component} A React component */ export default function ToastWrapper(props) { - const { className, message, variant, ...otherProps } = props; + const { className, message, variant, title, action, ...otherProps } = props; const classes = useStyles(); return ( - + > + { title ? {title} : null } +
{message}
+ {action ?
{action}
: null } + ); } ToastWrapper.propTypes = { + action: PropTypes.node, className: PropTypes.string, message: PropTypes.string, title: PropTypes.string, From 5f5a73290315c5f893dc570420777311964e01ce Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 25 Sep 2019 17:29:54 -0700 Subject: [PATCH 07/17] test(toast): update snaps Signed-off-by: Machiko Yasuda --- .../Toast/__snapshots__/Toast.test.js.snap | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/package/src/components/Toast/__snapshots__/Toast.test.js.snap b/package/src/components/Toast/__snapshots__/Toast.test.js.snap index b719f43b..72883b00 100644 --- a/package/src/components/Toast/__snapshots__/Toast.test.js.snap +++ b/package/src/components/Toast/__snapshots__/Toast.test.js.snap @@ -5,19 +5,20 @@ exports[`basic snapshot - only default props 1`] = `
-
+
-
- Test message -
+ Test message
+

`; From c1aa950842cc079f8328958d1b3a5957279283e3 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 26 Sep 2019 16:47:16 -0700 Subject: [PATCH 08/17] feat(toast): add close icon Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 41 ++++++++++++++-- package/src/components/Toast/Toast.md | 49 +++++++++---------- .../components/Toast/helpers/ToastWrapper.js | 30 ++++++------ 3 files changed, 75 insertions(+), 45 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index c7d9fb59..69db1d8f 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -1,18 +1,39 @@ import React from "react"; import PropTypes from "prop-types"; -import { Snackbar } from "@material-ui/core"; +import { Snackbar, IconButton } from "@material-ui/core"; +import CloseIcon from "mdi-material-ui/Close"; +import { makeStyles } from "@material-ui/core/styles"; import { ToastWrapper } from "./helpers"; +const useStyles = makeStyles((theme) => ({ + close: { + padding: 4, + marginRight: -8 + } +})); + /** * @name Toast * @param {Object} props Component props * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { + const classes = useStyles(); const { className, message, variant, title, ...otherProps } = props; + const [open, setOpen] = React.useState(false); + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + + setOpen(false); + }; + return ( + + } /> ); @@ -34,9 +66,12 @@ Toast.propTypes = { */ className: PropTypes.string, /** - * Message + * Message: Node + */ + message: PropTypes.node, + /** + * Title: Optional */ - 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 index b363c715..04dc0e95 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -1,36 +1,34 @@ ### Overview - +Toasts are used to give action-based feedback messages and convey critical or informational account-related messages. Use Toasts when a user needs more detailed information for an action. -The X component inherits from the Material-UI [X component](https://material-ui.com/components/X/). Refer to the Material-UI [X docs](https://material-ui.com/api/X/) for more information. +The Toast component inherits from the Material-UI [Snackbar component](https://material-ui.com/components/snackbars/). Refer to the Material-UI [Snackbar docs](https://material-ui.com/api/snackbar/) for more information. ### Usage - - ```jsx ``` +Toasts are most often used when the user has taken an action. Messages appear in context and communicate when that action is successful, unsuccessful, or that it otherwise needs attention and further context. + +Language should be polite, clear and concise. Optionally, a title can be added to a Toast to give clarity, or when there are 2 or more lines of information to display. + +Toasts should guide the user into taking corrective action if necessary. + +Users should be able to dismiss Toasts when appropriate. Information and success alerts can close automatically after 10 seconds. Error alerts should be persistent, and close only when action is resolved. + #### Types ##### Information - - -Use a X component to allow a user to XX, such as XYXY. +- Used when there is information or tips that users can benefit from +- Can close automatically after 10 seconds ```jsx import Button from "../Button"; @@ -73,14 +71,15 @@ function OpenToast(props) { ); } - +Information toast} title="Info" variant="info" /> ``` ##### Success -Use a X component to allow a user to XX, such as XYXY. +- Used when an action has been completed successfully +- Can close automatically after 10 seconds ```jsx import Button from "../Button"; @@ -122,14 +121,13 @@ function OpenToast(props) { ); } - +Success toast} variant="success" /> ``` ##### Warning - - -Use a X component to allow a user to XX, such as XYXY. +- Used when an action or item needs attention +- Should not close automatically, unless the action has been resolved ```jsx import Button from "../Button"; @@ -171,14 +169,13 @@ function OpenToast(props) { ); } - +Warning toast} variant="warning" /> ``` ##### Error - - -Use a X component to allow a user to XX, such as XYXY. +- Used when the system has failed to complete an action, or the user has made an error +- Should not close automatically, unless the action has been resolved ```jsx import Button from "../Button"; @@ -220,5 +217,5 @@ function OpenToast(props) { ); } - +Error toast} variant="error" /> ``` \ No newline at end of file diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index ed47ce22..ea3eccb4 100644 --- a/package/src/components/Toast/helpers/ToastWrapper.js +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -5,19 +5,15 @@ import { Paper, Typography } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ - message: { - padding: "8px 0" + messageWrapper: { + // padding: "8px 0" }, title: { - padding: "8px 0 0 0", + padding: "4px 0 8px 0", fontWeight: theme.typography.fontWeightSemiBold }, action: { - display: "flex", - alignItems: "center", - marginLeft: "auto", - paddingLeft: 16, - marginRight: -8 + marginLeft: "auto" }, success: { fontSize: theme.typography.fontSize, @@ -27,7 +23,7 @@ const useStyles = makeStyles((theme) => ({ padding: "8px 16px", borderRadius: theme.shape.borderRadius, display: "flex", - flexDirection: "column", + flexDirection: "row", minWidth: 288 }, error: { @@ -38,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ padding: "8px 16px", borderRadius: theme.shape.borderRadius, display: "flex", - flexDirection: "column", + flexDirection: "row", minWidth: 288 }, info: { @@ -49,7 +45,7 @@ const useStyles = makeStyles((theme) => ({ padding: "8px 16px", borderRadius: theme.shape.borderRadius, display: "flex", - flexDirection: "column", + flexDirection: "row", minWidth: 288 }, warning: { @@ -60,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ padding: "8px 16px", borderRadius: theme.shape.borderRadius, display: "flex", - flexDirection: "column", + flexDirection: "row", minWidth: 288 } })); @@ -76,7 +72,7 @@ export default function ToastWrapper(props) { return ( - { title ? {title} : null } -
{message}
+
+ { title ? {title} : null } + {message} +
{action ?
{action}
: null } ); @@ -95,7 +93,7 @@ export default function ToastWrapper(props) { ToastWrapper.propTypes = { action: PropTypes.node, className: PropTypes.string, - message: PropTypes.string, + message: PropTypes.node, title: PropTypes.string, variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired }; From 199f46536375e4036b78d7970d1cc087d302f005 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 26 Sep 2019 22:52:33 -0700 Subject: [PATCH 09/17] docs: update docs Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.md | 152 +------------------------- 1 file changed, 5 insertions(+), 147 deletions(-) diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index 04dc0e95..d463ae38 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -25,7 +25,7 @@ Users should be able to dismiss Toasts when appropriate. Information and success #### Types -##### Information +##### Default: Information - Used when there is information or tips that users can benefit from - Can close automatically after 10 seconds @@ -37,10 +37,6 @@ 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; @@ -51,18 +47,11 @@ function OpenToast(props) { return (
- + + Information toast} title="Info" variant="info" /> +Information toast} title="Info" /> ``` ##### Success - - - Used when an action has been completed successfully - Can close automatically after 10 seconds -```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 ( -
- - -
- ); -} - -Success toast} variant="success" /> -``` - ##### Warning - Used when an action or item needs attention - Should not close automatically, unless the action has been resolved -```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 ( -
- - -
- ); -} - -Warning toast} variant="warning" /> -``` - ##### Error - Used when the system has failed to complete an action, or the user has made an error -- Should not close automatically, unless the action has been resolved - -```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 ( -
- - -
- ); -} - -Error toast} variant="error" /> -``` \ No newline at end of file +- Should not close automatically, unless the action has been resolved \ No newline at end of file From 6df61227c2bee5569ecd166e7733e3d4688c2aa9 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 27 Sep 2019 13:26:08 -0700 Subject: [PATCH 10/17] test(toast): update snapshots Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 29 ++--------- package/src/components/Toast/Toast.md | 13 +---- .../Toast/__snapshots__/Toast.test.js.snap | 41 ++++++++++++--- .../components/Toast/helpers/ToastWrapper.js | 50 ++++++++++--------- 4 files changed, 65 insertions(+), 68 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 69db1d8f..3aa1f0f6 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -1,24 +1,14 @@ import React from "react"; import PropTypes from "prop-types"; -import { Snackbar, IconButton } from "@material-ui/core"; -import CloseIcon from "mdi-material-ui/Close"; -import { makeStyles } from "@material-ui/core/styles"; +import { Snackbar } from "@material-ui/core"; import { ToastWrapper } from "./helpers"; -const useStyles = makeStyles((theme) => ({ - close: { - padding: 4, - marginRight: -8 - } -})); - /** * @name Toast * @param {Object} props Component props * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const classes = useStyles(); const { className, message, variant, title, ...otherProps } = props; const [open, setOpen] = React.useState(false); @@ -26,7 +16,6 @@ const Toast = React.forwardRef(function Toast(props, ref) { if (reason === "clickaway") { return; } - setOpen(false); }; @@ -42,16 +31,6 @@ const Toast = React.forwardRef(function Toast(props, ref) { title={title} message={message} onClose={handleClose} - action={ - - - } /> ); @@ -60,10 +39,8 @@ const Toast = React.forwardRef(function Toast(props, ref) { Toast.propTypes = { /** - * You can provide a `className` prop that will be applied to the outermost DOM element - * rendered by this component. We do not recommend using this for styling purposes, but - * it can be useful as a selector in some situations. - */ + * Class name + */ className: PropTypes.string, /** * Message: Node diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index d463ae38..117ecd90 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -6,15 +6,6 @@ The Toast component inherits from the Material-UI [Snackbar component](https://m ### Usage -```jsx - -``` - Toasts are most often used when the user has taken an action. Messages appear in context and communicate when that action is successful, unsuccessful, or that it otherwise needs attention and further context. Language should be polite, clear and concise. Optionally, a title can be added to a Toast to give clarity, or when there are 2 or more lines of information to display. @@ -47,8 +38,8 @@ function OpenToast(props) { return (
- - + + -

-

- Test message +
+ Test message +
+
-

`; diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index ea3eccb4..e0414129 100644 --- a/package/src/components/Toast/helpers/ToastWrapper.js +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -1,15 +1,20 @@ import React from "react"; import PropTypes from "prop-types"; import clsx from "clsx"; -import { Paper, Typography } from "@material-ui/core"; +import { Paper, Typography, IconButton } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; +import CloseIcon from "mdi-material-ui/Close"; const useStyles = makeStyles((theme) => ({ + close: { + padding: theme.spacing(0.5), + float: "right" + }, messageWrapper: { - // padding: "8px 0" + display: "inline-block" }, title: { - padding: "4px 0 8px 0", + padding: theme.spacing(0.5, 0, 1, 0), fontWeight: theme.typography.fontWeightSemiBold }, action: { @@ -19,44 +24,36 @@ const useStyles = makeStyles((theme) => ({ fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.forestGreenBackground, color: theme.palette.colors.forestGreen600, - border: `2px solid ${theme.palette.colors.forestGreenBorder}`, - padding: "8px 16px", + border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.forestGreenBorder}`, + padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - display: "flex", - flexDirection: "row", minWidth: 288 }, error: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.redBackground, color: theme.palette.colors.red600, - border: `2px solid ${theme.palette.colors.redBorder}`, - padding: "8px 16px", + border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.redBorder}`, + padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - display: "flex", - flexDirection: "row", minWidth: 288 }, info: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.reactionBlueBackground, color: theme.palette.colors.reactionBlue600, - border: `2px solid ${theme.palette.colors.reactionBlueBorder}`, - padding: "8px 16px", + border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.reactionBlueBorder}`, + padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - display: "flex", - flexDirection: "row", minWidth: 288 }, warning: { fontSize: theme.typography.fontSize, backgroundColor: theme.palette.colors.yellowBackground, color: theme.palette.colors.yellow600, - border: `2px solid ${theme.palette.colors.yellowBorder}`, - padding: "8px 16px", + border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.yellowBorder}`, + padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - display: "flex", - flexDirection: "row", minWidth: 288 } })); @@ -67,7 +64,7 @@ const useStyles = makeStyles((theme) => ({ * @returns {React.Component} A React component */ export default function ToastWrapper(props) { - const { className, message, variant, title, action, ...otherProps } = props; + const { className, message, variant, title, onClose, ...otherProps } = props; const classes = useStyles(); return ( @@ -77,15 +74,21 @@ export default function ToastWrapper(props) { square elevation={6} className={clsx(classes[variant], className)} - message={message} - title={title} + aria-describedby="message-id" {...otherProps} >
{ title ? {title} : null } {message}
- {action ?
{action}
: null } + + + ); } @@ -94,6 +97,7 @@ ToastWrapper.propTypes = { action: PropTypes.node, className: PropTypes.string, message: PropTypes.node, + onClose: PropTypes.func, title: PropTypes.string, variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired }; From a897bd2b49ad31ec747eb25bafd652b0c726821d Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 27 Sep 2019 13:52:59 -0700 Subject: [PATCH 11/17] test(toast): add tests for all variants Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.test.js | 20 ++ .../Toast/__snapshots__/Toast.test.js.snap | 192 ++++++++++++++++++ 2 files changed, 212 insertions(+) diff --git a/package/src/components/Toast/Toast.test.js b/package/src/components/Toast/Toast.test.js index 106dc167..d4b0f2c9 100644 --- a/package/src/components/Toast/Toast.test.js +++ b/package/src/components/Toast/Toast.test.js @@ -6,3 +6,23 @@ test("basic snapshot - only default props", () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); + +test("basic snapshot - information variant", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test("basic snapshot - success variant", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test("basic snapshot - error variant", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test("basic snapshot - warning variant", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/package/src/components/Toast/__snapshots__/Toast.test.js.snap b/package/src/components/Toast/__snapshots__/Toast.test.js.snap index 6617dd62..79aeb5cc 100644 --- a/package/src/components/Toast/__snapshots__/Toast.test.js.snap +++ b/package/src/components/Toast/__snapshots__/Toast.test.js.snap @@ -1,5 +1,101 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`basic snapshot - error variant 1`] = ` + +
+
+
+ Test message +
+ +
+
+ +`; + +exports[`basic snapshot - information variant 1`] = ` + +
+
+
+ Test message +
+ +
+
+ +`; + exports[`basic snapshot - only default props 1`] = `
`; + +exports[`basic snapshot - success variant 1`] = ` + +
+
+
+ Test message +
+ +
+
+ +`; + +exports[`basic snapshot - warning variant 1`] = ` + +
+
+
+ Test message +
+ +
+
+ +`; From e3d238edb1489aee0347b5134ddf23920c84f5cd Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 27 Sep 2019 14:03:30 -0700 Subject: [PATCH 12/17] chore(toast): remove unused prop Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 3aa1f0f6..666e95a7 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -9,7 +9,7 @@ import { ToastWrapper } from "./helpers"; * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const { className, message, variant, title, ...otherProps } = props; + const { message, variant, title, ...otherProps } = props; const [open, setOpen] = React.useState(false); const handleClose = (event, reason) => { @@ -38,10 +38,6 @@ const Toast = React.forwardRef(function Toast(props, ref) { Toast.propTypes = { - /** - * Class name - */ - className: PropTypes.string, /** * Message: Node */ From 8eb74fbdd7a9a314a7223976bc633c79bdaf99dd Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 4 Oct 2019 14:22:52 -0700 Subject: [PATCH 13/17] fix(toast): fix X with and without title Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.md | 36 ++++++++++++++++++- .../components/Toast/helpers/ToastWrapper.js | 19 ++++++---- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index 117ecd90..7732bb9e 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -24,6 +24,7 @@ Users should be able to dismiss Toasts when appropriate. Information and success ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; +import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); @@ -51,9 +52,42 @@ function OpenToast(props) { ); } -Information toast} title="Info" /> +Information toast} /> ``` +```jsx +import Button from "../Button"; +import IconButton from "@material-ui/core/IconButton"; +import { withSnackbar } from 'notistack'; + +function OpenToast(props) { + const [open, setOpen] = React.useState(false); + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + return ( +
+ + + +
+ ); +} + +Information toast with title} title="Title" /> +``` ##### Success - Used when an action has been completed successfully diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js index e0414129..8f8e16ab 100644 --- a/package/src/components/Toast/helpers/ToastWrapper.js +++ b/package/src/components/Toast/helpers/ToastWrapper.js @@ -8,10 +8,13 @@ import CloseIcon from "mdi-material-ui/Close"; const useStyles = makeStyles((theme) => ({ close: { padding: theme.spacing(0.5), - float: "right" + marginLeft: "auto", + height: "100%" }, messageWrapper: { - display: "inline-block" + display: "flex", + justifyContent: "center", + flexDirection: "column" }, title: { padding: theme.spacing(0.5, 0, 1, 0), @@ -27,7 +30,8 @@ const useStyles = makeStyles((theme) => ({ border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.forestGreenBorder}`, padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - minWidth: 288 + minWidth: 288, + display: "flex" }, error: { fontSize: theme.typography.fontSize, @@ -36,7 +40,8 @@ const useStyles = makeStyles((theme) => ({ border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.redBorder}`, padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - minWidth: 288 + minWidth: 288, + display: "flex" }, info: { fontSize: theme.typography.fontSize, @@ -45,7 +50,8 @@ const useStyles = makeStyles((theme) => ({ border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.reactionBlueBorder}`, padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - minWidth: 288 + minWidth: 288, + display: "flex" }, warning: { fontSize: theme.typography.fontSize, @@ -54,7 +60,8 @@ const useStyles = makeStyles((theme) => ({ border: `${theme.spacing(0.25)}px solid ${theme.palette.colors.yellowBorder}`, padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, - minWidth: 288 + minWidth: 288, + display: "flex" } })); From 58e0d3643d7050bcbb59352faa2eeb87a3a7ef3b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 4 Oct 2019 14:27:38 -0700 Subject: [PATCH 14/17] docs(toast): document all toasts Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.md | 121 ++++++++++++++++++++++++-- 1 file changed, 113 insertions(+), 8 deletions(-) diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index 7732bb9e..c2136d82 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -54,6 +54,10 @@ function OpenToast(props) { Information toast} /> ``` +##### Success + +- Used when an action has been completed successfully +- Can close automatically after 10 seconds ```jsx import Button from "../Button"; @@ -73,8 +77,8 @@ function OpenToast(props) { return (
- - + + Information toast with title} title="Title" /> +Success toast} variant="success" /> ``` -##### Success - -- Used when an action has been completed successfully -- Can close automatically after 10 seconds ##### Warning - Used when an action or item needs attention - Should not close automatically, unless the action has been resolved +```jsx +import Button from "../Button"; +import IconButton from "@material-ui/core/IconButton"; +import { withSnackbar } from 'notistack'; + +function OpenToast(props) { + const [open, setOpen] = React.useState(false); + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + return ( +
+ + + +
+ ); +} + +Warning toast} variant="warning" /> +``` ##### Error - Used when the system has failed to complete an action, or the user has made an error -- Should not close automatically, unless the action has been resolved \ No newline at end of file +- Should not close automatically, unless the action has been resolved + +```jsx +import Button from "../Button"; +import IconButton from "@material-ui/core/IconButton"; +import { withSnackbar } from 'notistack'; + +function OpenToast(props) { + const [open, setOpen] = React.useState(false); + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + return ( +
+ + + +
+ ); +} + +Error toast} variant="error" /> +``` + +#### Toasts with Titles + +- All toasts can also have a `Title` + +```jsx +import Button from "../Button"; +import IconButton from "@material-ui/core/IconButton"; +import { withSnackbar } from 'notistack'; + +function OpenToast(props) { + const [open, setOpen] = React.useState(false); + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + return ( +
+ + + +
+ ); +} + +Information toast with title} title="Title" /> +``` \ No newline at end of file From 77c4a9b14243b7430823bca4996efb17b976b63b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 4 Oct 2019 14:32:29 -0700 Subject: [PATCH 15/17] docs(toast): remove notistack Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md index c2136d82..5143cf8b 100644 --- a/package/src/components/Toast/Toast.md +++ b/package/src/components/Toast/Toast.md @@ -24,7 +24,6 @@ Users should be able to dismiss Toasts when appropriate. Information and success ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); @@ -62,7 +61,6 @@ function OpenToast(props) { ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); @@ -101,7 +99,6 @@ function OpenToast(props) { ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); @@ -139,7 +136,6 @@ function OpenToast(props) { ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); @@ -177,7 +173,6 @@ function OpenToast(props) { ```jsx import Button from "../Button"; import IconButton from "@material-ui/core/IconButton"; -import { withSnackbar } from 'notistack'; function OpenToast(props) { const [open, setOpen] = React.useState(false); From 23b0c541f9d1e4614e7526b187e47e00c0980384 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 4 Oct 2019 15:07:57 -0700 Subject: [PATCH 16/17] refactor(toast): add onClose as required prop Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 666e95a7..003f1c02 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -9,15 +9,8 @@ import { ToastWrapper } from "./helpers"; * @returns {React.Component} returns a React component */ const Toast = React.forwardRef(function Toast(props, ref) { - const { message, variant, title, ...otherProps } = props; - const [open, setOpen] = React.useState(false); - - const handleClose = (event, reason) => { - if (reason === "clickaway") { - return; - } - setOpen(false); - }; + const { message, variant, title, onClose, ...otherProps } = props; + const [open] = React.useState(false); return ( ); @@ -39,11 +32,15 @@ const Toast = React.forwardRef(function Toast(props, ref) { Toast.propTypes = { /** - * Message: Node + * Message: Node, Message goes here */ message: PropTypes.node, /** - * Title: Optional + * onClose: Callback fired when the component requests to be closed and when the X icon button is clicked + */ + onClose: PropTypes.func.isRequired, + /** + * Title: Optional string, displayed in bold */ title: PropTypes.string, /** From 1e0a6235db7aae77652e59dc0901163ef4dc491e Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Fri, 4 Oct 2019 15:16:42 -0700 Subject: [PATCH 17/17] refactor(toast): remove unnecessary open prop Signed-off-by: Machiko Yasuda --- package/src/components/Toast/Toast.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js index 003f1c02..ff4bad0e 100644 --- a/package/src/components/Toast/Toast.js +++ b/package/src/components/Toast/Toast.js @@ -10,12 +10,10 @@ import { ToastWrapper } from "./helpers"; */ const Toast = React.forwardRef(function Toast(props, ref) { const { message, variant, title, onClose, ...otherProps } = props; - const [open] = React.useState(false); return (