orc-shared 5.10.2-dev.4 → 5.99.0-dev.2

package/src/components/Checkbox.js

@@ -1,63 +0,0 @@
-import React from "react";
-import styled, { css } from "styled-components";
-import { getThemeProp, ifFlag } from "../utils";
-import { tint } from "polished";
-import withId from "../hocs/withId";
-
-export const Wrapper = styled.label`
-	padding: 10px 15px;
-	margin: -10px -15px;
-`;
-
-export const ContainedInput = styled.input.attrs(() => ({ type: "checkbox" }))`
-	position: absolute;
-	opacity: 0;
-	z-index: 10;
-	margin: 0;
-`;
-
-export const Cover = styled.label`
-	display: inline-block;
-	position: relative;
-	height: 14px;
-	width: 14px;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-radius: 3px;
-
-	${ContainedInput}:active + &,
-	${ContainedInput}:focus + & {
-		box-shadow: 0px 0px 1px 0px ${getThemeProp(["colors", "application", "base"], "#777", color => tint(0.05, color))};
-		border-color: ${getThemeProp(["colors", "application", "base"], "#777")};
-	}
-
-	${ifFlag(
-		"value",
-		css`
-			background-color: ${getThemeProp(["colors", "application", "base"], "#777", color => tint(0.05, color))};
-			&::after {
-				content: "✔";
-				font-size: 12px;
-				line-height: 1;
-				position: absolute;
-				top: 1px;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				color: white;
-				text-align: center;
-			}
-		`,
-		css`
-			background-color: white;
-		`,
-	)};
-`;
-
-export const Checkbox = ({ value, className, id, ...otherProps }) => (
-	<Wrapper className={className} htmlFor={id}>
-		<ContainedInput value={value} id={id} {...otherProps} />
-		<Cover value={value} htmlFor={id} />
-	</Wrapper>
-);
-
-export default withId("checkbox")(Checkbox);

package/src/components/Checkbox.test.js

@@ -1,122 +0,0 @@
-import React from "react";
-import { mount } from "unexpected-reaction";
-import { getClassSelector, getStyledClassSelector } from "../utils/testUtils";
-import { Checkbox, Wrapper, ContainedInput, Cover } from "./Checkbox";
-
-describe("Checkbox", () => {
-	it("renders an input and a label", () =>
-		expect(
-			<Checkbox id="foo" value={true} random="stuff" />,
-			"when mounted",
-			"to satisfy",
-			<Wrapper htmlFor="foo">
-				<ContainedInput id="foo" value={true} random="stuff" />
-				<Cover htmlFor="foo" value={true} />
-			</Wrapper>,
-		));
-});
-
-describe("ContainedInput", () => {
-	it("renders an input of type checkbox", () =>
-		expect(<ContainedInput />, "when mounted", "to satisfy", <input type="checkbox" />));
-});
-
-describe("Cover", () => {
-	it("sets a highlight when input is focused or active", () => {
-		const inputSelector = getStyledClassSelector(ContainedInput);
-		const coverSelector = getClassSelector(<Cover />, 1); // Get the generated class name
-		mount(<Cover />);
-		return expect(
-			coverSelector,
-			"as a selector to have style rules",
-			expect.it(
-				"to contain",
-				`${inputSelector}:active + ${coverSelector},` +
-					`${inputSelector}:focus + ${coverSelector}` +
-					" {box-shadow: 0px 0px 1px 0px #7d7d7d; border-color: #777;}",
-			),
-		);
-	});
-
-	it("sets a highlight when input is focused or active, when checked", () => {
-		const inputSelector = getStyledClassSelector(ContainedInput);
-		const coverSelector = getClassSelector(<Cover value={true} />, 1); // Get the generated class name
-		mount(<Cover value={true} />);
-		return expect(
-			coverSelector,
-			"as a selector to have style rules",
-			expect.it(
-				"to contain",
-				`${inputSelector}:active + ${coverSelector},` +
-					`${inputSelector}:focus + ${coverSelector}` +
-					" {box-shadow: 0px 0px 1px 0px #7d7d7d; border-color: #777;}",
-			),
-		);
-	});
-
-	it("sets a clear background when not checked", () =>
-		expect(<Cover />, "when mounted", "to have style rules satisfying", "to contain", "background-color: white;"));
-
-	it("sets a colored background and a checkmark when checked", () =>
-		expect(
-			<Cover value />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "background-color: #7d7d7d;").and("to contain", '::after {content: "✔";'),
-		));
-
-	describe("with highlight color from theme", () => {
-		let theme;
-		beforeEach(() => {
-			theme = { colors: { application: { base: "#cc0000" } } };
-		});
-
-		it("sets a highlight when input is focused or active", () => {
-			const inputSelector = getStyledClassSelector(ContainedInput);
-			const coverSelector = getClassSelector(<Cover theme={theme} />, 1); // Get the generated class name
-			mount(<Cover theme={theme} />);
-			return expect(
-				coverSelector,
-				"as a selector to have style rules",
-				expect.it(
-					"to contain",
-					`${inputSelector}:active + ${coverSelector},` +
-						`${inputSelector}:focus + ${coverSelector}` +
-						" {box-shadow: 0px 0px 1px 0px #ce0c0c; border-color: #cc0000;}",
-				),
-			);
-		});
-
-		it("sets a highlight when input is focused or active, when checked", () => {
-			const inputSelector = getStyledClassSelector(ContainedInput);
-			const coverSelector = getClassSelector(<Cover theme={theme} value={true} />, 1); // Get the generated class name
-			mount(<Cover theme={theme} value={true} />);
-			return expect(
-				coverSelector,
-				"as a selector to have style rules",
-				expect.it(
-					"to contain",
-					`${inputSelector}:active + ${coverSelector},` +
-						`${inputSelector}:focus + ${coverSelector}` +
-						" {box-shadow: 0px 0px 1px 0px #ce0c0c; border-color: #cc0000;}",
-				),
-			);
-		});
-
-		it("sets a clear background when not checked", () =>
-			expect(
-				<Cover theme={theme} />,
-				"when mounted",
-				"to have style rules satisfying",
-				expect.it("to contain", "background-color: white;").and("not to contain", "::after"),
-			));
-
-		it("sets a colored background and a checkmark when checked", () =>
-			expect(
-				<Cover theme={theme} value />,
-				"when mounted",
-				"to have style rules satisfying",
-				expect.it("to contain", "background-color: #ce0c0c;").and("to contain", '::after {content: "✔";'),
-			));
-	});
-});

