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

package/src/components/AppFrame/Help.js

@@ -1,29 +1,32 @@
 import React from "react";
-import styled from "styled-components";
-import Text from "../Text";
-import { getThemeProp } from "../../utils";
+import { FormattedMessage } from "react-intl";
+import { makeStyles } from "@material-ui/core/styles";
 import sharedMessages from "./../../sharedMessages";
 
-export const HelpLink = styled.a`
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	font-size: 12px;
-	text-transform: uppercase;
-	color: ${getThemeProp(["colors", "textLight"], "#cccccc")};
-	width: 40px;
-	cursor: pointer;
-	padding-top: 14px;
-	padding-right: 10px;
-	text-decoration: none;
-	&:hover {
-		color: ${getThemeProp(["colors", "application", "base"], "#cccccc")};
-	}
-`;
+const useStyles = makeStyles(theme => ({
+	helpLink: {
+		fontFamily: theme.typography.button.fontFamily,
+		fontSize: "12px",
+		textTransform: "uppercase",
+		color: theme.palette.grey.borders,
+		width: "40px",
+		cursor: "pointer",
+		paddingTop: "14px",
+		paddingRight: "10px",
+		textDecoration: "none",
+		"&:hover": {
+			color: theme.palette.primary.light,
+		},
+	},
+}));
 
 const Help = ({ helpUrl }) => {
+	const classes = useStyles();
+
 	return (
-		<HelpLink href={helpUrl} target="_blank">
-			<Text message={sharedMessages.help} />
-		</HelpLink>
+		<a href={helpUrl} target="_blank" rel="noreferrer" className={classes.helpLink}>
+			<FormattedMessage {...sharedMessages.help} />
+		</a>
 	);
 };
 

package/src/components/AppFrame/Help.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
-import Help, { HelpLink } from "./Help";
+import Help from "./Help";
 import { extractMessages } from "./../../utils/testUtils";
 import sharedMessages from "./../../sharedMessages";
 import { stringifyWithoutQuotes } from "./../../utils/parseHelper";
@@ -50,7 +50,7 @@ describe("Help", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<HelpLink href="any_help_url.com">{stringifyWithoutQuotes(messages["orc-shared.help"])}</HelpLink>,
+			<a href="any_help_url.com">{stringifyWithoutQuotes(messages["orc-shared.help"])}</a>,
 		));
 
 	it("sets css for help button ", () =>
@@ -62,6 +62,6 @@ describe("Help", () => {
 			</Provider>,
 			"when mounted",
 			"to have style rules satisfying",
-			expect.it("to contain", "cursor: pointer;").and("to contain", ":hover {color: #cccccc;}"),
+			expect.it("to contain", "cursor: pointer;").and("to contain", ":hover {color: #7986cb;}"),
 		));
 });

package/src/components/AppFrame/MenuItem.js

@@ -1,147 +1,127 @@
 import React, { useRef } from "react";
-import styled, { css } from "styled-components";
-import transition from "styled-transition-group";
+import { makeStyles } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
-import { getThemeProp, ifFlag } from "../../utils";
-import Text from "../Text";
-import Icon from "../Icon";
+import { FormattedMessage } from "react-intl";
+import Icon from "../MaterialUI/DataDisplay/Icon";
 
-const FilteredLink = ({ menuToggle, staticContext, dispatch, active, component, ...props }) => <Link {...props} />;
+const getToastColor = (theme, alertType) => {
+	const toastBorderColors = {
+		error: theme.palette.error.main,
+		warn: theme.palette.warning.main,
+		confirm: theme.palette.success.main,
+	};
+	return toastBorderColors[alertType] || "red";
+};
 
