oa-componentbook 0.17.0 → 0.17.2

package/build/components/oa-component-button/CustomButton.js

@@ -21,7 +21,7 @@ function CustomButton(_ref) {
     className,
     disabled,
     onClick,
-    iconPosition,
+    iconConfig,
     size,
     label,
     type,
@@ -34,25 +34,34 @@ function CustomButton(_ref) {
     type: "button"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
-  }, iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, iconConfig.position === 'left' && iconConfig.icon, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
-  }, label), iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)));
+  }, label), iconConfig.position === 'right' && iconConfig.icon));
 }
 CustomButton.propTypes = {
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onClick: _propTypes.default.func.isRequired,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  iconPosition: _propTypes.default.oneOf(['left', 'right', 'none']),
+  iconConfig: _propTypes.default.shape({
+    icon: _propTypes.default.node,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    style: _propTypes.default.objectOf(_propTypes.default.string || _propTypes.default.number)
+  }),
   label: _propTypes.default.string.isRequired,
   type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']),
-  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+  /*
+  This needs to be done because storybook treats the array
+  'typographyOptions` as an object, so indices are shown in the storybook
+  select menu instead of the values at those indices.
+  */
+  typography: _propTypes.default.oneOf(Array.from(_Typography.typographyOptions))
 };
 CustomButton.defaultProps = {
   className: '',
   disabled: false,
+  iconConfig: {},
   size: 'medium',
-  iconPosition: 'none',
   type: 'primary',
   typography: 'type-button-500'
 };

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

@@ -33,6 +33,6 @@ const getSizeStyles = size => {
       }
   }
 };
-const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n  }\n\n  .anticon-search {\n    margin: 0 8px 0 0;\n  }\n"])));
+const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n  }\n"])));
 const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n  ", "\n\n  &.primary {\n    background: var(--color-blue-CTA);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-white-background);\n  }\n  &.primary:hover {\n    background: var(--color-blue-hover);\n    border: 1px solid var(--color-blue-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-grey2-disabled);\n    cursor: not-allowed;\n    color: var(--color-white-background);\n  }\n\n  &.secondary {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-blue-CTA);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-blue-hover);\n    color: var(--color-blue-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-grey2-disabled);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n\n  &.text-only {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-blue-CTA);\n  }\n  &.text-only:hover {\n    color: var(--color-blue-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-red-error);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-error);\n  }\n  &.danger-primary:hover {\n    background: var(--color-red-hover);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-hover);\n  }\n\n  &.danger-secondary {\n    color: var(--color-red-error);\n    border: 1px solid var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-red-hover);\n    border: 1px solid var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n"])), props => getSizeStyles(props.size));
 exports.ColoredStyledButton = ColoredStyledButton;

package/build/components/oa-component-checkbox/CustomCheckBox.js

@@ -1,5 +1,6 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
@@ -10,23 +11,31 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+const _excluded = ["disabled", "onChange", "label", "typography"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 CustomCheckBox(_ref) {
   let {
-    disabled,
-    onChange,
-    label,
-    typography
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+      disabled,
+      onChange,
+      label,
+      typography
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, _extends({}, antDesignProps, {
     disabled: disabled,
     onChange: disabled ? null : onChange
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
   }, label));
 }
+
+// This allows us referencing the Group container in our Checkbox component
+CustomCheckBox.Group = _antd.Checkbox.Group;
 CustomCheckBox.propTypes = {
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -51,7 +51,7 @@ function CustomDrawer(_ref) {
     title: drawerTitle,
     height: height,
     width: width,
-    footer: /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    footer: buttonConfig && /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       key: button,
       label: button.label,
       onClick: button.callback,
@@ -63,19 +63,20 @@ function CustomDrawer(_ref) {
 CustomDrawer.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
-    callback: _propTypes.default.string.isRequired,
+    callback: _propTypes.default.func.isRequired,
     label: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
-  })).isRequired,
+  })),
   children: _propTypes.default.node.isRequired,
   onClose: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
   placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
   title: _propTypes.default.node,
