@pareto-engineering/design-system 5.2.0 → 5.2.1

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 (32) hide show
  1. package/dist/cjs/a/Charts/AreaChart/AreaChart.js +1 -0
  2. package/dist/cjs/a/Charts/BarChart/BarChart.js +1 -0
  3. package/dist/cjs/a/Charts/Common/CustomLegend/CustomLegend.js +6 -2
  4. package/dist/cjs/a/Charts/Common/CustomLegend/styles.scss +10 -2
  5. package/dist/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js +44 -12
  6. package/dist/cjs/a/Charts/Common/CustomTooltipContent/styles.scss +4 -0
  7. package/dist/cjs/a/Charts/PieChart/PieChart.js +21 -3
  8. package/dist/cjs/a/Charts/PieChart/styles.scss +88 -0
  9. package/dist/cjs/a/HamburgerButton/styles.scss +151 -9
  10. package/dist/cjs/a/XMLEditor/XMLEditor.js +4 -1
  11. package/dist/es/a/Charts/AreaChart/AreaChart.js +1 -0
  12. package/dist/es/a/Charts/BarChart/BarChart.js +1 -0
  13. package/dist/es/a/Charts/Common/CustomLegend/CustomLegend.js +6 -2
  14. package/dist/es/a/Charts/Common/CustomLegend/styles.scss +10 -2
  15. package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js +44 -12
  16. package/dist/es/a/Charts/Common/CustomTooltipContent/styles.scss +4 -0
  17. package/dist/es/a/Charts/PieChart/PieChart.js +21 -3
  18. package/dist/es/a/Charts/PieChart/styles.scss +88 -0
  19. package/dist/es/a/HamburgerButton/styles.scss +151 -9
  20. package/dist/es/a/XMLEditor/XMLEditor.js +6 -3
  21. package/package.json +6 -5
  22. package/src/ui/a/Charts/AreaChart/AreaChart.jsx +1 -0
  23. package/src/ui/a/Charts/BarChart/BarChart.jsx +1 -0
  24. package/src/ui/a/Charts/Common/CustomLegend/CustomLegend.jsx +11 -3
  25. package/src/ui/a/Charts/Common/CustomLegend/styles.scss +10 -2
  26. package/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx +42 -5
  27. package/src/ui/a/Charts/Common/CustomTooltipContent/styles.scss +4 -0
  28. package/src/ui/a/Charts/PieChart/PieChart.jsx +19 -2
  29. package/src/ui/a/Charts/PieChart/styles.scss +88 -0
  30. package/src/ui/a/HamburgerButton/styles.scss +151 -9
  31. package/src/ui/a/XMLEditor/XMLEditor.jsx +15 -2
  32. package/tests/__snapshots__/Storyshots.test.js.snap +426 -159
package/tests/__snapshots__/Storyshots.test.js.snap CHANGED
@@ -591,9 +591,13 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
591
591
  Average
592
592
  </span>
593
593
  </div>
594
- <span
595
- className="sub-title"
596
- />
594
+ <div
595
+ className="sub-title-percentage-container"
596
+ >
597
+ <span
598
+ className="sub-title"
599
+ />
600
+ </div>
597
601
  </div>
598
602
  <div
599
603
  className="item"
@@ -615,9 +619,13 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
615
619
  Best
616
620
  </span>
617
621
  </div>
618
- <span
619
- className="sub-title"
620
- />
622
+ <div
623
+ className="sub-title-percentage-container"
624
+ >
625
+ <span
626
+ className="sub-title"
627
+ />
628
+ </div>
621
629
  </div>
622
630
  <div
623
631
  className="item"
@@ -639,9 +647,13 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
639
647
  Worst
640
648
  </span>
641
649
  </div>
642
- <span
643
- className="sub-title"
644
- />
650
+ <div
651
+ className="sub-title-percentage-container"
652
+ >
653
+ <span
654
+ className="sub-title"
655
+ />
656
+ </div>
645
657
  </div>
646
658
  </div>
647
659
  <div
@@ -775,9 +787,13 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
775
787
  Average
776
788
  </span>
777
789
  </div>
778
- <span
779
- className="sub-title"
780
- />
790
+ <div
791
+ className="sub-title-percentage-container"
792
+ >
793
+ <span
794
+ className="sub-title"
795
+ />
796
+ </div>
781
797
  </div>
782
798
  <div
783
799
  className="item"
@@ -799,9 +815,13 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
799
815
  Best
800
816
  </span>
801
817
  </div>
