orc-shared 5.10.1-dev.8 → 5.10.1-dev.9

package/src/components/Treeview/Branch.js

@@ -1,47 +1,65 @@
-import styled, { css } from "styled-components";
-import { ifFlag, getThemeProp } from "../../utils";
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
 import { branchIndent, branchLength, branchHeight } from "./settings";
+import classNames from "classnames";
 
-const baseBranch = css`
-	margin: 0;
-	font-size: 13px;
-	list-style-type: none;
-	border-width: 0;
-	border-style: solid;
-	border-color: #666;
-	position: relative;
-`;
-
-export const Branch = styled.ul`
-	${baseBranch}
-
-	margin-left: ${branchIndent}px;
-	padding: 0;
-	padding-left: ${branchLength}px;
-	border-left-width: 1px;
-
-	&:last-child::after {
-		/* blocker - hides lowest part of vertical branch */
-		content: " ";
-		background-color: ${ifFlag("dark", getThemeProp(["colors", "bgDark"], "#333333"), "#fff")};
-		position: absolute;
-		left: -${props => branchIndent(props) + branchLength(props) + 2}px;
-		bottom: 0;
-		top: -${branchHeight}px;
-		width: 1px;
-	}
-`;
-
-export const Wrapper = styled.ul`
-	${baseBranch}
-
-	overflow-y: auto;
-	overflow-x: hidden;
-	margin-left: 0;
-	padding: ${props => branchLength(props) - 5}px;
-
-	& > ${Branch} {
-		/* First Branch immediately under Wrapper needs margin adjusted to look right */
-		margin-left: ${props => 1.5 * branchIndent(props)}px;
-	}
-`;
+const useStyles = makeStyles(theme => {
+	const base = {
+		margin: 0,
+		fontSize: "13px",
+		listStyleType: "none",
+		borderWidth: 0,
+		borderStyle: "solid",
+		borderColor: "#666",
+		position: "relative",
+	};
+
+	return {
+		branch: props => ({
+			...base,
+			marginLeft: `${branchIndent}px`,
+			padding: "0",
+			paddingLeft: `${branchLength}px`,
+			borderLeftWidth: "1px",
+
+			"&:last-child::after": {
+				/* blocker - hides lowest part of vertical branch */
+				content: '""',
+				backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
+				position: "absolute",
+				left: `-${branchIndent + branchLength + 2}px`,
+				bottom: 0,
+				top: `-${branchHeight}px`,
+				width: "1px",
+			},
+		}),
+		wrapper: {
+			...base,
+			overflowY: "auto",
+			overflowX: "hidden",
+			marginLeft: 0,
+			padding: `${branchLength - 5}px`,
+
+			"& > $branch": {
+				/* First Branch immediately under Wrapper needs margin adjusted to look right */
+				marginLeft: `${1.5 * branchIndent}px`,
+			},
+		},
+	};
+});
+
+export const Branch = ({ dark, branchClassName, children }) => {
+	const classes = useStyles({ dark });
+
+	return (
+		<ul className={classNames(classes.branch, branchClassName)} data-qa="branch">
+			{children}
+		</ul>
+	);
+};
+
+export const Wrapper = ({ children }) => {
+	const classes = useStyles();
+
+	return <ul className={classes.wrapper}>{children}</ul>;
+};

package/src/components/Treeview/Branch.test.js

@@ -1,27 +1,32 @@
 import React from "react";
