@zohodesk/components 1.4.17 → 1.4.19

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 (100) hide show
  1. package/README.md +34 -0
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +9 -5
  3. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +4 -1
  4. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +4 -1
  5. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +4 -1
  6. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +4 -1
  7. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +4 -1
  8. package/assets/Appearance/light/mode/Component_LightMode.module.css +9 -5
  9. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +4 -1
  10. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +4 -1
  11. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +4 -1
  12. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +4 -1
  13. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +4 -1
  14. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +9 -5
  15. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +4 -1
  16. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +4 -1
  17. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +4 -1
  18. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +4 -1
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +4 -1
  20. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
  21. package/es/Button/css/Button.module.css +60 -6
  22. package/es/Button/css/cssJSLogic.js +2 -2
  23. package/es/Card/__tests__/Card.spec.js +48 -0
  24. package/es/Card/__tests__/CardContent.spec.js +61 -0
  25. package/es/Card/__tests__/CardHeader.spec.js +33 -0
  26. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
  27. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
  28. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
  29. package/es/ListItem/ListItem.js +10 -3
  30. package/es/ListItem/ListItemWithAvatar.js +15 -6
  31. package/es/ListItem/ListItemWithCheckBox.js +13 -6
  32. package/es/ListItem/ListItemWithIcon.js +14 -5
  33. package/es/ListItem/ListItemWithRadio.js +13 -6
  34. package/es/ListItem/__tests__/ListItem.spec.js +19 -0
  35. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +19 -0
  36. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +19 -0
  37. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +17 -0
  38. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +19 -0
  39. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
  40. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
  41. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
  42. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
  44. package/es/ListItem/props/propTypes.js +15 -5
  45. package/es/MultiSelect/MultiSelect.js +8 -1
  46. package/es/MultiSelect/Suggestions.js +2 -1
  47. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  48. package/es/MultiSelect/props/propTypes.js +2 -3
  49. package/es/Select/GroupSelect.js +4 -2
  50. package/es/Select/Select.js +7 -1
  51. package/es/Select/SelectWithAvatar.js +17 -4
  52. package/es/Select/SelectWithIcon.js +15 -5
  53. package/es/Select/props/defaultProps.js +2 -0
  54. package/es/Select/props/propTypes.js +5 -0
  55. package/es/Typography/__tests__/Typography.spec.js +225 -0
  56. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
  57. package/es/utils/dropDownUtils.js +13 -4
  58. package/es/v1/Switch/__tests__/Switch.spec.js +41 -6
  59. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
  60. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
  61. package/lib/Button/css/Button.module.css +60 -6
  62. package/lib/Button/css/cssJSLogic.js +1 -1
  63. package/lib/Card/__tests__/Card.spec.js +54 -6
  64. package/lib/Card/__tests__/CardContent.spec.js +68 -0
  65. package/lib/Card/__tests__/CardHeader.spec.js +40 -0
  66. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
  67. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
  68. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
  69. package/lib/ListItem/ListItem.js +10 -3
  70. package/lib/ListItem/ListItemWithAvatar.js +15 -6
  71. package/lib/ListItem/ListItemWithCheckBox.js +15 -6
  72. package/lib/ListItem/ListItemWithIcon.js +13 -5
  73. package/lib/ListItem/ListItemWithRadio.js +15 -6
  74. package/lib/ListItem/__tests__/ListItem.spec.js +23 -0
  75. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +23 -0
  76. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +23 -0
  77. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +21 -0
  78. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +23 -0
  79. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
  80. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
  81. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
  82. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
  83. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
  84. package/lib/ListItem/props/propTypes.js +15 -6
  85. package/lib/MultiSelect/MultiSelect.js +6 -2
  86. package/lib/MultiSelect/Suggestions.js +2 -1
  87. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  88. package/lib/MultiSelect/props/propTypes.js +3 -4
  89. package/lib/Select/GroupSelect.js +4 -3
  90. package/lib/Select/Select.js +7 -1
  91. package/lib/Select/SelectWithAvatar.js +17 -7
  92. package/lib/Select/SelectWithIcon.js +15 -5
  93. package/lib/Select/props/defaultProps.js +2 -1
  94. package/lib/Select/props/propTypes.js +5 -0
  95. package/lib/Typography/__tests__/Typography.spec.js +232 -0
  96. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
  97. package/lib/utils/dropDownUtils.js +17 -4
  98. package/lib/v1/Switch/__tests__/Switch.spec.js +41 -6
  99. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
  100. package/package.json +3 -3
package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align center 1`] = `
3
+ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode & it's custom class 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
6
  class="list medium default withBorder flex rowdir vCenter"
@@ -12,19 +12,19 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="grow basis shrinkOn"
15
+ class="leftBox grow basis shrinkOff"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="flex cover coldir"
22
- data-id="containerComponent"
23
- data-selector-id="container"
24
- data-test-id="containerComponent"
21
+ class="titleBox shrinkOff"
22
+ data-id="boxComponent"
23
+ data-selector-id="box"
24
+ data-test-id="boxComponent"
25
25
  >
