orc-shared 5.10.2 → 5.99.0-dev.10

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: {

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

@@ -73,7 +73,7 @@ const useStyles = makeStyles(theme => ({
 	},
 	active: {
 		backgroundColor: `${theme.palette.primary.dark} !important`,
-		boxShadow: "inset 10px 0 10px 1px rgba(0,0,0,0.18)",
+		boxShadow: `inset ${theme.spacing(1, 0, 1, 0.1)} rgba(0,0,0,0.18)`,
 
 		"&:after": {
 			borderLeftColor: `${theme.palette.primary.dark} !important`,

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

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
 	label: {
 		fontSize: theme.typography.h2Size,
 		fontFamily: theme.typography.fontFamily,
-		fontWeight: theme.typography.fontWeightMedium,
+		fontWeight: theme.typography.fontWeightRegular,
 	},
 }));
 

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

@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
 		},
 		"&::-webkit-scrollbar-thumb": {
 			background: theme.palette.grey.borders,
-			border: `5px white solid`,
+			border: `${theme.spacing(0.5)} white solid`,
 			backgroundClip: "padding-box",
 			borderRadius: theme.spacing(1.5),
 		},

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

@@ -352,7 +352,11 @@ const DefaultFullTable = React.forwardRef((props, ref) => {
 					context={props.context}
 				/>
 			</TableMui>
-			{props.tableRows.length > 0 ? null : <div className={props.classes.placeholder}>{props.placeholder}</div>}
+			{props.tableRows.length > 0 ? null : (
+				<div className={classNames(props.classes.placeholder, props.customClasses.placeholderContainer)}>
+					{props.placeholder}
+				</div>
+			)}
 		</div>
 	);
 });
@@ -441,6 +445,7 @@ const Table = React.forwardRef(
 		customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
 		customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
 		customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
+		customClasses["placeholderContainer"] = tableProps?.getStyle(TableProps.ruleNames.placeholderContainer) || null;
 		customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
 		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
 

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -8,7 +8,7 @@ import TableMui from "@material-ui/core/Table";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import { buildHeaderAndRowFromConfig } from "./tableHelpers";
-import Placeholder from "../../Placeholder";
+import Placeholder from "./PredefinedElements/Placeholder";
 import TableInfoBar from "./PredefinedElements/TableInfoBar";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import TableProps from "./TableProps";
@@ -1102,6 +1102,26 @@ describe("Table", () => {
 		expect(placeHolder.length, "to equal", 1);
 	});
 
+	it("Renders Table with placeholder and custom class if rows are empty", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
+
+		const placeholder = <Placeholder />;
+
+		const tableProps = new TableProps();
+		tableProps.setStyle(TableProps.ruleNames.placeholderContainer, "placeholder-container-custom-class");
+
+		const component = <Table rows={rows} headers={headers} placeholder={placeholder} tableProps={tableProps} />;
+
+		const mountedComponent = mount(component);
+
+		const placeHolder = mountedComponent.find(Placeholder);
+		expect(placeHolder.exists(), "to be true");
+
+		const placeholderContainer = placeHolder.parent();
+		expect(placeholderContainer.exists(), "to be true");
+		expect(placeholderContainer.hasClass("placeholder-container-custom-class"), "to be true");
+	});
+
 	it("Renders Table with tableInfo if provided", () => {
 		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
 

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

@@ -24,6 +24,7 @@ class TableProps extends ComponentProps {
 		tableContainer: "tableContainer",
 		container: "container",
 		table: "table",
+		placeholderContainer: "placeholderContainer",
 	};
 
 	constructor() {
@@ -47,6 +48,7 @@ class TableProps extends ComponentProps {
 		this.componentClasses.set(this.constructor.ruleNames.tableCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.headerCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableContainer, null);
+		this.componentClasses.set(this.constructor.ruleNames.placeholderContainer, null);
 		this.componentClasses.set(this.constructor.ruleNames.container, null);
 		this.componentClasses.set(this.constructor.ruleNames.table, null);
 

package/src/components/MaterialUI/DataDisplay/TableProps.test.js

@@ -12,7 +12,16 @@ describe("TableProps Props", () => {
 			"constrained",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		expect(TableProps.propNames, "to have keys", propNames);
 		expect(TableProps.ruleNames, "to have keys", ruleNames);
@@ -34,7 +43,16 @@ describe("TableProps Props", () => {
 			"saveScrollbarPosition",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		const tableProps = new TableProps();
 

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

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 		},
 		"&::-webkit-scrollbar-thumb": {
 			background: theme.palette.grey.borders,
-			border: `5px white solid`,
+			border: `${theme.spacing(0.5)} white solid`,
 			backgroundClip: "padding-box",
 			borderRadius: theme.spacing(1.5),
 		},

package/src/components/MaterialUI/Inputs/CheckboxGroup.js

@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: props => (props.row ? "row" : "column"),
 		flexWrap: "wrap",
-		marginLeft: "8px",
+		marginLeft: theme.spacing(0.8),
 	},
 	errorText: {
 		marginTop: theme.spacing(0.5),

package/src/components/MaterialUI/Inputs/DatePicker.js

@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
 		"&:focus, &:focus-within": {
 			borderRadius: theme.shape.borderRadius,
 			borderColor: theme.palette.focus,
-			boxShadow: `0 0 4px ${theme.palette.focus}`,
+			boxShadow: `0 0 ${theme.spacing(0.4)} ${theme.palette.focus}`,
 			outline: "none",
 		},
 		"& .react-datepicker": {

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -104,7 +104,7 @@ export const useStyles = makeStyles(theme => ({
 		"&:focus-within": {
 			zIndex: 99,
 			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			boxShadow: `0 0 4px ${theme.palette.focus}`,
+			boxShadow: `0 0 ${theme.spacing(0.4)} ${theme.palette.focus}`,
 		},
 	},
 	selectRoot: {

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js

@@ -47,7 +47,7 @@ describe("useStyles", () => {
 			expect
 				.it("to contain", "z-index: 99;")
 				.and("to contain", "border: 0.0625rem solid #4fa1f0;")
-				.and("to contain", "box-shadow: 0 0 4px #4fa1f0;"),
+				.and("to contain", "box-shadow: 0 0 0.25rem #4fa1f0;"),
 		);
 	});
 });