@zohodesk/components 1.0.0-temp-259.1 → 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.
Files changed (37) hide show
  1. package/README.md +21 -3
  2. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +20 -5
  3. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +20 -5
  4. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +20 -5
  5. package/es/AdvancedPopup/AdvancedPopup.js +105 -0
  6. package/es/v1/Button/Button.js +107 -159
  7. package/es/v1/Button/README.md +2 -3
  8. package/es/v1/Button/__tests__/Button.spec.js +6 -14
  9. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
  10. package/es/v1/Button/constants/index.js +20 -26
  11. package/es/v1/Button/css/Button_v1.module.css +16 -37
  12. package/es/v1/Button/css/cssJSLogic.js +28 -47
  13. package/es/v1/Button/props/defaultProps.js +6 -5
  14. package/es/v1/Button/props/propTypes.js +8 -26
  15. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  16. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  17. package/es/v1/helpers/colorHelpers/colorHelper.js +138 -114
  18. package/es/v1/helpers/colorHelpers/constants/index.js +4 -45
  19. package/es/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  20. package/lib/AdvancedPopup/AdvancedPopup.js +122 -0
  21. package/lib/v1/Button/Button.js +119 -178
  22. package/lib/v1/Button/README.md +2 -3
  23. package/lib/v1/Button/__tests__/Button.spec.js +52 -66
  24. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
  25. package/lib/v1/Button/constants/index.js +28 -31
  26. package/lib/v1/Button/css/Button_v1.module.css +16 -37
  27. package/lib/v1/Button/css/cssJSLogic.js +19 -32
  28. package/lib/v1/Button/props/defaultProps.js +5 -4
  29. package/lib/v1/Button/props/propTypes.js +7 -41
  30. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  31. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  32. package/lib/v1/helpers/colorHelpers/colorHelper.js +153 -125
  33. package/lib/v1/helpers/colorHelpers/constants/index.js +4 -45
  34. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  35. package/package.json +10 -10
  36. package/es/v1/Button/constants/presets.js +0 -158
  37. package/lib/v1/Button/constants/presets.js +0 -176
@@ -37,108 +37,94 @@ describe('Button - Component', function () {
37
37
 
38
38
  expect(asFragment()).toMatchSnapshot();
39
39
  });
40
- var appearanceCombos = [['bg'], ['border'], ['text'], ['bg', 'border'], []];
41
- test.each(appearanceCombos.map(function (combo) {
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
- appearance: appearance
43
+ bgAppearance: bg
46
44
  })),
47
45
  asFragment = _render4.asFragment;
48
46
 
49
47
  expect(asFragment()).toMatchSnapshot();
50
48
  });
51
- test.each(appearanceCombos.map(function (combo) {
52
- return [combo];
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
- hoverAppearance: appearance
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 _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
60
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
75
61
  variant: variant
76
62
  })),
77
- asFragment = _render7.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 _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
69
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
84
70
  size: size
85
71
  })),
86
- asFragment = _render8.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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
78
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
93
79
  status: status
94
80
  })),
95
- asFragment = _render9.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 _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
87
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
102
88
  status: "loading",
103
89
  loaderPlacement: loaderPlacement
104
90
  })),
105
- asFragment = _render10.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 _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render11.asFragment;
101
+ asFragment = _render10.asFragment;
116
102
 
117
103
  expect(asFragment()).toMatchSnapshot();
118
104
  });
119
105
  test('Should render with iconPlacement ', function () {
120
- var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render12.asFragment;
111
+ asFragment = _render11.asFragment;
126
112
 
127
113
  expect(asFragment()).toMatchSnapshot();
128
114
  });
129
115
  test('Should render with renderIcon', function () {
130
- var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render13.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 _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render14.asFragment;
135
+ asFragment = _render13.asFragment;
150
136
 
151
137
  expect(asFragment()).toMatchSnapshot();
152
138
  });
153
139
  test('Should render with renderLoader', function () {
154
- var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render15.asFragment;
146
+ asFragment = _render14.asFragment;
161
147
 
162
148
  expect(asFragment()).toMatchSnapshot();
163
149
  });
164
150
  test('Should render with renderSuccess', function () {
165
- var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render16.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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
163
+ var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
178
164
  type: type
179
165
  })),
180
- asFragment = _render17.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 _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
173
+ var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
188
174
  onClick: onClick
189
175
  })),
190
- getByRole = _render18.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 _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
183
+ var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
198
184
  isDisabled: true
199
185
  })),
200
- asFragment = _render19.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 _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
191
+ var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
206
192
  isReadOnly: true
207
193
  })),
208
- asFragment = _render20.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 _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
199
+ var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
214
200
  isSelected: true
215
201
  })),
216
- asFragment = _render21.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 _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
208
+ var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
223
209
  shape: shape
224
210
  })),
225
- asFragment = _render22.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 _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
217
+ var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
232
218
  paletteShade: shade
233
219
  })),
234
- asFragment = _render23.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 _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
226
+ var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
241
227
  isDisabled: true,
242
228
  disabledAppearance: style
243
229
  })),
244
- asFragment = _render24.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 _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
235
+ var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
250
236
  title: "Button test title"
251
237
  })),
252
- asFragment = _render25.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 _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render26.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 _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render27.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 _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
277
+ var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
292
278
  customId: "customIdValue",
293
279
  testId: "testIdValue"
294
280
  })),
295
- asFragment = _render28.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 _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
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 = _render29.asFragment;
292
+ asFragment = _render28.asFragment;
307
293
 
308
294
  expect(asFragment()).toMatchSnapshot();
309
295
  });