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

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Provider } from "react-redux";
-import Field, { FieldBox, Label, RequiredNotice } from "./Field";
+import { IntlProvider } from "react-intl";
+import Field from "./Field";
 
 describe("Field", () => {
 	it("renders a field with a label", () =>
@@ -18,12 +19,12 @@ describe("Field", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
-				<Label htmlFor="field" id="field_label">
+			<div>
+				<label htmlFor="field" id="field_label">
 					A test
-				</Label>
+				</label>
 				<div id="child" />
-			</FieldBox>,
+			</div>,
 		));
 
 	it("renders a required field with a label", () =>
@@ -41,12 +42,12 @@ describe("Field", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
-				<Label htmlFor="field" id="field_label" required>
+			<div>
+				<label htmlFor="field" id="field_label">
 					A test
-				</Label>
+				</label>
 				<div id="child" />
-			</FieldBox>,
+			</div>,
 		));
 
 	it("renders a missing required field with a label", () =>
@@ -58,19 +59,21 @@ describe("Field", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Field id="field" label="A test" required="Required" invalid>
-					<div id="child" />
-				</Field>
+				<IntlProvider locale="en">
+					<Field id="field" label="A test" required={{ id: "required", defaultMessage: "Required" }} invalid>
+						<div id="child" />
+					</Field>
+				</IntlProvider>
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
-				<Label htmlFor="field" id="field_label" required invalid>
+			<div>
+				<label htmlFor="field" id="field_label">
 					A test
-				</Label>
+				</label>
 				<div id="child" />
-				<RequiredNotice>Required</RequiredNotice>
-			</FieldBox>,
+				<div>Required</div>
+			</div>,
 		));
 
 	it("renders a field with no label", () =>
@@ -80,9 +83,9 @@ describe("Field", () => {
 			</Field>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
+			<div>
 				<div id="child" />
-			</FieldBox>,
+			</div>,
 		));
 
 	it("renders only its label when flagged", () =>
@@ -100,11 +103,9 @@ describe("Field", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
-				<Label labelOnly id="field_label" required>
-					A test
-				</Label>
-			</FieldBox>,
+			<div>
+				<label id="field_label">A test</label>
+			</div>,
 		));
 
 	it("renders a field with a centered label", () =>
@@ -122,34 +123,11 @@ describe("Field", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<FieldBox>
-				<Label htmlFor="field" center id="field_label">
+			<div>
+				<label htmlFor="field" id="field_label">
 					A test
-				</Label>
+				</label>
 				<div id="child" />
-			</FieldBox>,
-		));
-});
-
-describe("Label", () => {
-	it("renders a mark on required labels", () =>
-		expect(
-			<Label required>A text</Label>,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			'::after {content: " *";',
-		));
-
-	it("when not flagged renders a label with bottom margin", () =>
-		expect(<Label>A text</Label>, "when mounted", "to have style rules satisfying", "to contain", "margin-bottom:"));
-
-	it("when flagged renders a label without margin", () =>
-		expect(
-			<Label labelOnly>A text</Label>,
-			"when mounted",
-			"to have style rules satisfying",
-			"not to contain",
-			"margin-bottom",
+			</div>,
 		));
 });

package/src/components/Form/FieldElements.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Fieldset from "./Fieldset";
 import Combination from "./Combination";
-import FieldList from "./FieldList";
 import InputField from "./InputField";
 
 // // Multiple column fields?
@@ -25,19 +24,6 @@ const FieldElements = ({ fields, labelOnly, getUpdater = () => {}, ...elementPro
 						</Combination>
 					);
 				}
-				case "List": {
-					return (
-						<FieldList
-							key={key}
-							name={name}
-							label={label}
-							getUpdater={getUpdater}
-							rowCount={props.rowCount}
-							{...elementProps}
-							{...props}
-						/>
-					);
-				}
 				default: {
 					return (
 						<InputField

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