+import { createMuiTheme, TestWrapper } from "../../utils/testUtils";
 import { Branch, Wrapper } from "./Branch";
 
 describe("Branch", () => {
+	const theme = createMuiTheme();
+
 	it("renders a <ul>", () => expect(<Branch />, "when mounted", "to satisfy", <ul />));
 
 	it("sets styling for showing a branch structure", () =>
 		expect(
-			<Branch
-				theme={{
-					treeSettings: {
-						branchIndent: 10,
-						branchLength: 12,
-						branchHeight: 14,
-					},
-				}}
-			/>,
+			<Branch />,
 			"when mounted",
 			"to have style rules satisfying",
 			expect
-				.it("to contain", "margin-left: 10px;")
-				.and("to contain", "padding-left: 12px;")
-				.and("to match", /:last-child::after {[^}]*left: -24px;[^}]*}/)
-				.and("to match", /:last-child::after {[^}]*top: -14px;[^}]*}/),
+				.it("to contain", "margin-left: 14px;")
+				.and("to contain", "padding-left: 15px;")
+				.and("to match", /:last-child::after {[^}]*left: -31px;[^}]*}/)
+				.and("to match", /:last-child::after {[^}]*top: -20px;[^}]*}/),
+		));
+
+	it("sets styling for a dark theme", () =>
+		expect(
+			<TestWrapper muiThemeProvider={{ theme }}>
+				<Branch dark />
+			</TestWrapper>,
+			"when mounted",
+			"to have style rules satisfying",
+			expect.it("to match", /:last-child::after {[^}]*background-color: #333;[^}]*}/),
 		));
 });
 
@@ -30,20 +35,12 @@ describe("Wrapper", () => {
 
 	it("sets styling for showing the root of a tree structure", () =>
 		expect(
-			<Wrapper
-				theme={{
-					treeSettings: {
-						branchIndent: 10,
-						branchLength: 12,
-						branchHeight: 14,
-					},
-				}}
-			/>,
+			<Wrapper />,
 			"when mounted",
 			"to have style rules satisfying",
 			expect
 				.it("to contain", "margin-left: 0;")
-				.and("to contain", "padding: 7px;")
-				.and("to contain", "> ." + Branch.styledComponentId + " {margin-left: 15px;}"),
+				.and("to contain", "padding: 10px;")
+				.and("to contain", "{margin-left: 21px;}"),
 		));
 });

package/src/components/Treeview/Label.js

@@ -1,54 +1,68 @@
-import styled, { css } from "styled-components";
-import Icon from "../Icon";
-import { getThemeProp, ifFlag } from "../../utils";
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Icon from "../MaterialUI/DataDisplay/Icon";
 import { branchLength } from "./settings";
+import classNames from "classnames";
 
-export const Indicator = styled(Icon).attrs(props => ({
-	id: ifFlag(
-		"open",
-		getThemeProp(["icons", "indicators", "down"], "chevron-down"),
-		getThemeProp(["icons", "indicators", "right"], "chevron-right"),
-	)(props),
-}))`
-	font-size: 10px;
-	padding: 10px 0 10px 10px;
-	cursor: pointer;
-	flex: 0 0 auto;
-	color: ${ifFlag(
-		"open",
-		ifFlag("dark", getThemeProp(["colors", "textLight"], "#cccccc"), getThemeProp(["colors", "text"], "#333333")),
-		getThemeProp(["colors", "application", "base"], "#ffffff"),
-	)};
-`;
-
-export const BeforeIndicator = styled.div`
-	background-color: #666;
-	margin-left: -${props => branchLength(props) + 1}px;
-	width: ${props => branchLength(props) + 1}px;
-	height: 1px;
-	z-index: 99;
-	position: absolute;
-`;
-
-export const NonIndicator = styled.div`
-	height: 1px;
-	width: ${props => branchLength(props) + 21}px;
-	margin: auto 0 auto -${props => branchLength(props) + 1}px;
-	background-color: #666;
-	align-self: stretch;
-	flex: 0 0 auto;
-	z-index: 99;
-`;
-
-export const Label = styled.div`
-	cursor: pointer;
-	flex-grow: 1;
-	width: 100%;
-	${ifFlag(
-		"isSelectedNode",
-		css`
-			background-color: #222;
-			border: 1px solid ${getThemeProp(["colors", "application", "base"], "#0F4E66")};
-		`,
-	)};
-`;
+const useStyles = makeStyles(theme => ({
+	beforeIndicator: {
+		backgroundColor: "#666",
+		marginLeft: `-${branchLength + 1}px`,
+		width: `${branchLength + 1}px`,
+		height: "1px",
+		zIndex: 99,
+		position: "absolute",
+	},
+	nonIndicator: {
+		height: "1px",
+		width: `${branchLength + 21}px`,
+		margin: `auto 0 auto -${branchLength + 1}px`,
+		backgroundColor: "#666",
+		alignSelf: "stretch",
+		flex: "0 0 auto",
+		zIndex: 99,
+	},
+	label: props => ({
+		cursor: "pointer",
+		flexGrow: 1,
+		width: "100%",
+		backgroundColor: props.isSelectedNode ? "#222" : undefined,
+		border: props.isSelectedNode ? `1px solid ${theme.palette.grey.borders}` : undefined,
+	}),
+	indicator: props => ({
+		fontSize: "10px",
+		padding: "10px 0 10px 10px",
+		cursor: "pointer",
+		flex: "0 0 auto",
+		color: props.open
+			? props.dark
+				? theme.palette.primary.light
+				: theme.palette.text.primary
+			: theme.palette.primary.main,
+	}),
+}));
+
+export const BeforeIndicator = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.beforeIndicator}>{children}</div>;
+};
+
+export const NonIndicator = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.nonIndicator}>{children}</div>;
+};
+
+export const Label = ({ isSelectedNode, labelClassName, children }) => {
+	const classes = useStyles({ isSelectedNode });
+
+	return <div className={classNames(classes.label, labelClassName)}>{children}</div>;
+};
+
+export const Indicator = ({ open, dark, onClick }) => {
+	const classes = useStyles({ open, dark });
+	const iconId = open ? "dropdown-chevron-down" : "dropdown-chevron-right";
+
+	return <Icon id={iconId} className={classes.indicator} onClick={onClick} data-qa="indicator" />;
+};

