flipper-ui 0.27.2 → 0.29.0

package/core/{ExpansionPanel.js → surfaces/expansion-panel/index.js}

@@ -4,18 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ExpansionPanel = 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 _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
-var _ExpansionPanelActions = _interopRequireDefault(require("@material-ui/core/ExpansionPanelActions"));
+var _AccordionActions = _interopRequireDefault(require("@material-ui/core/AccordionActions"));
 var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
 var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _TextField = require("./TextField");
+var _textField = require("@/core/inputs/text-field");
 var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "onClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
 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; }
@@ -70,20 +70,20 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
       onSaveClick();
     }
   };
-  var renderHelper = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, onHelperClick && /*#__PURE__*/_react["default"].createElement(_TextField.HelperBox, {
+  var renderHelper = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, onHelperClick && /*#__PURE__*/_react["default"].createElement(_textField.HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));
-  var renderEdit = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, editable && /*#__PURE__*/_react["default"].createElement(_TextField.EditBox, {
+  var renderEdit = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, editable && /*#__PURE__*/_react["default"].createElement(_textField.EditBox, {
     editing: !!editing,
     style: editStyle,
     onEditClick: handleEditClick,
     onSaveClick: handleSaveClick,
     saveButtonProps: {
-      'data-cy': 'save-button'
+      role: 'save-button'
     },
     editButtonProps: {
-      'data-cy': 'edit-button'
+      role: 'edit-button'
     }
   }));
   return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, otherProps, {
@@ -97,9 +97,10 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     style: summaryStyle
   }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
     style: detailsStyle
-  }, details), actions && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelActions["default"], {
+  }, details), actions && /*#__PURE__*/_react["default"].createElement(_AccordionActions["default"], {
     style: actionsStyle
   }, actions));
 };
+exports.ExpansionPanel = ExpansionPanel;
 var _default = ExpansionPanel;
 exports["default"] = _default;

package/core/surfaces/header/header.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/surfaces/header/header.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").HeaderProps>;
+export default _default;
+export declare const Default: any;
+export declare const Primary: any;
+export declare const Secondary: any;

package/core/surfaces/header/index.d.ts

@@ -0,0 +1,8 @@
+import { AppBarProps } from '@material-ui/core';
+import { PaperProps } from '@/core/surfaces/paper';
+export interface HeaderProps extends Omit<PaperProps, 'classes'>, AppBarProps {
+    position?: 'absolute' | 'fixed' | 'static' | 'sticky';
+    color?: 'default' | 'inherit' | 'primary' | 'secondary';
+}
+export declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => JSX.Element;
+export default Header;

package/core/{Header.js → surfaces/header/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Header = 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"));
@@ -31,5 +31,6 @@ var Header = function Header(_ref) {
     }, style)
   }), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], null, children));
 };
+exports.Header = Header;
 var _default = Header;
 exports["default"] = _default;

package/core/surfaces/paper/index.d.ts

@@ -0,0 +1,8 @@
+import { PaperProps as MuiPaperProps } from '@material-ui/core';
+import type { DefaultProps } from '../../types';
+export interface PaperProps extends DefaultProps, MuiPaperProps {
+    square?: boolean;
+    elevation?: number;
+}
+export declare const Paper: ({ children, style, padding, margin, ...otherProps }: PaperProps) => JSX.Element;
+export default Paper;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Paper = 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"));
@@ -21,11 +21,13 @@ 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
     }, style)
   }), children);
 };
+exports.Paper = Paper;
 var _default = Paper;
 exports["default"] = _default;

package/core/surfaces/paper/paper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/surfaces/paper/paper.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").PaperProps>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Square: any;
+export declare const NoElevated: any;
+export declare const Elevated: any;
+export declare const MaxEletavion: any;

package/core/{StepCard → surfaces/step-card}/index.d.ts

@@ -1,8 +1,6 @@
-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';
+import Typography from '@/core/data-display/typography';
 /**
  * Props for the StepCard component
  *
@@ -138,32 +136,32 @@ export interface IStepCardProps {
      * @type {(typeof Typography | undefined)}
      * @memberof IStepCardProps
      */
