flipper-ui 0.26.19 → 0.26.21

package/core/StepCard/StepCardDetails.js

@@ -27,7 +27,7 @@ var StepCardDetails = function StepCardDetails(props) {
     image = props.image,
     expansionPanelDetailsProps = props.expansionPanelDetailsProps;
   var StepsList = function StepsList() {
-    return /*#__PURE__*/_react["default"].createElement(_List["default"], null, steps.map(function (step, index) {
+    return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
       var handleOnClickStepUrl = function handleOnClickStepUrl() {
         if (onStepUrlClick && step.url) {
           onStepUrlClick(step.url);

package/core/StepCard/StepCardPanel.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IStepCardProps } from '.';
 interface IStepCardPanelProps {
     title: string;
@@ -14,6 +15,7 @@ interface IStepCardPanelProps {
     showIcon: boolean;
     subTitle?: string;
     fullWidth?: boolean;
+    padding?: React.CSSProperties['padding'];
 }
 export declare const StepCardPanel: (props: IStepCardPanelProps) => JSX.Element;
 export {};

package/core/StepCard/StepCardPanel.js

@@ -35,7 +35,8 @@ var StepCardPanel = function StepCardPanel(props) {
     showIcon = props.showIcon,
     subTitle = props.subTitle,
     titleProps = props.titleProps,
-    fullWidth = props.fullWidth;
+    fullWidth = props.fullWidth,
+    padding = props.padding;
   var TitleIcon = function TitleIcon() {
     return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
       style: {
@@ -119,17 +120,17 @@ var StepCardPanel = function StepCardPanel(props) {
     }, linearProgressBarProps));
   };
   return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
-    withPadding: !expandable
+    padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
-    height: expandable ? '100px' : '100%'
+    minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
   }, /*#__PURE__*/_react["default"].createElement(TitleColumn, null)), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
   }, expandable ? /*#__PURE__*/_react["default"].createElement(Summary, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
-    height: "15px"
+    minHeight: "15px"
   }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
 };
 exports.StepCardPanel = StepCardPanel;

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}
@@ -75,13 +96,13 @@ export interface IStepCardProps {
      * @type {number}
      * @memberof IStepCardProps
      */
-    remainingSteps: number;
+    remainingSteps?: number;
     /**
      * The time in seconds to be displayed on the expansion panel summary
      * @type {number}
      * @memberof IStepCardProps
      */
-    time: number;
+    time?: number;
     /**
      * An array of steps, each with a title, a done flag and an optional url
      *
@@ -92,7 +113,7 @@ export interface IStepCardProps {
      *     }]
      * @memberof IStepCardProps
      */
-    steps: {
+    steps?: {
         title: string;
         done: boolean;
         url?: string;
@@ -119,7 +140,7 @@ export interface IStepCardProps {
      */
     summaryProps?: PropWithDataCy<typeof Typography>;
     /**
-     * Props to be passed to the expansion panel
+     * Props to be passed to the expansion panel details
      * @type {(typeof MuiExpansionPanel | undefined)}
      * @memberof IStepCardProps
      */
@@ -150,6 +171,18 @@ export interface IStepCardProps {
      * @default true
      */
     showIcon?: boolean;
+    /**
+     * Padding applied to the root element
+     * @type {React.CSSProperties['padding']}
+     * @memberof IStepCardProps
+     */
+    padding?: React.CSSProperties['padding'];
+    /**
+     * Margin applied to the root element
+     * @type {React.CSSProperties['margin']}
+     * @memberof IStepCardProps
+     */
+    margin?: React.CSSProperties['margin'];
     /**
      * Callback to be called when the user clicks on a step url
      * @memberof IStepCardProps
@@ -164,6 +197,11 @@ export interface IStepCardProps {
  * The expandable panel displays a list of steps, each with a title, a done flag,
  * and an optional url.
  *
+ * @Storybook https://flipper-ui.ngi.com.br/?path=/story/stepcard--default
+ *
+ * @Source
+ * https://github.com/nginformatica/flipper-ui/blob/master/src/core/StepCard
+ *
  * @example
  * <StepCard
  *   showBottomPercentage={true}
@@ -186,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

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
 var _react = _interopRequireDefault(require("react"));
-var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+var _StepCardSkeleton = _interopRequireDefault(require("../StepCardSkeleton"));
 var _StepCardDetails = require("./StepCardDetails");
 var _StepCardPanel = require("./StepCardPanel");
 var _styles = require("./styles");
@@ -18,6 +18,11 @@ var _styles = require("./styles");
  * The expandable panel displays a list of steps, each with a title, a done flag,
  * and an optional url.
  *
+ * @Storybook https://flipper-ui.ngi.com.br/?path=/story/stepcard--default
+ *
+ * @Source
+ * https://github.com/nginformatica/flipper-ui/blob/master/src/core/StepCard
+ *
  * @example
  * <StepCard
  *   showBottomPercentage={true}
@@ -40,40 +45,53 @@ 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;
-  return loading ? /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+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,

package/core/StepCard/styles.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 interface IStepContainerProps {
-    withPadding?: boolean;
+    padding?: React.CSSProperties['padding'];
 }
 interface IRowProps {
-    height: React.CSSProperties['maxHeight'];
+    minHeight: React.CSSProperties['minHeight'];
     fullWidth?: boolean;
 }
 interface IContainerProps {
     fullWidth?: boolean;
+    margin?: React.CSSProperties['margin'];
 }
 interface IColumnProps {
     justifyContent: React.CSSProperties['justifyContent'];

package/core/StepCard/styles.js

@@ -10,22 +10,20 @@ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n"])), function (props) {
+var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n    ", "\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
 exports.Container = Container;
-var StepCardRow = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n    max-width: ", ";\n    height: ", ";\n"])), function (props) {
+var StepCardRow = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n    max-width: ", ";\n    min-height: ", ";\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
 }, function (props) {
-  return props.height;
+  return props.minHeight;
 });
 exports.StepCardRow = StepCardRow;
 var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    ", "\n"])), function (props) {
-  if (props.withPadding) {
-    return "\n                padding: 20px;\n            ";
-  } else {
-    return '';
-  }
+  return props.padding ? "padding: ".concat(props.padding, ";") : '';
 });
 exports.StepContainer = StepContainer;
 var StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    padding-inline: 30px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) {

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

@@ -1,8 +1,12 @@
+import React from 'react';
 interface IStepCardPanelProps {
     expandable: boolean;
     showBottomPercentage: boolean;
     showIcon: boolean;
     subTitle?: boolean;
+    padding?: React.CSSProperties['padding'];
+    margin?: React.CSSProperties['margin'];
+    fullWidth?: boolean;
 }
 declare const StepCardSkeleton: (props: IStepCardPanelProps) => JSX.Element;
 export default StepCardSkeleton;

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

@@ -9,12 +9,15 @@ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
 var _lab = require("@material-ui/lab");
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
+var _styles = require("./StepCard/styles");
 var StepCardSkeleton = function StepCardSkeleton(props) {
   var expandable = props.expandable,
     showBottomPercentage = props.showBottomPercentage,
     showIcon = props.showIcon,
-    subTitle = props.subTitle;
+    subTitle = props.subTitle,
+    padding = props.padding,
+    margin = props.margin,
+    fullWidth = props.fullWidth;
   var TextSkeleton = function TextSkeleton() {
     return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
       variant: "text",
@@ -40,10 +43,14 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
       variant: "text"
     })));
   };
-  return /*#__PURE__*/_react["default"].createElement(_styles.Container, null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
-    withPadding: !expandable
+  return /*#__PURE__*/_react["default"].createElement(_styles.Container, {
+    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, {
-    height: expandable ? '100px' : '100%'
+    fullWidth: fullWidth,
+    minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
   }, showIcon && /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
@@ -53,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, {
-    height: "15px"
+    minHeight: "15px",
+    fullWidth: fullWidth
   }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     style: {
       width: '100%'

package/index.d.ts

@@ -61,4 +61,4 @@ export { default as PinInput } from './core/PinInput';
 export { default as Chapter } from './core/Chapter';
 export { default as DataTable } from './core/DataTable';
 export { default as StepCard } from './core/StepCard';
-export { default as StepCardSkeleton } from './core/StepCard/Skeleton';
+export { default as StepCardSkeleton } from './core/StepCardSkeleton';

package/index.js

@@ -295,7 +295,7 @@ Object.defineProperty(exports, "StepCard", {
 Object.defineProperty(exports, "StepCardSkeleton", {
   enumerable: true,
   get: function get() {
-    return _Skeleton["default"];
+    return _StepCardSkeleton["default"];
   }
 });
 Object.defineProperty(exports, "Stepper", {
@@ -451,4 +451,4 @@ var _PinInput = _interopRequireDefault(require("./core/PinInput"));
 var _Chapter = _interopRequireDefault(require("./core/Chapter"));
 var _DataTable = _interopRequireDefault(require("./core/DataTable"));
 var _StepCard = _interopRequireDefault(require("./core/StepCard"));
-var _Skeleton = _interopRequireDefault(require("./core/StepCard/Skeleton"));
+var _StepCardSkeleton = _interopRequireDefault(require("./core/StepCardSkeleton"));

package/lib/images.d.ts

@@ -0,0 +1 @@
+export declare const stepCardImageUrl: any;

package/lib/images.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stepCardImageUrl = void 0;
+var _stepCardImage = _interopRequireDefault(require("../images/stepCardImage.svg"));
+var stepCardImageUrl = _stepCardImage["default"];
+exports.stepCardImageUrl = stepCardImageUrl;

package/package.json

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

package/stories/StepCard.stories.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _StepCard = _interopRequireDefault(require("../core/StepCard"));
 var _Button = _interopRequireDefault(require("../core/Button"));
+var _images = require("../lib/images");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
@@ -39,11 +40,9 @@ Default.args = {
   summary: '%i passos restantes - Leva %i minuto(s)',
   time: 2,
   percentage: 75,
-  totalSteps: 6,
-  doneSteps: 3,
   remainingSteps: 3,
   title: 'Configurar a organização e filial',
-  image: 'https://dummyimage.com/130x124/000/fff',
+  image: _images.stepCardImageUrl,
   onStepUrlClick: function onStepUrlClick(url) {
     return alert(url);
   },
@@ -65,6 +64,7 @@ var WithoutExpandable = Template.bind({});
 exports.WithoutExpandable = WithoutExpandable;
 WithoutExpandable.args = {
   loading: false,
+  padding: '30px',
   percentage: 75,
   showBottomPercentage: false,
   expandable: false,
@@ -91,11 +91,9 @@ exports.WithLoading = WithLoading;
 WithLoading.args = {
   summary: '%i passos restantes - Leva %i minuto(s)',
   time: 2,
-  totalSteps: 6,
-  doneSteps: 3,
   remainingSteps: 3,
   title: 'Configurar a organização e filial',
-  image: 'https://dummyimage.com/130x124/000/fff',
+  image: _images.stepCardImageUrl,
   onStepUrlClick: function onStepUrlClick(url) {
     return alert(url);
   },

package/types.d.js

@@ -0,0 +1 @@
+"use strict";