orc-shared 5.99.0-dev.1 → 5.99.0-dev.10

package/src/components/AppFrame/MenuItem.js

@@ -9,8 +9,8 @@ const useStyles = makeStyles(theme => ({
 	block: props => ({
 		display: "block",
 		position: "relative",
-		padding: "0 10px",
-		marginBottom: "35px",
+		padding: theme.spacing(0, 1),
+		marginBottom: theme.spacing(3.5),
 		textDecoration: "none",
 		cursor: "pointer",
 		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
@@ -24,10 +24,10 @@ const useStyles = makeStyles(theme => ({
 
 		return {
 			borderRadius: "50%",
-			border: `4px solid ${toastColor}`,
+			border: `${theme.spacing(0.4)} solid ${toastColor}`,
 			position: "absolute",
 			top: 0,
-			left: "27px",
+			left: theme.spacing(2.7),
 			visibility: "hidden",
 
 			"&.show": {
@@ -41,15 +41,15 @@ const useStyles = makeStyles(theme => ({
 		return {
 			position: "absolute",
 			zIndex: 10000,
-			top: "calc(-10px - 0.7em)",
-			left: "22px",
+			top: `calc(${theme.spacing(-1)} - 0.7em)`,
+			left: theme.spacing(2.2),
 			width: "max-content",
-			borderRadius: "5px",
-			padding: "10px 15px",
-			boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.5)",
+			borderRadius: theme.spacing(0.5),
+			padding: theme.spacing(1, 1.5),
+			boxShadow: `${theme.spacing(0, 0.2, 0.4, 0)} rgba(0, 0, 0, 0.5)`,
 			color: theme.palette.grey.light,
 			backgroundColor: toastColor,
-			fontSize: "11px",
+			fontSize: theme.spacing(1.1),
 			fontWeight: "bold",
 			lineHeight: 1.2,
 			transition: `transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 100ms 50ms ease-out`,
@@ -59,7 +59,7 @@ const useStyles = makeStyles(theme => ({
 			"&::before": {
 				content: "",
 				position: "absolute",
-				top: "calc(10px + 0.2em)",
+				top: `calc(${theme.spacing(1)} + 0.2em)`,
 				left: "-0.9em",
 				border: "solid transparent",
 				borderWidth: "0.4em 0.9em 0.4em 0",
@@ -73,16 +73,16 @@ const useStyles = makeStyles(theme => ({
 		};
 	},
 	menuIcon: props => ({
-		fontSize: "24px",
+		fontSize: theme.spacing(2.4),
 		verticalAlign: "middle",
 		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
 	}),
 	label: props => ({
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "13px",
+		fontSize: theme.spacing(1.3),
 		verticalAlign: "middle",
 		textTransform: "uppercase",
-		paddingLeft: "10px",
+		paddingLeft: theme.spacing(1),
 		transition: "opacity 0.3s ease-out",
 		opacity: props.showLabel ? 1 : 0,
 	}),

package/src/components/AppFrame/Preferences.js

@@ -27,19 +27,19 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: "#f7f7f7",
 		borderLeft: `1px solid ${theme.palette.grey.borders}`,
 		borderTop: `1px solid ${theme.palette.grey.borders}`,
-		borderTopLeftRadius: "5px",
-		top: "40px",
-		boxShadow: "-3px 2px 5px 0px rgba(0, 0, 0, 0.2)",
+		borderTopLeftRadius: theme.spacing(0.5),
+		top: theme.spacing(4),
+		boxShadow: `${theme.spacing(-0.3, 0.2, 0.5, 0)} rgba(0, 0, 0, 0.2)`,
 		zIndex: 9998,
 		transition: "right 400ms ease-out",
 	},
 	header: {
 		flex: "0 0 auto",
 		borderBottom: `1px solid ${theme.palette.grey.borders}`,
-		borderTopLeftRadius: "5px",
-		padding: "15px 30px",
-		height: "18px",
-		fontSize: "15px",
+		borderTopLeftRadius: theme.spacing(0.5),
+		padding: theme.spacing(1.5, 3),
+		height: theme.spacing(1.8),
+		fontSize: theme.spacing(1.5),
 		fontFamily: theme.typography.button.fontFamily,
 		textTransform: "uppercase",
 		color: theme.palette.primary.main,
@@ -49,8 +49,8 @@ const useStyles = makeStyles(theme => ({
 		flex: "1 1 auto",
 		display: "flex",
 		flexDirection: "column",
-		padding: "20px 30px",
-		fontSize: "12px",
+		padding: theme.spacing(2, 3),
+		fontSize: theme.spacing(1.2),
 	},
 	footer: {
 		flex: "0 0 auto",
@@ -59,12 +59,12 @@ const useStyles = makeStyles(theme => ({
 		justifyContent: "flex-end",
 		backgroundColor: "#ffffff",
 		borderTop: `1px solid ${theme.palette.grey.borders}`,
-		paddingRight: "10px",
-		height: "60px",
+		paddingRight: theme.spacing(1),
+		height: theme.spacing(6),
 	},
 	prefButton: {
-		marginRight: "20px",
-		minWidth: "110px",
+		marginRight: theme.spacing(2),
+		minWidth: theme.spacing(11),
 	},
 	wrapper: {
 		display: "flex",
@@ -139,7 +139,7 @@ export const Preferences = () => {
 	const { show, save, clear, languageOptions, languageSelectProps, applicationOptions, applicationSelectProps } =
 		usePreferenceSetup();
 	return (
-		<Sidepanel in={show} width="380px" timeout={400} className={classes.prefPanel}>
+		<Sidepanel in={show} widthSpacing={38} timeout={400} className={classes.prefPanel}>
 			<Wrapper onClickOutside={clickOutsideHandler}>
 				<div className={classes.header}>
 					<FormattedMessage {...sharedMessages.preferences} />

package/src/components/AppFrame/Sidebar.js

@@ -9,9 +9,9 @@ import { getScopeModuleInformationSelector } from "../../selectors/modules";
 const useStyles = makeStyles(theme => ({
 	bar: {
 		boxSizing: "border-box",
-		paddingTop: "60px",
-		height: "calc(100% - 40px)",
-		width: "200px",
+		paddingTop: theme.spacing(6),
+		height: `calc(100% - ${theme.spacing(4)})`,
+		width: theme.spacing(20),
 		display: "flex",
 		flexDirection: "column",
 		justifyContent: "flex-start",
@@ -19,9 +19,9 @@ const useStyles = makeStyles(theme => ({
 	},
 	logoSvg: {
 		flex: "0 0 auto",
-		margin: "auto 12.5px 7px",
-		height: "25px",
-		width: "25px",
+		margin: `auto ${theme.spacing(1.25, 0.7)}`,
+		height: theme.spacing(2.5),
+		width: theme.spacing(2.5),
 		fillRule: "evenodd",
 		clipRule: "evenodd",
 		fill: "#666666",

package/src/components/AppFrame/Topbar.js

@@ -17,7 +17,7 @@ import { areEqualCaseInsensitive } from "../../utils/comparisonHelper";
 
 const useStyles = makeStyles(theme => ({
 	wrapper: {
-		height: "40px",
+		height: theme.spacing(4),
 		color: theme.palette.text.hint,
 		display: "flex",
 		justifyContent: "space-between",
@@ -32,16 +32,16 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: "#000000",
 		color: theme.palette.primary.light,
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "14px",
+		fontSize: theme.spacing(1.4),
 		textTransform: "uppercase",
-		paddingRight: "20px",
-		paddingLeft: "6px",
+		paddingRight: theme.spacing(2),
+		paddingLeft: theme.spacing(0.6),
 		display: "flex",
 		alignItems: "center",
 	},
 	appLogo: {
-		height: "30px",
-		marginRight: "10px",
+		height: theme.spacing(3),
+		marginRight: theme.spacing(1),
 	},
 	qaContainerColor: {
 		backgroundColor: "#9F0F18",

package/src/components/DropMenu/Menu.js

@@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({
 	drawer: {
 		position: "absolute",
 		zIndex: 19999,
-		margin: "4px 0 0",
+		margin: theme.spacing(0.4, 0, 0),
 		left: props => (props.alignRight ? "auto" : "0"),
 		right: props => (props.alignRight ? "0" : "auto"),
 		transition: "opacity 100ms ease-out",
@@ -25,19 +25,19 @@ const useStyles = makeStyles(theme => ({
 		color: theme.palette.text.primary,
 		backgroundColor: "white",
 		border: `1px solid ${theme.palette.text.hint}`,
-		borderRadius: "5px",
+		borderRadius: theme.spacing(0.5),
 		listStyleType: "none",
-		padding: "5px 0",
+		padding: theme.spacing(0.5, 0),
 		margin: "0",
 		fontFamily: "Open Sans, sans-serif",
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		width: "max-content",
 	},
 	item: {
 		boxSizing: "border-box",
-		height: "30px",
-		minWidth: "178px",
-		padding: "9px 12px",
+		height: theme.spacing(3),
+		minWidth: theme.spacing(17.8),
+		padding: theme.spacing(0.9, 1.2),
 		display: "flex",
 		alignItems: "center",
 		cursor: "pointer",
@@ -47,8 +47,8 @@ const useStyles = makeStyles(theme => ({
 		},
 	},
 	itemIcon: {
-		paddingRight: "11px",
-		fontSize: "17px",
+		paddingRight: theme.spacing(1.1),
+		fontSize: theme.spacing(1.7),
 	},
 }));
 

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/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

@@ -1,23 +1,73 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import Select from "../../MaterialUI/Inputs/Select";
-import { memoize } from "../../../utils";
 import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+import sharedMessages from "../../../sharedMessages";
 
-export const selectEventUpdater = memoize(update => value => update(value));
+const clearValue = "__#Clear#__";
+const selectAllValue = "__#SelectAll#__";
+
+const MultiSelector = ({ value, width = 700, options, update, addClearSelectAll, multipleRenderValue, ...props }) => {
+	const { formatMessage } = useIntl();
+
+	const valueUpdater = value => {
+		if (value.indexOf(clearValue) >= 0) {
+			update([]);
+		} else if (value.indexOf(selectAllValue) >= 0) {
+			update(options.map(x => x.value));
+		} else {
+			update(value);
+		}
+	};
 
-const MultiSelector = ({ value, options, update, ...props }) => {
 	const selectProps = new SelectProps();
 
+	const selectionOptions = [];
+
+	if (addClearSelectAll) {
+		if (value.length > 0) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.clear),
+				value: clearValue,
+			});
+		}
+		if (value.length !== options.length) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.selectAll),
+				value: selectAllValue,
+			});
+		}
+	}
+
+	const allOptions = [...selectionOptions, ...options];
+
 	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));
+	selectProps.set(SelectProps.propNames.multipleSelectWidth, width);
+	selectProps.set(SelectProps.propNames.update, valueUpdater);
+	selectProps.set(SelectProps.propNames.autoWidth, false);
+	selectProps.set(SelectProps.propNames.autoFocus, false);
+	selectProps.set(
+		SelectProps.propNames.renderValue,
+		multipleRenderValue ? () => multipleRenderValue(value, options) : null,
+	);
+	selectProps.set(SelectProps.propNames.positionOverride, {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left",
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left",
+		},
+	});
 
 	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
 	selectProps.set(SelectProps.propNames.error, hasError);
 
-	return <Select options={options} selectProps={selectProps} />;
+	return <Select options={allOptions} selectProps={selectProps} />;
 };
 
 export default MultiSelector;