orc-shared 5.10.0-dev.1 → 5.10.0-dev.10

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

@@ -3,10 +3,11 @@ import Immutable from "immutable";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
 import { mount } from "unexpected-reaction";
+import { StylesProvider } from "@material-ui/core";
+import { generateClassName } from "../../utils/testUtils";
 import { FormContext } from "./Form";
 import Fieldset from "./Fieldset";
 import Combination from "./Combination";
-import FieldList from "./FieldList";
 import InputField from "./InputField";
 import FieldElements from "./FieldElements";
 
@@ -28,112 +29,100 @@ describe("FieldElements", () => {
 		};
 	});
 
-	it("renders a list of field elements, handling fieldsets, combination fields, and lists", () =>
+	it("renders a list of field elements, handling fieldsets, combination fields", () =>
 		expect(
 			mount(
 				<Provider store={store}>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values }}>
-							<FieldElements
-								fields={[
-									{
-										type: "ReadOnly",
-										name: "thing",
-										someProp: 12.5,
-									},
-									{
-										type: "Fieldset",
-										label: "A field set",
-										fields: [
-											{
-												type: "NumberInput",
-												name: "stuff",
-											},
-										],
-									},
-									{
-										type: "Combination",
-										name: "combo",
-										label: "Combined fields",
-										proportions: ["300px", 100],
-										fields: [
-											{ type: "CheckboxInput", name: "item" },
-											{ type: "EmailInput", name: "otheritem" },
-										],
-									},
-									{
-										type: "List",
-										name: "list",
-										rowCount: 15,
-										someProp: "Is this way",
-										rowField: { name: "listStuff", type: "TextInput" },
-									},
-								]}
-								getUpdater={getUpdater}
-							/>
-						</FormContext.Provider>
-					</IntlProvider>
-				</Provider>,
-			).childNodes,
-			"to satisfy",
-			[
-				<Provider store={store}>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values }}>
-							<InputField
-								key="thing"
-								name="thing"
-								type="ReadOnly"
-								update={expect.it("when called", "to equal", "thing")}
-								someProp={12.5}
-							/>
-						</FormContext.Provider>
-					</IntlProvider>
-				</Provider>,
-				<Provider store={store}>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values }}>
-							<Fieldset label="A field set">
+					<StylesProvider generateClassName={generateClassName}>
+						<IntlProvider locale="en">
+							<FormContext.Provider value={{ values }}>
 								<FieldElements
 									fields={[
 										{
-											type: "NumberInput",
-											name: "stuff",
+											type: "ReadOnly",
+											name: "thing",
+											someProp: 12.5,
+										},
+										{
+											type: "Fieldset",
+											label: {
+												id: "fieldset",
+												defaultMessage: "A field set",
+											},
+											fields: [
+												{
+													type: "NumberInput",
+													name: "stuff",
+												},
+											],
+										},
+										{
+											type: "Combination",
+											name: "combo",
+											label: {
+												id: "CombinedFields",
+												defaultMessage: "Combined fields",
+											},
+											proportions: ["300px", 100],
+											fields: [{ type: "CheckboxInput", name: "item" }],
 										},
 									]}
 									getUpdater={getUpdater}
 								/>
-							</Fieldset>
-						</FormContext.Provider>
-					</IntlProvider>
+							</FormContext.Provider>
+						</IntlProvider>
+					</StylesProvider>
 				</Provider>,
+			).childNodes,
+			"to satisfy",
+			[
 				<Provider store={store}>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values }}>
-							<Combination label="Combined fields" proportions={["300px", 100]}>
-								<FieldElements
-									fields={[
-										{ type: "CheckboxInput", name: "item" },
-										{ type: "EmailInput", name: "otheritem" },
-									]}
-									getUpdater={getUpdater}
+					<StylesProvider generateClassName={generateClassName}>
+						<IntlProvider locale="en">
+							<FormContext.Provider value={{ values }}>
+								<InputField
+									key="thing"
+									name="thing"
+									type="ReadOnly"
+									update={expect.it("when called", "to equal", "thing")}
+									someProp={12.5}
 								/>
