@pareto-engineering/design-system 4.9.2 → 4.10.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.
Files changed (31) hide show
  1. package/dist/cjs/a/AreaChart/AreaChart.js +176 -0
  2. package/dist/cjs/a/AreaChart/index.js +13 -0
  3. package/dist/cjs/a/AreaChart/styles.scss +89 -0
  4. package/dist/cjs/a/XMLEditor/XMLEditor.js +1 -1
  5. package/dist/cjs/a/index.js +8 -1
  6. package/dist/cjs/b/Button/styles.scss +1 -0
  7. package/dist/cjs/g/FormBuilder/FormBuilder.js +3 -3
  8. package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js +38 -38
  9. package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js +34 -8
  10. package/dist/es/a/AreaChart/AreaChart.js +163 -0
  11. package/dist/es/a/AreaChart/index.js +1 -0
  12. package/dist/es/a/AreaChart/styles.scss +89 -0
  13. package/dist/es/a/XMLEditor/XMLEditor.js +2 -2
  14. package/dist/es/a/index.js +2 -1
  15. package/dist/es/b/Button/styles.scss +1 -0
  16. package/dist/es/g/FormBuilder/FormBuilder.js +3 -3
  17. package/dist/es/g/FormBuilder/common/Renderer/Renderer.js +39 -39
  18. package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js +35 -9
  19. package/package.json +4 -3
  20. package/src/stories/a/AreaChart.stories.jsx +118 -0
  21. package/src/ui/a/AreaChart/AreaChart.jsx +185 -0
  22. package/src/ui/a/AreaChart/index.js +1 -0
  23. package/src/ui/a/AreaChart/styles.scss +89 -0
  24. package/src/ui/a/XMLEditor/XMLEditor.jsx +4 -1
  25. package/src/ui/a/index.js +1 -0
  26. package/src/ui/b/Button/styles.scss +1 -0
  27. package/src/ui/g/FormBuilder/FormBuilder.jsx +2 -2
  28. package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx +40 -39
  29. package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx +41 -10
  30. package/tests/__snapshots__/Storyshots.test.js.snap +501 -1
  31. package/tests/test-setup.js +11 -0
