@zohodesk/components 1.4.21 → 1.4.23
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.
- package/README.md +34 -0
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +15 -0
- package/assets/Appearance/light/mode/Component_LightMode.module.css +15 -0
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +15 -0
- package/es/ColorSelect/ColorMultiSelect.js +38 -0
- package/es/ColorSelect/ColorSelect.module.css +3 -0
- package/es/ColorSelect/ColorSingleSelect.js +83 -0
- package/es/ColorSelect/__tests__/ColorMultiSelect.spec.js +71 -0
- package/es/ColorSelect/__tests__/ColorSingleSelect.spec.js +80 -0
- package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +536 -0
- package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +422 -0
- package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +33 -0
- package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +19 -0
- package/es/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js +79 -0
- package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +106 -0
- package/es/ColorSelect/_shared/ColorIndicator/props/defaultProps.js +8 -0
- package/es/ColorSelect/_shared/ColorIndicator/props/propTypes.js +10 -0
- package/es/ColorSelect/_shared/ColoredTag/ColoredTag.js +33 -0
- package/es/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js +50 -0
- package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +101 -0
- package/es/ColorSelect/_shared/ColoredTag/props/propTypes.js +10 -0
- package/es/ColorSelect/_shared/helpers/renderHelpers.js +43 -0
- package/es/ColorSelect/props/defaultProps.js +12 -0
- package/es/ColorSelect/props/propTypes.js +17 -0
- package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -18
- package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -6
- package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -18
- package/es/ListItem/ListItem.js +6 -1
- package/es/ListItem/ListItem.module.css +6 -0
- package/es/ListItem/__tests__/ListItem.spec.js +8 -0
- package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +47 -0
- package/es/ListItem/props/propTypes.js +1 -0
- package/es/MultiSelect/MultiSelect.js +11 -5
- package/es/MultiSelect/SelectedOptions.js +24 -1
- package/es/MultiSelect/Suggestions.js +4 -1
- package/es/MultiSelect/__tests__/MultiSelect.spec.js +38 -0
- package/es/MultiSelect/__tests__/SelectedOptions.spec.js +13 -0
- package/es/MultiSelect/__tests__/Suggestions.spec.js +12 -0
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -3
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -9
- package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +91 -12
- package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -3
- package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +15 -0
- package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +66 -0
- package/es/MultiSelect/props/propTypes.js +6 -0
- package/es/Select/Select.js +67 -5
- package/es/Select/__tests__/Select.spec.js +10 -0
- package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -6
- package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +111 -441
- package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -6
- package/es/Select/props/defaultProps.js +2 -1
- package/es/Select/props/propTypes.js +3 -1
- package/es/TextBox/__tests__/TextBox.spec.js +1 -1
- package/es/TextBoxIcon/TextBoxIcon.js +17 -12
- package/es/TextBoxIcon/TextBoxIcon.module.css +3 -38
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +9 -2
- package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +78 -224
- package/es/TextBoxIcon/props/propTypes.js +1 -2
- package/es/Typography/Typography.js +9 -2
- package/es/Typography/__tests__/Typography.spec.js +427 -0
- package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +506 -0
- package/es/Typography/props/defaultProps.js +2 -1
- package/es/Typography/props/propTypes.js +24 -5
- package/es/Typography/utils/textHighlighter.js +139 -0
- package/es/shared/ArrowIcon/ArrowIcon.js +51 -0
- package/es/shared/ArrowIcon/ArrowIcon.module.css +43 -0
- package/es/shared/ArrowIcon/__tests__/ArrowIcon.spec.js +100 -0
- package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +221 -0
- package/es/shared/ArrowIcon/props/defaultProps.js +11 -0
- package/es/shared/ArrowIcon/props/propTypes.js +17 -0
- package/es/shared/InputFieldLine/InputFieldLine.js +45 -0
- package/es/shared/InputFieldLine/InputFieldLine.module.css +88 -0
- package/es/shared/InputFieldLine/__tests__/InputFieldLine.spec.js +114 -0
- package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +194 -0
- package/es/shared/InputFieldLine/props/defaultProps.js +16 -0
- package/es/shared/InputFieldLine/props/propTypes.js +22 -0
- package/es/utils/Common.js +3 -2
- package/es/utils/dropDownUtils.js +7 -1
- package/lib/ColorSelect/ColorMultiSelect.js +71 -0
- package/lib/ColorSelect/ColorSelect.module.css +3 -0
- package/lib/ColorSelect/ColorSingleSelect.js +111 -0
- package/lib/ColorSelect/__tests__/ColorMultiSelect.spec.js +82 -0
- package/lib/ColorSelect/__tests__/ColorSingleSelect.spec.js +91 -0
- package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +536 -0
- package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +422 -0
- package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +47 -0
- package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +19 -0
- package/lib/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js +86 -0
- package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +106 -0
- package/lib/ColorSelect/_shared/ColorIndicator/props/defaultProps.js +15 -0
- package/lib/ColorSelect/_shared/ColorIndicator/props/propTypes.js +21 -0
- package/lib/ColorSelect/_shared/ColoredTag/ColoredTag.js +69 -0
- package/lib/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js +58 -0
- package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +101 -0
- package/lib/ColorSelect/_shared/ColoredTag/props/propTypes.js +29 -0
- package/lib/ColorSelect/_shared/helpers/renderHelpers.js +63 -0
- package/lib/ColorSelect/props/defaultProps.js +32 -0
- package/lib/ColorSelect/props/propTypes.js +39 -0
- package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -18
- package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -6
- package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -18
- package/lib/ListItem/ListItem.js +6 -1
- package/lib/ListItem/ListItem.module.css +6 -0
- package/lib/ListItem/__tests__/ListItem.spec.js +12 -4
- package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +47 -0
- package/lib/ListItem/props/propTypes.js +1 -0
- package/lib/MultiSelect/MultiSelect.js +11 -5
- package/lib/MultiSelect/SelectedOptions.js +24 -1
- package/lib/MultiSelect/Suggestions.js +5 -1
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +42 -2
- package/lib/MultiSelect/__tests__/SelectedOptions.spec.js +15 -0
- package/lib/MultiSelect/__tests__/Suggestions.spec.js +16 -2
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -3
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -9
- package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +91 -12
- package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -3
- package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +15 -0
- package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +66 -0
- package/lib/MultiSelect/props/propTypes.js +6 -0
- package/lib/Select/Select.js +67 -4
- package/lib/Select/__tests__/Select.spec.js +12 -0
- package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -6
- package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +111 -441
- package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -6
- package/lib/Select/props/defaultProps.js +2 -1
- package/lib/Select/props/propTypes.js +3 -1
- package/lib/TextBox/__tests__/TextBox.spec.js +36 -36
- package/lib/TextBoxIcon/TextBoxIcon.js +18 -13
- package/lib/TextBoxIcon/TextBoxIcon.module.css +3 -38
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +9 -2
- package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +78 -224
- package/lib/TextBoxIcon/props/propTypes.js +1 -2
- package/lib/Typography/Typography.js +9 -2
- package/lib/Typography/__tests__/Typography.spec.js +436 -0
- package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +506 -0
- package/lib/Typography/props/defaultProps.js +2 -1
- package/lib/Typography/props/propTypes.js +31 -6
- package/lib/Typography/utils/textHighlighter.js +160 -0
- package/lib/shared/ArrowIcon/ArrowIcon.js +65 -0
- package/lib/shared/ArrowIcon/ArrowIcon.module.css +43 -0
- package/lib/shared/ArrowIcon/__tests__/ArrowIcon.spec.js +107 -0
- package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +221 -0
- package/lib/shared/ArrowIcon/props/defaultProps.js +18 -0
- package/lib/shared/ArrowIcon/props/propTypes.js +28 -0
- package/lib/shared/InputFieldLine/InputFieldLine.js +57 -0
- package/lib/shared/InputFieldLine/InputFieldLine.module.css +88 -0
- package/lib/shared/InputFieldLine/__tests__/InputFieldLine.spec.js +122 -0
- package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +194 -0
- package/lib/shared/InputFieldLine/props/defaultProps.js +23 -0
- package/lib/shared/InputFieldLine/props/propTypes.js +39 -0
- package/lib/utils/Common.js +8 -4
- package/lib/utils/dropDownUtils.js +10 -1
- package/package.json +9 -7
|
@@ -0,0 +1,536 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`ColorMultiSelect Should render the default selected value 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
class="wrapper effect"
|
|
7
|
+
data-id="multiSelect"
|
|
8
|
+
data-selector-id="multiSelect"
|
|
9
|
+
data-test-id="multiSelect"
|
|
10
|
+
>
|
|
11
|
+
<div
|
|
12
|
+
class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
|
|
13
|
+
data-id="containerComponent"
|
|
14
|
+
data-selector-id="container"
|
|
15
|
+
data-test-id="containerComponent"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
19
|
+
data-id="boxComponent"
|
|
20
|
+
data-selector-id="box"
|
|
21
|
+
data-test-id="boxComponent"
|
|
22
|
+
>
|
|
23
|
+
<span
|
|
24
|
+
class=" custmSpan custmSpanMedium
|
|
25
|
+
"
|
|
26
|
+
/>
|
|
27
|
+
<div
|
|
28
|
+
class="varClass customContainer effect container custmInputWrapper flex rowdir"
|
|
29
|
+
data-selector-id="textBoxIcon"
|
|
30
|
+
>
|
|
31
|
+
<div
|
|
32
|
+
class="grow basis shrinkOff"
|
|
33
|
+
data-id="boxComponent"
|
|
34
|
+
data-selector-id="box"
|
|
35
|
+
data-test-id="boxComponent"
|
|
36
|
+
>
|
|
37
|
+
<input
|
|
38
|
+
aria-expanded="false"
|
|
39
|
+
aria-haspopup="true"
|
|
40
|
+
aria-required="true"
|
|
41
|
+
autocomplete="off"
|
|
42
|
+
class=" container medium default effect borderColor_default "
|
|
43
|
+
data-id="multiSelect_textBox"
|
|
44
|
+
data-selector-id="textBoxIcon"
|
|
45
|
+
data-test-id="multiSelect_textBox"
|
|
46
|
+
maxlength="250"
|
|
47
|
+
role="combobox"
|
|
48
|
+
type="text"
|
|
49
|
+
value=""
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
<div
|
|
53
|
+
class="iconContainer shrinkOff"
|
|
54
|
+
data-id="boxComponent"
|
|
55
|
+
data-selector-id="box"
|
|
56
|
+
data-test-id="boxComponent"
|
|
57
|
+
>
|
|
58
|
+
<div
|
|
59
|
+
class="flex cover rowdir"
|
|
60
|
+
data-id="containerComponent"
|
|
61
|
+
data-selector-id="container"
|
|
62
|
+
data-test-id="containerComponent"
|
|
63
|
+
>
|
|
64
|
+
<div
|
|
65
|
+
class="icon shrinkOff"
|
|
66
|
+
data-id="boxComponent"
|
|
67
|
+
data-selector-id="box"
|
|
68
|
+
data-test-id="boxComponent"
|
|
69
|
+
>
|
|
70
|
+
<div
|
|
71
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
72
|
+
data-id="containerComponent"
|
|
73
|
+
data-selector-id="container"
|
|
74
|
+
data-test-id="containerComponent"
|
|
75
|
+
/>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</DocumentFragment>
|
|
84
|
+
`;
|
|
85
|
+
|
|
86
|
+
exports[`ColorMultiSelect Should render the selected value 1`] = `
|
|
87
|
+
<DocumentFragment>
|
|
88
|
+
<div
|
|
89
|
+
class="wrapper effect"
|
|
90
|
+
data-id="multiSelect"
|
|
91
|
+
data-selector-id="multiSelect"
|
|
92
|
+
data-test-id="multiSelect"
|
|
93
|
+
>
|
|
94
|
+
<div
|
|
95
|
+
class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
|
|
96
|
+
data-id="containerComponent"
|
|
97
|
+
data-selector-id="container"
|
|
98
|
+
data-test-id="containerComponent"
|
|
99
|
+
>
|
|
100
|
+
<div
|
|
101
|
+
class="tag medium shrinkOff"
|
|
102
|
+
data-id="multiSelect_selectedOptions"
|
|
103
|
+
data-selector-id="box"
|
|
104
|
+
data-test-id="multiSelect_selectedOptions"
|
|
105
|
+
>
|
|
106
|
+
<div
|
|
107
|
+
aria-labelledby="7"
|
|
108
|
+
class="container effect medium lgRadius danger pointer "
|
|
109
|
+
data-id="tag_Tag"
|
|
110
|
+
data-selector-id="tag"
|
|
111
|
+
data-test-id="tag_Tag"
|
|
112
|
+
data-title="Red"
|
|
113
|
+
style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
|
|
114
|
+
tabindex="0"
|
|
115
|
+
>
|
|
116
|
+
<div
|
|
117
|
+
aria-hidden="true"
|
|
118
|
+
class="text mediumtext"
|
|
119
|
+
id="7"
|
|
120
|
+
>
|
|
121
|
+
Red
|
|
122
|
+
</div>
|
|
123
|
+
<button
|
|
124
|
+
aria-label="Delete"
|
|
125
|
+
class="buttonReset close
|
|
126
|
+
lgRadiusClose
|
|
127
|
+
closedanger"
|
|
128
|
+
data-id="tag_RemoveTag"
|
|
129
|
+
data-test-id="tag_RemoveTag"
|
|
130
|
+
type="button"
|
|
131
|
+
value="text"
|
|
132
|
+
>
|
|
133
|
+
<div
|
|
134
|
+
class="flex cover coldir both"
|
|
135
|
+
data-id="containerComponent"
|
|
136
|
+
data-selector-id="container"
|
|
137
|
+
data-test-id="containerComponent"
|
|
138
|
+
>
|
|
139
|
+
<i
|
|
140
|
+
aria-hidden="true"
|
|
141
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
142
|
+
data-id="fontIcon"
|
|
143
|
+
data-selector-id="fontIcon"
|
|
144
|
+
data-test-id="fontIcon"
|
|
145
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
146
|
+
/>
|
|
147
|
+
</div>
|
|
148
|
+
</button>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div
|
|
152
|
+
class="tag medium shrinkOff"
|
|
153
|
+
data-id="multiSelect_selectedOptions"
|
|
154
|
+
data-selector-id="box"
|
|
155
|
+
data-test-id="multiSelect_selectedOptions"
|
|
156
|
+
>
|
|
157
|
+
<div
|
|
158
|
+
aria-labelledby="8"
|
|
159
|
+
class="container effect medium lgRadius danger pointer "
|
|
160
|
+
data-id="tag_Tag"
|
|
161
|
+
data-selector-id="tag"
|
|
162
|
+
data-test-id="tag_Tag"
|
|
163
|
+
data-title="Green"
|
|
164
|
+
style="--tag_bg_color: #77d779; --tag_text_color: black; --tag_border_color: black;"
|
|
165
|
+
tabindex="0"
|
|
166
|
+
>
|
|
167
|
+
<div
|
|
168
|
+
aria-hidden="true"
|
|
169
|
+
class="text mediumtext"
|
|
170
|
+
id="8"
|
|
171
|
+
>
|
|
172
|
+
Green
|
|
173
|
+
</div>
|
|
174
|
+
<button
|
|
175
|
+
aria-label="Delete"
|
|
176
|
+
class="buttonReset close
|
|
177
|
+
lgRadiusClose
|
|
178
|
+
closedanger"
|
|
179
|
+
data-id="tag_RemoveTag"
|
|
180
|
+
data-test-id="tag_RemoveTag"
|
|
181
|
+
type="button"
|
|
182
|
+
value="text"
|
|
183
|
+
>
|
|
184
|
+
<div
|
|
185
|
+
class="flex cover coldir both"
|
|
186
|
+
data-id="containerComponent"
|
|
187
|
+
data-selector-id="container"
|
|
188
|
+
data-test-id="containerComponent"
|
|
189
|
+
>
|
|
190
|
+
<i
|
|
191
|
+
aria-hidden="true"
|
|
192
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
193
|
+
data-id="fontIcon"
|
|
194
|
+
data-selector-id="fontIcon"
|
|
195
|
+
data-test-id="fontIcon"
|
|
196
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
197
|
+
/>
|
|
198
|
+
</div>
|
|
199
|
+
</button>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
<div
|
|
203
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
204
|
+
data-id="boxComponent"
|
|
205
|
+
data-selector-id="box"
|
|
206
|
+
data-test-id="boxComponent"
|
|
207
|
+
>
|
|
208
|
+
<span
|
|
209
|
+
class=" custmSpan custmSpanMedium clearIconSpace
|
|
210
|
+
"
|
|
211
|
+
/>
|
|
212
|
+
<div
|
|
213
|
+
class="varClass customContainer effect container custmInputWrapper flex rowdir"
|
|
214
|
+
data-selector-id="textBoxIcon"
|
|
215
|
+
>
|
|
216
|
+
<div
|
|
217
|
+
class="grow basis shrinkOff"
|
|
218
|
+
data-id="boxComponent"
|
|
219
|
+
data-selector-id="box"
|
|
220
|
+
data-test-id="boxComponent"
|
|
221
|
+
>
|
|
222
|
+
<input
|
|
223
|
+
aria-expanded="false"
|
|
224
|
+
aria-haspopup="true"
|
|
225
|
+
aria-required="true"
|
|
226
|
+
autocomplete="off"
|
|
227
|
+
class=" container medium default effect borderColor_default "
|
|
228
|
+
data-id="multiSelect_textBox"
|
|
229
|
+
data-selector-id="textBoxIcon"
|
|
230
|
+
data-test-id="multiSelect_textBox"
|
|
231
|
+
maxlength="250"
|
|
232
|
+
placeholder=""
|
|
233
|
+
role="combobox"
|
|
234
|
+
type="text"
|
|
235
|
+
value=""
|
|
236
|
+
/>
|
|
237
|
+
</div>
|
|
238
|
+
<div
|
|
239
|
+
class="iconContainer shrinkOff"
|
|
240
|
+
data-id="boxComponent"
|
|
241
|
+
data-selector-id="box"
|
|
242
|
+
data-test-id="boxComponent"
|
|
243
|
+
>
|
|
244
|
+
<div
|
|
245
|
+
class="flex cover rowdir"
|
|
246
|
+
data-id="containerComponent"
|
|
247
|
+
data-selector-id="container"
|
|
248
|
+
data-test-id="containerComponent"
|
|
249
|
+
>
|
|
250
|
+
<div
|
|
251
|
+
class="icon shrinkOff"
|
|
252
|
+
data-id="boxComponent"
|
|
253
|
+
data-selector-id="box"
|
|
254
|
+
data-test-id="boxComponent"
|
|
255
|
+
>
|
|
256
|
+
<div
|
|
257
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
258
|
+
data-id="containerComponent"
|
|
259
|
+
data-selector-id="container"
|
|
260
|
+
data-test-id="containerComponent"
|
|
261
|
+
>
|
|
262
|
+
<button
|
|
263
|
+
class="delete defaultDelete shrinkOff"
|
|
264
|
+
data-id="multiSelect_clearIcon"
|
|
265
|
+
data-selector-id="box"
|
|
266
|
+
data-test-id="multiSelect_clearIcon"
|
|
267
|
+
data-title="Clear all"
|
|
268
|
+
>
|
|
269
|
+
<i
|
|
270
|
+
aria-hidden="true"
|
|
271
|
+
class="zd_font_icons basic icon-delete rtl "
|
|
272
|
+
data-id="fontIcon"
|
|
273
|
+
data-selector-id="fontIcon"
|
|
274
|
+
data-test-id="fontIcon"
|
|
275
|
+
style="--zd-iconfont-size: var(--zd_font_size15);"
|
|
276
|
+
/>
|
|
277
|
+
</button>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</DocumentFragment>
|
|
287
|
+
`;
|
|
288
|
+
|
|
289
|
+
exports[`ColorMultiSelect rendering the defult props 1`] = `
|
|
290
|
+
<DocumentFragment>
|
|
291
|
+
<div
|
|
292
|
+
class="wrapper effect"
|
|
293
|
+
data-id="multiSelect"
|
|
294
|
+
data-selector-id="multiSelect"
|
|
295
|
+
data-test-id="multiSelect"
|
|
296
|
+
>
|
|
297
|
+
<div
|
|
298
|
+
class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
|
|
299
|
+
data-id="containerComponent"
|
|
300
|
+
data-selector-id="container"
|
|
301
|
+
data-test-id="containerComponent"
|
|
302
|
+
>
|
|
303
|
+
<div
|
|
304
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
305
|
+
data-id="boxComponent"
|
|
306
|
+
data-selector-id="box"
|
|
307
|
+
data-test-id="boxComponent"
|
|
308
|
+
>
|
|
309
|
+
<span
|
|
310
|
+
class=" custmSpan custmSpanMedium
|
|
311
|
+
"
|
|
312
|
+
/>
|
|
313
|
+
<div
|
|
314
|
+
class="varClass customContainer effect container custmInputWrapper flex rowdir"
|
|
315
|
+
data-selector-id="textBoxIcon"
|
|
316
|
+
>
|
|
317
|
+
<div
|
|
318
|
+
class="grow basis shrinkOff"
|
|
319
|
+
data-id="boxComponent"
|
|
320
|
+
data-selector-id="box"
|
|
321
|
+
data-test-id="boxComponent"
|
|
322
|
+
>
|
|
323
|
+
<input
|
|
324
|
+
aria-expanded="false"
|
|
325
|
+
aria-haspopup="true"
|
|
326
|
+
aria-required="true"
|
|
327
|
+
autocomplete="off"
|
|
328
|
+
class=" container medium default effect borderColor_default "
|
|
329
|
+
data-id="multiSelect_textBox"
|
|
330
|
+
data-selector-id="textBoxIcon"
|
|
331
|
+
data-test-id="multiSelect_textBox"
|
|
332
|
+
maxlength="250"
|
|
333
|
+
role="combobox"
|
|
334
|
+
type="text"
|
|
335
|
+
value=""
|
|
336
|
+
/>
|
|
337
|
+
</div>
|
|
338
|
+
<div
|
|
339
|
+
class="iconContainer shrinkOff"
|
|
340
|
+
data-id="boxComponent"
|
|
341
|
+
data-selector-id="box"
|
|
342
|
+
data-test-id="boxComponent"
|
|
343
|
+
>
|
|
344
|
+
<div
|
|
345
|
+
class="flex cover rowdir"
|
|
346
|
+
data-id="containerComponent"
|
|
347
|
+
data-selector-id="container"
|
|
348
|
+
data-test-id="containerComponent"
|
|
349
|
+
>
|
|
350
|
+
<div
|
|
351
|
+
class="icon shrinkOff"
|
|
352
|
+
data-id="boxComponent"
|
|
353
|
+
data-selector-id="box"
|
|
354
|
+
data-test-id="boxComponent"
|
|
355
|
+
>
|
|
356
|
+
<div
|
|
357
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
358
|
+
data-id="containerComponent"
|
|
359
|
+
data-selector-id="container"
|
|
360
|
+
data-test-id="containerComponent"
|
|
361
|
+
/>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</DocumentFragment>
|
|
370
|
+
`;
|
|
371
|
+
|
|
372
|
+
exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
|
|
373
|
+
<DocumentFragment>
|
|
374
|
+
<div
|
|
375
|
+
class="wrapper effect"
|
|
376
|
+
data-id="multiSelect"
|
|
377
|
+
data-selector-id="multiSelect"
|
|
378
|
+
data-test-id="multiSelect"
|
|
379
|
+
>
|
|
380
|
+
<div
|
|
381
|
+
class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
|
|
382
|
+
data-id="containerComponent"
|
|
383
|
+
data-selector-id="container"
|
|
384
|
+
data-test-id="containerComponent"
|
|
385
|
+
>
|
|
386
|
+
<div
|
|
387
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
388
|
+
data-id="boxComponent"
|
|
389
|
+
data-selector-id="box"
|
|
390
|
+
data-test-id="boxComponent"
|
|
391
|
+
>
|
|
392
|
+
<span
|
|
393
|
+
class=" custmSpan custmSpanMedium
|
|
394
|
+
"
|
|
395
|
+
/>
|
|
396
|
+
<div
|
|
397
|
+
class="varClass customContainer effect container custmInputWrapper flex rowdir"
|
|
398
|
+
data-selector-id="textBoxIcon"
|
|
399
|
+
>
|
|
400
|
+
<div
|
|
401
|
+
class="grow basis shrinkOff"
|
|
402
|
+
data-id="boxComponent"
|
|
403
|
+
data-selector-id="box"
|
|
404
|
+
data-test-id="boxComponent"
|
|
405
|
+
>
|
|
406
|
+
<input
|
|
407
|
+
aria-expanded="false"
|
|
408
|
+
aria-haspopup="true"
|
|
409
|
+
aria-required="true"
|
|
410
|
+
autocomplete="off"
|
|
411
|
+
class=" container medium default effect borderColor_default "
|
|
412
|
+
data-id="multiSelect_textBox"
|
|
413
|
+
data-selector-id="textBoxIcon"
|
|
414
|
+
data-test-id="multiSelect_textBox"
|
|
415
|
+
maxlength="250"
|
|
416
|
+
role="combobox"
|
|
417
|
+
type="text"
|
|
418
|
+
value=""
|
|
419
|
+
/>
|
|
420
|
+
</div>
|
|
421
|
+
<div
|
|
422
|
+
class="iconContainer shrinkOff"
|
|
423
|
+
data-id="boxComponent"
|
|
424
|
+
data-selector-id="box"
|
|
425
|
+
data-test-id="boxComponent"
|
|
426
|
+
>
|
|
427
|
+
<div
|
|
428
|
+
class="flex cover rowdir"
|
|
429
|
+
data-id="containerComponent"
|
|
430
|
+
data-selector-id="container"
|
|
431
|
+
data-test-id="containerComponent"
|
|
432
|
+
>
|
|
433
|
+
<div
|
|
434
|
+
class="icon shrinkOff"
|
|
435
|
+
data-id="boxComponent"
|
|
436
|
+
data-selector-id="box"
|
|
437
|
+
data-test-id="boxComponent"
|
|
438
|
+
>
|
|
439
|
+
<div
|
|
440
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
441
|
+
data-id="containerComponent"
|
|
442
|
+
data-selector-id="container"
|
|
443
|
+
data-test-id="containerComponent"
|
|
444
|
+
/>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</DocumentFragment>
|
|
453
|
+
`;
|
|
454
|
+
|
|
455
|
+
exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
|
|
456
|
+
<DocumentFragment>
|
|
457
|
+
<div
|
|
458
|
+
class="wrapper effect"
|
|
459
|
+
data-id="multiSelect"
|
|
460
|
+
data-selector-id="multiSelect"
|
|
461
|
+
data-test-id="multiSelect"
|
|
462
|
+
>
|
|
463
|
+
<div
|
|
464
|
+
class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
|
|
465
|
+
data-id="containerComponent"
|
|
466
|
+
data-selector-id="container"
|
|
467
|
+
data-test-id="containerComponent"
|
|
468
|
+
>
|
|
469
|
+
<div
|
|
470
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
471
|
+
data-id="boxComponent"
|
|
472
|
+
data-selector-id="box"
|
|
473
|
+
data-test-id="boxComponent"
|
|
474
|
+
>
|
|
475
|
+
<span
|
|
476
|
+
class=" custmSpan custmSpanMedium
|
|
477
|
+
"
|
|
478
|
+
/>
|
|
479
|
+
<div
|
|
480
|
+
class="varClass customContainer effect container custmInputWrapper flex rowdir"
|
|
481
|
+
data-selector-id="textBoxIcon"
|
|
482
|
+
>
|
|
483
|
+
<div
|
|
484
|
+
class="grow basis shrinkOff"
|
|
485
|
+
data-id="boxComponent"
|
|
486
|
+
data-selector-id="box"
|
|
487
|
+
data-test-id="boxComponent"
|
|
488
|
+
>
|
|
489
|
+
<input
|
|
490
|
+
aria-expanded="false"
|
|
491
|
+
aria-haspopup="true"
|
|
492
|
+
aria-required="true"
|
|
493
|
+
autocomplete="off"
|
|
494
|
+
class=" container medium default effect borderColor_default "
|
|
495
|
+
data-id="multiSelect_textBox"
|
|
496
|
+
data-selector-id="textBoxIcon"
|
|
497
|
+
data-test-id="multiSelect_textBox"
|
|
498
|
+
maxlength="250"
|
|
499
|
+
role="combobox"
|
|
500
|
+
type="text"
|
|
501
|
+
value=""
|
|
502
|
+
/>
|
|
503
|
+
</div>
|
|
504
|
+
<div
|
|
505
|
+
class="iconContainer shrinkOff"
|
|
506
|
+
data-id="boxComponent"
|
|
507
|
+
data-selector-id="box"
|
|
508
|
+
data-test-id="boxComponent"
|
|
509
|
+
>
|
|
510
|
+
<div
|
|
511
|
+
class="flex cover rowdir"
|
|
512
|
+
data-id="containerComponent"
|
|
513
|
+
data-selector-id="container"
|
|
514
|
+
data-test-id="containerComponent"
|
|
515
|
+
>
|
|
516
|
+
<div
|
|
517
|
+
class="icon shrinkOff"
|
|
518
|
+
data-id="boxComponent"
|
|
519
|
+
data-selector-id="box"
|
|
520
|
+
data-test-id="boxComponent"
|
|
521
|
+
>
|
|
522
|
+
<div
|
|
523
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
524
|
+
data-id="containerComponent"
|
|
525
|
+
data-selector-id="container"
|
|
526
|
+
data-test-id="containerComponent"
|
|
527
|
+
/>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
535
|
+
</DocumentFragment>
|
|
536
|
+
`;
|