flipper-ui 0.26.18 → 0.26.20

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;
@@ -13,6 +14,8 @@ interface IStepCardPanelProps {
     time: number;
     showIcon: boolean;
     subTitle?: string;
+    fullWidth?: boolean;
+    padding?: React.CSSProperties['padding'];
 }
 export declare const StepCardPanel: (props: IStepCardPanelProps) => JSX.Element;
 export {};

package/core/StepCard/StepCardPanel.js

@@ -34,7 +34,9 @@ var StepCardPanel = function StepCardPanel(props) {
     time = props.time,
     showIcon = props.showIcon,
     subTitle = props.subTitle,
-    titleProps = props.titleProps;
+    titleProps = props.titleProps,
+    fullWidth = props.fullWidth,
+    padding = props.padding;
   var TitleIcon = function TitleIcon() {
     return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
       style: {
@@ -118,15 +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, {
-    height: expandable ? '100px' : '100%'
+    fullWidth: fullWidth,
+    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, {
-    height: "15px"
+    fullWidth: fullWidth,
+    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,13 @@ import { PropWithDataCy } from '../types';
  * @interface IStepCardProps
  */
 export interface IStepCardProps {
+    /**
+     * Whether the step card is full width
+     * @type {boolean}
+     * @memberof IStepCardProps
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Whether the step card are loading
      * @type {boolean}
@@ -68,13 +75,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
      *
@@ -85,7 +92,7 @@ export interface IStepCardProps {
      *     }]
      * @memberof IStepCardProps
      */
-    steps: {
+    steps?: {
         title: string;
         done: boolean;
         url?: string;
@@ -112,7 +119,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
      */
@@ -143,6 +150,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
@@ -157,6 +176,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}

package/core/StepCard/index.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -17,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}
@@ -62,17 +68,25 @@ var StepCard = function StepCard(props) {
     linearProgressBarProps = props.linearProgressBarProps,
     summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
     rootProps = props.rootProps,
-    onStepUrlClick = props.onStepUrlClick;
-  return loading ? /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    onStepUrlClick = props.onStepUrlClick,
+    fullWidth = props.fullWidth,
+    padding = props.padding,
+    margin = props.margin;
+  return loading ? /*#__PURE__*/_react["default"].createElement(_StepCardSkeleton["default"], {
     expandable: expandable,
     showIcon: showIcon,
     showBottomPercentage: showBottomPercentage
-  }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, rootProps, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
+  }) : /*#__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, {
+    fullWidth: fullWidth,
     title: title,
+    padding: padding,
     summary: summary,
     expandable: expandable,
-    remainingSteps: remainingSteps,
-    time: time,
+    remainingSteps: remainingSteps || 0,
+    time: time || 0,
     showIcon: showIcon,
     showBottomPercentage: showBottomPercentage,
     subTitle: subTitle,

package/core/StepCard/styles.d.ts

@@ -1,14 +1,19 @@
 /// <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'];
 }
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, IContainerProps, never>;
 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>;

package/core/StepCard/styles.js

@@ -10,18 +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: 1100px;\n"])));
+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: 1100px;\n    height: ", ";\n"])), function (props) {
-  return props.height;
+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.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,11 @@
+import React from 'react';
 interface IStepCardPanelProps {
     expandable: boolean;
     showBottomPercentage: boolean;
     showIcon: boolean;
     subTitle?: boolean;
+    padding?: React.CSSProperties['padding'];
+    margin?: React.CSSProperties['margin'];
 }
 declare const StepCardSkeleton: (props: IStepCardPanelProps) => JSX.Element;
 export default StepCardSkeleton;

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

@@ -9,12 +9,14 @@ 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;
   var TextSkeleton = function TextSkeleton() {
     return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
       variant: "text",
@@ -40,10 +42,12 @@ 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
+  }, /*#__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%'
+    minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
   }, showIcon && /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
@@ -53,7 +57,7 @@ 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"
   }, /*#__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.18",
+    "version": "0.26.20",
     "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";