-  height: _propTypes.default.number,
-  width: _propTypes.default.number
+  height: _propTypes.default.number || _propTypes.default.string,
+  width: _propTypes.default.number || _propTypes.default.string
 };
 CustomDrawer.defaultProps = {
+  buttonConfig: null,
   open: true,
   placement: 'right',
   title: null,

package/build/components/oa-component-notification/CustomNotification.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.notificationOptions = exports.default = void 0;
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,57 +20,85 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const notificationOptions = ['green-success', 'red-error'];
 exports.notificationOptions = notificationOptions;
-function Notification(_ref) {
+const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    description,
-    isDisplayed,
+    duration,
+    storyConfig,
+    // Useful only for the purpose of displaying in storybook
+    onClick,
+    onClose,
     placement,
-    title,
-    type,
     typographies
   } = _ref;
-  const [api, contextHolder] = _antd.notification.useNotification();
-  const openNotification = () => {
+  const [api, contextHolder] = _antd.notification.useNotification({
+    duration,
+    placement
+  });
+  const handleClick = (0, _react.useCallback)(() => {
+    // console.log('`handleClick` in Notification component');
+    onClick(); // Calling the provided `onClick` callback.
+  }, [onClick]);
+  const handleClose = (0, _react.useCallback)(() => {
+    // console.log('`handleClose` in Notification component');
+    onClose(); // Calling the provided `onClose` callback.
+  }, [onClose]);
+  const openNotification = (0, _react.useCallback)(_ref2 => {
+    let {
+      description,
+      title,
+      type
+    } = _ref2;
+    // type can be success or failure
     const titleColor = type === 'success' ? 'green-success' : 'red-error';
-    const descriptionColor = type === 'success' ? 'type-b3-400' : 'primarygrey-text';
+    const descriptionColor = type === 'success' ? 'primarygrey-text' : 'primarygrey-text';
     const borderColor = type === 'success' ? 'var(--color-green-success)' : 'var(--color-red-error)';
-    const customNotification = /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      typography: typographies.title,
-      color: titleColor
+    const customNotification = /*#__PURE__*/_react.default.createElement(_styles.StyledNotification, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: titleColor,
+      typography: typographies.title
     }, /*#__PURE__*/_react.default.createElement("div", null, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: descriptionColor,
       typography: typographies.description
-    }, description)), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
-      onClick: api.destroy('string')
-    }));
+    }, description)));
     api.open({
       message: customNotification,
-      closeIcon: false,
-      duration: isDisplayed ? 0 : 2000,
       style: {
         padding: '8px 16px 8px 16px',
         borderRadius: '4px',
         borderLeft: "4px solid ".concat(borderColor),
         boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
       },
-      placement
+      closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+        style: {
+          fontSize: '20px',
+          color: 'var(--color-primarygrey-text'
+        }
+      }),
+      onClick: handleClick,
+      onClose: handleClose
     });
-  };
+  }, [api, handleClick, handleClose, typographies]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    openNotification
+  }));
 
-  // This is for displaying the notification on storybook
+  // This is only for the purpose of displaying the notification in storybook.
   (0, _react.useEffect)(() => {
-    if (isDisplayed) {
-      openNotification();
+    if (storyConfig != null) {
+      openNotification(storyConfig);
     }
-  });
+  }, [storyConfig, openNotification]);
   return contextHolder;
