oa-componentbook 1.0.1-stage.369 → 1.0.1-stage.370

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js +2 -3
  2. package/build/layout/EntityOverviewLayout/styles.js +1 -1
  3. package/build/layout/GenricLayOut/components/ProfileSection.js +13 -11
  4. package/build/layout/GenricLayOut/styles.js +1 -1
  5. package/build/widgets/oa-form-widget/FormWidget.js +9 -8
  6. package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js +4 -2
  7. package/package.json +1 -1
package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js CHANGED
@@ -163,9 +163,8 @@ function EntityOverviewLayout(_ref) {
163
163
  size: (backButton === null || backButton === void 0 || (_backButton$iconConfi2 = backButton.iconConfig) === null || _backButton$iconConfi2 === void 0 ? void 0 : _backButton$iconConfi2.size) || 24,
164
164
  icon: backButton.iconConfig.icon
165
165
  })), (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.visible) && (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
166
- color: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title.color,
167
- typography: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title.type,
168
- className: "pageTitle"
166
+ color: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.color,
167
+ typography: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.type
169
168
  }, pageTitle.title))), /*#__PURE__*/_react.default.createElement("div", {
170
169
  className: "profileContent"
171
170
  }, (profileData === null || profileData === void 0 ? void 0 : profileData.visible) && /*#__PURE__*/_react.default.createElement(_ProfileDataWidget.default, _extends({}, profileData === null || profileData === void 0 ? void 0 : profileData.data, {
package/build/layout/EntityOverviewLayout/styles.js CHANGED
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject, _templateObject2, _templateObject3;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- const ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .fullPageLayout {\n display: flex;\n min-height: 100vh;\n background: #fafafa;\n }\n\n .oaRightLayouts {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .oaTopHeaderAndBtnSec {\n background: #ffffff;\n border-bottom: 1px solid #e8e8e8;\n padding: 20px 24px;\n\n .headerContent {\n display: flex;\n align-items: center;\n gap: 16px;\n\n .pageTitle {\n margin: 0;\n }\n\n .backButton {\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-secondary-background);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n }\n }\n\n .profileContent {\n flex: 1;\n padding: 0;\n overflow-y: auto;\n background: #ffffff;\n }\n\n .accordionsContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 0 24px;\n\n .accordion-item {\n width: 100%;\n max-width: 600px;\n background: var(--color-secondary-background);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n .accordion-content {\n padding: 20px;\n\n .key-value-section {\n margin-bottom: 20px;\n }\n\n .action-buttons-section {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--color-border);\n }\n\n .custom-content {\n margin-top: 16px;\n }\n }\n }\n }\n\n @media (max-width: 768px) {\n .oaTopHeaderAndBtnSec {\n padding: 12px 16px;\n\n .headerContent {\n gap: 12px;\n }\n }\n\n .profileContent {\n padding: 16px;\n }\n\n .accordionsContainer {\n padding: 0 16px;\n \n .accordion-item {\n max-width: 100%;\n \n .accordion-content {\n padding: 16px;\n\n .action-buttons-section {\n flex-direction: column;\n align-items: stretch;\n }\n }\n }\n }\n }\n"])));
11
+ const ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .fullPageLayout {\n display: flex;\n min-height: 100vh;\n background: #fafafa;\n }\n\n .oaRightLayouts {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .oaTopHeaderAndBtnSec {\n background: #ffffff;\n border-bottom: 1px solid #e8e8e8;\n padding: 20px 24px;\n\n .headerContent {\n margin-left: 160px;\n display: flex;\n align-items: center;\n gap: 16px;\n\n .pageTitle {\n margin: 0;\n }\n\n .backButton {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-secondary-background);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n }\n }\n\n .profileContent {\n flex: 1;\n padding: 0;\n overflow-y: auto;\n background: #ffffff;\n }\n\n .accordionsContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 0 24px;\n\n .accordion-item {\n width: 100%;\n max-width: 600px;\n background: var(--color-secondary-background);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n .accordion-content {\n padding: 20px;\n\n .key-value-section {\n margin-bottom: 20px;\n }\n\n .action-buttons-section {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--color-border);\n }\n\n .custom-content {\n margin-top: 16px;\n }\n }\n }\n }\n\n @media (max-width: 768px) {\n .oaTopHeaderAndBtnSec {\n padding: 12px 16px;\n\n .headerContent {\n gap: 12px;\n }\n }\n\n .profileContent {\n padding: 16px;\n }\n\n .accordionsContainer {\n padding: 0 16px;\n\n .accordion-item {\n max-width: 100%;\n\n .accordion-content {\n padding: 16px;\n\n .action-buttons-section {\n flex-direction: column;\n align-items: stretch;\n }\n }\n }\n }\n }\n"])));
12
12
  const DrawerWithOutFooter = exports.DrawerWithOutFooter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-drawer-footer {\n display: none !important;\n }\n"])));
13
13
  const DrawerContent = exports.DrawerContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 24px;\n\n .drawerTitle {\n margin-bottom: 24px;\n }\n\n .drawerDescription {\n margin-top: 24px;\n }\n"])));
package/build/layout/GenricLayOut/components/ProfileSection.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  require("core-js/modules/web.dom-collections.iterator.js");
9
+ require("core-js/modules/es.string.trim.js");
9
10
  var _react = _interopRequireWildcard(require("react"));
10
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
12
  var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
@@ -21,8 +22,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
21
22
  * @param {Object} props - Component props
22
23
  * @param {Object} props.profileData - Profile data object
23
24
  * @param {string} props.profileData.iconText - Text to display in the circular icon
24
- * @param {string} props.profileData.iconColor - Color of the text
25
- * @param {string} props.profileData.iconBgColor - Background color of the circular icon
25
+ * @param {string} props.profileData.iconColor - Design token like 'secondary-content'
26
+ * @param {string} props.profileData.iconBgColor - Design token like 'primary'
26
27
  * @param {string} props.profileData.tooltipText - Text to display in the tooltip
27
28
  * @param {boolean} props.profileData.visible - Whether to show the profile section
28
29
  * @param {Function} props.onProfileClick - Function to call when profile is clicked
@@ -44,6 +45,7 @@ function ProfileSection(_ref) {
44
45
  iconBgColor,
45
46
  tooltipText
46
47
  } = profileData;
48
+ const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
47
49
  return /*#__PURE__*/_react.default.createElement(_styles.ProfileSectionContainer, null, /*#__PURE__*/_react.default.createElement("div", {
48
50
  className: "profile-icon-container",
49
51
  onMouseEnter: () => setShowTooltip(true),
@@ -51,15 +53,15 @@ function ProfileSection(_ref) {
51
53
  onClick: onProfileClick
52
54
  }, /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
53
55
  style: {
54
- backgroundColor: iconBgColor,
55
- color: iconColor
56
+ backgroundColor: resolveToken(iconBgColor),
57
+ color: resolveToken(iconColor)
56
58
  }
57
- }, iconText), showTooltip && /*#__PURE__*/_react.default.createElement(_styles.Tooltip, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
59
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
58
60
  color: "white",
59
- typography: "type-b2-400",
60
- style: {
61
- color: "#ffffff"
62
- }
61
+ typography: "type-h2-500"
62
+ }, iconText)), showTooltip && /*#__PURE__*/_react.default.createElement(_styles.Tooltip, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
63
+ color: "white",
64
+ typography: "type-b2-400"
63
65
  }, tooltipText))));
64
66
  }
