@commercetools-frontend/experimental-components 5.0.2 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,3 +1,242 @@
1
+ /* imported from button.module.css */
2
+
3
+ /* Generic button */
4
+
5
+ .button-module__button___1OzVf {
6
+ background: var(--color-neutral);
7
+ border: none;
8
+ border-radius: 6px;
9
+ color: var(--color-solid);
10
+ cursor: pointer;
11
+ display: inline-block;
12
+ font-family: 'Open Sans', sans-serif;
13
+ font-size: 1rem;
14
+ padding: 7px 15px;
15
+ transition: background-color var(--transition-linear-80ms);
16
+ vertical-align: middle;
17
+ min-height: 32px;
18
+ }
19
+
20
+ /* Specific types of buttons */
21
+
22
+ .button-module__cancel___1-jYL {
23
+ background: var(--color-surface);
24
+ border: 1px solid var(--color-neutral);
25
+ }
26
+
27
+ .button-module__confirm___-W92x {
28
+ background: var(--color-primary);
29
+ color: var(--color-surface);
30
+ }
31
+
32
+ .button-module__save___1-KXp {
33
+ color: var(--color-surface) !important;
34
+ }
35
+
36
+ .button-module__add___1fbPS {
37
+ background: var(--color-surface);
38
+ border: 1px solid var(--color-neutral);
39
+ color: var(--color-solid);
40
+ padding: 5.5px 15px 5.5px 10px;
41
+ }
42
+
43
+ .button-module__add-url___1e6xE {
44
+ }
45
+
46
+ .button-module__icon-add___2X7fc {
47
+ color: var(--color-neutral-60);
48
+ float: left;
49
+ font-size: 1rem;
50
+ margin: 3px 10px 0 0;
51
+ }
52
+
53
+ .button-module__icon-chain___1pvWT {
54
+ color: var(--color-neutral-60);
55
+ float: left;
56
+ font-size: 1.4rem;
57
+ margin: 0 10px 0 0;
58
+ }
59
+
60
+ .button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
61
+ .button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
62
+ color: var(--color-surface);
63
+ }
64
+
65
+ /* Base of switch buttons */
66
+
67
+ .button-module__switch___2bt5z {
68
+ background: var(--color-surface);
69
+ border: 1px var(--color-neutral) solid;
70
+ color: var(--color-solid);
71
+ font-weight: 100;
72
+ position: relative;
73
+ }
74
+
75
+ .button-module__switch___2bt5z .button-module__icon___wuw4Z {
76
+ color: var(--color-neutral-60);
77
+ }
78
+
79
+ .button-module__switch___2bt5z:disabled {
80
+ color: var(--color-neutral-60);
81
+ border-color: var(--color-neutral);
82
+ }
83
+
84
+ .button-module__switch___2bt5z:hover {
85
+ color: var(--color-surface);
86
+ border-color: var(--color-info);
87
+ background: var(--color-info);
88
+ }
89
+
90
+ .button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
91
+ color: var(--color-surface);
92
+ }
93
+
94
+ .button-module__switch--active___1s4ZM {
95
+ }
96
+
97
+ .button-module__switch___2bt5z:disabled {
98
+ background: transparent;
99
+ color: var(--color-neutral-60);
100
+ }
101
+
102
+ .button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
103
+ color: var(--color-neutral-60);
104
+ }
105
+
106
+ .button-module__switch___2bt5z:disabled,
107
+ .button-module__switch--active___1s4ZM:disabled {
108
+ opacity: 1; /* exception for disabled switch button */
109
+ user-select: none;
110
+ cursor: default;
111
+ }
112
+
113
+ .button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
114
+ .button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
115
+ color: var(--color-info);
116
+ }
117
+
118
+ .button-module__switch--active___1s4ZM:disabled {
119
+ color: var(--color-info);
120
+ border-color: var(--color-info);
121
+ }
122
+
123
+ /* Switch type squared */
124
+
125
+ .button-module__switch-squared___QnrOG {
126
+ padding: 4.5px 15px 4.5px 40px;
127
+ }
128
+
129
+ .button-module__switch-squared--active___2ZbEC {
130
+ }
131
+
132
+ /* Switch type rounded */
133
+
134
+ /* When the button has no text but icon */
135
+
136
+ .button-module__switch-rounded___1CBs_ {
137
+ padding: 0;
138
+ border-width: 1px;
139
+ width: 36px;
140
+ height: 36px;
141
+ border-radius: 36px;
142
+ }
143
+
144
+ .button-module__switch-rounded--active___2Ckga {
145
+ }
146
+
147
+ .button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
148
+ display: none;
149
+ }
150
+
151
+ /* States */
152
+
153
+ .button-module__cancel___1-jYL:hover {
154
+ border-color: var(--color-primary);
155
+ color: var(--color-primary);
156
+ }
157
+
158
+ .button-module__confirm___-W92x:hover {
159
+ background: var(--color-primary-25);
160
+ }
161
+
162
+ .button-module__add___1fbPS:hover {
163
+ background: var(--color-primary);
164
+ border-color: var(--color-primary);
165
+ color: var(--color-surface);
166
+ }
167
+
168
+ /* Variations */
169
+
170
+ .button-module__disabled___2Azpu {
171
+ pointer-events: none;
172
+ opacity: 0.5;
173
+ }
174
+
175
+ .button-module__full___264Zw {
176
+ width: 100%;
177
+ }
178
+
179
+ .button-module__alt___Z6PWx {
180
+ color: var(--color-surface);
181
+ border-radius: 20px;
182
+ border: 2px var(--color-surface) solid;
183
+ padding-left: 30px;
184
+ padding-right: 30px;
185
+ }
186
+
187
+ .button-module__confirm-alt___2Zcqz {
188
+ border-color: transparent;
189
+ }
190
+
191
+ .button-module__cancel-alt___u5EAw {
192
+ background: none;
193
+ }
194
+
195
+ .button-module__save-alt___6iHMF {
196
+ border-color: transparent;
197
+ }
198
+
199
+ /* Add Button */
200
+
201
+ .button-module__add-button___1f093 {
202
+ min-height: 32px;
203
+ }
204
+ /* imported from file-input.module.css */
205
+
206
+ /** Button */
207
+
208
+ .file-input-module__button___2KypN {
209
+ display: inline-flex;
210
+ background-color: var(--color-surface);
211
+ border: var(--border-for-button-as-secondary);
212
+ box-shadow: none;
213
+ border-radius: var(--border-radius-4);
214
+ color: var(--color-solid);
215
+ height: var(--height-for-button-as-big);
216
+ font-size: var(--font-size-20);
217
+ font-weight: var(--font-weight-500);
218
+ align-items: center;
219
+ transition: background-color var(--transition-linear-80ms);
220
+ padding: 0 var(--spacing-m);
221
+ }
222
+
223
+ .file-input-module__button___2KypN:hover,
224
+ .file-input-module__button___2KypN:focus {
225
+ cursor: pointer;
226
+ background-color: var(--background-color-for-button-when-hovered);
227
+ box-shadow: none;
228
+ }
229
+
230
+ .file-input-module__button___2KypN:active {
231
+ box-shadow: var(--shadow-9);
232
+ background-color: var(--color-surface);
233
+ }
234
+
235
+ .file-input-module__input___3MP4D {
236
+ visibility: hidden;
237
+ width: 1px;
238
+ height: 1px;
239
+ }
1
240
  /* imported from search-input.module.css */
