intelicoreact 0.3.3 → 0.3.4

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 (3) hide show
  1. package/dist/Atomic/UI/AdvancedTag/AdvTag.js +97 -53
  2. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss +99 -66
  3. package/package.json +1 -1
package/dist/Atomic/UI/AdvancedTag/AdvTag.js CHANGED
@@ -42,7 +42,15 @@ var AdvTag = function AdvTag(_ref) {
42
42
  warnLeft = item.warnLeft,
43
43
  warnLeftMsg = item.warnLeftMsg,
44
44
  warnRightMsg = item.warnRightMsg,
45
- noPingTree = item.noPingTree;
45
+ noPingTree = item.noPingTree,
46
+ _item$isEntityAndCoun = item.isEntityAndCounter,
47
+ isEntityAndCounter = _item$isEntityAndCoun === void 0 ? false : _item$isEntityAndCoun,
48
+ _item$entityAndCounte = item.entityAndCounter,
49
+ entityAndCounter = _item$entityAndCounte === void 0 ? {
50
+ nullCounterMessage: '',
51
+ title: '',
52
+ counter: null
53
+ } : _item$entityAndCounte;
46
54
 
47
55
  var _useState = (0, _react.useState)(false),
48
56
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -86,58 +94,94 @@ var AdvTag = function AdvTag(_ref) {
86
94
  return document.removeEventListener('click', handleClickOutside, true);
87
95
  };
88
96
  });
