@availity/mui-empty-state 0.2.4 → 0.3.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 (15) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.d.mts +16 -2
  3. package/dist/index.d.ts +16 -2
  4. package/dist/index.js +901 -98
  5. package/dist/index.mjs +899 -97
  6. package/package.json +1 -1
  7. package/src/assets/Instructional_Gray.tsx +164 -0
  8. package/src/assets/No-Favorites_Gray.tsx +110 -0
  9. package/src/assets/No-Messages_Gray.tsx +114 -0
  10. package/src/assets/No-Notifications_Gray.tsx +124 -0
  11. package/src/assets/No-Patients_Gray.tsx +136 -0
  12. package/src/assets/Success-Confirmation_Gray.tsx +103 -0
  13. package/src/lib/EmptyState.stories.tsx +183 -66
  14. package/src/lib/EmptyStateImage.stories.tsx +15 -14
  15. package/src/lib/EmptyStateImage.tsx +17 -4
package/src/assets/No-Patients_Gray.tsx ADDED
@@ -0,0 +1,136 @@
1
+ export const NoPatients = () => {
2
+ return (
3
+ <svg
4
+ version="1.1"
5
+ id="Layer_1"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ xmlnsXlink="http://www.w3.org/1999/xlink"
8
+ x="0px"
9
+ y="0px"
10
+ viewBox="0 0 144 144"
11
+ xmlSpace="preserve"
12
+ >
13
+ <style type="text/css">
14
+ {`.st0{fill:#FFFFFF;}
15
+ .st1{fill:#EEEFF2;}
16
+ .st2{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
17
+ .st3{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
18
+ .st4{fill:#BBD6EB;}
19
+ .st5{fill:#F3F5F7;}
20
+
21
+ .st6{fill:url(#SVGID_1_);stroke:url(#SVGID_00000175300288679579360030000009521992934827261842_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
22
+
23
+ .st7{fill:url(#SVGID_00000061438555016396076920000005433475259249934782_);stroke:url(#SVGID_00000044894752904991820940000000480155377091821965_);stroke-miterlimit:10;}
24
+ .st8{clip-path:url(#SVGID_00000150092826891454380070000000950928591554026687_);}
25
+ .st9{fill:url(#SVGID_00000126282325999135982800000010463658828771602838_);}
26
+ .st10{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
27
+ .st11{fill:url(#SVGID_00000136400709308955642740000002311320348359266695_);}
28
+ .st12{fill:url(#SVGID_00000144305863594559283480000006311110298231235230_);}
29
+ .st13{fill:#FFFFFF;stroke:url(#SVGID_00000072966957989294504030000002680664948667529643_);stroke-miterlimit:10;}
30
+ .st14{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
31
+ .st15{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:5.6708,0.5671,1.7012,5.6708;}
32
+
33
+ .st16{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.5671,1.7012,5.6708,0.5671,1.7012,5.6708;}
34
+
35
+ .st17{fill:url(#SVGID_00000049188872201570506270000016823380555214947760_);stroke:url(#SVGID_00000119835587891479955270000016125607043463551135_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
36
+ .st18{opacity:0.25;fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
37
+ .st19{fill:#838795;}
38
+
39
+ .st20{fill:url(#SVGID_00000075132992420045091450000008761589383726519171_);stroke:url(#SVGID_00000067202923917549313690000015195476243300966304_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
40
+
41
+ .st21{fill:url(#SVGID_00000147926891995510965630000000040216111561934257_);stroke:url(#SVGID_00000150806631137284618440000001206560811419424697_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
42
+
43
+ .st22{fill:url(#SVGID_00000093167312166415813840000011019058964139672477_);stroke:url(#SVGID_00000067199337730628470610000009936938218145329284_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
44
+
45
+ .st23{fill:url(#SVGID_00000162327624703693573560000001601276238102407611_);stroke:url(#SVGID_00000176041679770324113790000005391882093610095249_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
46
+
47
+ .st24{fill:url(#SVGID_00000049204955805480998300000012192241916222164407_);stroke:url(#SVGID_00000119111297804964337990000010708013292203515013_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
48
+
49
+ .st25{fill:url(#SVGID_00000123435907981009359660000009275919127214170781_);stroke:url(#SVGID_00000165929826315446655660000006354639768946561440_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
50
+
51
+ .st26{fill:url(#SVGID_00000121982821789883938360000017096759803318989494_);stroke:url(#SVGID_00000049192650579309830840000010952698352911298945_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
52
+
53
+ .st27{fill:url(#SVGID_00000016062246434804495920000004284491130189771906_);stroke:url(#SVGID_00000003817105168753932720000004320862397361684921_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
54
+ .st28{fill:url(#SVGID_00000113313557730684672580000008120689811525796001_);}
55
+ .st29{fill:url(#SVGID_00000057122509135842000640000014383436299945262512_);}
56
+ .st30{fill:url(#SVGID_00000163759615018774339240000006863825621884764827_);}
57
+ .st31{fill:url(#SVGID_00000000220623981218978610000015436474648472884129_);}
58
+ .st32{fill:url(#SVGID_00000148658067762955808480000014260373483242579850_);}
59
+ .st33{fill:url(#SVGID_00000036962371437409576840000015082960004519535252_);}
60
+ .st34{fill:url(#SVGID_00000105418832502326492970000011511020984397278651_);}
61
+ .st35{fill:url(#SVGID_00000001663197047518613800000003952054182321117623_);}
62
+ .st36{fill:url(#SVGID_00000140002345030586605440000015200626328477824701_);}
63
+ .st37{fill:url(#SVGID_00000064332149327228125790000018339594117598060479_);}
64
+ .st38{fill:url(#SVGID_00000036962088077095977060000008702425961168556220_);}
65
+ .st39{fill:url(#SVGID_00000021832505205490021330000009632314243602334852_);}
66
+ .st40{fill:url(#SVGID_00000173855730336239643980000009277879328129493890_);}
67
+
68
+ .st41{fill:#FFFFFF;stroke:url(#SVGID_00000160904543326848771090000013710928862994864573_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
69
+
70
+ .st42{fill:#FFFFFF;stroke:url(#SVGID_00000016033396063326922150000010667933010196236168_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
71
+
72
+ .st43{fill:url(#SVGID_00000142143951278171927120000005352081428416652471_);stroke:url(#SVGID_00000183941857143666264610000000277206320677672363_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
73
+ .st44{clip-path:url(#SVGID_00000115495731562023408430000006340263287112058245_);}
74
+ .st45{fill:#D7DAE0;}
75
+ .st46{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
76
+ .st47{fill:none;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
77
+ .st48{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
78
+ .st49{fill:#E5E5E5;}
79
+ .st50{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
80
+
81
+ .st51{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
82
+ .st52{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
83
+ .st53{fill:none;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:8.1319,5.0824;}
84
+ .st54{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
85
+ .st55{fill:none;stroke:#D7DAE0;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
86
+ .st56{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
87
+ .st57{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
88
+ .st58{fill:none;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
89
+ .st59{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
90
+ .st60{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.125,8,10;}
91
+ .st61{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.125,6,10;}
92
+ .st62{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}`}
93
+ </style>
94
+ <g>
95
+ <g>
96
+ <path className="st0" d="M19.6,126v-76c0-1.7,1.7-3.1,3.8-3.1h97.4c2.1,0,3.8,1.4,3.8,3.1v76H19.6z" />
97
+ <path
98
+ className="st1"
99
+ d="M120.7,47.9c1.5,0,2.8,1,2.8,2.1v75H20.6v-75c0-1.1,1.3-2.1,2.8-2.1H120.7 M120.7,45.9H23.3
100
+ c-2.6,0-4.8,1.8-4.8,4.1v77h106.9v-77C125.4,47.8,123.3,45.9,120.7,45.9L120.7,45.9z"
101
+ />
102
+ </g>
103
+ <g>
104
+ <path
105
+ className="st0"
106
+ d="M108,94.6H36c-2.4,0-4.4-2-4.4-4.4V10.6c0-2.4,2-4.4,4.4-4.4H108c2.4,0,4.4,2,4.4,4.4v79.6
107
+ C112.3,92.6,110.4,94.6,108,94.6z"
108
+ />
109
+ <path
110
+ className="st53"
111
+ d="M108,94.6H36c-2.4,0-4.4-2-4.4-4.4V10.6c0-2.4,2-4.4,4.4-4.4H108c2.4,0,4.4,2,4.4,4.4v79.6
112
+ C112.3,92.6,110.4,94.6,108,94.6z"
113
+ />
114
+ </g>
115
+ <g>
116
+ <path
117
+ className="st45"
118
+ d="M72.2,23.5c-3.1,0-5.7,2.6-5.7,5.7s2.6,5.7,5.7,5.7c3.1,0,5.7-2.6,5.7-5.7S75.3,23.5,72.2,23.5z"
119
+ />
120
+ <path
121
+ className="st45"
122
+ d="M85.2,20.3c-7.3-7.3-19.1-7.3-26.4,0c-7.3,7.3-7.3,19.1,0,26.4c0.4,0.4,0.9,0.9,1.4,1.3
123
+ c3.4,2.8,7.6,4.2,11.8,4.2c4.3,0,8.7-1.5,12.2-4.5c0.4-0.3,0.7-0.6,1-0.9C92.5,39.4,92.5,27.6,85.2,20.3z M83.3,44.8
124
+ c-0.2,0.2-0.5,0.5-0.8,0.7c-0.6-5.2-5.1-9.2-10.4-9.2c-5.4,0-9.9,4.2-10.4,9.5c-0.4-0.3-0.7-0.6-1.1-1c-6.2-6.2-6.2-16.4,0-22.6
125
+ c3.1-3.1,7.2-4.7,11.3-4.7c4.1,0,8.2,1.6,11.3,4.7C89.5,28.4,89.5,38.6,83.3,44.8z"
126
+ />
127
+ </g>
128
+ <path
129
+ className="st1"
130
+ d="M80.3,62L66.4,75.9H12.9c-2.8,0-4.9,2.5-4.5,5.3l7.9,54.4c0.2,1.3,1.3,2.2,2.5,2.2h104.2
131
+ c1.3,0,2.4-0.9,2.5-2.2l10-68.3c0.4-2.8-1.7-5.3-4.5-5.3H80.3z"
132
+ />
133
+ </g>
134
+ </svg>
135
+ );
136
+ };
package/src/assets/Success-Confirmation_Gray.tsx ADDED
@@ -0,0 +1,103 @@
1
+ export const SuccessConfirmation = () => {
2
+ return (
3
+ <svg
4
+ version="1.1"
5
+ id="Layer_1"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ xmlnsXlink="http://www.w3.org/1999/xlink"
8
+ x="0px"
9
+ y="0px"
10
+ viewBox="0 0 144 144"
11
+ xmlSpace="preserve"
12
+ >
13
+ <style type="text/css">
14
+ {`.st0{fill:#FFFFFF;}
15
+ .st1{fill:#EEEFF2;}
16
+ .st2{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
17
+ .st3{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
18
+ .st4{fill:#BBD6EB;}
19
+ .st5{fill:#F3F5F7;}
20
+
21
+ .st6{fill:url(#SVGID_1_);stroke:url(#SVGID_00000028284429236021381630000010210480860065277606_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
22
+
23
+ .st7{fill:url(#SVGID_00000002346145290382807310000010772803614463261329_);stroke:url(#SVGID_00000132773997407954371150000013275377183929247107_);stroke-miterlimit:10;}
24
+ .st8{clip-path:url(#SVGID_00000038400761125365932740000014551702366082124430_);}
25
+ .st9{fill:url(#SVGID_00000095339379086700665650000010569470218555637659_);}
26
+ .st10{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
27
+ .st11{fill:url(#SVGID_00000180341434570840832070000013984383470433241754_);}
28
+ .st12{fill:url(#SVGID_00000129192554048861920370000008849989137377378444_);}
29
+ .st13{fill:#FFFFFF;stroke:url(#SVGID_00000023245929054053202260000017715527871198531734_);stroke-miterlimit:10;}
30
+ .st14{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
31
+ .st15{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:5.6708,0.5671,1.7012,5.6708;}
32
+
33
+ .st16{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.5671,1.7012,5.6708,0.5671,1.7012,5.6708;}
34
+
35
+ .st17{fill:url(#SVGID_00000147206495327296419390000011451386332201297589_);stroke:url(#SVGID_00000170272328258678673360000006605586839152991381_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
36
+ .st18{opacity:0.25;fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
37
+ .st19{fill:#838795;}
38
+
39
+ .st20{fill:url(#SVGID_00000124134264928754026010000004919919149243671456_);stroke:url(#SVGID_00000050632829347866437950000014625840628700447875_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
40
+
41
+ .st21{fill:url(#SVGID_00000103969832424238800200000007586091928173252248_);stroke:url(#SVGID_00000159461718839362185790000010406108216789518257_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
42
+
43
+ .st22{fill:url(#SVGID_00000046336474408319561010000010459693785245395124_);stroke:url(#SVGID_00000049905822157044783800000000285464951841267383_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
44
+
45
+ .st23{fill:url(#SVGID_00000114790985431661953040000012324517981224255116_);stroke:url(#SVGID_00000182494435204309522060000010094696869191290242_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
46
+
47
+ .st24{fill:url(#SVGID_00000005232060128973022930000005791346824486706310_);stroke:url(#SVGID_00000032622637943370081800000002181914977037227143_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
48
+
49
+ .st25{fill:url(#SVGID_00000099623281772351859370000010651626021818132892_);stroke:url(#SVGID_00000147933232382257382560000006599026793680525739_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
50
+
51
+ .st26{fill:url(#SVGID_00000124140727537286453930000000479601490024379058_);stroke:url(#SVGID_00000026841599675037677540000000988942239749619850_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
52
+
53
+ .st27{fill:url(#SVGID_00000112608237137422004900000009252031440586456980_);stroke:url(#SVGID_00000067928752730168413090000012323525578652458117_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
54
+ .st28{fill:url(#SVGID_00000054969635363474595590000006123515512037417910_);}
55
+ .st29{fill:url(#SVGID_00000134232228628396966780000008086595646474165386_);}
56
+ .st30{fill:url(#SVGID_00000028300992387620279290000017781521607760455305_);}
57
+ .st31{fill:url(#SVGID_00000086672218235363856330000013292030717410366358_);}
58
+ .st32{fill:url(#SVGID_00000121263489883052821350000010705233499436613283_);}
59
+ .st33{fill:url(#SVGID_00000001651379907501680220000007231765339334847637_);}
60
+ .st34{fill:url(#SVGID_00000161608512639504647210000012736961192957482375_);}
61
+ .st35{fill:url(#SVGID_00000160172545443670805610000017607412978275058580_);}
62
+ .st36{fill:url(#SVGID_00000044137027281700620140000003394426742203123855_);}
63
+ .st37{fill:url(#SVGID_00000042709728812156354000000004119499516601884054_);}
64
+ .st38{fill:url(#SVGID_00000131368313008914898310000000608117741340465025_);}
65
+ .st39{fill:url(#SVGID_00000027567100515691125540000012713816104132731296_);}
66
+ .st40{fill:url(#SVGID_00000168105064872260205760000003214793314348290718_);}
67
+
68
+ .st41{fill:#FFFFFF;stroke:url(#SVGID_00000029758703077486328930000011720970111664460702_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
69
+
70
+ .st42{fill:#FFFFFF;stroke:url(#SVGID_00000122699645481263223460000000254187828324094119_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
71
+
72
+ .st43{fill:url(#SVGID_00000164474785394916673500000000763075433334537118_);stroke:url(#SVGID_00000045610625271151685660000002097996418563776930_);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
73
+ .st44{clip-path:url(#SVGID_00000029023710232019776250000002782165090230363579_);}
74
+ .st45{fill:#D7DAE0;}
75
+ .st46{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
76
+ .st47{fill:none;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
77
+ .st48{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
78
+ .st49{fill:#E5E5E5;}
79
+ .st50{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
80
+
81
+ .st51{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
82
+ .st52{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
83
+ .st53{fill:none;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:8.1319,5.0824;}
84
+ .st54{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
85
+ .st55{fill:none;stroke:#D7DAE0;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
86
+ .st56{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
87
+ .st57{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
88
+ .st58{fill:none;stroke:#D7DAE0;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
89
+ .st59{fill:#FFFFFF;stroke:#D7DAE0;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
90
+ .st60{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.125,8,10;}
91
+ .st61{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0.125,6,10;}
92
+ .st62{fill:none;stroke:#EEEFF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}`}
93
+ </style>
94
+ <g>
95
+ <circle className="st59" cx="72" cy="72" r="61.2" />
96
+ <path
97
+ className="st45"
98
+ d="M117.2,46.3c-2.5-4.5-5.7-8.5-9.4-12L59.5,82.6L43.2,66.4L32.5,77.1l27,27L117.2,46.3z"
99
+ />
100
+ </g>
101
+ </svg>
102
+ );
103
+ };
package/src/lib/EmptyState.stories.tsx CHANGED
@@ -29,6 +29,10 @@ const HeadingLevelDecorator: Decorator = (Story, context) => (
29
29
  </>
30
30
  );