-export const Block = styled(FilteredLink)`
-	display: block;
-	position: relative;
-	padding: 0 10px;
-	margin-bottom: 35px;
-	color: ${ifFlag(
-		"active",
-		getThemeProp(["colors", "application", "highlight"]),
-		getThemeProp(["colors", "textMedium"], "#999999"),
-	)};
-	text-decoration: none;
-	cursor: pointer;
+const useStyles = makeStyles(theme => ({
+	block: props => ({
+		display: "block",
+		position: "relative",
+		padding: "0 10px",
+		marginBottom: "35px",
+		textDecoration: "none",
+		cursor: "pointer",
+		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
 
-	${ifFlag(
-		"menuToggle",
-		"",
-		css`
-			&:hover {
-				color: ${getThemeProp(["colors", "application", "highlight"], "#ffffff")};
-			}
-		`,
-	)};
-`;
+		"&:hover": {
+			color: props.menuToggle ? undefined : theme.palette.primary.light,
+		},
+	}),
+	alert: props => {
+		const toastColor = getToastColor(theme, props.alertType);
 
-export const BlockWithA = Block.withComponent("a");
+		return {
+			borderRadius: "50%",
+			border: `4px solid ${toastColor}`,
+			position: "absolute",
+			top: 0,
+			left: "27px",
+			visibility: "hidden",
 
-export const Alert = styled.div`
-	border-radius: 50%;
-	border: 4px solid ${getThemeProp(["colors", "toasts", props => props.type], "red")};
-	position: absolute;
-	top: 0;
-	left: 27px;
-`;
+			"&.show": {
+				visibility: "visible",
+			},
+		};
+	},
+	alertMessage: props => {
+		const toastColor = getToastColor(theme, props.alertType);
 
-const transformTime = ({ timeout }) => timeout;
-const opacityTime = ({ timeout }) => Math.round(timeout * 0.5);
-const opacityDelay = ({ timeout }) => Math.round(timeout * 0.25);
-// XXX: The below is a hack to get syntax highlighting in transition styles.
-// Adding the "transition" tag to styled-components tags would solve it.
-const alertStyling = css`
-	position: absolute;
-	z-index: 10000;
-	top: calc(-10px - 0.7em);
-	left: 22px;
-	width: auto;
-	width: max-content;
-	border-radius: 5px;
-	padding: 10px 15px;
-	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
-	color: ${getThemeProp(["colors", "textWhite"], "#efefef")};
-	background-color: ${getThemeProp(["colors", "toasts", props => props.type], "red")};
-	font-size: 11px;
-	font-weight: bold;
-	line-height: 1.2;
+		return {
+			position: "absolute",
+			zIndex: 10000,
+			top: "calc(-10px - 0.7em)",
+			left: "22px",
+			width: "max-content",
+			borderRadius: "5px",
+			padding: "10px 15px",
+			boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.5)",
+			color: theme.palette.grey.light,
+			backgroundColor: toastColor,
+			fontSize: "11px",
+			fontWeight: "bold",
+			lineHeight: 1.2,
+			transition: `transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 100ms 50ms ease-out`,
+			opacity: 0.01,
+			transform: "translateX(-50%) scaleX(0)",
 
-	&::before {
-		content: "";
-		position: absolute;
-		top: calc(10px + 0.2em);
-		left: -0.9em;
-		border: solid transparent;
-		border-width: 0.4em 0.9em 0.4em 0;
-		border-right-color: ${getThemeProp(["colors", "toasts", props => props.type], "red")};
-	}
-`;
-const transitionStatement = css`
-	transition: transform ${transformTime}ms cubic-bezier(0.68, -0.55, 0.27, 1.55),
-		opacity ${opacityTime}ms ${opacityDelay}ms ease-out;
-`;
-export const AlertMessage = transition.div`
-	${alertStyling}
-	${transitionStatement}
+			"&::before": {
+				content: "",
+				position: "absolute",
+				top: "calc(10px + 0.2em)",
+				left: "-0.9em",
+				border: "solid transparent",
+				borderWidth: "0.4em 0.9em 0.4em 0",
+				borderRightColor: toastColor,
+			},
 
-	&:enter {
-		opacity: 0.01;
-		transform: translateX(-50%) scaleX(0);
-	}
-	&:enter-active {
-		opacity: 1;
-		transform: translateX(0) scaleX(1);
-	}
-	&:exit {
-		opacity: 1;
-		transform: translateX(0) scaleX(1);
-	}
-	&:exit-active {
-		opacity: 0.01;
-		transform: translateX(-50%) scaleX(0);
-	}
-`;
-AlertMessage.defaultProps = { timeout: 200, unmountOnExit: true, appear: true };
+			"&.show": {
+				opacity: 1,
+				transform: "translateX(0) scaleX(1)",
+			},
+		};
+	},
+	menuIcon: props => ({
+		fontSize: "24px",
+		verticalAlign: "middle",
+		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
+	}),
+	label: props => ({
+		fontFamily: theme.typography.button.fontFamily,
+		fontSize: "13px",
+		verticalAlign: "middle",
+		textTransform: "uppercase",
+		paddingLeft: "10px",
+		transition: "opacity 0.3s ease-out",
+		opacity: props.showLabel ? 1 : 0,
+	}),
+}));
 
