flipper-ui 0.26.17 → 0.26.19

package/core/StepCard/Skeleton.d.ts

@@ -1,4 +1,3 @@
-import './colors.css';
 interface IStepCardPanelProps {
     expandable: boolean;
     showBottomPercentage: boolean;

package/core/StepCard/Skeleton.js

@@ -9,7 +9,6 @@ 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"));
-require("./colors.css");
 var _styles = require("./styles");
 var StepCardSkeleton = function StepCardSkeleton(props) {
   var expandable = props.expandable,

package/core/StepCard/StepCardDetails.d.ts

@@ -1,5 +1,4 @@
 import { IStepCardProps } from '.';
-import './colors.css';
 interface IStepCardDetailsProps {
     steps: IStepCardProps['steps'];
     onStepUrlClick?: IStepCardProps['onStepUrlClick'];

package/core/StepCard/StepCardDetails.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,14 +10,11 @@ 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 _nginformaticaStyleguide = require("nginformatica-styleguide");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _icons = require("../../icons");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Typography = _interopRequireDefault(require("../Typography"));
-require("./colors.css");
 var _styles = require("./styles");
-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 _theme$colors = _nginformaticaStyleguide.theme.colors,
   feedback = _theme$colors.feedback,
   grays = _theme$colors.grays;
@@ -30,7 +26,7 @@ var StepCardDetails = function StepCardDetails(props) {
     onStepUrlClick = props.onStepUrlClick,
     image = props.image,
     expansionPanelDetailsProps = props.expansionPanelDetailsProps;
-  var StepsList = (0, _react.useCallback)(function () {
+  var StepsList = function StepsList() {
     return /*#__PURE__*/_react["default"].createElement(_List["default"], null, steps.map(function (step, index) {
       var handleOnClickStepUrl = function handleOnClickStepUrl() {
         if (onStepUrlClick && step.url) {
@@ -62,7 +58,7 @@ var StepCardDetails = function StepCardDetails(props) {
         }))))
       });
     }));
-  }, [onStepUrlClick, steps]);
+  };
   return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], (0, _extends2["default"])({
     style: {
       display: 'flex',

package/core/StepCard/StepCardPanel.d.ts

@@ -1,5 +1,4 @@
 import { IStepCardProps } from '.';
-import './colors.css';
 interface IStepCardPanelProps {
     title: string;
     expandable: boolean;
@@ -14,6 +13,7 @@ interface IStepCardPanelProps {
     time: number;
     showIcon: boolean;
     subTitle?: string;
+    fullWidth?: boolean;
 }
 export declare const StepCardPanel: (props: IStepCardPanelProps) => JSX.Element;
 export {};

package/core/StepCard/StepCardPanel.js

@@ -1,24 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StepCardPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
 var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
 var _nginformaticaStyleguide = require("nginformatica-styleguide");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _sprintfJs = require("sprintf-js");
 var _icons = require("../../icons");
 var _Typography = _interopRequireDefault(require("../Typography"));
-require("./colors.css");
 var _styles = require("./styles");
-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 _theme$colors = _nginformaticaStyleguide.theme.colors,
   feedback = _theme$colors.feedback,
   grays = _theme$colors.grays;
@@ -39,16 +34,17 @@ var StepCardPanel = function StepCardPanel(props) {
     time = props.time,
     showIcon = props.showIcon,
     subTitle = props.subTitle,
-    titleProps = props.titleProps;
-  var TitleIcon = (0, _react.useCallback)(function () {
+    titleProps = props.titleProps,
+    fullWidth = props.fullWidth;
+  var TitleIcon = function TitleIcon() {
     return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
       style: {
         fontSize: 40,
         color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
       }
     });
-  }, [percentage]);
-  var Title = (0, _react.useCallback)(function () {
+  };
+  var Title = function Title() {
     return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
       variant: "h6",
       style: {
@@ -57,8 +53,8 @@ var StepCardPanel = function StepCardPanel(props) {
         textAlign: 'center'
       }
     }, titleProps), title);
-  }, [titleProps, title]);
-  var SubTitle = (0, _react.useCallback)(function () {
+  };
+  var SubTitle = function SubTitle() {
     return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
       variant: "h6",
       style: {
@@ -66,11 +62,11 @@ var StepCardPanel = function StepCardPanel(props) {
         textAlign: 'center'
       }
     }, titleProps), subTitle);
-  }, [titleProps, subTitle]);
-  var TitleColumn = (0, _react.useCallback)(function () {
+  };
+  var TitleColumn = function TitleColumn() {
     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)));
-  }, [showIcon, TitleIcon, Title, subTitle, SubTitle]);
-  var Summary = (0, _react.useCallback)(function () {
+  };
+  var Summary = function Summary() {
     return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
       style: {
         textAlign: 'center'
@@ -81,8 +77,8 @@ var StepCardPanel = function StepCardPanel(props) {
     }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
       variant: "h6"
     }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time)));