-}
+});
 Notification.propTypes = {
-  description: _propTypes.default.string.isRequired,
-  isDisplayed: _propTypes.default.bool,
+  duration: _propTypes.default.number,
+  onClick: _propTypes.default.func,
+  onClose: _propTypes.default.func,
   placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
-  title: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'failure']).isRequired,
+  storyConfig: _propTypes.default.shape({
+    description: _propTypes.default.string,
+    title: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['success', 'failure'])
+  }),
   typographies: _propTypes.default.shape({
     button: _propTypes.default.oneOf(_Typography.typographyOptions),
     description: _propTypes.default.oneOf(_Typography.typographyOptions),
@@ -78,8 +106,11 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
-  isDisplayed: false,
+  duration: 2000,
+  onClick: () => {},
+  onClose: () => {},
   placement: 'topRight',
+  storyConfig: null,
   typographies: {
     button: 'type-button-500',
     description: 'type-b3-400',

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledNotification = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject; // NotificationStyles.js
 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 StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  .anticon-close {\n    cursor: pointer;    \n    margin: 0 0 0 8px;\n  }\n"])));
-var _default = StyledNotification;
-exports.default = _default;
+var _default = {};
+exports.default = _default;
+const StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;  \n"])));
+exports.StyledNotification = StyledNotification;

package/build/components/oa-component-notification/usage-example.md

@@ -0,0 +1,44 @@
+# Usage Example of CustomNotification component
+
+## Explanation
+
+We need to use refs in order to use this commponent since the method for calling this notification is quite complex. 
+
+So, we expose that method to the parent using refs. Take a look at the code example below for better understanding.
+
+## Code snippet 
+
+```jsx
+function App() {
+  const myRef = useRef(null);
+  
+  const onClick = () => {
+    console.log('click callback for Notification');
+  };
+
+  const onClose = () => {
+    console.log('close callback for Notification');
+  };
+
+  return (
+    <>
+      <CustomButton 
+        label="trigger notification" 
+        onClick={() => myRef.current.openNotification({
+          description: 'Notification description HERE',
+          title: 'Notification title HERE',
+          type: 'Failure',
+        })} 
+      />
+      <CustomNotification
+        onClick={onClick}
+        onClose={onClose}
+        placement="bottomLeft"
+        ref={myRef}
+      />
+    </>
+  );
+}
+
+export default App;
+```

package/build/components/oa-component-radio/CustomRadio.js

@@ -5,7 +5,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CustomRadioGroup = void 0;
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
@@ -32,6 +32,10 @@ function CustomRadio(_ref) {
     typography: typography
   }, label));
 }
+
+// This allows us referencing the Group container and Button component in our Checkbox component
+CustomRadio.Group = _antd.Radio.Group;
+CustomRadio.Button = _antd.Radio.Button;
 CustomRadio.propTypes = {
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
@@ -46,6 +50,4 @@ CustomRadio.defaultProps = {
   typography: 'type-b1-400'
 };
 var _default = CustomRadio;
-exports.default = _default;
-const CustomRadioGroup = _antd.Radio.Group;
-exports.CustomRadioGroup = CustomRadioGroup;
+exports.default = _default;

package/build/index.js

@@ -23,12 +23,6 @@ Object.defineProperty(exports, "ApprovalWidget", {
     return _ApprovalWidget.default;
   }
 });
-Object.defineProperty(exports, "CheckBox", {
-  enumerable: true,
-  get: function get() {
-    return _CustomCheckBox.default;
-  }
-});
 Object.defineProperty(exports, "CloseClaim", {
   enumerable: true,
   get: function get() {
@@ -59,6 +53,12 @@ Object.defineProperty(exports, "CustomButton", {
     return _CustomButton.default;
   }
 });
+Object.defineProperty(exports, "CustomCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _CustomCheckBox.default;
+  }
+});
 Object.defineProperty(exports, "CustomDrawer", {
   enumerable: true,
   get: function get() {
@@ -186,10 +186,10 @@ Object.defineProperty(exports, "typographyOptions", {
   }
 });
 var _Accordians = _interopRequireDefault(require("./components/Accordians"));
-var _CustomCheckBox = _interopRequireDefault(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _ColorUsage = _interopRequireWildcard(require("./components/oa-component-colorUsage/ColorUsage"));
 var _CornerRadius = _interopRequireDefault(require("./components/oa-component-cornerRadius/CornerRadius"));
 var _CustomButton = _interopRequireDefault(require("./components/oa-component-button/CustomButton"));
+var _CustomCheckBox = _interopRequireDefault(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _CustomDrawer = _interopRequireDefault(require("./components/oa-component-drawer/CustomDrawer"));
 var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));

package/build/widgets/oa-widget-address/Address.js

@@ -14,8 +14,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Address(_ref) {
+  var _address$additional_i, _address$additional_i2;
   let {
-    addressObject,
+    address,
     heading,
     typography
   } = _ref;
@@ -24,22 +25,25 @@ function Address(_ref) {
   }, heading), /*#__PURE__*/_react.default.createElement(_styles.AddressLines, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, addressObject.addressLine1), addressObject.addressLine2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, address.addressLine1), address.addressLine2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, addressObject.addressLine2), addressObject.addressLine3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, address.addressLine2), address.addressLine3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, addressObject.addressLine3), addressObject.landmark && /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, address.addressLine3), address.landmark && /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, "Near", ' ', addressObject.landmark)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, "Near", ' ', address.landmark)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, addressObject.city, ', ', addressObject.state, "-", addressObject.pincode)));