2
241
 
3
242
  .search-input-module__block___1uM-y {
@@ -125,12 +364,6 @@
125
364
  .validated-input-module__container___3L2KB {
126
365
  display: inline;
127
366
  }
128
- /* imported from label-range.module.css */
129
-
130
- .label-range-module__label___3Tb0p {
131
- font-size: 0.9rem;
132
- font-weight: bold;
133
- }
134
367
  /* imported from multi-value-search-input.module.css */
135
368
 
136
369
  .multi-value-search-input-module__container___2u64d {
@@ -261,244 +494,11 @@
261
494
  border-bottom-left-radius: 0;
262
495
  margin-left: 0;
263
496
  }
264
- /* imported from button.module.css */
265
-
266
- /* Generic button */
267
-
268
- .button-module__button___1OzVf {
269
- background: var(--color-neutral);
270
- border: none;
271
- border-radius: 6px;
272
- color: var(--color-solid);
273
- cursor: pointer;
274
- display: inline-block;
275
- font-family: 'Open Sans', sans-serif;
276
- font-size: 1rem;
277
- padding: 7px 15px;
278
- transition: background-color var(--transition-linear-80ms);
279
- vertical-align: middle;
280
- min-height: 32px;
281
- }
282
-
283
- /* Specific types of buttons */
284
-
285
- .button-module__cancel___1-jYL {
286
- background: var(--color-surface);
287
- border: 1px solid var(--color-neutral);
288
- }
289
-
290
- .button-module__confirm___-W92x {
291
- background: var(--color-primary);
292
- color: var(--color-surface);
293
- }
294
-
295
- .button-module__save___1-KXp {
296
- color: var(--color-surface) !important;
297
- }
298
-
299
- .button-module__add___1fbPS {
300
- background: var(--color-surface);
301
- border: 1px solid var(--color-neutral);
302
- color: var(--color-solid);
303
- padding: 5.5px 15px 5.5px 10px;
304
- }
305
-
306
- .button-module__add-url___1e6xE {
307
- }
308
-
309
- .button-module__icon-add___2X7fc {
310
- color: var(--color-neutral-60);
311
- float: left;
312
- font-size: 1rem;
313
- margin: 3px 10px 0 0;
314
- }
315
-
316
- .button-module__icon-chain___1pvWT {
317
- color: var(--color-neutral-60);
318
- float: left;
319
- font-size: 1.4rem;
320
- margin: 0 10px 0 0;
321
- }
322
-
323
- .button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
324
- .button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
325
- color: var(--color-surface);
326
- }
327
-
328
- /* Base of switch buttons */
329
-
330
- .button-module__switch___2bt5z {
331
- background: var(--color-surface);
332
- border: 1px var(--color-neutral) solid;
333
- color: var(--color-solid);
334
- font-weight: 100;
335
- position: relative;
336
- }
337
-
338
- .button-module__switch___2bt5z .button-module__icon___wuw4Z {
339
- color: var(--color-neutral-60);
340
- }
341
-
342
- .button-module__switch___2bt5z:disabled {
343
- color: var(--color-neutral-60);
344
- border-color: var(--color-neutral);
345
- }
346
-
347
- .button-module__switch___2bt5z:hover {
348
- color: var(--color-surface);
349
- border-color: var(--color-info);
350
- background: var(--color-info);
351
- }
352
-
353
- .button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
354
- color: var(--color-surface);
355
- }
356
-
357
- .button-module__switch--active___1s4ZM {
358
- }
359
-
360
- .button-module__switch___2bt5z:disabled {
361
- background: transparent;
362
- color: var(--color-neutral-60);
363
- }
364
-
365
- .button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
366
- color: var(--color-neutral-60);
367
- }
368
-
369
- .button-module__switch___2bt5z:disabled,
370
- .button-module__switch--active___1s4ZM:disabled {
371
- opacity: 1; /* exception for disabled switch button */
372
- user-select: none;
373
- cursor: default;
374
- }
375
-
376
- .button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
377
- .button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
378
- color: var(--color-info);
379
- }
380
-
381
- .button-module__switch--active___1s4ZM:disabled {
382
- color: var(--color-info);
383
- border-color: var(--color-info);
384
- }
385
-
386
- /* Switch type squared */
387
-
388
- .button-module__switch-squared___QnrOG {
389
- padding: 4.5px 15px 4.5px 40px;
390
- }
391
-
392
- .button-module__switch-squared--active___2ZbEC {
393
- }
394
-
395
- /* Switch type rounded */
396
-
397
- /* When the button has no text but icon */
398
-
399
- .button-module__switch-rounded___1CBs_ {
400
- padding: 0;
401
- border-width: 1px;
402
- width: 36px;
403
- height: 36px;
404
- border-radius: 36px;
405
- }
406
-
407
- .button-module__switch-rounded--active___2Ckga {
408
- }
409
-
410
- .button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
411
- display: none;
412
- }
413
-
414
- /* States */
415
-
416
- .button-module__cancel___1-jYL:hover {
417
- border-color: var(--color-primary);
418
- color: var(--color-primary);
419
- }
420
-
421
- .button-module__confirm___-W92x:hover {
422
- background: var(--color-primary-25);
423
- }
424
-
425
- .button-module__add___1fbPS:hover {
426
- background: var(--color-primary);
427
- border-color: var(--color-primary);
428
- color: var(--color-surface);
429
- }
430
-
431
- /* Variations */
432
-
433
- .button-module__disabled___2Azpu {
434
- pointer-events: none;
435
- opacity: 0.5;
436
- }
437
-
438
- .button-module__full___264Zw {
439
- width: 100%;
440
- }
441
-
442
- .button-module__alt___Z6PWx {
443
- color: var(--color-surface);
444
- border-radius: 20px;
445
- border: 2px var(--color-surface) solid;
446
- padding-left: 30px;
447
- padding-right: 30px;
448
- }
449
-
450
- .button-module__confirm-alt___2Zcqz {
451
- border-color: transparent;
452
- }
453
-
454
- .button-module__cancel-alt___u5EAw {
455
- background: none;
456
- }
457
-
458
- .button-module__save-alt___6iHMF {
459
- border-color: transparent;
460
- }
461
-
462
- /* Add Button */
463
-
464
- .button-module__add-button___1f093 {
465
- min-height: 32px;
466
- }
467
- /* imported from file-input.module.css */
468
-
469
- /** Button */
470
-
471
- .file-input-module__button___2KypN {
472
- display: inline-flex;
473
- background-color: var(--color-surface);
474
- border: var(--border-for-button-as-secondary);
475
- box-shadow: none;
476
- border-radius: var(--border-radius-4);
477
- color: var(--color-solid);
478
- height: var(--height-for-button-as-big);
479
- font-size: var(--font-size-20);
480
- font-weight: var(--font-weight-500);
481
- align-items: center;
482
- transition: background-color var(--transition-linear-80ms);
483
- padding: 0 var(--spacing-m);
484
- }
485
-
486
- .file-input-module__button___2KypN:hover,
487
- .file-input-module__button___2KypN:focus {
488
- cursor: pointer;
489
- background-color: var(--background-color-for-button-when-hovered);
490
- box-shadow: none;
491
- }
492
-
493
- .file-input-module__button___2KypN:active {
494
- box-shadow: var(--shadow-9);
495
- background-color: var(--color-surface);
496
- }
497
+ /* imported from label-range.module.css */
497
498
 
