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

package/src/components/Switch.test.js

@@ -1,130 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import FullSwitch, { Switch, Wrapper, ContainedCheckbox, Caption } from "./Switch";
-
-describe("Switch", () => {
-	it("renders a switch in the on position", () =>
-		expect(
-			<Switch value={true} onChange={() => {}} />,
-			"when mounted",
-			"to satisfy",
-			<Wrapper value={true}>
-				<ContainedCheckbox checked={true} onChange={() => {}} />
-			</Wrapper>,
-		));
-
-	it("renders a switch in the off position", () =>
-		expect(
-			<Switch value={false} onChange={() => {}} />,
-			"when mounted",
-			"to satisfy",
-			<Wrapper value={false}>
-				<ContainedCheckbox checked={false} onChange={() => {}} />
-			</Wrapper>,
-		));
-
-	it("renders captions on the switch", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IntlProvider locale="en">
-					<Switch
-						value={true}
-						onChange={() => {}}
-						onCaption={{ id: "foo", defaultMessage: "Foo!" }}
-						offCaption={{ id: "bar", defaultMessage: "Bar!" }}
-					/>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Wrapper value={true}>
-				<ContainedCheckbox checked onChange={() => {}} />
-				<Caption value={true}>Foo!</Caption>
-				<Caption value={false}>Bar!</Caption>
-			</Wrapper>,
-		));
-
-	it("sets onChange handler on the checkbox", () => {
-		const onChange = () => {};
-		return expect(
-			<Switch onChange={onChange} />,
-			"when mounted",
-			"to contain",
-			<ContainedCheckbox onChange={onChange} />,
-		);
-	});
-
-	describe("with id handling", () => {
-		it("passes through a given id", () =>
-			expect(
-				<FullSwitch onChange={() => {}} value={true} id="fixedID" />,
-				"when mounted",
-				"queried for first",
-				"input",
-				"to have attributes",
-				{ id: "fixedID" },
-			));
-
-		it("sets an id if none given", () =>
-			expect(
-				<FullSwitch onChange={() => {}} value={true} />,
-				"when mounted",
-				"queried for first",
-				"input",
-				"to have attributes",
-				{ id: expect.it("to match", /^switch\d+$/) },
-			));
-	});
-});
-
-describe("Wrapper", () => {
-	it("sets active colors when on", () =>
-		expect(
-			<Wrapper value={true} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /\scolor: #ffffff;.*::after/).and("to match", /\sbackground-color: #ff0000;.*::after/),
-		));
-
-	it("sets background color according to theme when on", () =>
-		expect(
-			<Wrapper value={true} theme={{ colors: { application: { base: "#990099" } } }} />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to match",
-			/\sbackground-color: #990099;.*::after/,
-		));
-
-	it("sets custom background color when on", () =>
-		expect(
-			<Wrapper value={true} onColor="#ff00ff" />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to match",
-			/\sbackground-color: #ff00ff;.*::after/,
-		));
-
-	it("sets inactive colors when off", () =>
-		expect(
-			<Wrapper value={false} />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to match", /\scolor: #333333;.*::after/).and("to match", /\sbackground-color: #cccccc;.*::after/),
-		));
-
-	it("sets custom background color when off", () =>
-		expect(
-			<Wrapper value={false} offColor="#00cc00" />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to match",
-			/\sbackground-color: #00cc00;.*::after/,
-		));
-});

package/src/components/Text.test.js

@@ -1,132 +0,0 @@
-import React from "react";
-import Text, { Placeholder } from "./Text";
-import { createMuiTheme, TestWrapper } from "../utils/testUtils";
-
-const theme = createMuiTheme();
-
-describe("Text", () => {
-	let state, store;
-	beforeEach(() => {
-		state = { dataVal: { foo: 3 } };
-		store = {
-			subscribe: () => {},
-			dispatch: () => {},
-			getState: () => state,
-		};
-	});
-
-	it("renders a simple message", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text message="Test message" />
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			"Test message",
-		));
-
-	it("renders an empty string", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text message="" />
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			"",
-		));
-
-	it("renders a translated message", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text message={{ id: "test.msg", defaultMessage: "Test message" }} />
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			"Test message",
-		));
-
-	it("renders a translated message with values", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text
-					message={{
-						id: "test.msg",
-						defaultMessage: "Test message {foo}",
-						values: { foo: 3 },
-					}}
-				/>
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			"Test message 3",
-		));
-
-	it("renders a translated message with a value selector", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text
-					message={{
-						id: "test.msg",
-						defaultMessage: "Test message {foo}",
-						values: state => state.dataVal,
-					}}
-				/>
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			"Test message 3",
-		));
-
-	it("renders a translated message missing its values as a placeholder", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text
-					message={{
-						id: "test.msg",
-						defaultMessage: "Test message {foo}",
-					}}
-				/>
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			<Placeholder />,
-		));
-
-	it("renders an error", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text message="Test message" error={{ message: "This failed" }} />
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			<span
-				style={{
-					color: "red",
-					backgroundColor: "white",
-					fontWeight: "bold",
-				}}
-			>
-				{"Errored: "}
-				{"This failed"}
-			</span>,
-		));
-
-	it("renders an error if no message given", () =>
-		expect(
-			<TestWrapper provider={{ store }} intlProvider memoryRouter stylesProvider muiThemeProvider={{ theme }}>
-				<Text />
-			</TestWrapper>,
-			"when mounted",
-			"to satisfy",
-			<span
-				style={{
-					color: "red",
-					backgroundColor: "white",
-					fontWeight: "bold",
-				}}
-			>
-				{"Errored: "}
-				{"No message provided"}
-			</span>,
-		));
-});