26
26
  <div
27
- class="value shrinkOff"
27
+ class="value basisAuto shrinkOn"
28
28
  data-id="list_Text"
29
29
  data-selector-id="box"
30
30
  data-test-id="list_Text"
@@ -32,13 +32,14 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
32
32
  List
33
33
  </div>
34
34
  <div
35
- class="secondaryField secondaryValue shrinkOff"
35
+ class="customValueRightPlaceholderClass shrinkOff"
36
36
  data-id="boxComponent"
37
37
  data-selector-id="box"
38
38
  data-test-id="boxComponent"
39
- data-title="secondaryValue"
40
39
  >
41
- secondaryValue
40
+ <div>
41
+ Custom Placeholder
42
+ </div>
42
43
  </div>
43
44
  </div>
44
45
  </div>
@@ -46,7 +47,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
46
47
  </DocumentFragment>
47
48
  `;
48
49
 
49
- exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align end 1`] = `
50
+ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode 1`] = `
50
51
  <DocumentFragment>
51
52
  <li
52
53
  class="list medium default withBorder flex rowdir vCenter"
@@ -58,19 +59,19 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
58
59
  tabindex="0"
59
60
  >
60
61
  <div
61
- class="grow basis shrinkOn"
62
+ class="leftBox grow basis shrinkOff"
62
63
  data-id="boxComponent"
63
64
  data-selector-id="box"
64
65
  data-test-id="boxComponent"
65
66
  >
66
67
  <div
67
- class="flex cover coldir"
68
- data-id="containerComponent"
69
- data-selector-id="container"
70
- data-test-id="containerComponent"
68
+ class="titleBox shrinkOff"
69
+ data-id="boxComponent"
70
+ data-selector-id="box"
71
+ data-test-id="boxComponent"
71
72
  >
72
73
  <div
73
- class="value shrinkOff"
74
+ class="value basisAuto shrinkOn"
74
75
  data-id="list_Text"
75
76
  data-selector-id="box"
76
77
  data-test-id="list_Text"
@@ -78,13 +79,14 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
78
79
  List
79
80
  </div>
80
81
  <div
81
- class="secondaryField secondaryValue shrinkOff"
82
+ class="shrinkOff"
82
83
  data-id="boxComponent"
83
84
  data-selector-id="box"
84
85
  data-test-id="boxComponent"
85
- data-title="secondaryValue"
86
86
  >
87
- secondaryValue
87
+ <div>
88
+ Custom Placeholder
89
+ </div>
88
90
  </div>
89
91
  </div>
90
92
  </div>
@@ -92,7 +94,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
92
94
  </DocumentFragment>
93
95
  `;
94
96
 
95
- exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
97
+ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align center 1`] = `
96
98
  <DocumentFragment>
97
99
  <li
98
100
  class="list medium default withBorder flex rowdir vCenter"
@@ -104,41 +106,87 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
104
106
  tabindex="0"
105
107
  >
106
108
  <div
107
- class="grow basis shrinkOn"
109
+ class="leftBox grow basis shrinkOff"
108
110
  data-id="boxComponent"
109
111
  data-selector-id="box"
110
112
  data-test-id="boxComponent"
111
113
  >
112
114
  <div
113
- class="flex cover coldir"
114
- data-id="containerComponent"
115
- data-selector-id="container"
116
- data-test-id="containerComponent"
115
+ class="titleBox shrinkOff"
116
+ data-id="boxComponent"
117
+ data-selector-id="box"
118
+ data-test-id="boxComponent"
117
119
  >
118
120
  <div
119
- class="value shrinkOff"
121
+ class="value basisAuto shrinkOn"
120
122
  data-id="list_Text"
121
123
  data-selector-id="box"
122
124
  data-test-id="list_Text"
123
125
  >
124
126
  List
125
127
  </div>
128
+ </div>
129
+ <div
130
+ class="secondaryField secondaryValue shrinkOff"
131
+ data-id="boxComponent"
132
+ data-selector-id="box"
133
+ data-test-id="boxComponent"
134
+ data-title="secondaryValue"
135
+ >
136
+ secondaryValue
137
+ </div>
138
+ </div>
139
+ </li>
140
+ </DocumentFragment>
141
+ `;
142
+
143
+ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align end 1`] = `
144
+ <DocumentFragment>
145
+ <li
146
+ class="list medium default withBorder flex rowdir vCenter"
147
+ data-a11y-inset-focus="true"
148
+ data-id="list"
149
+ data-selector-id="listItemWithIcon"
150
+ data-test-id="list"
151
+ role="option"
152
+ tabindex="0"
153
+ >
154
+ <div
155
+ class="leftBox grow basis shrinkOff"
156
+ data-id="boxComponent"
157
+ data-selector-id="box"
158
+ data-test-id="boxComponent"
159
+ >
160
+ <div
161
+ class="titleBox shrinkOff"
162
+ data-id="boxComponent"
163
+ data-selector-id="box"
164
+ data-test-id="boxComponent"
165
+ >
126
166
  <div
127
- class="secondaryField secondaryValue shrinkOff"
128
- data-id="boxComponent"
167
+ class="value basisAuto shrinkOn"
168
+ data-id="list_Text"
129
169
  data-selector-id="box"
130
- data-test-id="boxComponent"
131
- data-title="secondaryValue"
170
+ data-test-id="list_Text"
132
171
  >
133
- secondaryValue
172
+ List
134
173
  </div>
135
174
  </div>
175
+ <div
176
+ class="secondaryField secondaryValue shrinkOff"
177
+ data-id="boxComponent"
178
+ data-selector-id="box"
179
+ data-test-id="boxComponent"
180
+ data-title="secondaryValue"
181
+ >
182
+ secondaryValue
183
+ </div>
136
184
  </div>
137
185
  </li>
138
186
  </DocumentFragment>
139
187
  `;
