oa-componentbook 0.17.76 → 0.17.78

package/build/components/oa-component-accordion/Accordion.js

@@ -12,13 +12,20 @@ var _styles = require("./styles");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function CollapseIcon() {
+function CollapseIcon(_ref) {
+  let {
+    isActive
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
     icon: _KeyboardArrowDownRounded.default,
-    size: 20
+    size: 20,
+    rotate: isActive ? 0 : 180
   });
 }
-function Accordion(_ref) {
+CollapseIcon.propTypes = {
+  isActive: _propTypes.default.bool.isRequired
+};
+function Accordion(_ref2) {
   let {
     body,
     'data-test': dataTest,
@@ -26,7 +33,7 @@ function Accordion(_ref) {
     headerText,
     smallText,
     hasContentPadding // New prop to determine whether to apply contentPadding
-  } = _ref;
+  } = _ref2;
   const themeConfig = {
     components: {
       Collapse: {

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

@@ -12,5 +12,5 @@ var _default = {};
 exports.default = _default;
 const SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
 exports.SmallText = SmallText;
-const CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  }\n  .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  }\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  }\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n  }\n  \n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n"])));
+const CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n  }\n  \n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n"])));
 exports.CollapseStyle = CollapseStyle;

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -7,16 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CustomDatePicker;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
 var _CalendarTodayRounded = _interopRequireDefault(require("@material-ui/icons/CalendarTodayRounded"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 const _excluded = ["data-test"];
+var _templateObject;
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 function CustomDatePicker(_ref) {
   let {
       'data-test': dataTest
@@ -82,7 +86,7 @@ function CustomDatePicker(_ref) {
         colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.DatePicker, _extends({
+  }, /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _CalendarTodayRounded.default,
       size: 20

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

@@ -1,5 +1,6 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,31 +9,45 @@ exports.default = MaterialIcon;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-const _excluded = ["icon", "size", "color"];
+const _excluded = ["icon", "size", "color", "rotate", "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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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; }
 function MaterialIcon(_ref) {
   let {
       icon: Icon,
       size,
-      color // By default, material icons inherit font color
+      color,
+      // By default, material icons inherit font color
+      rotate,
+      style
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(Icon, _extends({
-    style: {
+    style: _objectSpread({
       color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
-      fontSize: "".concat(size, "px")
-    }
+      fontSize: "".concat(size, "px"),
+      transition: 'transform .3s ease',
+      transform: "rotate(".concat(rotate, "deg)")
+    }, style)
   }, props));
 }
 MaterialIcon.propTypes = {
   color: _propTypes.default.oneOf(['primary', 'background-dark', 'background-info', 'primary-hover', 'positive', 'background-positive', 'warning', 'background-warning', 'negative', 'hover-negative', 'background-negative', 'primary-content', 'secondary-content', 'placeholder-text', 'disabled-button', 'divider', 'secondary-background', 'primary-background', 'background-overlay', 'tags']),
   icon: _propTypes.default.element.isRequired,
-  size: _propTypes.default.number
+  rotate: _propTypes.default.number,
+  size: _propTypes.default.number,
+  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
 };
 MaterialIcon.defaultProps = {
   color: null,
-  size: 20
+  rotate: 0,
+  size: 20,
+  style: {}
 };

package/build/components/oa-component-info/CustomInfo.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("./styles");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+require("antd/dist/reset.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function CustomInfo(_ref) {
   let {
@@ -27,8 +28,8 @@ function CustomInfo(_ref) {
     size: 24
   })), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-t2-700"
-  }, title), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: "type-b2-400"
+  }, title), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-b2-400"
   }, description)), iconConfig.position === 'right' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
     size: 20
   }) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {

package/build/components/oa-component-table/CustomTable.js

@@ -77,12 +77,12 @@ function CustomTable(_ref) {
           headerBorderRadius: '0',
           headerSplitColor: _ColorVariablesMap.default['--color-secondary-background'],
           footerColor: _ColorVariablesMap.default['--color-primary-content'],
-          cellPaddingBlock: '24',
-          cellPaddingBlockMD: '16',
-          cellPaddingBlockSM: '12',
-          cellPaddingInline: '16',
-          cellPaddingInlineMD: '16',
-          cellPaddingInlineSM: '16',
+          cellPaddingBlock: 24,
+          cellPaddingBlockMD: 16,
+          cellPaddingBlockSM: 12,
+          cellPaddingInline: 16,
+          cellPaddingInlineMD: 16,
+          cellPaddingInlineSM: 16,
           cellFontSize: '14px',
           cellFontSizeMD: '14px',
           cellFontSizeSM: '14px',

package/build/components/oa-component-timepicker/CustomTimePicker.js

@@ -1,5 +1,6 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,12 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
+var _AccessTimeRounded = _interopRequireDefault(require("@material-ui/icons/AccessTimeRounded"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 const _excluded = ["data-test"];
+var _templateObject;
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FullWidthTimePicker = (0, _styledComponents.default)(_antd.TimePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 function CustomTimePicker(_ref) {
   let {
       'data-test': dataTest
@@ -40,7 +47,12 @@ function CustomTimePicker(_ref) {
         // border color of input text field
         colorText: _ColorVariablesMap.default['--color-primary-content'],
         // Text color
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        // Text color when disabled
         colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextQuaternary: _ColorVariablesMap.default['--color-secondary-content'],
+        // color of disabled clock icon
+
         colorLink: _ColorVariablesMap.default['--color-primary'],
         colorLinkHover: _ColorVariablesMap.default['--color-primary-hover'],
         colorError: _ColorVariablesMap.default['--color-negative'],
@@ -60,7 +72,12 @@ function CustomTimePicker(_ref) {
         }
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.TimePicker, props));
+  }, /*#__PURE__*/_react.default.createElement(FullWidthTimePicker, _extends({
+    suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _AccessTimeRounded.default,
+      size: 20
+    })
+  }, props)));
 }
 CustomTimePicker.propTypes = {
   'data-test': _propTypes.default.string,

package/build/widgets/oa-widget-approval/ApprovalWidget.js

@@ -52,8 +52,6 @@ function ApprovalWidget(_ref) {
   const [isApproved, setIsApproved] = (0, _react.useState)(getInitialValue(approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved));
   const onRadioChange = event => setIsApproved(event.target.value);
   return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "row"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: approvalForm.hidden ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-7 col-lg-7 gutter'
@@ -120,7 +118,7 @@ function ApprovalWidget(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
     "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
     disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
-  })))) || undefined)), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
+  })))) || undefined), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
 }
 ApprovalWidget.propTypes = {
   children: _propTypes.default.node,

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -85,7 +85,7 @@ function NotesWidget(_ref) {
     borderBottom: tableBorder ? '1px solid var(--color-divider)' : '0',
     borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
     borderRadius: tableBorder ? '4px' : '0',
-    display: !(records.length > 0) && disabled ? 'none' : undefined
+    visibility: !(records.length > 0) && disabled ? 'hidden' : undefined
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     style: tableStyle,

package/package.json

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