package/tests/__snapshots__/Storyshots.test.js.snap CHANGED
@@ -451,6 +451,506 @@ exports[`Storyshots Example/Page Logged Out 1`] = `
451
451
 
452
452
  exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
453
453
 
454
+ exports[`Storyshots a/AreaChart Default 1`] = `
455
+ <div
456
+ style={
457
+ {
458
+ "height": "100%",
459
+ "width": "100%",
460
+ }
461
+ }
462
+ >
463
+ <div
464
+ className="base area-chart"
465
+ >
466
+ <h3>
467
+ Approval rate over time
468
+ </h3>
469
+ <div
470
+ className="custom-legend"
471
+ >
472
+ <div
473
+ className="item"
474
+ >
475
+ <span
476
+ className="line"
477
+ style={
478
+ {
479
+ "backgroundColor": "purple",
480
+ }
481
+ }
482
+ />
483
+ <span
484
+ className="text"
485
+ >
486
+ Average
487
+ </span>
488
+ </div>
489
+ <div
490
+ className="item"
491
+ >
492
+ <span
493
+ className="line"
494
+ style={
495
+ {
496
+ "backgroundColor": "green",
497
+ }
498
+ }
499
+ />
500
+ <span
501
+ className="text"
502
+ >
503
+ Best
504
+ </span>
505
+ </div>
506
+ <div
507
+ className="item"
508
+ >
509
+ <span
510
+ className="line"
511
+ style={
512
+ {
513
+ "backgroundColor": "orange",
514
+ }
515
+ }
516
+ />
517
+ <span
518
+ className="text"
519
+ >
520
+ Worst
521
+ </span>
522
+ </div>
523
+ </div>
524
+ <div
525
+ style={
526
+ {
527
+ "height": 400,
528
+ "width": "100%",
529
+ }
530
+ }
531
+ />
532
+ </div>
533
+ </div>
534
+ `;
535
+
536
+ exports[`Storyshots a/AreaChart Filled 1`] = `
537
+ <div
538
+ style={
539
+ {
540
+ "height": "100%",
541
+ "width": "100%",
542
+ }
543
+ }
544
+ >
545
+ <div
546
+ className="base area-chart"
547
+ >
548
+ <h3>
549
+ Approval rate over time
550
+ </h3>
551
+ <div
552
+ className="custom-legend"
553
+ >
554
+ <div
555
+ className="item"
556
+ >
557
+ <span
558
+ className="line"
559
+ style={
560
+ {
561
+ "backgroundColor": "purple",
562
+ }
563
+ }
564
+ />
565
+ <span
566
+ className="text"
567
+ >
568
+ Average
569
+ </span>
570
+ </div>
571
+ <div
572
+ className="item"
573
+ >
574
+ <span
575
+ className="line"
576
+ style={
577
+ {
578
+ "backgroundColor": "green",
579
+ }
580
+ }
581
+ />
582
+ <span
583
+ className="text"
584
+ >
585
+ Best
586
+ </span>
587
+ </div>
588
+ <div
589
+ className="item"
590
+ >
591
+ <span
592
+ className="line"
593
+ style={
594
+ {
595
+ "backgroundColor": "orange",
596
+ }
597
+ }
598
+ />
599
+ <span
600
+ className="text"
601
+ >
602
+ Worst
603
+ </span>
604
+ </div>
605
+ </div>
606
+ <div
607
+ style={
608
+ {
609
+ "height": 400,
610
+ "width": "100%",
611
+ }
612
+ }
613
+ />
614
+ </div>
615
+ </div>
616
+ `;
617
+
618
+ exports[`Storyshots a/AreaChart Side By Side 1`] = `
619
+ <div
620
+ style={
621
+ {
622
+ "display": "flex",
623
+ "gap": "20px",
624
+ }
625
+ }
626
+ >
627
+ <div
628
+ style={
629
+ {
630
+ "flex": 1,
631
+ }
632
+ }
633
+ >
634
+ <div
635
+ className="base area-chart"
636
+ >
637
+ <h3>
638
+ Approval rate over time
639
+ </h3>
640
+ <div
641
+ className="custom-legend"
642
+ >
643
+ <div
644
+ className="item"
645
+ >
646
+ <span
647
+ className="line"
648
+ style={
649
+ {
650
+ "backgroundColor": "purple",
651
+ }
652
+ }
653
+ />
654
+ <span
655
+ className="text"
656
+ >
657
+ Average
658
+ </span>
659
+ </div>
660
+ <div
661
+ className="item"
662
+ >
663
+ <span
664
+ className="line"
665
+ style={
666
+ {
667
+ "backgroundColor": "green",
668
+ }
669
+ }
670
+ />
671
+ <span
672
+ className="text"
673
+ >
674
+ Best
675
+ </span>
676
+ </div>
677
+ <div
678
+ className="item"
679
+ >
680
+ <span
681
+ className="line"
682
+ style={
683
+ {
684
+ "backgroundColor": "orange",
685
+ }
686
+ }
687
+ />
688
+ <span
689
+ className="text"
690
+ >
691
+ Worst
692
+ </span>
693
+ </div>
694
+ </div>
695
+ <div
696
+ style={
697
+ {
698
+ "height": 400,
699
+ "width": "100%",
700
+ }
701
+ }
702
+ />
703
+ </div>
704
+ </div>
705
+ <div
706
+ style={
707
+ {
708
+ "flex": 1,
709
+ }
710
+ }
711
+ >
712
+ <div
713
+ className="base area-chart"
714
+ >
715
+ <h3>
716
+ Submission rate over time
717
+ </h3>
718
+ <div
719
+ className="custom-legend"
720
+ >
721
+ <div
722
+ className="item"
723
+ >
724
+ <span
725
+ className="line"
726
+ style={
727
+ {
728
+ "backgroundColor": "purple",
729
+ }
730
+ }
731
+ />
732
+ <span
733
+ className="text"
734
+ >
735
+ Average
736
+ </span>
737
+ </div>
738
+ <div
739
+ className="item"
740
+ >
741
+ <span
742
+ className="line"
743
+ style={
744
+ {
745
+ "backgroundColor": "green",
746
+ }
747
+ }
748
+ />
749
+ <span
750
+ className="text"
751
+ >
752
+ Best
753
+ </span>
754
+ </div>
755
+ <div
756
+ className="item"
757
+ >
758
+ <span
759
+ className="line"
760
+ style={
761
+ {
762
+ "backgroundColor": "orange",
763
+ }
764
+ }
765
+ />
766
+ <span
767
+ className="text"
768
+ >
769
+ Worst
770
+ </span>
771
+ </div>
772
+ </div>
773
+ <div
774
+ style={
775
+ {
776
+ "height": 400,
777
+ "width": "100%",
778
+ }
779
+ }
780
+ />
781
+ </div>
782
+ </div>
783
+ </div>
784
+ `;
785
+
786
+ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
787
+ <div
788
+ style={
789
+ {
790
+ "display": "flex",
791
+ "gap": "20px",
792
+ }
793
+ }
794
+ >
795
+ <div
796
+ style={
797
+ {
798
+ "flex": 1,
799
+ }
800
+ }
801
+ >
802
+ <div
803
+ className="base area-chart"
804
+ >
805
+ <h3>
806
+ Approval rate over time
807
+ </h3>
808
+ <div
809
+ className="custom-legend"
810
+ >
811
+ <div
812
+ className="item"
813
+ >
814
+ <span
815
+ className="line"
816
+ style={
817
+ {
818
+ "backgroundColor": "purple",
819
+ }
820
+ }
821
+ />
822
+ <span
823
+ className="text"
824
+ >
825
+ Average
826
+ </span>
827
+ </div>
828
+ <div
829
+ className="item"
830
+ >
831
+ <span
832
+ className="line"
833
+ style={
834
+ {
835
+ "backgroundColor": "green",
836
+ }
837
+ }
838
+ />
839
+ <span
840
+ className="text"
841
+ >
842
+ Best
843
+ </span>
844
+ </div>
845
+ <div
846
+ className="item"
847
+ >
848
+ <span
849
+ className="line"
850
+ style={
851
+ {
852
+ "backgroundColor": "orange",
853
+ }
854
+ }
855
+ />
856
+ <span
857
+ className="text"
858
+ >
859
+ Worst
860
+ </span>
861
+ </div>
862
+ </div>
863
+ <div
864
+ style={
865
+ {
866
+ "height": 400,
867
+ "width": "100%",
868
+ }
869
+ }
870
+ />
871
+ </div>
872
+ </div>
873
+ <div
874
+ style={
875
+ {
876
+ "flex": 1,
877
+ }
878
+ }
879
+ >
880
+ <div
881
+ className="base area-chart"
882
+ >
883
+ <h3>
884
+ Submission rate over time
885
+ </h3>
886
+ <div
887
+ className="custom-legend"
888
+ >
889
+ <div
890
+ className="item"
891
+ >
892
+ <span
893
+ className="line"
894
+ style={
895
+ {
896
+ "backgroundColor": "purple",
897
+ }
898
+ }
899
+ />
900
+ <span
901
+ className="text"
902
+ >
903
+ Average
904
+ </span>
905
+ </div>
906
+ <div
907
+ className="item"
908
+ >
909
+ <span
910
+ className="line"
911
+ style={
912
+ {
913
+ "backgroundColor": "green",
914
+ }
915
+ }
916
+ />
917
+ <span
918
+ className="text"
919
+ >
920
+ Best
921
+ </span>
922
+ </div>
923
+ <div
924
+ className="item"
925
+ >
926
+ <span
927
+ className="line"
928
+ style={
929
+ {
930
+ "backgroundColor": "orange",
931
+ }
932
+ }
933
+ />
934
+ <span
935
+ className="text"
936
+ >
937
+ Worst
938
+ </span>
939
+ </div>
940
+ </div>
941
+ <div
942
+ style={
943
+ {
944
+ "height": 400,
945
+ "width": "100%",
946
+ }
947
+ }
948
+ />
949
+ </div>
950
+ </div>
951
+ </div>
952
+ `;
953
+
454
954
  exports[`Storyshots a/BlurOverlay Base 1`] = `
455
955
  <div
456
956
  className="base blur-overlay modifierActive"
@@ -11916,7 +12416,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
11916
12416
  className="base timestamp"
11917
12417
  onClick={[Function]}
11918
12418
  >
11919
- about 2 years ago
12419
+ over 2 years ago
11920
12420
  </p>
11921
12421
  `;
11922
12422
 
package/tests/test-setup.js CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react'
1
2
  import MockResizeObserver from './mockResizeObserver'
2
3
 
3
4
  const noop = () => {}
@@ -5,3 +6,13 @@ const emptyDirFunc = () => ({})
5
6
  global.ResizeObserver = MockResizeObserver
6
7
  Object.defineProperty(window, 'scrollTo', { value: noop, writable: true })
7
8
  Object.defineProperty(window, 'matchMedia', { value: emptyDirFunc, writable: true })
9
+
10
+ jest.mock('recharts', () => {
11
+ const OriginalRecharts = jest.requireActual('recharts')
12
+ return {
13
+ ...OriginalRecharts,
14
+ ResponsiveContainer: ({ children }) => (
15
+ <div style={{ width: "100%", height: 400 }}>{children}</div>
16
+ ),
17
+ }
18
+ })