@instructure/ui-color-picker 10.2.3-snapshot-13 → 10.2.3-snapshot-15

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 (14) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/ColorContrast/__new-tests__/ColorContrast.test.js +10 -10
  3. package/es/ColorIndicator/__new-tests__/ColorIndicator.test.js +1 -1
  4. package/es/ColorMixer/__new-tests__/ColorMixer.test.js +24 -24
  5. package/es/ColorPicker/__new-tests__/ColorPicker.test.js +18 -18
  6. package/es/ColorPreset/__new-tests__/ColorPreset.test.js +9 -9
  7. package/lib/ColorContrast/__new-tests__/ColorContrast.test.js +10 -10
  8. package/lib/ColorIndicator/__new-tests__/ColorIndicator.test.js +1 -1
  9. package/lib/ColorMixer/__new-tests__/ColorMixer.test.js +24 -24
  10. package/lib/ColorPicker/__new-tests__/ColorPicker.test.js +18 -18
  11. package/lib/ColorPreset/__new-tests__/ColorPreset.test.js +9 -9
  12. package/package.json +28 -28
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/ColorPicker/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.2.3-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-13) (2024-10-02)
6
+ ## [10.2.3-snapshot-15](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-15) (2024-10-03)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-color-picker
9
9
 
package/es/ColorContrast/__new-tests__/ColorContrast.test.js CHANGED
@@ -51,7 +51,7 @@ describe('<ColorContrast />', () => {
51
51
  describe('elementRef prop', () => {
52
52
  it('should provide ref', async () => {
53
53
  const elementRef = vi.fn();
54
- const _render = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
54
+ const _render = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
55
55
  elementRef: elementRef
56
56
  }))),
57
57
  container = _render.container;
@@ -61,7 +61,7 @@ describe('<ColorContrast />', () => {
61
61
  describe('labels are displayed:', () => {
62
62
  Object.entries(testLabels).forEach(([label, text]) => {
63
63
  it(label, async () => {
64
- const _render2 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
64
+ const _render2 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
65
65
  container = _render2.container;
66
66
  expect(container).toHaveTextContent(text);
67
67
  });
@@ -71,7 +71,7 @@ describe('<ColorContrast />', () => {
71
71
  it('on opaque colors', async () => {
72
72
  const color1 = '#fff';
73
73
  const color2 = '#088';
74
- const _render3 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
74
+ const _render3 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
75
75
  firstColor: color1,
76
76
  secondColor: color2
77
77
  }))),
@@ -82,7 +82,7 @@ describe('<ColorContrast />', () => {
82
82
  it('on transparent colors', async () => {
83
83
  const color1 = '#fff';
84
84
  const color2 = '#00888880';
85
- const _render4 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
85
+ const _render4 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
86
86
  firstColor: color1,
87
87
  secondColor: color2
88
88
  }))),
@@ -95,13 +95,13 @@ describe('<ColorContrast />', () => {
95
95
  });
96
96
  describe('withoutColorPreview prop', () => {
97
97
  it('should be false by default, should display preview', async () => {
98
- const _render5 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
98
+ const _render5 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
99
99
  container = _render5.container;
100
100
  const preview = container.querySelector("[class$='-colorContrast__colorPreview']");
101
101
  expect(preview).toBeInTheDocument();
102
102
  });
103
103
  it('should hide preview', async () => {
104
- const _render6 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
104
+ const _render6 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
105
105
  withoutColorPreview: true
106
106
  }))),
107
107
  container = _render6.container;
@@ -113,7 +113,7 @@ describe('<ColorContrast />', () => {
113
113
  const checkContrastPills = (title, firstColor, secondColor, expectedResult) => {
114
114
  describe(title, () => {
115
115
  it(`normal text should ${expectedResult.normal.toLowerCase()}`, async () => {
116
- const _render7 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
116
+ const _render7 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
117
117
  firstColor: firstColor,
118
118
  secondColor: secondColor
119
119
  }))),
@@ -121,7 +121,7 @@ describe('<ColorContrast />', () => {
121
121
  expect(container).toHaveTextContent(expectedResult.normal);
122
122
  });
123
123
  it(`large text should ${expectedResult.large.toLowerCase()}`, async () => {
124
- const _render8 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
124
+ const _render8 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
125
125
  firstColor: firstColor,
126
126
  secondColor: secondColor
127
127
  }))),
@@ -129,7 +129,7 @@ describe('<ColorContrast />', () => {
129
129
  expect(container).toHaveTextContent(expectedResult.large);
130
130
  });
131
131
  it(`graphics should ${expectedResult.graphics.toLowerCase()}`, async () => {
132
- const _render9 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
132
+ const _render9 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
133
133
  firstColor: firstColor,
134
134
  secondColor: secondColor
135
135
  }))),
@@ -156,7 +156,7 @@ describe('<ColorContrast />', () => {
156
156
  });
157
157
  describe('should be accessible', () => {
158
158
  it('a11y', async () => {
159
- const _render10 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
159
+ const _render10 = render(/*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
160
160
  container = _render10.container;
161
161
  const axeCheck = await runAxeCheck(container);
162
162
  expect(axeCheck).toBe(true);
package/es/ColorIndicator/__new-tests__/ColorIndicator.test.js CHANGED
@@ -37,7 +37,7 @@ describe('<ColorIndicator />', () => {
37
37
  describe('elementRef prop', () => {
38
38
  it('should provide ref', async () => {
39
39
  const elementRef = vi.fn();
40
- const _render = render( /*#__PURE__*/React.createElement(ColorIndicator, {
40
+ const _render = render(/*#__PURE__*/React.createElement(ColorIndicator, {
41
41
  elementRef: elementRef
42
42
  })),
43
43
  container = _render.container;
package/es/ColorMixer/__new-tests__/ColorMixer.test.js CHANGED
@@ -74,7 +74,7 @@ describe('<ColorMixer />', () => {
74
74
  describe('elementRef prop', () => {
75
75
  it('should provide ref', async () => {
76
76
  const elementRef = vi.fn();
77
- const _render = render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
77
+ const _render = render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
78
78
  onChange: vi.fn(),
79
79
  elementRef: elementRef
80
80
  }))),
@@ -84,7 +84,7 @@ describe('<ColorMixer />', () => {
84
84
  });
85
85
  describe('labels are displayed:', () => {
86
86
  it('should render input labels', async () => {
87
- const _render2 = render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
87
+ const _render2 = render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
88
88
  withAlpha: true,
89
89
  onChange: vi.fn()
90
90
  }))),
@@ -96,7 +96,7 @@ describe('<ColorMixer />', () => {
96
96
  });
97
97
  });
98
98
  it('should render explanation labels', async () => {
99
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
99
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
100
100
  withAlpha: true,
101
101
  onChange: vi.fn()
102
102
  })));
@@ -109,7 +109,7 @@ describe('<ColorMixer />', () => {
109
109
  });
110
110
  describe('should be accessible', () => {
111
111
  it('a11y', async () => {
112
- const _render3 = render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
112
+ const _render3 = render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
113
113
  onChange: vi.fn()
114
114
  }))),
115
115
  container = _render3.container;
@@ -131,7 +131,7 @@ describe('<ColorMixer />', () => {
131
131
  describe('edge cases for color value', () => {
132
132
  Object.entries(edgeColorValues).forEach(([label, color]) => {
133
133
  it(label, async () => {
134
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
134
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
135
135
  value: color
136
136
  }, testInputLabels, testScreenReaderLabels, {
137
137
  withAlpha: true,
@@ -156,7 +156,7 @@ describe('<ColorMixer />', () => {
156
156
  Object.entries(differentHexColorValues).forEach(([length, color]) => {
157
157
  it(`mount with ${length}-character hex color`, async () => {
158
158
  const colorInput = color;
159
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
159
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
160
160
  value: colorInput
161
161
  }, testInputLabels, testScreenReaderLabels, {
162
162
  withAlpha: true,
@@ -180,7 +180,7 @@ describe('<ColorMixer />', () => {
180
180
  });
181
181
  });
182
182
  it('mount with invalid hex color', async () => {
183
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
183
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
184
184
  value: "#GGGGGGGG"
185
185
  }, testInputLabels, testScreenReaderLabels, {
186
186
  withAlpha: true,
@@ -208,7 +208,7 @@ describe('<ColorMixer />', () => {
208
208
  describe('hue slider', () => {
209
209
  it('should not call onChange when the `tab` key is pressed', async () => {
210
210
  const onChange = vi.fn();
211
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
211
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
212
212
  withAlpha: true
213
213
  }, testInputLabels, testScreenReaderLabels, {
214
214
  onChange: onChange
@@ -224,7 +224,7 @@ describe('<ColorMixer />', () => {
224
224
  });
225
225
  it('onChange should not be call when component is disabled', async () => {
226
226
  const onChange = vi.fn();
227
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
227
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
228
228
  disabled: true
229
229
  }, testInputLabels, testScreenReaderLabels, {
230
230
  onChange: onChange
@@ -241,7 +241,7 @@ describe('<ColorMixer />', () => {
241
241
  describe('alpha slider', () => {
242
242
  it('should not call onChange when a `tab` key press is received', async () => {
243
243
  const onChange = vi.fn();
244
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
244
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
245
245
  withAlpha: true
246
246
  }, testInputLabels, testScreenReaderLabels, {
247
247
  onChange: onChange
@@ -257,7 +257,7 @@ describe('<ColorMixer />', () => {
257
257
  });
258
258
  it('should not call onChange when the component is disabled', async () => {
259
259
  const onChange = vi.fn();
260
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
260
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
261
261
  withAlpha: true,
262
262
  disabled: true,
263
263
  value: "#000"
@@ -274,7 +274,7 @@ describe('<ColorMixer />', () => {
274
274
  });
275
275
  it('the alpha slider does not show when withAlpha is false', async () => {
276
276
  const onChange = vi.fn();
277
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
277
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
278
278
  withAlpha: false,
279
279
  value: "#80404100"
280
280
  }, testInputLabels, testScreenReaderLabels, {
@@ -287,7 +287,7 @@ describe('<ColorMixer />', () => {
287
287
  });
288
288
  it('the alpha slider does not show when withAlpha is not set', async () => {
289
289
  const onChange = vi.fn();
290
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
290
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
291
291
  value: "#80404100"
292
292
  }, testInputLabels, testScreenReaderLabels, {
293
293
  onChange: onChange
@@ -299,7 +299,7 @@ describe('<ColorMixer />', () => {
299
299
  });
300
300
  it('should set the disabled attribute when `disabled` is set', async () => {
301
301
  const onChange = vi.fn();
302
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
302
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
303
303
  withAlpha: true,
304
304
  disabled: true,
305
305
  value: "#80404100"
@@ -315,7 +315,7 @@ describe('<ColorMixer />', () => {
315
315
  describe('color palette', () => {
316
316
  it('should set the disabled attribute when `disabled` is set', async () => {
317
317
  const onChange = vi.fn();
318
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
318
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
319
319
  withAlpha: true,
320
320
  disabled: true,
321
321
  value: "#80404100"
@@ -330,7 +330,7 @@ describe('<ColorMixer />', () => {
330
330
  });
331
331
  describe('color input', () => {
332
332
  it('the alpha input exsits when `withAlpha` is set', async () => {
333
- const _render5 = render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
333
+ const _render5 = render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
334
334
  withAlpha: true
335
335
  }, testValue, testInputLabels, testScreenReaderLabels, {
336
336
  onChange: vi.fn()
@@ -342,7 +342,7 @@ describe('<ColorMixer />', () => {
342
342
  expect(alphaInputScreenReaderLabel).toBeInTheDocument();
343
343
  });
344
344
  it('the alpha input does not exsit when `withAlpha` is not set', async () => {
345
- const _render6 = render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
345
+ const _render6 = render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testValue, testInputLabels, testScreenReaderLabels, {
346
346
  onChange: vi.fn()
347
347
  }))),
348
348
  container = _render6.container;
@@ -354,7 +354,7 @@ describe('<ColorMixer />', () => {
354
354
  it('should not call onChange when `disabled` is set and get the input', async () => {
355
355
  const fakeValue = '234234';
356
356
  const onChange = vi.fn();
357
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
357
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
358
358
  disabled: true,
359
359
  withAlpha: true
360
360
  }, testInputLabels, testScreenReaderLabels, {
@@ -371,7 +371,7 @@ describe('<ColorMixer />', () => {
371
371
  });
372
372
  });
373
373
  it('should set the disabled attribute when `disabled` and `withAlpha` is set', async () => {
374
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
374
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
375
375
  disabled: true,
376
376
  withAlpha: true
377
377
  }, testInputLabels, testScreenReaderLabels, {
@@ -384,7 +384,7 @@ describe('<ColorMixer />', () => {
384
384
  });
385
385
  });
386
386
  it('should set the disabled attribute when `disabled` is set', async () => {
387
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
387
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
388
388
  disabled: true
389
389
  }, testInputLabels, testScreenReaderLabels, {
390
390
  onChange: vi.fn()
@@ -397,7 +397,7 @@ describe('<ColorMixer />', () => {
397
397
  });
398
398
  it('should not accept letter character', async () => {
399
399
  const invalidColor = 'adfafas';
400
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
400
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
401
401
  withAlpha: true
402
402
  }, testInputLabels, testScreenReaderLabels, {
403
403
  onChange: vi.fn()
@@ -417,7 +417,7 @@ describe('<ColorMixer />', () => {
417
417
  });
418
418
  it('should not accept negative value', async () => {
419
419
  const invalidColor = '-10';
420
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
420
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
421
421
  withAlpha: true
422
422
  }, testInputLabels, testScreenReaderLabels, {
423
423
  onChange: vi.fn()
@@ -437,7 +437,7 @@ describe('<ColorMixer />', () => {
437
437
  });
438
438
  it('should not accept value that bigger than 255', async () => {
439
439
  const invalidColor = '300';
440
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testInputLabels, testScreenReaderLabels, {
440
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({}, testInputLabels, testScreenReaderLabels, {
441
441
  onChange: vi.fn()
442
442
  })));
443
443
  const inputs = screen.getAllByRole('textbox');
@@ -453,7 +453,7 @@ describe('<ColorMixer />', () => {
453
453
  });
454
454
  it('for alpha input, should not accept value that bigger than 100', async () => {
455
455
  const invalidColor = '101';
456
- render( /*#__PURE__*/React.createElement(ColorMixer, Object.assign({
456
+ render(/*#__PURE__*/React.createElement(ColorMixer, Object.assign({
457
457
  withAlpha: true
458
458
  }, testInputLabels, testScreenReaderLabels, {
459
459
  onChange: vi.fn()
package/es/ColorPicker/__new-tests__/ColorPicker.test.js CHANGED
@@ -64,7 +64,7 @@ describe('<ColorPicker />', () => {
64
64
  it('should work controlled', async () => {
65
65
  const color = '#FFF';
66
66
  const onChange = vi.fn();
67
- const _render2 = render( /*#__PURE__*/React.createElement(SimpleExample, {
67
+ const _render2 = render(/*#__PURE__*/React.createElement(SimpleExample, {
68
68
  value: color,
69
69
  onChange: onChange
70
70
  })),
@@ -73,7 +73,7 @@ describe('<ColorPicker />', () => {
73
73
  expect(input).toHaveValue('FFF');
74
74
 
75
75
  // set new value
76
- rerender( /*#__PURE__*/React.createElement(SimpleExample, {
76
+ rerender(/*#__PURE__*/React.createElement(SimpleExample, {
77
77
  value: `${color}555`,
78
78
  onChange: onChange
79
79
  }));
@@ -131,7 +131,7 @@ describe('<ColorPicker />', () => {
131
131
  it(`should check contrast correctly when color has enough contrast [contrastStrength=${contrastStrength}]`, async () => {
132
132
  //oxford in canvas color palette, should be valid with all contrast strenght checkers
133
133
  const colorToCheck = '394B58';
134
- const _render3 = render( /*#__PURE__*/React.createElement(SimpleExample, {
134
+ const _render3 = render(/*#__PURE__*/React.createElement(SimpleExample, {
135
135
  checkContrast: {
136
136
  isStrict: false,
137
137
  contrastStrength: contrastStrength
@@ -152,7 +152,7 @@ describe('<ColorPicker />', () => {
152
152
  it(`should check contrast correctly when color does not have enough contrast [contrastStrength=${contrastStrength}, isStrict=false]`, async () => {
153
153
  //porcelain in canvas color palette, it should be failing even the min check
154
154
  const colorToCheck = 'F5F5F5';
155
- const _render4 = render( /*#__PURE__*/React.createElement(SimpleExample, {
155
+ const _render4 = render(/*#__PURE__*/React.createElement(SimpleExample, {
156
156
  checkContrast: {
157
157
  isStrict: false,
158
158
  contrastStrength: contrastStrength
@@ -173,7 +173,7 @@ describe('<ColorPicker />', () => {
173
173
  it(`should check contrast correctly when color does not have enough contrast [contrastStrength=${contrastStrength}, isStrict=true]`, async () => {
174
174
  //porcelain in canvas color palette, it should be failing even the min check
175
175
  const colorToCheck = 'F5F5F5';
176
- const _render5 = render( /*#__PURE__*/React.createElement(SimpleExample, {
176
+ const _render5 = render(/*#__PURE__*/React.createElement(SimpleExample, {
177
177
  checkContrast: {
178
178
  isStrict: true,
179
179
  contrastStrength: contrastStrength
@@ -193,7 +193,7 @@ describe('<ColorPicker />', () => {
193
193
  });
194
194
  it(`should display success message when contrast is met [contrastStrength=${contrastStrength}]`, async () => {
195
195
  const colorToCheck = '394B58';
196
- render( /*#__PURE__*/React.createElement(SimpleExample, {
196
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
197
197
  checkContrast: {
198
198
  isStrict: false,
199
199
  contrastStrength: contrastStrength,
@@ -214,7 +214,7 @@ describe('<ColorPicker />', () => {
214
214
  });
215
215
  it(`should display error message when contrast is not met [contrastStrength=${contrastStrength}, isStrict=false]`, async () => {
216
216
  const colorToCheck = 'F5F5F5';
217
- render( /*#__PURE__*/React.createElement(SimpleExample, {
217
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
218
218
  checkContrast: {
219
219
  isStrict: false,
220
220
  contrastStrength: contrastStrength,
@@ -235,7 +235,7 @@ describe('<ColorPicker />', () => {
235
235
  });
236
236
  it(`should display error message when contrast is not met [contrastStrength=${contrastStrength}, isStrict=true]`, async () => {
237
237
  const colorToCheck = 'F5F5F5';
238
- render( /*#__PURE__*/React.createElement(SimpleExample, {
238
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
239
239
  checkContrast: {
240
240
  isStrict: true,
241
241
  contrastStrength: contrastStrength,
@@ -257,7 +257,7 @@ describe('<ColorPicker />', () => {
257
257
  }
258
258
  it('should call onChange', async () => {
259
259
  const onChange = vi.fn();
260
- render( /*#__PURE__*/React.createElement(SimpleExample, {
260
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
261
261
  onChange: onChange
262
262
  }));
263
263
  const input = screen.getByRole('textbox');
@@ -272,7 +272,7 @@ describe('<ColorPicker />', () => {
272
272
  });
273
273
  });
274
274
  it('should display message when ColorPicker is a required field', async () => {
275
- render( /*#__PURE__*/React.createElement(SimpleExample, {
275
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
276
276
  isRequired: true,
277
277
  renderInvalidColorMessage: () => [{
278
278
  type: 'error',
@@ -292,7 +292,7 @@ describe('<ColorPicker />', () => {
292
292
  });
293
293
  });
294
294
  it('should display message when color is invalid', async () => {
295
- render( /*#__PURE__*/React.createElement(SimpleExample, {
295
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
296
296
  renderInvalidColorMessage: () => [{
297
297
  type: 'error',
298
298
  text: 'I am an invalid color message'
@@ -309,7 +309,7 @@ describe('<ColorPicker />', () => {
309
309
  });
310
310
  describe('complex mode', () => {
311
311
  it('should display trigger button', async () => {
312
- const _render6 = render( /*#__PURE__*/React.createElement(SimpleExample, {
312
+ const _render6 = render(/*#__PURE__*/React.createElement(SimpleExample, {
313
313
  colorMixerSettings: {
314
314
  popoverAddButtonLabel: 'add',
315
315
  popoverCloseButtonLabel: 'close'
@@ -322,7 +322,7 @@ describe('<ColorPicker />', () => {
322
322
  expect(button).toBeInTheDocument();
323
323
  });
324
324
  it('should open popover when trigger is clicked', async () => {
325
- render( /*#__PURE__*/React.createElement(SimpleExample, {
325
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
326
326
  colorMixerSettings: {
327
327
  popoverAddButtonLabel: 'add',
328
328
  popoverCloseButtonLabel: 'close'
@@ -343,7 +343,7 @@ describe('<ColorPicker />', () => {
343
343
  });
344
344
  });
345
345
  it('should display the color mixer', async () => {
346
- render( /*#__PURE__*/React.createElement(SimpleExample, {
346
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
347
347
  colorMixerSettings: {
348
348
  popoverAddButtonLabel: 'add',
349
349
  popoverCloseButtonLabel: 'close',
@@ -372,7 +372,7 @@ describe('<ColorPicker />', () => {
372
372
  });
373
373
  it('should display the correct color in the colormixer when the input is prefilled', async () => {
374
374
  const color = '0374B5';
375
- render( /*#__PURE__*/React.createElement(SimpleExample, {
375
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
376
376
  colorMixerSettings: {
377
377
  popoverAddButtonLabel: 'add',
378
378
  popoverCloseButtonLabel: 'close',
@@ -415,7 +415,7 @@ describe('<ColorPicker />', () => {
415
415
  b: 25,
416
416
  a: 1
417
417
  };
418
- render( /*#__PURE__*/React.createElement(SimpleExample, {
418
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
419
419
  onChange: onChange,
420
420
  colorMixerSettings: {
421
421
  popoverAddButtonLabel: 'add',
@@ -463,7 +463,7 @@ describe('<ColorPicker />', () => {
463
463
  });
464
464
  describe('custom popover mode', () => {
465
465
  it('should throw warning if children and settings object are passed too', async () => {
466
- render( /*#__PURE__*/React.createElement(SimpleExample, {
466
+ render(/*#__PURE__*/React.createElement(SimpleExample, {
467
467
  colorMixerSettings: {
468
468
  popoverAddButtonLabel: 'add',
469
469
  popoverCloseButtonLabel: 'close'
@@ -474,7 +474,7 @@ describe('<ColorPicker />', () => {
474
474
  });
475
475
  });
476
476
  it('should display trigger button', async () => {
477
- render( /*#__PURE__*/React.createElement(SimpleExample, null, () => _div2 || (_div2 = /*#__PURE__*/React.createElement("div", null))));
477
+ render(/*#__PURE__*/React.createElement(SimpleExample, null, () => _div2 || (_div2 = /*#__PURE__*/React.createElement("div", null))));
478
478
  const trigger = screen.getByRole('button');
479
479
  expect(trigger).toBeInTheDocument();
480
480
  expect(trigger).toHaveAttribute('data-popover-trigger', 'true');
package/es/ColorPreset/__new-tests__/ColorPreset.test.js CHANGED
@@ -64,7 +64,7 @@ describe('<ColorPreset />', () => {
64
64
  describe('elementRef prop', () => {
65
65
  it('should provide ref', async () => {
66
66
  const elementRef = vi.fn();
67
- const _render = render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
67
+ const _render = render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
68
68
  elementRef: elementRef
69
69
  }))),
70
70
  container = _render.container;
@@ -73,7 +73,7 @@ describe('<ColorPreset />', () => {
73
73
  });
74
74
  describe('label prop', () => {
75
75
  it('should display title', async () => {
76
- render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
76
+ render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
77
77
  label: "This is a title"
78
78
  })));
79
79
  const title = screen.getByText('This is a title');
@@ -82,7 +82,7 @@ describe('<ColorPreset />', () => {
82
82
  });
83
83
  describe('colors prop', () => {
84
84
  it('should render tooltips for all colors', async () => {
85
- render( /*#__PURE__*/React.createElement(ColorPreset, {
85
+ render(/*#__PURE__*/React.createElement(ColorPreset, {
86
86
  colors: testValue.colors,
87
87
  onSelect: vi.fn()
88
88
  }));
@@ -99,7 +99,7 @@ describe('<ColorPreset />', () => {
99
99
  });
100
100
  });
101
101
  it('should not render component when colors not provided and not modifiable', async () => {
102
- render( /*#__PURE__*/React.createElement(ColorPreset, {
102
+ render(/*#__PURE__*/React.createElement(ColorPreset, {
103
103
  colors: [],
104
104
  onSelect: vi.fn()
105
105
  }));
@@ -110,7 +110,7 @@ describe('<ColorPreset />', () => {
110
110
  describe('onSelect prop', () => {
111
111
  it('should fire with color hex when indicator clicked', async () => {
112
112
  const onSelect = vi.fn();
113
- render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
113
+ render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
114
114
  onSelect: onSelect
115
115
  })));
116
116
  const indicators = screen.getAllByRole('button');
@@ -122,7 +122,7 @@ describe('<ColorPreset />', () => {
122
122
  it('should fire with color hex when transparent indicator clicked', async () => {
123
123
  const testColor = '#12345678';
124
124
  const onSelect = vi.fn();
125
- render( /*#__PURE__*/React.createElement(ColorPreset, {
125
+ render(/*#__PURE__*/React.createElement(ColorPreset, {
126
126
  selected: '',
127
127
  colors: [testColor],
128
128
  onSelect: onSelect
@@ -135,7 +135,7 @@ describe('<ColorPreset />', () => {
135
135
  });
136
136
  it('should not fire when disabled prop is set', async () => {
137
137
  const onSelect = vi.fn();
138
- render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
138
+ render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
139
139
  disabled: true,
140
140
  onSelect: onSelect
141
141
  })));
@@ -148,14 +148,14 @@ describe('<ColorPreset />', () => {
148
148
  });
149
149
  describe('colorMixerSettings prop', () => {
150
150
  it('displays "new color" button', async () => {
151
- render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
151
+ render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
152
152
  colorMixerSettings: testColorMixerSettings
153
153
  })));
154
154
  const buttons = screen.getAllByRole('button');
155
155
  expect(buttons[0]).toHaveTextContent(testColorMixerSettings.addNewPresetButtonScreenReaderLabel);
156
156
  });
157
157
  it('renders color menus for all indicators', async () => {
158
- render( /*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
158
+ render(/*#__PURE__*/React.createElement(ColorPreset, Object.assign({}, testValue, {
159
159
  colorMixerSettings: testColorMixerSettings
160
160
  })));
161
161
  const menuTriggers = document.querySelectorAll('button[data-position-target^="Drilldown-Trigger_"]');
package/lib/ColorContrast/__new-tests__/ColorContrast.test.js CHANGED
@@ -54,7 +54,7 @@ describe('<ColorContrast />', () => {
54
54
  describe('elementRef prop', () => {
55
55
  it('should provide ref', async () => {
56
56
  const elementRef = _vitest.vi.fn();
57
- const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels, {
57
+ const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels, {
58
58
  elementRef: elementRef
59
59
  }))),
60
60
  container = _render.container;
@@ -64,7 +64,7 @@ describe('<ColorContrast />', () => {
64
64
  describe('labels are displayed:', () => {
65
65
  Object.entries(testLabels).forEach(([label, text]) => {
66
66
  it(label, async () => {
67
- const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
67
+ const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
68
68
  container = _render2.container;
69
69
  expect(container).toHaveTextContent(text);
70
70
  });
@@ -74,7 +74,7 @@ describe('<ColorContrast />', () => {
74
74
  it('on opaque colors', async () => {
75
75
  const color1 = '#fff';
76
76
  const color2 = '#088';
77
- const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
77
+ const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
78
78
  firstColor: color1,
79
79
  secondColor: color2
80
80
  }))),
@@ -85,7 +85,7 @@ describe('<ColorContrast />', () => {
85
85
  it('on transparent colors', async () => {
86
86
  const color1 = '#fff';
87
87
  const color2 = '#00888880';
88
- const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
88
+ const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
89
89
  firstColor: color1,
90
90
  secondColor: color2
91
91
  }))),
@@ -98,13 +98,13 @@ describe('<ColorContrast />', () => {
98
98
  });
99
99
  describe('withoutColorPreview prop', () => {
100
100
  it('should be false by default, should display preview', async () => {
101
- const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
101
+ const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
102
102
  container = _render5.container;
103
103
  const preview = container.querySelector("[class$='-colorContrast__colorPreview']");
104
104
  expect(preview).toBeInTheDocument();
105
105
  });
106
106
  it('should hide preview', async () => {
107
- const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels, {
107
+ const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels, {
108
108
  withoutColorPreview: true
109
109
  }))),
110
110
  container = _render6.container;
@@ -116,7 +116,7 @@ describe('<ColorContrast />', () => {
116
116
  const checkContrastPills = (title, firstColor, secondColor, expectedResult) => {
117
117
  describe(title, () => {
118
118
  it(`normal text should ${expectedResult.normal.toLowerCase()}`, async () => {
119
- const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
119
+ const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
120
120
  firstColor: firstColor,
121
121
  secondColor: secondColor
122
122
  }))),
@@ -124,7 +124,7 @@ describe('<ColorContrast />', () => {
124
124
  expect(container).toHaveTextContent(expectedResult.normal);
125
125
  });
126
126
  it(`large text should ${expectedResult.large.toLowerCase()}`, async () => {
127
- const _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
127
+ const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
128
128
  firstColor: firstColor,
129
129
  secondColor: secondColor
130
130
  }))),
@@ -132,7 +132,7 @@ describe('<ColorContrast />', () => {
132
132
  expect(container).toHaveTextContent(expectedResult.large);
133
133
  });
134
134
  it(`graphics should ${expectedResult.graphics.toLowerCase()}`, async () => {
135
- const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
135
+ const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testLabels, {
136
136
  firstColor: firstColor,
137
137
  secondColor: secondColor
138
138
  }))),
@@ -159,7 +159,7 @@ describe('<ColorContrast />', () => {
159
159
  });
160
160
  describe('should be accessible', () => {
161
161
  it('a11y', async () => {
162
- const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
162
+ const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorContrast, Object.assign({}, testColors, testLabels))),
163
163
  container = _render10.container;
164
164
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
165
165
  expect(axeCheck).toBe(true);
package/lib/ColorIndicator/__new-tests__/ColorIndicator.test.js CHANGED
@@ -38,7 +38,7 @@ describe('<ColorIndicator />', () => {
38
38
  describe('elementRef prop', () => {
39
39
  it('should provide ref', async () => {
40
40
  const elementRef = _vitest.vi.fn();
41
- const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ColorIndicator, {
41
+ const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.ColorIndicator, {
42
42
  elementRef: elementRef
43
43
  })),
44
44
  container = _render.container;