flipper-ui 0.26.20 → 0.26.22

package/core/PinInput.js

@@ -58,7 +58,7 @@ var PinInput = function PinInput(_ref) {
   }, [isValidating]);
   var onPaste = function onPaste(event) {
     var pastedValue = event.clipboardData.getData('text/plain');
-    var splitValues = pastedValue.split('');
+    var splitValues = pastedValue.trim().split('');
     var intValues = [];
     var _iterator = _createForOfIteratorHelper(splitValues),
       _step;

package/core/StepCard/index.d.ts

@@ -9,6 +9,27 @@ import { PropWithDataCy } from '../types';
  * @interface IStepCardProps
  */
 export interface IStepCardProps {
+    /**
+     * Whether the step card expansion panel is initially expanded or not
+     * @type {boolean}
+     * @memberof IStepCardProps
+     * @default undefined
+     */
+    expanded?: boolean;
+    /**
+     * Callback fired when the expansion state changes
+     * @type {(event: React.ChangeEvent<{}>, expanded: boolean) => void}
+     * @memberof IStepCardProps
+     * @default undefined
+     * @example
+     * const handleChange = (event: React.ChangeEvent<{}>, expanded: boolean) => {
+     *    setExpanded(expanded)
+     * }
+     * <StepCard onChange={handleChange} />
+     * @example
+     * <StepCard onChange={(event, expanded) => setExpanded(expanded)} />
+     */
+    onChange?: (event: React.ChangeEvent<Record<string, unknown>>, expanded: boolean) => void;
     /**
      * Whether the step card is full width
      * @type {boolean}
@@ -203,5 +224,5 @@ export interface IStepCardProps {
  *   defaultExpanded={false}
  * />
  */
-declare const StepCard: (props: 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, onChange }: IStepCardProps) => JSX.Element;
 export default StepCard;

package/core/StepCard/index.js

@@ -45,48 +45,57 @@ var _styles = require("./styles");
  *   defaultExpanded={false}
  * />
  */
-var StepCard = function StepCard(props) {
-  var _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    percentage = props.percentage,
-    time = props.time,
-    steps = props.steps,
-    remainingSteps = props.remainingSteps,
-    title = props.title,
-    titleProps = props.titleProps,
-    subTitle = props.subTitle,
-    image = props.image,
-    _props$showBottomPerc = props.showBottomPercentage,
-    showBottomPercentage = _props$showBottomPerc === void 0 ? true : _props$showBottomPerc,
-    _props$expandable = props.expandable,
-    expandable = _props$expandable === void 0 ? true : _props$expandable,
-    _props$showIcon = props.showIcon,
-    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
-    summary = props.summary,
-    summaryProps = props.summaryProps,
-    expansionPanelDetailsProps = props.expansionPanelDetailsProps,
-    linearProgressBarProps = props.linearProgressBarProps,
-    summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
-    rootProps = props.rootProps,
-    onStepUrlClick = props.onStepUrlClick,
-    fullWidth = props.fullWidth,
-    padding = props.padding,
-    margin = props.margin;
+var StepCard = function StepCard(_ref) {
+  var expanded = _ref.expanded,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    percentage = _ref.percentage,
+    _ref$time = _ref.time,
+    time = _ref$time === void 0 ? 0 : _ref$time,
+    steps = _ref.steps,
+    _ref$remainingSteps = _ref.remainingSteps,
+    remainingSteps = _ref$remainingSteps === void 0 ? 0 : _ref$remainingSteps,
+    title = _ref.title,
+    titleProps = _ref.titleProps,
+    subTitle = _ref.subTitle,
+    image = _ref.image,
+    _ref$showBottomPercen = _ref.showBottomPercentage,
+    showBottomPercentage = _ref$showBottomPercen === void 0 ? true : _ref$showBottomPercen,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? true : _ref$expandable,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    summary = _ref.summary,
+    summaryProps = _ref.summaryProps,
+    expansionPanelDetailsProps = _ref.expansionPanelDetailsProps,
+    linearProgressBarProps = _ref.linearProgressBarProps,
+    summaryLinearProgressBarProps = _ref.summaryLinearProgressBarProps,
+    rootProps = _ref.rootProps,
+    onStepUrlClick = _ref.onStepUrlClick,
+    fullWidth = _ref.fullWidth,
+    padding = _ref.padding,
+    margin = _ref.margin,
+    onChange = _ref.onChange;
   return loading ? /*#__PURE__*/_react["default"].createElement(_StepCardSkeleton["default"], {
     expandable: expandable,
     showIcon: showIcon,
-    showBottomPercentage: showBottomPercentage
+    showBottomPercentage: showBottomPercentage,
+    fullWidth: fullWidth
   }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, (0, _extends2["default"])({
     margin: margin,
     fullWidth: fullWidth
-  }, rootProps), /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
+  }, rootProps), /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, expanded ? {
+    expanded: expanded
+  } : {}, {
+    onChange: onChange
+  }), /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
     fullWidth: fullWidth,
     title: title,
     padding: padding,
     summary: summary,
     expandable: expandable,
-    remainingSteps: remainingSteps || 0,
-    time: time || 0,
+    remainingSteps: remainingSteps,
+    time: time,
     showIcon: showIcon,
     showBottomPercentage: showBottomPercentage,
     subTitle: subTitle,

package/core/StepCardSkeleton.d.ts

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

package/core/StepCardSkeleton.js

@@ -16,7 +16,8 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     showIcon = props.showIcon,
     subTitle = props.subTitle,
     padding = props.padding,
-    margin = props.margin;
+    margin = props.margin,
+    fullWidth = props.fullWidth;
   var TextSkeleton = function TextSkeleton() {
     return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
       variant: "text",
@@ -43,10 +44,12 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     })));
   };
   return /*#__PURE__*/_react["default"].createElement(_styles.Container, {
-    margin: margin
+    margin: margin,
+    fullWidth: fullWidth
   }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
     padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+    fullWidth: fullWidth,
     minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
@@ -57,7 +60,8 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
   }), /*#__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, {
     justifyContent: "end"
   }, expandable ? /*#__PURE__*/_react["default"].createElement(TextSkeleton, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
-    minHeight: "15px"
+    minHeight: "15px",
+    fullWidth: fullWidth
   }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     style: {
       width: '100%'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.20",
+    "version": "0.26.22",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",