orc-shared 5.10.2-dev.4 → 5.99.0-dev.2

package/src/components/ErrorPlaceholder.test.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 
 describe("ErrorPlaceholder", () => {
@@ -14,9 +13,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -27,7 +24,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" />
+				<Placeholder icon="report-problem-triangle" error title="Error" />
 			</Provider>,
 		));
 
@@ -40,9 +37,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{ icons: { error: "error" } }}>
-					<ErrorPlaceholder message="Error" description="This failed" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" description="This failed" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -53,7 +48,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" subtitle="This failed" />
+				<Placeholder icon="report-problem-triangle" error title="Error" subtitle="This failed" />
 			</Provider>,
 		));
 
@@ -67,9 +62,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" onClick={handler} />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" onClick={handler} />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -80,7 +73,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" onClick={handler} />
+				<Placeholder icon="report-problem-triangle" error title="Error" onClick={handler} />
 			</Provider>,
 		);
 	});

package/src/components/Form/Field.js

@@ -7,13 +7,13 @@ const useStyles = makeStyles(theme => ({
 		flex: "0 1 auto",
 		display: "flex",
 		flexDirection: "column",
-		marginTop: 20,
+		marginTop: theme.spacing(2),
 		position: "relative",
 	},
 	label: {
-		minHeight: 17,
+		minHeight: theme.spacing(1.7),
 		color: theme.palette.text.hint,
-		marginBottom: "10px",
+		marginBottom: theme.spacing(1),
 	},
 	invalidLabel: {
 		color: theme.palette.error.main,
@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
 		textAlign: "center",
 	},
 	labelOnly: {
-		marginBottom: "0px",
+		marginBottom: 0,
 	},
 	requiredLabel: {
 		"&::after": {

package/src/components/Form/InputField.test.js

@@ -114,10 +114,11 @@ describe("InputField", () => {
 					if (type === "MultiSelector") {
 						val = ["thing"];
 						emptyVal = [];
+						target = "[role='button']";
 					} else {
 						val = "thing";
+						target = "select";
 					}
-					target = "select";
 				} else if (type === "SwitchInput") {
 					val = true;
 				} else if (type === "DateInput") {

package/src/components/Form/Inputs/Button.js

@@ -9,10 +9,10 @@ const useStyles = makeStyles(theme => ({
 	positionedButton: {
 		width: "max-content",
 		position: "relative",
-		padding: "6px 14px !important",
+		padding: `${theme.spacing(0.6, 1.4)} !important`,
 		"&:hover": {
 			borderColor: "#4fa1f0",
-			boxShadow: "0 0 4px #4fa1f0",
+			boxShadow: `${theme.spacing(0, 0, 0.4)} #4fa1f0`,
 			outline: "none",
 			backgroundColor: "#f7f7f7 !important",
 		},

package/src/components/Form/Inputs/MultiSelector.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Select from "../../MaterialUI/Inputs/Select";
+import { memoize } from "../../../utils";
+import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+
+export const selectEventUpdater = memoize(update => value => update(value));
+
+const MultiSelector = ({ value, options, update, ...props }) => {
+	const selectProps = new SelectProps();
+
+	selectProps.set(SelectProps.propNames.value, value);
+	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
+	selectProps.set(SelectProps.propNames.disabled, props.disabled);
+	selectProps.set(SelectProps.propNames.multiple, true);
+	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+
+	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
+	selectProps.set(SelectProps.propNames.error, hasError);
+
+	return <Select options={options} selectProps={selectProps} />;
+};
+
+export default MultiSelector;

package/src/components/Form/Inputs/MultiSelector.test.js

@@ -0,0 +1,112 @@
+import React from "react";
+import sinon from "sinon";
+import MultiSelector, { selectEventUpdater } from "./MultiSelector";
+import { TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+import Immutable from "immutable";
+import SelectMUI from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import TooltippedTypography from "../../MaterialUI/DataDisplay/TooltippedElements/TooltippedTypography";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
+
+describe("MultiSelector", () => {
+	let update, state, store, chevronDown;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en-CA",
+			},
+		});
+
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+
+		chevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+	});
+
+	const theme = createMuiTheme();
+
+	it("renders a multi selector with multiple options", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					value={["English"]}
+					disableUnderline={true}
+					IconComponent={chevronDown}
+					error={false}
+					multiple={true}
+					renderValue={selected => selected.join(", ")}
+				>
+					<MenuItem key="English" value="English">
+						<TooltippedTypography children="English" titleValue="English" />
+					</MenuItem>
+					<MenuItem key="Francais" value="Francais">
+						<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>,
+		));
+
+	it("renders a multi selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					required={true}
+					value={[]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<SelectMUI value={[""]} disableUnderline={true} IconComponent={chevronDown} error={true} multiple={true}>
+						<MenuItem key="English" value="English">
+							<TooltippedTypography children="English" titleValue="English" />
+						</MenuItem>
+						<MenuItem key="Francais" value="Francais">
+							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+						</MenuItem>
+					</SelectMUI>
+					<div></div>
+				</div>
+			</TestWrapper>,
+		);
+	});
+});
+
+describe("selectEventUpdater", () => {
+	let update;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+	});
+
+	it("creates a handler for an event and calls update with the value of the target", () =>
+		expect(selectEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
+			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
+		));
+
+	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+});

package/src/components/Form/Inputs/index.js

@@ -1,5 +1,5 @@
 import Selector from "./Selector";
-import MultiSelector from "../../MultiSelector";
+import MultiSelector from "./MultiSelector";
 import Button from "./Button";
 import { ReadOnly } from "./ReadOnly";
 import { SwitchInput } from "./Toggles";

package/src/components/InternetExplorerWarningMessage.js

@@ -8,29 +8,29 @@ import sharedMessages from "../sharedMessages";
 const useStyles = makeStyles(theme => ({
 	container: {
 		fontFamily: "'Open Sans', sans-serif",
-		fontSize: "14px",
+		fontSize: theme.spacing(1.4),
 		background: "rgba(255,255,255,0.85)",
-		maxWidth: "700px",
-		width: "calc(100% - 40px)",
+		maxWidth: theme.spacing(70),
+		width: `calc(100% - ${theme.spacing(4)})`,
 		display: "block",
 		top: "50%",
 		left: "50%",
 		position: "absolute",
-		boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
+		boxShadow: `${theme.spacing(0, 0.4, 0.8, 0)} rgba(0, 0, 0, 0.2), ${theme.spacing(0, 0.6, 2, 0)} rgba(0, 0, 0, 0.19)`,
 		transform: "translateY(-50%) translateX(-50%)",
-		padding: "80px",
-		borderRadius: "3px",
+		padding: theme.spacing(8),
+		borderRadius: theme.spacing(0.3),
 		"& header": {
-			paddingBottom: "20px",
-			marginBottom: "20px",
+			paddingBottom: theme.spacing(2),
+			marginBottom: theme.spacing(2),
 			borderBottom: "1px solid #999",
 			"& h1": {
 				fontWeight: 400,
-				fontWize: "30px",
+				fontWize: theme.spacing(3),
 				marginTop: 0,
-				marginBottom: "5px",
+				marginBottom: theme.spacing(0.5),
 				"& p": {
-					fontSize: "16px",
+					fontSize: theme.spacing(1.6),
 					margin: 0,
 					color: "#999",
 					fontWeight: 400,
@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({
 		flexWrap: "wrap",
 		width: "100%",
 		boxSizing: "border-box",
-		marginTop: "40px",
+		marginTop: theme.spacing(4),
 	},
 	gridItem: {
 		display: "flex",
@@ -52,16 +52,16 @@ const useStyles = makeStyles(theme => ({
 		flexDirection: "column",
 	},
 	browserIconContainer: {
-		width: "48px",
+		width: theme.spacing(4.8),
 		textAlign: "center",
 	},
 	browserIconCaption: {
-		fontSize: "11px",
+		fontSize: theme.spacing(1.1),
 		color: "#999",
 	},
 	browserIcon: {
 		stroke: "none",
-		fontSize: "48px",
+		fontSize: theme.spacing(4.8),
 	},
 }));
 

package/src/components/Loader.test.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import { mount, act } from "unexpected-reaction";
 import sinon from "sinon";
-import { spyOnConsole } from "../utils/testUtils";
+import { createMuiTheme, spyOnConsole, TestWrapper } from "../utils/testUtils";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 import Loader, { Loading } from "./Loader";
+import ColumnWrapper from "./ColumnWrapper";
+import LoadingIcon from "./LoadingIcon";
+
+const theme = createMuiTheme();
 
 describe("Loader placeholder", () => {
 	let clock;
@@ -18,11 +21,11 @@ describe("Loader placeholder", () => {
 
 	it("renders null, then load spinner if no props set", () => {
 		const loader = mount(
-			<ThemeProvider theme={{ icons: { loading: "test-loader" } }}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<div>
 					<Loading />
 				</div>
-			</ThemeProvider>,
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -30,12 +33,12 @@ describe("Loader placeholder", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use href="#icon-test-loader" />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 	});
 
@@ -50,9 +53,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<Loading {...{ error }} />
-					</ThemeProvider>
+					<Loading {...{ error }} />
 				</Provider>,
 				"when mounted",
 				"to satisfy",
@@ -63,9 +64,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<ErrorPlaceholder message="This is a test" />
-					</ThemeProvider>
+					<ErrorPlaceholder message="This is a test" />
 				</Provider>,
 			);
 		});
@@ -73,9 +72,9 @@ describe("Loader placeholder", () => {
 });
 
 describe("Loader", () => {
-	let clock, buttonLoader, errorLoader;
+	let clock, componentLoader, errorLoader;
 	beforeEach(() => {
-		buttonLoader = () => import("./Button");
+		componentLoader = () => import("./ColumnWrapper");
 		errorLoader = () => Promise.reject(new Error("This is not right"));
 		clock = sinon.useFakeTimers();
 	});
@@ -85,13 +84,13 @@ describe("Loader", () => {
 	spyOnConsole(["error"]);
 
 	it("loads the component", () => {
-		const Comp = Loader(buttonLoader);
+		const Comp = Loader(componentLoader);
 		const loader = mount(
-			<ThemeProvider theme={{}}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<div>
 					<Comp />
 				</div>
-			</ThemeProvider>,
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -99,12 +98,12 @@ describe("Loader", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 		let load;
 		act(() => {
@@ -114,29 +113,29 @@ describe("Loader", () => {
 			expect(
 				loader,
 				"to satisfy",
-				<div>
-					<button />
-				</div>,
+				<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+					<div>
+						<ColumnWrapper />
+					</div>
+				</TestWrapper>,
 			).then(() => expect(console.error, "was not called")),
 		);
 	});
 
 	it("errors out", () => {
 		const Comp = Loader(errorLoader);
+		const store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => ({}),
+		};
+
 		const loader = mount(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<ThemeProvider theme={{}}>
-					<div>
-						<Comp />
-					</div>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<Comp />
+				</div>
+			</TestWrapper>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -144,12 +143,12 @@ describe("Loader", () => {
 		});
 		expect(
 			loader,
-			"queried for first",
-			"svg",
 			"to satisfy",
-			<svg>
-				<use href="#icon-loading" />
-			</svg>,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<LoadingIcon />
+				</div>
+			</TestWrapper>,
 		);
 		let load;
 		act(() => {
@@ -159,19 +158,11 @@ describe("Loader", () => {
 			expect(
 				loader,
 				"to satisfy",
-				<Provider
-					store={{
-						subscribe: () => {},
-						dispatch: () => {},
-						getState: () => ({}),
-					}}
-				>
-					<ThemeProvider theme={{}}>
-						<div>
-							<ErrorPlaceholder message="This is not right" />
-						</div>
-					</ThemeProvider>
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider={{ theme }}>
+					<div>
+						<ErrorPlaceholder message="This is not right" />
+					</div>
+				</TestWrapper>,
 			).then(() => expect(console.error, "was called")),
 		);
 	});

package/src/components/LoadingIcon.js

@@ -1,19 +1,32 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { makeStyles } from "@material-ui/core";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
+const useStyles = makeStyles(theme => ({
+	progressContainer: {
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		display: "flex",
+		position: "fixed",
+		alignItems: "center",
+		justifyContent: "center",
+		zIndex: 999,
+	},
+	progress: {
+		color: theme.palette.primary.main,
+	},
+}));
 
-const LoadingIcon = withTheme(props => (
-	<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-));
+const LoadingIcon = () => {
+	const classes = useStyles();
+
+	return (
+		<div className={classes.progressContainer}>
+			<CircularProgress className={classes.progress} size={100} color="inherit" />
+		</div>
+	);
+};
 
 export default LoadingIcon;

package/src/components/LoadingIcon.test.js

@@ -1,26 +1,22 @@
 import React from "react";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import LoadingIcon from "./LoadingIcon";
+import { createMuiTheme, TestWrapper } from "../utils/testUtils";
+
+const theme = createMuiTheme();
 
 describe("LoadingIcon", () => {
 	it("shows a spinning load icon", () =>
 		expect(
-			<ThemeProvider theme={{}}>
-				<LoadingIcon />
-			</ThemeProvider>,
-			"when mounted",
-			"to satisfy",
-			<Placeholder icon="loading" animate />,
-		));
-
-	it("gets icon from theme", () =>
-		expect(
-			<ThemeProvider theme={{ icons: { loading: "spinner" } }}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
 				<LoadingIcon />
-			</ThemeProvider>,
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Placeholder icon="spinner" animate />,
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<CircularProgress size={100} color="inherit" />
+				</div>
+			</TestWrapper>,
 		));
 });

package/src/components/MaterialUI/DataDisplay/Modal.js

@@ -24,12 +24,12 @@ const useStyles = makeStyles(theme => ({
 	},
 	containerWide: {
 		width: theme.spacing(106.4),
-		height: `calc(100% - 80px)`,
+		height: `calc(100% - ${theme.spacing(8)})`,
 		maxHeight: theme.spacing(73),
 	},
 	containerFullwidth: {
-		width: `calc(100% - 80px)`,
-		height: `calc(100% - 80px)`,
+		width: `calc(100% - ${theme.spacing(8)})`,
+		height: `calc(100% - ${theme.spacing(8)})`,
 	},
 	title: {
 		height: theme.spacing(4),

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js

@@ -44,18 +44,18 @@ const useStyles = makeStyles(theme => ({
 	},
 	textSkeleton: {
 		width: "100%",
-		height: 6,
+		height: theme.spacing(0.6),
 		animation: false,
 	},
 	chipSkeleton: {
-		width: 60,
-		height: 25,
+		width: theme.spacing(6),
+		height: theme.spacing(2.5),
 		animation: false,
-		borderRadius: "15px",
+		borderRadius: theme.spacing(1.5),
 	},
 	radioSkeleton: {
-		width: 17,
-		height: 17,
+		width: theme.spacing(1.7),
+		height: theme.spacing(1.7),
 		animation: false,
 	},
 	root: {