802
- <span
803
- className="sub-title"
804
- />
818
+ <div
819
+ className="sub-title-percentage-container"
820
+ >
821
+ <span
822
+ className="sub-title"
823
+ />
824
+ </div>
805
825
  </div>
806
826
  <div
807
827
  className="item"
@@ -823,9 +843,13 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
823
843
  Worst
824
844
  </span>
825
845
  </div>
826
- <span
827
- className="sub-title"
828
- />
846
+ <div
847
+ className="sub-title-percentage-container"
848
+ >
849
+ <span
850
+ className="sub-title"
851
+ />
852
+ </div>
829
853
  </div>
830
854
  </div>
831
855
  <div
@@ -966,9 +990,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
966
990
  Average
967
991
  </span>
968
992
  </div>
969
- <span
970
- className="sub-title"
971
- />
993
+ <div
994
+ className="sub-title-percentage-container"
995
+ >
996
+ <span
997
+ className="sub-title"
998
+ />
999
+ </div>
972
1000
  </div>
973
1001
  <div
974
1002
  className="item"
@@ -990,9 +1018,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
990
1018
  Best
991
1019
  </span>
992
1020
  </div>
993
- <span
994
- className="sub-title"
995
- />
1021
+ <div
1022
+ className="sub-title-percentage-container"
1023
+ >
1024
+ <span
1025
+ className="sub-title"
1026
+ />
1027
+ </div>
996
1028
  </div>
997
1029
  <div
998
1030
  className="item"
@@ -1014,9 +1046,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
1014
1046
  Worst
1015
1047
  </span>
1016
1048
  </div>
1017
- <span
1018
- className="sub-title"
1019
- />
1049
+ <div
1050
+ className="sub-title-percentage-container"
1051
+ >
1052
+ <span
1053
+ className="sub-title"
1054
+ />
1055
+ </div>
1020
1056
  </div>
1021
1057
  </div>
1022
1058
  <div
@@ -1146,9 +1182,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
1146
1182
  Average
1147
1183
  </span>
1148
1184
  </div>
1149
- <span
1150
- className="sub-title"
1151
- />
1185
+ <div
1186
+ className="sub-title-percentage-container"
1187
+ >
1188
+ <span
1189
+ className="sub-title"
1190
+ />
1191
+ </div>
1152
1192
  </div>
1153
1193
  <div
1154
1194
  className="item"
@@ -1170,9 +1210,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
1170
1210
  Best
1171
1211
  </span>
1172
1212
  </div>
1173
- <span
1174
- className="sub-title"
1175
- />
1213
+ <div
1214
+ className="sub-title-percentage-container"
1215
+ >
1216
+ <span
1217
+ className="sub-title"
1218
+ />
1219
+ </div>
1176
1220
  </div>
1177
1221
  <div
1178
1222
  className="item"
@@ -1194,9 +1238,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
1194
1238
  Worst
1195
1239
  </span>
1196
1240
  </div>
1197
- <span
1198
- className="sub-title"
1199
- />
1241
+ <div
1242
+ className="sub-title-percentage-container"
1243
+ >
1244
+ <span
1245
+ className="sub-title"
1246
+ />
1247
+ </div>
1200
1248
  </div>
1201
1249
  </div>
1202
1250
  <div
@@ -1338,9 +1386,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1338
1386
  Average
1339
1387
  </span>
1340
1388
  </div>
1341
- <span
1342
- className="sub-title"
1343
- />
1389
+ <div
1390
+ className="sub-title-percentage-container"
1391
+ >
1392
+ <span
1393
+ className="sub-title"
1394
+ />
1395
+ </div>
1344
1396
  </div>
1345
1397
  <div
1346
1398
  className="item"
@@ -1362,9 +1414,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1362
1414
  Best
1363
1415
  </span>
1364
1416
  </div>
1365
- <span
1366
- className="sub-title"
1367
- />
1417
+ <div
1418
+ className="sub-title-percentage-container"
1419
+ >
1420
+ <span
1421
+ className="sub-title"
1422
+ />
1423
+ </div>
1368
1424
  </div>
1369
1425
  <div
1370
1426
  className="item"
@@ -1386,9 +1442,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1386
1442
  Worst
1387
1443
  </span>
1388
1444
  </div>
1389
- <span
1390
- className="sub-title"
1391
- />
1445
+ <div
1446
+ className="sub-title-percentage-container"
1447
+ >
1448
+ <span
1449
+ className="sub-title"
1450
+ />
1451
+ </div>
1392
1452
  </div>