-export const MenuIcon = styled(Icon)`
-	font-size: 24px;
-	vertical-align: middle;
-`;
+const FilteredLink = ({ staticContext, dispatch, component, ...props }) => <Link {...props} />;
 
-export const Label = styled.span`
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	font-size: 13px;
-	vertical-align: middle;
-	text-transform: uppercase;
-	padding-left: 10px;
+const MenuItem = ({ open = false, label = "", icon, alert, isHidden = false, href, menuToggle, active, ...props }) => {
+	const classes = useStyles({ active: active, menuToggle: menuToggle, alertType: alert?.type, showLabel: open });
 
-	transition: opacity 0.3s ease-out;
-	opacity: ${ifFlag("show", 1, 0)};
-`;
-
-const MenuItem = ({ open = false, label = "", icon, alert, isHidden = false, href, ...props }) => {
-	let ItemWrapper = Block;
-	if (props.menuToggle) {
-		ItemWrapper = BlockWithA;
-	}
 	const alertMessage = useRef("");
-	if (alert && alert.message) {
+	const showAlert = !!alert;
+	const showAlertMessage = !!alert?.message;
+	if (showAlert && showAlertMessage) {
 		alertMessage.current = alert.message;
 	}
 
+	if (isHidden) {
+		return false;
+	}
+
+	const ItemWrapper = menuToggle ? "a" : FilteredLink;
+
 	return (
-		!isHidden && (
-			<ItemWrapper to={href} {...props}>
-				<MenuIcon id={icon} />
-				{alert ? (
-					<Alert type={alert.type}>
-						<AlertMessage in={!!alert.message} type={alert.type}>
-							<Text message={alertMessage.current} />
-						</AlertMessage>
-					</Alert>
-				) : null}
-				<Label show={open}>
-					<Text message={label} />
-				</Label>
-			</ItemWrapper>
-		)
+		<ItemWrapper to={href} className={classes.block} {...props}>
+			<Icon id={icon} className={classes.menuIcon} />
+			<div className={`${classes.alert} ${showAlert ? "show" : undefined}`}>
+				<div className={`${classes.alertMessage} ${showAlertMessage ? "show" : undefined}`}>{alertMessage.current}</div>
+			</div>
+			<span className={classes.label}>{typeof label === "string" ? label : <FormattedMessage {...label} />}</span>
+		</ItemWrapper>
 	);
 };
 

package/src/components/AppFrame/MenuItem.test.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import { MemoryRouter } from "react-router-dom";
 import { Ignore } from "unexpected-reaction";
-import MenuItem, { Block, MenuIcon, Label, Alert, AlertMessage } from "./MenuItem";
+import MenuItem from "./MenuItem";
+import { Link } from "react-router-dom";
+import Icon from "../MaterialUI/DataDisplay/Icon";
+import sharedMessages from "./../../sharedMessages";
+import { extractMessages, TestWrapper } from "./../../utils/testUtils";
 
-const BlockWithA = Block.withComponent("a");
+const messages = extractMessages(sharedMessages);
 
 describe("MenuItem", () => {
 	let store = {
@@ -24,10 +27,11 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" data-test-id="test" to="/foo/test">
-					<MenuIcon id="cake" />
+				<Link id="test" data-test-id="test" to="/foo/test">
+					<Icon id="cake" />
 					<Ignore />
-				</Block>
+					<Ignore />
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -41,10 +45,11 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<BlockWithA id="test" menuToggle>
-					<MenuIcon id="cake" />
+				<a id="test">
+					<Icon id="cake" />
+					<Ignore />
 					<Ignore />
-				</BlockWithA>
+				</a>
 			</MemoryRouter>,
 		));
 
@@ -58,10 +63,11 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<Ignore />
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -75,12 +81,11 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Label show>
-						<Ignore />
-					</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<Ignore />
+					<span></span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -94,11 +99,13 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert />
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div className="show">
+						<div></div>
+					</div>
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -112,11 +119,13 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert type="confirm" />
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div className="show">
+						<div></div>
+					</div>
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -130,13 +139,13 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert>
-						<AlertMessage in>Test message</AlertMessage>
-					</Alert>
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div>
+						<div className="show">Test message</div>
+					</div>
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -156,15 +165,13 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert type="warn">
-						<AlertMessage in type="warn">
-							Test message
-						</AlertMessage>
-					</Alert>
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div>
+						<div className="show">Test message</div>
+					</div>
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		));
 