+  }, address.city, ', ', address.state, "-", address.pincode), ((_address$additional_i = address.additional_info) === null || _address$additional_i === void 0 ? void 0 : _address$additional_i.lat) && ((_address$additional_i2 = address.additional_info) === null || _address$additional_i2 === void 0 ? void 0 : _address$additional_i2.long) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, "Location:", ' ', address.additional_info.lat, ",", address.additional_info.long)));
 }
 Address.propTypes = {
-  addressObject: _propTypes.default.shape({
+  address: _propTypes.default.shape({
     addressLine1: _propTypes.default.string.isRequired,
     addressLine2: _propTypes.default.string,
     addressLine3: _propTypes.default.string,

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

@@ -40,9 +40,7 @@ function ApprovalWidget(_ref) {
   const isDivider = isUndefined(divider) ? true : divider;
   return /*#__PURE__*/_react.default.createElement(StyledAside, {
     key: key
-  }, /*#__PURE__*/_react.default.createElement("parentDiv", null, /*#__PURE__*/_react.default.createElement("div", {
-    lg: layoutFor === layoutTypes.doc ? 8 : 14
-  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+  }, /*#__PURE__*/_react.default.createElement("parentDiv", null, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
     level: 4,
     strong: true
   }, title)), description && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {

package/build/widgets/oa-widget-close-claim/CloseClaim.js

@@ -41,8 +41,12 @@ function CloseClaim(_ref) {
   }, []);
   const handleConfirm = () => {
     form.validateFields().then(values => {
+      // Passing up the form data to the parent using the provided callback.
       onConfirm(values);
     });
+
+    // This resets the form upon confirm.
+    form.resetFields();
   };
   const handleCancel = () => {
     onCancel();
@@ -69,15 +73,15 @@ function CloseClaim(_ref) {
   }, /*#__PURE__*/_react.default.createElement(AsideContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, "Close Claim"), /*#__PURE__*/_react.default.createElement("p", null, "Are you sure you would like to close this claim as this action will close the SR#", serviceRequestData === null || serviceRequestData === void 0 ? void 0 : serviceRequestData.referencePrimaryTrackingNo, ' ', "and no further processing will be allowed. Please provide the reason for closure."), /*#__PURE__*/_react.default.createElement(_antd.Form, {
     form: form
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "closeReason"
+    htmlFor: "serviceCancelReason"
   }, "Select reason for rejection (Visible to the customer) "), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "closeReason",
+    name: "serviceCancelReason",
     rules: [{
       required: true,
       message: 'Required'
     }],
     initialValue: false,
-    id: "closeReason"
+    id: "serviceCancelReason"
   }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
     placeholder: "Select"
   }, /*#__PURE__*/_react.default.createElement(Option, {
@@ -88,37 +92,37 @@ function CloseClaim(_ref) {
     value: row.key,
     width: 432
   }, row.value)))), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "isFraud"
+    htmlFor: "isCustomerFraudCase"
   }, "Is this a fraud case?"), /*#__PURE__*/_react.default.createElement("div", {
     className: ""
   }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "isFraud",
+    name: "isCustomerFraudCase",
     rules: [{
       required: true,
       message: 'Required'
     }],
     initialValue: undefined,
-    id: "isFraud"
+    id: "isCustomerFraudCase"
   }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
-    name: "isFraud",
+    name: "isCustomerFraudCase",
     onChange: handleRadioChange
   }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
     value: true
   }, "Yes"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
     value: false
   }, "No")))), isFraud && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "fraudReason"