1393
1453
  </div>
1394
1454
  <div
@@ -1518,9 +1578,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1518
1578
  Average
1519
1579
  </span>
1520
1580
  </div>
1521
- <span
1522
- className="sub-title"
1523
- />
1581
+ <div
1582
+ className="sub-title-percentage-container"
1583
+ >
1584
+ <span
1585
+ className="sub-title"
1586
+ />
1587
+ </div>
1524
1588
  </div>
1525
1589
  <div
1526
1590
  className="item"
@@ -1542,9 +1606,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1542
1606
  Best
1543
1607
  </span>
1544
1608
  </div>
1545
- <span
1546
- className="sub-title"
1547
- />
1609
+ <div
1610
+ className="sub-title-percentage-container"
1611
+ >
1612
+ <span
1613
+ className="sub-title"
1614
+ />
1615
+ </div>
1548
1616
  </div>
1549
1617
  <div
1550
1618
  className="item"
@@ -1566,9 +1634,13 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
1566
1634
  Worst
1567
1635
  </span>
1568
1636
  </div>
1569
- <span
1570
- className="sub-title"
1571
- />
1637
+ <div
1638
+ className="sub-title-percentage-container"
1639
+ >
1640
+ <span
1641
+ className="sub-title"
1642
+ />
1643
+ </div>
1572
1644
  </div>
1573
1645
  </div>
1574
1646
  <div
@@ -1741,9 +1813,13 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
1741
1813
  pendingReview
1742
1814
  </span>
1743
1815
  </div>
1744
- <span
1745
- className="sub-title"
1746
- />
1816
+ <div
1817
+ className="sub-title-percentage-container"
1818
+ >
1819
+ <span
1820
+ className="sub-title"
1821
+ />
1822
+ </div>
1747
1823
  </div>
1748
1824
  <div
1749
1825
  className="item"
@@ -1765,9 +1841,13 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
1765
1841
  accepted
1766
1842
  </span>
1767
1843
  </div>
1768
- <span
1769
- className="sub-title"
1770
- />
1844
+ <div
1845
+ className="sub-title-percentage-container"
1846
+ >
1847
+ <span
1848
+ className="sub-title"
1849
+ />
1850
+ </div>
1771
1851
  </div>
1772
1852
  <div
1773
1853
  className="item"
@@ -1789,9 +1869,13 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
1789
1869
  rejected
1790
1870
  </span>
1791
1871
  </div>
1792
- <span
1793
- className="sub-title"
1794
- />
1872
+ <div
1873
+ className="sub-title-percentage-container"
1874
+ >
1875
+ <span
1876
+ className="sub-title"
1877
+ />
1878
+ </div>
1795
1879
  </div>
1796
1880
  <div
1797
1881
  className="item"
@@ -1813,9 +1897,13 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
1813
1897
  toRevise
1814
1898
  </span>
1815
1899
  </div>
1816
- <span
1817
- className="sub-title"
1818
- />
1900
+ <div
1901
+ className="sub-title-percentage-container"
1902
+ >
1903
+ <span
1904
+ className="sub-title"
1905
+ />
1906
+ </div>
1819
1907
  </div>
1820
1908
  <div
1821
1909
  className="item"
@@ -1837,9 +1925,13 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
1837
1925
  revised
1838
1926
  </span>
1839
1927
  </div>
1840
- <span
1841
- className="sub-title"
1842
- />
1928
+ <div
1929
+ className="sub-title-percentage-container"
1930
+ >
1931
+ <span
1932
+ className="sub-title"
1933
+ />
1934
+ </div>
1843
1935
  </div>
1844
1936
  </div>
1845
1937
  <div
@@ -2018,9 +2110,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2018
2110
  pendingReview
2019
2111
  </span>
2020
2112
  </div>
2021
- <span
2022
- className="sub-title"
2023
- />
2113
+ <div
2114
+ className="sub-title-percentage-container"
2115
+ >
2116
+ <span
2117
+ className="sub-title"
2118
+ />
2119
+ </div>
2024
2120
  </div>
2025
2121
  <div
2026
2122
  className="item"
@@ -2042,9 +2138,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2042
2138
  accepted
2043
2139
  </span>
2044
2140
  </div>
2045
- <span
2046
- className="sub-title"
2047
- />
2141
+ <div
2142
+ className="sub-title-percentage-container"
2143
+ >
2144
+ <span
2145
+ className="sub-title"
2146
+ />
2147
+ </div>
2048
2148
  </div>
2049
2149
  <div
