@zohodesk/components 1.3.2 → 1.3.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.
Files changed (49) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +8 -0
  3. package/es/Button/__tests__/Button.spec.js +134 -1
  4. package/es/DateTime/__tests__/YearView.spec.js +1 -2
  5. package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +8 -1
  6. package/es/Provider/IdProvider.js +1 -1
  7. package/es/Select/__tests__/Select.spec.js +1130 -4
  8. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +9621 -1
  9. package/es/Stencils/Stencils.js +5 -12
  10. package/es/Stencils/Stencils.module.css +11 -7
  11. package/es/Stencils/__tests__/Stencils.spec.js +9 -1
  12. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +27 -11
  13. package/es/Stencils/props/defaultProps.js +2 -1
  14. package/es/Stencils/props/propTypes.js +3 -2
  15. package/es/Tab/Tab.js +2 -1
  16. package/es/Tab/TabWrapper.js +2 -1
  17. package/es/Tab/Tabs.js +10 -10
  18. package/es/Tab/__tests__/TabLayout.spec.js +34 -0
  19. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +341 -0
  20. package/es/Tab/props/propTypes.js +2 -2
  21. package/es/Tab/utils/tabConfigs.js +18 -0
  22. package/es/Tag/__tests__/Tag.spec.js +8 -1
  23. package/es/utils/Common.js +1 -1
  24. package/lib/Button/__tests__/Button.spec.js +140 -0
  25. package/lib/DateTime/__tests__/YearView.spec.js +1 -2
  26. package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +8 -0
  27. package/lib/Provider/IdProvider.js +1 -0
  28. package/lib/Select/__tests__/Select.spec.js +1364 -3
  29. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +9621 -1
  30. package/lib/Stencils/Stencils.js +5 -12
  31. package/lib/Stencils/Stencils.module.css +11 -7
  32. package/lib/Stencils/__tests__/Stencils.spec.js +11 -3
  33. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +27 -11
  34. package/lib/Stencils/props/defaultProps.js +2 -1
  35. package/lib/Stencils/props/propTypes.js +3 -2
  36. package/lib/Tab/Tab.js +3 -1
  37. package/lib/Tab/TabWrapper.js +3 -1
  38. package/lib/Tab/Tabs.js +11 -10
  39. package/lib/Tab/__tests__/TabLayout.spec.js +41 -0
  40. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +341 -0
  41. package/lib/Tab/props/propTypes.js +2 -2
  42. package/lib/Tab/utils/tabConfigs.js +27 -0
  43. package/lib/Tag/__tests__/Tag.spec.js +10 -2
  44. package/lib/utils/Common.js +1 -1
  45. package/package.json +1 -1
  46. package/react-cli.config.js +2 -2
  47. package/result.json +1 -1
  48. package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +0 -61
  49. package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +0 -61