31
31
 
32
+ const StoryBox = ({ children }: { children: React.ReactNode }) => (
33
+ <Box sx={{ backgroundColor: 'background.paper', width: '25%' }}>{children}</Box>
34
+ );
35
+
32
36
  /** Built on top of the `Stack` component, `EmptyState` will add the desired spacing to every direct descendant.
33
37
  *
34
38
  * _Accessibility Note: Check the appropriate heading level needed for your usage to not create a heading jump._
@@ -52,107 +56,220 @@ export default {
52
56
 
53
57
  export const _EmptyState: StoryObj<typeof EmptyState> = {
54
58
  render: (args: EmptyStateProps) => (
55
- <EmptyState {...args}>
56
- <Typography variant="h6" component="h3">
57
- Header
58
- </Typography>
59
- <Box>This body explains the empty state. The illustration relates to the situation.</Box>
60
- <Button>Optional Button</Button>
61
- <Link href="#">Optional Link</Link>
62
- </EmptyState>
59
+ <StoryBox>
60
+ <EmptyState {...args}>
61
+ <Typography variant="h6" component="h3">
62
+ Header
63
+ </Typography>
64
+ <Typography variant="body2">
65
+ This body explains the empty state. The illustration relates to the situation.
66
+ </Typography>
67
+ <Button>Optional Button</Button>
68
+ <Link href="#">Optional Link</Link>
69
+ </EmptyState>
70
+ </StoryBox>
63
71
  ),
64
72
  };
65
73
 
66
- export const _NoSearchResults: StoryObj<typeof EmptyState> = {
74
+ export const _ContentLoading: StoryObj<typeof EmptyState> = {
67
75
  render: (args: EmptyStateProps) => (
68
- <EmptyState {...args} alignItems="start" textAlign="start">
69
- <Typography variant="h6" component="h3">
70
- No search results found -- Results not found for [variable].
71
- </Typography>
72
- <Box>Adjust your search or filter options for better results.</Box>
73
- <Box>
74
- Suggestions:
75
- <List
76
- sx={{ listStyleType: 'disc', listStylePosition: 'inside', '.MuiListItem-root': { display: 'list-item' } }}
77
- disablePadding
78
- >
79
- <ListItem disableGutters disablePadding>
80
- Correctly spell all words in search criteria
81
- </ListItem>
82
- <ListItem disableGutters disablePadding>
83
- Use different keywords
84
- </ListItem>
85
- <ListItem disableGutters disablePadding>
86
- Use general keywords
87
- </ListItem>
88
- <ListItem disableGutters disablePadding>
89
- Use fewer keywords
90
- </ListItem>
91
- </List>
92
- </Box>
93
- <Link href="#">Clear filter</Link>
94
- </EmptyState>
76
+ <StoryBox>
77
+ <EmptyState {...args}>
78
+ <Typography variant="h6" component="h3">
79
+ Content Loading
80
+ </Typography>
81
+ <Typography variant="body2">Data is loading.</Typography>
82
+ </EmptyState>
83
+ </StoryBox>
95
84
  ),
96
85
  args: {
97
- variant: 'NoSearchFound',
86
+ variant: 'ContentLoading',
98
87
  },
99
88
  };
100
89
 
101
90
  export const _Error: StoryObj<typeof EmptyState> = {
102
91
  render: (args: EmptyStateProps) => (
103
- <EmptyState {...args}>
104
- <Typography variant="h6" component="h3">
105
- Error
106
- </Typography>
107
- <Box>
108
- Oops! Something went wrong. Try your request again later. If the problem continues, contact Availity Client
109
- Services at 1.800.AVAILITY (282.4548).
110
- </Box>
111
- </EmptyState>
92
+ <StoryBox>
93
+ <EmptyState {...args}>
94
+ <Typography variant="h6" component="h3">
95
+ Error
96
+ </Typography>
97
+ <Typography variant="body2">
98
+ Oops! Something went wrong. Try your request again later. If the problem continues, contact Availity Client
99
+ Services at 1.800.AVAILITY (282.4548).
100
+ </Typography>
101
+ </EmptyState>
102
+ </StoryBox>
112
103
  ),
113
104
  args: {
114
105
  variant: 'Error',
115
106
  },
116
107
  };
117
108
 
118
- export const _ContentLoading: StoryObj<typeof EmptyState> = {
109
+ export const _Instructional: StoryObj<typeof EmptyState> = {
119
110
  render: (args: EmptyStateProps) => (
120
- <EmptyState {...args}>
121
- <Typography variant="h6" component="h3">
122
- Content Loading
123
- </Typography>
124
- <Box>Data is loading.</Box>
125
- </EmptyState>
111
+ <StoryBox>
112
+ <EmptyState {...args}>
113
+ <Typography variant="h6" component="h3">
114
+ Tasks need to be completed
115
+ </Typography>
116
+ <Typography variant="body2">You have tasks to complete</Typography>
117
+ <Button>Get Started</Button>
118
+ </EmptyState>
119
+ </StoryBox>
126
120
  ),
127
121
  args: {
128
- variant: 'ContentLoading',
122
+ variant: 'Instructional',
129
123
  },
130
124
  };
131
125
 
132
126
  export const _NoData: StoryObj<typeof EmptyState> = {
133
127
  render: (args: EmptyStateProps) => (
134
- <EmptyState {...args}>
135
- <Typography variant="h6" component="h3">
136
- No data
137
- </Typography>
138
- <Box>Sorry, but we cannot seem to find the data you are looking for.</Box>
139
- </EmptyState>
128
+ <StoryBox>
129
+ <EmptyState {...args}>
130
+ <Typography variant="h6" component="h3">
131
+ No data
132
+ </Typography>
133
+ <Typography variant="body2">Sorry, but we cannot seem to find the data you are looking for.</Typography>
134
+ </EmptyState>
135
+ </StoryBox>
140
136
  ),
141
137
  args: {
142
138
  variant: 'NoData',
143
139
  },
144
140
  };
145
141
 
142
+ export const _NoFavorites: StoryObj<typeof EmptyState> = {
143
+ render: (args: EmptyStateProps) => (
144
+ <StoryBox>
145
+ <EmptyState {...args}>
146
+ <Typography variant="h6" component="h3">
147
+ No favorites
148
+ </Typography>
149
+ <Typography variant="body2">
150
+ It's ok to have favorites. Select the heart icon next to an application to add it to the My Favorites menu for
151
+ quick access.
152
+ </Typography>
153
+ </EmptyState>
154
+ </StoryBox>
155
+ ),
156
+ args: {
157
+ variant: 'NoFavorites',
158
+ },
159
+ };
160
+
161
+ export const _NoMessages: StoryObj<typeof EmptyState> = {
162
+ render: (args: EmptyStateProps) => (
163
+ <StoryBox>
164
+ <EmptyState {...args}>
165
+ <Typography variant="h6" component="h3">
166
+ No messages
167
+ </Typography>
168
+ <Typography variant="body2">You do not have any messages</Typography>
169
+ </EmptyState>
170
+ </StoryBox>
171
+ ),
172
+ args: {
173
+ variant: 'NoMessages',
174
+ },
175
+ };
176
+
177
+ export const _NoNotifications: StoryObj<typeof EmptyState> = {
178
+ render: (args: EmptyStateProps) => (
179
+ <StoryBox>
180
+ <EmptyState {...args}>
181
+ <Typography variant="h6" component="h3">
182
+ No notifications
183
+ </Typography>
184
+ <Typography variant="body2">You do not have any notifications</Typography>
185
+ </EmptyState>
186
+ </StoryBox>
187
+ ),
188
+ args: {
189
+ variant: 'NoNotifications',
190
+ },
191
+ };
192
+
193
+ export const _NoPatients: StoryObj<typeof EmptyState> = {
194
+ render: (args: EmptyStateProps) => (
195
+ <StoryBox>
196
+ <EmptyState {...args}>
197
+ <Typography variant="h6" component="h3">
198
+ Patient(s) not found
199
+ </Typography>
200
+ </EmptyState>
201
+ </StoryBox>
202
+ ),
203
+ args: {
204
+ variant: 'NoPatients',
205
+ },
206
+ };
207
+
208
+ export const _NoSearchResults: StoryObj<typeof EmptyState> = {
209
+ render: (args: EmptyStateProps) => (
210
+ <StoryBox>
211
+ <EmptyState {...args} alignItems="start" textAlign="start">
212
+ <Typography variant="h6" component="h3">
213
+ No search results found -- Results not found for [variable].
214
+ </Typography>
215
+ <Box>Adjust your search or filter options for better results.</Box>
216
+ <Box>
217
+ Suggestions:
218
+ <List
219
+ sx={{ listStyleType: 'disc', listStylePosition: 'inside', '.MuiListItem-root': { display: 'list-item' } }}
220
+ disablePadding
221
+ >
222
+ <ListItem disableGutters disablePadding>
223
+ Correctly spell all words in search criteria
224
+ </ListItem>
225
+ <ListItem disableGutters disablePadding>
226
+ Use different keywords
227
+ </ListItem>
228
+ <ListItem disableGutters disablePadding>
229
+ Use general keywords
230
+ </ListItem>
231
+ <ListItem disableGutters disablePadding>
232
+ Use fewer keywords
233
+ </ListItem>
234
+ </List>
235
+ </Box>
236
+ <Link href="#">Clear filter</Link>
237
+ </EmptyState>
238
+ </StoryBox>
239
+ ),
240
+ args: {
241
+ variant: 'NoSearchFound',
242
+ },
243
+ };
244
+
146
245
  export const _PageNotFound: StoryObj<typeof EmptyState> = {
147
246
  render: (args: EmptyStateProps) => (
148
- <EmptyState {...args}>
149
- <Typography variant="h6" component="h3">
150
- Page not found
151
- </Typography>
152
- <Box>The page you are looking is no longer available.</Box>
153
- </EmptyState>
247
+ <StoryBox>
248
+ <EmptyState {...args}>
249
+ <Typography variant="h6" component="h3">
250
+ Page not found
251
+ </Typography>
252
+ <Typography variant="body2">The page you are looking is no longer available.</Typography>
253
+ </EmptyState>
254
+ </StoryBox>
154
255
  ),
155
256
  args: {
156
257
  variant: 'PageNotFound',
157
258
  },
158
259
  };
260
+
261
+ export const _SuccessConfirmation: StoryObj<typeof EmptyState> = {
262
+ render: (args: EmptyStateProps) => (
263
+ <StoryBox>
264
+ <EmptyState {...args}>
265
+ <Typography variant="h6" component="h3">
266
+ Success!
267
+ </Typography>
268
+ <Typography variant="body2">You have completed your task</Typography>
269
+ </EmptyState>
270
+ </StoryBox>
271
+ ),
272
+ args: {
273
+ variant: 'SuccessConfirmation',
274
+ },
275
+ };
package/src/lib/EmptyStateImage.stories.tsx CHANGED
@@ -1,10 +1,12 @@
1
1
  // Each exported component in the package should have its own stories file
2
2
 
3
3
  import type { StoryObj } from '@storybook/react';
4
- import { EmptyStateImage, EmptyStateImageProps } from './EmptyStateImage';
4
+ import { Box, Stack } from '@availity/mui-layout';
5
+ import { Typography } from '@availity/mui-typography';
6
+
7
+ import { EmptyStateImage, EmptyStateImageProps, EmptyStateImages } from './EmptyStateImage';
5
8
  // eslint-disable-next-line @nx/enforce-module-boundaries
6
9
  import { SystemPropsList } from '../../../../data/MuiSystemProperties';
7
- import { Box, Stack } from '@availity/mui-layout';
8
10
 
9
11
  export default {
10
12
  title: 'Components/EmptyState/EmptyStateImage',
@@ -23,24 +25,23 @@ export default {
23
25
  };
24
26
 
25
27
  export const _EmptyStateImage: StoryObj<typeof EmptyStateImage> = {
26
- render: (args: EmptyStateImageProps) => <EmptyStateImage {...args} />,
28
+ render: (args: EmptyStateImageProps) => (
29
+ <Box sx={{ backgroundColor: 'background.paper', padding: '2rem', width: '25%' }}>
30
+ <EmptyStateImage {...args} />
31
+ </Box>
32
+ ),
27
33
  };
28
34
 
35
+ const variants = Object.keys(EmptyStateImages);
36
+
29
37
  export const _variants: StoryObj<typeof EmptyStateImage> = {
30
38
  render: () => {
31
- const variants: EmptyStateImageProps['variant'][] = [
32
- 'PageNotFound',
33
- 'ContentLoading',
34
- 'Error',
35
- 'NoData',
36
- 'NoSearchFound',
37
- ];
38
39
  return (
39
- <Stack direction="row" spacing={2} flexWrap="wrap">
40
+ <Stack direction="row" spacing={2} alignItems="flex-start" flexWrap="wrap" useFlexGap>
40
41
  {variants.map((variant) => (
41
- <Box textAlign="center" key={variant}>
42
- <Box>{variant}</Box>
43
- <EmptyStateImage variant={variant} />
42
+ <Box textAlign="center" key={variant} sx={{ backgroundColor: 'background.paper', padding: '3rem' }}>
43
+ <Typography>{variant}</Typography>
44
+ <EmptyStateImage variant={variant as keyof typeof EmptyStateImages} />
44
45
  </Box>
45
46
  ))}
46
47
  </Stack>
package/src/lib/EmptyStateImage.tsx CHANGED
@@ -1,23 +1,36 @@
1
1
  import { forwardRef } from 'react';
2
2
  import { styled } from '@mui/material/styles';
3
3
  import { Box, BoxProps } from '@availity/mui-layout';
4
- import { PageNotFound } from '../assets/404-Page-Not-Found_Gray';
4
+
5
5
  import { ContentLoading } from '../assets/Content-Loading_Gray';
6
6
  import { Error } from '../assets/Error_Gray';
7
+ import { Instructional } from '../assets/Instructional_Gray';
7
8
  import { NoData } from '../assets/No-Data_Gray';
9
+ import { NoFavorites } from '../assets/No-Favorites_Gray';
10
+ import { NoMessages } from '../assets/No-Messages_Gray';
11
+ import { NoNotifications } from '../assets/No-Notifications_Gray';
12
+ import { NoPatients } from '../assets/No-Patients_Gray';
8
13
  import { NoSearchFound } from '../assets/No-Search-Found_Gray';
14
+ import { PageNotFound } from '../assets/404-Page-Not-Found_Gray';
15
+ import { SuccessConfirmation } from '../assets/Success-Confirmation_Gray';
9
16
 
10
- const EmptyStateImages = {
11
- PageNotFound,
17
+ export const EmptyStateImages = {
12
18
  ContentLoading,
13
19
  Error,
20
+ Instructional,
14
21
  NoData,
22
+ NoFavorites,
23
+ NoMessages,
24
+ NoNotifications,
25
+ NoPatients,
15
26
  NoSearchFound,
27
+ PageNotFound,
28
+ SuccessConfirmation,
16
29
  };
17
30
 
18
31
  export interface EmptyStateImageProps extends Omit<BoxProps, 'children'> {
19
32
  /** Empty State variant for image */
20
- variant?: 'PageNotFound' | 'ContentLoading' | 'Error' | 'NoData' | 'NoSearchFound';
33
+ variant?: keyof typeof EmptyStateImages;
21
34
  }
22
35
 
23
36
  const EmptyStateImageContainer = styled(Box, {