PR fixes

packages/react/src/components/a11y/styles/visuallyhidden.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Visually hiding text but not for the screen readers
+exports.styles = "\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px !important;\n  overflow: hidden;\n  padding:0 !important;\n  position: absolute !important;\n  width: 1px !important;\n";

packages/react/src/components/a11y/visuallyhidden.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var visuallyhidden_1 = require("./styles/visuallyhidden");
+var Hidden = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyhidden_1.styles);
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (<Hidden>
+        {children}
+    </Hidden>);
+};
+exports.VisuallyHidden = VisuallyHidden;
+var templateObject_1;

packages/react/src/components/buttons/abstract-button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var abstract_1 = require("./styles/abstract");
+var AbstractButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), abstract_1.styles);
+exports.AbstractButton = AbstractButton;
+var templateObject_1;

packages/react/src/components/buttons/add-button.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var plus_svg_1 = __importDefault(require("feather-icons/dist/icons/plus.svg"));
+var button_1 = require("./button");
+var PlusIcon = styled_components_1.default(plus_svg_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1rem;\n  margin-right: 0.5rem;\n  width: 1rem;\n"], ["\n  height: 1rem;\n  margin-right: 0.5rem;\n  width: 1rem;\n"])));
+var AddButton = function (_a) {
+    var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, buttonType = _a.buttonType;
+    var handleClick = function () { onClick && onClick(); };
+    return (<button_1.Button disabled={disabled} onClick={handleClick} buttonType={buttonType}>
+        <PlusIcon />
+            {children}
+        </button_1.Button>);
+};
+exports.AddButton = AddButton;
+var templateObject_1;

packages/react/src/components/buttons/button.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var primary_1 = require("./styles/primary");
+var secondary_1 = require("./styles/secondary");
+var tertiary_1 = require("./styles/tertiary");
+var abstract_button_1 = require("./abstract-button");
+var StyledButton = styled_components_1.default(abstract_button_1.AbstractButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
+    "\n"])), function (props) {
+    if (props.buttonType === 'secondary') {
+        return secondary_1.secondaryStyles;
+    }
+    else if (props.buttonType === 'tertiary') {
+        return tertiary_1.tertiaryStyles;
+    }
+    return primary_1.primaryStyles;
+});
+exports.Button = function (_a) {
+    var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, buttonType = _a.buttonType;
+    var handleClick = function () { onClick && onClick(); };
+    return (<StyledButton disabled={disabled} onClick={handleClick} buttonType={buttonType}>
+            {children}
+        </StyledButton>);
+};
+var templateObject_1;