2050
2150
  className="item"
@@ -2066,9 +2166,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2066
2166
  rejected
2067
2167
  </span>
2068
2168
  </div>
2069
- <span
2070
- className="sub-title"
2071
- />
2169
+ <div
2170
+ className="sub-title-percentage-container"
2171
+ >
2172
+ <span
2173
+ className="sub-title"
2174
+ />
2175
+ </div>
2072
2176
  </div>
2073
2177
  <div
2074
2178
  className="item"
@@ -2090,9 +2194,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2090
2194
  toRevise
2091
2195
  </span>
2092
2196
  </div>
2093
- <span
2094
- className="sub-title"
2095
- />
2197
+ <div
2198
+ className="sub-title-percentage-container"
2199
+ >
2200
+ <span
2201
+ className="sub-title"
2202
+ />
2203
+ </div>
2096
2204
  </div>
2097
2205
  <div
2098
2206
  className="item"
@@ -2114,9 +2222,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2114
2222
  revised
2115
2223
  </span>
2116
2224
  </div>
2117
- <span
2118
- className="sub-title"
2119
- />
2225
+ <div
2226
+ className="sub-title-percentage-container"
2227
+ >
2228
+ <span
2229
+ className="sub-title"
2230
+ />
2231
+ </div>
2120
2232
  </div>
2121
2233
  </div>
2122
2234
  <div
@@ -2284,9 +2396,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2284
2396
  pendingReview
2285
2397
  </span>
2286
2398
  </div>
2287
- <span
2288
- className="sub-title"
2289
- />
2399
+ <div
2400
+ className="sub-title-percentage-container"
2401
+ >
2402
+ <span
2403
+ className="sub-title"
2404
+ />
2405
+ </div>
2290
2406
  </div>
2291
2407
  <div
2292
2408
  className="item"
@@ -2308,9 +2424,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2308
2424
  accepted
2309
2425
  </span>
2310
2426
  </div>
2311
- <span
2312
- className="sub-title"
2313
- />
2427
+ <div
2428
+ className="sub-title-percentage-container"
2429
+ >
2430
+ <span
2431
+ className="sub-title"
2432
+ />
2433
+ </div>
2314
2434
  </div>
2315
2435
  <div
2316
2436
  className="item"
@@ -2332,9 +2452,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2332
2452
  rejected
2333
2453
  </span>
2334
2454
  </div>
2335
- <span
2336
- className="sub-title"
2337
- />
2455
+ <div
2456
+ className="sub-title-percentage-container"
2457
+ >
2458
+ <span
2459
+ className="sub-title"
2460
+ />
2461
+ </div>
2338
2462
  </div>
2339
2463
  <div
2340
2464
  className="item"
@@ -2356,9 +2480,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2356
2480
  toRevise
2357
2481
  </span>
2358
2482
  </div>
2359
- <span
2360
- className="sub-title"
2361
- />
2483
+ <div
2484
+ className="sub-title-percentage-container"
2485
+ >
2486
+ <span
2487
+ className="sub-title"
2488
+ />
2489
+ </div>
2362
2490
  </div>
2363
2491
  <div
2364
2492
  className="item"
@@ -2380,9 +2508,13 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
2380
2508
  revised
2381
2509
  </span>
2382
2510
  </div>
2383
- <span
2384
- className="sub-title"
2385
- />
2511
+ <div
2512
+ className="sub-title-percentage-container"
2513
+ >
2514
+ <span
2515
+ className="sub-title"
2516
+ />
2517
+ </div>
2386
2518
  </div>
2387
2519
  </div>
2388
2520
  <div
@@ -2449,11 +2581,20 @@ exports[`Storyshots a/Charts/PieChart Default 1`] = `
2449
2581
  Pending Review
2450
2582
  </span>
2451
2583
  </div>
2452
- <span
2453
- className="sub-title"
2584
+ <div
2585
+ className="sub-title-percentage-container"
2454
2586
  >
2455
- 230
2456
- </span>
2587
+ <span
2588
+ className="sub-title"
2589
+ >
2590
+ 230
2591
+ </span>
2592
+ <span
2593
+ className="percentage-title"
2594
+ >
2595
+ 32%
2596
+ </span>
2597
+ </div>
2457
2598
  </div>
2458
2599
  <div
2459
2600
  className="item"
@@ -2475,11 +2616,20 @@ exports[`Storyshots a/Charts/PieChart Default 1`] = `
2475
2616
  Accepted
2476
2617
  </span>
2477
2618
  </div>
