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

package/src/components/Form/Form.test.js

@@ -1,11 +1,14 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
+import { generateClassName } from "../../utils/testUtils";
 import { IntlProvider } from "react-intl";
 import Form from "./FormElement";
 import FieldElements from "./FieldElements";
-import { FieldBox, Label } from "./Field";
-import { FormPage, Wrapper, FormContext } from "./Form";
+import Field from "./Field";
+import { FormPage, FormContext } from "./Form";
+import { StylesProvider } from "@material-ui/core";
+import { TextInput } from "./Inputs/Text";
 
 describe("FormPage", () => {
 	let state, store, getUpdater, fields, manyFields, values;
@@ -36,94 +39,110 @@ describe("FormPage", () => {
 	it("renders a form with a single field", () =>
 		expect(
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormPage formName="testForm" fields={fields} getUpdater={getUpdater} values={values} />
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormPage formName="testForm" fields={fields} getUpdater={getUpdater} values={values} />
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values, formName: "testForm" }}>
-						<Wrapper>
-							<Form spanWidth={1}>
-								<FieldBox>
-									<Label>A text</Label>
-									<input value="foo" id="text1" onChange={() => {}} data-test-id="testForm_text1" />
-								</FieldBox>
-							</Form>
-						</Wrapper>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values, formName: "testForm" }}>
+							<div>
+								<Form spanWidth={1}>
+									<Field>
+										<label>A text</label>
+										<TextInput value="foo" />
+									</Field>
+								</Form>
+							</div>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 		));
 
 	it("still respects 'wide' flag", () =>
 		expect(
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormPage wide fields={fields} getUpdater={getUpdater} values={values} />
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormPage wide fields={fields} getUpdater={getUpdater} values={values} />
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values }}>
-						<Wrapper>
-							<Form spanWidth={1}>
-								<FieldElements getUpdater={getUpdater} fields={fields} />
-							</Form>
-						</Wrapper>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values }}>
+							<div>
+								<Form spanWidth={1}>
+									<FieldElements getUpdater={getUpdater} fields={fields} />
+								</Form>
+							</div>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 		));
 
 	it("still respects 'wide' flag with multiple fields", () =>
 		expect(
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormPage wide cols={[2, 1]} fields={manyFields} getUpdater={getUpdater} values={values} />
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormPage wide cols={[2, 1]} fields={manyFields} getUpdater={getUpdater} values={values} />
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values }}>
-						<Wrapper>
-							<Form spanWidth={1}>
-								<FieldElements getUpdater={getUpdater} fields={manyFields} />
-							</Form>
-						</Wrapper>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values }}>
+							<div>
+								<Form spanWidth={1}>
+									<FieldElements getUpdater={getUpdater} fields={manyFields} />
+								</Form>
+							</div>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 		));
 
 	it("renders a form with a multiple fields", () =>
 		expect(
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormPage cols={[2, 1]} fields={manyFields} getUpdater={getUpdater} values={values} />
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormPage cols={[2, 1]} fields={manyFields} getUpdater={getUpdater} values={values} />
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values }}>
-						<Wrapper>
-							<Form spanWidth={2}>
-								<FieldElements getUpdater={getUpdater} fields={manyFields.slice(0, 5)} />
-							</Form>
-							<Form spanWidth={1}>
-								<FieldElements getUpdater={getUpdater} fields={manyFields.slice(5, 10)} />
-							</Form>
-						</Wrapper>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values }}>
+							<div>
+								<Form spanWidth={2}>
+									<FieldElements getUpdater={getUpdater} fields={manyFields.slice(0, 5)} />
+								</Form>
+								<Form spanWidth={1}>
+									<FieldElements getUpdater={getUpdater} fields={manyFields.slice(5, 10)} />
+								</Form>
+							</div>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 		));
 });

package/src/components/Form/FormElement.js

@@ -1,20 +1,28 @@
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
+import React from "react";
 
-const Form = styled.div`
-	box-sizing: border-box;
-	flex-basis: 0;
-	flex-shrink: 0;
-	flex-grow: ${({ spanWidth = 1 }) => spanWidth};
-	display: flex;
-	flex-direction: column;
-	padding: 0;
-	padding-right: 20px;
-	padding-top: 0;
-	font-size: 12px;
+const useStyles = makeStyles(() => ({
+	form: {
+		boxSizing: "border-box",
+		flexBasis: 0,
+		flexShrink: 0,
+		display: "flex",
+		flexDirection: "column",
+		padding: 0,
+		paddingRight: 20,
+		paddingTop: 0,
+		fontSize: 12,
+		flexGrow: props => props.spanWidth,
+		"&:first-child": {
+			paddingLeft: 20,
+		},
+	},
+}));
 
-	&:first-child {
-		padding-left: 20px;
-	}
-`;
+const Form = ({ spanWidth = 1, children }) => {
+	const classes = useStyles({ spanWidth });
+
+	return <div className={classes.form}>{children}</div>;
+};
 
 export default Form;

