flipper-ui 0.26.18 → 0.26.19

package/core/StepCard/StepCardPanel.d.ts

@@ -13,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

@@ -34,7 +34,8 @@ var StepCardPanel = function StepCardPanel(props) {
     time = props.time,
     showIcon = props.showIcon,
     subTitle = props.subTitle,
-    titleProps = props.titleProps;
+    titleProps = props.titleProps,
+    fullWidth = props.fullWidth;
   var TitleIcon = function TitleIcon() {
     return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
       style: {
@@ -120,12 +121,14 @@ var StepCardPanel = function StepCardPanel(props) {
   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(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
 };

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}

package/core/StepCard/index.js

@@ -5,6 +5,7 @@ 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"));
@@ -62,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,11 +4,15 @@ 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>;

package/core/StepCard/styles.js

@@ -10,9 +10,13 @@ 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"])), 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;

package/package.json

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