@pedidopago/ui 1.2.2 → 1.2.3

package/dist/components/Steps/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { IStepsProps } from './types';
-declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, }: IStepsProps) => JSX.Element;
+declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, enableCurrentStepChecked, }: IStepsProps) => JSX.Element;
 export default Steps;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Steps/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,KAAK,gEAMR,WAAW,gBAkFb,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,KAAK,0FAOR,WAAW,gBAgGb,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Steps/index.js

@@ -40,19 +40,14 @@ var Steps = function Steps(_ref) {
       activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
       fullWidth = _ref.fullWidth,
       _ref$isReducedSteps = _ref.isReducedSteps,
-      isReducedSteps = _ref$isReducedSteps === void 0 ? false : _ref$isReducedSteps;
+      isReducedSteps = _ref$isReducedSteps === void 0 ? false : _ref$isReducedSteps,
+      enableCurrentStepChecked = _ref.enableCurrentStepChecked;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       isMobile = _useState2[0],
       setIsMobile = _useState2[1];
 
-  var checkWindowSize = function checkWindowSize() {
-    setIsMobile(window.innerWidth < 500);
-  };
-
-  window.addEventListener('resize', checkWindowSize);
-
   var getStepIconPosition = function getStepIconPosition(index) {
     if (index === 0 && index < steps.length - 1) {
       return _utils.STEP_POSITION.INITIAL_BEFORE_UNSELECTED;
@@ -75,6 +70,16 @@ var Steps = function Steps(_ref) {
     return index === steps.length - 1 || index === current - 1 && index < steps.length - 1;
   };
 
+  var checkWindowSize = function checkWindowSize() {
+    setIsMobile(window.innerWidth < 500);
+  };
+
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', checkWindowSize);
+    return function () {
+      window.removeEventListener('resize', checkWindowSize);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsContainer, {
     fullWidth: fullWidth,
     isReducedSteps: isReducedSteps,
@@ -105,19 +110,19 @@ var Steps = function Steps(_ref) {
         id: "simple-step-".concat(index + 1),
         tabIndex: index + 1 === current ? 0 : -1,
         isCurrent: current === index + 1,
-        isFinished: current > index + 1,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepsItemsDetailsContainer, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsCircle, {
             activeColor: activeColor,
             isCurrent: current === index + 1,
-            isFinished: current > index + 1,
-            children: current > index + 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            isFinished: current > index + 1 || enableCurrentStepChecked && current === index + 1,
+            children: current > index + 1 || enableCurrentStepChecked && current === index + 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "check"
             }) : index + 1
           }), current === index + 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
+            isDisabled: enableCurrentStepChecked,
             children: step
           })]
-        }), current === index + 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsSeparator, {})]
+        }), current === index + 1 && current < steps.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsSeparator, {})]
       }, index);
     })
   });

package/dist/components/Steps/styles.d.ts

@@ -23,7 +23,6 @@ export declare const StepsItemContainer: import("@emotion/styled").StyledCompone
     as?: import("react").ElementType<any> | undefined;
 } & {
     isCurrent: boolean;
-    isFinished: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ReducedStepsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -42,5 +41,6 @@ export declare const StepsItemText: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any> | undefined;
 } & {
     isReducedSteps?: boolean | undefined;
+    isDisabled?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Steps/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc;;;;;;yGAa1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGAiDlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;gBACN,OAAO;yGAWpB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAajC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;iHAWzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc;;;;;;yGAc1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGAiDlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAWnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAajC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;iHAkCzB,CAAC"}

package/dist/components/Steps/styles.js

@@ -13,15 +13,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StepsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", ";\n  width: 100%;\n  @media only screen and (max-width: 500px) {\n    flex-direction: ", ";\n  }\n"])), function (_ref) {
+var StepsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-direction: ", ";\n\n  ", ";\n\n  @media only screen and (min-width: 500px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
   var isReducedSteps = _ref.isReducedSteps;
   return isReducedSteps ? '0' : '12px';
 }, function (_ref2) {
-  var fullWidth = _ref2.fullWidth;
-  return fullWidth ? "width: 100%;" : "width: 356px";
-}, function (_ref3) {
-  var isReducedSteps = _ref3.isReducedSteps;
+  var isReducedSteps = _ref2.isReducedSteps;
   return isReducedSteps ? 'column' : 'row';
+}, function (_ref3) {
+  var fullWidth = _ref3.fullWidth;
+  return fullWidth ? "width: 100%;" : "width: fit-content;";
 });
 
 exports.StepsContainer = StepsContainer;
@@ -39,7 +39,7 @@ var StepsCircle = _styled.default.div(_templateObject2 || (_templateObject2 = _t
 
 exports.StepsCircle = StepsCircle;
 
-var StepsSeparator = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref6) {
+var StepsSeparator = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  min-width: 40px;\n  background-color: ", ";\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.colors.neutral.neutral1;
 });
@@ -64,9 +64,21 @@ var StepsItemsDetailsContainer = _styled.default.div(_templateObject7 || (_templ
 
 exports.StepsItemsDetailsContainer = StepsItemsDetailsContainer;
 
-var StepsItemText = _styled.default.h3(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.25rem;\n  color: ", ";\n  @media only screen and (max-width: 500px) {\n    ", ";\n  }\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.white;
+var StepsItemText = _styled.default.h3(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.25rem;\n  white-space: nowrap;\n\n  ", "\n\n  @media only screen and (max-width: 500px) {\n    ", ";\n  }\n"])), function (_ref7) {
+  var isDisabled = _ref7.isDisabled,
+      theme = _ref7.theme;
+
+  if (isDisabled) {
+    return "\n        color: ".concat({
+      light: theme.colors.tertiary.hover,
+      dark: theme.colors.neutral.neutral4
+    }[theme.colorMode], ";\n      ");
+  }
+
+  return "\n      color: ".concat({
+    light: theme.colors.neutral.black,
+    dark: theme.colors.neutral.white
+  }[theme.colorMode], ";\n    ");
 }, function (_ref8) {
   var isReducedSteps = _ref8.isReducedSteps;
   return isReducedSteps ? "width: 100%;" : "";

package/dist/components/Steps/types.d.ts

@@ -4,6 +4,7 @@ export declare type IStepsProps = {
     activeColor?: 'primary' | 'secondary' | 'tertiary';
     fullWidth?: boolean;
     isReducedSteps?: boolean;
+    enableCurrentStepChecked?: boolean;
 };
 export declare type IStepIcon = {
     isSelectedStep: boolean;

package/dist/components/Steps/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/types.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CACnD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/types.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",