orc-shared 5.10.1-dev.7 → 5.10.1

package/src/components/ToastList.js

@@ -1,10 +1,12 @@
 import React from "react";
+import styled from "styled-components";
+import transition from "styled-transition-group";
+import { TransitionGroup } from "react-transition-group";
 import ReactDOM from "react-dom";
-import { FormattedMessage } from "react-intl";
-import { makeStyles } from "@material-ui/core/styles";
-import Icon from "./MaterialUI/DataDisplay/Icon";
-import { getToastColor } from "../utils/toastHelper";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { shade } from "polished";
+import { getThemeProp } from "../utils";
+import Text from "./Text";
+import Icon from "./Icon";
 
 const portal = document.getElementById("toast") || document.createElement("div");
 /* istanbul ignore else */
@@ -13,91 +15,100 @@ if (!portal.parent) {
 	document.body.appendChild(portal);
 }
 
-const useStyles = makeStyles(theme => ({
-	toastBox: props => {
-		const toastColor = getToastColor(theme, props.toastType);
+const toastTransitionTime = 300;
 
-		return {
-			display: "flex",
-			width: "390px",
-			marginTop: "10px",
-			padding: "17px",
-			borderRadius: "5px",
-			fontSize: "14px",
-			color: "white",
-			backgroundColor: toastColor,
-			zIndex: 10000,
+export const ToastBox = transition.div`
+	display: flex;
+	width: 390px;
+	margin-top: 10px;
+	padding: 17px;
+	border-radius: 5px;
+	font-size: 14px;
+	color: white;
+	background-color: ${getThemeProp(["colors", "toasts", props => props.type], "#999")};
+	z-index: 10000;
 
-			"& > *": {
-				marginTop: "auto",
-				marginBottom: "auto",
-			},
+	& > * {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+	
+	&:enter {
+		transform: translateX(200%);
+	}
+	&:enter-active {
+		transform: translateX(0);
+		transition: transform ${toastTransitionTime}ms ease-out;
+	}
+	&:exit {
+		transform-origin: top;
+		transform: scale(1,1);
+	}
+	&:exit ~ & {
+		transform: translateY(0);
+	}
+	&:exit-active {
+		transform: scale(1, 0.001);
+		transition: transform ${toastTransitionTime}ms ease-out;
+	}
+	&:exit-active ~ & {
+		transition: transform ${toastTransitionTime}ms ease-out;
+		transform: translateY(-100%);
+	}
+`;
+ToastBox.defaultProps = {
+	timeout: toastTransitionTime,
+	unmountOnExit: true,
+};
 
-			"&.enter": {
-				transform: "translateX(200%)",
-			},
-			"&.enter-active": {
-				transform: "translateX(0)",
-				transition: "transform 300ms ease-out",
-			},
-			"&.exit": {
-				transformOrigin: "top",
-				transform: "scale(1,1)",
-			},
-			"&.exit ~ &": {
-				transform: "translateY(0)",
-			},
-			"&.exit-active": {
-				transform: "scale(1, 0.001)",
-				transition: "transform 300ms ease-out",
-			},
-			"&.exit-active ~ &": {
-				transition: "transform 300ms ease-out",
-				transform: "translateY(-100%)",
-			},
-		};
-	},
-	listWrapper: {
-		position: "absolute",
-		top: "40px",
-		right: "16px",
-		display: "flex",
-		flexDirection: "column",
-	},
-	closeIcon: {
-		padding: "2px",
-		borderRadius: "2px",
-		strokeWidth: "2px",
-		cursor: "pointer",
-		marginLeft: "auto",
-		fontSize: "20px",
-	},
-}));
+export const ToastIcon = styled(Icon).attrs(props => ({
+	id: getThemeProp(["icons", "toast", props => props.type], "bubble-chat-2")(props),
+}))`
+	font-size: 20px;
+	margin-right: 16px;
+	stroke-width: 2px;
+`;
 
