@zohodesk/components 1.2.63 → 1.3.0

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 (66) hide show
  1. package/.cli/config/variables/variableMapping.json +7 -0
  2. package/.cli/propValidation_report.html +1 -1
  3. package/README.md +8 -0
  4. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +1 -0
  5. package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -0
  6. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +1 -0
  7. package/es/ListItem/ListContainer.js +3 -2
  8. package/es/ListItem/ListItem.module.css +52 -6
  9. package/es/ListItem/ListItemWithAvatar.js +17 -6
  10. package/es/ListItem/ListItemWithCheckBox.js +18 -6
  11. package/es/ListItem/ListItemWithIcon.js +20 -7
  12. package/es/ListItem/ListItemWithRadio.js +19 -6
  13. package/es/ListItem/__tests__/ListContainer.spec.js +8 -0
  14. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
  15. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
  16. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
  17. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
  18. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
  19. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
  20. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
  21. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
  22. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
  23. package/es/ListItem/props/defaultProps.js +13 -5
  24. package/es/ListItem/props/propTypes.js +13 -1
  25. package/es/MultiSelect/AdvancedMultiSelect.js +10 -4
  26. package/es/MultiSelect/MultiSelect.js +8 -4
  27. package/es/MultiSelect/MultiSelect.module.css +9 -1
  28. package/es/MultiSelect/MultiSelectWithAvatar.js +6 -2
  29. package/es/MultiSelect/Suggestions.js +5 -2
  30. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
  31. package/es/MultiSelect/props/propTypes.js +3 -0
  32. package/es/Radio/props/propTypes.js +1 -1
  33. package/es/common/common.module.css +10 -0
  34. package/es/utils/dropDownUtils.js +33 -8
  35. package/es/v1/Radio/props/propTypes.js +1 -1
  36. package/lib/ListItem/ListContainer.js +3 -2
  37. package/lib/ListItem/ListItem.module.css +52 -6
  38. package/lib/ListItem/ListItemWithAvatar.js +16 -5
  39. package/lib/ListItem/ListItemWithCheckBox.js +17 -5
  40. package/lib/ListItem/ListItemWithIcon.js +19 -6
  41. package/lib/ListItem/ListItemWithRadio.js +18 -5
  42. package/lib/ListItem/__tests__/ListContainer.spec.js +8 -0
  43. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
  44. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
  45. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
  46. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
  47. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
  48. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
  49. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
  50. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
  51. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
  52. package/lib/ListItem/props/defaultProps.js +13 -5
  53. package/lib/ListItem/props/propTypes.js +12 -2
  54. package/lib/MultiSelect/AdvancedMultiSelect.js +76 -69
  55. package/lib/MultiSelect/MultiSelect.js +8 -4
  56. package/lib/MultiSelect/MultiSelect.module.css +9 -1
  57. package/lib/MultiSelect/MultiSelectWithAvatar.js +6 -2
  58. package/lib/MultiSelect/Suggestions.js +5 -2
  59. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
  60. package/lib/MultiSelect/props/propTypes.js +4 -1
  61. package/lib/Radio/props/propTypes.js +1 -1
  62. package/lib/common/common.module.css +10 -0
  63. package/lib/utils/dropDownUtils.js +41 -11
  64. package/lib/v1/Radio/props/propTypes.js +1 -1
  65. package/package.json +6 -6
  66. package/result.json +1 -1