@@ -0,0 +1,341 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
4
+ <DocumentFragment>
5
+ <div
6
+ class="flex cover rowdir"
7
+ data-id="containerComponent"
8
+ data-selector-id="tabWrapper"
9
+ data-test-id="containerComponent"
10
+ >
11
+ <div
12
+ class="shrinkOff"
13
+ data-id="boxComponent"
14
+ data-selector-id="tabs"
15
+ data-test-id="boxComponent"
16
+ >
17
+ <div
18
+ class="tab alpha alpha_border alpha_padding flex cover coldir"
19
+ data-id="containerComponent"
20
+ data-selector-id="container"
21
+ data-test-id="containerComponent"
22
+ >
23
+ <div
24
+ class="grow basis shrinkOff"
25
+ data-id="boxComponent"
26
+ data-selector-id="box"
27
+ data-test-id="boxComponent"
28
+ >
29
+ <div
30
+ class="flex cover coldir"
31
+ data-id="containerComponent"
32
+ data-selector-id="container"
33
+ data-test-id="containerComponent"
34
+ >
35
+ <div
36
+ class="menu shrinkOff"
37
+ data-id="boxComponent"
38
+ data-selector-id="tabs_moreIcon"
39
+ data-test-id="boxComponent"
40
+ >
41
+ <button
42
+ aria-label="MoreTabs"
43
+ class="buttonReset flex cover coldir both"
44
+ data-id="moreTabs"
45
+ data-selector-id="container"
46
+ data-test-id="moreTabs"
47
+ role="link"
48
+ >
49
+ <i
50
+ aria-hidden="true"
51
+ class="zd_font_icons basic icon-menu rtl "
52
+ data-id="fontIcon"
53
+ data-selector-id="fontIcon"
54
+ data-test-id="fontIcon"
55
+ style="--zd-iconfont-size: var(--zd_font_size7);"
56
+ />
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ <div
64
+ class="grow basis shrinkOff"
65
+ data-id="boxComponent"
66
+ data-selector-id="tabContentWrapper"
67
+ data-test-id="boxComponent"
68
+ >
69
+ <div
70
+ aria-labelledby="page1"
71
+ class="container flex cover coldir"
72
+ data-id="tabContent_TabContent"
73
+ data-scroll="true"
74
+ data-selector-id="tabContent"
75
+ data-test-id="tabContent_TabContent"
76
+ role="tabpanel"
77
+ tabindex="-1"
78
+ >
79
+ <div>
80
+ Page 1 Content
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </DocumentFragment>
86
+ `;
87
+
88
+ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
89
+ <DocumentFragment>
90
+ <div
91
+ class="flex cover rowReverse"
92
+ data-id="containerComponent"
93
+ data-selector-id="tabWrapper"
94
+ data-test-id="containerComponent"
95
+ >
96
+ <div
97
+ class="shrinkOff"
98
+ data-id="boxComponent"
99
+ data-selector-id="tabs"
100
+ data-test-id="boxComponent"
101
+ >
102
+ <div
103
+ class="tab alpha alpha_border alpha_padding flex cover coldir"
104
+ data-id="containerComponent"
105
+ data-selector-id="container"
106
+ data-test-id="containerComponent"
107
+ >
108
+ <div
109
+ class="grow basis shrinkOff"
110
+ data-id="boxComponent"
111
+ data-selector-id="box"
112
+ data-test-id="boxComponent"
113
+ >
114
+ <div
115
+ class="flex cover coldir"
116
+ data-id="containerComponent"
117
+ data-selector-id="container"
118
+ data-test-id="containerComponent"
119
+ >
120
+ <div
121
+ class="menu shrinkOff"
122
+ data-id="boxComponent"
123
+ data-selector-id="tabs_moreIcon"
124
+ data-test-id="boxComponent"
125
+ >
126
+ <button
127
+ aria-label="MoreTabs"
128
+ class="buttonReset flex cover coldir both"
129
+ data-id="moreTabs"
130
+ data-selector-id="container"
131
+ data-test-id="moreTabs"
132
+ role="link"
133
+ >
134
+ <i
135
+ aria-hidden="true"
136
+ class="zd_font_icons basic icon-menu rtl "
137
+ data-id="fontIcon"
138
+ data-selector-id="fontIcon"
139
+ data-test-id="fontIcon"
140
+ style="--zd-iconfont-size: var(--zd_font_size7);"
141
+ />
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div
149
+ class="grow basis shrinkOff"
150
+ data-id="boxComponent"
151
+ data-selector-id="tabContentWrapper"
152
+ data-test-id="boxComponent"
153
+ >
154
+ <div
155
+ aria-labelledby="page1"
156
+ class="container flex cover coldir"
157
+ data-id="tabContent_TabContent"
158
+ data-scroll="true"
159
+ data-selector-id="tabContent"
160
+ data-test-id="tabContent_TabContent"
161
+ role="tabpanel"
162
+ tabindex="-1"
163
+ >
164
+ <div>
165
+ Page 1 Content
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </DocumentFragment>
171
+ `;
172
+
173
+ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
174
+ <DocumentFragment>
175
+ <div
176
+ class="flex cover coldir"
177
+ data-id="containerComponent"
178
+ data-selector-id="tabWrapper"
179
+ data-test-id="containerComponent"
180
+ >
181
+ <div
182
+ class="shrinkOff"
183
+ data-id="boxComponent"
184
+ data-selector-id="tabs"
185
+ data-test-id="boxComponent"
186
+ >
187
+ <div
188
+ class="tab alpha alpha_border alpha_padding flex cover rowdir"
189
+ data-id="containerComponent"
190
+ data-selector-id="container"
191
+ data-test-id="containerComponent"
192
+ >
193
+ <div
194
+ class="grow basis shrinkOff"
195
+ data-id="boxComponent"
196
+ data-selector-id="box"
197
+ data-test-id="boxComponent"
198
+ >
199
+ <div
200
+ class="flex cover rowdir"
201
+ data-id="containerComponent"
202
+ data-selector-id="container"
203
+ data-test-id="containerComponent"
204
+ >
205
+ <div
206
+ class="menu shrinkOff"
207
+ data-id="boxComponent"
208
+ data-selector-id="tabs_moreIcon"
209
+ data-test-id="boxComponent"
210
+ >
211
+ <button
212
+ aria-label="MoreTabs"
213
+ class="buttonReset flex cover coldir both"
214
+ data-id="moreTabs"
215
+ data-selector-id="container"
216
+ data-test-id="moreTabs"
217
+ role="link"
218
+ >
219
+ <i
220
+ aria-hidden="true"
221
+ class="zd_font_icons basic icon-menu rtl "
222
+ data-id="fontIcon"
223
+ data-selector-id="fontIcon"
224
+ data-test-id="fontIcon"
225
+ style="--zd-iconfont-size: var(--zd_font_size7);"
226
+ />
227
+ </button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ <div
234
+ class="grow basis shrinkOff"
235
+ data-id="boxComponent"
236
+ data-selector-id="tabContentWrapper"
237
+ data-test-id="boxComponent"
238
+ >
239
+ <div
240
+ aria-labelledby="page1"
241
+ class="container flex cover coldir"
242
+ data-id="tabContent_TabContent"
243
+ data-scroll="true"
244
+ data-selector-id="tabContent"
245
+ data-test-id="tabContent_TabContent"
246
+ role="tabpanel"
247
+ tabindex="-1"
248
+ >
249
+ <div>
250
+ Page 1 Content
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </DocumentFragment>
256
+ `;
257
+
258
+ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
259
+ <DocumentFragment>
260
+ <div
261
+ class="flex cover colReverse"
262
+ data-id="containerComponent"
263
+ data-selector-id="tabWrapper"
264
+ data-test-id="containerComponent"
265
+ >
266
+ <div
267
+ class="shrinkOff"
268
+ data-id="boxComponent"
269
+ data-selector-id="tabs"
270
+ data-test-id="boxComponent"
271
+ >
272
+ <div
273
+ class="tab alpha alpha_border alpha_padding flex cover rowdir"
274
+ data-id="containerComponent"
275
+ data-selector-id="container"
276
+ data-test-id="containerComponent"
277
+ >
278
+ <div
279
+ class="grow basis shrinkOff"
280
+ data-id="boxComponent"
281
+ data-selector-id="box"
282
+ data-test-id="boxComponent"
283
+ >
284
+ <div
285
+ class="flex cover rowdir"
286
+ data-id="containerComponent"
287
+ data-selector-id="container"
288
+ data-test-id="containerComponent"
289
+ >
290
+ <div
291
+ class="menu shrinkOff"
292
+ data-id="boxComponent"
293
+ data-selector-id="tabs_moreIcon"
294
+ data-test-id="boxComponent"
295
+ >
296
+ <button
297
+ aria-label="MoreTabs"
298
+ class="buttonReset flex cover coldir both"
299
+ data-id="moreTabs"
300
+ data-selector-id="container"
301
+ data-test-id="moreTabs"
302
+ role="link"
303
+ >
304
+ <i
305
+ aria-hidden="true"
306
+ class="zd_font_icons basic icon-menu rtl "
307
+ data-id="fontIcon"
308
+ data-selector-id="fontIcon"
309
+ data-test-id="fontIcon"
310
+ style="--zd-iconfont-size: var(--zd_font_size7);"
311
+ />
312
+ </button>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ <div
319
+ class="grow basis shrinkOff"
320
+ data-id="boxComponent"
321
+ data-selector-id="tabContentWrapper"
322
+ data-test-id="boxComponent"
323
+ >
324
+ <div
325
+ aria-labelledby="page1"
326
+ class="container flex cover coldir"
327
+ data-id="tabContent_TabContent"
328
+ data-scroll="true"
329
+ data-selector-id="tabContent"
330
+ data-test-id="tabContent_TabContent"
331
+ role="tabpanel"
332
+ tabindex="-1"
333
+ >
334
+ <div>
335
+ Page 1 Content
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </DocumentFragment>
341
+ `;
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
11
11
 