-							</Combination>
-						</FormContext.Provider>
-					</IntlProvider>
+							</FormContext.Provider>
+						</IntlProvider>
+					</StylesProvider>
 				</Provider>,
 				<Provider store={store}>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values }}>
-							<FieldList
-								name="list"
-								rowField={{ name: "listStuff", type: "TextInput" }}
-								getUpdater={getUpdater}
-								rowCount={15}
-								someProp="Is this way"
-							/>
-						</FormContext.Provider>
-					</IntlProvider>
+					<StylesProvider generateClassName={generateClassName}>
+						<IntlProvider locale="en">
+							<FormContext.Provider value={{ values }}>
+								<Fieldset label={{ id: "FieldSet", defaultMessage: "A field set" }}>
+									<FieldElements
+										fields={[
+											{
+												type: "NumberInput",
+												name: "stuff",
+											},
+										]}
+										getUpdater={getUpdater}
+									/>
+								</Fieldset>
+							</FormContext.Provider>
+						</IntlProvider>
+					</StylesProvider>
+				</Provider>,
+				<Provider store={store}>
+					<StylesProvider generateClassName={generateClassName}>
+						<IntlProvider locale="en">
+							<FormContext.Provider value={{ values }}>
+								<Combination
+									label={{ id: "CombinedFields", defaultMessage: "Combined fields" }}
+									proportions={["300px", 100]}
+								>
+									<FieldElements fields={[{ type: "CheckboxInput", name: "item" }]} getUpdater={getUpdater} />
+								</Combination>
+							</FormContext.Provider>
+						</IntlProvider>
+					</StylesProvider>
 				</Provider>,
 			],
 		));
@@ -141,29 +130,33 @@ describe("FieldElements", () => {
 	it("handles absent update function and values", () =>
 		expect(
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values }}>
-						<FieldElements
-							fields={[
-								{
-									type: "ReadOnly",
-									name: "thing",
-								},
-							]}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values }}>
+							<FieldElements
+								fields={[
+									{
+										type: "ReadOnly",
+										name: "thing",
+									},
+								]}
+							/>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
 			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values }}>
-						<React.Fragment>
-							<InputField name="thing" update={undefined} value={undefined} type="ReadOnly" />
-						</React.Fragment>
-					</FormContext.Provider>
-				</IntlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<IntlProvider locale="en">
+						<FormContext.Provider value={{ values }}>
+							<React.Fragment>
+								<InputField name="thing" update={undefined} value={undefined} type="ReadOnly" />
+							</React.Fragment>
+						</FormContext.Provider>
+					</IntlProvider>
+				</StylesProvider>
 			</Provider>,
 		));
 });

package/src/components/Form/Fieldset.js

@@ -1,42 +1,47 @@
 import React from "react";
-import styled from "styled-components";
-import { getThemeProp } from "../../utils";
-import Text from "../Text";
+import { makeStyles } from "@material-ui/core/styles";
+import { FormattedMessage } from "react-intl";
 
-export const FieldsetBox = styled.fieldset`
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-	align-self: stretch;
-	flex-direction: column;
-	flex-wrap: wrap;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-radius: 5px;
-	margin-top: 45px;
-	margin-left: 0;
-	margin-bottom: 0;
-	padding: 20px;
-	padding-top: 0;
-	background-color: #fafafa;
-`;
-export const Legend = styled.legend`
-	position: absolute;
-	top: -2em;
-	left: -4px;
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	font-style: italic;
-	font-size: 13px;
-	text-transform: uppercase;
-	color: ${getThemeProp(["colors", "application", "base"], "#333333")};
-`;
+const useStyles = makeStyles(theme => ({
+	fieldsetBox: {
+		position: "relative",
+		boxSizing: "border-box",
+		display: "flex",
+		alignSelf: "stretch",
+		flexDirection: "column",
+		flexWrap: "wrap",
+		border: `1px solid ${theme.palette.grey.borders}`,
+		borderRadius: 5,
+		marginTop: 45,
+		marginLeft: 0,
+		marginBottom: 0,
+		padding: 20,
+		paddingTop: 0,
+		backgroundColor: "#fafafa",
+	},
+	legend: {
+		position: "absolute",
+		top: "-2em",
+		left: -4,
+		fontFamily: theme.typography.button.fontFamily,
+		fontStyle: "italic",
+		fontSize: 13,
+		textTransform: "uppercase",
+		color: theme.palette.primary.main,
+	},
+}));
 
