oa-componentbook 0.18.93 → 0.18.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/index.js +7 -0
  2. package/build/widgets/oa-detailWidget-card/MembershipDetailCard.js +112 -0
  3. package/build/widgets/oa-detailWidget-card/styles.js +12 -0
  4. package/package.json +1 -1
package/build/index.js CHANGED
@@ -281,6 +281,12 @@ Object.defineProperty(exports, "MembershipCard", {
281
281
  return _MembershipCard.default;
282
282
  }
283
283
  });
284
+ Object.defineProperty(exports, "MembershipDetailCard", {
285
+ enumerable: true,
286
+ get: function get() {
287
+ return _MembershipDetailCard.default;
288
+ }
289
+ });
284
290
  Object.defineProperty(exports, "NotesWidget", {
285
291
  enumerable: true,
286
292
  get: function get() {
@@ -464,6 +470,7 @@ var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-vie
464
470
  var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
465
471
  var _ChatWidget = _interopRequireDefault(require("./widgets/oa-widget-chat/ChatWidget"));
466
472
  var _MembershipCard = _interopRequireDefault(require("./widgets/oa-widget-card/MembershipCard"));
473
+ var _MembershipDetailCard = _interopRequireDefault(require("./widgets/oa-detailWidget-card/MembershipDetailCard"));
467
474
  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); }
468
475
  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; }
469
476
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/build/widgets/oa-detailWidget-card/MembershipDetailCard.js ADDED
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ require("core-js/modules/es.symbol.description.js");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
11
+ var _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
12
+ var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
13
+ var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
14
+ var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
15
+ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
16
+ var _styles = require("./styles");
17
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
+ function MembershipDetailCard(_ref) {
19
+ let {
20
+ card
21
+ } = _ref;
22
+ const {
23
+ body
24
+ } = card;
25
+ const {
26
+ heading,
27
+ subHeading,
28
+ primaryInfo,
29
+ secondaryInfo,
30
+ alert
31
+ } = body || {};
32
+ return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
33
+ className: "cardHead"
34
+ }, /*#__PURE__*/_react.default.createElement("div", null, subHeading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
35
+ className: "type-sl1-700",
36
+ color: "secondary-content"
37
+ }, subHeading), heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
38
+ color: "primary-content",
39
+ className: "type-t1-500"
40
+ }, heading))), primaryInfo && /*#__PURE__*/_react.default.createElement("div", {
41
+ className: "primary-info"
42
+ }, secondaryInfo && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
43
+ color: "secondary-content",
44
+ className: "type-b2-400"
45
+ }, secondaryInfo)), /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
46
+ color: primaryInfo.type === 'success' ? 'positive' : 'negative',
47
+ className: "type-b2-400"
48
+ }, primaryInfo.label)))), alert.length && alert.map((item, i) => {
49
+ var _item$description, _item$description2, _item$description3, _item$description4;
50
+ return ((item === null || item === void 0 ? void 0 : item.subHeading) !== '' || (item === null || item === void 0 ? void 0 : item.heading) !== '' || (item === null || item === void 0 || (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.text) !== undefined) && /*#__PURE__*/_react.default.createElement("div", {
51
+ className: item !== null && item !== void 0 && (_item$description2 = item.description) !== null && _item$description2 !== void 0 && _item$description2.text && (item === null || item === void 0 || (_item$description3 = item.description) === null || _item$description3 === void 0 ? void 0 : _item$description3.text) !== '' ? "toolTipInfo ".concat(item.type) : 'toolTipInfo flexChangeBody'
52
+ }, /*#__PURE__*/_react.default.createElement("div", {
53
+ className: "toolTip"
54
+ }, item.tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
55
+ isDisplayed: true
56
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
57
+ color: item.type,
58
+ icon: _InfoOutlined.default
59
+ })), /*#__PURE__*/_react.default.createElement("div", null, (item === null || item === void 0 ? void 0 : item.subHeading) && /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
60
+ color: "secondary-content",
61
+ className: "type-sl1-700"
62
+ }, item === null || item === void 0 ? void 0 : item.subHeading)), (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
63
+ color: "primary-content",
64
+ className: "type-t2-700"
65
+ }, item === null || item === void 0 ? void 0 : item.heading)), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
66
+ color: "primary-content",
67
+ className: "type-b2-400"
68
+ }, item.description.text)))), item.actions && /*#__PURE__*/_react.default.createElement("div", null, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
69
+ key: action.label,
70
+ label: action.label,
71
+ type: action.type,
72
+ onClick: action.name,
73
+ iconConfig: {
74
+ icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
75
+ icon: _ArrowForwardIosSharp.default,
76
+ size: 16
77
+ }),
78
+ position: 'right'
79
+ }
80
+ }))));
81
+ })));
82
+ }
83
+ MembershipDetailCard.propTypes = {
84
+ card: _propTypes.default.shape({
85
+ body: _propTypes.default.shape({
86
+ heading: _propTypes.default.string,
87
+ subHeading: _propTypes.default.string,
88
+ primaryInfo: _propTypes.default.shape({
89
+ label: _propTypes.default.string,
90
+ type: _propTypes.default.string
91
+ }),
92
+ secondaryInfo: _propTypes.default.string,
93
+ alert: _propTypes.default.shape({
94
+ tooltip: _propTypes.default.string,
95
+ subHeading: _propTypes.default.string,
96
+ heading: _propTypes.default.string,
97
+ description: _propTypes.default.shape({
98
+ text: _propTypes.default.string
99
+ }),
100
+ actions: _propTypes.default.arrayOf(_propTypes.default.shape({
101
+ label: _propTypes.default.string,
102
+ type: _propTypes.default.string,
103
+ name: _propTypes.default.func
104
+ }))
105
+ })
106
+ })
107
+ })
108
+ };
109
+ MembershipDetailCard.defaultProps = {
110
+ card: null
111
+ };
112
+ var _default = exports.default = MembershipDetailCard;
package/build/widgets/oa-detailWidget-card/styles.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.MembershipCardStyle = exports.CardBody = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject, _templateObject2;
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
+ const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.primaryInfo svg{\n cursor: pointer;\n}\np,h2{\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 @media only screen and (max-width: 600px) {\n gap: 16px;\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 }\n .primaryInfo img{\n width: 24px;\n }\n .toolTipInfo .text-container svg {\n color: var(--color-primary);\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 gap: 8px;\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 svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n width: 80%;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 32px;\n flex-direction: column;\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 .toolTip svg{\n margin: 4px 0 0;\n }\n @media only screen and (max-width: 600px) {\n .toolTipInfo {\n flex-direction: column;\n gap: 16px;\n align-items: unset;\n }\n .cardHead h2 > span{\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n }\n"])));
12
+ const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 32px;\n\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.93",
3
+ "version": "0.18.95",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",