package/src/components/Icon.js

@@ -1,18 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const IconSVG = styled.svg`
-	height: 1em;
-	width: 1em;
-	fill: currentColor;
-	stroke: currentColor;
-`;
-
-console.warn("Icon has been deprecated. Use Icon from MaterialUI.");
-const Icon = ({ id, ...props }) => (
-	<IconSVG {...props}>
-		<use href={`#icon-${id}`} />
-	</IconSVG>
-);
-
-export default Icon;

package/src/components/IconButton.js

@@ -1,30 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Button from "./Button";
-import Icon from "./Icon";
-import Text from "./Text";
-
-export const ButtonIcon = styled(Icon)`
-	font-size: 1.23em;
-	margin: -3px -2px;
-`;
-
-export const ButtonText = styled.span`
-	${ButtonIcon} + & {
-		margin-left: 12px;
-		vertical-align: top;
-	}
-`;
-
-const IconButton = ({ icon, label, ...props }) => (
-	<Button {...props}>
-		{icon ? <ButtonIcon id={icon} /> : null}
-		{label ? (
-			<ButtonText>
-				<Text message={label} />
-			</ButtonText>
-		) : null}
-	</Button>
-);
-
-export default IconButton;

package/src/components/IconButton.test.js

@@ -1,61 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import Button from "./Button";
-import IconButton, { ButtonIcon, ButtonText } from "./IconButton";
-
-describe("IconButton", () => {
-	it("renders a button with an icon", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IconButton icon="test" otherProp />
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Button otherProp>
-				<ButtonIcon id="test" />
-			</Button>,
-		));
-
-	it("renders a button with a label", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IconButton label="Message" random="foo" />
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Button random="foo">
-				<ButtonText>Message</ButtonText>
-			</Button>,
-		));
-
-	it("renders a button with both an icon and a label", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IconButton icon="test" label="Message" passThru={[1, 2, 3]} />
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Button passThru={[1, 2, 3]}>
-				<ButtonIcon id="test" />
-				<ButtonText>Message</ButtonText>
-			</Button>,
-		));
-});

package/src/components/Input.js

