flipper-ui 0.27.1 → 0.28.0

package/core/Line/index.js

@@ -0,0 +1,32 @@
+"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 _react = _interopRequireDefault(require("react"));
+var _colors = require("../../colors");
+var _excluded = ["padding", "margin", "style", "primary"];
+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 Line = function Line(_ref) {
+  var padding = _ref.padding,
+    margin = _ref.margin,
+    style = _ref.style,
+    primary = _ref.primary,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    style: _objectSpread({
+      flex: 1,
+      padding: padding,
+      margin: margin,
+      border: "1px solid ".concat(primary ? _colors.primary.normal : _colors.background.normal)
+    }, style)
+  }, otherProps));
+};
+var _default = Line;
+exports["default"] = _default;

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

@@ -1,5 +1,5 @@
-import { DefaultProps } from './types';
-interface ListProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface ListProps extends DefaultProps {
     title?: string;
     dense?: boolean;
     color?: 'primary' | 'secondary' | 'default' | 'inherit';

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

@@ -49,9 +49,9 @@ var List = function List(_ref) {
   var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_List["default"], (0, _extends2["default"])({
     subheader: title ? /*#__PURE__*/_react["default"].createElement(_ListSubheader["default"], {
-      className: classes ? classes[color] : ''
+      className: classes[color]
     }, title) : undefined,
-    className: classes ? "".concat(classes[color], " ").concat(className) : '',
+    className: "".concat(classes[color], " ").concat(className),
     style: _objectSpread({
       padding: padding,
       margin: margin

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { Omit } from 'ramda';
 interface ListItemProps extends Omit<DefaultProps, 'name'> {
     avatar?: JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldProps } from './TextField';
+import { TextFieldProps } from '../TextField';
 export interface MaskFieldProps {
     mask?: string;
     type?: 'text' | 'tel' | 'password';

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

@@ -8,7 +8,7 @@ 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 _TextField = _interopRequireDefault(require("./TextField"));
+var _TextField = _interopRequireDefault(require("../TextField"));
 var _reactNumberFormat = _interopRequireDefault(require("react-number-format"));
 var _excluded = ["customInput"];
 var MaskField = function MaskField(props) {

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

@@ -1,6 +1,6 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { MenuProps as MuiMenuProps } from '@material-ui/core/Menu';
-interface MenuProps extends DefaultProps, MuiMenuProps {
+export interface MenuProps extends DefaultProps, MuiMenuProps {
     open: boolean;
     anchorEl?: HTMLElement;
     withWrapper?: boolean;

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

@@ -26,7 +26,9 @@ var Menu = function Menu(_ref) {
       padding: padding,
       margin: margin
     }, style)
-  }), withWrapper ? /*#__PURE__*/_react["default"].createElement("div", null, children) : children);
+  }), withWrapper ? /*#__PURE__*/_react["default"].createElement("div", {
+    role: "menu-wrapper-container"
+  }, children) : children);
 };
 var _default = Menu;
 exports["default"] = _default;

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

@@ -1,5 +1,5 @@
-import { DefaultProps } from './types';
-interface NodeProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface NodeProps extends DefaultProps {
     name: string;
 }
 declare const Node: (props: NodeProps) => JSX.Element;

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

@@ -10,9 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = require("../colors");
-var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
-var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));
+var _colors = require("../../colors");
+var _icons = require("../../icons");
 var _templateObject, _templateObject2;
 var styles = {
   icon: {
@@ -39,9 +38,9 @@ var Node = function Node(props) {
     setOpen(!open);
   };
   var renderDropdownIcon = function renderDropdownIcon() {
-    return open ? /*#__PURE__*/_react["default"].createElement(_KeyboardArrowUp["default"], {
+    return open ? /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowUp, {
       style: styles.icon
-    }) : /*#__PURE__*/_react["default"].createElement(_KeyboardArrowDown["default"], {
+    }) : /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowDown, {
       style: styles.icon
     });
   };

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

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 export interface PaginationProps extends DefaultProps {
     pages?: number;
     active: number;

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

@@ -7,14 +7,15 @@ 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 _inc = _interopRequireDefault(require("ramda/es/inc"));
 var _times = _interopRequireDefault(require("ramda/es/times"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
-var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _icons = require("../../icons");
+var _Button = _interopRequireDefault(require("../Button"));
+var _excluded = ["active", "style", "padding", "margin", "pages", "className", "onNavigate", "onNext", "onPrevious"];
 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; }
@@ -26,9 +27,13 @@ var Pagination = function Pagination(props) {
     margin = props.margin,
     _props$pages = props.pages,
     pages = _props$pages === void 0 ? 1 : _props$pages,
-    className = props.className;
-  var allPages = (0, _times["default"])(_inc["default"], pages || 1);
-  return /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
+    className = props.className,
+    onNavigate = props.onNavigate,
+    onNext = props.onNext,
+    onPrevious = props.onPrevious,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var allPages = (0, _times["default"])(_inc["default"], pages);
+  return /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, rest, {
     className: className,
     style: _objectSpread({
       padding: padding,
@@ -36,23 +41,26 @@ var Pagination = function Pagination(props) {
     }, style)
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     id: "prev-page-button",
+    "data-testid": "prev-page-button",
     size: "small",
-    onClick: props.onPrevious
-  }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), allPages.map(function (page) {
+    onClick: onPrevious
+  }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), allPages.map(function (page) {
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       size: "small",
+      "data-testid": "pagination-page-".concat(page),
       key: page,
       id: "pagination-page-".concat(page),
       color: page === active ? 'primary' : 'default',
       onClick: function onClick() {
-        return props.onNavigate(page);
+        return onNavigate(page);
       }
     }, page);
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     id: "next-page-button",
+    "data-testid": "next-page-button",
     size: "small",
-    onClick: props.onNext
-  }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)));
+    onClick: onNext
+  }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)));
 };
 var _default = Pagination;
 exports["default"] = _default;

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