package/src/components/Toolbar.js

@@ -1,178 +0,0 @@
-import React from "react";
-import pt from "prop-types";
-import styled from "styled-components";
-import { getThemeProp } from "../utils";
-import IconButton from "./IconButton";
-import Input from "./Input";
-import Text, { ptLabel } from "./Text";
-import Radio from "./MaterialUI/Inputs/Radio";
-import RadioProps from "./MaterialUI/Inputs/RadioProps";
-
-export const Bar = styled.div`
-	flex: 0 0 auto;
-	min-height: 64px;
-	border-bottom: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	display: flex;
-	align-items: center;
-	padding: 5px 24px;
-	box-sizing: border-box;
-`;
-
-export const ToolGroup = styled.div`
-	flex: 0 0 auto;
-	display: flex;
-
-	& > *:not(:last-child) {
-		margin-right: -1px;
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	& > *:not(:first-child) {
-		margin-left: 0;
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-`;
-
-export const ToolbarButton = styled(IconButton)`
-	flex: 0 0 auto;
-	margin: 0 5px;
-	min-width: auto;
-
-	&:focus,
-	&:hover {
-		z-index: 10;
-	}
-`;
-
-export const ToolbarInput = styled(Input)`
-	height: 30px;
-	flex: 0 0 auto;
-	margin: 0 5px;
-
-	&:focus {
-		z-index: 10;
-	}
-`;
-
-export const ToolbarRadioWrapper = styled.div`
-	min-width: 250px;
-	padding-left: 10px;
-`;
-
-export const ToolbarRadio = styled(Radio)`
-	height: 30px;
-	flex: 0 0 auto;
-	margin: 0 5px;
-
-	&:focus {
-		z-index: 10;
-	}
-`;
-
-export const Separator = styled.div`
-	flex: 0 0 1px;
-	height: 30px;
-	margin: 0 16px;
-	background-color: ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-`;
-
-export const Spacer = styled.div`
-	flex: 100%;
-`;
-
-export const ToolbarLabel = styled.div`
-	font-family: ${getThemeProp(["fonts", "base"], "sans-serif")};
-	font-size: 14px;
-	color: ${getThemeProp(["colors", "application", "base"], "#999999")};
-`;
-
-// Define the dictionary so we can use it below
-export const toolComponents = {};
-
-// Turns a tool definition into a rendered React element
-const renderToolComponent = ({ key, type, subType, ...props }) => {
-	const Comp = toolComponents[type];
-	return <Comp key={key} type={subType} {...props} />;
-};
-
-// Fill in the tool types
-toolComponents.input = ToolbarInput;
-toolComponents.input.displayName = "ToolInput";
-
-toolComponents.button = ({ label = {}, ...props }) => <ToolbarButton {...props} icon={label.icon} label={label.text} />;
-toolComponents.button.displayName = "ToolButton";
-
-toolComponents.radio = props => {
-	const radioProps = new RadioProps();
-
-	radioProps.set(RadioProps.propNames.name, props?.name);
-	radioProps.set(RadioProps.propNames.label, props?.label);
-	radioProps.set(RadioProps.propNames.defaultVal, props?.defaultVal);
-	radioProps.set(RadioProps.propNames.value, props?.value);
-	radioProps.set(RadioProps.propNames.update, props?.update);
-	radioProps.set(RadioProps.propNames.radios, props?.radios);
-	radioProps.set(RadioProps.propNames.row, props?.row);
-	radioProps.set(RadioProps.propNames.error, props?.error);
-	return (
-		<ToolbarRadioWrapper>
-			<ToolbarRadio radioProps={radioProps} />
-		</ToolbarRadioWrapper>
-	);
-};
-toolComponents.radio.displayName = "ToolRadio";
-
-toolComponents.group = ({ tools }) => <ToolGroup>{tools.map(renderToolComponent)}</ToolGroup>;
-toolComponents.group.displayName = "ToolGroup";
-
-toolComponents.spacer = () => <Spacer />;
-toolComponents.spacer.displayName = "ToolSpacer";
-
-toolComponents.separator = () => <Separator />;
-toolComponents.separator.displayName = "ToolSeparator";
-
-export const Toolbar = ({ tools }) => <Bar>{tools.map(renderToolComponent)}</Bar>;
-
-toolComponents.label = ({ label }) => (
-	<ToolbarLabel>
-		<Text message={label} />
-	</ToolbarLabel>
-);
-toolComponents.label.displayName = "ToolLabel";
-
-// These tools are allowed inside tool groups
-const ptTool = pt.oneOfType([
-	pt.shape({
-		type: pt.oneOf(["input"]).isRequired,
-	}),
-	pt.shape({
-		type: pt.oneOf(["radio"]).isRequired,
-	}),
-	pt.shape({
-		type: pt.oneOf(["button"]).isRequired,
-		label: pt.oneOfType([
-			pt.shape({ icon: pt.string.isRequired, text: ptLabel }),
-			pt.shape({ icon: pt.string, text: ptLabel.isRequired }),
-		]).isRequired,
-	}),
-]);
-
-// These tools are only allowed outside groups
-const ptToolWithGroup = pt.oneOfType([
-	ptTool,
-	pt.shape({
-		type: pt.oneOf(["label"]).isRequired,
-		label: ptLabel.isRequired,
-	}),
-	pt.shape({ type: pt.oneOf(["separator", "spacer"]).isRequired }),
-	pt.shape({
-		type: pt.oneOf(["group"]).isRequired,
-		tools: pt.arrayOf(ptTool),
-	}),
-]);
-
-Toolbar.propTypes = {
-	tools: pt.arrayOf(ptToolWithGroup).isRequired,
-};
-
-export default Toolbar;