2478
- <span
2479
- className="sub-title"
2619
+ <div
2620
+ className="sub-title-percentage-container"
2480
2621
  >
2481
- 350
2482
- </span>
2622
+ <span
2623
+ className="sub-title"
2624
+ >
2625
+ 350
2626
+ </span>
2627
+ <span
2628
+ className="percentage-title"
2629
+ >
2630
+ 48%
2631
+ </span>
2632
+ </div>
2483
2633
  </div>
2484
2634
  <div
2485
2635
  className="item"
@@ -2501,11 +2651,20 @@ exports[`Storyshots a/Charts/PieChart Default 1`] = `
2501
2651
  Rejected
2502
2652
  </span>
2503
2653
  </div>
2504
- <span
2505
- className="sub-title"
2654
+ <div
2655
+ className="sub-title-percentage-container"
2506
2656
  >
2507
- 80
2508
- </span>
2657
+ <span
2658
+ className="sub-title"
2659
+ >
2660
+ 80
2661
+ </span>
2662
+ <span
2663
+ className="percentage-title"
2664
+ >
2665
+ 11%
2666
+ </span>
2667
+ </div>
2509
2668
  </div>
2510
2669
  <div
2511
2670
  className="item"
@@ -2527,11 +2686,20 @@ exports[`Storyshots a/Charts/PieChart Default 1`] = `
2527
2686
  To Revise
2528
2687
  </span>
2529
2688
  </div>
2530
- <span
2531
- className="sub-title"
2689
+ <div
2690
+ className="sub-title-percentage-container"
2532
2691
  >
2533
- 10
2534
- </span>
2692
+ <span
2693
+ className="sub-title"
2694
+ >
2695
+ 10
2696
+ </span>
2697
+ <span
2698
+ className="percentage-title"
2699
+ >
2700
+ 1%
2701
+ </span>
2702
+ </div>
2535
2703
  </div>
2536
2704
  <div
2537
2705
  className="item"