-export const Toast = ({ message = "[No message]", type = "", closeFunc, ...props }) => {
-	const classes = useStyles({ toastType: type });
+export const CloseIcon = styled(Icon).attrs(props => ({
+	id: getThemeProp(["icons", "close"], "close")(props),
+}))`
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	font-size: 10px;
+	padding: 2px;
+	border-radius: 2px;
+	stroke-width: 2px;
 
-	return (
-		<CSSTransition in={props.in} timeout={300} unmountOnExit>
-			<div className={classes.toastBox}>
-				<span>{typeof message === "string" ? message : <FormattedMessage {...message} />}</span>
-				{closeFunc ? <Icon id="close" className={classes.closeIcon} onClick={closeFunc} /> : null}
-			</div>
-		</CSSTransition>
-	);
-};
+	&:hover {
+		background-color: ${getThemeProp(["colors", "toasts", props => props.type], "#999999", color => shade(0.3, color))};
+	}
+`;
 
-export const ToastList = ({ toasts }) => {
-	const classes = useStyles();
+export const Toast = ({ message = "[No message]", type = "", closeFunc, ...props }) => (
+	<ToastBox type={type} in={props.in}>
+		<ToastIcon type={type} />
+		<Text message={message} />
+		{closeFunc ? <CloseIcon onClick={closeFunc} type={type} /> : null}
+	</ToastBox>
+);
 
-	return ReactDOM.createPortal(
-		<TransitionGroup className={classes.listWrapper}>
+const ListWrapper = styled(TransitionGroup)`
+	position: absolute;
+	top: 40px;
+	right: 16px;
+	display: flex;
+	flex-direction: column;
+`;
+
+export const ToastList = ({ toasts }) =>
+	ReactDOM.createPortal(
+		<ListWrapper>
 			{toasts.map((props, idx) => (
 				<Toast key={"toast" + idx} {...props} />
 			))}
-		</TransitionGroup>,
+		</ListWrapper>,
 		portal,
 	);
-};
 
 export default ToastList;

package/src/components/ToastList.test.js

@@ -3,9 +3,10 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
 import { Ignore } from "unexpected-reaction";
-import Icon from "./MaterialUI/DataDisplay/Icon";
-import FullToastList, { Toast } from "./ToastList";
-import { CSSTransition } from "react-transition-group";
+import { ThemeProvider } from "styled-components";
+import { shade } from "polished";
+import Icon from "./Icon";
+import FullToastList, { Toast, ToastBox, ToastIcon, CloseIcon } from "./ToastList";
 
 class RenderToast extends React.Component {
 	render() {
@@ -46,11 +47,10 @@ describe("ToastList", () => {
 			return expect(
 				toastRoot,
 				"to contain",
-				<CSSTransition in>
-					<div>
-						<span>[No message]</span>
-					</div>
-				</CSSTransition>,
+				<ToastBox in>
+					<Ignore />
+					[No message]
+				</ToastBox>,
 			);
 		});
 	});
@@ -70,11 +70,10 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CSSTransition in>
-				<div>
-					<span>this is a toast</span>
-				</div>
-			</CSSTransition>,
+			<ToastBox in>
+				<Ignore />
+				this is a toast
+			</ToastBox>,
 		));
 
 	it("shows a translated message", () =>
@@ -92,11 +91,10 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CSSTransition in>
-				<div>
-					<span>This is a toast</span>
-				</div>
-			</CSSTransition>,
+			<ToastBox in>
+				<Ignore />
+				This is a toast
+			</ToastBox>,
 		));
 
 	it("shows an icon", () =>
@@ -112,11 +110,10 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CSSTransition in>
-				<div>
-					<Ignore />
-				</div>
-			</CSSTransition>,
+			<ToastBox in>
+				<ToastIcon type="confirm" />
+				<Ignore />
+			</ToastBox>,
 		));
 
 	it("shows a close icon if a close function is given", () =>
@@ -132,11 +129,88 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CSSTransition in>
-				<div>
-					<Ignore />
-					<Icon id="close" onClick={expect.it("to be a function")} />
-				</div>
-			</CSSTransition>,
+			<ToastBox in>
+				<Ignore />
+				<Ignore />
+				<CloseIcon onClick={expect.it("to be a function")} />
+			</ToastBox>,
 		));