package/src/components/Treeview/Label.test.js

@@ -1,72 +1,50 @@
 import React from "react";
+import { MuiThemeProvider } from "@material-ui/core";
 import { Label, Indicator, BeforeIndicator, NonIndicator } from "./Label";
-import Icon from "../Icon";
+import Icon from "../MaterialUI/DataDisplay/Icon";
+import { createMuiTheme } from "../../utils/testUtils";
+
+const theme = createMuiTheme();
 
 describe("Indicator", () => {
 	it("renders a closed arrow icon", () =>
-		expect(<Indicator />, "when mounted", "to satisfy", <Icon id="chevron-right" />));
+		expect(<Indicator />, "when mounted", "to satisfy", <Icon id="dropdown-chevron-right" />));
 
 	it("renders an open arrow icon", () =>
-		expect(<Indicator open />, "when mounted", "to satisfy", <Icon id="chevron-down" />));
+		expect(<Indicator open />, "when mounted", "to satisfy", <Icon id="dropdown-chevron-down" />));
 
 	it("renders closed arrows in highlight color", () =>
-		expect(<Indicator />, "when mounted", "to have style rules satisfying", "to contain", "color: #ffffff;"));
+		expect(
+			<MuiThemeProvider theme={theme}>
+				<Indicator />
+			</MuiThemeProvider>,
+			"when mounted",
+			"to have style rules satisfying",
+			"to contain",
+			"color: #333;",
+		));
 
 	it("renders open arrows in dark grey", () =>
-		expect(<Indicator open />, "when mounted", "to have style rules satisfying", "to contain", "color: #333333;"));
+		expect(
+			<MuiThemeProvider theme={theme}>
+				<Indicator open />
+			</MuiThemeProvider>,
+			"when mounted",
+			"to have style rules satisfying",
+			"to contain",
+			"color: #333;",
+		));
 
 	it("renders open arrows in light grey when dark", () =>
-		expect(<Indicator open dark />, "when mounted", "to have style rules satisfying", "to contain", "color: #cccccc;"));
-
-	describe("with theme", () => {
-		let theme;
-		beforeEach(() => {
-			theme = {
-				colors: { application: { base: "red" } },
-				icons: {
-					indicators: {
-						up: "arrow-up",
-						down: "arrow-down",
-						right: "arrow-right",
-						left: "arrow-left",
-					},
-				},
-			};
-		});
-
-		it("renders a closed arrow icon", () =>
-			expect(<Indicator theme={theme} />, "when mounted", "to satisfy", <Icon id="arrow-right" />));
-
-		it("renders an open arrow icon", () =>
-			expect(<Indicator theme={theme} open />, "when mounted", "to satisfy", <Icon id="arrow-down" />));
-
-		it("renders closed arrows in highlight color", () =>
-			expect(
-				<Indicator theme={theme} />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: red;",
-			));
-
-		it("renders open arrows in dark grey", () =>
-			expect(
-				<Indicator theme={theme} open />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #333333;",
-			));
-
-		it("renders open arrows in light grey when dark", () =>
-			expect(
-				<Indicator theme={theme} open dark />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"color: #cccccc;",
-			));
-	});
+		expect(
+			<MuiThemeProvider theme={theme}>
+				<Indicator open dark />
+			</MuiThemeProvider>,
+			"when mounted",
+			"to have style rules satisfying",
+			"to contain",
+			"color: #CCC;",
+		));
 });
 
 describe("BeforeIndicator", () => {
@@ -90,17 +68,21 @@ describe("Label", () => {
 
 	it("renders a label without border", () =>
 		expect(
-			<Label />,
+			<MuiThemeProvider theme={theme}>
+				<Label />
+			</MuiThemeProvider>,
 			"when mounted",
 			"to have style rules satisfying",
-			expect.it("not to contain", "background-color: #222;").and("not to contain", "border: 1px solid #0F4E66"),
+			expect.it("not to contain", "background-color: #222;").and("not to contain", "border: 1px solid #CCC"),
 		));
 
 	it("renders a label with border", () =>
 		expect(
-			<Label isSelectedNode={true} />,
+			<MuiThemeProvider theme={theme}>
+				<Label isSelectedNode={true} />
+			</MuiThemeProvider>,
 			"when mounted",
 			"to have style rules satisfying",
-			expect.it("to contain", "background-color: #222;").and("to contain", "border: 1px solid #0F4E66"),
+			expect.it("to contain", "background-color: #222;").and("to contain", "border: 1px solid #CCC"),
 		));
 });

package/src/components/Treeview/Leaf.js

@@ -1,24 +1,43 @@
-import styled from "styled-components";
-import { ifFlag, getThemeProp } from "../../utils";
-import { branchLength, branchHeight } from "./settings";
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { branchLength } from "./settings";
+import classNames from "classnames";
 
-export const Root = styled.li`
-	position: relative;
-	display: flex;
-	align-items: center;
-`;
+const useStyles = makeStyles(theme => ({
+	root: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+	},
+	leaf: props => ({
+		"&:last-child::after": {
+			/* blocker - hides lowest part of vertical branch */
+			content: '""',
+			backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
+			position: "absolute",
+			top: "calc(50%)",
+			left: `-${branchLength + 1}px`,
+			bottom: 0,
+			width: "1px",
+			height: "50%",
+		},
+	}),
+}));
 
-export const Leaf = styled(Root)`
-	&:last-child::after {
-		/* blocker - hides lowest part of vertical branch */
-		content: " ";
-		background-color: ${ifFlag("dark", getThemeProp(["colors", "bgDark"], "#333333"), "#fff")};
-		position: absolute;
-		top: calc(50%);
-		left: -${props => branchLength(props) + 1}px;
-		bottom: 0;
-		height: ${branchHeight}px;
-		width: 1px;
-		height: 50%;
-	}
-`;
+export const Root = ({ dark, leafClassName, children }) => {
+	const classes = useStyles({ dark });
+
+	return (
+		<li className={classNames(classes.root, classes.leaf, leafClassName)} data-qa="leaf">
+			{children}
+		</li>
+	);
+};
+
+export const Leaf = ({ dark, leafClassName, children }) => {
+	return (
+		<Root leafClassName={leafClassName} dark={dark}>
+			{children}
+		</Root>
+	);
+};

package/src/components/Treeview/Leaf.test.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { createMuiTheme, TestWrapper } from "../../utils/testUtils";
 import { Root, Leaf } from "./Leaf";
 
 describe("Root", () => {
@@ -6,21 +7,25 @@ describe("Root", () => {
 });
 
 describe("Leaf", () => {
+	const theme = createMuiTheme();
+
 	it("renders a <li>", () => expect(<Leaf />, "when mounted", "to satisfy", <li />));
 
 	it("sets styling for a branch structure", () =>
 		expect(
-			<Leaf
-				theme={{
-					treeSettings: {
-						branchIndent: 10,
-						branchLength: 12,
-						branchHeight: 14,
-					},
-				}}
-			/>,
+			<Leaf />,
+			"when mounted",
+			"to have style rules satisfying",
+			expect.it("to match", /:last-child::after {[^}]*left: -16px;[^}]*}/),
+		));
+
+	it("sets styling for a dark theme", () =>
+		expect(
+			<TestWrapper muiThemeProvider={{ theme }}>
+				<Leaf dark />
+			</TestWrapper>,
 			"when mounted",
 			"to have style rules satisfying",
-			expect.it("to match", /:last-child::after {[^}]*left: -13px;[^}]*}/),
+			expect.it("to match", /:last-child::after {[^}]*background-color: #333;[^}]*}/),
 		));
 });

