flipper-ui 0.27.2 → 0.28.0

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;

package/core/{StepCardSkeleton.js → StepCard/StepCardSkeleton.js}

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
 var _lab = require("@material-ui/lab");
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("./StepCard/styles");
+var _styles = require("./styles");
 var StepCardSkeleton = function StepCardSkeleton(props) {
   var expandable = props.expandable,
     showBottomPercentage = props.showBottomPercentage,
     showIcon = props.showIcon,
-    subTitle = props.subTitle,
+    subTitleSkeleton = props.subTitleSkeleton,
     padding = props.padding,
     margin = props.margin,
     fullWidth = props.fullWidth;
@@ -44,9 +44,10 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     })));
   };
   return /*#__PURE__*/_react["default"].createElement(_styles.Container, {
+    "data-testid": "skeleton-container",
     margin: margin,
     fullWidth: fullWidth
-  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(_Accordion["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
     padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
@@ -57,7 +58,7 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     variant: "circle",
     width: 40,
     height: 40
-  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TextSkeleton, null), subTitle && /*#__PURE__*/_react["default"].createElement(TextSkeleton, null))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TextSkeleton, null), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(TextSkeleton, null))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
   }, expandable ? /*#__PURE__*/_react["default"].createElement(TextSkeleton, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     minHeight: "15px",

package/core/StepCard/index.d.ts

@@ -1,5 +1,4 @@
-import { LinearProgress } from '@material-ui/core';
-import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import { LinearProgress, AccordionDetails as MuiAccordionDetails } from '@material-ui/core';
 import React from 'react';
 import Typography from '../Typography';
 import { PropWithDataCy } from '../types';
@@ -151,7 +150,7 @@ export interface IStepCardProps {
      * @type {(typeof MuiExpansionPanel | undefined)}
      * @memberof IStepCardProps
      */
-    expansionPanelDetailsProps?: PropWithDataCy<typeof MuiExpansionPanelDetails>;
+    expansionPanelDetailsProps?: PropWithDataCy<typeof MuiAccordionDetails>;
     /**
      * Props to be passed to the linear progress bar
      * @type {(typeof LinearProgress | undefined)}
@@ -190,6 +189,13 @@ export interface IStepCardProps {
      * @memberof IStepCardProps
      */
     margin?: React.CSSProperties['margin'];
+    /**
+     * Whether to show the sub title skeleton
+     * @type {boolean}
+     * @memberof IStepCardProps
+     * @default false
+     */
+    showSubTitleSkeleton?: boolean;
     /**
      * Callback to be called when the user clicks on a step url
      * @memberof IStepCardProps
@@ -231,5 +237,5 @@ export interface IStepCardProps {
  *   defaultExpanded={false}
  * />
  */
-declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, onChange }: IStepCardProps) => JSX.Element;
+declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, showSubTitleSkeleton, onChange }: IStepCardProps) => JSX.Element;
 export default StepCard;

package/core/StepCard/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
 var _react = _interopRequireDefault(require("react"));
-var _StepCardSkeleton = _interopRequireDefault(require("../StepCardSkeleton"));
+var _StepCardSkeleton = _interopRequireDefault(require("./StepCardSkeleton"));
 var _StepCardDetails = require("./StepCardDetails");
 var _StepCardPanel = require("./StepCardPanel");
 var _styles = require("./styles");
@@ -75,16 +75,19 @@ var StepCard = function StepCard(_ref) {
     fullWidth = _ref.fullWidth,
     padding = _ref.padding,
     margin = _ref.margin,
+    _ref$showSubTitleSkel = _ref.showSubTitleSkeleton,
+    showSubTitleSkeleton = _ref$showSubTitleSkel === void 0 ? false : _ref$showSubTitleSkel,
     onChange = _ref.onChange;
   return loading ? /*#__PURE__*/_react["default"].createElement(_StepCardSkeleton["default"], {
     expandable: expandable,
+    subTitleSkeleton: showSubTitleSkeleton,
     showIcon: showIcon,
     showBottomPercentage: showBottomPercentage,
     fullWidth: fullWidth
   }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, (0, _extends2["default"])({
     margin: margin,
     fullWidth: fullWidth
-  }, rootProps), /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, expanded ? {
+  }, rootProps), /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, expanded ? {
     expanded: expanded
   } : {}, {
     onChange: onChange

package/core/StepCard/styles.d.ts

@@ -17,7 +17,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const StepCardRow: import("styled-components").StyledComponent<"div", any, IRowProps, never>;
 export declare const StepContainer: import("styled-components").StyledComponent<"div", any, IStepContainerProps, never>;
 export declare const StepCardColumn: import("styled-components").StyledComponent<"div", any, IColumnProps, never>;
-export declare const ListItemContainer: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const ListItemContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NormalProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BarWrapper: import("styled-components").StyledComponent<import("react").ComponentType<import("@material-ui/core").BoxProps>, any, {}, never>;

package/core/StepCard/styles.js

@@ -36,9 +36,9 @@ var StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_temp
   }
 });
 exports.StepCardColumn = StepCardColumn;
