orc-shared 5.10.2 → 5.99.0-dev.10

package/src/components/ToastList.js

@@ -1,12 +1,10 @@
 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 { shade } from "polished";
-import { getThemeProp } from "../utils";
-import Text from "./Text";
-import Icon from "./Icon";
+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";
 
 const portal = document.getElementById("toast") || document.createElement("div");
 /* istanbul ignore else */
@@ -15,100 +13,91 @@ if (!portal.parent) {
 	document.body.appendChild(portal);
 }
 
-const toastTransitionTime = 300;
+const useStyles = makeStyles(theme => ({
+	toastBox: props => {
+		const toastColor = getToastColor(theme, props.toastType);
 
-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;
+		return {
+			display: "flex",
+			width: theme.spacing(39),
+			marginTop: theme.spacing(1),
+			padding: theme.spacing(1.7),
+			borderRadius: theme.spacing(0.5),
+			fontSize: theme.spacing(1.4),
+			color: "white",
+			backgroundColor: toastColor,
+			zIndex: 10000,
 
-	& > * {
-		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,
-};
-
-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;
-`;
+			"& > *": {
+				marginTop: "auto",
+				marginBottom: "auto",
+			},
 
-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;
+			"&.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: theme.spacing(4),
+		right: theme.spacing(1.6),
+		display: "flex",
+		flexDirection: "column",
+	},
+	closeIcon: {
+		padding: theme.spacing(0.2),
+		borderRadius: theme.spacing(0.2),
+		strokeWidth: theme.spacing(0.2),
+		cursor: "pointer",
+		marginLeft: "auto",
+		fontSize: theme.spacing(2),
+	},
+}));
 
-	&:hover {
-		background-color: ${getThemeProp(["colors", "toasts", props => props.type], "#999999", color => shade(0.3, color))};
-	}
-`;
+export const Toast = ({ message = "[No message]", type = "", closeFunc, ...props }) => {
+	const classes = useStyles({ toastType: type });
 
-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 (
+		<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>
+	);
+};
 
-const ListWrapper = styled(TransitionGroup)`
-	position: absolute;
-	top: 40px;
-	right: 16px;
-	display: flex;
-	flex-direction: column;
-`;
+export const ToastList = ({ toasts }) => {
+	const classes = useStyles();
 
-export const ToastList = ({ toasts }) =>
-	ReactDOM.createPortal(
-		<ListWrapper>
+	return ReactDOM.createPortal(
+		<TransitionGroup className={classes.listWrapper}>
 			{toasts.map((props, idx) => (
 				<Toast key={"toast" + idx} {...props} />
 			))}
-		</ListWrapper>,
+		</TransitionGroup>,
 		portal,
 	);
+};
 
 export default ToastList;

package/src/components/ToastList.test.js

@@ -3,10 +3,9 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
 import { Ignore } from "unexpected-reaction";
-import { ThemeProvider } from "styled-components";
-import { shade } from "polished";
-import Icon from "./Icon";
-import FullToastList, { Toast, ToastBox, ToastIcon, CloseIcon } from "./ToastList";
+import Icon from "./MaterialUI/DataDisplay/Icon";
+import FullToastList, { Toast } from "./ToastList";
+import { CSSTransition } from "react-transition-group";
 
 class RenderToast extends React.Component {
 	render() {
@@ -47,10 +46,11 @@ describe("ToastList", () => {
 			return expect(
 				toastRoot,
 				"to contain",
-				<ToastBox in>
-					<Ignore />
-					[No message]
-				</ToastBox>,
+				<CSSTransition in>
+					<div>
+						<span>[No message]</span>
+					</div>
+				</CSSTransition>,
 			);
 		});
 	});
@@ -70,10 +70,11 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<ToastBox in>
-				<Ignore />
-				this is a toast
-			</ToastBox>,
+			<CSSTransition in>
+				<div>
+					<span>this is a toast</span>
+				</div>
+			</CSSTransition>,
 		));
 
 	it("shows a translated message", () =>
@@ -91,10 +92,11 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<ToastBox in>
-				<Ignore />
-				This is a toast
-			</ToastBox>,
+			<CSSTransition in>
+				<div>
+					<span>This is a toast</span>
+				</div>
+			</CSSTransition>,
 		));
 
 	it("shows an icon", () =>
@@ -110,10 +112,11 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<ToastBox in>
-				<ToastIcon type="confirm" />
-				<Ignore />
-			</ToastBox>,
+			<CSSTransition in>
+				<div>
+					<Ignore />
+				</div>
+			</CSSTransition>,
 		));
 
 	it("shows a close icon if a close function is given", () =>
@@ -129,88 +132,11 @@ describe("Toast", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<ToastBox in>
-				<Ignore />
-				<Ignore />
-				<CloseIcon onClick={expect.it("to be a function")} />
-			</ToastBox>,
+			<CSSTransition in>
+				<div>
+					<Ignore />
+					<Icon id="close" onClick={expect.it("to be a function")} />
+				</div>
+			</CSSTransition>,
 		));
-
-	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/components/Treeview/Branch.js

@@ -1,47 +1,65 @@
-import styled, { css } from "styled-components";
-import { ifFlag, getThemeProp } from "../../utils";
-import { branchIndent, branchLength, branchHeight } from "./settings";
-
-const baseBranch = css`
-	margin: 0;
-	font-size: 13px;
-	list-style-type: none;
-	border-width: 0;
-	border-style: solid;
-	border-color: #666;
-	position: relative;
-`;
-
-export const Branch = styled.ul`
-	${baseBranch}
-
-	margin-left: ${branchIndent}px;
-	padding: 0;
-	padding-left: ${branchLength}px;
-	border-left-width: 1px;
-
-	&:last-child::after {
-		/* blocker - hides lowest part of vertical branch */
-		content: " ";
-		background-color: ${ifFlag("dark", getThemeProp(["colors", "bgDark"], "#333333"), "#fff")};
-		position: absolute;
-		left: -${props => branchIndent(props) + branchLength(props) + 2}px;
-		bottom: 0;
-		top: -${branchHeight}px;
-		width: 1px;
-	}
-`;
-
-export const Wrapper = styled.ul`
-	${baseBranch}
-
-	overflow-y: auto;
-	overflow-x: hidden;
-	margin-left: 0;
-	padding: ${props => branchLength(props) - 5}px;
-
-	& > ${Branch} {
-		/* First Branch immediately under Wrapper needs margin adjusted to look right */
-		margin-left: ${props => 1.5 * branchIndent(props)}px;
-	}
-`;
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { branchIndentSpacing, branchLengthSpacing, branchHeightSpacing } from "./settings";
+import classNames from "classnames";
+
+const useStyles = makeStyles(theme => {
+	const base = {
+		margin: 0,
+		fontSize: theme.spacing(1.3),
+		listStyleType: "none",
+		borderWidth: 0,
+		borderStyle: "solid",
+		borderColor: "#666",
+		position: "relative",
+	};
+
+	return {
+		branch: props => ({
+			...base,
+			marginLeft: `${theme.spacing(branchIndentSpacing)}`,
+			padding: "0",
+			paddingLeft: `${theme.spacing(branchLengthSpacing)}`,
+			borderLeftWidth: theme.spacing(0.1),
+
+			"&:last-child::after": {
+				/* blocker - hides lowest part of vertical branch */
+				content: '""',
+				backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
+				position: "absolute",
+				left: `-${theme.spacing(branchIndentSpacing + branchLengthSpacing + 0.2)}`,
+				bottom: 0,
+				top: `-${theme.spacing(branchHeightSpacing)}`,
+				width: theme.spacing(0.1),
+			},
+		}),
+		wrapper: {
+			...base,
+			overflowY: "auto",
+			overflowX: "hidden",
+			marginLeft: 0,
+			padding: `${theme.spacing(branchLengthSpacing - 0.5)}`,
+
+			"& > $branch": {
+				/* First Branch immediately under Wrapper needs margin adjusted to look right */
+				marginLeft: `${theme.spacing(branchIndentSpacing * 1.5)}`,
+			},
+		},
+	};
+});
+
+export const Branch = ({ dark, branchClassName, children }) => {
+	const classes = useStyles({ dark });
+
+	return (
+		<ul className={classNames(classes.branch, branchClassName)} data-qa="branch">
+			{children}
+		</ul>
+	);
+};
+
+export const Wrapper = ({ children }) => {
+	const classes = useStyles();
+
+	return <ul className={classes.wrapper}>{children}</ul>;
+};

package/src/components/Treeview/Branch.test.js

@@ -1,49 +1,8 @@
 import React from "react";
-import { Branch, Wrapper } from "./Branch";
+import { Branch } from "./Branch";
 
 describe("Branch", () => {
 	it("renders a <ul>", () => expect(<Branch />, "when mounted", "to satisfy", <ul />));
 
-	it("sets styling for showing a branch structure", () =>
-		expect(
-			<Branch
-				theme={{
-					treeSettings: {
-						branchIndent: 10,
-						branchLength: 12,
-						branchHeight: 14,
-					},
-				}}
-			/>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "margin-left: 10px;")
-				.and("to contain", "padding-left: 12px;")
-				.and("to match", /:last-child::after {[^}]*left: -24px;[^}]*}/)
-				.and("to match", /:last-child::after {[^}]*top: -14px;[^}]*}/),
-		));
-});
-
-describe("Wrapper", () => {
-	it("renders a <ul>", () => expect(<Wrapper />, "when mounted", "to satisfy", <ul />));
-
-	it("sets styling for showing the root of a tree structure", () =>
-		expect(
-			<Wrapper
-				theme={{
-					treeSettings: {
-						branchIndent: 10,
-						branchLength: 12,
-						branchHeight: 14,
-					},
-				}}
-			/>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "margin-left: 0;")
-				.and("to contain", "padding: 7px;")
-				.and("to contain", "> ." + Branch.styledComponentId + " {margin-left: 15px;}"),
-		));
+	it("renders a dark <ul>", () => expect(<Branch dark />, "when mounted", "to satisfy", <ul />));
 });