@@ -1,35 +0,0 @@
-import React, { useContext } from "react";
-import styled from "styled-components";
-import { IntlContext } from "react-intl";
-import { getThemeProp } from "../utils";
-
-const defaultFormatMessage = message => {
-	throw new Error("Attempting to translate message " + message.id + " outside of Intl context");
-};
-const maybeTranslate = (formatMessage = defaultFormatMessage, message) =>
-	message && message.id ? formatMessage(message) : message;
-
-const useIntlSoft = () => useContext(IntlContext) || {};
-
-export const InputComponent = styled.input`
-	font-family: ${getThemeProp(["fonts", "base"], "sans-serif")};
-	box-sizing: border-box;
-	flex: 0 0 auto;
-	height: 30px;
-	padding: 5px 10px;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-radius: 5px;
-
-	&:focus {
-		border-color: #4fa1f0;
-		box-shadow: 0 0 4px #4fa1f0;
-		outline: none;
-	}
-`;
-
-const Input = ({ placeholder, ...props }) => {
-	const { formatMessage } = useIntlSoft();
-	return <InputComponent {...props} placeholder={maybeTranslate(formatMessage, placeholder)} />;
-};
-
-export default Input;

package/src/components/Input.test.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { IntlProvider } from "react-intl";
-import { mount } from "unexpected-reaction";
-import { spyOnConsole } from "../utils/testUtils";
-import Input, { InputComponent } from "./Input";
-
-describe("Input", () => {
-	spyOnConsole(["error"]);
-
-	it("renders a styled input field with a plain text placeholder", () =>
-		expect(
-			<Input placeholder="A placeholder" />,
-			"when mounted",
-			"to satisfy",
-			<InputComponent placeholder="A placeholder" />,
-		));
-
-	it("renders a styled input field with a translated placeholder", () =>
-		expect(
-			<IntlProvider locale="en">
-				<Input placeholder={{ id: "placeholder", defaultMessage: "A placeholder" }} />
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<InputComponent placeholder="A placeholder" />,
-		));
-
-	it("fails on attempt to translate intl message outside an IntlProvider", () =>
-		expect(
-			() => mount(<Input placeholder={{ id: "placeholder", defaultMessage: "A placeholder" }} />),
-			"to throw",
-			"Attempting to translate message placeholder outside of Intl context",
-		));
-});

package/src/components/List/DataCell.js

@@ -1,77 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { FormattedNumber, FormattedDate, FormattedTime } from "react-intl";
-import { safeGet, getThemeProp } from "../../utils";
-import Switch from "../Switch";
-import Checkbox from "../Checkbox";
-import Text from "../Text";
-
-const arrify = thing => (Array.isArray(thing) ? thing : [thing]);
-
-const renderByType = (value, def, rowId, selected, row) => {
-	const transformedValue = def.transform ? def.transform(value) : value;
-	switch (def.type) {
-		case "custom": {
-			const Comp = def.component;
-			return <Comp {...row} {...def.funcs} />;
-		}
-		case "currency": {
-			let currency = def.currency;
-			if (Array.isArray(currency)) {
-				currency = safeGet(row, ...currency);
-			}
-			return (
-				<FormattedNumber
-					style="currency" // eslint-disable-line react/style-prop-object
-					currency={currency}
-					value={transformedValue || "0"}
-				/>
-			);
-		}
-		case "date":
-			return <FormattedDate value={transformedValue} />;
-		case "datetime":
-			return (
-				<React.Fragment>
-					<FormattedDate value={transformedValue} /> <FormattedTime value={transformedValue} />
-				</React.Fragment>
-			);
-		case "select":
-			return <Checkbox id={"select_" + rowId} value={selected} data-row-id={rowId} onChange={def.onChange} />;
-		case "switch":
-			return <Switch value={!!transformedValue} {...def.switch} data-row-id={rowId} onChange={def.onChange} />;
-		default:
-			return transformedValue ? <Text message={transformedValue} /> : null;
-	}
-};
-
-export const TableData = styled.td`
-	border: 0 solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-top-width: 1px;
-	tr:first-child & {
-		border-top-width: 0;
-	}
-	tr:last-child & {
-		border-bottom-width: 1px;
-	}
-
-	height: 20px;
-	padding: 15px 20px;
-	white-space: nowrap;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-`;
-
-const DataCell = ({ columnDef, row, rowId, selected }) => (
-	<TableData>
-		{renderByType(
-			safeGet(row, ...arrify(columnDef.fieldName)) || columnDef.defaultValue,
-			columnDef,
-			rowId,
-			selected,
-			row,
-		)}
-	</TableData>
-);
-
-export default DataCell;