89
- return /*#__PURE__*/_react.default.createElement("div", {
90
- className: advancedTagClass,
91
- ref: hintRef
92
- }, warnLeft && /*#__PURE__*/_react.default.createElement("div", {
93
- "data-testid": "".concat(testId, "-left"),
94
- className: "pointer",
95
- onMouseEnter: function onMouseEnter() {
96
- return onWarningClick('warnLeft');
97
- },
98
- onMouseLeave: function onMouseLeave() {
99
- return setIsOpen(false);
100
- }
101
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
102
- width: 16,
103
- height: 16,
104
- className: "advanced-tags--warning-icon mr5"
105
- })), labelLeft && /*#__PURE__*/_react.default.createElement("span", {
106
- className: "mr5"
107
- }, labelLeft), labelRight && /*#__PURE__*/_react.default.createElement("span", null, labelRight), item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
108
- className: "ml5 mr5"
109
- }, "|") : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("div", {
110
- className: "df"
111
- }, /*#__PURE__*/_react.default.createElement("span", {
112
- className: activeNumberClass
113
- }, active), /*#__PURE__*/_react.default.createElement("span", {
114
- className: "strong color--pause"
115
- }, "/"), /*#__PURE__*/_react.default.createElement("span", {
116
- className: pauseNumberClass
117
- }, pause)) : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
118
- className: "ml5 mr5"
119
- }, "|") : null, merchants ? /*#__PURE__*/_react.default.createElement("span", null, merchants) : item.type !== 'simple' && /*#__PURE__*/_react.default.createElement("div", {
120
- "data-testid": "".concat(testId, "-right"),
121
- className: "pointer",
122
- onMouseEnter: function onMouseEnter() {
123
- return onWarningClick('warnRight');
124
- },
125
- onMouseLeave: function onMouseLeave() {
126
- return setIsOpen(false);
127
- }
128
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
129
- width: 16,
130
- height: 16,
131
- className: "advanced-tags--warning-icon"
132
- })), isOpen && warnLeftMsg && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
133
- className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
134
- 'advanced-tags__warn-text--warnLeft--to-top': toTop
135
- })
136
- }, warnLeftMsg) : null, isOpen && warnRightMsg && clickedWarning === 'warnRight' ? /*#__PURE__*/_react.default.createElement("span", {
137
- className: (0, _classnames.default)('advanced-tags__warn-text', 'advanced-tags__warn-text--warnRight', {
138
- 'advanced-tags__warn-text--warnRight--to-top': toTop
139
- })
140
- }, warnRightMsg) : null);
97
+
98
+ var renderClassicTag = function renderClassicTag() {
99
+ return /*#__PURE__*/_react.default.createElement("div", {
100
+ className: advancedTagClass,
101
+ ref: hintRef
102
+ }, warnLeft && /*#__PURE__*/_react.default.createElement("div", {
103
+ "data-testid": "".concat(testId, "-left"),
104
+ className: "pointer",
105
+ onMouseEnter: function onMouseEnter() {
106
+ return onWarningClick('warnLeft');
107
+ },
108
+ onMouseLeave: function onMouseLeave() {
109
+ return setIsOpen(false);
110
+ }
111
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
112
+ width: 16,
113
+ height: 16,
114
+ className: "advanced-tags--warning-icon mr5"
115
+ })), labelLeft && /*#__PURE__*/_react.default.createElement("span", {
116
+ className: "mr5"
117
+ }, labelLeft), labelRight && /*#__PURE__*/_react.default.createElement("span", null, labelRight), item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
118
+ className: "ml5 mr5"
119
+ }, "|") : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("div", {
120
+ className: "df"
121
+ }, /*#__PURE__*/_react.default.createElement("span", {
122
+ className: activeNumberClass
123
+ }, active), /*#__PURE__*/_react.default.createElement("span", {
124
+ className: "strong color--pause"
125
+ }, "/"), /*#__PURE__*/_react.default.createElement("span", {
126
+ className: pauseNumberClass
127
+ }, pause)) : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
128
+ className: "ml5 mr5"
129
+ }, "|") : null, merchants ? /*#__PURE__*/_react.default.createElement("span", null, merchants) : item.type !== 'simple' && /*#__PURE__*/_react.default.createElement("div", {
130
+ "data-testid": "".concat(testId, "-right"),
131
+ className: "pointer",
132
+ onMouseEnter: function onMouseEnter() {
133
+ return onWarningClick('warnRight');
134
+ },
135
+ onMouseLeave: function onMouseLeave() {
136
+ return setIsOpen(false);
137
+ }
138
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
139
+ width: 16,
140
+ height: 16,
141
+ className: "advanced-tags--warning-icon"
142
+ })), isOpen && warnLeftMsg && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
143
+ className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
144
+ 'advanced-tags__warn-text--warnLeft--to-top': toTop
145
+ })
146
+ }, warnLeftMsg) : null, isOpen && warnRightMsg && clickedWarning === 'warnRight' ? /*#__PURE__*/_react.default.createElement("span", {
147
+ className: (0, _classnames.default)('advanced-tags__warn-text', 'advanced-tags__warn-text--warnRight', {
148
+ 'advanced-tags__warn-text--warnRight--to-top': toTop
149
+ })
150
+ }, warnRightMsg) : null);
151
+ };
152
+
153
+ var renderWithEntityAndCounterTag = function renderWithEntityAndCounterTag() {
154
+ var _entityAndCounter$cou;
155
+
156
+ var isNullcounter = (entityAndCounter === null || entityAndCounter === void 0 ? void 0 : (_entityAndCounter$cou = entityAndCounter.counter) === null || _entityAndCounter$cou === void 0 ? void 0 : _entityAndCounter$cou.toString()) === '0';
157
+ return /*#__PURE__*/_react.default.createElement("div", {
158
+ className: advancedTagClass,
159
+ ref: hintRef
160
+ }, isNullcounter && /*#__PURE__*/_react.default.createElement("div", {
161
+ "data-testid": "".concat(testId, "-left"),
162
+ className: "pointer",
163
+ onMouseEnter: function onMouseEnter() {
164
+ return onWarningClick('warnLeft');
165
+ },
166
+ onMouseLeave: function onMouseLeave() {
167
+ return setIsOpen(false);
168
+ }
169
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
170
+ width: 16,
171
+ height: 16,
172
+ className: "advanced-tags--warning-icon mr5"
173
+ })), isOpen && entityAndCounter !== null && entityAndCounter !== void 0 && entityAndCounter.nullCounterMessage && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
174
+ className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
175
+ 'advanced-tags__warn-text--warnLeft--to-top': toTop
176
+ })
177
+ }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.nullCounterMessage) : null, (entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.title) && /*#__PURE__*/_react.default.createElement("span", {
178
+ className: "mr5"
179
+ }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.title), /*#__PURE__*/_react.default.createElement("div", {
180
+ className: "advanced-tags__counter ".concat(isNullcounter ? 'advanced-tags__counter--null' : 'advanced-tags__counter--bold')
181
+ }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.counter));
182
+ };
183
+
184
+ return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();
141
185
  };
142
186
 
143
187
  var _default = AdvTag;