package/src/components/Treeview/Label.js

@@ -1,54 +1,68 @@
-import styled, { css } from "styled-components";
-import Icon from "../Icon";
-import { getThemeProp, ifFlag } from "../../utils";
-import { branchLength } from "./settings";
-
-export const Indicator = styled(Icon).attrs(props => ({
-	id: ifFlag(
-		"open",
-		getThemeProp(["icons", "indicators", "down"], "chevron-down"),
-		getThemeProp(["icons", "indicators", "right"], "chevron-right"),
-	)(props),
-}))`
-	font-size: 10px;
-	padding: 10px 0 10px 10px;
-	cursor: pointer;
-	flex: 0 0 auto;
-	color: ${ifFlag(
-		"open",
-		ifFlag("dark", getThemeProp(["colors", "textLight"], "#cccccc"), getThemeProp(["colors", "text"], "#333333")),
-		getThemeProp(["colors", "application", "base"], "#ffffff"),
-	)};
-`;
-
-export const BeforeIndicator = styled.div`
-	background-color: #666;
-	margin-left: -${props => branchLength(props) + 1}px;
-	width: ${props => branchLength(props) + 1}px;
-	height: 1px;
-	z-index: 99;
-	position: absolute;
-`;
-
-export const NonIndicator = styled.div`
-	height: 1px;
-	width: ${props => branchLength(props) + 21}px;
-	margin: auto 0 auto -${props => branchLength(props) + 1}px;
-	background-color: #666;
-	align-self: stretch;
-	flex: 0 0 auto;
-	z-index: 99;
-`;
-
-export const Label = styled.div`
-	cursor: pointer;
-	flex-grow: 1;
-	width: 100%;
-	${ifFlag(
-		"isSelectedNode",
-		css`
-			background-color: #222;
-			border: 1px solid ${getThemeProp(["colors", "application", "base"], "#0F4E66")};
-		`,
-	)};
-`;
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Icon from "../MaterialUI/DataDisplay/Icon";
+import { branchLengthSpacing } from "./settings";
+import classNames from "classnames";
+
+const useStyles = makeStyles(theme => ({
+	beforeIndicator: {
+		backgroundColor: "#666",
+		marginLeft: `-${theme.spacing(branchLengthSpacing + 0.1)}`,
+		width: `${theme.spacing(branchLengthSpacing + 0.1)}`,
+		height: theme.spacing(0.1),
+		zIndex: 99,
+		position: "absolute",
+	},
+	nonIndicator: {
+		height: theme.spacing(0.1),
+		width: `${theme.spacing(branchLengthSpacing + 2.1)}`,
+		margin: `auto 0 auto -${theme.spacing(branchLengthSpacing + 0.1)}`,
+		backgroundColor: "#666",
+		alignSelf: "stretch",
+		flex: "0 0 auto",
+		zIndex: 99,
+	},
+	label: props => ({
+		cursor: "pointer",
+		flexGrow: 1,
+		width: "100%",
+		backgroundColor: props.isSelectedNode ? "#222" : undefined,
+		border: props.isSelectedNode ? `1px solid ${theme.palette.grey.borders}` : undefined,
+	}),
+	indicator: props => ({
+		fontSize: theme.spacing(1),
+		padding: theme.spacing(1, 0, 1, 1),
+		cursor: "pointer",
+		flex: "0 0 auto",
+		color: props.open
+			? props.dark
+				? theme.palette.primary.light
+				: theme.palette.text.primary
+			: theme.palette.primary.main,
+	}),
+}));
+
+export const BeforeIndicator = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.beforeIndicator}>{children}</div>;
+};
+
+export const NonIndicator = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.nonIndicator}>{children}</div>;
+};
+
+export const Label = ({ isSelectedNode, labelClassName, children }) => {
+	const classes = useStyles({ isSelectedNode });
+
+	return <div className={classNames(classes.label, labelClassName)}>{children}</div>;
+};
+
+export const Indicator = ({ open, dark, onClick }) => {
+	const classes = useStyles({ open, dark });
+	const iconId = open ? "dropdown-chevron-down" : "dropdown-chevron-right";
+
+	return <Icon id={iconId} className={classes.indicator} onClick={onClick} data-qa="indicator" />;
+};