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

package/src/components/AppFrame/Anchor.js

@@ -1,43 +1,41 @@
 import React from "react";
-import styled from "styled-components";
-import { getThemeProp, ifFlag } from "../../utils";
-import Icon from "../Icon";
+import { makeStyles } from "@material-ui/core/styles";
+import Icon from "../MaterialUI/DataDisplay/Icon";
 
-export const Header = styled.div`
-	display: flex;
-	cursor: pointer;
-	box-sizing: border-box;
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	font-size: 12px;
-	text-transform: uppercase;
-	height: 40px;
-	min-width: 180px;
-	padding-top: 14px;
-	padding-right: 14px;
-	color: ${ifFlag("open", getThemeProp(["colors", "application", "primary"], "#ccc"), "#ccc")};
+const useStyles = makeStyles(theme => ({
+	header: props => ({
+		display: "flex",
+		cursor: "pointer",
+		boxSizing: "border-box",
+		fontFamily: theme.typography.button.fontFamily,
+		fontSize: "12px",
+		textTransform: "uppercase",
+		height: "40px",
+		minWidth: "180px",
+		paddingTop: "14px",
+		paddingRight: "14px",
+		color: props.open ? theme.palette.primary.light : theme.palette.text.disabled,
 
-	&:hover {
-		color: ${getThemeProp(["colors", "application", "primary"], "#ccc")};
-	}
-`;
+		"&:hover": {
+			color: theme.palette.primary.light,
+		},
+	}),
+	indicator: props => ({
+		fontSize: "12px",
+		padding: "0 11px",
+		color: props.open ? theme.palette.text.disabled : theme.palette.primary.light,
+	}),
+}));
 
-export const Indicator = styled(Icon).attrs(props => ({
-	id: ifFlag(
-		"open",
-		getThemeProp(["icons", "indicators", "up"], "chevron-up"),
-		getThemeProp(["icons", "indicators", "down"], "chevron-down"),
-	)(props),
-}))`
-	font-size: 12px;
-	padding: 0 11px;
-	color: ${ifFlag("open", "#ccc", getThemeProp(["colors", "application", "primary"], "#ccc"))};
-`;
+const Anchor = ({ menuLabel, open }) => {
+	const classes = useStyles({ open });
 
-const Anchor = ({ menuLabel, open }) => (
-	<Header {...{ open }}>
-		{menuLabel}
-		<Indicator open={open} />
-	</Header>
-);
+	return (
+		<div className={classes.header}>
+			{menuLabel}
+			<Icon id={open ? "chevron-up" : "dropdown-chevron-down"} className={classes.indicator} />
+		</div>
+	);
+};
 
 export default Anchor;

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

@@ -1,16 +1,13 @@
 import React from "react";
