oa-componentbook 0.18.133 → 0.18.134

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

@@ -1,11 +1,13 @@
 "use strict";
 
 require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
@@ -17,6 +19,8 @@ var _styles = require("./styles");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 const _excluded = ["buttonConfig", "children", "isBaseDrawer", "onClose", "open", "placement", "title", "height", "width", "data-test"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -30,13 +34,7 @@ function CustomDrawer(_ref) {
   let {
       buttonConfig,
       children,
-      /*
-      This boolean flag indicates whether the current drawer is the top-level base drawer
-      within a stack of drawers or a nested drawer.
-       A "base drawer" serves as the root or primary layer in a stack of drawers.
-      */
       isBaseDrawer,
-      // This callback function provided by parent is called upon clicking on the close button.
       onClose,
       open,
       placement,
@@ -46,14 +44,26 @@ function CustomDrawer(_ref) {
       'data-test': dataTest
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
-  /*
-  We make our own callback function, which makes a call to the `onClose`
-  function given to use by the parent.
-   This is beneficial if we want some of our actions to be executed when
-  we attempt to close the drawer.
-  */
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      // Update isMobile state based on the screen width
+      setIsMobile(window.innerWidth <= 768); // Adjust the breakpoint as needed
+    };
+
+    // Initial check on mount
+    handleResize();
+
+    // Listen for window resize events
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const drawerPlacement = isMobile ? 'bottom' : placement;
   const handleClose = () => {
-    // Call to `onClose` callback received from props.
     onClose();
   };
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
@@ -74,7 +84,8 @@ function CustomDrawer(_ref) {
     "data-test": dataTest,
     onClose: handleClose,
     open: open,
-    placement: placement,
+    placement: drawerPlacement // Use the computed placement value
+    ,
     push: false,
     title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
@@ -92,11 +103,7 @@ function CustomDrawer(_ref) {
     height: height,
     width: width,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && !antDesignProps.footer ? /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-      disabled:
-      // This command checks whether this button config has a disabled field or not.
-      Object.prototype.hasOwnProperty.call(button, 'disabled') ? button.disabled
-      // If it doesn't we hardcode the button to never be disabled.
-      : false,
+      disabled: Object.prototype.hasOwnProperty.call(button, 'disabled') ? button.disabled : false,
       iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
       key: (0, _utils.getUUID)(),
       label: button.label,
@@ -108,7 +115,6 @@ function CustomDrawer(_ref) {
   }, antDesignProps), children)));
 }
 CustomDrawer.propTypes = {
-  // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     'data-test': _propTypes.default.string,
     disabled: _propTypes.default.bool,
@@ -140,7 +146,7 @@ CustomDrawer.defaultProps = {
   open: true,
   placement: 'right',
   title: null,
-  height: 'auto',
+  height: '100%',
   width: '480'
 };
 var _default = exports.default = CustomDrawer;

package/build/widgets/oa-widget-servicecard/ServiceCard.js

@@ -117,7 +117,7 @@ function ServiceCard(_ref) {
     style: {
       color: 'inherit'
     }
-  })))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+  })))), showModal && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
     open: showModal,
     imgSrc: null,
     onCancel: toggleModal,

package/build/widgets/oa-widget-servicecard/styles.js

@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  margin: 0 0 24px;\n  border: 1px solid var(--color-divider);\n  @media only screen and (max-width: 600px) {\n    .type-t1-500 {\n      font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n    gap: 16px;\n    padding: 24px 16px 16px;\n    .cardHead p .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .primary-info label .type-t2-700{\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 20px;\n    }\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .flexChangeBody{\n    align-items: center !important;\n    flex-direction: row !important;\n    gap: 8px !important;\n  }\n  .flexChangeBody .text-container{\n    white-space: nowrap;\n  }\n  .flexChangeBody .viewStatus button {\n    padding: 0 !important;\n}\n.displayFlex{\n  display: flex;\n}\n  @media only screen and (max-width: 600px) {\n    .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    \n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
 const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n@media only screen and (max-width: 600px) {\n  gap: 16px;\n}\n"])));
-const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.mobileIcon{\n  display: none;\n}\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n  .fullWidth{\n    width: 100%;\n  }\n  .mobileIcon{\n    min-width: 48px;\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--color-primary);\n      border-radius: 50%;\n      color: var(--color-primary-background);\n  }\n  padding: 16px 16px;\n  width: calc(100% + 32px);\n  margin: 0 0 0 -16px;\n  top: 16px;\n  align-items:center;\ndiv span {\n  display: block;\n}\ndiv span > .type-t2-700{\n  padding: 4px 0 0;\n}\n  .text-container .type-t2-700 {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n}\n.large {\n  height: 36px;\n  min-width: 100px;\n  padding: 10px 16px;\n}\n}\n"])));
+const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.mobileIcon{\n  display: none;\n}\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n  .fullWidth{\n    width: 100%;\n  }\n  .mobileIcon{\n    min-width: 48px;\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--color-primary);\n      border-radius: 50%;\n      color: var(--color-primary-background);\n  }\n  .mobileIcon a{\n    display: flex;\n  }\n  padding: 16px 16px;\n  width: calc(100% + 32px);\n  margin: 0 0 0 -16px;\n  top: 16px;\n  align-items:center;\ndiv span {\n  display: block;\n}\ndiv span > .type-t2-700{\n  padding: 4px 0 0;\n}\n  .text-container .type-t2-700 {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n}\n.large {\n  height: 36px;\n  min-width: 100px;\n  padding: 10px 16px;\n}\n}\n"])));

package/package.json

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