+
+	describe("with types", () => {
+		let theme;
+		beforeEach(() => {
+			theme = {
+				colors: {
+					toasts: {
+						test: "#ff0000",
+					},
+				},
+				icons: {
+					toast: {
+						test: "test-icon",
+					},
+				},
+			};
+		});
+
+		it("renders a default type", () =>
+			expect(
+				<Provider
+					store={{
+						subscribe: () => {},
+						dispatch: () => {},
+						getState: () => ({}),
+					}}
+				>
+					<ThemeProvider theme={theme}>
+						<Toast in />
+					</ThemeProvider>
+				</Provider>,
+				"when mounted",
+				"to have style rules satisfying",
+				"to contain",
+				"background-color: #999;",
+			).and("when mounted", "to contain", <Icon id="bubble-chat-2" />));
+
+		it("renders a set type", () =>
+			expect(
+				<Provider
+					store={{
+						subscribe: () => {},
+						dispatch: () => {},
+						getState: () => ({}),
+					}}
+				>
+					<ThemeProvider theme={theme}>
+						<Toast in type="test" />
+					</ThemeProvider>
+				</Provider>,
+				"when mounted",
+				"to have style rules satisfying",
+				"to contain",
+				"background-color: #ff0000;",
+			).and("when mounted", "to contain", <Icon id="test-icon" />));
+
+		it("darkens close icon background on hover", () =>
+			expect(
+				<ThemeProvider theme={theme}>
+					<CloseIcon type="" />
+				</ThemeProvider>,
+				"when mounted",
+				"to have style rules satisfying",
+				"to contain",
+				":hover {background-color: " + shade(0.3, "#999") + ";}",
+			));
+
+		it("darkens close icon background on hover with set type", () =>
+			expect(
+				<ThemeProvider theme={theme}>
+					<CloseIcon type="test" />
+				</ThemeProvider>,
+				"when mounted",
+				"to have style rules satisfying",
+				"to contain",
+				":hover {background-color: " + shade(0.3, "#ff0000") + ";}",
+			));
+	});
 });

package/src/getTheme.js

@@ -54,6 +54,11 @@ const baseTheme = {
 			Sale: "sales-scope",
 			Dependant: "dependent-scope",
 		},
+		// toast: {
+		// 	confirm: "checkmark-circle",
+		// 	warn: "warning",
+		// 	error: "cross-circle",
+		// },
 		prev: "arrow-small-left",
 		next: "arrow-small-right",
 		menu: "app-list",

package/dist/utils/toastHelper.js

@@ -1,52 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getToastColor = void 0;
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-var getToastColor = exports.getToastColor = function getToastColor(theme, alertType) {
-  var toastBorderColors = {
-    error: theme.palette.error.main,
-    warn: theme.palette.warning.main,
-    confirm: theme.palette.success.main
-  };
-  return toastBorderColors[alertType] || "red";
-};
-;
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-  if (!reactHotLoader) {
-    return;
-  }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
-})();
-;
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
-;
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-  if (!reactHotLoader) {
-    return;
-  }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
-})();
-;
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();

package/src/utils/toastHelper.js

@@ -1,8 +0,0 @@
-export const getToastColor = (theme, alertType) => {
-	const toastBorderColors = {
-		error: theme.palette.error.main,
-		warn: theme.palette.warning.main,
-		confirm: theme.palette.success.main,
-	};
-	return toastBorderColors[alertType] || "red";
-};

package/src/utils/toastHelper.test.js

@@ -1,41 +0,0 @@
-import { getToastColor } from "./toastHelper";
-
-describe("getToastColor", () => {
-	const theme = {
-		palette: {
-			error: {
-				main: "#FF0000",
-			},
-			warning: {
-				main: "#FFA500",
-			},
-			success: {
-				main: "#00FF00",
-			},
-		},
-	};
-
-	it("should return error color", () => {
-		const toastColor = getToastColor(theme, "error");
-
-		return expect(toastColor, "to be", "#FF0000");
-	});
-
-	it("should return warning color", () => {
-		const toastColor = getToastColor(theme, "warn");
-
-		return expect(toastColor, "to be", "#FFA500");
-	});
-
-	it("should return success color", () => {
-		const toastColor = getToastColor(theme, "confirm");
-
-		return expect(toastColor, "to be", "#00FF00");
-	});
-
-	it("should return default color", () => {
-		const toastColor = getToastColor(theme, "test");
-
-		return expect(toastColor, "to be", "red");
-	});
-});