flipper-ui 0.27.1 → 0.28.0

package/{core/Experimental/Sidebar/SidebarV2.js → Experimental/Sidebar/index.js}

@@ -9,22 +9,19 @@ exports["default"] = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _Sidebar = _interopRequireDefault(require("../../Sidebar"));
+var _index = require("@/index");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _times = _interopRequireDefault(require("ramda/es/times"));
 var _map = _interopRequireDefault(require("ramda/es/map"));
 var _lab = require("@material-ui/lab");
-var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
-var _List = _interopRequireDefault(require("../../List"));
-var _ListItem = _interopRequireDefault(require("../../ListItem"));
 var _excluded = ["options", "loading", "handleGoTo", "extraOptions", "top"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
-var StyledFlipperSidebar = (0, _styledComponents["default"])(_Sidebar["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.grays.g6);
-var MenuItem = (0, _styledComponents["default"])(_ListItem["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
+var StyledFlipperSidebar = (0, _styledComponents["default"])(_index.Sidebar)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.grays.g6);
+var MenuItem = (0, _styledComponents["default"])(_index.ListItem)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
 var Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), _nginformaticaStyleguide.theme.colors.primary.main);
 var PaperBar = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: column;\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    padding-bottom: 16px;\n"])));
 var LABEL_TIMEOUT = 300;
@@ -99,7 +96,7 @@ var Sidebar = function Sidebar(props) {
     return /*#__PURE__*/_react["default"].createElement(Link, {
       "data-testid": "sidebar-option-".concat(option.route.replace('/', '')),
       key: option.name
-    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_index.Tooltip, {
       withWrapper: true,
       placement: "right",
       enterDelay: 500,
@@ -133,9 +130,9 @@ var Sidebar = function Sidebar(props) {
     expanded: expanded,
     onToggle: toggle,
     top: top || 0
-  }, /*#__PURE__*/_react["default"].createElement(PaperBar, otherProps, /*#__PURE__*/_react["default"].createElement(_List["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(PaperBar, otherProps, /*#__PURE__*/_react["default"].createElement(_index.List, {
     dense: true
-  }, loading ? sidebarSkeleton : (0, _map["default"])(renderOption, options)), /*#__PURE__*/_react["default"].createElement(_List["default"], {
+  }, loading ? sidebarSkeleton : (0, _map["default"])(renderOption, options)), /*#__PURE__*/_react["default"].createElement(_index.List, {
     dense: true
   }, !loading && (0, _map["default"])(renderOption, extraOptions))));
 };

package/Experimental/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+declare const Skeleton: (props: SkeletonProps) => JSX.Element;
+export default Skeleton;

package/Experimental/Skeleton/index.js

@@ -0,0 +1,23 @@
+"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 _nginformaticaStyleguide = require("nginformatica-styleguide");
+var _react = _interopRequireDefault(require("react"));
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+require("react-loading-skeleton/dist/skeleton.css");
+var mainColor = _nginformaticaStyleguide.theme.colors.grays.g7;
+var subColor = '#CFCFCF';
+var Skeleton = function Skeleton(props) {
+  return /*#__PURE__*/_react["default"].createElement(_reactLoadingSkeleton["default"], (0, _extends2["default"])({
+    containerTestId: "skeleton-container",
+    baseColor: mainColor,
+    highlightColor: subColor
+  }, props));
+};
+var _default = Skeleton;
+exports["default"] = _default;

package/Experimental/VisibilityIcon/index.d.ts

@@ -0,0 +1,7 @@
+interface IProps {
+    name?: string;
+    show: boolean;
+    onToggle(): void;
+}
+declare const VisibilityIcon: ({ show, onToggle, name, ...otherProps }: IProps) => JSX.Element;
+export default VisibilityIcon;

package/Experimental/VisibilityIcon/index.js

@@ -0,0 +1,34 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _index = require("@/index");
+var _icons = require("@/icons");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["show", "onToggle", "name"];
+var _templateObject;
+var StyledButton = (0, _styledComponents["default"])(_index.IconButton)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));
+var VisibilityIcon = function VisibilityIcon(_ref) {
+  var show = _ref.show,
+    onToggle = _ref.onToggle,
+    name = _ref.name,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({}, otherProps, {
+    padding: "0px",
+    name: name,
+    onClick: onToggle
+  }), show ? /*#__PURE__*/_react["default"].createElement(_icons.VisibilityOff, {
+    "data-testid": "icon-off"
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Visibility, {
+    "data-testid": "icon-on"
+  }));
+};
+var _default = VisibilityIcon;
+exports["default"] = _default;

package/Experimental/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Sidebar } from './Sidebar';
+export * from './Fab';
+export { default as Card } from './Card';
+export { default as Button } from './Button';
+export * from './Dialog';
+export { default as Avatar } from './Avatar';
+export { default as Actions, Wrapper } from './Actions';
+export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Loading } from './Loading';
+export { default as Panel } from './Panel';
+export { default as Skeleton } from './Skeleton';
+export { default as VisibilityIcon } from './VisibilityIcon';
+export { default as NothingFound } from './NothingFound';

package/Experimental/index.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Sidebar: true,
+  Card: true,
+  Button: true,
+  Avatar: true,
+  Actions: true,
+  Wrapper: true,
+  Breadcrumbs: true,
+  Loading: true,
+  Panel: true,
+  Skeleton: true,
+  VisibilityIcon: true,
+  NothingFound: true
+};
+Object.defineProperty(exports, "Actions", {
+  enumerable: true,
+  get: function get() {
+    return _Actions["default"];
+  }
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar["default"];
+  }
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function get() {
+    return _Breadcrumbs["default"];
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card["default"];
+  }
+});
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function get() {
+    return _Loading["default"];
+  }
+});
+Object.defineProperty(exports, "NothingFound", {
+  enumerable: true,
+  get: function get() {
+    return _NothingFound["default"];
+  }
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _Panel["default"];
+  }
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function get() {
+    return _Sidebar["default"];
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton["default"];
+  }
+});
+Object.defineProperty(exports, "VisibilityIcon", {
+  enumerable: true,
+  get: function get() {
+    return _VisibilityIcon["default"];
+  }
+});
+Object.defineProperty(exports, "Wrapper", {
+  enumerable: true,
+  get: function get() {
+    return _Actions.Wrapper;
+  }
+});
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _Fab = require("./Fab");
+Object.keys(_Fab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Fab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Fab[key];
+    }
+  });
+});
+var _Card = _interopRequireDefault(require("./Card"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _Dialog = require("./Dialog");
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+var _Actions = _interopRequireWildcard(require("./Actions"));
+var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
+var _Loading = _interopRequireDefault(require("./Loading"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+var _VisibilityIcon = _interopRequireDefault(require("./VisibilityIcon"));
+var _NothingFound = _interopRequireDefault(require("./NothingFound"));
+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; }

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;
@@ -12,6 +12,7 @@ export interface ButtonProps extends DefaultProps {
     variant?: 'text' | 'outlined' | 'contained' | 'dashed';
     target?: string;
     children?: React.ReactNode;
+    'data-testid'?: string;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }
 declare const Button: ({ children, margin, padding, style, variant, ...otherProps }: ButtonProps) => JSX.Element;

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;