oa-componentbook 0.18.74 → 0.18.76

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

@@ -12,5 +12,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const DrawerFooter = exports.DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n"])));
 const ParentStyleDrawer = exports.ParentStyleDrawer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-drawer-body{\n  background: red;\n}\n"])));
 const CustomStyledDrawer = exports.CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    background: var(--color-secondary-background);\n  }\n  .ant-drawer-footer{\n    background: var(--color-secondary-background);\n  }\n  @media (max-width: 768px) {\n    \n  }\n"])));
-const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 const LayeredDrawerTitle = exports.LayeredDrawerTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n\n  align-items: center;\n"])));

package/build/index.js

@@ -269,6 +269,12 @@ Object.defineProperty(exports, "MaterialIcon", {
     return _MaterialIcon.default;
   }
 });
+Object.defineProperty(exports, "MembershipCard", {
+  enumerable: true,
+  get: function get() {
+    return _MembershipCard.default;
+  }
+});
 Object.defineProperty(exports, "NotesWidget", {
   enumerable: true,
   get: function get() {
@@ -450,6 +456,7 @@ var _UploadDownloadWidget = _interopRequireDefault(require("./widgets/oa-widget-
 var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-view-history/ViewHistoryWidget"));
 var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
 var _ChatWidget = _interopRequireDefault(require("./widgets/oa-widget-chat/ChatWidget"));
+var _MembershipCard = _interopRequireDefault(require("./widgets/oa-widget-card/MembershipCard"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/widgets/oa-widget-card/MembershipCard.js

@@ -0,0 +1,202 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _CloseOutlined = _interopRequireDefault(require("@material-ui/icons/CloseOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+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; }
+// import image from './assets/modal-img.svg';
+
+function MembershipCard(_ref) {
+  var _body$itemsList, _body$itemsList2;
+  let {
+    card
+  } = _ref;
+  const {
+    body,
+    footer
+  } = card;
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+  const toggleModal = () => {
+    setShowModal(!showModal);
+  };
+  const itemsToShow = (body === null || body === void 0 || (_body$itemsList = body.itemsList) === null || _body$itemsList === void 0 ? void 0 : _body$itemsList.slice(0, 2)) || [];
+  const remainingItems = (body === null || body === void 0 || (_body$itemsList2 = body.itemsList) === null || _body$itemsList2 === void 0 ? void 0 : _body$itemsList2.slice(2)) || [];
+  const {
+    title,
+    titleInfo,
+    primaryInfo,
+    image,
+    tag,
+    primaryPanel,
+    alert
+  } = body || {};
+  const {
+    actions
+  } = footer || {};
+  return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardHead"
+  }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, title)), titleInfo && /*#__PURE__*/_react.default.createElement("p", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "secondary-content"
+  }, titleInfo)), primaryInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primary-info padding-top-8"
+  }, /*#__PURE__*/_react.default.createElement("label", null, primaryInfo.label))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgBg"
+  }, image && /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: "Membership Card"
+  }))), itemsToShow.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: toggleModal,
+    onKeyDown: toggleModal,
+    role: "button",
+    tabIndex: 0,
+    style: {
+      cursor: 'pointer'
+    }
+  }, "...+".concat(remainingItems.length, " more")))), tag && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+    label: tag.text,
+    type: "success"
+  })), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primaryInfo"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "paraWithIcon"
+  }, primaryPanel.icon, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-background",
+    className: "type-link-button-500"
+  }, primaryPanel.label))), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: primaryPanel.name,
+    onKeyDown: e => {
+      if (e.key === 'Enter') primaryPanel.name();
+    },
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    icon: _ArrowForwardIos.default
+  }))), alert.length && alert.map((item, i) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolTipInfo"
+  }, item.tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    isDisplayed: true,
+    title: item.tooltip
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "warning",
+    icon: _InfoOutlined.default
+  })), /*#__PURE__*/_react.default.createElement("div", null, item.subHeading && /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-sl1-700"
+  }, alert.subHeading)), item.heading && /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, alert.heading)), item.description && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b2-400"
+  }, alert.description.text))), item.actions && /*#__PURE__*/_react.default.createElement("div", null, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action.label,
+    label: action.label,
+    type: action.type,
+    onClick: action.name
+  })))))), footer && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, actions && actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action === null || action === void 0 ? void 0 : action.label,
+    label: action === null || action === void 0 ? void 0 : action.label,
+    type: action === null || action === void 0 ? void 0 : action.type,
+    onClick: action === null || action === void 0 ? void 0 : action.name
+  }))), showModal && /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-content"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "close",
+    onClick: toggleModal,
+    onKeyDown: toggleModal,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "secondary-content",
+    icon: _CloseOutlined.default
+  })), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "noOfAppliances"
+  }, remainingItems.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: item
+  }, item))))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    open: showModal,
+    imgSrc: null,
+    onCancel: toggleModal,
+    title: "Your Appliances"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "noOfAppliances"
+  }, remainingItems.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: item
+  }, item)))));
+}
+MembershipCard.propTypes = {
+  card: _propTypes.default.shape({
+    body: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      titleInfo: _propTypes.default.string,
+      primaryInfo: _propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string
+      }),
+      image: _propTypes.default.string,
+      itemsList: _propTypes.default.arrayOf(_propTypes.default.string),
+      tag: _propTypes.default.shape({
+        text: _propTypes.default.string
+      }),
+      primaryPanel: _propTypes.default.shape({
+        icon: _propTypes.default.node,
+        label: _propTypes.default.string,
+        name: _propTypes.default.func
+      }),
+      alert: _propTypes.default.shape({
+        tooltip: _propTypes.default.string,
+        subHeading: _propTypes.default.string,
+        heading: _propTypes.default.string,
+        description: _propTypes.default.shape({
+          text: _propTypes.default.string
+        }),
+        actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+          label: _propTypes.default.string,
+          type: _propTypes.default.string,
+          name: _propTypes.default.func
+        }))
+      })
+    }),
+    footer: _propTypes.default.shape({
+      actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string,
+        name: _propTypes.default.func
+      }))
+    })
+  })
+};
+MembershipCard.defaultProps = {
+  card: null
+};
+var _default = exports.default = MembershipCard;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MembershipCardStyle = exports.CardFooter = exports.CardBody = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+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 MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    gap: 8px;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 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    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"])));
+const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n"])));
+const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ndisplay: flex;\npadding: 16px 24px;\nalign-items: flex-end;\njustify-content: flex-end;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\n"])));

package/package.json

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