140
188
 
141
- exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align start 1`] = `
189
+ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
142
190
  <DocumentFragment>
143
191
  <li
144
192
  class="list medium default withBorder flex rowdir vCenter"
@@ -150,35 +198,81 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
150
198
  tabindex="0"
151
199
  >
152
200
  <div
153
- class="grow basis shrinkOn"
201
+ class="leftBox grow basis shrinkOff"
154
202
  data-id="boxComponent"
155
203
  data-selector-id="box"
156
204
  data-test-id="boxComponent"
157
205
  >
158
206
  <div
159
- class="flex cover coldir"
160
- data-id="containerComponent"
161
- data-selector-id="container"
162
- data-test-id="containerComponent"
207
+ class="titleBox shrinkOff"
208
+ data-id="boxComponent"
209
+ data-selector-id="box"
210
+ data-test-id="boxComponent"
163
211
  >
164
212
  <div
165
- class="value shrinkOff"
213
+ class="value basisAuto shrinkOn"
166
214
  data-id="list_Text"
167
215
  data-selector-id="box"
168
216
  data-test-id="list_Text"
169
217
  >
170
218
  List
171
219
  </div>
220
+ </div>
221
+ <div
222
+ class="secondaryField secondaryValue shrinkOff"
223
+ data-id="boxComponent"
224
+ data-selector-id="box"
225
+ data-test-id="boxComponent"
226
+ data-title="secondaryValue"
227
+ >
228
+ secondaryValue
229
+ </div>
230
+ </div>
231
+ </li>
232
+ </DocumentFragment>
233
+ `;
234
+
235
+ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align start 1`] = `
236
+ <DocumentFragment>
237
+ <li
238
+ class="list medium default withBorder flex rowdir vCenter"
239
+ data-a11y-inset-focus="true"
240
+ data-id="list"
241
+ data-selector-id="listItemWithIcon"
242
+ data-test-id="list"
243
+ role="option"
244
+ tabindex="0"
245
+ >
246
+ <div
247
+ class="leftBox grow basis shrinkOff"
248
+ data-id="boxComponent"
249
+ data-selector-id="box"
250
+ data-test-id="boxComponent"
251
+ >
252
+ <div
253
+ class="titleBox shrinkOff"
254
+ data-id="boxComponent"
255
+ data-selector-id="box"
256
+ data-test-id="boxComponent"
257
+ >
172
258
  <div
173
- class="secondaryField secondaryValue shrinkOff"
174
- data-id="boxComponent"
259
+ class="value basisAuto shrinkOn"
260
+ data-id="list_Text"
175
261
  data-selector-id="box"
176
- data-test-id="boxComponent"
177
- data-title="secondaryValue"
262
+ data-test-id="list_Text"
178
263
  >
179
- secondaryValue
264
+ List
180
265
  </div>
181
266
  </div>
267
+ <div
268
+ class="secondaryField secondaryValue shrinkOff"
269
+ data-id="boxComponent"
270
+ data-selector-id="box"
271
+ data-test-id="boxComponent"
272
+ data-title="secondaryValue"
273
+ >
274
+ secondaryValue
275
+ </div>
182
276
  </div>
183
277
  </li>
184
278
  </DocumentFragment>
@@ -196,19 +290,19 @@ exports[`ListItemWithIcon rendering the defult props 1`] = `
196
290
  tabindex="0"
197
291
  >
198
292
  <div
199
- class="grow basis shrinkOn"
293
+ class="leftBox grow basis shrinkOff"
200
294
  data-id="boxComponent"
201
295
  data-selector-id="box"
202
296
  data-test-id="boxComponent"
203
297
  >
204
298
  <div
205
- class="flex cover coldir"
206
- data-id="containerComponent"
207
- data-selector-id="container"
208
- data-test-id="containerComponent"
299
+ class="titleBox shrinkOff"
300
+ data-id="boxComponent"
301
+ data-selector-id="box"
302
+ data-test-id="boxComponent"
209
303
  >
210
304
  <div
211
- class="value shrinkOff"
305
+ class="value basisAuto shrinkOn"
212
306
  data-id="list_Text"
213
307
  data-selector-id="box"
214
308
  data-test-id="list_Text"