package/src/components/Form/InputField.test.js

@@ -89,7 +89,7 @@ describe("InputField", () => {
 	it("gives error message if given no type", () =>
 		expect(
 			<SubjectWrapper store={store} values={{}}>
-				<InputField label="A bad field" otherProp />
+				<InputField label={{ id: "BadField", defaultMessage: "A bad field" }} otherProp />
 			</SubjectWrapper>,
 			"when mounted",
 			"to satisfy",
@@ -100,12 +100,7 @@ describe("InputField", () => {
 
 	Object.keys(inputs).forEach(type => {
 		describe("input type " + type, () => {
-			let Input,
-				val,
-				emptyVal,
-				target,
-				options,
-				center = false;
+			let Input, val, emptyVal, target, options;
 			beforeEach(() => {
 				Input = inputs[type];
 				target = "input";
@@ -123,16 +118,12 @@ describe("InputField", () => {
 						val = "thing";
 					}
 					target = "select";
-				} else if (type === "CheckboxInput" || type === "SwitchInput") {
+				} else if (type === "SwitchInput") {
 					val = true;
-					center = true;
-				} else if (type === "TranslationInput") {
-					val = { "en-US": "Words", "fr-CA": "Des mots" };
-					emptyVal = undefined;
 				} else if (type === "DateInput") {
 					val = "2014-05-22";
 					emptyVal = "";
-				} else if (type === "Button" || type === "SmallButton") {
+				} else if (type === "Button") {
 					target = "button";
 				}
 			});
@@ -143,7 +134,7 @@ describe("InputField", () => {
 						<InputField
 							name="fieldName"
 							type={type}
-							label={`A ${type} field`}
+							label={{ id: "BadField", defaultMessage: "A bad field" }}
 							placeholder={{
 								id: "foo.bar",
 								defaultMessage: "Placeholder",
@@ -155,7 +146,7 @@ describe("InputField", () => {
 					"when mounted",
 					"to satisfy",
 					<PatternWrapper store={store}>
-						<Field wasBlurred center={center} id="fieldName" label={`A ${type} field`}>
+						<Field wasBlurred id="fieldName" label={{ id: "BadField", defaultMessage: "A bad field" }}>
 							<Input
 								id="fieldName"
 								data-test-id="field_fieldName"
@@ -174,7 +165,7 @@ describe("InputField", () => {
 						<InputField
 							name="fieldName"
 							type={type}
-							label={`A ${type} field`}
+							label={{ id: "BadField", defaultMessage: "A bad field" }}
 							placeholder={{
 								id: "foo.bar",
 								defaultMessage: "Placeholder",
@@ -186,7 +177,7 @@ describe("InputField", () => {
 					"when mounted",
 					"to satisfy",
 					<PatternWrapper store={store}>
-						<Field center={center} id="fieldName" label={`A ${type} field`}>
+						<Field id="fieldName" label={{ id: "BadField", defaultMessage: "A bad field" }}>
 							<Input
 								id="fieldName"
 								data-test-id="testForm_fieldName"
@@ -199,7 +190,7 @@ describe("InputField", () => {
 					</PatternWrapper>,
 				));
 
-			const cannotRequire = ["CheckboxInput", "SwitchInput", "LineLabel", "ReadOnly"];
+			const cannotRequire = ["SwitchInput", "LineLabel", "ReadOnly", "Selector"];
 			if (!cannotRequire.includes(type)) {
 				it("renders a required field", () =>
 					expect(
@@ -207,12 +198,13 @@ describe("InputField", () => {
 							<InputField
 								name="fieldName"
 								type={type}
-								label={`A ${type} field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 								placeholder={{
 									id: "foo.bar",
 									defaultMessage: "Placeholder",
 								}}
 								required={`A ${type} field is a required field`}
+								update={() => {}}
 								options={options}
 								otherProp
 							/>
@@ -224,10 +216,9 @@ describe("InputField", () => {
 						<SubjectWrapper store={store} values={{ fieldName: val }}>
 							<Field
 								wasBlurred
-								center={center}
 								id="fieldName"
-								label={`A ${type} field`}
 								required={`A ${type} field is a required field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 							>
 								<Input id="fieldName" value={val} otherProp placeholder="Placeholder" options={options} required />
 							</Field>
@@ -240,7 +231,7 @@ describe("InputField", () => {
 							<InputField
 								name="fieldName"
 								type={type}
-								label={`A ${type} field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 								placeholder={{
 									id: "foo.bar",
 									defaultMessage: "Placeholder",
@@ -255,10 +246,9 @@ describe("InputField", () => {
 						<PatternWrapper store={store}>
 							<Field
 								wasBlurred
-								center={center}
 								id="fieldName"
-								label={`A ${type} field`}
 								required={`A ${type} field is a required field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 								invalid
 							>
 								<Input id="fieldName" value={emptyVal} otherProp placeholder="Placeholder" options={options} required />
@@ -272,7 +262,7 @@ describe("InputField", () => {
 							<InputField
 								name="fieldName"
 								type={type}
-								label={`A ${type} field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 								placeholder={{
 									id: "foo.bar",
 									defaultMessage: "Placeholder",
@@ -287,10 +277,9 @@ describe("InputField", () => {
 						<PatternWrapper store={store}>
 							<Field
 								wasBlurred
-								center={center}
 								id="fieldName"
-								label={`A ${type} field`}
 								required={`A ${type} field is a required field`}
+								label={{ id: "BadField", defaultMessage: "A bad field" }}
 								invalid
 							>
 								<Input
@@ -310,17 +299,22 @@ describe("InputField", () => {
 			it("modifies the field name if inside a list", () =>
 				expect(
 					<SubjectWrapper store={store} values={{ fieldName: val }} index={12}>
-						<InputField name="fieldName" type={type} label={`A ${type} field`} options={options} otherProp />
+						<InputField
+							name="fieldName"
+							type={type}
+							label={{ id: "BadField", defaultMessage: "A bad field" }}
+							options={options}
+							otherProp
+						/>
 					</SubjectWrapper>,
 					"when mounted",
 					"to satisfy",
 					<PatternWrapper store={store}>
 						<Field
 							wasBlurred
-							center={center}
 							id="fieldName[12]"
 							data-test-id="field_fieldName[12]"
-							label={`A ${type} field`}
+							label={{ id: "BadField", defaultMessage: "A bad field" }}
 						>
 							<Input id="fieldName[12]" value={val} otherProp options={options} />
 						</Field>

package/src/components/Form/Inputs/Button.js

@@ -1,21 +1,65 @@
 import React from "react";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
 import withId from "../../../hocs/withId";
-import IconButton from "../../IconButton";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
+import { FormattedMessage } from "react-intl";
 
-export const PositionedButton = styled(IconButton)`
-	width: max-content;
-	position: relative;
-`;
+const useStyles = makeStyles(theme => ({
+	positionedButton: {
+		width: "max-content",
+		position: "relative",
+		padding: "6px 14px !important",
+		"&:hover": {
+			borderColor: "#4fa1f0",
+			boxShadow: "0 0 4px #4fa1f0",
+			outline: "none",
+			backgroundColor: "#f7f7f7 !important",
+		},
+		"&:disabled": {
+			opacity: 0.6,
+			backgroundColor: "#f7f7f7 !important",
+		},
+	},
+	buttonIcon: {
+		height: "1em",
+		width: "1em",
+		fill: "currentColor",
+		stroke: "currentColor",
+		fontSize: "1.23em !important",
+	},
+	primaryButton: {
+		color: `${theme.palette.primary.main} !important`,
+		border: `1px solid ${theme.palette.primary.main} !important`,
+		backgroundColor: "#fff !important",
+		"&:hover": {
+			backgroundColor: "#fff !important",
+		},
+	},
+	primaryIcon: {
+		color: `${theme.palette.primary.main} !important`,
+	},
+}));
+
+const FormButton = ({ id, icon, buttonText, update, primary, ...props }) => {
+	const classes = useStyles();
+
+	return (
+		<Button
+			id={id}
+			className={`${classes.positionedButton} ${primary ? classes.primaryButton : ""}`}
+			onClick={update}
+			variant="outlined"
+			startIcon={
+				icon ? <Icon id={icon} className={`${classes.buttonIcon} ${primary ? classes.primaryIcon : ""}`} /> : null
+			}
+			{...props}
+		>
+			{buttonText ? <FormattedMessage {...buttonText} /> : null}
+		</Button>
+	);
+};
 
-export const FormButton = ({
-	id,
-	icon,
-	buttonText,
-	update,
-	"aria-labelledby": aria, // Not meaningful for buttons
-	...props
-}) => <PositionedButton id={id} {...props} onClick={update} icon={icon} label={buttonText} />;
 FormButton.displayName = "FormButton";
 
 export default withId("formbutton")(FormButton);

package/src/components/Form/Inputs/Button.test.js

@@ -1,6 +1,9 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { FormButton, PositionedButton } from "./Button";
+import { IntlProvider } from "react-intl";
+import FormButton from "./Button";
+import Button from "@material-ui/core/Button";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
 
 describe("FormButton", () => {
 	let update;
@@ -17,7 +20,9 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<FormButton id="testId" update={update} icon="test-icon" otherProp />
+				<IntlProvider locale="en">
+					<FormButton id="testId" update={update} icon="test-icon" otherProp />
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -28,7 +33,7 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<PositionedButton id="testId" otherProp onClick={update} icon="test-icon" />
+				<Button id="testId" otherProp onClick={update} startIcon={<Icon id="test-icon" />} variant="outlined"></Button>
 			</Provider>,
 		));
 
@@ -41,7 +46,14 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<FormButton id="testId" update={update} buttonText="Push this" otherProp />
+				<IntlProvider locale="en">
+					<FormButton
+						id="testId"
+						update={update}
+						buttonText={{ id: "PushThis", defaultMessage: "Push this" }}
+						otherProp
+					/>
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -52,7 +64,9 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<PositionedButton id="testId" otherProp onClick={update} label="Push this" />
+				<Button id="testId" otherProp onClick={update} variant="outlined">
+					Push this
+				</Button>
 			</Provider>,
 		));
 
@@ -65,7 +79,16 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<FormButton id="testId" update={update} icon="test-icon" buttonText="Push this" otherProp />
+				<IntlProvider locale="en">
+					<FormButton
+						id="testId"
+						update={update}
+						icon="test-icon"
+						buttonText={{ id: "PushThis", defaultMessage: "Push this" }}
+						primary
+						otherProp
+					/>
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -76,7 +99,9 @@ describe("FormButton", () => {
 					getState: () => ({}),
 				}}
 			>
-				<PositionedButton id="testId" otherProp onClick={update} icon="test-icon" label="Push this" />
+				<Button id="testId" otherProp onClick={update} startIcon={<Icon id="test-icon" />} variant="outlined">
+					Push this
+				</Button>
 			</Provider>,
 		));
 });

package/src/components/Form/Inputs/Inputs.test.js

@@ -4,18 +4,11 @@ describe("Input field collection", () => {
 	it("contains a list of named inputs", () =>
 		expect(inputs, "to exhaustively satisfy", {
 			Button: expect.it("to be a function"),
-			CheckboxInput: expect.it("to be a function"),
 			DateInput: expect.it("to be a function"),
-			EmailInput: expect.it("to be a function"),
-			NumberInput: expect.it("to be a function"),
 			MultiSelector: expect.it("to be a function"),
-			LineLabel: expect.it("to be a function"),
 			ReadOnly: expect.it("to be a function"),
 			Selector: expect.it("to be a function"),
-			SmallButton: expect.it("to be a function"),
 			SwitchInput: expect.it("to be a function"),
 			TextInput: expect.it("to be a function"),
-			TimeInput: expect.it("to be a function"),
-			TranslationInput: expect.it("to be a function"),
 		}));
 });

package/src/components/Form/Inputs/ReadOnly.js

@@ -1,34 +1,40 @@
 import React from "react";
-import styled from "styled-components";
-import Text from "../../Text";
+import { makeStyles } from "@material-ui/core/styles";
+import { FormattedMessage } from "react-intl";
 
-export const CenterWrapper = styled.div`
-	min-height: 30px;
-	display: flex;
-	align-items: center;
-`;
+const useStyles = makeStyles(() => ({
+	centerWrapper: {
+		minHeight: 30,
+		display: "flex",
+		alignItems: "center",
+	},
+	readOnlyBlock: {
+		margin: 0,
+	},
+	label: {
+		margin: 0,
+		fontSize: 16,
+	},
+}));
 
-export const ReadOnlyBlock = styled.p`
-	margin: 0;
-`;
+export const ReadOnly = ({ value }) => {
+	const classes = useStyles();
 
-export const ReadOnly = ({ value }) => (
-	<CenterWrapper>
-		<ReadOnlyBlock>
-			<Text message={value} />
-		</ReadOnlyBlock>
-	</CenterWrapper>
-);
+	return (
+		<div className={classes.centerWrapper}>
+			<p className={classes.readOnlyBlock}>{typeof value === "string" ? value : <FormattedMessage {...value} />}</p>
+		</div>
+	);
+};
 
-export const Label = styled.p`
-	margin: 0;
-	font-size: 16px;
-`;
+export const LineLabel = ({ value }) => {
+	const classes = useStyles();
 
-export const LineLabel = ({ value }) => (
-	<CenterWrapper>
-		<Label>
-			<Text message={value} />
-		</Label>
-	</CenterWrapper>
-);
+	return (
+		<div className={classes.centerWrapper}>
+			<p className={classes.label}>{typeof value === "string" ? value : <FormattedMessage {...value} />}</p>
+		</div>
+	);
+};
+
+export default ReadOnly;