@@ -192,31 +199,27 @@ describe("MenuItem", () => {
 		const hide = state => false;
 
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<MenuItem
-						id="test"
-						href="/foo/test"
-						icon="cake"
-						label="Test"
-						alert={{ message: "Test message", type: "warn" }}
-						hide={hide}
-					/>
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} memoryRouter>
+				<MenuItem
+					id="test"
+					href="/foo/test"
+					icon="cake"
+					label={{ id: "Test", defaultMessage: "Test" }}
+					alert={{ message: "Test message", type: "warn" }}
+					hide={hide}
+				/>
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert type="warn">
-						<AlertMessage in type="warn">
-							Test message
-						</AlertMessage>
-					</Alert>
-					<Label>Test</Label>
-				</Block>
-			</MemoryRouter>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} memoryRouter>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div>
+						<div className="show">Test message</div>
+					</div>
+					<span>Test</span>
+				</Link>
+			</TestWrapper>,
 		);
 	});
 
@@ -237,108 +240,14 @@ describe("MenuItem", () => {
 			"when mounted",
 			"to satisfy",
 			<MemoryRouter>
-				<Block id="test" to="/foo/test">
-					<MenuIcon id="cake" />
-					<Alert type="warn">
-						<AlertMessage in type="warn">
-							Test message
-						</AlertMessage>
-					</Alert>
-					<Label>Test</Label>
-				</Block>
+				<Link id="test" to="/foo/test">
+					<Icon id="cake" />
+					<div>
+						<div className="show">Test message</div>
+					</div>
+					<span>Test</span>
+				</Link>
 			</MemoryRouter>,
 		);
 	});
-
-	describe("Block", () => {
-		it("sets text color to highlight if active", () =>
-			expect(
-				<MemoryRouter>
-					<Block to="" active />
-				</MemoryRouter>,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #ffffff;",
-			));
-
-		it("sets text color to grey if not active", () =>
-			expect(
-				<MemoryRouter>
-					<Block to="" />
-				</MemoryRouter>,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #999999;",
-			));
-
-		it("adds a hover rule if menu flag is unset", () =>
-			expect(
-				<MemoryRouter>
-					<Block to="" />
-				</MemoryRouter>,
-				"when mounted",
-				"to have style rules satisfying",
-				"to match",
-				/:hover\s*\{[^}]*\bcolor: #ffffff;[^}]*\}/,
-			));
-
-		it("does not add a hover rule if menuToggle flag is set", () =>
-			expect(
-				<MemoryRouter>
-					<Block to="" menuToggle />
-				</MemoryRouter>,
-				"when mounted",
-				"to have style rules satisfying",
-				"not to match",
-				/:hover\s*\{[^}]*\bcolor: #ffffff;[^}]*\}/,
-			));
-	});
-
-	describe("Label", () => {
-		it("sets full opacity if open", () =>
-			expect(<Label show />, "when mounted", "to have style rules satisfying", "to contain", "opacity: 1;"));
-
-		it("sets zero opacity if not open", () =>
-			expect(<Label />, "when mounted", "to have style rules satisfying", "to contain", "opacity: 0;"));
-	});
-
-	describe("Alert", () => {
-		it("has a default color (red)", () =>
-			expect(<Alert />, "when mounted", "to have style rules satisfying", "to match", /border: \d+px solid red/));
-
-		it("has a default color", () =>
-			expect(
-				<ThemeProvider theme={{ colors: { toasts: { test: "blue" } } }}>
-					<Alert type="test" />
-				</ThemeProvider>,
-				"when mounted",
-				"to have style rules satisfying",
-				"to match",
-				/border: \d+px solid blue/,
-			));
-	});
-
-	describe("AlertMessage", () => {
-		it("has a default color (red)", () =>
-			expect(
-				<AlertMessage in message="Test" />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-color: red",
-			));
-
-		it("has a default color", () =>
-			expect(
-				<ThemeProvider theme={{ colors: { toasts: { test: "blue" } } }}>
-					<AlertMessage in message="Test" type="test" />
-				</ThemeProvider>,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-color: blue",
-			));
-	});
 });