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

package/build/layout/GenricLayOut/components/Header.js

@@ -65,7 +65,7 @@ function Header(_ref) {
   }, (subHeading === null || subHeading === void 0 || (_subHeading$icon = subHeading.icon) === null || _subHeading$icon === void 0 ? void 0 : _subHeading$icon.position) === "left" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, _extends({}, subHeading === null || subHeading === void 0 || (_subHeading$icon2 = subHeading.icon) === null || _subHeading$icon2 === void 0 ? void 0 : _subHeading$icon2.iconConfig, {
     className: "margin-right-8"
   })), subHeading === null || subHeading === void 0 ? void 0 : subHeading.text, (subHeading === null || subHeading === void 0 || (_subHeading$icon3 = subHeading.icon) === null || _subHeading$icon3 === void 0 ? void 0 : _subHeading$icon3.position) === "right" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, subHeading === null || subHeading === void 0 || (_subHeading$icon4 = subHeading.icon) === null || _subHeading$icon4 === void 0 ? void 0 : _subHeading$icon4.iconConfig)), subHeadingJsx(subHeading)), subHeading1 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "subHadingText marginNone"
+    className: "subHadingText"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: subHeading1 === null || subHeading1 === void 0 ? void 0 : subHeading1.type,
     color: "secondary-content"

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

@@ -19,7 +19,7 @@ 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"];
@@ -122,11 +122,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 +161,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 +283,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 +304,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  .stepQanAnsBox {\n    line-height: normal;\n    margin-bottom: 24px;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-icon {\n    margin-inline-end: 12px;\n    border: none;\n    width: 28px;\n    height: 28px;\n    line-height: normal;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ant-steps\n    .ant-steps-item-process\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after,\n  .ant-steps\n    .ant-steps-item-finish\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after {\n    background-color: #e0e0e0;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon {\n    background-color: #00875a;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {\n    color: #fff;\n  }\n  .ant-steps .ant-steps-item-process .ant-steps-item-icon {\n    background-color: #014fc5;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-title {\n    padding-inline-end: 0;\n    line-height: normal;\n    width: 100%;\n  }\n\n  ul.bankDetailSec {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    padding: 0;\n    margin: 0;\n  }\n  ul.bankDetailSec li {\n    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\n  .ant-steps-item-tail {\n    inset-inline-start: 15px !important;\n  }\n  .optionBtnSec {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n  .optionBtnSec button {\n    width: 50%;\n  }\n  .optionBtnSec button {\n    width: calc(50% - 6px);\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.367",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",