@trafilea/afrodita-components 5.0.0-beta.14 → 5.0.0-beta.141

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/build/index.css +3 -1
  2. package/build/index.d.ts +853 -70
  3. package/build/index.esm.css +3 -1
  4. package/build/index.esm.js +6318 -3346
  5. package/build/index.esm.js.map +1 -1
  6. package/build/index.js +6333 -3346
  7. package/build/index.js.map +1 -1
  8. package/build/theme/revel.theme.d.ts +525 -0
  9. package/build/theme/revel.theme.js +845 -0
  10. package/build/theme/shapermint.theme.d.ts +109 -0
  11. package/build/theme/shapermint.theme.js +117 -1
  12. package/build/theme/truekind.theme.d.ts +109 -0
  13. package/build/theme/truekind.theme.js +108 -0
  14. package/package.json +3 -1
package/build/theme/shapermint.theme.d.ts CHANGED
@@ -138,6 +138,12 @@ declare type ThemeComponent = {
138
138
  lineHeight: string;
139
139
  border: string;
140
140
  boxShadow: string;
141
+ errorBorder: string;
142
+ };
143
+ inputPlaceholder: {
144
+ fontSize: string;
145
+ padding: string;
146
+ focusBorder: string;
141
147
  };
142
148
  inputCustom: {
143
149
  button: {
@@ -170,6 +176,12 @@ declare type ThemeComponent = {
170
176
  border: string;
171
177
  color: string;
172
178
  };
179
+ noStock: {
180
+ fontWeight: number;
181
+ background: string;
182
+ border: string;
183
+ color: string;
184
+ };
173
185
  disabled: {
174
186
  border: string;
175
187
  };
@@ -227,6 +239,8 @@ declare type ThemeComponent = {
227
239
  radio: {
228
240
  borderColor: string;
229
241
  background: string;
242
+ textSize: string;
243
+ lineHeight: string;
230
244
  size: {
231
245
  small: {
232
246
  borderWidth: string;
@@ -255,6 +269,7 @@ declare type ThemeComponent = {
255
269
  };
256
270
  };
257
271
  label: {
272
+ color: string;
258
273
  fontSize: {
259
274
  small: string;
260
275
  medium: string;
@@ -368,6 +383,7 @@ declare type ThemeComponent = {
368
383
  options: {
369
384
  borderColor: string;
370
385
  color: string;
386
+ borderRadius: string;
371
387
  };
372
388
  };
373
389
  modal: {
@@ -381,6 +397,98 @@ declare type ThemeComponent = {
381
397
  selectedContrast: string;
382
398
  tagColor: string;
383
399
  };
400
+ slideNavigation: {
401
+ slideDots: {
402
+ unselectedDotColor: string;
403
+ selectedDotColor: string;
404
+ dotsOpacity: number;
405
+ };
406
+ };
407
+ beforeAfter: {
408
+ size: {
409
+ small: {
410
+ image: {
411
+ minHeight: string;
412
+ minWidth: string;
413
+ mobile: {
414
+ minHeight: string;
415
+ minWidth: string;
416
+ };
417
+ };
418
+ imageContainer: {
419
+ maxWidth: string;
420
+ padding: string;
421
+ mobile: {
422
+ maxWidth: string;
423
+ };
424
+ };
425
+ userInfoText: {
426
+ fontSize: string;
427
+ mobile: {
428
+ fontSize: string;
429
+ };
430
+ };
431
+ };
432
+ medium: {
433
+ image: {
434
+ minHeight: string;
435
+ minWidth: string;
436
+ mobile: {
437
+ minHeight: string;
438
+ minWidth: string;
439
+ };
440
+ };
441
+ imageContainer: {
442
+ maxWidth: string;
443
+ padding: string;
444
+ mobile: {
445
+ maxWidth: string;
446
+ };
447
+ };
448
+ userInfoText: {
449
+ fontSize: string;
450
+ mobile: {
451
+ fontSize: string;
452
+ };
453
+ };
454
+ };
455
+ large: {
456
+ image: {
457
+ minHeight: string;
458
+ minWidth: string;
459
+ mobile: {
460
+ minHeight: string;
461
+ minWidth: string;
462
+ };
463
+ };
464
+ imageContainer: {
465
+ maxWidth: string;
466
+ padding: string;
467
+ mobile: {
468
+ maxWidth: string;
469
+ };
470
+ };
471
+ userInfoText: {
472
+ fontSize: string;
473
+ mobile: {
474
+ fontSize: string;
475
+ };
476
+ };
477
+ };
478
+ };
479
+ };
480
+ expressCheckout: {
481
+ fontFamily: string;
482
+ };
483
+ copyrightText: {
484
+ fontSize: string;
485
+ fontWeight: number;
486
+ lineHeight: string;
487
+ color: string;
488
+ };
489
+ textButton: {
490
+ fontWeight: number;
491
+ };
384
492
  };
385
493
  declare type ThemeTypography = {
386
494
  config: {
@@ -407,6 +515,7 @@ declare type ThemeAssets = {
407
515
  images: {
408
516
  favicon: string;
409
517
  logo: string;
518
+ logoMobile?: string;
410
519
  };
411
520
  [key: string]: any;
412
521
  };
package/build/theme/shapermint.theme.js CHANGED
@@ -120,6 +120,14 @@ var shapermint = {
120
120
  contrast: '--colors-shades-700-color',
121
121
  },
122
122
  } }),
123
+ wine: {
124
+ color: '#882A2B',
125
+ contrast: '--colors-shades-white-color',
126
+ soft: {
127
+ color: '#DBBFBF',
128
+ contrast: '--colors-text-color',
129
+ },
130
+ },
123
131
  creamy: {
124
132
  color: '#FFE9D8',
125
133
  contrast: '--colors-text-color',
@@ -234,6 +242,12 @@ var shapermint = {
234
242
  lineHeight: '1.5rem',
235
243
  border: '0.063rem solid var(--colors-shades-200-color)',
236
244
  boxShadow: 'none',
245
+ errorBorder: '0.09375rem solid #d3373c',
246
+ },
247
+ inputPlaceholder: {
248
+ fontSize: '0.875rem',
249
+ padding: '1.125rem 0.9375rem 0 0.9375rem',
250
+ focusBorder: '0.09375rem solid #1990c6',
237
251
  },
238
252
  inputCustom: {
239
253
  button: {
@@ -266,6 +280,12 @@ var shapermint = {
266
280
  border: 'none',
267
281
  color: '--colors-shades-white-color',
268
282
  },
283
+ noStock: {
284
+ fontWeight: 600,
285
+ background: 'transparent',
286
+ border: '1px solid #3a3a3a4d',
287
+ color: '#3a3a3a4d',
288
+ },
269
289
  disabled: {
270
290
  border: 'none',
271
291
  },
@@ -323,6 +343,8 @@ var shapermint = {
323
343
  radio: {
324
344
  borderColor: '--colors-shades-700-color',
325
345
  background: '--colors-shades-white-color',
346
+ textSize: '16px',
347
+ lineHeight: 'normal',
326
348
  size: {
327
349
  large: {
328
350
  borderWidth: '0.094rem',
@@ -351,6 +373,7 @@ var shapermint = {
351
373
  },
352
374
  },
353
375
  label: {
376
+ color: '--colors-pallete-secondary-color',
354
377
  fontSize: {
355
378
  small: '0.75rem',
356
379
  medium: '0.75rem',
@@ -464,6 +487,7 @@ var shapermint = {
464
487
  options: {
465
488
  borderColor: '--colors-shades-700-color',
466
489
  color: '--colors-shades-700-color',
490
+ borderRadius: '0.5rem',
467
491
  },
468
492
  },
469
493
  modal: {
@@ -477,6 +501,98 @@ var shapermint = {
477
501
  selectedContrast: '--colors-semantic-positive-contrast',
478
502
  tagColor: '--colors-semantic-attention-color',
479
503
  },
504
+ slideNavigation: {
505
+ slideDots: {
506
+ unselectedDotColor: '--colors-shades-700-color',
507
+ selectedDotColor: '--colors-shades-white-color',
508
+ dotsOpacity: 0.6,
509
+ },
510
+ },
511
+ beforeAfter: {
512
+ size: {
513
+ small: {
514
+ image: {
515
+ minHeight: 'auto',
516
+ minWidth: '92px',
517
+ mobile: {
518
+ minHeight: '138px',
519
+ minWidth: '128px',
520
+ },
521
+ },
522
+ imageContainer: {
523
+ maxWidth: '214px',
524
+ padding: '12px',
525
+ mobile: {
526
+ maxWidth: '286px',
527
+ },
528
+ },
529
+ userInfoText: {
530
+ fontSize: '12px',
531
+ mobile: {
532
+ fontSize: '12px',
533
+ },
534
+ },
535
+ },
536
+ medium: {
537
+ image: {
538
+ minHeight: '200px',
539
+ minWidth: '187px',
540
+ mobile: {
541
+ minHeight: '157px',
542
+ minWidth: '150px',
543
+ },
544
+ },
545
+ imageContainer: {
546
+ maxWidth: '427px',
547
+ padding: '18px',
548
+ mobile: {
549
+ maxWidth: '342px',
550
+ },
551
+ },
552
+ userInfoText: {
553
+ fontSize: '18px',
554
+ mobile: {
555
+ fontSize: '14px',
556
+ },
557
+ },
558
+ },
559
+ large: {
560
+ image: {
561
+ minHeight: '200px',
562
+ minWidth: '187px',
563
+ mobile: {
564
+ minHeight: '157px',
565
+ minWidth: '150px',
566
+ },
567
+ },
568
+ imageContainer: {
569
+ maxWidth: '427px',
570
+ padding: '18px',
571
+ mobile: {
572
+ maxWidth: '342px',
573
+ },
574
+ },
575
+ userInfoText: {
576
+ fontSize: '18px',
577
+ mobile: {
578
+ fontSize: '14px',
579
+ },
580
+ },
581
+ },
582
+ },
583
+ },
584
+ expressCheckout: {
585
+ fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,Arial, sans-serif',
586
+ },
587
+ copyrightText: {
588
+ fontSize: '16px',
589
+ fontWeight: 400,
590
+ lineHeight: '24px',
591
+ color: '--colors-pallete-secondary-color',
592
+ },
593
+ textButton: {
594
+ fontWeight: 500,
595
+ },
480
596
  },
481
597
  typography: {
482
598
  config: {
@@ -687,7 +803,7 @@ var shapermint = {
687
803
  assets: {
688
804
  images: {
689
805
  favicon: 'https://cdn.shopify.com/s/files/1/2679/8624/files/shapermint_favicon-128x128.png',
690
- logo: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
806
+ logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
691
807
  },
692
808
  },
693
809
  };
package/build/theme/truekind.theme.d.ts CHANGED
@@ -138,6 +138,12 @@ declare type ThemeComponent = {
138
138
  lineHeight: string;
139
139
  border: string;
140
140
  boxShadow: string;
141
+ errorBorder: string;
142
+ };
143
+ inputPlaceholder: {
144
+ fontSize: string;
145
+ padding: string;
146
+ focusBorder: string;
141
147
  };
142
148
  inputCustom: {
143
149
  button: {
@@ -170,6 +176,12 @@ declare type ThemeComponent = {
170
176
  border: string;
171
177
  color: string;
172
178
  };
179
+ noStock: {
180
+ fontWeight: number;
181
+ background: string;
182
+ border: string;
183
+ color: string;
184
+ };
173
185
  disabled: {
174
186
  border: string;
175
187
  };
@@ -227,6 +239,8 @@ declare type ThemeComponent = {
227
239
  radio: {
228
240
  borderColor: string;
229
241
  background: string;
242
+ textSize: string;
243
+ lineHeight: string;
230
244
  size: {
231
245
  small: {
232
246
  borderWidth: string;
@@ -255,6 +269,7 @@ declare type ThemeComponent = {
255
269
  };
256
270
  };
257
271
  label: {
272
+ color: string;
258
273
  fontSize: {
259
274
  small: string;
260
275
  medium: string;
@@ -368,6 +383,7 @@ declare type ThemeComponent = {
368
383
  options: {
369
384
  borderColor: string;
370
385
  color: string;
386
+ borderRadius: string;
371
387
  };
372
388
  };
373
389
  modal: {
@@ -381,6 +397,98 @@ declare type ThemeComponent = {
381
397
  selectedContrast: string;
382
398
  tagColor: string;
383
399
  };
400
+ slideNavigation: {
401
+ slideDots: {
402
+ unselectedDotColor: string;
403
+ selectedDotColor: string;
404
+ dotsOpacity: number;
405
+ };
406
+ };
407
+ beforeAfter: {
408
+ size: {
409
+ small: {
410
+ image: {
411
+ minHeight: string;
412
+ minWidth: string;
413
+ mobile: {
414
+ minHeight: string;
415
+ minWidth: string;
416
+ };
417
+ };
418
+ imageContainer: {
419
+ maxWidth: string;
420
+ padding: string;
421
+ mobile: {
422
+ maxWidth: string;
423
+ };
424
+ };
425
+ userInfoText: {
426
+ fontSize: string;
427
+ mobile: {
428
+ fontSize: string;
429
+ };
430
+ };
431
+ };
432
+ medium: {
433
+ image: {
434
+ minHeight: string;
435
+ minWidth: string;
436
+ mobile: {
437
+ minHeight: string;
438
+ minWidth: string;
439
+ };
440
+ };
441
+ imageContainer: {
442
+ maxWidth: string;
443
+ padding: string;
444
+ mobile: {
445
+ maxWidth: string;
446
+ };
447
+ };
448
+ userInfoText: {
449
+ fontSize: string;
450
+ mobile: {
451
+ fontSize: string;
452
+ };
453
+ };
454
+ };
455
+ large: {
456
+ image: {
457
+ minHeight: string;
458
+ minWidth: string;
459
+ mobile: {
460
+ minHeight: string;
461
+ minWidth: string;
462
+ };
463
+ };
464
+ imageContainer: {
465
+ maxWidth: string;
466
+ padding: string;
467
+ mobile: {
468
+ maxWidth: string;
469
+ };
470
+ };
471
+ userInfoText: {
472
+ fontSize: string;
473
+ mobile: {
474
+ fontSize: string;
475
+ };
476
+ };
477
+ };
478
+ };
479
+ };
480
+ expressCheckout: {
481
+ fontFamily: string;
482
+ };
483
+ copyrightText: {
484
+ fontSize: string;
485
+ fontWeight: number;
486
+ lineHeight: string;
487
+ color: string;
488
+ };
489
+ textButton: {
490
+ fontWeight: number;
491
+ };
384
492
  };
385
493
  declare type ThemeTypography = {
386
494
  config: {
@@ -407,6 +515,7 @@ declare type ThemeAssets = {
407
515
  images: {
408
516
  favicon: string;
409
517
  logo: string;
518
+ logoMobile?: string;
410
519
  };
411
520
  [key: string]: any;
412
521
  };
package/build/theme/truekind.theme.js CHANGED
@@ -315,6 +315,12 @@ var truekind = {
315
315
  lineHeight: '1.5rem',
316
316
  border: '0.063rem solid #BBBBBB',
317
317
  boxShadow: '0 0 0 0.25rem #D9EEFF',
318
+ errorBorder: '0.09375rem solid #d3373c',
319
+ },
320
+ inputPlaceholder: {
321
+ fontSize: '0.875rem',
322
+ padding: '1.125rem 0.9375rem 0 0.9375rem',
323
+ focusBorder: '0.09375rem solid #1990c6',
318
324
  },
319
325
  inputCustom: {
320
326
  button: {
@@ -347,6 +353,12 @@ var truekind = {
347
353
  border: 'none',
348
354
  color: '#FFFFFF',
349
355
  },
356
+ noStock: {
357
+ fontWeight: 600,
358
+ background: 'transparent',
359
+ border: '1px solid #3a3a3a4d',
360
+ color: '#3a3a3a4d',
361
+ },
350
362
  disabled: {
351
363
  border: '0.063rem solid #E5E5E5',
352
364
  },
@@ -404,6 +416,8 @@ var truekind = {
404
416
  radio: {
405
417
  borderColor: '#686872',
406
418
  background: '#FFFFFF',
419
+ textSize: '16px',
420
+ lineHeight: 'normal',
407
421
  size: {
408
422
  large: {
409
423
  borderWidth: '0.094rem',
@@ -432,6 +446,7 @@ var truekind = {
432
446
  },
433
447
  },
434
448
  label: {
449
+ color: '--colors-pallete-secondary-color',
435
450
  fontSize: {
436
451
  small: '0.625rem',
437
452
  medium: '0.75rem',
@@ -545,6 +560,7 @@ var truekind = {
545
560
  options: {
546
561
  borderColor: '#8BBEEA',
547
562
  color: '#292929',
563
+ borderRadius: '0.5rem',
548
564
  },
549
565
  },
550
566
  modal: {
@@ -558,6 +574,98 @@ var truekind = {
558
574
  selectedContrast: '--colors-semantic-positive-contrast',
559
575
  tagColor: '--colors-semantic-attention-color',
560
576
  },
577
+ slideNavigation: {
578
+ slideDots: {
579
+ unselectedDotColor: '--colors-shades-700-color:',
580
+ selectedDotColor: '--colors-shades-white-color',
581
+ dotsOpacity: 0.6,
582
+ },
583
+ },
584
+ beforeAfter: {
585
+ size: {
586
+ small: {
587
+ image: {
588
+ minHeight: 'auto',
589
+ minWidth: '92px',
590
+ mobile: {
591
+ minHeight: '138px',
592
+ minWidth: '128px',
593
+ },
594
+ },
595
+ imageContainer: {
596
+ maxWidth: '214px',
597
+ padding: '12px',
598
+ mobile: {
599
+ maxWidth: '286px',
600
+ },
601
+ },
602
+ userInfoText: {
603
+ fontSize: '12px',
604
+ mobile: {
605
+ fontSize: '12px',
606
+ },
607
+ },
608
+ },
609
+ medium: {
610
+ image: {
611
+ minHeight: '200px',
612
+ minWidth: '187px',
613
+ mobile: {
614
+ minHeight: '157px',
615
+ minWidth: '150px',
616
+ },
617
+ },
618
+ imageContainer: {
619
+ maxWidth: '427px',
620
+ padding: '18px',
621
+ mobile: {
622
+ maxWidth: '342px',
623
+ },
624
+ },
625
+ userInfoText: {
626
+ fontSize: '18px',
627
+ mobile: {
628
+ fontSize: '14px',
629
+ },
630
+ },
631
+ },
632
+ large: {
633
+ image: {
634
+ minHeight: '200px',
635
+ minWidth: '187px',
636
+ mobile: {
637
+ minHeight: '157px',
638
+ minWidth: '150px',
639
+ },
640
+ },
641
+ imageContainer: {
642
+ maxWidth: '427px',
643
+ padding: '18px',
644
+ mobile: {
645
+ maxWidth: '342px',
646
+ },
647
+ },
648
+ userInfoText: {
649
+ fontSize: '18px',
650
+ mobile: {
651
+ fontSize: '14px',
652
+ },
653
+ },
654
+ },
655
+ },
656
+ },
657
+ expressCheckout: {
658
+ fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,Arial, sans-serif',
659
+ },
660
+ copyrightText: {
661
+ fontSize: '16px',
662
+ fontWeight: 400,
663
+ lineHeight: '24px',
664
+ color: '--colors-pallete-secondary-color',
665
+ },
666
+ textButton: {
667
+ fontWeight: 500,
668
+ },
561
669
  },
562
670
  fonts: {
563
671
  url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/fonts/truekind',
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Trafilea's Design System",
4
4
  "author": "Trafilea",
5
5
  "repository": "https://github.com/trafilea/afrodita-components",
6
- "version": "5.0.0-beta.14",
6
+ "version": "5.0.0-beta.141",
7
7
  "private": false,
8
8
  "main": "build/index.js",
9
9
  "style": "build/index.css",
@@ -20,6 +20,7 @@
20
20
  "@ribeirolabs/events": "3.0.0",
21
21
  "facepaint": "^1.2.1",
22
22
  "html-react-parser": "1.4.8",
23
+ "react-inner-image-zoom": "^3.0.2",
23
24
  "react-swipeable": "6.2.0",
24
25
  "typescript": "^4.3.5"
25
26
  },
@@ -85,6 +86,7 @@
85
86
  "@types/node": "^12.20.17",
86
87
  "@types/react": "^17.0.15",
87
88
  "@types/react-dom": "^17.0.9",
89
+ "@types/react-inner-image-zoom": "^3.0.0",
88
90
  "@types/react-slick": "^0.23.7",
89
91
  "chromatic": "^5.9.2",
90
92
  "eslint": "^7.31.0",