@@ -1,4 +1,4 @@
-import type { DefaultProps } from './types';
+import type { DefaultProps } from '../types';
 export interface PaperProps extends DefaultProps {
     square?: boolean;
     elevation?: number;

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

@@ -21,6 +21,7 @@ var Paper = function Paper(_ref) {
     margin = _ref.margin,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Paper["default"], (0, _extends2["default"])({}, otherProps, {
+    role: "mui-paper-container",
     style: _objectSpread({
       padding: padding,
       margin: margin

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface PinInputGridProps {
+export interface PinInputGridProps {
     pin: Array<number | undefined>;
     setPin: (pin: Array<number | undefined>) => void;
     onPinChanged: (pinEntry: number | undefined, index: number) => void;

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

@@ -22,15 +22,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
-var removeValuesFromArray = function removeValuesFromArray(valuesArray, value) {
-  var valueIndex = valuesArray.findIndex(function (entry) {
-    return entry === value;
-  });
-  if (valueIndex === -1) {
-    return;
-  }
-  valuesArray.splice(valueIndex, 1);
-};
 var PIN_MIN_VALUE = 0;
 var PIN_MAX_VALUE = 9;
 var BACKSPACE_KEY = 'Backspace';
@@ -79,9 +70,7 @@ var PinInput = function PinInput(_ref) {
     if (event.target.value.length > 1) {
       return;
     }
-    var previousValue = event.target.defaultValue;
     var valuesArray = event.target.value.split('');
-    removeValuesFromArray(valuesArray, previousValue);
     var value = valuesArray.pop();
     if (!value || value === ' ' || value === '') {
       return;
@@ -141,7 +130,8 @@ var PinInput = function PinInput(_ref) {
       error: validationResult,
       style: getStyleProps(),
       InputProps: {
-        style: getInputProps()
+        style: getInputProps(),
+        role: 'pin-input-field'
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;

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

@@ -1,5 +1,5 @@
-import { DefaultProps } from './types';
-interface ILinear {
+import { DefaultProps } from '../types';
+export interface ILinear {
     color?: 'primary' | 'secondary';
     valueBuffer?: number;
     variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
@@ -10,12 +10,12 @@ interface ILinear {
         barColorSecondary?: string;
     };
 }
-interface ICircular {
+export interface ICircular {
     size?: string | number;
     color?: 'primary' | 'secondary' | 'inherit';
     variant?: 'determinate' | 'indeterminate' | 'static';
 }
-interface ProgressProps extends DefaultProps {
+export interface ProgressProps extends DefaultProps {
     value?: number;
     linear?: boolean;
 }

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

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
-import { DefaultProps } from './types';
-interface RadioProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface RadioProps extends DefaultProps {
     checked?: boolean;
     color?: 'primary' | 'secondary' | 'default';
     value?: string;

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

@@ -1,6 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
-import { DefaultProps } from './types';
-interface RadioGroupProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface RadioGroupProps extends DefaultProps {
     row?: boolean;
     title?: ReactNode;
     name: string;

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

@@ -1,6 +1,6 @@
-import React, { ChangeEvent } from 'react';
-import { DefaultProps } from './types';
-interface SelectProps extends DefaultProps {
+import React from 'react';
+import { DefaultProps } from '../types';
+export interface SelectProps extends DefaultProps {
     autoWidth?: boolean;
     value?: string | number;
     multiple?: boolean;
@@ -9,7 +9,7 @@ interface SelectProps extends DefaultProps {
     children: React.ReactNode;
     onClear?: () => void;
     onClose?: () => void;
-    onChange?: (event: ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void;
+    onChange: (value: string) => void;
 }
-declare const Select: ({ children, style, margin, padding, hasClear, onClear, variant, ...otherProps }: SelectProps) => JSX.Element;
+declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: SelectProps) => JSX.Element;
 export default Select;

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

@@ -14,7 +14,7 @@ var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 var _styles = require("@material-ui/core/styles");
 var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "style", "margin", "padding", "hasClear", "onClear", "variant"];
+var _excluded = ["children", "style", "margin", "padding", "hasClear", "onClear", "onChange", "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 iconStyle = {
@@ -24,6 +24,7 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    role: "end-adornment-component",
     onClick: onClear,
     size: "small"
   }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
@@ -40,6 +41,7 @@ var Select = function Select(_ref) {
     padding = _ref.padding,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    onChange = _ref.onChange,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -55,11 +57,18 @@ var Select = function Select(_ref) {
     };
   });
   var classes = useStyles();
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(onClear)
   } : {};
   return /*#__PURE__*/_react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, endAdornment, {
+    onChange: handleChange,
+    inputProps: {
+      'data-testid': 'select-input'
+    },
     variant: variant,
     classes: {
       root: classes.root,

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

@@ -1,5 +1,5 @@
-import { DefaultProps } from './types';
-import { ButtonProps } from './Button';
+import { DefaultProps } from '../types';
+import { ButtonProps } from '../Button';
 export interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;

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

@@ -13,9 +13,8 @@ var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
 var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
-var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _icons = require("../../icons");
+var _Button = _interopRequireDefault(require("../Button"));
 var _excluded = ["id", "anchor", "className", "color", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "paperClasses", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
 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; }
@@ -110,9 +109,9 @@ var Sidebar = function Sidebar(_ref) {
         maxWidth: minWidth
       },
       onClick: onToggle
-    }, ButtonProps), iconToLeft ? /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], {
+    }, ButtonProps), iconToLeft ? /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, {
       className: classes.icon
-    }) : /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], {
+    }) : /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, {
       className: classes.icon
     })));
   };

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import { DefaultProps } from './types';
-interface SlideProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface SlideProps extends DefaultProps {
     in: boolean;
     direction: 'left' | 'right' | 'up' | 'down';
     timeout?: number | {
         enter?: number;
         exit?: number;
     };
-    children?: React.ReactElement<{}>;
+    children?: React.ReactElement<Record<string, unknown>>;
 }
 declare const Slide: ({ children, direction, margin, padding, style, ...otherProps }: SlideProps) => JSX.Element;
 export default Slide;

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

@@ -15,8 +15,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 Slide = function Slide(_ref) {
   var children = _ref.children,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'down' : _ref$direction,
+    direction = _ref.direction,
     margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,

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

@@ -1,5 +1,5 @@
 import { SliderProps } from '@material-ui/core/Slider';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 interface ISliderProps {
     defaultValue?: number | number[];
 }

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

@@ -1,5 +1,5 @@
 import { ReactNode, FunctionComponent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
 export interface SnackBarProps extends DefaultProps {
     autoHide?: number;

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

@@ -117,6 +117,7 @@ var SnackBar = function SnackBar(props) {
     }, message)),
     action: action || /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       key: "close",
+      role: "close-icon-button",
       "aria-label": "Close",
       color: "inherit",
       onClick: handleClose

package/core/StepCard/StepCardDetails.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StepCardDetails = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
+var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
 var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("../../icons");
@@ -33,33 +32,33 @@ var StepCardDetails = function StepCardDetails(props) {
           onStepUrlClick(step.url);
         }
       };
-      return /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-        key: index,
-        primary: /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
-          style: {
-            color: step.done ? DONE_COLOR : UNDONE_COLOR
-          }
-        }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-          variant: "body1",
-          style: {
-            color: UNDONE_FONT_COLOR,
-            fontWeight: 600
-          }
-        }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-          style: {
-            backgroundColor: 'unset'
-          },
-          onClick: handleOnClickStepUrl
-        }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
-          fontSize: "small",
-          style: {
-            margin: '0px'
-          }
-        }))))
-      });
+      return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
+        key: index
+      }, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
+        style: {
+          color: step.done ? DONE_COLOR : UNDONE_COLOR
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        style: {
+          color: UNDONE_FONT_COLOR,
+          fontWeight: 600
+        }
+      }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        "data-testid": "step-card-button-".concat(index),
+        style: {
+          backgroundColor: 'unset'
+        },
+        onClick: handleOnClickStepUrl
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
+        fontSize: "small",
+        style: {
+          margin: '0px'
+        }
+      }))));
     }));
   };