-    titleProps?: PropWithDataCy<typeof Typography>;
+    titleProps?: typeof Typography;
     /**
      * Props to be passed to the summary typography
      *
      * @type {(typeof Typography | undefined)}
      * @memberof IStepCardProps
      */
-    summaryProps?: PropWithDataCy<typeof Typography>;
+    summaryProps?: typeof Typography;
     /**
      * Props to be passed to the expansion panel details
      * @type {(typeof MuiExpansionPanel | undefined)}
      * @memberof IStepCardProps
      */
-    expansionPanelDetailsProps?: PropWithDataCy<typeof MuiExpansionPanelDetails>;
+    expansionPanelDetailsProps?: typeof MuiAccordionDetails;
     /**
      * Props to be passed to the linear progress bar
      * @type {(typeof LinearProgress | undefined)}
      * @memberof IStepCardProps
      */
-    linearProgressBarProps?: PropWithDataCy<typeof LinearProgress>;
+    linearProgressBarProps?: typeof LinearProgress;
     /**
      * Props to be passed to the expansion panel summary linear progress bar
      * @type {(typeof LinearProgress | undefined)}
      * @memberof IStepCardProps
      */
-    summaryLinearProgressBarProps?: PropWithDataCy<typeof LinearProgress>;
+    summaryLinearProgressBarProps?: typeof LinearProgress;
     /**
      * Whether the expansion panel is expandable
      * @type {boolean}
@@ -190,6 +188,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 +236,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;
+export 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 → surfaces/step-card}/index.js

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.StepCard = 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 _StepCardDetails = require("./StepCardDetails");
-var _StepCardPanel = require("./StepCardPanel");
+var _stepCardSkeleton = _interopRequireDefault(require("./step-card-skeleton"));
+var _stepCardDetails = require("./step-card-details");
+var _stepCardPanel = require("./step-card-panel");
 var _styles = require("./styles");
 /**
  * StepCard is a reusable component that displays a card with a title, a summary,
@@ -75,20 +75,23 @@ 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"], {
+  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
-  }), /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
+  }), /*#__PURE__*/_react["default"].createElement(_stepCardPanel.StepCardPanel, {
     fullWidth: fullWidth,
     title: title,
     padding: padding,
@@ -104,12 +107,13 @@ var StepCard = function StepCard(_ref) {
     summaryProps: summaryProps,
     summaryLinearProgressBarProps: summaryLinearProgressBarProps,
     linearProgressBarProps: linearProgressBarProps
-  }), expandable && /*#__PURE__*/_react["default"].createElement(_StepCardDetails.StepCardDetails, {
+  }), expandable && /*#__PURE__*/_react["default"].createElement(_stepCardDetails.StepCardDetails, {
     steps: steps,
     image: image,
     expansionPanelDetailsProps: expansionPanelDetailsProps,
     onStepUrlClick: onStepUrlClick
   })));
 };
+exports.StepCard = StepCard;
 var _default = StepCard;
 exports["default"] = _default;

package/core/{StepCard/StepCardDetails.js → surfaces/step-card/step-card-details.js}

@@ -7,13 +7,12 @@ 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");
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _icons = require("@/icons");
+var _iconButton = _interopRequireDefault(require("@/core/inputs/icon-button"));
+var _typography = _interopRequireDefault(require("@/core/data-display/typography"));
 var _styles = require("./styles");
 var _theme$colors = _nginformaticaStyleguide.theme.colors,
   feedback = _theme$colors.feedback,
@@ -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 → surfaces/step-card/step-card-panel.js}

@@ -7,12 +7,12 @@ 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");
-var _icons = require("../../icons");
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _icons = require("@/icons");
+var _typography = _interopRequireDefault(require("@/core/data-display/typography"));
 var _styles = require("./styles");
 var _theme$colors = _nginformaticaStyleguide.theme.colors,
   feedback = _theme$colors.feedback,
@@ -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
@@ -46,7 +47,7 @@ var StepCardPanel = function StepCardPanel(props) {
     });
   };
   var Title = function Title() {
-    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
       variant: "h6",
       style: {
         color: UNDONE_TITLE_COLOR,
@@ -56,7 +57,7 @@ var StepCardPanel = function StepCardPanel(props) {
     }, titleProps), title);
   };
   var SubTitle = function SubTitle() {
-    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
       variant: "h6",
       style: {
         color: UNDONE_COLOR,
@@ -68,14 +69,14 @@ 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'
       },
       expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
         fontSize: "large"
       })
