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

package/dist/utils/styledPropFuncs.js

@@ -1,88 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.switchEnum = exports.ifFlag = exports.getThemeProp = void 0;
-var _safeGet = _interopRequireDefault(require("./safeGet"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-var feedPropFunc = function feedPropFunc(props) {
-  return function (value) {
-    return typeof value === "function" ? value(props) : value;
-  };
-};
-
-/* Safely gets a (potentially nested) theme property, can run a function on the resulting value */
-var getThemeProp = exports.getThemeProp = function getThemeProp(path, defaultValue, func) {
-  if (func === void 0) {
-    func = function func(x) {
-      return x;
-    };
-  }
-  return function (props) {
-    return func(_safeGet.default.apply(void 0, [props, "theme"].concat(path.map(feedPropFunc(props)))) || feedPropFunc(props)(defaultValue));
-  };
-};
-
-/* Use in styled components to check if a prop has a truthy value and
-   return values based on that. */
-var ifFlag = exports.ifFlag = function ifFlag(name, thenVal, elseVal) {
-  if (elseVal === void 0) {
-    elseVal = "";
-  }
-  return function (props) {
-    return props[name] ? feedPropFunc(props)(thenVal) : feedPropFunc(props)(elseVal);
-  };
-};
-
-/* Creates a prop function that checks a field against a list of cases,
-	 	 and gives back a found case, or a default */
-var switchEnum = exports.switchEnum = function switchEnum(enumField, cases) {
-  return function (props) {
-    return cases[props[enumField]] || cases["default"];
-  };
-};
-;
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-  if (!reactHotLoader) {
-    return;
-  }
-  reactHotLoader.register(feedPropFunc, "feedPropFunc", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(getThemeProp, "getThemeProp", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(ifFlag, "ifFlag", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(switchEnum, "switchEnum", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-})();
-;
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
-;
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-  if (!reactHotLoader) {
-    return;
-  }
-  reactHotLoader.register(feedPropFunc, "feedPropFunc", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(getThemeProp, "getThemeProp", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(ifFlag, "ifFlag", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(switchEnum, "switchEnum", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-})();
-;
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();

package/src/components/Button.js

@@ -1,90 +0,0 @@
-import styled, { css } from "styled-components";
-import { getThemeProp, ifFlag } from "../utils";
-import { tint } from "polished";
-
-const borderColor = base => ifFlag("primary", getThemeProp(["colors", "application", "base"], base), base);
-
-const background = ifFlag(
-	"primary",
-	ifFlag(
-		"active",
-		css`
-			color: #fff;
-			background-image: linear-gradient(
-				${getThemeProp(["colors", "application", "base"], "#333", color => tint(0.05, color))},
-				${getThemeProp(["colors", "application", "base"], "#333")}
-			);
-			&:enabled:active {
-				background-image: none;
-				background-color: #fff;
-				color: ${getThemeProp(["colors", "application", "base"], "#333")};
-			}
-		`,
-		css`
-			color: ${getThemeProp(["colors", "application", "base"], "#333")};
-			background-image: none;
-			background-color: #fff;
-			&:enabled:active {
-				color: #fff;
-				background-image: linear-gradient(
-					${getThemeProp(["colors", "application", "base"], "#333", color => tint(0.05, color))},
-					${getThemeProp(["colors", "application", "base"], "#333")}
-				);
-			}
-		`,
-	),
-	ifFlag(
-		"active",
-		css`
-			background-image: none;
-			background-color: ${getThemeProp(["colors", "bgLight"], "#efefef")};
-			&:enabled:active {
-				background-color: #f7f7f7;
-			}
-		`,
-		css`
-			background-image: none;
-			background-color: #f7f7f7;
-			&:enabled:active {
-				background-color: ${getThemeProp(["colors", "bgLight"], "#efefef")};
-			}
-		`,
-	),
-);
-
-const Button = styled.button`
-	display: inline-block;
-	margin: 0;
-	font-weight: 400;
-	text-align: center;
-	vertical-align: middle;
-	cursor: pointer;
-	white-space: nowrap;
-	padding: 6px 10px;
-	font-size: 13px;
-	line-height: 1.42857;
-	border-radius: 4px;
-	user-select: none;
-	height: 30px;
-	border: 1px solid ${borderColor(getThemeProp(["colors", "borderLight"], "#cccccc"))};
-	outline: none;
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	text-transform: uppercase;
-	min-width: 50px;
-	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-	${background};
-
-	&:enabled:active,
-	&:enabled:focus,
-	&:enabled:hover {
-		border-color: ${borderColor("#4fa1f0")};
-		box-shadow: 0 0 4px #4fa1f0;
-		outline: none;
-	}
-	&:disabled {
-		opacity: 0.6;
-		cursor: default;
-	}
-`;
-
-export default Button;

package/src/components/Button.test.js

@@ -1,49 +0,0 @@
-import React from "react";
-import Button from "./Button";
-
-describe("Button", () => {
-	let onClick;
-	beforeEach(() => {
-		onClick = () => {};
-	});
-
-	it("renders a button", () =>
-		expect(
-			<Button onClick={onClick}>Label</Button>,
-			"when mounted",
-			"to satisfy",
-			<button onClick={onClick}>Label</button>,
-		));
-
-	it("sets an inactive background-color", () =>
-		expect(<Button />, "when mounted", "to have style rules satisfying", "to contain", "background-color: #f7f7f7;"));
-
-	it("sets an active background-color", () =>
-		expect(
-			<Button active />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"background-color: #efefef;",
-		));
-
-	describe("primary", () => {
-		it("sets an inactive background gradient", () =>
-			expect(
-				<Button primary />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-color: #fff;",
-			));
-
-		it("sets an active background-color", () =>
-			expect(
-				<Button primary active />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-image: linear-gradient( #3d3d3d,#333 )",
-			));
-	});
-});

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/Modal/Background.js

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-const Background = styled.div`
-	position: absolute;
-	background-color: rgba(127, 127, 127, 0.5);
-	height: 100%;
-	width: 100%;
-`;
-
-export default Background;

package/src/components/Modal/Dialog.js

@@ -1,27 +0,0 @@
-import styled, { css } from "styled-components";
-import { getThemeProp } from "../../utils";
-import withClickOutside from "../../hocs/withClickOutside";
-
-const darkDialogStyle = css`
-	background-color: ${getThemeProp(["colors", "bgDark"], "#333333")};
-	border-radius: 15px;
-`;
-
-const dialogLook = {
-	default: css`
-		background-color: white;
-	`,
-	dark: darkDialogStyle,
-};
-
-// TODO: Add light dialog style for other dialogs, switching mechanism
-export const Dialog = styled.div`
-	flex: 0 0 auto;
-	margin: auto;
-	align-self: center;
-	z-index: 10000;
-	${props => dialogLook[props.look]};
-`;
-Dialog.defaultProps = { look: "default" };
-
-export default withClickOutside(Dialog);

package/src/components/Modal/Dialog.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Dialog } from "./Dialog";
-
-describe("Dialog", () => {
-	it("renders a dialog with a default look", () =>
-		expect(
-			<Dialog />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "background-color: white;"),
-		));
-
-	it("renders a dialog with dark look", () =>
-		expect(
-			<Dialog look="dark" />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "background-color: #333333;").and("to contain", "border-radius: 15px;"),
-		));
-});