12
12
  var Tab_propTypes = {
13
13
  activeClass: _propTypes["default"].string,
14
- align: _propTypes["default"].string,
14
+ align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
15
15
  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
16
16
  className: _propTypes["default"].string,
17
17
  dataId: _propTypes["default"].string,
@@ -115,7 +115,7 @@ var Tabs_propTypes = {
115
115
  };
116
116
  exports.Tabs_propTypes = Tabs_propTypes;
117
117
  var TabWrapper_propTypes = {
118
- align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
118
+ align: _propTypes["default"].oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
119
119
  children: _propTypes["default"].node,
120
120
  dataId: _propTypes["default"].string,
121
121
  defaultTab: _propTypes["default"].string,
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
7
+ var TAB_ALIGN_MAPPING = {
8
+ vertical: 'column',
9
+ horizontal: 'row',
10
+ 'vertical-reverse': 'column-reverse',
11
+ 'horizontal-reverse': 'row-reverse'
12
+ };
13
+ exports.TAB_ALIGN_MAPPING = TAB_ALIGN_MAPPING;
14
+ var TAB_DIRECTION_MAPPING = {
15
+ vertical: 'column',
16
+ horizontal: 'row',
17
+ 'vertical-reverse': 'column',
18
+ 'horizontal-reverse': 'row'
19
+ };
20
+ exports.TAB_DIRECTION_MAPPING = TAB_DIRECTION_MAPPING;
21
+ var TAB_POPUP_POSITION_MAPPING = {
22
+ vertical: 'bottomLeft',
23
+ horizontal: 'rightTop',
24
+ 'vertical-reverse': 'topLeft',
25
+ 'horizontal-reverse': 'leftTop'
26
+ };
27
+ exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;
@@ -2,12 +2,20 @@
2
2
 
3
3
  var _react = _interopRequireDefault(require("react"));
4
4
 
5
- var _Tag = _interopRequireDefault(require("../Tag"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
6
 
7
+ var _IdProvider = require("../../Provider/IdProvider");
8
+
9
+ var _Tag = _interopRequireDefault(require("../Tag"));
10
+
9
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
12
 
13
+ beforeEach(function () {
14
+ (0, _IdProvider.setGlobalId)(0);
15
+ });
16
+ afterEach(function () {
17
+ (0, _react2.cleanup)();
18
+ });
11
19
  describe('Tag component', function () {
12
20
  var size = ['small', 'medium'];
13
21
  var palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];
@@ -61,7 +61,7 @@ exports.parseDecimal = parseDecimal;
61
61
 
62
62
  var getTotalDimension = function getTotalDimension(elem, align) {
63
63
  var style = window.getComputedStyle(elem);
64
- return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
64
+ return align === 'vertical-reverse' || align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
65
65
  };
66
66
 
67
67
  exports.getTotalDimension = getTotalDimension;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.3.2",
3
+ "version": "1.3.3",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -1,4 +1,4 @@
1
- exports.config= {
1
+ exports.config = {
2
2
  "preprocess": {
3
3
  "runner": "./preprocess/index.js"
4
4
  },
@@ -14,7 +14,7 @@ exports.config= {
14
14
  "**/es/**",
15
15
  "!**/node_modules/**"
16
16
  ],
17
- "hasRTL":[
17
+ "hasRTL": [
18
18
  "**/src/**",
19
19
  "!**/node_modules/**"
20
20
  ]