-const Fieldset = ({ label, children }) => (
-	<FieldsetBox>
-		<Legend>
-			<Text message={label} />
-		</Legend>
-		{children}
-	</FieldsetBox>
-);
+const Fieldset = ({ label, children }) => {
+	const classes = useStyles();
+
+	return (
+		<fieldset className={classes.fieldsetBox}>
+			<legend className={classes.legend}>
+				<FormattedMessage {...label} />
+			</legend>
+			{children}
+		</fieldset>
+	);
+};
 
 export default Fieldset;

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

@@ -1,6 +1,11 @@
 import React from "react";
 import { Provider } from "react-redux";
-import Fieldset, { FieldsetBox, Legend } from "./Fieldset";
+import { IntlProvider } from "react-intl";
+import Fieldset from "./Fieldset";
+import { extractMessages } from "../../utils/testUtils";
+import sharedMessages from "../../sharedMessages";
+
+const messages = extractMessages(sharedMessages);
 
 describe("Fieldset", () => {
 	it("works", () =>
@@ -12,15 +17,17 @@ describe("Fieldset", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Fieldset label="A field set">
-					<div id="child" />
-				</Fieldset>
+				<IntlProvider locale="en" messages={messages}>
+					<Fieldset label={{ id: "fieldset.label", defaultMessage: "A field set" }}>
+						<div id="child" />
+					</Fieldset>
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldsetBox>
-				<Legend>A field set</Legend>
+			<fieldset>
+				<legend>A field set</legend>
 				<div id="child" />
-			</FieldsetBox>,
+			</fieldset>,
 		));
 });

package/src/components/Form/Form.js

@@ -1,14 +1,16 @@
 import React, { createContext } from "react";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
 import pt from "prop-types";
 import withScrollBox from "../../hocs/withScrollBox";
 import Form from "./FormElement";
 import FieldElements from "./FieldElements";
 
-export const Wrapper = styled.div`
-	display: flex;
-	margin-bottom: 20px;
-`;
+const useStyles = makeStyles(() => ({
+	wrapper: {
+		display: "flex",
+		marginBottom: 20,
+	},
+}));
 
 const splitFields = (fields, cols) => {
 	if (cols <= 1) return [fields];
@@ -27,8 +29,10 @@ export const FormContext = createContext();
 FormContext.displayName = "FormContext";
 
 export const FormPage = ({ formName, cols = [1, 1, 1], getUpdater, fields, values, wide }) => {
+	const classes = useStyles();
 	let colSpans = wide ? [] : cols;
 	const colFields = splitFields(fields, colSpans.length);
+
 	return (
 		<FormContext.Provider
 			value={{
@@ -36,13 +40,13 @@ export const FormPage = ({ formName, cols = [1, 1, 1], getUpdater, fields, value
 				formName,
 			}}
 		>
-			<Wrapper>
+			<div className={classes.wrapper}>
 				{colFields.map((fields, index) => (
 					<Form key={index} spanWidth={colSpans[index] || 1}>
 						<FieldElements getUpdater={getUpdater} fields={fields} />
 					</Form>
 				))}
-			</Wrapper>
+			</div>
 		</FormContext.Provider>
 	);
 };

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;