package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap CHANGED
@@ -1,5 +1,189 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align center 1`] = `
4
+ <DocumentFragment>
5
+ <li
6
+ class="list medium default withBorder flex rowdir vCenter"
7
+ data-a11y-inset-focus="true"
8
+ data-id="List_ListItemWithAvatar"
9
+ data-selector-id="listItemWithAvatar"
10
+ data-test-id="List_ListItemWithAvatar"
11
+ role="option"
12
+ tabindex="0"
13
+ >
14
+ <div
15
+ class="grow basis shrinkOn"
16
+ data-id="boxComponent"
17
+ data-selector-id="box"
18
+ data-test-id="boxComponent"
19
+ >
20
+ <div
21
+ class="flex cover coldir"
22
+ data-id="containerComponent"
23
+ data-selector-id="container"
24
+ data-test-id="containerComponent"
25
+ >
26
+ <div
27
+ class="value shrinkOff"
28
+ data-id="boxComponent"
29
+ data-selector-id="box"
30
+ data-test-id="boxComponent"
31
+ >
32
+ List
33
+ </div>
34
+ <div
35
+ class="secondaryField shrinkOff"
36
+ data-id="boxComponent"
37
+ data-selector-id="box"
38
+ data-test-id="boxComponent"
39
+ data-title="secondaryValue"
40
+ >
41
+ secondaryValue
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </li>
46
+ </DocumentFragment>
47
+ `;
48
+
49
+ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align end 1`] = `
50
+ <DocumentFragment>
51
+ <li
52
+ class="list medium default withBorder flex rowdir vCenter"
53
+ data-a11y-inset-focus="true"
54
+ data-id="List_ListItemWithAvatar"
55
+ data-selector-id="listItemWithAvatar"
56
+ data-test-id="List_ListItemWithAvatar"
57
+ role="option"
58
+ tabindex="0"
59
+ >
60
+ <div
61
+ class="grow basis shrinkOn"
62
+ data-id="boxComponent"
63
+ data-selector-id="box"
64
+ data-test-id="boxComponent"
65
+ >
66
+ <div
67
+ class="flex cover coldir"
68
+ data-id="containerComponent"
69
+ data-selector-id="container"
70
+ data-test-id="containerComponent"
71
+ >
72
+ <div
73
+ class="value shrinkOff"
74
+ data-id="boxComponent"
75
+ data-selector-id="box"
76
+ data-test-id="boxComponent"
77
+ >
78
+ List
79
+ </div>
80
+ <div
81
+ class="secondaryField shrinkOff"
82
+ data-id="boxComponent"
83
+ data-selector-id="box"
84
+ data-test-id="boxComponent"
85
+ data-title="secondaryValue"
86
+ >
87
+ secondaryValue
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </li>
92
+ </DocumentFragment>
93
+ `;
94
+
95
+ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
96
+ <DocumentFragment>
97
+ <li
98
+ class="list medium default withBorder flex rowdir vCenter"
99
+ data-a11y-inset-focus="true"
100
+ data-id="List_ListItemWithAvatar"
101
+ data-selector-id="listItemWithAvatar"
102
+ data-test-id="List_ListItemWithAvatar"
103
+ role="option"
104
+ tabindex="0"
105
+ >
106
+ <div
107
+ class="grow basis shrinkOn"
108
+ data-id="boxComponent"
109
+ data-selector-id="box"
110
+ data-test-id="boxComponent"
111
+ >
112
+ <div
113
+ class="flex cover coldir"
114
+ data-id="containerComponent"
115
+ data-selector-id="container"
116
+ data-test-id="containerComponent"
117
+ >
118
+ <div
119
+ class="value shrinkOff"
120
+ data-id="boxComponent"
121
+ data-selector-id="box"
122
+ data-test-id="boxComponent"
123
+ >
124
+ List
125
+ </div>
126
+ <div
127
+ class="secondaryField shrinkOff"
128
+ data-id="boxComponent"
129
+ data-selector-id="box"
130
+ data-test-id="boxComponent"
131
+ data-title="secondaryValue"
132
+ >
133
+ secondaryValue
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </li>
138
+ </DocumentFragment>
139
+ `;
140
+
141
+ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align start 1`] = `
142
+ <DocumentFragment>
143
+ <li
144
+ class="list medium default withBorder flex rowdir vCenter"
145
+ data-a11y-inset-focus="true"
146
+ data-id="List_ListItemWithAvatar"
147
+ data-selector-id="listItemWithAvatar"
148
+ data-test-id="List_ListItemWithAvatar"
149
+ role="option"
150
+ tabindex="0"
151
+ >
152
+ <div
153
+ class="grow basis shrinkOn"
154
+ data-id="boxComponent"
155
+ data-selector-id="box"
156
+ data-test-id="boxComponent"
157
+ >
158
+ <div
159
+ class="flex cover coldir"
160
+ data-id="containerComponent"
161
+ data-selector-id="container"
162
+ data-test-id="containerComponent"
163
+ >
164
+ <div
165
+ class="value shrinkOff"
166
+ data-id="boxComponent"
167
+ data-selector-id="box"
168
+ data-test-id="boxComponent"
169
+ >
170
+ List
171
+ </div>
172
+ <div
173
+ class="secondaryField shrinkOff"
174
+ data-id="boxComponent"
175
+ data-selector-id="box"
176
+ data-test-id="boxComponent"
177
+ data-title="secondaryValue"
178
+ >
179
+ secondaryValue
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </li>
184
+ </DocumentFragment>
185
+ `;
186
+
3
187
  exports[`ListItemWithAvatar rendering the defult props 1`] = `
4
188
  <DocumentFragment>
5
189
  <li
@@ -12,12 +196,26 @@ exports[`ListItemWithAvatar rendering the defult props 1`] = `
12
196
  tabindex="0"
13
197
  >
14
198
  <div
15
- class="value grow basis shrinkOn"
199
+ class="grow basis shrinkOn"
16
200
  data-id="boxComponent"
17
201
  data-selector-id="box"
18
202
  data-test-id="boxComponent"
19
203
  >
20
- List
204
+ <div
205
+ class="flex cover coldir"
206
+ data-id="containerComponent"
207
+ data-selector-id="container"
208
+ data-test-id="containerComponent"
209
+ >
210
+ <div
211
+ class="value shrinkOff"
212
+ data-id="boxComponent"
213
+ data-selector-id="box"
214
+ data-test-id="boxComponent"
215
+ >
216
+ List
217
+ </div>
218
+ </div>
21
219
  </div>
22
220
  </li>
23
221
  </DocumentFragment>