@@ -2553,11 +2721,20 @@ exports[`Storyshots a/Charts/PieChart Default 1`] = `
2553
2721
  Revised
2554
2722
  </span>
2555
2723
  </div>
2556
- <span
2557
- className="sub-title"
2724
+ <div
2725
+ className="sub-title-percentage-container"
2558
2726
  >
2559
- 60
2560
- </span>
2727
+ <span
2728
+ className="sub-title"
2729
+ >
2730
+ 60
2731
+ </span>
2732
+ <span
2733
+ className="percentage-title"
2734
+ >
2735
+ 8%
2736
+ </span>
2737
+ </div>
2561
2738
  </div>
2562
2739
  </div>
2563
2740
  </div>
@@ -2623,11 +2800,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2623
2800
  Pending Review
2624
2801
  </span>
2625
2802
  </div>
2626
- <span
2627
- className="sub-title"
2803
+ <div
2804
+ className="sub-title-percentage-container"
2628
2805
  >
2629
- 230
2630
- </span>
2806
+ <span
2807
+ className="sub-title"
2808
+ >
2809
+ 230
2810
+ </span>
2811
+ <span
2812
+ className="percentage-title"
2813
+ >
2814
+ 32%
2815
+ </span>
2816
+ </div>
2631
2817
  </div>
2632
2818
  <div
2633
2819
  className="item"
@@ -2649,11 +2835,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2649
2835
  Accepted
2650
2836
  </span>
2651
2837
  </div>
2652
- <span
2653
- className="sub-title"
2838
+ <div
2839
+ className="sub-title-percentage-container"
2654
2840
  >
2655
- 350
2656
- </span>
2841
+ <span
2842
+ className="sub-title"
2843
+ >
2844
+ 350
2845
+ </span>
2846
+ <span
2847
+ className="percentage-title"
2848
+ >
2849
+ 48%
2850
+ </span>
2851
+ </div>
2657
2852
  </div>
2658
2853
  <div
2659
2854
  className="item"
@@ -2675,11 +2870,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2675
2870
  Rejected
2676
2871
  </span>
2677
2872
  </div>
2678
- <span
2679
- className="sub-title"
2873
+ <div
2874
+ className="sub-title-percentage-container"
2680
2875
  >
2681
- 80
2682
- </span>
2876
+ <span
2877
+ className="sub-title"
2878
+ >
2879
+ 80
2880
+ </span>
2881
+ <span
2882
+ className="percentage-title"
2883
+ >
2884
+ 11%
2885
+ </span>
2886
+ </div>
2683
2887
  </div>
2684
2888
  <div
2685
2889
  className="item"
@@ -2701,11 +2905,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2701
2905
  To Revise
2702
2906
  </span>
2703
2907
  </div>
2704
- <span
2705
- className="sub-title"
2908
+ <div
2909
+ className="sub-title-percentage-container"
2706
2910
  >
2707
- 10
2708
- </span>
2911
+ <span
2912
+ className="sub-title"
2913
+ >
2914
+ 10
2915
+ </span>
2916
+ <span
2917
+ className="percentage-title"
2918
+ >
2919
+ 1%
2920
+ </span>
2921
+ </div>
2709
2922
  </div>
2710
2923
  <div
2711
2924
  className="item"
@@ -2727,11 +2940,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2727
2940
  Revised
2728
2941
  </span>
2729
2942
  </div>
2730
- <span
2731
- className="sub-title"
2943
+ <div
2944
+ className="sub-title-percentage-container"
2732
2945
  >
2733
- 60
2734
- </span>
2946
+ <span
2947
+ className="sub-title"
2948
+ >
2949
+ 60
2950
+ </span>
2951
+ <span
2952
+ className="percentage-title"
2953
+ >
2954
+ 8%
2955
+ </span>
2956
+ </div>
2735
2957
  </div>
2736
2958
  </div>
2737
2959
  </div>
@@ -2786,11 +3008,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2786
3008
  Pending Review
2787
3009
  </span>
2788
3010
  </div>
2789
- <span
2790
- className="sub-title"
3011
+ <div
3012
+ className="sub-title-percentage-container"
2791
3013
  >
2792
- 230
2793
- </span>
3014
+ <span
3015
+ className="sub-title"
3016
+ >
3017
+ 230
3018
+ </span>
3019
+ <span
3020
+ className="percentage-title"
3021
+ >
3022
+ 32%
3023
+ </span>
3024
+ </div>
2794
3025
  </div>
2795
3026
  <div
2796
3027
  className="item"
@@ -2812,11 +3043,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2812
3043
  Accepted
2813
3044
  </span>
2814
3045
  </div>
2815
- <span
2816
- className="sub-title"
3046
+ <div
3047
+ className="sub-title-percentage-container"
2817
3048
  >
2818
- 350
2819
- </span>
3049
+ <span
3050
+ className="sub-title"
3051
+ >
3052
+ 350
3053
+ </span>
3054
+ <span
3055
+ className="percentage-title"
3056
+ >
3057
+ 48%
3058
+ </span>
3059
+ </div>
2820
3060
  </div>
2821
3061
  <div
2822
3062
  className="item"
@@ -2838,11 +3078,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2838
3078
  Rejected
2839
3079
  </span>
2840
3080
  </div>
2841
- <span
2842
- className="sub-title"
3081
+ <div
3082
+ className="sub-title-percentage-container"
2843
3083
  >
2844
- 80
2845
- </span>
3084
+ <span
3085
+ className="sub-title"
3086
+ >
3087
+ 80
3088
+ </span>
3089
+ <span
3090
+ className="percentage-title"
3091
+ >
3092
+ 11%
3093
+ </span>
3094
+ </div>
2846
3095
  </div>
2847
3096
  <div
2848
3097
  className="item"
@@ -2864,11 +3113,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2864
3113
  To Revise
2865
3114
  </span>
2866
3115
  </div>
2867
- <span
2868
- className="sub-title"
3116
+ <div
3117
+ className="sub-title-percentage-container"
2869
3118
  >
2870
- 10
2871
- </span>
3119
+ <span
3120
+ className="sub-title"
3121
+ >
3122
+ 10
3123
+ </span>
3124
+ <span
3125
+ className="percentage-title"
3126
+ >
3127
+ 1%
3128
+ </span>
3129
+ </div>
2872
3130
  </div>
2873
3131
  <div
2874
3132
  className="item"
@@ -2890,11 +3148,20 @@ exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
2890
3148
  Revised
2891
3149
  </span>
2892
3150
  </div>
2893
- <span
2894
- className="sub-title"
3151
+ <div
3152
+ className="sub-title-percentage-container"
2895
3153
  >
2896
- 60
2897
- </span>
3154
+ <span
3155
+ className="sub-title"
3156
+ >
3157
+ 60
3158
+ </span>
3159
+ <span
3160
+ className="percentage-title"
3161
+ >
3162
+ 8%
3163
+ </span>
3164
+ </div>
2898
3165
  </div>
2899
3166
  </div>
2900
3167
  </div>