-    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
       variant: "h6"
     }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time)));
   };
@@ -95,9 +96,11 @@ 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"], {
+    }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
       variant: "subtitle2",
       style: {
         position: 'absolute',

package/core/{StepCardSkeleton.d.ts → surfaces/step-card/step-card-skeleton.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 → surfaces/step-card/step-card-skeleton.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/surfaces/step-card/step-card.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/surfaces/step-card/step-card.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").IStepCardProps>;
+export default _default;
+export declare const Default: any;
+export declare const WithoutExpandable: any;
+export declare const WithLoading: any;

package/core/{StepCard → surfaces/step-card}/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 → surfaces/step-card}/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/types.d.ts

@@ -1,16 +1,38 @@
 import type { CSSProperties } from 'react';
 export interface DefaultProps {
+    /**
+     * The children of the component.
+     * @optional
+     */
     children?: React.ReactNode;
+    /**
+     * The style of the component.
+     * @optional
+     */
     style?: CSSProperties;
+    /**
+     * The class name of the component.
+     * @optional
+     */
     className?: string;
+    /**
+     * The id of the component.
+     * @optional
+     */
     margin?: number | string;
+    /**
+     * The padding of the component.
+     * @optional
+     */
     padding?: number | string;
+    /**
+     * The name of the component.
+     * @optional
+     */
     name?: string;
+    /**
+     * The id of the component.
+     * @optional
+     */
     id?: string;
 }
-export interface HTMLElementWithDataCy<T> extends React.HTMLAttributes<T> {
-    'data-cy': string;
-}
-export type PropWithDataCy<T> = Partial<T> & {
-    'data-cy': string;
-};

package/experimental/actions/actions.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/experimental/actions/actions.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").IProps>;
+export default _default;
+export declare const Default: any;

package/{Experimental/Actions → experimental/actions}/index.d.ts

@@ -25,5 +25,5 @@ interface IWrapper {
     align: IProps['align'];
 }
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, IWrapper, never>;
-declare const Actions: (props: IProps) => JSX.Element;
+export declare const Actions: (props: IProps) => JSX.Element;
 export default Actions;

package/{Experimental/Actions → experimental/actions}/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Wrapper = void 0;
+exports["default"] = exports.Wrapper = exports.Actions = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _index = require("@/index");
 var _react = _interopRequireDefault(require("react"));
@@ -37,5 +37,6 @@ var Actions = function Actions(props) {
     onClick: props.onConfirm
   }, props.labels ? props.labels.confirm : 'Confirmar'));
 };
+exports.Actions = Actions;
 var _default = Actions;
 exports["default"] = _default;

package/experimental/auto-complete-lab/auto-complete-lab.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@/core/inputs/auto-complete").AutoCompleteProps>;
+export default _default;
+export declare const Default: () => JSX.Element;

package/{lab/Autocomplete.d.ts → experimental/auto-complete-lab/index.d.ts}

@@ -1,4 +1,4 @@
 import { default as MuiAutocomplete } from '@material-ui/lab/Autocomplete';
 export { AutocompleteRenderInputParams, AutocompleteProps, AutocompleteCloseReason, AutocompleteChangeReason, AutocompleteInputChangeReason } from '@material-ui/lab/Autocomplete';
-declare const Autocomplete: typeof MuiAutocomplete;
+export declare const Autocomplete: typeof MuiAutocomplete;
 export default Autocomplete;

package/{lab/Autocomplete.js → experimental/auto-complete-lab/index.js}

@@ -5,6 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Autocomplete = void 0;
 Object.defineProperty(exports, "AutocompleteChangeReason", {
   enumerable: true,
   get: function get() {
@@ -64,5 +65,6 @@ var Autocomplete = function Autocomplete(props) {
     }, classes)
   }));
 };
+exports.Autocomplete = Autocomplete;
 var _default = Autocomplete;
 exports["default"] = _default;

package/experimental/avatar/avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/experimental/avatar/avatar.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").IProps>;
+export default _default;
+export declare const simpleAvatar: any;
+export declare const withCustomSize: any;
+export declare const withoutImage: any;