-  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], (0, _extends2["default"])({
     style: {
       display: 'flex',
       justifyContent: 'space-between'

package/core/StepCard/StepCardPanel.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StepCardPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
 var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _react = _interopRequireDefault(require("react"));
 var _sprintfJs = require("sprintf-js");
@@ -39,6 +39,7 @@ var StepCardPanel = function StepCardPanel(props) {
     padding = props.padding;
   var TitleIcon = function TitleIcon() {
     return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
+      "data-testid": "step-card-title-icon",
       style: {
         fontSize: 40,
         color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
@@ -68,7 +69,7 @@ var StepCardPanel = function StepCardPanel(props) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon && /*#__PURE__*/_react["default"].createElement(TitleIcon, null), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null), subTitle && /*#__PURE__*/_react["default"].createElement(SubTitle, null)));
   };
   var Summary = function Summary() {
-    return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_AccordionSummary["default"], {
       style: {
         textAlign: 'center'
       },
@@ -95,7 +96,9 @@ var StepCardPanel = function StepCardPanel(props) {
     }, summaryLinearProgressBarProps));
   };
   var NormalProgress = function NormalProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
+      "data-testid": "normal-progress"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
       variant: "h6"
     }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       variant: "subtitle2",

package/core/{StepCardSkeleton.d.ts → StepCard/StepCardSkeleton.d.ts}

@@ -7,6 +7,7 @@ interface IStepCardPanelProps {
     padding?: React.CSSProperties['padding'];
     margin?: React.CSSProperties['margin'];
     fullWidth?: boolean;
+    subTitleSkeleton?: boolean;
 }
 declare const StepCardSkeleton: (props: IStepCardPanelProps) => JSX.Element;
 export default StepCardSkeleton;