-var ListItemContainer = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
+var ListItemContainer = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
 exports.ListItemContainer = ListItemContainer;
-var TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span:first-child {\n        margin-left: 20px;\n    }\n"])));
+var TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
 exports.TitleContainer = TitleContainer;
 var NormalProgressContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n\n    h6:first-child {\n        margin-bottom: 8px;\n    }\n"])));
 exports.NormalProgressContainer = NormalProgressContainer;

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

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 export interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;

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

@@ -19,16 +19,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var isActive = function isActive(index, active) {
   return active !== undefined ? active >= index : undefined;
 };
-var Stepper = function Stepper(_ref) {
-  var active = _ref.active,
-    bottomLabel = _ref.bottomLabel,
-    steps = _ref.steps,
-    padding = _ref.padding,
-    margin = _ref.margin,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var StepIcon = function StepIcon(_ref) {
+  var icon = _ref.icon,
+    active = _ref.active;
+  if (typeof icon === 'function') {
+    return icon(active);
+  }
+  return /*#__PURE__*/_react["default"].cloneElement(icon, {
+    active: String(active),
+    color: active ? 'primary' : 'disabled'
+  });
+};
+var Stepper = function Stepper(_ref2) {
+  var active = _ref2.active,
+    bottomLabel = _ref2.bottomLabel,
+    steps = _ref2.steps,
+    padding = _ref2.padding,
+    margin = _ref2.margin,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], (0, _extends2["default"])({
+    role: "stepper-container",
     alternativeLabel: bottomLabel,
     activeStep: active,
     style: _objectSpread({
@@ -39,9 +51,9 @@ var Stepper = function Stepper(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_Step["default"], {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], {
-      icon: (0, _typeof2["default"])(step) === 'object' ? typeof step.icon === 'function' ? step.icon(isActive(index, active)) : /*#__PURE__*/_react["default"].cloneElement(step.icon, {
-        active: isActive(index, active),
-        color: isActive(index, active) ? 'primary' : 'default'
+      icon: (0, _typeof2["default"])(step) === 'object' ? /*#__PURE__*/_react["default"].createElement(StepIcon, {
+        icon: step.icon,
+        active: !!isActive(index, active)
       }) : index + 1
     }, (0, _typeof2["default"])(step) === 'object' ? step.label : step));
   }));

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

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 interface TabProps extends DefaultProps {
     disabled?: boolean;
     icon?: string | JSX.Element;

package/core/{TableBody.d.ts → Table/TableBody.d.ts}

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

package/core/{TableCell.d.ts → Table/TableCell.d.ts}

@@ -1,5 +1,5 @@
 import { TableCellProps as MuiTableCellProps } from '@material-ui/core/TableCell';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { Omit } from 'ramda';
 interface TableCellProps extends DefaultProps {
     numeric?: boolean;

package/core/{TableHead.d.ts → Table/TableHead.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 interface TableHeadProps extends DefaultProps, ISort {
     color?: 'primary' | 'secondary' | 'default' | 'inherit';
     classes: {

package/core/{TableRow.d.ts → Table/TableRow.d.ts}

@@ -1,6 +1,6 @@
 import { TableRowProps as MuiTableRowProps } from '@material-ui/core/TableRow';
 import { MouseEvent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 interface TableRowProps extends DefaultProps {
     selected?: boolean;
     hover?: boolean;

package/core/{TableRow.js → Table/TableRow.js}

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("../colors");
+var _colors = require("../../colors");
 var _excluded = ["style", "margin", "padding", "children", "background"];
 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/{Table.d.ts → Table/index.d.ts}

@@ -1,6 +1,6 @@
 import { TableProps as MuiTableProps } from '@material-ui/core/Table';
-import { DefaultProps } from './types';
-interface TableProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface TableProps extends DefaultProps {
     spacing?: MuiTableProps['padding'];
 }
 declare const Table: ({ style, margin, padding, spacing, children, ...otherProps }: MuiTableProps & TableProps) => JSX.Element;

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

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("../colors");
+var _colors = require("../../colors");
 var _excluded = ["style", "margin", "padding", "spacing", "children"];
 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; }