@zohodesk/components 1.0.0-temp-259.2 → 1.0.0-temp-260
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 +21 -3
- package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +20 -5
- package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +20 -5
- package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +20 -5
- package/es/AdvancedPopup/AdvancedPopup.js +105 -0
- package/es/v1/Button/Button.js +107 -159
- package/es/v1/Button/README.md +2 -3
- package/es/v1/Button/__tests__/Button.spec.js +6 -14
- package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
- package/es/v1/Button/constants/index.js +20 -26
- package/es/v1/Button/css/Button_v1.module.css +16 -37
- package/es/v1/Button/css/cssJSLogic.js +28 -56
- package/es/v1/Button/props/defaultProps.js +6 -2
- package/es/v1/Button/props/propTypes.js +8 -26
- package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
- package/es/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
- package/es/v1/helpers/colorHelpers/colorHelper.js +139 -117
- package/es/v1/helpers/colorHelpers/constants/index.js +4 -45
- package/es/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
- package/lib/AdvancedPopup/AdvancedPopup.js +122 -0
- package/lib/v1/Button/Button.js +119 -178
- package/lib/v1/Button/README.md +2 -3
- package/lib/v1/Button/__tests__/Button.spec.js +52 -66
- package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
- package/lib/v1/Button/constants/index.js +28 -31
- package/lib/v1/Button/css/Button_v1.module.css +16 -37
- package/lib/v1/Button/css/cssJSLogic.js +19 -42
- package/lib/v1/Button/props/defaultProps.js +5 -1
- package/lib/v1/Button/props/propTypes.js +7 -41
- package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
- package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
- package/lib/v1/helpers/colorHelpers/colorHelper.js +153 -127
- package/lib/v1/helpers/colorHelpers/constants/index.js +4 -45
- package/lib/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
- package/package.json +4 -4
- package/es/v1/Button/constants/presets.js +0 -147
- package/lib/v1/Button/constants/presets.js +0 -165
|
@@ -37,108 +37,94 @@ describe('Button - Component', function () {
|
|
|
37
37
|
|
|
38
38
|
expect(asFragment()).toMatchSnapshot();
|
|
39
39
|
});
|
|
40
|
-
var
|
|
41
|
-
test.each(
|
|
42
|
-
return [combo];
|
|
43
|
-
}))('Should render appearance of buttons - %s', function (appearance) {
|
|
40
|
+
var bgAppearance = ['default', 'onHover', 'none'];
|
|
41
|
+
test.each(bgAppearance)('Should render bgAppearance of buttons - %s', function (bg) {
|
|
44
42
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
45
|
-
|
|
43
|
+
bgAppearance: bg
|
|
46
44
|
})),
|
|
47
45
|
asFragment = _render4.asFragment;
|
|
48
46
|
|
|
49
47
|
expect(asFragment()).toMatchSnapshot();
|
|
50
48
|
});
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}))('Should render hoverAppearance of buttons - %s', function (appearance) {
|
|
49
|
+
var borderAppearance = ['default', 'onHover', 'none'];
|
|
50
|
+
test.each(borderAppearance)('Should render borderAppearance of buttons - %s', function (border) {
|
|
54
51
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
55
|
-
|
|
52
|
+
borderAppearance: border
|
|
56
53
|
})),
|
|
57
54
|
asFragment = _render5.asFragment;
|
|
58
55
|
|
|
59
56
|
expect(asFragment()).toMatchSnapshot();
|
|
60
57
|
});
|
|
61
|
-
test.each(appearanceCombos.map(function (combo) {
|
|
62
|
-
return [combo];
|
|
63
|
-
}))('Should render selectedAppearance of buttons - %s', function (appearance) {
|
|
64
|
-
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
65
|
-
isSelected: true,
|
|
66
|
-
selectedAppearance: appearance
|
|
67
|
-
})),
|
|
68
|
-
asFragment = _render6.asFragment;
|
|
69
|
-
|
|
70
|
-
expect(asFragment()).toMatchSnapshot();
|
|
71
|
-
});
|
|
72
58
|
var variant = ['text', 'icon', 'iconWithText'];
|
|
73
59
|
test.each(variant)('Should render variant of buttons - %s', function (variant) {
|
|
74
|
-
var
|
|
60
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
75
61
|
variant: variant
|
|
76
62
|
})),
|
|
77
|
-
asFragment =
|
|
63
|
+
asFragment = _render6.asFragment;
|
|
78
64
|
|
|
79
65
|
expect(asFragment()).toMatchSnapshot();
|
|
80
66
|
});
|
|
81
67
|
var size = ['small', 'medium', 'large', 'full'];
|
|
82
68
|
test.each(size)('Should render Sizes of buttons - %s', function (size) {
|
|
83
|
-
var
|
|
69
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
84
70
|
size: size
|
|
85
71
|
})),
|
|
86
|
-
asFragment =
|
|
72
|
+
asFragment = _render7.asFragment;
|
|
87
73
|
|
|
88
74
|
expect(asFragment()).toMatchSnapshot();
|
|
89
75
|
});
|
|
90
76
|
var status = ['default', 'loading', 'success'];
|
|
91
77
|
test.each(status)('Should render Status of buttons - %s', function (status) {
|
|
92
|
-
var
|
|
78
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
93
79
|
status: status
|
|
94
80
|
})),
|
|
95
|
-
asFragment =
|
|
81
|
+
asFragment = _render8.asFragment;
|
|
96
82
|
|
|
97
83
|
expect(asFragment()).toMatchSnapshot();
|
|
98
84
|
});
|
|
99
85
|
var loaderPlacement = ['start', 'end', 'overlay'];
|
|
100
86
|
test.each(loaderPlacement)('Should render loaderPlacement of buttons - %s', function (loaderPlacement) {
|
|
101
|
-
var
|
|
87
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
102
88
|
status: "loading",
|
|
103
89
|
loaderPlacement: loaderPlacement
|
|
104
90
|
})),
|
|
105
|
-
asFragment =
|
|
91
|
+
asFragment = _render9.asFragment;
|
|
106
92
|
|
|
107
93
|
expect(asFragment()).toMatchSnapshot();
|
|
108
94
|
});
|
|
109
95
|
test('Should render with iconName and iconSize ', function () {
|
|
110
|
-
var
|
|
96
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
111
97
|
variant: "icon",
|
|
112
98
|
iconName: "ZD-plus",
|
|
113
99
|
iconSize: 20
|
|
114
100
|
})),
|
|
115
|
-
asFragment =
|
|
101
|
+
asFragment = _render10.asFragment;
|
|
116
102
|
|
|
117
103
|
expect(asFragment()).toMatchSnapshot();
|
|
118
104
|
});
|
|
119
105
|
test('Should render with iconPlacement ', function () {
|
|
120
|
-
var
|
|
106
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
121
107
|
variant: "iconWithText",
|
|
122
108
|
iconName: "ZD-plus",
|
|
123
109
|
iconPlacement: "right"
|
|
124
110
|
}, "Button")),
|
|
125
|
-
asFragment =
|
|
111
|
+
asFragment = _render11.asFragment;
|
|
126
112
|
|
|
127
113
|
expect(asFragment()).toMatchSnapshot();
|
|
128
114
|
});
|
|
129
115
|
test('Should render with renderIcon', function () {
|
|
130
|
-
var
|
|
116
|
+
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
131
117
|
variant: "icon",
|
|
132
118
|
renderIcon: function renderIcon() {
|
|
133
119
|
return /*#__PURE__*/_react["default"].createElement("span", null, "CustomIcon");
|
|
134
120
|
}
|
|
135
121
|
})),
|
|
136
|
-
asFragment =
|
|
122
|
+
asFragment = _render12.asFragment;
|
|
137
123
|
|
|
138
124
|
expect(asFragment()).toMatchSnapshot();
|
|
139
125
|
});
|
|
140
126
|
test('Should render with renderBefore and renderAfter', function () {
|
|
141
|
-
var
|
|
127
|
+
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
142
128
|
renderBefore: function renderBefore() {
|
|
143
129
|
return /*#__PURE__*/_react["default"].createElement("span", null, "Before");
|
|
144
130
|
},
|
|
@@ -146,115 +132,115 @@ describe('Button - Component', function () {
|
|
|
146
132
|
return /*#__PURE__*/_react["default"].createElement("span", null, "After");
|
|
147
133
|
}
|
|
148
134
|
}, "Button")),
|
|
149
|
-
asFragment =
|
|
135
|
+
asFragment = _render13.asFragment;
|
|
150
136
|
|
|
151
137
|
expect(asFragment()).toMatchSnapshot();
|
|
152
138
|
});
|
|
153
139
|
test('Should render with renderLoader', function () {
|
|
154
|
-
var
|
|
140
|
+
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
155
141
|
status: "loading",
|
|
156
142
|
renderLoader: function renderLoader() {
|
|
157
143
|
return /*#__PURE__*/_react["default"].createElement("span", null, "Loading...");
|
|
158
144
|
}
|
|
159
145
|
})),
|
|
160
|
-
asFragment =
|
|
146
|
+
asFragment = _render14.asFragment;
|
|
161
147
|
|
|
162
148
|
expect(asFragment()).toMatchSnapshot();
|
|
163
149
|
});
|
|
164
150
|
test('Should render with renderSuccess', function () {
|
|
165
|
-
var
|
|
151
|
+
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
166
152
|
status: "success",
|
|
167
153
|
renderSuccess: function renderSuccess() {
|
|
168
154
|
return /*#__PURE__*/_react["default"].createElement("span", null, "Success!");
|
|
169
155
|
}
|
|
170
156
|
})),
|
|
171
|
-
asFragment =
|
|
157
|
+
asFragment = _render15.asFragment;
|
|
172
158
|
|
|
173
159
|
expect(asFragment()).toMatchSnapshot();
|
|
174
160
|
});
|
|
175
161
|
var type = ['button', 'submit', 'reset'];
|
|
176
162
|
test.each(type)('Should render type of buttons - %s', function (type) {
|
|
177
|
-
var
|
|
163
|
+
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
178
164
|
type: type
|
|
179
165
|
})),
|
|
180
|
-
asFragment =
|
|
166
|
+
asFragment = _render16.asFragment;
|
|
181
167
|
|
|
182
168
|
expect(asFragment()).toMatchSnapshot();
|
|
183
169
|
});
|
|
184
170
|
test('Should trigger onClick function', function () {
|
|
185
171
|
var onClick = jest.fn();
|
|
186
172
|
|
|
187
|
-
var
|
|
173
|
+
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
188
174
|
onClick: onClick
|
|
189
175
|
})),
|
|
190
|
-
getByRole =
|
|
176
|
+
getByRole = _render17.getByRole;
|
|
191
177
|
|
|
192
178
|
_userEvent["default"].click(getByRole('button'));
|
|
193
179
|
|
|
194
180
|
expect(onClick).toHaveBeenCalled();
|
|
195
181
|
});
|
|
196
182
|
test('Should be disabled when isDisabled prop is true', function () {
|
|
197
|
-
var
|
|
183
|
+
var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
198
184
|
isDisabled: true
|
|
199
185
|
})),
|
|
200
|
-
asFragment =
|
|
186
|
+
asFragment = _render18.asFragment;
|
|
201
187
|
|
|
202
188
|
expect(asFragment()).toMatchSnapshot();
|
|
203
189
|
});
|
|
204
190
|
test('Should render with readOnly style when isReadOnly prop is true', function () {
|
|
205
|
-
var
|
|
191
|
+
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
206
192
|
isReadOnly: true
|
|
207
193
|
})),
|
|
208
|
-
asFragment =
|
|
194
|
+
asFragment = _render19.asFragment;
|
|
209
195
|
|
|
210
196
|
expect(asFragment()).toMatchSnapshot();
|
|
211
197
|
});
|
|
212
198
|
test('Should render with selected style when isSelected prop is true', function () {
|
|
213
|
-
var
|
|
199
|
+
var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
214
200
|
isSelected: true
|
|
215
201
|
})),
|
|
216
|
-
asFragment =
|
|
202
|
+
asFragment = _render20.asFragment;
|
|
217
203
|
|
|
218
204
|
expect(asFragment()).toMatchSnapshot();
|
|
219
205
|
});
|
|
220
206
|
var shape = ['pill', 'rectangle', 'roundedRectangle'];
|
|
221
207
|
test.each(shape)('Should render shape of buttons - %s', function (shape) {
|
|
222
|
-
var
|
|
208
|
+
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
223
209
|
shape: shape
|
|
224
210
|
})),
|
|
225
|
-
asFragment =
|
|
211
|
+
asFragment = _render21.asFragment;
|
|
226
212
|
|
|
227
213
|
expect(asFragment()).toMatchSnapshot();
|
|
228
214
|
});
|
|
229
215
|
var paletteShade = ['default', 'lighter'];
|
|
230
216
|
test.each(paletteShade)('Should render paletteShade of buttons - %s', function (shade) {
|
|
231
|
-
var
|
|
217
|
+
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
232
218
|
paletteShade: shade
|
|
233
219
|
})),
|
|
234
|
-
asFragment =
|
|
220
|
+
asFragment = _render22.asFragment;
|
|
235
221
|
|
|
236
222
|
expect(asFragment()).toMatchSnapshot();
|
|
237
223
|
});
|
|
238
224
|
var disabledAppearance = ['none', 'dull', 'strike'];
|
|
239
225
|
test.each(disabledAppearance)('Should render disabledAppearance of buttons - %s', function (style) {
|
|
240
|
-
var
|
|
226
|
+
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
241
227
|
isDisabled: true,
|
|
242
228
|
disabledAppearance: style
|
|
243
229
|
})),
|
|
244
|
-
asFragment =
|
|
230
|
+
asFragment = _render23.asFragment;
|
|
245
231
|
|
|
246
232
|
expect(asFragment()).toMatchSnapshot();
|
|
247
233
|
});
|
|
248
234
|
test('Should render with title attribute', function () {
|
|
249
|
-
var
|
|
235
|
+
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
250
236
|
title: "Button test title"
|
|
251
237
|
})),
|
|
252
|
-
asFragment =
|
|
238
|
+
asFragment = _render24.asFragment;
|
|
253
239
|
|
|
254
240
|
expect(asFragment()).toMatchSnapshot();
|
|
255
241
|
});
|
|
256
242
|
test('Should apply customClass to wrapper, text and icon', function () {
|
|
257
|
-
var
|
|
243
|
+
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
258
244
|
variant: "iconWithText",
|
|
259
245
|
iconName: "ZD-plus",
|
|
260
246
|
customClass: {
|
|
@@ -263,12 +249,12 @@ describe('Button - Component', function () {
|
|
|
263
249
|
icon: 'customIconClass'
|
|
264
250
|
}
|
|
265
251
|
}, "Button")),
|
|
266
|
-
asFragment =
|
|
252
|
+
asFragment = _render25.asFragment;
|
|
267
253
|
|
|
268
254
|
expect(asFragment()).toMatchSnapshot();
|
|
269
255
|
});
|
|
270
256
|
test('Should apply customProps to wrapper, text and icon', function () {
|
|
271
|
-
var
|
|
257
|
+
var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
272
258
|
variant: "iconWithText",
|
|
273
259
|
iconName: "check",
|
|
274
260
|
customProps: {
|
|
@@ -283,27 +269,27 @@ describe('Button - Component', function () {
|
|
|
283
269
|
}
|
|
284
270
|
}
|
|
285
271
|
}, "Button")),
|
|
286
|
-
asFragment =
|
|
272
|
+
asFragment = _render26.asFragment;
|
|
287
273
|
|
|
288
274
|
expect(asFragment()).toMatchSnapshot();
|
|
289
275
|
});
|
|
290
276
|
test('Should render with customId and testId', function () {
|
|
291
|
-
var
|
|
277
|
+
var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
292
278
|
customId: "customIdValue",
|
|
293
279
|
testId: "testIdValue"
|
|
294
280
|
})),
|
|
295
|
-
asFragment =
|
|
281
|
+
asFragment = _render27.asFragment;
|
|
296
282
|
|
|
297
283
|
expect(asFragment()).toMatchSnapshot();
|
|
298
284
|
});
|
|
299
285
|
test('Should apply a11yAttributes to the button', function () {
|
|
300
|
-
var
|
|
286
|
+
var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
301
287
|
a11yAttributes: {
|
|
302
288
|
'aria-label': 'Smart Button',
|
|
303
289
|
'aria-describedby': 'button-description'
|
|
304
290
|
}
|
|
305
291
|
}, "Button")),
|
|
306
|
-
asFragment =
|
|
292
|
+
asFragment = _render28.asFragment;
|
|
307
293
|
|
|
308
294
|
expect(asFragment()).toMatchSnapshot();
|
|
309
295
|
});
|