498
- .file-input-module__input___3MP4D {
499
- visibility: hidden;
500
- width: 1px;
501
- height: 1px;
499
+ .label-range-module__label___3Tb0p {
500
+ font-size: 0.9rem;
501
+ font-weight: bold;
502
502
  }
503
503
  /* imported from centered-loading-spinner.module.css */
504
504
 
@@ -556,23 +556,23 @@
556
556
  .set-buttons-module__gap___38Qr0 {
557
557
  padding: 20px;
558
558
  }
559
- /* imported from platform-limits-customers-status.module.css */
559
+ /* imported from platform-limits-customer-groups-status.module.css */
560
560
 
561
- .platform-limits-customers-status-module__status___3rXYM {
561
+ .platform-limits-customer-groups-status-module__status___6099G {
562
562
  min-width: max-content;
563
563
  }
564
- /* imported from platform-limits-customers-combined.module.css */
564
+ /* imported from platform-limits-customer-groups-combined.module.css */
565
565
 
566
- .platform-limits-customers-combined-module__combined___OszDd {
566
+ .platform-limits-customer-groups-combined-module__combined___WjRoI {
567
567
  margin-bottom: var(--spacing-s);
568
568
  }
569
- /* imported from platform-limits-customer-groups-status.module.css */
569
+ /* imported from platform-limits-customers-status.module.css */
570
570
 
571
- .platform-limits-customer-groups-status-module__status___6099G {
571
+ .platform-limits-customers-status-module__status___3rXYM {
572
572
  min-width: max-content;
573
573
  }
574
- /* imported from platform-limits-customer-groups-combined.module.css */
574
+ /* imported from platform-limits-customers-combined.module.css */
575
575
 
576
- .platform-limits-customer-groups-combined-module__combined___WjRoI {
576
+ .platform-limits-customers-combined-module__combined___OszDd {
577
577
  margin-bottom: var(--spacing-s);
578
578
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/experimental-components",
3
- "version": "5.0.2",
3
+ "version": "5.1.0",
4
4
  "description": "",
5
5
  "main": "dist/commercetools-frontend-experimental-components.cjs.js",
6
6
  "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -13,18 +13,18 @@
13
13
  "@babel/core": "^7.21.0",
14
14
  "@babel/runtime-corejs3": "^7.21.0",
15
15
  "@babel/runtime": "^7.21.0",
16
- "@commercetools-frontend/actions-global": "^22.3.0",
17
- "@commercetools-frontend/application-components": "^22.3.0",
18
- "@commercetools-frontend/application-shell-connectors": "^22.3.0",
19
- "@commercetools-frontend/application-shell": "^22.3.0",
20
- "@commercetools-frontend/constants": "^22.3.0",
21
- "@commercetools-frontend/l10n": "^22.3.0",
22
- "@commercetools-frontend/sdk": "^22.3.0",
23
- "@commercetools-frontend/sentry": "^22.3.0",
24
- "@commercetools-frontend/ui-kit": "^16.0.0",
25
- "@commercetools-uikit/design-system": "^16.0.0",
26
- "@commercetools-uikit/select-utils": "^16.0.0",
27
- "@commercetools-uikit/utils": "^16.0.0",
16
+ "@commercetools-frontend/actions-global": "^22.4.0",
17
+ "@commercetools-frontend/application-components": "^22.4.0",
18
+ "@commercetools-frontend/application-shell-connectors": "^22.4.0",
19
+ "@commercetools-frontend/application-shell": "^22.4.0",
20
+ "@commercetools-frontend/constants": "^22.4.0",
21
+ "@commercetools-frontend/l10n": "^22.4.0",
22
+ "@commercetools-frontend/sdk": "^22.4.0",
23
+ "@commercetools-frontend/sentry": "^22.4.0",
24
+ "@commercetools-frontend/ui-kit": "^16.5.0",
25
+ "@commercetools-uikit/design-system": "^16.5.0",
26
+ "@commercetools-uikit/select-utils": "^16.5.0",
27
+ "@commercetools-uikit/utils": "^16.5.0",
28
28
  "@emotion/react": "^11.10.6",
29
29
  "classnames": "2.3.2",
30
30
  "cleave.js": "1.5.10",
@@ -38,9 +38,9 @@
38
38
  "moment-timezone": "0.5.43",
39
39
  "moment": "2.29.4",
40
40
  "omit-deep": "0.3.0",
41
- "omit-empty-es": "1.1.3",
41
+ "omit-empty-es": "1.2.0",
42
42
  "prop-types": "^15.8.1",
43
- "react-textarea-autosize": "8.4.1",
43
+ "react-textarea-autosize": "8.5.2",
44
44
  "reselect": "4.1.8",
45
45
  "tiny-invariant": "1.3.1",
46
46
  "tiny-warning": "1.0.3",
@@ -49,7 +49,7 @@
49
49
  },
50
50
  "devDependencies": {
51
51
  "@apollo/client": "^3.7.10",
52
- "@commercetools-test-data/channel": "^4.11.1",
52
+ "@commercetools-test-data/channel": "^5.0.0",
53
53
  "@commercetools-test-data/commons": "^4.11.1",
54
54
  "@commercetools-test-data/core": "^4.11.1",
55
55
  "@testing-library/react-hooks": "^8.0.1",
@@ -68,8 +68,8 @@
68
68
  "redux": "^4.2.1",
69
69
  "typescript": "^5.1.3",
70
70
  "xhr-mock": "^2.5.1",
71
- "@commercetools-local/test-data": "1.1.0",
72
- "@commercetools-local/test-utils": "1.1.0"
71
+ "@commercetools-local/test-data": "1.1.1",
72
+ "@commercetools-local/test-utils": "1.1.1"
73
73
  },
74
74
  "peerDependencies": {
75
75
  "@apollo/client": "3.x",