65
67
  ProfileSection.propTypes = {
@@ -76,8 +78,8 @@ ProfileSection.defaultProps = {
76
78
  profileData: {
77
79
  visible: false,
78
80
  iconText: "R",
79
- iconColor: "#ffffff",
80
- iconBgColor: "#666666",
81
+ iconColor: "primary-content",
82
+ iconBgColor: "primary",
81
83
  tooltipText: "To manage the sub-admins, go to the Profile section."
82
84
  },
83
85
  onProfileClick: () => {}
package/build/layout/GenricLayOut/styles.js CHANGED
@@ -20,6 +20,6 @@ const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.defa
20
20
  const ListofDamageParts = exports.ListofDamageParts = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ul.damagedParts {\n display: flex;\n flex-direction: column;\n margin: 8px 0 0 16px;\n list-style-type: disc;\n }\n ul.damagedParts li {\n padding: 4px 0;\n width: 100%;\n }\n ul.damagedParts li::marker {\n color: #717171;\n font-size: 20px;\n }\n"])));
21
21
  const IncidentListParts = exports.IncidentListParts = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .qaSec dl {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n }\n .qaSec dl dt {\n display: flex;\n flex-direction: column;\n margin: 16px 0 0 0;\n }\n .qaSec dl dt:first-child {\n margin-top: 8px;\n }\n"])));
22
22
  const ProfileSectionContainer = exports.ProfileSectionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n\n .profile-icon-container {\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])));
