@availity/mui-empty-state 0.2.3 → 0.3.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 (16) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -1
  3. package/dist/index.d.mts +16 -2
  4. package/dist/index.d.ts +16 -2
  5. package/dist/index.js +901 -98
  6. package/dist/index.mjs +899 -97
  7. package/package.json +1 -1
  8. package/src/assets/Instructional_Gray.tsx +164 -0
  9. package/src/assets/No-Favorites_Gray.tsx +110 -0
  10. package/src/assets/No-Messages_Gray.tsx +114 -0
  11. package/src/assets/No-Notifications_Gray.tsx +124 -0
  12. package/src/assets/No-Patients_Gray.tsx +136 -0
  13. package/src/assets/Success-Confirmation_Gray.tsx +103 -0
  14. package/src/lib/EmptyState.stories.tsx +93 -0
  15. package/src/lib/EmptyStateImage.stories.tsx +6 -10
  16. 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
@@ -156,3 +156,96 @@ export const _PageNotFound: StoryObj<typeof EmptyState> = {
156
156
  variant: 'PageNotFound',
157
157
  },
158
158
  };
159
+
160
+ export const _Instructional: StoryObj<typeof EmptyState> = {
161
+ render: (args: EmptyStateProps) => (
162
+ <EmptyState {...args}>
163
+ <Typography variant="h6" component="h3">
164
+ Tasks need to be completed
165
+ </Typography>
166
+ <Typography variant="body2">You have tasks to complete</Typography>
167
+ <Button>Get Started</Button>
168
+ </EmptyState>
169
+ ),
170
+ args: {
171
+ variant: 'Instructional',
172
+ },
173
+ };
174
+
175
+ export const _NoFavorites: StoryObj<typeof EmptyState> = {
176
+ render: (args: EmptyStateProps) => (
177
+ <Box sx={{ backgroundColor: 'background.paper', width: '25%' }}>
178
+ <EmptyState {...args}>
179
+ <Typography variant="h6" component="h3">
180
+ No favorites
181
+ </Typography>
182
+ <Typography variant="body2">
183
+ It's ok to have favorites. Select the heart icon next to an application to add it to the My Favorites menu for
184
+ quick access.
185
+ </Typography>
186
+ </EmptyState>
187
+ </Box>
188
+ ),
189
+ args: {
190
+ variant: 'NoFavorites',
191
+ },
192
+ };
193
+
194
+ export const _NoMessages: StoryObj<typeof EmptyState> = {
195
+ render: (args: EmptyStateProps) => (
196
+ <Box sx={{ backgroundColor: 'background.paper', width: '25%' }}>
197
+ <EmptyState {...args}>
198
+ <Typography variant="h6" component="h3">
199
+ No messages
200
+ </Typography>
201
+ <Typography variant="body2">You do not have any messages</Typography>
202
+ </EmptyState>
203
+ </Box>
204
+ ),
205
+ args: {
206
+ variant: 'NoMessages',
207
+ },
208
+ };
209
+
210
+ export const _NoNotifications: StoryObj<typeof EmptyState> = {
211
+ render: (args: EmptyStateProps) => (
212
+ <Box sx={{ backgroundColor: 'background.paper', width: '25%' }}>
213
+ <EmptyState {...args}>
214
+ <Typography variant="h6" component="h3">
215
+ No notifications
216
+ </Typography>
217
+ <Typography variant="body2">You do not have any notifications</Typography>
218
+ </EmptyState>
219
+ </Box>
220
+ ),
221
+ args: {
222
+ variant: 'NoNotifications',
223
+ },
224
+ };
225
+
226
+ export const _NoPatients: StoryObj<typeof EmptyState> = {
227
+ render: (args: EmptyStateProps) => (
228
+ <EmptyState {...args}>
229
+ <Typography variant="h6" component="h3">
230
+ Patient(s) not found
231
+ </Typography>
232
+ </EmptyState>
233
+ ),
234
+ args: {
235
+ variant: 'NoPatients',
236
+ },
237
+ };
238
+
239
+ export const _SuccessConfirmation: StoryObj<typeof EmptyState> = {
240
+ render: (args: EmptyStateProps) => (
241
+ <EmptyState {...args}>
242
+ <Typography variant="h6" component="h3">
243
+ Success!
244
+ </Typography>
245
+ <Typography variant="body2">You have completed your task</Typography>
246
+ </EmptyState>
247
+ ),
248
+ args: {
249
+ variant: 'SuccessConfirmation',
250
+ },
251
+ };
package/src/lib/EmptyStateImage.stories.tsx CHANGED
@@ -1,10 +1,11 @@
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
+
6
+ import { EmptyStateImage, EmptyStateImageProps, EmptyStateImages } from './EmptyStateImage';
5
7
  // eslint-disable-next-line @nx/enforce-module-boundaries
6
8
  import { SystemPropsList } from '../../../../data/MuiSystemProperties';
7
- import { Box, Stack } from '@availity/mui-layout';
8
9
 
9
10
  export default {
10
11
  title: 'Components/EmptyState/EmptyStateImage',
@@ -26,21 +27,16 @@ export const _EmptyStateImage: StoryObj<typeof EmptyStateImage> = {
26
27
  render: (args: EmptyStateImageProps) => <EmptyStateImage {...args} />,
27
28
  };
28
29
 
30
+ const variants = Object.keys(EmptyStateImages);
31
+
29
32
  export const _variants: StoryObj<typeof EmptyStateImage> = {
30
33
  render: () => {
31
- const variants: EmptyStateImageProps['variant'][] = [
32
- 'PageNotFound',
33
- 'ContentLoading',
34
- 'Error',
35
- 'NoData',
36
- 'NoSearchFound',
37
- ];
38
34
  return (
39
35
  <Stack direction="row" spacing={2} flexWrap="wrap">
40
36
  {variants.map((variant) => (
41
37
  <Box textAlign="center" key={variant}>
42
38
  <Box>{variant}</Box>
43
- <EmptyStateImage variant={variant} />
39
+ <EmptyStateImage variant={variant as keyof typeof EmptyStateImages} />
44
40
  </Box>
45
41
  ))}
46
42
  </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, {