package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss CHANGED
@@ -1,82 +1,115 @@
1
1
  .advanced-tags {
2
- display: inline-flex;
3
- background-color: #e2e5ec;
4
- height: 24px;
5
- align-items: center;
6
- justify-content: center;
7
- border-radius: 2px;
8
- padding: 2px 8px;
9
- margin-right: 4px;
2
+ display: inline-flex;
3
+ background-color: #e2e5ec;
4
+ height: 24px;
5
+ align-items: center;
6
+ justify-content: center;
7
+ border-radius: 2px;
8
+ padding: 2px 8px;
9
+ margin-right: 4px;
10
+ font-size: 10px;
11
+ position: relative;
12
+ margin-top: 2.5px;
13
+ margin-bottom: 2.5px;
14
+
15
+ &--error {
16
+ background-color: #fce2e8;
17
+ }
18
+
19
+
20
+
21
+ &--warning-icon {
22
+ min-height: 16px;
23
+ min-width: 16px;
24
+ font-size: 17px;
25
+ color: #f06d8d;
26
+ }
27
+
28
+ &__warn-text {
29
+ position: absolute;
30
+ background-color: #6b81dd;
31
+ color: #fff;
10
32
  font-size: 10px;
11
- position: relative;
12
- margin-top: 2.5px;
13
- margin-bottom: 2.5px;
33
+ line-height: 16px;
34
+ border-radius: 4px;
35
+ max-width: 270px;
36
+ min-width: 80px;
37
+ padding: 8px;
38
+ z-index: 2;
14
39
 
15
- &--error {
16
- background-color: #fce2e8;
40
+ &:before {
41
+ content: '';
42
+ position: absolute;
43
+ width: 8.5px;
44
+ height: 8.5px;
45
+ background-color: #6b81dd;
46
+ transform: rotate(45deg);
17
47
  }
18
48
 
49
+ &--warnLeft {
50
+ top: 30px;
51
+ left: 4px;
19
52
 
53
+ &:before {
54
+ left: 8px;
55
+ top: -4px;
56
+ }
20
57
 
21
- &--warning-icon {
22
- min-height: 16px;
23
- min-width: 16px;
24
- font-size: 17px;
25
- color: #f06d8d;
58
+ &--to-top {
59
+ top: -50px;
60
+ }
26
61
  }
27
62
 
28
- &__warn-text {
29
- position: absolute;
30
- background-color: #6b81dd;
31
- color: #fff;
32
- font-size: 10px;
33
- line-height: 16px;
34
- border-radius: 4px;
35
- max-width: 270px;
36
- min-width: 80px;
37
- padding: 8px;
38
- z-index: 2;
39
- // white-space: nowrap;
40
- &:before {
41
- content: '';
42
- position: absolute;
43
- width: 8.5px;
44
- height: 8.5px;
45
- background-color: #6b81dd;
46
- transform: rotate(45deg);
47
- }
48
-
49
- &--warnLeft {
50
- top: 30px;
51
- left: 4px;
52
-
53
- &:before {
54
- left: 8px;
55
- top: -4px;
56
- }
57
- &--to-top {
58
- top: -50px;
59
- }
60
- }
61
-
62
- &--warnRight {
63
- top: 30px;
64
- &:before {
65
- right: 10px;
66
- top: -4px;
67
- }
68
- &--to-top {
69
- top: -50px;
70
- }
71
- }
63
+ &--warnRight {
64
+ top: 30px;
65
+
66
+ &:before {
67
+ right: 10px;
68
+ top: -4px;
69
+ }
72
70
 
71
+ &--to-top {
72
+ top: -50px;
73
+ }
73
74
  }
74
75
 
75
- &--showMore {
76
- background-color: #ffedc8;
77
- cursor: pointer;
78
- user-select: none;
76
+ }
77
+
78
+ &--showMore {
79
+ background-color: #ffedc8;
80
+ cursor: pointer;
81
+ user-select: none;
82
+ }
83
+
84
+
85
+ &__counter {
86
+ text-align: center;
87
+ margin-right: -8px;
88
+ padding: 0 8px 0;
89
+ width: fit-content;
90
+ position: relative;
91
+
92
+ &::after {
93
+ content: '';
94
+ position: absolute;
95
+ height: 27px;
96
+ width: 2px;
97
+ background-color: #9AA0B9;
98
+ opacity: 0.2;
99
+ left: 0;
100
+ top: -7px;
79
101
  }
80
102
 
103
+ &--null {
104
+ color: #9AA0B9;
105
+ opacity: 0.7;
106
+ }
81
107
 
108
+ &--bold {
109
+ font-family: 'Roboto';
110
+ font-weight: 700;
111
+ font-size: 11px;
112
+ color: #1E1E2D;
113
+ }
114
+ }
82
115
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "0.3.3",
3
+ "version": "0.3.4",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [