orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/components/DropMenu/Menu.js

@@ -1,87 +1,80 @@
 import React from "react";
-import styled from "styled-components";
-import transition from "styled-transition-group";
-import { getThemeProp, ifFlag, safeGet } from "../../utils";
-import Icon from "../Icon";
-import Text from "../Text";
+import { makeStyles } from "@material-ui/core/styles";
+import { FormattedMessage } from "react-intl";
+import Icon from "../MaterialUI/DataDisplay/Icon";
 
-export const Drawer = transition.div`
-	position: absolute;
-	z-index: 19999;
-	margin: 4px 0 0;
-	${ifFlag("alignRight", "right", "left")}: 0;
+const useStyles = makeStyles(theme => ({
+	drawer: {
+		position: "absolute",
+		zIndex: 19999,
+		margin: "4px 0 0",
+		left: props => (props.alignRight ? "auto" : "0"),
+		right: props => (props.alignRight ? "0" : "auto"),
+		transition: "opacity 100ms ease-out",
 
-	transition: opacity ${props => props.timeout}ms ease-out;
+		"&.enter-active": {
+			opacity: 1,
+			visibility: "visible",
+		},
+		"&.exit-active": {
+			opacity: 0,
+			visibility: "hidden",
+		},
+	},
+	list: {
+		color: theme.palette.text.primary,
+		backgroundColor: "white",
+		border: `1px solid ${theme.palette.text.hint}`,
+		borderRadius: "5px",
+		listStyleType: "none",
+		padding: "5px 0",
+		margin: "0",
+		fontFamily: "Open Sans, sans-serif",
+		fontSize: "12px",
+		width: "max-content",
+	},
+	item: {
+		boxSizing: "border-box",
+		height: "30px",
+		minWidth: "178px",
+		padding: "9px 12px",
+		display: "flex",
+		alignItems: "center",
+		cursor: "pointer",
+		"&:hover": {
+			backgroundColor: theme.palette.primary.main,
+			color: "white",
+		},
+	},
+	itemIcon: {
+		paddingRight: "11px",
+		fontSize: "17px",
+	},
+}));
 
-	&:enter {
-		opacity: 0.01;
-	}
-	&:enter-active {
-		opacity: 1;
-	}
-	&:exit {
-		opacity: 1;
-	}
-	&:exit-active {
-		opacity: 0.01;
-	}
-`;
-Drawer.defaultProps = {
-	unmountOnExit: true,
-	timeout: 100,
-};
-
-export const List = styled.ul`
-	color: ${getThemeProp(["colors", "text"], "#333333")};
-	background-color: white;
-	border: 1px solid ${getThemeProp(["colors", "border"], "#999999")};
-	border-radius: 5px;
-	list-style-type: none;
-	padding: 5px 0;
-	margin: 0;
-	font-family: Open Sans, sans-serif;
-	font-size: 12px;
-	width: max-content;
-`;
-
-export const Item = styled.li`
-	box-sizing: border-box;
-	height: 30px;
-	min-width: 178px;
-	padding: 9px 12px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
+const Menu = ({ id, open, menuItems, reset, alignRight }) => {
+	const classes = useStyles({ alignRight });
 
-	&:hover {
-		background-color: ${getThemeProp(["colors", "application", "base"], "#ffffff")};
-		color: white;
-	}
-`;
-
-export const ItemIcon = styled(Icon)`
-	padding-right: 11px;
-	font-size: 17px;
-`;
-
-const Menu = ({ id, open, menuItems, reset, alignRight }) => (
-	<Drawer in={open} alignRight={alignRight}>
-		<List id={id}>
-			{menuItems.map(item => (
-				<Item
-					id={item.id}
-					key={item.id || (item.label && safeGet(item.label, "id")) + (item.icon || "")}
-					onClick={event => {
-						reset();
-						item.handler(event);
-					}}
-				>
-					{item.icon ? <ItemIcon id={item.icon} /> : null}
-					<Text message={item.label} />
-				</Item>
-			))}
-		</List>
-	</Drawer>
-);
+	return (
+		<div className={`${classes.drawer} ${open ? "enter-active" : "exit-active"}`}>
+			<ul id={id} className={classes.list}>
+				{menuItems.map(item => (
+					<li
+						id={item.id}
+						key={item.id || item.label?.id + (item.icon || "")}
+						className={classes.item}
+						onClick={event => {
+							reset();
+							item.handler(event);
+						}}
+					>
+						{item.icon ? <Icon id={item.icon} className={classes.itemIcon} /> : null}
+						{typeof item.label === "string" ? item.label : <FormattedMessage {...item.label} />}
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
 
 export default Menu;

package/src/components/DropMenu/Menu.test.js

@@ -1,16 +1,18 @@
 import React from "react";
 import { Provider } from "react-redux";
 import sinon from "sinon";
-import { getStyledClassSelector } from "../../utils/testUtils";
-import Menu, { Drawer, List, Item, ItemIcon } from "./Menu";
+import { IntlProvider } from "react-intl";
+import Menu from "./Menu";
+import Icon from "../MaterialUI/DataDisplay/Icon";
 
 describe("Menu", () => {
 	it("renders a closed menu", () =>
 		expect(
 			<Menu menuItems={[{ label: "First", icon: "one", handler: () => {} }]} />,
 			"when mounted",
-			"to satisfy",
-			null,
+			"to have style rules satisfying",
+			"to match",
+			/visibility:\s*hidden;/,
 		));
 
 	it("renders an open menu", () =>
@@ -28,18 +30,18 @@ describe("Menu", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<Drawer in>
-				<List id="testMenu">
-					<Item id="first">
-						<ItemIcon id="one" />
+			<div>
+				<ul id="testMenu">
+					<li id="first">
+						<Icon id="one" />
 						First
-					</Item>
-					<Item id="second">
-						<ItemIcon id="two" />
+					</li>
+					<li id="second">
+						<Icon id="two" />
 						Second
-					</Item>
-				</List>
-			</Drawer>,
+					</li>
+				</ul>
+			</div>,
 		));
 
 	it("renders an open right-aligned menu", () =>
@@ -53,23 +55,22 @@ describe("Menu", () => {
 						{ id: "second", label: "Second", icon: "two", handler: () => {} },
 					]}
 					toggle={() => {}}
-					alignRight
 				/>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<Drawer in alignRight>
-				<List id="testMenu">
-					<Item id="first">
-						<ItemIcon id="one" />
+			<div>
+				<ul id="testMenu">
+					<li id="first">
+						<Icon id="one" />
 						First
-					</Item>
-					<Item id="second">
-						<ItemIcon id="two" />
+					</li>
+					<li id="second">
+						<Icon id="two" />
 						Second
-					</Item>
-				</List>
-			</Drawer>,
+					</li>
+				</ul>
+			</div>,
 		));
 
 	it("closes on click on item", () => {
@@ -77,71 +78,19 @@ describe("Menu", () => {
 		const handler = sinon.spy().named("handler");
 		return expect(
 			<Provider store={{ getState: () => ({}), subscribe: () => {}, dispatch: () => {} }}>
-				<Menu open menuItems={[{ label: "Foo", handler }]} reset={reset} />
+				<IntlProvider locale="en-US">
+					<Menu open menuItems={[{ label: { id: "foo", defaultMessage: "Foo" }, handler }]} reset={reset} />
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"with event",
-			{ type: "click", target: getStyledClassSelector(Item) },
+			{ type: "click", target: "li" },
 			"to satisfy",
-			<Drawer in>
-				<List>
-					<Item>Foo</Item>
-				</List>
-			</Drawer>,
+			<div>
+				<ul>
+					<li>Foo</li>
+				</ul>
+			</div>,
 		).then(() => Promise.all([expect(reset, "was called"), expect(handler, "was called")]));
 	});
-
-	describe("Drawer", () => {
-		it("sets transition time according to its timeout", () =>
-			expect(
-				<Drawer in timeout={500} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"transition: opacity 500ms ease-out;",
-			));
-
-		it("defaults to left aligned position", () =>
-			expect(
-				<Drawer in timeout={500} />,
-				"when mounted",
-				"to have style rules satisfying",
-				expect.it("to contain", "left: 0;").and("not to contain", "right: 0"),
-			));
-
-		it("can align right", () =>
-			expect(
-				<Drawer in timeout={500} alignRight />,
-				"when mounted",
-				"to have style rules satisfying",
-				expect.it("to contain", "right: 0;").and("not to contain", "left: 0"),
-			));
-	});
-
-	describe("Item", () => {
-		let theme;
-		beforeEach(() => {
-			theme = {
-				colors: { application: { base: "#ff00ff" } },
-			};
-		});
-
-		it("shows a background with the highlight color when hovering", () =>
-			expect(
-				<Item theme={theme} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to match",
-				/:hover\s*\{[^}]*\bbackground-color: #ff00ff;[^}]*\}/,
-			));
-
-		it("has a default highlight color", () =>
-			expect(
-				<Item />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to match",
-				/:hover\s*\{[^}]*\bbackground-color: #ffffff;[^}]*\}/,
-			));
-	});
 });

package/src/components/DropMenu/index.js

@@ -1,33 +1,37 @@
 import React from "react";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
 import Menu from "./Menu";
 import useToggle from "../../hooks/useToggle";
 import withClickOutside from "../../hocs/withClickOutside";
 
-export const Wrapper = withClickOutside(styled.div`
-	position: relative;
-`);
+const useStyles = makeStyles(() => ({
+	wrapper: {
+		position: "relative",
+	},
+}));
 
-export const AnchorWrapper = styled.div``;
+export const Wrapper = withClickOutside(
+	React.forwardRef(({ children, className }, ref) => {
+		const classes = useStyles();
 
-export const Background = styled.div`
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 19998;
-`;
+		return (
+			<div ref={ref} className={`${classes.wrapper} ${className ? className : ""}`}>
+				{children}
+			</div>
+		);
+	}),
+);
 
 const DropMenu = ({ id, initOpen, menuItems, alignRight, className = "", children }) => {
 	const [open, toggle, reset] = useToggle(initOpen);
+
 	return (
 		<Wrapper className={className} onClickOutside={reset}>
-			<AnchorWrapper id={id + "Anchor"} onClick={toggle} open={open}>
+			<div id={id + "Anchor"} onClick={toggle}>
 				{React.Children.map(children, child =>
 					typeof child === "object" ? React.cloneElement(child, { open }) : child,
 				)}
-			</AnchorWrapper>
+			</div>
 			<Menu id={id + "Dropdown"} {...{ open, menuItems, reset }} alignRight={alignRight} />
 		</Wrapper>
 	);

package/src/components/Form/Combination.js

@@ -1,34 +1,41 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import Field, { FieldBox } from "./Field";
+import { makeStyles } from "@material-ui/core/styles";
+import Field from "./Field";
 
-export const CombiningRow = styled.div`
-	display: flex;
-	flex-direction: row;
+const useStyles = makeStyles(() => ({
+	combiningRow: props => {
+		const flexStyles = props.proportions.reduce((styles, width, index) => {
+			if (width) {
+				styles[`& > *:nth-child(${index + 1})`] = {
+					flex: typeof width === "string" ? `0 0 ${width}` : `0 1 ${width}%`,
+				};
+			}
+			return styles;
+		}, {});
 
-	& > ${FieldBox} {
-		margin-top: 0;
-		margin-right: 15px;
-	}
-	& > ${FieldBox}:last-child {
-		margin-right: 0;
-	}
-	${props =>
-		props.proportions.map((width, index) =>
-			width
-				? css`
-						& > ${FieldBox}:nth-child(${index + 1}) {
-							flex: ${typeof width === "string" ? "0 0 " + width : "0 1 " + width + "%"};
-						}
-				  `
-				: "",
-		)};
-`;
+		return {
+			display: "flex",
+			flexDirection: "row",
+			"& > *": {
+				marginTop: 0,
+				marginRight: 15,
+			},
+			"& > :last-child": {
+				marginRight: 0,
+			},
+			...flexStyles,
+		};
+	},
+}));
 
-const CombinationField = ({ label, children, proportions = [] }) => (
-	<Field label={label}>
-		<CombiningRow proportions={proportions}>{children}</CombiningRow>
-	</Field>
-);
+const CombinationField = ({ label, children, proportions = [] }) => {
+	const classes = useStyles({ proportions });
+
+	return (
+		<Field label={label}>
+			<div className={classes.combiningRow}>{children}</div>
+		</Field>
+	);
+};
 
 export default CombinationField;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Provider } from "react-redux";
 import Field from "./Field";
-import Combination, { CombiningRow } from "./Combination";
+import Combination from "./Combination";
 
 describe("Combination", () => {
 	it("renders a combining box around a list of fields", () =>
@@ -13,7 +13,7 @@ describe("Combination", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Combination label="A combination" proportions={[30, 70]}>
+				<Combination label="A combination" proportions={[30, 70, undefined]}>
 					<div id="child1" />
 					<div id="child2" />
 				</Combination>
@@ -28,10 +28,10 @@ describe("Combination", () => {
 				}}
 			>
 				<Field label="A combination">
-					<CombiningRow proportions={[30, 70]}>
+					<div>
 						<div id="child1" />
 						<div id="child2" />
-					</CombiningRow>
+					</div>
 				</Field>
 			</Provider>,
 		));
@@ -45,23 +45,10 @@ describe("Combination", () => {
 			"when mounted",
 			"to satisfy",
 			<Field label={undefined}>
-				<CombiningRow proportions={[]}>
+				<div>
 					<div id="child1" />
 					<div id="child2" />
-				</CombiningRow>
+				</div>
 			</Field>,
 		));
 });
-
-describe("CombiningRow", () => {
-	it("sets flex rules on its children to control their proportions", () =>
-		expect(
-			<CombiningRow proportions={[50, undefined, "70px"]} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect
-				.it("to match", /:nth-child\(1\) \{[^{]*flex: 0 1 50%;/)
-				.and("not to match", /:nth-child\(2\)/)
-				.and("to match", /:nth-child\(3\) \{[^{]*flex: 0 0 70px;/),
-		));
-});

package/src/components/Form/Field.js

@@ -1,81 +1,68 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { ifFlag, getThemeProp } from "../../utils";
-import Text from "../Text";
+import { makeStyles } from "@material-ui/core/styles";
+import { FormattedMessage } from "react-intl";
 
-export const FieldBox = styled.div`
-	flex: 0 1 auto;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-	position: relative;
-`;
-
-export const Label = styled.label`
-	${ifFlag(
-		"invalid",
-		css`
-			color: ${getThemeProp(["colors", "error"], "#ce4844")};
-		`,
-		css`
-			color: ${getThemeProp(["colors", "textMedium"], "#999999")};
-		`,
-	)}
-	min-height: 17px;
-	${ifFlag(
-		"center",
-		css`
-			text-align: center;
-		`,
-	)};
-	${ifFlag(
-		"labelOnly",
-		"",
-		css`
-			margin-bottom: 10px;
-		`,
-	)};
-	${ifFlag(
-		"required",
-		css`
-			&::after {
-				content: " *";
-				color: #666;
-			}
-		`,
-	)}
-`;
-
-export const RequiredNotice = styled.div`
-	position: absolute;
-	bottom: -1.6em;
-	right: 0;
-	color: ${getThemeProp(["colors", "error"], "#ce4844")};
-`;
+const useStyles = makeStyles(theme => ({
+	fieldBox: {
+		flex: "0 1 auto",
+		display: "flex",
+		flexDirection: "column",
+		marginTop: 20,
+		position: "relative",
+	},
+	label: {
+		minHeight: 17,
+		color: theme.palette.text.hint,
+		marginBottom: "10px",
+	},
+	invalidLabel: {
+		color: theme.palette.error.main,
+	},
+	centerLabel: {
+		textAlign: "center",
+	},
+	labelOnly: {
+		marginBottom: "0px",
+	},
+	requiredLabel: {
+		"&::after": {
+			content: '" *"',
+			color: "#666",
+		},
+	},
+	requiredNotice: {
+		position: "absolute",
+		bottom: "-1.6em",
+		right: 0,
+		color: theme.palette.error.main,
+	},
+}));
 
 const Field = ({ id, label, center, labelOnly, required, invalid, children }) => {
-	const reqFlag = { invalid };
-	if (required) reqFlag.required = true;
+	const classes = useStyles();
+
 	return (
-		<FieldBox>
+		<div className={classes.fieldBox}>
 			{label !== undefined ? (
-				<Label
+				<label
 					htmlFor={labelOnly ? undefined : id}
-					labelOnly={labelOnly}
-					id={id + "_label"}
-					center={center}
-					{...reqFlag}
+					id={`${id}_label`}
+					className={`${classes.label} 
+						${invalid ? classes.invalidLabel : ""}
+						${center ? classes.centerLabel : ""}
+						${labelOnly ? classes.labelOnly : ""}
+						${required ? classes.requiredLabel : ""}`}
 				>
-					<Text message={label} />
-				</Label>
+					{typeof label === "string" ? label : <FormattedMessage {...label} />}
+				</label>
 			) : null}
 			{labelOnly ? null : children}
 			{!labelOnly && required && invalid ? (
-				<RequiredNotice>
-					<Text message={required} />
-				</RequiredNotice>
+				<div className={classes.requiredNotice}>
+					{typeof required === "string" ? required : <FormattedMessage {...required} />}
+				</div>
 			) : null}
-		</FieldBox>
+		</div>
 	);
 };