package/src/components/Treeview/Node.js

@@ -6,8 +6,8 @@ import { safeGet, stripKey } from "../../utils";
 
 export const TreeContext = React.createContext();
 
-export const LeafNode = ({ dark, isSelectedNode, ...nodeData }) => (
-	<Leaf dark={dark}>
+export const LeafNode = ({ dark, isSelectedNode, labelClassName, leafClassName, ...nodeData }) => (
+	<Leaf dark={dark} leafClassName={leafClassName}>
 		<TreeContext.Consumer>
 			{({ Content, nodeState, updateNodeState, dark, otherProps }) => {
 				const toggle = () => updateNodeState({ ...nodeState, [nodeData.id]: !nodeData.open });
@@ -18,7 +18,7 @@ export const LeafNode = ({ dark, isSelectedNode, ...nodeData }) => (
 						) : (
 							<NonIndicator />
 						)}
-						<Label isSelectedNode={isSelectedNode}>
+						<Label isSelectedNode={isSelectedNode} labelClassName={labelClassName}>
 							<Content {...stripKey("children", nodeData)} {...otherProps} />
 						</Label>
 					</React.Fragment>
@@ -29,9 +29,9 @@ export const LeafNode = ({ dark, isSelectedNode, ...nodeData }) => (
 );
 LeafNode.displayName = "LeafNode";
 
-export const RootNode = ({ isSelectedNode, ...nodeData }) => (
+export const RootNode = ({ isSelectedNode, labelClassName, ...nodeData }) => (
 	<Root>
-		<Label isSelectedNode={isSelectedNode}>
+		<Label isSelectedNode={isSelectedNode} labelClassName={labelClassName}>
 			<TreeContext.Consumer>
 				{({ Content, otherProps }) => <Content {...stripKey("children", nodeData)} {...otherProps} />}
 			</TreeContext.Consumer>
@@ -42,7 +42,7 @@ RootNode.displayName = "RootNode";
 
 export const Node = ({ root, id }) => (
 	<TreeContext.Consumer>
-		{({ openAll, getNode, selectedNodeId, nodeState, dark }) => {
+		{({ openAll, getNode, selectedNodeId, nodeState, dark, labelClassName, leafClassName, branchClassName }) => {
 			const nodeData = getNode(id);
 			if (!nodeData) return null;
 			const isSelectedNode = selectedNodeId === id;
@@ -51,12 +51,19 @@ export const Node = ({ root, id }) => (
 			return (
 				<React.Fragment>
 					{root ? (
-						<RootNode {...nodeData} isSelectedNode={isSelectedNode} />
+						<RootNode {...nodeData} isSelectedNode={isSelectedNode} labelClassName={labelClassName} />
 					) : (
-						<LeafNode {...nodeData} open={open} dark={dark} isSelectedNode={isSelectedNode} />
+						<LeafNode
+							{...nodeData}
+							open={open}
+							dark={dark}
+							isSelectedNode={isSelectedNode}
+							labelClassName={labelClassName}
+							leafClassName={leafClassName}
+						/>
 					)}
 					{open && safeGet(nodeData, "children", "length") ? (
-						<Branch dark={dark}>
+						<Branch dark={dark} branchClassName={branchClassName}>
 							{nodeData.children.map(id => (
 								<Node key={id} id={id} />
 							))}