23
- const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
23
+ const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
24
24
  const Tooltip = exports.Tooltip = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 8px;\n background: #000000;\n color: #ffffff;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 1000;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n right: 12px;\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000000;\n }\n"])));
25
25
  var _default = exports.default = {};
package/build/widgets/oa-form-widget/FormWidget.js CHANGED
@@ -221,12 +221,13 @@ function FormWidget(props) {
221
221
  }))));
222
222
  }
223
223
  if ((item === null || item === void 0 ? void 0 : item.widget) === "input") {
224
+ var _item$value;
224
225
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
225
226
  name: "".concat(item === null || item === void 0 ? void 0 : item.name).concat(index ? index : ""),
226
227
  label: renderLabelWithTooltip(item === null || item === void 0 ? void 0 : item.label, item === null || item === void 0 ? void 0 : item.tooltip),
227
228
  rules: getFieldRules(itemData, item),
228
229
  extra: item === null || item === void 0 ? void 0 : item.helpText,
229
- initialValue: item === null || item === void 0 ? void 0 : item.value
230
+ initialValue: item !== null && item !== void 0 && item.value ? item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.toString() : undefined
230
231
  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, _extends({}, item === null || item === void 0 ? void 0 : item.props, {
231
232
  placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
232
233
  onInput: e => {
@@ -282,23 +283,23 @@ function FormWidget(props) {
282
283
  }
283
284
  };
284
285
  const renderWidget = item => {
285
- var _item$value, _item$value2, _item$value2$map, _item$value3, _item$value4, _item$value5, _item$value6, _item$iconConfig, _item$subType, _item$disabled5;
286
+ var _item$value2, _item$value3, _item$value3$map, _item$value4, _item$value5, _item$value6, _item$value7, _item$iconConfig, _item$subType, _item$disabled5;
286
287
  switch (item === null || item === void 0 ? void 0 : item.type) {
287
288
  case "simpleList":
288
- if ((item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.length) === 0) return null;
289
+ if ((item === null || item === void 0 || (_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.length) === 0) return null;
289
290
  return /*#__PURE__*/_react.default.createElement(_styles.ListofDamageParts, null, /*#__PURE__*/_react.default.createElement("ul", {
290
291
  className: "damagedParts"
291
- }, item === null || item === void 0 || (_item$value2 = item.value) === null || _item$value2 === void 0 || (_item$value2$map = _item$value2.map) === null || _item$value2$map === void 0 ? void 0 : _item$value2$map.call(_item$value2, v => /*#__PURE__*/_react.default.createElement("li", {
292
+ }, item === null || item === void 0 || (_item$value3 = item.value) === null || _item$value3 === void 0 || (_item$value3$map = _item$value3.map) === null || _item$value3$map === void 0 ? void 0 : _item$value3$map.call(_item$value3, v => /*#__PURE__*/_react.default.createElement("li", {
292
293
  key: v
293
294
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
294
295
  color: "secondary-content",
295
296
  typography: "type-b2-400"
296
297
  }, v)))));
297
298
  case "questionAnsList":
298
- if ((item === null || item === void 0 || (_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.length) === 0) return null;
299
+ if ((item === null || item === void 0 || (_item$value4 = item.value) === null || _item$value4 === void 0 ? void 0 : _item$value4.length) === 0) return null;
299
300
  return /*#__PURE__*/_react.default.createElement(_styles.IncidentListParts, null, /*#__PURE__*/_react.default.createElement("div", {
300
301
  className: "qaSec"
301
- }, /*#__PURE__*/_react.default.createElement("dl", null, item === null || item === void 0 || (_item$value4 = item.value) === null || _item$value4 === void 0 ? void 0 : _item$value4.map(v => /*#__PURE__*/_react.default.createElement("dt", {
302
+ }, /*#__PURE__*/_react.default.createElement("dl", null, item === null || item === void 0 || (_item$value5 = item.value) === null || _item$value5 === void 0 ? void 0 : _item$value5.map(v => /*#__PURE__*/_react.default.createElement("dt", {
302
303
  key: v === null || v === void 0 ? void 0 : v.question
303
304
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
304
305
  color: "premary-content",
@@ -310,13 +311,13 @@ function FormWidget(props) {
310
311
  typography: "type-b2-400"
311
312
  }, v === null || v === void 0 ? void 0 : v.answer)))))));
312
313
  case "infoCardWithInput":
313
- return item === null || item === void 0 || (_item$value5 = item.value) === null || _item$value5 === void 0 ? void 0 : _item$value5.map((value, i) => {
314
+ return item === null || item === void 0 || (_item$value6 = item.value) === null || _item$value6 === void 0 ? void 0 : _item$value6.map((value, i) => {
314
315
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
315
316
  key: i
316
317
  }, value)), (value === null || value === void 0 ? void 0 : value.field) && renderFieldWidget(value === null || value === void 0 ? void 0 : value.field, i, item));
317
318
  });
318
319
  case "infoCard":
319
- return Array.isArray(item === null || item === void 0 ? void 0 : item.value) && (item === null || item === void 0 || (_item$value6 = item.value) === null || _item$value6 === void 0 ? void 0 : _item$value6.map((v, i) => /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
320
+ return Array.isArray(item === null || item === void 0 ? void 0 : item.value) && (item === null || item === void 0 || (_item$value7 = item.value) === null || _item$value7 === void 0 ? void 0 : _item$value7.map((v, i) => /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
320
321
  key: i
321
322
  }, v))));
322
323
  case "infoCardFooter":
package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = ProfileDataWidget;
7
+ require("core-js/modules/es.string.trim.js");
7
8
  var _react = _interopRequireDefault(require("react"));
8
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
10
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
@@ -43,12 +44,13 @@ function ProfileDataWidget(_ref) {
43
44
  }
44
45
  return null;
45
46
  };
47
+ const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
46
48
  return /*#__PURE__*/_react.default.createElement(_styles.ProfileDataContainer, {
47
49
  alignProfile: alignProfile
48
50
  }, (image === null || image === void 0 ? void 0 : image.visible) && /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
49
51
  style: {
50
- backgroundColor: (image === null || image === void 0 ? void 0 : image.bgColor) || "#1976d2",
51
- color: (image === null || image === void 0 ? void 0 : image.color) || "#ffffff"
52
+ backgroundColor: resolveToken(image === null || image === void 0 ? void 0 : image.bgColor),
53
+ color: resolveToken(image === null || image === void 0 ? void 0 : image.color)
52
54
  }
53
55
  }, getIconContent()), /*#__PURE__*/_react.default.createElement(_styles.ProfileInfo, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
54
56
  color: (title === null || title === void 0 ? void 0 : title.color) || "primary-content",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.369",
3
+ "version": "1.0.1-stage.370",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",