orc-shared 5.10.2 → 5.99.0-dev.10

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

@@ -1,87 +1,75 @@
 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", () => {
 	it("renders a branch continuation before indicator", () =>
-		expect(<BeforeIndicator />, "when mounted", "to have style rules satisfying", "to contain", "margin-left: -16px;"));
+		expect(
+			<MuiThemeProvider theme={theme}>
+				<BeforeIndicator />
+			</MuiThemeProvider>,
+			"when mounted",
+			"to have style rules satisfying",
+			"to contain",
+			"margin-left: -1rem;",
+		));
 });
 
 describe("NonIndicator", () => {
 	it("renders a branch continuation", () =>
 		expect(
-			<NonIndicator />,
+			<MuiThemeProvider theme={theme}>
+				<NonIndicator />
+			</MuiThemeProvider>,
 			"when mounted",
 			"to have style rules satisfying",
 			"to contain",
-			"margin: auto 0 auto -16px;",
+			"margin: auto 0 auto -1rem;",
 		));
 });
 
@@ -90,17 +78,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 { branchLengthSpacing } 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: `-${theme.spacing(branchLengthSpacing + 0.1)}`,
+			bottom: 0,
+			width: theme.spacing(0.1),
+			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

@@ -8,19 +8,5 @@ describe("Root", () => {
 describe("Leaf", () => {
 	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,
-					},
-				}}
-			/>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /:last-child::after {[^}]*left: -13px;[^}]*}/),
-		));
+	it("renders a dark <li>", () => expect(<Leaf dark />, "when mounted", "to satisfy", <li />));
 });

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