oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.440

package/build/components/oa-component-dropdown/CustomDropdown.js

@@ -36,7 +36,8 @@ function CustomDropdown(_ref) {
     firstLetterIcon,
     trigger,
     placement,
-    type
+    type,
+    onMenuItemClick
     // dropDownHeading,
   } = _ref;
   const firstLetter = (displayText === null || displayText === void 0 || (_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter after Hi.
@@ -52,7 +53,16 @@ function CustomDropdown(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     menu: {
-      items
+      items,
+      onClick: _ref2 => {
+        let {
+          key
+        } = _ref2;
+        const clickedItem = items.find(item => item.key === key);
+        if (clickedItem) {
+          onMenuItemClick(clickedItem);
+        }
+      }
     },
     trigger: trigger,
     placement: placement,
@@ -69,7 +79,8 @@ CustomDropdown.propTypes = {
   firstLetterIcon: _propTypes.default.bool,
   trigger: _propTypes.default.string,
   placement: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  onMenuItemClick: _propTypes.default.func
   // dropDownHeading: PropTypes.string,
 };
 CustomDropdown.defaultProps = {
@@ -85,6 +96,7 @@ CustomDropdown.defaultProps = {
   firstLetterIcon: false,
   trigger: ['click'],
   placement: 'bottomRight',
-  type: 'default'
+  type: 'default',
+  onMenuItemClick: () => {}
   // dropDownHeading: '',
 };

package/build/components/oa-component-icons/MaterialIcon.js

@@ -39,7 +39,7 @@ function MaterialIcon(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
-      color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
+      color: color && _ColorVariablesMap.default["--color-".concat(color)] ? _ColorVariablesMap.default["--color-".concat(color)] : color || undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")

package/build/components/oa-component-modal/CustomModal.js

@@ -14,53 +14,58 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _typographyOptions = require("../../global-css/typography-options");
 var _utils = require("../../utils");
 var _styles = require("./styles");
-const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
+const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width", "bgColor", "showCloseIcon", "maskClosable"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
-   * This is a custom Modal component that extends the default antd Modal
-   * component.
-   *
-   * The open state of the modal is controlled by the parent component.
-   *
-   * The parent can also provide a callback function to be called when the
-   * cancel button is clicked.
-   *
-   * The width of the modal can be customized by providing a width prop.
-   *
-   * The buttons for the modal can be customized by providing a buttonConfig
-   * prop.
-   *
-   * The title of the modal can be provided as a string or as an image.
-   *
-   * The children of the modal can be provided as a string or a number, or as
-   * JSX elements.
-   *
-   * The typography of the title and description can be customized by providing
-   * a typographies object.
-   *
-   * The modal is centered by default.
-   *
-   * The modal is rendered with a gray background.
-   *
-   * The modal is rendered with a close button.
-   *
-   * The parent can provide additional props to the Modal component.
-   */
+ * This is a custom Modal component that extends the default antd Modal
+ * component.
+ *
+ * The open state of the modal is controlled by the parent component.
+ *
+ * The parent can also provide a callback function to be called when the
+ * cancel button is clicked.
+ *
+ * The width of the modal can be customized by providing a width prop.
+ *
+ * The buttons for the modal can be customized by providing a buttonConfig
+ * prop.
+ *
+ * The title of the modal can be provided as a string or as an image.
+ *
+ * The children of the modal can be provided as a string or a number, or as
+ * JSX elements.
+ *
+ * The typography of the title and description can be customized by providing
+ * a typographies object.
+ *
+ * The modal is centered by default.
+ *
+ * The modal is rendered with a gray background.
+ *
+ * The modal is rendered with a close button.
+ *
+ * The parent can provide additional props to the Modal component.
+ */
 function CustomModal(_ref) {
   let {
       buttonConfig,
       children,
-      'data-test': dataTest,
+      "data-test": dataTest,
       imgSrc,
       // This callback function provided by parent is called upon clicking on the cancel button
       onCancel,
       open,
       title,
       typographies,
-      width
+      width,
+      bgColor,
+      showCloseIcon = true,
+      // Add this prop with default value
+      maskClosable = true // Control whether clicking mask closes modal
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   /*
@@ -75,15 +80,15 @@ function CustomModal(_ref) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBgMask: 'rgba(0, 0, 0, 0.7)'
+        colorBgMask: bgColor || "rgba(0, 0, 0, 0.7)"
       }
     }
   }, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
-    closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+    closeIcon: showCloseIcon ? /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
       style: {
-        fontSize: '26px'
+        fontSize: "26px"
       }
-    }),
+    }) : false,
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
@@ -94,17 +99,21 @@ function CustomModal(_ref) {
       onClick: button.callback,
       size: "large",
       type: button === null || button === void 0 ? void 0 : button.type,
-      "data-test": button['data-test']
+      "data-test": button["data-test"]
     })))),
     onCancel: handleCancel,
     open: open,
     title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
       src: imgSrc,
-      alt: ""
+      alt: "",
+      onError: e => {
+        e.target.style.display = "none";
+      }
     }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: typographies.title
     }, title)),
-    width: width
+    width: width,
+    maskClosable: maskClosable
   }, props), children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
   // The label is a string or a number
   ((0, _utils.isString)(children) || (0, _utils.isNumber)(children)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -116,17 +125,17 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
-    'data-test': _propTypes.default.string,
+    "data-test": _propTypes.default.string,
     label: _propTypes.default.string,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
-      position: _propTypes.default.oneOf(['left', 'right']),
+      position: _propTypes.default.oneOf(["left", "right"]),
       style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
     }),
-    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+    type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
   })),
   children: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   title: _propTypes.default.string,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
@@ -135,19 +144,21 @@ CustomModal.propTypes = {
   imgSrc: _propTypes.default.string,
   onCancel: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
-  width: _propTypes.default.string || _propTypes.default.number
+  width: _propTypes.default.string || _propTypes.default.number,
+  showCloseIcon: _propTypes.default.bool
 };
 CustomModal.defaultProps = {
   buttonConfig: [],
   children: null,
-  'data-test': null,
+  "data-test": null,
   imgSrc: null,
   open: true,
   title: null,
   typographies: {
-    title: 'type-t1-500',
-    children: 'type-b2-400'
+    title: "type-t1-500",
+    children: "type-b2-400"
   },
-  width: 416
+  width: 416,
+  showCloseIcon: true
 };
 var _default = exports.default = CustomModal;

package/build/components/oa-component-modal/styles.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.DescriptionContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable */
 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 ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 36px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

package/build/components/oa-component-pagination/CustomPagination.js

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _styles = require("./styles");
+const _excluded = ["current", "total", "pageSize", "onChange", "onShowSizeChange", "pageSizeOptions", "showSizeChanger", "showQuickJumper", "showTotal", "size", "style"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @description A custom wrapper for Ant Design Pagination component with consistent theming.
+ * @param {number} current - The current page number (1-based).
+ * @param {number} total - The total number of items.
+ * @param {number} pageSize - The number of items per page.
+ * @param {function} onChange - Callback function when page changes.
+ * @param {function} onShowSizeChange - Callback function when page size changes.
+ * @param {array} pageSizeOptions - Array of page size options.
+ * @param {boolean} showSizeChanger - Whether to show the page size selector.
+ * @param {boolean} showQuickJumper - Whether to show the quick jumper input.
+ * @param {boolean} showTotal - Whether to show the total items count.
+ * @param {string} size - The size of the pagination component.
+ * @param {object} style - Custom styles for the component.
+ * @param {object} antDesignProps - Additional props to pass to Ant Design Pagination.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+function CustomPagination(_ref) {
+  let {
+      current = 1,
+      total = 0,
+      pageSize = 10,
+      onChange,
+      onShowSizeChange,
+      pageSizeOptions = [10, 20, 50, 100],
+      showSizeChanger = true,
+      showQuickJumper = false,
+      showTotal = true,
+      size = 'default',
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const renderTotal = (totalItems, range) => {
+    if (!showTotal) return null;
+    return "Showing ".concat(range[0], "-").concat(range[1], " of ").concat(totalItems, " items");
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Pagination: {}
+      },
+      token: {
+        colorPrimary: '#014FC5',
+        colorPrimaryBorder: '#014FC5',
+        colorPrimaryHover: '#82A9E2',
+        colorText: '#212121',
+        colorTextDisabled: '#BFBFBF',
+        colorTextPlaceholder: '#959595',
+        borderRadius: 2,
+        colorBorder: '#E0E0E0'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, _extends({
+    current: current,
+    total: total,
+    pageSize: pageSize,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange,
+    showSizeChanger: showSizeChanger,
+    showQuickJumper: showQuickJumper,
+    showTotal: renderTotal,
+    pageSizeOptions: pageSizeOptions,
+    size: size
+  }, antDesignProps))));
+}
+CustomPagination.propTypes = {
+  current: _propTypes.default.number,
+  total: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  onShowSizeChange: _propTypes.default.func,
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  showSizeChanger: _propTypes.default.bool,
+  showQuickJumper: _propTypes.default.bool,
+  showTotal: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small']),
+  style: _propTypes.default.object
+};
+CustomPagination.defaultProps = {
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: undefined,
+  onShowSizeChange: undefined,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showQuickJumper: false,
+  showTotal: true,
+  size: 'default',
+  style: undefined
+};
+var _default = exports.default = CustomPagination;

package/build/components/oa-component-pagination/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination-item {\n    border: 1px solid #E0E0E0;\n  }\n  .ant-pagination-item-active {\n    border: 1px solid #014FC5;\n  }\n    .mobile-pagination{margin: 0;padding:0;}\n    .ant-pagination-total-text,.ant-pagination-options{display: none;}\n"])));
+var _default = exports.default = {};

package/build/components/oa-component-progress-bar/CustomProgressBar.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} totalStep - The total number of steps in the progress.
  * @param {string} headingColor - The color used for the step text heading.
  * @param {string} barColor - The color used for the progress bar.
+ * @param {boolean} showStepText - Whether to display the step text (Step X out of Y).
  *
  * @returns {React.ReactElement} A component displaying the current progress.
  */
@@ -26,9 +27,10 @@ function ProgressBar(_ref) {
     currentStep,
     totalStep,
     headingColor,
-    barColor
+    barColor,
+    showStepText
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showStepText && /*#__PURE__*/_react.default.createElement("div", {
     className: "margin-bottom-8"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: headingColor,
@@ -57,12 +59,14 @@ ProgressBar.propTypes = {
   currentStep: _propTypes.default.number,
   totalStep: _propTypes.default.number,
   headingColor: _propTypes.default.string,
-  barColor: _propTypes.default.string
+  barColor: _propTypes.default.string,
+  showStepText: _propTypes.default.bool
 };
 ProgressBar.defaultProps = {
   currentStep: 1,
   totalStep: 1,
   headingColor: 'positive',
-  barColor: 'positive'
+  barColor: 'positive',
+  showStepText: true
 };
 var _default = exports.default = ProgressBar;