oa-componentbook 0.18.107 → 0.18.108

package/build/index.js

@@ -469,8 +469,8 @@ 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"));
-var _MembershipDetailCard = _interopRequireDefault(require("./widgets/oa-detailWidget-card/MembershipDetailCard"));
+var _MembershipCard = _interopRequireDefault(require("./widgets/oa-widget-membershipcard/MembershipCard"));
+var _MembershipDetailCard = _interopRequireDefault(require("./widgets/oa-widget-detailcard/MembershipDetailCard"));
 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-servicecard/ServiceCard.js

@@ -0,0 +1,143 @@
+"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 _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+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; }
+function ServiceCard(_ref) {
+  var _body$heading, _body$heading2, _alert$description, _alert$description2, _alert$description3, _alert$description4, _footer$actions;
+  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$heading = body.heading) === null || _body$heading === void 0 ? void 0 : _body$heading.slice(0, 1)) || [];
+  const remainingItems = (body === null || body === void 0 || (_body$heading2 = body.heading) === null || _body$heading2 === void 0 ? void 0 : _body$heading2.slice(1)) || [];
+  const {
+    heading,
+    subHeading,
+    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, heading && heading.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, itemsToShow.length && itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: 'var(--color-primary)',
+      cursor: 'pointer'
+    },
+    role: "button",
+    tabIndex: 0,
+    onClick: () => setShowModal(true),
+    onKeyPress: event => {
+      if (event.key === 'Enter') {
+        setShowModal(true);
+      }
+    }
+  }, "...+".concat(remainingItems.length, " more")))), subHeading && /*#__PURE__*/_react.default.createElement("p", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "secondary-content"
+  }, subHeading)))), (alert === null || alert === void 0 || (_alert$description = alert.description) === null || _alert$description === void 0 ? void 0 : _alert$description.text) !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: alert !== null && alert !== void 0 && (_alert$description2 = alert.description) !== null && _alert$description2 !== void 0 && _alert$description2.text && (alert === null || alert === void 0 || (_alert$description3 = alert.description) === null || _alert$description3 === void 0 ? void 0 : _alert$description3.text) !== '' ? "toolTipInfo ".concat(alert.description.type) : 'toolTipInfo flexChangeBody'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolTip"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexGap"
+  }, (alert === null || alert === void 0 ? void 0 : alert.description) && (alert === null || alert === void 0 || (_alert$description4 = alert.description) === null || _alert$description4 === void 0 ? void 0 : _alert$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, alert.description.text))))), alert.actions && /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewStatus"
+  }, alert.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action.label,
+    label: action.label,
+    type: action.type,
+    onClick: action.name,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _ArrowForwardIosSharp.default,
+        size: 16
+      }),
+      position: 'right'
+    }
+  }))))), footer && footer.type === 'button' && (footer === null || footer === void 0 || (_footer$actions = footer.actions) === null || _footer$actions === void 0 ? void 0 : _footer$actions.length) > 0 && /*#__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,
+    size: "large",
+    onClick: action === null || action === void 0 ? void 0 : action.name,
+    disabled: action === null || action === void 0 ? void 0 : action.disabled
+  }))), footer && footer.type === 'text' && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b1-400"
+  }, "For further help, call us at", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, "1800 123 3300"))), /*#__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)))));
+}
+ServiceCard.propTypes = {
+  card: _propTypes.default.shape({
+    body: _propTypes.default.shape({
+      heading: _propTypes.default.arrayOf(_propTypes.default.string),
+      subHeading: _propTypes.default.string,
+      alert: _propTypes.default.shape({
+        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({
+      type: _propTypes.default.string,
+      actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string,
+        name: _propTypes.default.func
+      }))
+    })
+  })
+};
+ServiceCard.defaultProps = {
+  card: null
+};
+var _default = exports.default = ServiceCard;

package/build/widgets/oa-widget-servicecard/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.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    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(["\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  padding: 16px 16px;\n  width: calc(100% + 32px);\n  margin: 0 0 0 -16px;\n  top: 16px;\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.107",
+  "version": "0.18.108",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",