@desynova-digital/components 9.2.1 → 9.2.3
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.
- package/atoms/cardV2/cardV2.js +10 -5
- package/atoms/cardV2/content.js +94 -150
- package/atoms/cardV2/contentV2.js +287 -0
- package/atoms/cardV2/thumbnail.js +58 -61
- package/atoms/cardV2/thumbnailV2.js +251 -0
- package/atoms/icon/icon.story.js +230 -203
- package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeStandardInput.js +6 -4
- package/molecules/richTextInputV2/RichTextInputV2.js +10 -2
- package/package.json +2 -2
package/atoms/cardV2/cardV2.js
CHANGED
|
@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
13
13
|
var _thumbnail = _interopRequireDefault(require("./thumbnail"));
|
|
14
14
|
var _content = _interopRequireDefault(require("./content"));
|
|
15
15
|
var _timeline = _interopRequireDefault(require("./timeline"));
|
|
16
|
+
var _contentV = _interopRequireDefault(require("./contentV2"));
|
|
17
|
+
var _thumbnailV = _interopRequireDefault(require("./thumbnailV2"));
|
|
16
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // components
|
|
17
19
|
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); }
|
|
18
20
|
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 && {}.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; }
|
|
@@ -45,14 +47,16 @@ var CardStyles = _styledComponents["default"].div(_templateObject6 || (_template
|
|
|
45
47
|
var upload_type = _ref3.upload_type;
|
|
46
48
|
return upload_type === 'RC' ? "\n 0 0 0 1px rgba(255,140,0,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(255,140,0,0.18)\n " : "\n 0 0 0 1px rgba(13,247,169,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(13,247,169,0.18)\n ";
|
|
47
49
|
}, function (_ref4) {
|
|
48
|
-
var upload_type = _ref4.upload_type
|
|
49
|
-
|
|
50
|
+
var upload_type = _ref4.upload_type,
|
|
51
|
+
ingest_db_id = _ref4.ingest_db_id;
|
|
52
|
+
return upload_type === 'RC' ? 'rgba(255, 141, 41, 0.2)' : !ingest_db_id ? 'rgba(48, 63, 81, 0.2)' : 'rgba(24, 185, 110, 0.2)';
|
|
50
53
|
});
|
|
51
54
|
var CardV2 = function CardV2(props) {
|
|
52
55
|
var width = props.width,
|
|
53
|
-
type = props.type
|
|
56
|
+
type = props.type,
|
|
57
|
+
isCardv2 = props.isCardv2;
|
|
54
58
|
var content = (0, _react.useCallback)(function () {
|
|
55
|
-
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props)
|
|
59
|
+
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props), isCardv2 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnailV["default"], props), /*#__PURE__*/_react["default"].createElement(_contentV["default"], props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props)));
|
|
56
60
|
}, [props]);
|
|
57
61
|
|
|
58
62
|
/**
|
|
@@ -86,7 +90,8 @@ CardV2.propTypes = {
|
|
|
86
90
|
onUploadTypeClick: _propTypes["default"].func,
|
|
87
91
|
theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
|
|
88
92
|
type: _propTypes["default"].oneOf(['asset', 'search']),
|
|
89
|
-
bgColor: _propTypes["default"].oneOf(['primary', 'secondary'])
|
|
93
|
+
bgColor: _propTypes["default"].oneOf(['primary', 'secondary']),
|
|
94
|
+
isCardv2: _propTypes["default"].bool
|
|
90
95
|
};
|
|
91
96
|
CardV2.defaultProps = {
|
|
92
97
|
isSegment: false,
|
package/atoms/cardV2/content.js
CHANGED
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
11
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -16,199 +15,135 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
16
15
|
var _cardV = require("./cardV2");
|
|
17
16
|
var _icon = _interopRequireDefault(require("../../atoms/icon"));
|
|
18
17
|
var _tokens = require("@desynova-digital/tokens");
|
|
19
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
20
19
|
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); }
|
|
21
20
|
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 && {}.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; }
|
|
22
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
21
|
var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
22
|
+
var ToolTipStyles = (0, _styledComponents["default"])(function (props) {
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
|
|
24
|
+
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"])), function (props) {
|
|
25
|
+
return props.top ? props.top : '25px';
|
|
26
|
+
});
|
|
25
27
|
var ParaStyles = (0, _styledComponents["default"])(function (props) {
|
|
26
28
|
return /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, props);
|
|
27
|
-
})(
|
|
29
|
+
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"])), TextEllipsisStyles);
|
|
28
30
|
var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
29
31
|
return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
|
|
30
|
-
})(
|
|
32
|
+
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"])), TextEllipsisStyles, function (_ref) {
|
|
31
33
|
var isTitleClick = _ref.isTitleClick;
|
|
32
34
|
return isTitleClick ? 'pointer' : 'default';
|
|
33
35
|
});
|
|
34
|
-
var ContentStyles = _styledComponents["default"].div(
|
|
35
|
-
var
|
|
36
|
-
width = _ref2.width;
|
|
37
|
-
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
38
|
-
}, function (_ref3) {
|
|
39
|
-
var width = _ref3.width;
|
|
36
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n"])), function (_ref2) {
|
|
37
|
+
var width = _ref2.width;
|
|
40
38
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
41
|
-
}, function (
|
|
42
|
-
var type =
|
|
43
|
-
width =
|
|
39
|
+
}, function (_ref3) {
|
|
40
|
+
var type = _ref3.type,
|
|
41
|
+
width = _ref3.width;
|
|
44
42
|
if (width === 'sm' && type === 'search') {
|
|
45
43
|
return '0px 13px';
|
|
46
44
|
} else if (type === 'search' && width !== 'sm') {
|
|
47
45
|
return '13px 0px';
|
|
48
46
|
} else return '13px 15px';
|
|
49
|
-
}, function (
|
|
50
|
-
var bgColor =
|
|
51
|
-
type =
|
|
47
|
+
}, function (_ref4) {
|
|
48
|
+
var bgColor = _ref4.bgColor,
|
|
49
|
+
type = _ref4.type;
|
|
52
50
|
return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
|
|
53
51
|
}, function (props) {
|
|
54
52
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
55
53
|
}, function (props) {
|
|
56
54
|
return _tokens.colors[props.theme].card.themeColor;
|
|
57
|
-
}, function (_ref6) {
|
|
58
|
-
var upload_type = _ref6.upload_type;
|
|
59
|
-
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
60
|
-
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
61
|
-
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
62
|
-
return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
63
|
-
}, function (_ref7) {
|
|
64
|
-
var upload_type = _ref7.upload_type;
|
|
65
|
-
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
66
55
|
});
|
|
67
|
-
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 2px 6px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--Color-Text-color-Text-500, #999);\n text-align: center;\n font-family: 'SFUITEXT-LIGHT';\n font-size: 8px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
68
56
|
var Content = function Content(props) {
|
|
69
57
|
var h1 = props.h1,
|
|
70
58
|
h2 = props.h2,
|
|
71
59
|
h3 = props.h3,
|
|
72
60
|
h4 = props.h4,
|
|
73
61
|
h5 = props.h5,
|
|
74
|
-
h6 = props.h6,
|
|
75
|
-
h7 = props.h7,
|
|
76
62
|
isSegment = props.isSegment,
|
|
77
63
|
type = props.type,
|
|
78
64
|
width = props.width,
|
|
79
65
|
titleClick = props.titleClick,
|
|
80
66
|
show_page_id = props.show_page_id,
|
|
81
67
|
overlapping = props.overlapping,
|
|
82
|
-
theme = props.theme
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
dubbing_review: {
|
|
108
|
-
width: 7,
|
|
109
|
-
height: 10
|
|
68
|
+
theme = props.theme;
|
|
69
|
+
var _useState = (0, _react.useState)(''),
|
|
70
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
71
|
+
tooltipVisibleSection = _useState2[0],
|
|
72
|
+
setTooltipVisibleSection = _useState2[1];
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* toogle tooltip -> true / false
|
|
76
|
+
* @function
|
|
77
|
+
*/
|
|
78
|
+
var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
|
|
79
|
+
return function () {
|
|
80
|
+
if (tooltipText.replace(/ /g, '').length >= (width === 'sm' ? 15 : 33)) {
|
|
81
|
+
setTooltipVisibleSection(tooltipSection);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
}, []);
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* returns filtered list removing undefined from input array
|
|
88
|
+
* @function
|
|
89
|
+
*/
|
|
90
|
+
var getTooltipData = function getTooltipData() {
|
|
91
|
+
for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
92
|
+
list[_key] = arguments[_key];
|
|
110
93
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
snp_edit: 'SNP edit',
|
|
114
|
-
pgm_edit_V2: 'PGM edit',
|
|
115
|
-
archive: 'Archive',
|
|
116
|
-
delivery: 'Delivery',
|
|
117
|
-
dubbing_review: 'Dubbing Review',
|
|
118
|
-
subtitle_assign: 'Subtitle',
|
|
119
|
-
file_ingest: 'Ingest'
|
|
120
|
-
};
|
|
121
|
-
var getIconLabel = function getIconLabel(iconName) {
|
|
122
|
-
return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
|
|
123
|
-
};
|
|
124
|
-
var STATUS_COLOR_MAP = {
|
|
125
|
-
Success: '#18B96E',
|
|
126
|
-
Pending: '#666666',
|
|
127
|
-
Failed: '#FF6C56',
|
|
128
|
-
'In Progress': '#FF8D29',
|
|
129
|
-
'In Queue': '#F9E900'
|
|
130
|
-
};
|
|
131
|
-
var footerIcons = (icon_status || []).map(function (item) {
|
|
132
|
-
var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
|
|
133
|
-
return _objectSpread({
|
|
134
|
-
name: item.icon,
|
|
135
|
-
status: item.status,
|
|
136
|
-
tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
|
|
137
|
-
color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
|
|
138
|
-
}, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
|
|
139
|
-
width: 10,
|
|
140
|
-
height: 10
|
|
94
|
+
return list.map(function (ele) {
|
|
95
|
+
return ele && "".concat(ele, " ");
|
|
141
96
|
});
|
|
142
|
-
}
|
|
143
|
-
var _useState = (0, _react.useState)(false),
|
|
144
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
145
|
-
isFilesIconHovered = _useState2[0],
|
|
146
|
-
setIsFilesIconHovered = _useState2[1];
|
|
97
|
+
};
|
|
147
98
|
return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
|
|
148
99
|
className: "asset-card-content"
|
|
149
100
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
150
|
-
className: "title-parent"
|
|
101
|
+
className: "title-parent",
|
|
102
|
+
onMouseOver: handleTooltip('top', h1),
|
|
103
|
+
onMouseOut: handleTooltip('', h1)
|
|
151
104
|
}, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
|
|
152
105
|
theme: props.theme,
|
|
153
106
|
isTitleClick: show_page_id,
|
|
154
107
|
onClick: function onClick(e) {
|
|
155
108
|
return titleClick(e, show_page_id);
|
|
156
109
|
},
|
|
157
|
-
fontSize: "
|
|
110
|
+
fontSize: "14px",
|
|
158
111
|
color: "#FFF"
|
|
159
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}, h3), h4 && /*#__PURE__*/_react["default"].createElement("span", {
|
|
183
|
-
className: "meta-text",
|
|
184
|
-
title: h4
|
|
185
|
-
}, h4), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
112
|
+
}, h1), tooltipVisibleSection == 'top' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
|
|
113
|
+
theme: props.theme,
|
|
114
|
+
width: "100%",
|
|
115
|
+
padding: "0.5rem",
|
|
116
|
+
borderRadius: "0.25rem",
|
|
117
|
+
position: "absolute",
|
|
118
|
+
zIndex: "1",
|
|
119
|
+
bgColor: "#000",
|
|
120
|
+
fontSize: "12px",
|
|
121
|
+
color: "#FFF",
|
|
122
|
+
top: "30px"
|
|
123
|
+
}, h1)), (h2 || h3 || h4 || h5 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
124
|
+
theme: props.theme,
|
|
125
|
+
display: "flex",
|
|
126
|
+
justify: "space-between",
|
|
127
|
+
margin: "10px 0 0 0",
|
|
128
|
+
position: "relative",
|
|
129
|
+
onMouseOver: handleTooltip('bottom', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', '')),
|
|
130
|
+
onMouseOut: handleTooltip('', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', ''))
|
|
131
|
+
}, (h2 || h3 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
132
|
+
theme: props.theme,
|
|
133
|
+
display: "flex"
|
|
134
|
+
}, h2 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h2), h3 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h3), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
186
135
|
className: "segment-indicator"
|
|
187
|
-
}, "S")), (
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}, h7), /*#__PURE__*/_react["default"].createElement("span", {
|
|
199
|
-
className: "footer-icons"
|
|
200
|
-
}, footerIcons.map(function (icon) {
|
|
201
|
-
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
202
|
-
key: icon.name,
|
|
203
|
-
className: "footer-icon",
|
|
204
|
-
title: icon.tooltipLabel
|
|
205
|
-
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
206
|
-
name: icon.name,
|
|
207
|
-
color: icon.color,
|
|
208
|
-
width: icon.width,
|
|
209
|
-
height: icon.height
|
|
210
|
-
}));
|
|
211
|
-
}))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
136
|
+
}, "S")), (h4 || h5) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
137
|
+
theme: props.theme,
|
|
138
|
+
display: "flex"
|
|
139
|
+
}, h4 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
140
|
+
theme: props.theme,
|
|
141
|
+
style: {
|
|
142
|
+
marginRight: !h5 && 0
|
|
143
|
+
}
|
|
144
|
+
}, h4), h5 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
145
|
+
margin: "0"
|
|
146
|
+
}, h5)), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
212
147
|
theme: props.theme,
|
|
213
148
|
display: "flex",
|
|
214
149
|
className: "overlapping-container"
|
|
@@ -247,7 +182,18 @@ var Content = function Content(props) {
|
|
|
247
182
|
})))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
248
183
|
theme: props.theme,
|
|
249
184
|
margin: "0"
|
|
250
|
-
}, overlapping.length)) || null
|
|
185
|
+
}, overlapping.length)) || null, tooltipVisibleSection == 'bottom' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
|
|
186
|
+
theme: props.theme,
|
|
187
|
+
width: "100%",
|
|
188
|
+
padding: "0.5rem",
|
|
189
|
+
borderRadius: "0.25rem",
|
|
190
|
+
position: "absolute",
|
|
191
|
+
zIndex: "1",
|
|
192
|
+
bgColor: "#000",
|
|
193
|
+
fontSize: "12px",
|
|
194
|
+
color: "#FFF",
|
|
195
|
+
top: "15px"
|
|
196
|
+
}, getTooltipData(h2, h3, h4, h5))));
|
|
251
197
|
};
|
|
252
198
|
Content.propTypes = {
|
|
253
199
|
h1: _propTypes["default"].string,
|
|
@@ -255,8 +201,6 @@ Content.propTypes = {
|
|
|
255
201
|
h3: _propTypes["default"].string,
|
|
256
202
|
h4: _propTypes["default"].string,
|
|
257
203
|
h5: _propTypes["default"].string,
|
|
258
|
-
h6: _propTypes["default"].string,
|
|
259
|
-
h7: _propTypes["default"].string,
|
|
260
204
|
width: _propTypes["default"].string,
|
|
261
205
|
type: _propTypes["default"].string,
|
|
262
206
|
titleClick: _propTypes["default"].func,
|