packages/react/src/components/buttons/search-button.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var abstract_button_1 = require("./abstract-button");
+var StyledButton = styled_components_1.default(abstract_button_1.AbstractButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: rgb(255, 255, 255);\n    border-color: rgb(217, 221, 226);\n    color: rgb(99, 114, 130);\n\n    &:focus,\n    &:hover {\n        background-color: rgb(217, 221, 226);\n        border-color: rgb(217, 221, 226);\n        color: rgb(99, 114, 130);\n    }\n\n    &:disabled {\n        &,\n        &:focus,\n        &:hover {\n            background-color: rgb(242, 243, 249);\n            border-color: rgb(217, 221, 226);\n            color: rgb(156, 167, 180);\n        }\n    }\n"], ["\n    background: rgb(255, 255, 255);\n    border-color: rgb(217, 221, 226);\n    color: rgb(99, 114, 130);\n\n    &:focus,\n    &:hover {\n        background-color: rgb(217, 221, 226);\n        border-color: rgb(217, 221, 226);\n        color: rgb(99, 114, 130);\n    }\n\n    &:disabled {\n        &,\n        &:focus,\n        &:hover {\n            background-color: rgb(242, 243, 249);\n            border-color: rgb(217, 221, 226);\n            color: rgb(156, 167, 180);\n        }\n    }\n"])));
+var SearchButton = function (_a) {
+    var children = _a.children, className = _a.className, disabled = _a.disabled, onClick = _a.onClick;
+    var handleClick = function () { onClick && onClick(); };
+    return (<StyledButton className={className} disabled={disabled} onClick={handleClick}>
+            {children}
+        </StyledButton>);
+};
+exports.SearchButton = SearchButton;
+var templateObject_1;

packages/react/src/components/buttons/styles/tertiary.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tertiaryStyles = "\n  background-color: transparent;\n  border-color: transparent;\n  color: #637282;\n\n  &:focus,\n  &:hover {\n    color: black;\n  }\n\n  &:disabled {\n    &,\n    &:focus,\n    &:hover {\n      color: rgba(0, 0, 0, 0.4);\n    }\n  }\n";

packages/react/src/components/card.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var Card = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(220, 220, 220);\n  border-radius: 0.5rem;\n  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  margin-bottom: 2rem;\n  padding: 3rem 2rem;\n"], ["\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(220, 220, 220);\n  border-radius: 0.5rem;\n  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  margin-bottom: 2rem;\n  padding: 3rem 2rem;\n"])));
+exports.Card = Card;
+var templateObject_1;

packages/react/src/components/enso-spinner.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var enso_svg_1 = __importDefault(require("../icons/enso.svg"));
+var EnsoSpinner = styled_components_1.default(enso_svg_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: roll 1s infinite;\n  animation-timing-function: linear;\n  fill: #e2732d;\n  height: 80px;\n  width: 83px;\n\n  @keyframes roll {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], ["\n  animation: roll 1s infinite;\n  animation-timing-function: linear;\n  fill: #e2732d;\n  height: 80px;\n  width: 83px;\n\n  @keyframes roll {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"])));
+exports.EnsoSpinner = EnsoSpinner;
+var templateObject_1;

packages/react/src/components/feedbacks/invalid-field.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Field = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: rgb(164, 12, 46);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0.25rem 0 0;\n"], ["\n  color: rgb(164, 12, 46);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0.25rem 0 0;\n"])));
+var InvalidField = function (_a) {
+    var controlId = _a.controlId, feedbackMsg = _a.feedbackMsg;
+    return (<Field role="alert" aria-live="polite" id={controlId + "_invalid"}>
+        {feedbackMsg}
+    </Field>);
+};
+exports.InvalidField = InvalidField;
+var templateObject_1;

packages/react/src/components/forms/field-container.js

@@ -0,0 +1,40 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var invalid_field_1 = require("../feedbacks/invalid-field");
+var label_1 = require("./label");
+var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 0 1.5rem;\n\n  input,\n  select,\n  textarea {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"], ["\n  margin: 0 0 1.5rem;\n\n  input,\n  select,\n  textarea {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) { return (props.valid ? 'rgb(217, 221, 226)' : 'rgb(164, 12, 46)'); }, function (props) { return (props.valid ? 'rgb(0, 128, 165)' : 'rgb(164, 12, 46)'); });
+var FieldContainer = function (_a) {
+    var children = _a.children, fieldId = _a.fieldId, label = _a.label, valid = _a.valid, validMsg = _a.validMsg, props = __rest(_a, ["children", "fieldId", "label", "valid", "validMsg"]);
+    return (<StyledDiv {...props} valid={valid}>
+        {label && (<label_1.Label forId={fieldId}>
+                {label}
+            </label_1.Label>)}
+
+        {children}
+
+        {!valid &&
+        <invalid_field_1.InvalidField controlId={fieldId} feedbackMsg={validMsg}/>}
+    </StyledDiv>);
+};
+exports.FieldContainer = FieldContainer;
+var templateObject_1;

packages/react/src/components/forms/inputs/checkbox.js

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 16px;\n  margin: 0;\n  width: 16px;\n"], ["\n  height: 16px;\n  margin: 0;\n  width: 16px;\n"])));
+var Checkbox = function (_a) {
+    var defaultChecked = _a.defaultChecked, onChange = _a.onChange;
+    var ref = react_1.default.createRef();
+    var handleChange = function () {
+        if (typeof onChange === 'function') {
+            if (ref.current === null)
+                return;
+            onChange(ref.current.checked);
+        }
+    };
+    return (<Input defaultChecked={defaultChecked} ref={ref} onChange={handleChange} type="checkbox"/>);
+};
+exports.Checkbox = Checkbox;
+var templateObject_1;

packages/react/src/components/forms/inputs/option-button.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: -1;\n\n  + label {\n    align-items: center;\n    background-color: #fff;\n    border: 1px solid #d9dde2;\n    border-radius: 8px;\n    color: #637282;\n    display: flex;\n    font-size: 24px;\n    justify-content: center;\n    min-height: 40px;\n  }\n\n  &:checked + label {\n    background-color: #006296;\n    border-color: #006296;\n    color: #fff;\n  }\n"], ["\n  position: absolute;\n  z-index: -1;\n\n  + label {\n    align-items: center;\n    background-color: #fff;\n    border: 1px solid #d9dde2;\n    border-radius: 8px;\n    color: #637282;\n    display: flex;\n    font-size: 24px;\n    justify-content: center;\n    min-height: 40px;\n  }\n\n  &:checked + label {\n    background-color: #006296;\n    border-color: #006296;\n    color: #fff;\n  }\n"])));
+var OptionButton = function (_a) {
+    var checked = _a.checked, label = _a.label, name = _a.name, value = _a.value;
+    return (<div>
+        <Input checked={checked} id="id" name={name} type="radio" value={value}/>
+        <label htmlFor="id">{label}</label>
+    </div>);
+};
+exports.OptionButton = OptionButton;
+var templateObject_1;

packages/react/src/components/forms/inputs/search-contextual.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var search_input_1 = require("./search-input");
+var SearchContextual = function (_a) {
+    var disabled = _a.disabled, id = _a.id, label = _a.label, onChange = _a.onChange;
+    return (<search_input_1.SearchInput disabled={disabled} id={id} label={label} onChange={onChange}/>);
+};
+exports.SearchContextual = SearchContextual;

packages/react/src/components/forms/inputs/search-global.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var search_input_1 = require("./search-input");
+var SearchGlobal = function (_a) {
+    var disabled = _a.disabled, id = _a.id, label = _a.label, onSearch = _a.onSearch;
+    return (<search_input_1.SearchInput disabled={disabled} hasButton id={id} label={label} onSearch={onSearch}/>);
+};
+exports.SearchGlobal = SearchGlobal;