-  }, [remainingSteps, summary, summaryProps, time]);
-  var SummaryLinearProgress = (0, _react.useCallback)(function () {
+  };
+  var SummaryLinearProgress = function SummaryLinearProgress() {
     return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
       variant: "determinate",
       value: percentage,
@@ -96,8 +92,8 @@ var StepCardPanel = function StepCardPanel(props) {
         backgroundColor: UNDONE_PROGRESS_COLOR
       }
     }, summaryLinearProgressBarProps));
-  }, [summaryLinearProgressBarProps, percentage]);
-  var NormalProgress = (0, _react.useCallback)(function () {
+  };
+  var NormalProgress = function NormalProgress() {
     return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
       variant: "h6"
     }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
@@ -106,13 +102,9 @@ var StepCardPanel = function StepCardPanel(props) {
         position: 'absolute',
         right: 8
       }
-    }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(SummaryLinearProgress, null)));
-  }, [summaryProps, summary, percentage, SummaryLinearProgress]);
-  var BottomLineProgress = (0, _react.useCallback)(function () {
+    }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(SummaryLinearProgress, null)));
+  };
+  var BottomLineProgress = function BottomLineProgress() {
     return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
       variant: "determinate",
       value: percentage,
@@ -125,21 +117,19 @@ var StepCardPanel = function StepCardPanel(props) {
         backgroundColor: UNDONE_PROGRESS_COLOR
       }
     }, linearProgressBarProps));
-  }, [percentage, linearProgressBarProps]);
+  };
   return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
     withPadding: !expandable
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+    fullWidth: fullWidth,
     height: 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"
-  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
+  }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
 };
 exports.StepCardPanel = StepCardPanel;

package/core/StepCard/index.d.ts

@@ -3,13 +3,19 @@ import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import React from 'react';
 import Typography from '../Typography';
 import { PropWithDataCy } from '../types';
-import './colors.css';
 /**
  * Props for the StepCard component
  *
  * @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}

package/core/StepCard/index.js

@@ -5,12 +5,12 @@ 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 _StepCardDetails = require("./StepCardDetails");
 var _StepCardPanel = require("./StepCardPanel");
-require("./colors.css");
 var _styles = require("./styles");
 /**
  * StepCard is a reusable component that displays a card with a title, a summary,
@@ -63,12 +63,16 @@ var StepCard = function StepCard(props) {
     linearProgressBarProps = props.linearProgressBarProps,
     summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
     rootProps = props.rootProps,
-    onStepUrlClick = props.onStepUrlClick;
+    onStepUrlClick = props.onStepUrlClick,
+    fullWidth = props.fullWidth;
   return loading ? /*#__PURE__*/_react["default"].createElement(_Skeleton["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"])({
+    fullWidth: fullWidth
+  }, rootProps), /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
+    fullWidth: fullWidth,
     title: title,
     summary: summary,
     expandable: expandable,

package/core/StepCard/styles.d.ts

@@ -4,15 +4,20 @@ interface IStepContainerProps {
 }
 interface IRowProps {
     height: React.CSSProperties['maxHeight'];
+    fullWidth?: boolean;
+}
+interface IContainerProps {
+    fullWidth?: boolean;
 }
 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>;
 export declare const ListItemContainer: import("styled-components").StyledComponent<"p", 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>;
 export {};

package/core/StepCard/styles.js

@@ -4,17 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = void 0;
+exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = exports.BarWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+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;
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: 1100px;\n"])));
+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) {
+  return props.fullWidth ? '100%' : '1100px';
+});
 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) {
+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) {
+  return props.fullWidth ? '100%' : '1100px';
+}, function (props) {
   return props.height;
 });
 exports.StepCardRow = StepCardRow;
-var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n     ", "\n    "])), function (props) {
+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 {
@@ -37,4 +43,6 @@ 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"])));
 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;
+exports.NormalProgressContainer = NormalProgressContainer;
+var BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.feedback.success);
+exports.BarWrapper = BarWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.17",
+    "version": "0.26.19",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -80,7 +80,6 @@
         "babel-loader": "8.2.5",
         "babel-plugin-transform-class-properties": "6.24.1",
         "babel-plugin-transform-imports": "2.0.0",
-        "css-loader": "^6.7.3",
         "cypress": "12.0.2",
         "cypress-cucumber-preprocessor": "4.3.1",
         "cypress-plugin-tab": "^1.0.5",
@@ -108,7 +107,7 @@
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",
-        "ts-loader": "9.4.1",
+        "ts-loader": "^9.4.2",
         "typescript": "3.9.10",
         "webpack": "5"
     },

package/stories/StepCard.stories.js

@@ -38,6 +38,7 @@ exports.Default = Default;
 Default.args = {
   summary: '%i passos restantes - Leva %i minuto(s)',
   time: 2,
+  percentage: 75,
   totalSteps: 6,
   doneSteps: 3,
   remainingSteps: 3,
@@ -64,6 +65,7 @@ var WithoutExpandable = Template.bind({});
 exports.WithoutExpandable = WithoutExpandable;
 WithoutExpandable.args = {
   loading: false,
+  percentage: 75,
   showBottomPercentage: false,
   expandable: false,
   showIcon: false,

package/custom.d.js

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