+    htmlFor: "serviceFraudCaseReason"
   }, "Why is this a fraud case?", /*#__PURE__*/_react.default.createElement("span", {
     className: "redColor"
   }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "fraudReason",
+    name: "serviceFraudCaseReason",
     rules: [{
       required: true,
       message: 'Required',
       type: 'array'
     }],
     initialValue: undefined,
-    id: "fraudReason"
+    id: "serviceFraudCaseReason"
   }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
     mode: "multiple",
     placeholder: "Select"
@@ -129,17 +133,17 @@ function CloseClaim(_ref) {
     key: row.key,
     value: row.key
   }, row.value)))))), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "fraudRemark"
+    htmlFor: "remarks"
   }, "Remarks", /*#__PURE__*/_react.default.createElement("span", {
     className: "redColor"
   }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "fraudRemark",
+    name: "remarks",
     rules: [{
       required: true,
       message: 'Required'
     }],
     initialValue: null,
-    id: "fraudRemark"
+    id: "remarks"
   }, /*#__PURE__*/_react.default.createElement(TextArea, {
     rows: "3",
     placeholder: "Start typing..."

package/build/widgets/oa-widget-send-payment-link/SendPaymentLink.js

@@ -11,9 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _styles = require("./styles");
-var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
-var _CustomRadio = _interopRequireWildcard(require("../../components/oa-component-radio/CustomRadio"));
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,24 +47,27 @@ function SendPaymentLink(_ref) {
   const onClose = () => {
     setOpen(false);
   };
+  const onClick = () => {
+    form.submit();
+  };
   return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
     closable: true,
-    footer: /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-      label: "Cancel",
+    buttonConfig: [{
+      label: 'Cancel',
       onClick: onClose,
-      type: "secondary"
-    }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-      label: "Send"
+      type: 'secondary'
+    }, {
+      label: 'Send',
       // Calling submit on the form, if the Send button is clicked
-      ,
-      onClick: () => form.submit()
-    })),
+      onClick,
+      type: 'primary'
+    }],
     onClose: onClose,
     open: open,
     title: /*#__PURE__*/_react.default.createElement(_Typography.default, null, heading)
   }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-t2-700"
-  }, "Send to:"), /*#__PURE__*/_react.default.createElement(_CustomRadio.CustomRadioGroup, {
+  }, "Send to:"), /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
     onChange: onChange,
     value: selectedRadio
   }, /*#__PURE__*/_react.default.createElement(_styles.RadioGrid, null, options.map((option, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {

package/build/widgets/oa-widget-send-payment-link/styles.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioGrid = exports.RadioContainer = exports.ButtonContainer = void 0;
+exports.RadioGrid = exports.RadioContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+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 RadioContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    margin-bottom: 20px;\n"])));
@@ -13,6 +13,4 @@ const RadioContainer = _styledComponents.default.section(_templateObject || (_te
 // This helps make the radio buttons aligned in uniform columns
 exports.RadioContainer = RadioContainer;
 const RadioGrid = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n"])));
-exports.RadioGrid = RadioGrid;
-const ButtonContainer = _styledComponents.default.section(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 20px;\n"])));
-exports.ButtonContainer = ButtonContainer;
+exports.RadioGrid = RadioGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -76,9 +76,22 @@
       "react/forbid-prop-types": [
         1
       ],
-      "jsx-a11y/label-has-associated-control": [ 2, {
-        "controlComponents": ["Form.Item"]
-      }]
+      "jsx-a11y/label-has-associated-control": [
+        2,
+        {
+          "controlComponents": [
+            "Form.Item"
+          ]
+        }
+      ],
+      "react/jsx-props-no-spreading": [
+        1, 
+        {
+          "html": "enforce",
+          "custom": "enforce",
+          "explicitSpread": "enforce"
+        }
+      ]
     }
   },
   "browserslist": {