oa-componentbook 1.0.1-stage.365 → 1.0.1-stage.366

package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js

@@ -19,11 +19,10 @@ var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-compon
 var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
 var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
 var _CustomSteps = _interopRequireDefault(require("../../components/oa-component-steps/CustomSteps"));
-var _Typography = require("../../components/oa-component-typography/Typography");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _utils = require("../../utils");
 var _styles = require("./styles");
 const _excluded = ["data", "data-test", "current", "initialAnswers", "onComplete", "onStepChange", "style", "showSubmitButton"];
-/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -122,11 +121,7 @@ function ProgressiveStepsWidget(_ref) {
     switch (answerType) {
       case "singleSelect":
         return /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            display: "flex",
-            gap: "12px",
-            flexWrap: "wrap"
-          }
+          className: "optionBtnSec"
         }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           key: idx,
           type: currentAnswer === (option.value || option) ? "primary" : "secondary",
@@ -165,42 +160,21 @@ function ProgressiveStepsWidget(_ref) {
         }
         return null;
       case "paymentOptions":
-        return /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            width: "100%"
-          }
-        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement("div", {
-          key: idx,
-          style: {
-            border: "1px solid #d9d9d9",
-            borderRadius: "8px",
-            padding: "16px",
-            marginBottom: "12px",
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            backgroundColor: currentAnswer === (option.value || option) ? "#f0f8ff" : "white",
-            // cursor: 'pointer',
-            transition: "all 0.3s ease"
-          }
+        return /*#__PURE__*/_react.default.createElement("ul", {
+          className: "bankDetailSec"
+        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement("li", {
+          key: idx
           // onClick={() => handleAnswer(stepIndex, option.value || option)}
           ,
           "data-test": dataTest ? "".concat(dataTest, "--payment-option-").concat(stepIndex, "-").concat(idx) : undefined
-        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            fontSize: "16px",
-            fontWeight: "500",
-            color: currentAnswer === (option.value || option) ? "#1890ff" : "#000"
-          }
-        }, option.label || option), option.description && /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            fontSize: "14px",
-            color: "#666",
-            marginTop: "4px"
-          }
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: "type-button-500"
+        }, option.label || option), option.description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: "type-b2-400",
+          color: "secondary-content"
         }, option.description)), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           type: "text-only",
-          size: "small",
+          size: "medium",
           label: option.detailsText || "Enter details",
           onClick: e => {
             e.stopPropagation();
@@ -308,25 +282,20 @@ function ProgressiveStepsWidget(_ref) {
     const shouldHideAnswerInput = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.hideAnswerInput) || false;
 
     // Create the step content with question and answer
-    const stepContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        fontSize: "16px",
-        fontWeight: "500",
-        color: isActive ? "#1890ff" : isCompleted ? "#52c41a" : isDisabled ? "#d9d9d9" : "#000",
-        marginBottom: "8px"
-      }
+    const stepContent = /*#__PURE__*/_react.default.createElement("div", {
+      className: "stepQanAnsBox"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: isActive ? "primary-content" : isCompleted ? "secondary-content" : isDisabled ? "secondary-content" : "secondary-content",
+      typography: isActive ? "type-button-500" : isCompleted ? "type-b2-400" : isDisabled ? "type-b2-400" : "type-b2-400"
     }, (0, _utils.isString)(displayTitle) || (0, _utils.isNumber)(displayTitle) ? /*#__PURE__*/_react.default.createElement("span", {
       "data-test": "".concat(dataTest, "--title-(").concat(displayTitle, ")")
     }, displayTitle) : displayTitle), displayDescription && /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread({
-        color: "#666",
-        fontSize: "14px",
-        marginBottom: "12px"
-      }, displayDescriptionStyle)
-    }, displayDescription), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        marginTop: "12px"
-      }
+      className: "margin-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({}, displayDescriptionStyle, {
+      color: "secondary-content",
+      typography: "type-b2-400"
+    }), displayDescription)), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-12"
     }, renderAnswerInput(step, stepIndex)));
     return {
       key: step.key || stepIndex,
@@ -334,9 +303,7 @@ function ProgressiveStepsWidget(_ref) {
       disabled: isDisabled
     };
   }).filter(Boolean); // Remove null entries
-  return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_CustomSteps.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSteps.default, _extends({
     data: {
       steps: prepareStepsForCustomSteps()
     },

package/build/widgets/oa-widget-progressive-steps/styles.js

@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  max-width: 600px;\n  margin: 0 auto;\n"])));
+const StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.stepQanAnsBox{line-height:normal; margin-bottom:24px;}\n.ant-steps.ant-steps-vertical >.ant-steps-item .ant-steps-item-icon{margin-inline-end: 12px;\n    border: none; width: 28px; height: 28px; line-height: normal; display: flex; align-items: center; justify-content: center;}\n.ant-steps .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-tail::after, .ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-tail::after{background-color:#E0E0E0;}\n.ant-steps .ant-steps-item-finish .ant-steps-item-icon {background-color:#00875A;}\n.ant-steps .ant-steps-item-finish .ant-steps-item-icon >.ant-steps-icon{color:#fff;}\n.ant-steps .ant-steps-item-process .ant-steps-item-icon{background-color: #014FC5;}\n.ant-steps.ant-steps-vertical >.ant-steps-item .ant-steps-item-title {     padding-inline-end: 0;    line-height: normal;\n  width: 100%;}\n\nul.bankDetailSec{display: flex;\n    flex-direction: column; gap: 16px;\n    padding: 0;\n    margin: 0;}\nul.bankDetailSec li{display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-direction: row;\n    border: 1px solid rgb(217, 217, 217);\n    border-radius: 6px;\n    padding: 12px;\n    margin: 0;}\n\n    .ant-steps-item-tail {\n        inset-inline-start: 15px !important;\n    }\n.optionBtnSec{display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 12px;}\n.optionBtnSec button{width:50%;}\n.optionBtnSec button {\n    width: calc(50% - 6px);\n}\n\n\n"])));
 const SubmitButton = exports.SubmitButton = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 32px;\n  text-align: center;\n  padding-top: 20px;\n  border-top: 1px solid #f0f0f0;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.365",
+  "version": "1.0.1-stage.366",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",