-import Anchor, { Header, Indicator } from "./Anchor";
+import Anchor from "./Anchor";
 
 describe("Anchor", () => {
 	it("renders a closed menu anchor", () => {
 		expect(
 			<Anchor menuLabel="A Label" />,
 			"when mounted",
-			"to satisfy",
-			<Header open={false}>
-				A Label
-				<Indicator open={false} />
-			</Header>,
+			"to have style rules satisfying",
+			expect.it("to contain", "color: rgba(0, 0, 0, 0.38);"),
 		);
 	});
 
@@ -18,67 +15,7 @@ describe("Anchor", () => {
 		expect(
 			<Anchor open menuLabel="A Label" />,
 			"when mounted",
-			"to satisfy",
-			<Header open>
-				A Label
-				<Indicator open />
-			</Header>,
+			"to have style rules satisfying",
+			expect.it("to contain", "color: #7986cb;"),
 		));
-
-	describe("Indicator", () => {
-		let theme;
-		beforeEach(() => {
-			theme = {
-				colors: { application: { primary: "#ff00ff" } },
-			};
-		});
-
-		it("shows the highlight color when closed", () =>
-			expect(
-				<Indicator theme={theme} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #ff00ff;",
-			));
-
-		it("shows the text color when open", () =>
-			expect(
-				<Indicator theme={theme} open />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #ccc;",
-			));
-	});
-
-	describe("Header", () => {
-		let theme;
-		beforeEach(() => {
-			theme = {
-				colors: { application: { primary: "#ff00ff" } },
-			};
-		});
-
-		it("shows the text color when closed", () =>
-			expect(<Header theme={theme} />, "when mounted", "to have style rules satisfying", "to contain", "color: #ccc;"));
-
-		it("shows the highlight color when open", () =>
-			expect(
-				<Header theme={theme} open />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #ff00ff;",
-			));
-
-		it("shows the highlight color when hovering", () =>
-			expect(
-				<Header theme={theme} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to match",
-				/:hover\s*\{[^}]*\bcolor: #ff00ff;[^}]*\}/,
-			));
-	});
 });

package/src/components/AppFrame/AppFrame.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 import pt from "prop-types";
-import styled, { css } from "styled-components";
 import { useSelector } from "react-redux";
-import { ifFlag, getThemeProp, unwrapImmutable } from "../../utils";
+import { makeStyles } from "@material-ui/core/styles";
+import { unwrapImmutable } from "../../utils";
 import { getApplications } from "../../actions/applications";
 import useToggle from "../../hooks/useToggle";
 import useLoader from "../../hooks/useLoader";
@@ -25,42 +25,36 @@ import sharedMessages from "../../sharedMessages";
 import ActionModal from "../MaterialUI/DataDisplay/PredefinedElements/ActionModal";
 import { logoutSelector } from "../../selectors/requests";
 
-export const Base = styled.div`
-	background-color: ${getThemeProp(["colors", "bgDark"], "#333333")};
-	height: 100%;
-	overflow: hidden;
-	${ifFlag(
-		"preferencesOpen",
-		css`
-			pointer-events: none;
-		`,
-	)};
-`;
-
-export const ViewPort = styled.div`
-	overflow: hidden;
-	background-color: white;
-	border-top-left-radius: 10px;
-	height: calc(100% - 40px);
-	width: calc(100% - 50px);
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	display: flex;
-	flex-direction: column;
-	transition: width 0.3s ease-out;
-	${ifFlag(
-		"open",
-		css`
-			width: calc(100% - 200px);
-		`,
-	)};
-`;
+const useStyles = makeStyles(theme => ({
+	base: props => ({
+		backgroundColor: theme.palette.grey.dark,
+		height: "100%",
+		overflow: "hidden",
+		pointerEvents: props.preferencesOpen ? "none" : undefined,
+	}),
+	viewPort: props => ({
+		overflow: "hidden",
+		backgroundColor: "white",
+		borderTopLeftRadius: "10px",
+		height: "calc(100% - 40px)",
+		position: "absolute",
+		bottom: 0,
+		right: 0,
+		display: "flex",
+		flexDirection: "column",
+		transition: "width 0.3s ease-out",
+		width: props.toggleOpen ? "calc(100% - 200px)" : "calc(100% - 50px)",
+	}),
+}));
 
 const getApp = (apps, id) => apps.filter(app => app.name === id)[0];
 
 const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, noScope, forceShowScope = [] }) => {
 	const { formatMessage } = useIntl();
+	const [prefViewState] = useViewState(PREFS_NAME);
+	const [open, toggle, reset] = useToggle(initOpen);
+
+	const classes = useStyles({ preferencesOpen: prefViewState.show, toggleOpen: open });
 
 	const locale = useSelector(currentLocale);
 	const needLogin = useSelector(logoutSelector);
@@ -68,7 +62,6 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 	const moduleName = useSelector(selectCurrentModuleName);
 	const [helpUrl] = useApplicationHelpUrl(applicationId);
 	useLoader(getApplications(), state => localizedAppSelector(state).size);
-	const [open, toggle, reset] = useToggle(initOpen);
 	const currentApplication = getApp(applications, applicationId);
 	useLoader(getVersionInfo(locale), () => locale === null || helpUrl !== null);
 
@@ -100,10 +93,8 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 		[modules],
 	);
 
-	const [prefViewState] = useViewState(PREFS_NAME);
-
 	return (
-		<Base preferencesOpen={prefViewState.show}>
+		<div className={classes.base}>
 			<ConnectedToastList />
 			<ActionModal
 				title={formatMessage(sharedMessages.error)}
@@ -121,7 +112,7 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 				onClick={reset}
 			/>
 			<Sidebar {...{ open, toggle, modules: menuItemFromModules, activeModules }} />
-			<ViewPort open={open} onClick={reset}>
+			<div onClick={reset} className={classes.viewPort} data-test-id="viewport">
 				{noScope && !forceShowScope.includes(moduleName) ? (
 					<React.Fragment>
 						<ScopeBar />
@@ -130,11 +121,11 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 				) : (
 					<Scope>{children}</Scope>
 				)}
-			</ViewPort>
+			</div>
 			<About currentApplication={currentApplication} />
 			<LoadingScreen />
 			<Preferences />
-		</Base>
+		</div>
 	);
 };
 AppFrame.displayName = "AppFrame";