flipper-ui 0.27.2 → 0.28.0

package/Experimental/Fab/Fab.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEvent, CSSProperties } from 'react';
 export interface IProps {
-    mini?: boolean;
+    large?: boolean;
     className?: string;
     name?: string;
     tooltip?: string;

package/Experimental/Fab/Fab.js

@@ -11,15 +11,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _index = require("@/index");
-var _excluded = ["mini", "children", "padding", "name", "margin", "style"];
+var _excluded = ["large", "children", "padding", "name", "margin", "style"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FabV2 = function FabV2(props) {
   var renderButton = function renderButton() {
-    var _props$mini = props.mini,
-      mini = _props$mini === void 0 ? true : _props$mini,
+    var large = props.large,
       children = props.children,
       padding = props.padding,
       name = props.name,
@@ -27,7 +26,7 @@ var FabV2 = function FabV2(props) {
       style = props.style,
       otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
     return /*#__PURE__*/React.createElement(_index.Fab, (0, _extends2["default"])({
-      size: mini ? 'small' : 'medium',
+      size: large ? 'medium' : 'small',
       name: name || 'action-button',
       "data-testid": "fab-button"
     }, otherProps, {

package/Experimental/VisibilityIcon/index.js

@@ -25,9 +25,9 @@ var VisibilityIcon = function VisibilityIcon(_ref) {
     name: name,
     onClick: onToggle
   }), show ? /*#__PURE__*/_react["default"].createElement(_icons.VisibilityOff, {
-    role: "icon-off"
+    "data-testid": "icon-off"
   }) : /*#__PURE__*/_react["default"].createElement(_icons.Visibility, {
-    role: "icon-on"
+    "data-testid": "icon-on"
   }));
 };
 var _default = VisibilityIcon;

package/core/{Advertise.d.ts → Advertise/index.d.ts}

@@ -1,5 +1,5 @@
-import type { DefaultProps } from './types';
-interface AdvertiseProps extends DefaultProps {
+import type { DefaultProps } from '../types';
+export interface AdvertiseProps extends DefaultProps {
     comment: string;
     author: string;
     commentStyle?: object;

package/core/{Advertise.js → Advertise/index.js}

@@ -10,9 +10,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("../colors");
-var _Paper = _interopRequireDefault(require("./Paper"));
-var _Typography = _interopRequireDefault(require("./Typography"));
+var _colors = require("../../colors");
+var _Paper = _interopRequireDefault(require("../Paper"));
+var _Typography = _interopRequireDefault(require("../Typography"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["comment", "author", "padding", "commentStyle", "authorStyle"];
 var _templateObject;

package/core/{AutoComplete.d.ts → AutoComplete/index.d.ts}

@@ -1,5 +1,5 @@
-import React, { ReactNode, ChangeEvent, KeyboardEvent, CSSProperties, Ref, FocusEvent } from 'react';
-interface AutoCompleteProps {
+import React, { ReactNode, ChangeEvent, KeyboardEvent, CSSProperties, Ref, FocusEvent, MouseEvent } from 'react';
+export interface AutoCompleteProps {
     autoFocus?: boolean;
     defaultIsOpen?: boolean;
     openOnFocus?: boolean;
@@ -13,13 +13,15 @@ interface AutoCompleteProps {
     style?: CSSProperties;
     maxHeight?: number;
     actions?: ReactNode | JSX.Element;
-    renderSuggestion: (suggestion: string | object, itemProps: object, selected: boolean) => ReactNode;
+    renderSuggestion: (suggestion: TSelected, itemProps: {
+        onClick: (event: MouseEvent) => void;
+    }, selected: boolean) => ReactNode;
     onChange: (value: TSelected) => void;
     onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     renderInput(props: IInputProps): React.ReactElement;
 }
-interface IInputProps {
+export interface IInputProps {
     value: string;
     inputProps: {
         ref: Ref<HTMLInputElement>;
@@ -29,12 +31,12 @@ interface IInputProps {
     onBlur(event: FocusEvent<HTMLInputElement>): void;
     onKeyDown(event: KeyboardEvent): void;
 }
-interface ISelected {
+export interface ISelected {
     label: string;
     value?: string;
     type?: string;
     subheader?: boolean;
 }
-type TSelected = ISelected | string;
+export type TSelected = ISelected | string;
 declare const AutoComplete: (props: AutoCompleteProps) => JSX.Element;
 export default AutoComplete;

package/core/{AutoComplete.js → AutoComplete/index.js}

@@ -10,8 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
-var _Paper = _interopRequireDefault(require("./Paper"));
-var _Fade = _interopRequireDefault(require("./Fade"));
+var _Paper = _interopRequireDefault(require("../Paper"));
+var _Fade = _interopRequireDefault(require("../Fade"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,16 +37,18 @@ var AutoComplete = function AutoComplete(props) {
     setOpen = _useState4[1];
   (0, _react.useEffect)(function () {
     if (props.autoFocus) {
-      if (inputRef.current) {
-        inputRef.current.focus();
+      var current = inputRef.current;
+      if (current) {
+        current.focus();
         if (props.openOnFocus) {
           setOpen(true);
         }
       }
     } else if (props.focusDelay) {
+      var _current = inputRef.current;
       setTimeout(function () {
-        if (inputRef.current) {
-          inputRef.current.focus();
+        if (_current) {
+          _current.focus();
         }
         if (props.openOnFocus) {
           setOpen(true);
@@ -67,7 +69,7 @@ var AutoComplete = function AutoComplete(props) {
     if (props.openOnFocus && !value) {
       return props.suggestions;
     }
-    var items = value ? props.suggestions : [];
+    var items = value && value.length ? props.suggestions : [];
     return items.filter(function (item) {
       if (!item.subheader) {
         return props.caseSensitive ? removeAccents(item.label).includes(removeAccents(value)) : removeAccents(item.label).toLocaleLowerCase().includes(removeAccents(value).toLocaleLowerCase());
@@ -107,7 +109,7 @@ var AutoComplete = function AutoComplete(props) {
     if (props.openOnFocus) {
       setOpen(true);
     }
-    if (props.selectTextOnFocus && event.target) {
+    if (props.selectTextOnFocus) {
       var input = event.target;
       if (input.select) {
         input.select();

package/core/{Avatar.d.ts → Avatar/index.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DefaultProps } from './types';
-interface AvatarProps extends DefaultProps {
+import type { DefaultProps } from '../types';
+export interface AvatarProps extends DefaultProps {
     name?: string;
     id?: string;
     sizes?: string;
@@ -8,6 +8,7 @@ interface AvatarProps extends DefaultProps {
     imgProps?: object;
     primary?: boolean;
     children?: React.ReactNode;
+    'data-testid'?: string;
 }
 declare const Avatar: ({ children, primary, className, ...otherProps }: AvatarProps) => JSX.Element;
 export default Avatar;

package/core/{Avatar.js → Avatar/index.js}

@@ -25,7 +25,7 @@ var Avatar = function Avatar(_ref) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, otherProps, {
-    className: "".concat(className, " ").concat(primary ? classes['primary'] : '')
+    className: "".concat(className ? className : '', " ").concat(primary ? classes['primary'] : '')
   }), children);
 };
 var _default = Avatar;

package/core/{Badge.d.ts → Badge/index.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
-import type { DefaultProps } from './types';
+import type { DefaultProps } from '../types';
 export interface BadgeProps extends DefaultProps, MuiBadgeProps {
     children: React.ReactNode;
     max?: number;

package/core/{Badge.js → Badge/index.js}

@@ -30,14 +30,14 @@ var Badge = function Badge(props) {
     style = _props$style === void 0 ? {} : _props$style,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var classes = useBadgeStyles(position);
-  return counter ? /*#__PURE__*/_react["default"].createElement(_Badge["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_Badge["default"], (0, _extends2["default"])({
     badgeContent: counter,
     classes: classes,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style)
-  }, otherProps), children) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+  }, otherProps), children);
 };
 var _default = Badge;
 exports["default"] = _default;

package/core/{Box.d.ts → Box/index.d.ts}

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { DefaultProps } from './types';
+import type { DefaultProps } from '../types';
 export interface BoxProps extends DefaultProps {
     minHeight?: number;
     children: React.ReactNode;
+    'data-testid'?: string;
 }
 declare const Box: ({ children, margin, padding, style, minHeight, ...otherProps }: BoxProps) => JSX.Element;
 export default Box;

package/core/{Box.js → Box/index.js}

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _Paper = _interopRequireDefault(require("./Paper"));
+var _Paper = _interopRequireDefault(require("../Paper"));
 var _excluded = ["children", "margin", "padding", "style", "minHeight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

package/core/{Button.d.ts → Button/index.d.ts}

@@ -1,5 +1,5 @@
 import React, { ElementType, MouseEvent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 export interface ButtonProps extends DefaultProps {
     disabled?: boolean;
     selected?: boolean;

package/core/Button/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "margin", "padding", "style", "variant"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Button = function Button(_ref) {
+  var children = _ref.children,
+    margin = _ref.margin,
+    padding = _ref.padding,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    variant = _ref.variant,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, otherProps, {
+    variant: variant === 'dashed' ? 'outlined' : variant,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      margin: margin,
+      padding: padding,
+      opacity: otherProps.selected ? 0.5 : 1,
+      borderStyle: variant === 'dashed' ? 'dashed' : 'initial'
+    })
+  }), children);
+};
+var _default = Button;
+exports["default"] = _default;

package/core/{Card.d.ts → Card/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { CardProps } from '@material-ui/core/Card';
 import { CardActionAreaProps } from '@material-ui/core/CardActionArea';
 import { CardActionsProps } from '@material-ui/core/CardActions';

package/core/{Chapter.d.ts → Chapter/index.d.ts}

@@ -1,12 +1,13 @@
 import type { TypographyProps } from '@material-ui/core/Typography';
 import React, { CSSProperties } from 'react';
-import { DefaultProps } from './types';
-interface LineProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface LineProps extends DefaultProps {
     primary?: boolean;
     width?: string;
     variant?: TypographyProps['variant'];
     childrenStyle?: CSSProperties;
     children?: React.ReactNode;
+    'data-testid'?: string;
 }
-declare const Chapter: ({ padding, margin, style, childrenStyle, children, variant, ...otherProps }: LineProps) => JSX.Element;
+declare const Chapter: ({ padding, margin, style, childrenStyle, children, variant, primary, ...otherProps }: LineProps) => JSX.Element;
 export default Chapter;

package/core/{Chapter.js → Chapter/index.js}

@@ -11,16 +11,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = require("../colors");
-var _Typography = _interopRequireDefault(require("./Typography"));
-var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "variant"];
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _nginformaticaStyleguide = require("nginformatica-styleguide");
+var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "variant", "primary"];
 var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    --color: ", ";\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: var(--color);\n"])), function (props) {
-  return props.primary ? _colors.primary.normal : _colors.background.normal;
+var grays = _nginformaticaStyleguide.theme.colors.grays;
+var StyledLine = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", "; ;\n"])), function (props) {
+  return props.primary ? grays.g4 : grays.g6;
 });
-var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & hr:first-child {\n        margin-right: 10px;\n    }\n\n    & hr:last-child {\n        margin-left: 10px;\n    }\n"])));
+var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & div:first-child {\n        margin-right: 10px;\n    }\n\n    & div:last-child {\n        margin-left: 10px;\n    }\n"])));
 var Chapter = function Chapter(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
@@ -28,19 +29,24 @@ var Chapter = function Chapter(_ref) {
     childrenStyle = _ref.childrenStyle,
     children = _ref.children,
     variant = _ref.variant,
+    primary = _ref.primary,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var Line = function Line(props) {
-    return /*#__PURE__*/_react["default"].createElement(StyledLine, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(StyledLine, (0, _extends2["default"])({}, props, {
       style: _objectSpread({
         padding: padding,
         margin: margin
       }, style)
-    }, props));
+    }));
   };
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Line, otherProps), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Container, otherProps, /*#__PURE__*/_react["default"].createElement(Line, {
+    primary: primary
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: variant,
     style: _objectSpread({}, childrenStyle)
-  }, children), /*#__PURE__*/_react["default"].createElement(Line, null));
+  }, children), /*#__PURE__*/_react["default"].createElement(Line, {
+    primary: primary
+  }));
 };
 var _default = Chapter;
 exports["default"] = _default;

package/core/{Checkbox.d.ts → Checkbox/index.d.ts}

@@ -1,6 +1,6 @@
 import { CheckboxProps as MuiCheckboxProps } from '@material-ui/core';
 import React, { ChangeEvent, ReactNode } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 export interface CheckboxProps extends DefaultProps {
     name: string;
     label?: ReactNode;

package/core/{Checkbox.js → Checkbox/index.js}

@@ -12,7 +12,7 @@ var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormCo
 var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 var _react = _interopRequireDefault(require("react"));
-var _TextField = require("./TextField");
+var _TextField = require("../TextField");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DENSE = {
@@ -49,6 +49,7 @@ var Checkbox = function Checkbox(props) {
       checked: props.checked,
       value: props.name,
       color: props.color,
+      role: "switch",
       disabled: props.disabled,
       onChange: props.onChange
     }));

package/core/{Chip.d.ts → Chip/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { ChipProps } from '@material-ui/core/Chip';
 export interface IChipProps extends DefaultProps {
     square?: boolean;

package/core/{ChipField.d.ts → ChipField/index.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChipRenderer } from 'material-ui-chip-input';
 import { InputLabelProps } from '@material-ui/core';
-interface ChipFieldProps<T extends TChipValues> {
+export interface ChipFieldProps<T extends TChipValues> {
     allowDuplicates?: boolean;
     values: T[];
     variant?: 'outlined' | 'standard' | 'filled';

package/core/{Collapse.d.ts → Collapse/index.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DefaultProps } from './types';
-interface CollapseProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface CollapseProps extends DefaultProps {
     collapsedHeight?: string;
     in: boolean;
     timeout?: number | {

package/core/{Container.d.ts → Container/index.d.ts}

@@ -1,3 +1,3 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 declare const Container: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => JSX.Element;
 export default Container;

package/core/Container/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "padding", "margin", "style"];
+var ContainerStyles = {
+  display: 'flex',
+  flex: 1
+};
+var Container = function Container(_ref) {
+  var children = _ref.children,
+    padding = _ref.padding,
+    margin = _ref.margin,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var componentStyle = Object.assign({}, ContainerStyles, padding, margin, style);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    style: componentStyle
+  }, otherProps), children);
+};
+var _default = Container;
+exports["default"] = _default;

package/core/{Content.d.ts → Content/index.d.ts}

@@ -1,3 +1,3 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 declare const Content: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => JSX.Element;
 export default Content;

package/core/{Content.js → Content/index.js}

@@ -6,16 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["children", "padding", "margin", "style"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledContent = _styledComponents["default"].main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    transition: all 500ms ease;\n"])));
+var ContainerStyles = {
+  flex: 1,
+  transition: 'all 500ms ease'
+};
 var Content = function Content(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
@@ -23,11 +24,9 @@ var Content = function Content(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var componentStyle = Object.assign({}, ContainerStyles, padding, margin, style);
   return /*#__PURE__*/_react["default"].createElement(StyledContent, (0, _extends2["default"])({}, otherProps, {
-    style: _objectSpread({
-      padding: padding,
-      margin: margin
-    }, style)
+    style: componentStyle
   }), children);
 };
 var _default = Content;

package/core/DataTable/DataTable.js

@@ -198,6 +198,7 @@ var DataTable = function DataTable(props) {
     });
   }, [pagination.showFirstButton, pagination.showLastButton]);
   return /*#__PURE__*/_react["default"].createElement(_TableContainer["default"], {
+    role: "data-table-container",
     component: _Paper["default"]
   }, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, !noHeader && /*#__PURE__*/_react["default"].createElement(_TableHead["default"], {
     style: headStyle

package/core/DataTable/Rows.js

@@ -35,7 +35,6 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
   var hasError = errors === null || errors === void 0 ? void 0 : (_errors$row$id = errors[row.id]) === null || _errors$row$id === void 0 ? void 0 : _errors$row$id.has(column.field);
   if (column.renderCell) {
     var _value = row[column.field];
-    console.log('renderCell', _value);
     return column.renderCell({
       data: row,
       rowMode: _types.RowMode.Edit,
@@ -181,7 +180,9 @@ var NewRow = function NewRow(_ref2) {
     });
     onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate((0, _defineProperty2["default"])({}, field, value));
   }, []);
-  return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, columns.map(function (column) {
+  return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+    "data-testid": "table-row"
+  }, columns.map(function (column) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
       style: column.cellStyle,
       align: column.align,

package/core/{DateTime.d.ts → DateTime/index.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { KeyboardDatePickerProps } from '@material-ui/pickers/DatePicker';
 import { KeyboardDateTimePickerProps } from '@material-ui/pickers/DateTimePicker';
 import { KeyboardTimePickerProps } from '@material-ui/pickers/TimePicker';

package/core/{DateTime.js → DateTime/index.js}

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pickers = require("@material-ui/pickers");
 var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
-var _TextField = require("./TextField");
+var _TextField = require("../TextField");
 var _excluded = ["padding", "margin", "style", "format", "variant", "inputVariant", "ampm", "invalidDateMessage", "minDateMessage", "maxDateMessage", "locale", "type"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -54,7 +54,8 @@ var DateTime = function DateTime(_ref) {
       padding: padding
     }, style),
     inputProps: _objectSpread({
-      autoComplete: 'off'
+      autoComplete: 'off',
+      role: 'date-picker'
     }, otherProps.inputProps),
     InputAdornmentProps: _objectSpread({
       style: {
@@ -82,10 +83,19 @@ var DateTime = function DateTime(_ref) {
   var renderDateTimePicker = function renderDateTimePicker() {
     return /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardDateTimePicker, fieldProps);
   };
+  var renderChildren = function renderChildren() {
+    if (type === 'date') {
+      return renderDatePicker();
+    }
+    if (type === 'time') {
+      return renderTimePicker();
+    }
+    return renderDateTimePicker();
+  };
   return /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"],
     locale: locale
-  }, type === 'date' && renderDatePicker(), type === 'time' && renderTimePicker(), type === 'datetime' && renderDateTimePicker());
+  }, renderChildren());
 };
 var _default = DateTime;
 exports["default"] = _default;

package/core/{Dialog.d.ts → Dialog/index.d.ts}

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
-import { DefaultProps } from './types';
-interface DialogProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface DialogProps extends DefaultProps {
     open: boolean;
     fullScreen?: boolean;
     fullWidth?: boolean;

package/core/{Dialog.js → Dialog/index.js}

@@ -107,6 +107,7 @@ var Dialog = function Dialog(_ref) {
     maxWidth: maxWidth,
     scroll: scrollMode,
     PaperProps: _objectSpread({
+      title: 'dialog-paper',
       classes: scroll === 'unset-body' || scroll === 'unset-paper' ? {
         root: classes.root
       } : undefined

package/core/{Divider.d.ts → Divider/index.d.ts}

@@ -1,7 +1,8 @@
-import { DefaultProps } from './types';
-interface DividerProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface DividerProps extends DefaultProps {
     inset?: boolean;
     light?: boolean;
+    'data-testid'?: string;
 }
 declare const Divider: ({ margin, padding, style, ...otherProps }: DividerProps) => JSX.Element;
 export default Divider;