intelicoreact 0.3.3 → 0.3.6

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/dist/Atomic/FormElements/UserContacts/UserContacts.js +7 -2
  2. package/dist/Atomic/UI/AdvancedTag/AdvTag.js +97 -53
  3. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss +99 -66
  4. package/package.json +1 -1
package/dist/Atomic/FormElements/UserContacts/UserContacts.js CHANGED
@@ -35,6 +35,9 @@ var UserContacts = function UserContacts(props) {
35
35
  var _ref = props || {},
36
36
  email = _ref.email,
37
37
  phone = _ref.phone,
38
+ contactType = _ref.contactType,
39
+ _ref$useCommaSeparato = _ref.useCommaSeparator,
40
+ useCommaSeparator = _ref$useCommaSeparato === void 0 ? true : _ref$useCommaSeparato,
38
41
  _ref$isDisputeContact = _ref.isDisputeContact,
39
42
  isDisputeContact = _ref$isDisputeContact === void 0 ? null : _ref$isDisputeContact,
40
43
  _ref$isSalesContact = _ref.isSalesContact,
@@ -111,13 +114,15 @@ var UserContacts = function UserContacts(props) {
111
114
  target: "_blank",
112
115
  rel: "noreferrer",
113
116
  className: (0, _classnames.default)('no-wrap', "".concat(RC, "__email"), (0, _defineProperty2.default)({}, "".concat(RC, "__email_icon-mode"), isUseEmailIcon))
114
- }, isUseEmailIcon ? EIcon : "".concat(email).concat(phone ? ',' : '')), !!phone && /*#__PURE__*/_react.default.createElement("a", {
117
+ }, isUseEmailIcon ? EIcon : "".concat(email).concat(phone && useCommaSeparator ? ',' : '')), !!phone && /*#__PURE__*/_react.default.createElement("a", {
115
118
  ref: phoneRef,
116
119
  href: "tel:+".concat((0, _fieldValueFormatters.formatOnlyNumbers)(phone).trim()),
117
120
  target: "_blank",
118
121
  rel: "noreferrer",
119
122
  className: (0, _classnames.default)('no-wrap', "".concat(RC, "__phone"), (0, _defineProperty2.default)({}, "".concat(RC, "__phone_icon-mode"), isUsePhonelIcon))
120
- }, isUsePhonelIcon ? PIcon : phone), isContact && /*#__PURE__*/_react.default.createElement("span", {
123
+ }, isUsePhonelIcon ? PIcon : "".concat(phone).concat(contactType && useCommaSeparator ? ',' : '')), !!contactType && /*#__PURE__*/_react.default.createElement("span", {
124
+ className: (0, _classnames.default)('no-wrap', "".concat(RC, "__contactType"))
125
+ }, contactType), isContact && /*#__PURE__*/_react.default.createElement("span", {
121
126
  ref: contactsRef,
122
127
  className: (0, _classnames.default)('no-wrap', "".concat(RC, "__contacts"))
123
128
  }, isSalesContact ? "".concat(Lng('Sales')).concat(getComma()) : '', isDisputeContact ? "".concat(Lng('Dispute')).concat(getComma()) : '', isAccountingContact ? "".concat(Lng('Accounting ')) : '', "contact"));
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.6",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [