@availity/mui-empty-state 0.1.0 → 0.1.2

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 (20) hide show
  1. package/CHANGELOG.md +17 -3
  2. package/dist/index.js +599 -19
  3. package/dist/index.mjs +604 -24
  4. package/package.json +1 -1
  5. package/src/assets/404-Page-Not-Found_Gray.tsx +44 -0
  6. package/src/assets/{Content-Loading_Gray.svg → Content-Loading_Gray.tsx} +36 -18
  7. package/src/assets/{Error_Gray.svg → Error_Gray.tsx} +67 -31
  8. package/src/assets/{No-Data_Gray.svg → No-Data_Gray.tsx} +42 -21
  9. package/{dist/No-Search-Found_Gray-4OSPRMF4.svg → src/assets/No-Search-Found_Gray.tsx} +52 -25
  10. package/src/lib/EmptyState.stories.tsx +24 -2
  11. package/src/lib/EmptyState.test.tsx +2 -2
  12. package/src/lib/EmptyStateImage.test.tsx +2 -2
  13. package/src/lib/EmptyStateImage.tsx +14 -12
  14. package/dist/404-Page-Not-Found_Gray-COTPFMFP.svg +0 -25
  15. package/dist/Content-Loading_Gray-AGUNV3ID.svg +0 -94
  16. package/dist/Error_Gray-H3D5B6BV.svg +0 -258
  17. package/dist/No-Data_Gray-JVSMIDTK.svg +0 -215
  18. package/src/assets/404-Page-Not-Found_Gray.svg +0 -25
  19. package/src/assets/No-Search-Found_Gray.svg +0 -238
  20. package/src/assets/custom.d.ts +0 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-empty-state",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Availity MUI EmptyState Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
package/src/assets/404-Page-Not-Found_Gray.tsx ADDED
@@ -0,0 +1,44 @@
1
+ export const PageNotFound = () => {
2
+ return (
3
+ <svg
4
+ id="Layer_1"
5
+ data-name="Layer 1"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ viewBox="0 0 144 144"
8
+ aria-label="Page Not Found"
9
+ aria-hidden="true"
10
+ >
11
+ <defs>
12
+ <style>
13
+ {`.cls-1 {
14
+ fill: #fff;
15
+ stroke: #d7dae0;
16
+ stroke-linecap: round;
17
+ stroke-linejoin: round;
18
+ stroke-width: 4px;
19
+ }
20
+
21
+ .cls-2 {
22
+ fill: #d7dae0;
23
+ stroke-width: 0px;
24
+ }`}
25
+ </style>
26
+ </defs>
27
+ <circle className="cls-1" cx="72" cy="72" r="65.36" />
28
+ <g>
29
+ <path
30
+ className="cls-2"
31
+ d="m41.45,81.06h-15.96v-5.15l16.54-22.52h7.28v21.63h5.1v6.03h-5.1v6.97h-7.85v-6.97Zm-4.37-6.03h4.47v-11.39h-.1l-8.16,11.54c.73-.1,2.08-.16,3.8-.16Z"
32
+ />
33
+ <path
34
+ className="cls-2"
35
+ d="m57.62,70.71c0-9.2,3.85-17.94,14.3-17.94s14.46,8.79,14.46,17.94-4.11,17.94-14.4,17.94-14.35-8.79-14.35-17.94Zm20.23,0c0-7.59-1.66-11.7-5.88-11.7s-5.88,4.11-5.88,11.7,1.61,11.7,5.82,11.7,5.93-4.11,5.93-11.7Z"
36
+ />
37
+ <path
38
+ className="cls-2"
39
+ d="m105.25,81.06h-15.96v-5.15l16.54-22.52h7.28v21.63h5.1v6.03h-5.1v6.97h-7.85v-6.97Zm-4.37-6.03h4.47v-11.39h-.1l-8.16,11.54c.73-.1,2.08-.16,3.8-.16Z"
40
+ />
41
+ </g>
42
+ </svg>
43
+ );
44
+ };
package/src/assets/{Content-Loading_Gray.svg → Content-Loading_Gray.tsx} RENAMED
@@ -1,9 +1,19 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
1
+ export const ContentLoading = () => {
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
+ aria-label="Content Loading"
13
+ aria-hidden="true"
14
+ >
15
+ <style type="text/css">
16
+ {`.st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
7
17
  .st1{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
8
18
  .st2{fill:#FFFFFF;}
9
19
  .st3{fill:#BBD6EB;}
@@ -79,16 +89,24 @@
79
89
  .st73{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
80
90
  .st74{fill:#E5E5E5;}
81
91
  .st75{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
82
- .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
83
- </style>
84
- <g>
85
- <path class="st4" d="M118.7,52c0.5-2.3,0.8-4.7,0.8-7.1c0-17.6-14.3-31.9-31.9-31.9c-13,0-24.2,7.8-29.1,18.9
92
+ .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}`}
93
+ </style>
94
+ <g>
95
+ <path
96
+ className="st4"
97
+ d="M118.7,52c0.5-2.3,0.8-4.7,0.8-7.1c0-17.6-14.3-31.9-31.9-31.9c-13,0-24.2,7.8-29.1,18.9
86
98
  c-3.7-2.1-7.9-3.3-12.4-3.3c-13.8,0-24.9,11.2-24.9,24.9c0,0,0,0.1,0,0.1C11.3,56.7,4,65.9,4,76.8C4,90.2,14.9,101,28.2,101h87.1
87
- c13.6,0,24.6-11,24.6-24.6C140,64,130.7,53.7,118.7,52z"/>
88
- <g>
89
- <circle class="st71" cx="72" cy="101" r="30"/>
90
- </g>
91
- <path class="st51" d="M86.9,100.3c-1.4-1.4-3.7-1.4-5.1,0l-6.2,6.2V81.7h-7.2v24.8l-6.2-6.2c-1.4-1.4-3.7-1.4-5.1,0
92
- c-1.4,1.4-1.4,3.7,0,5.1l15,15l15-15C88.3,104,88.3,101.7,86.9,100.3z"/>
93
- </g>
94
- </svg>
99
+ c13.6,0,24.6-11,24.6-24.6C140,64,130.7,53.7,118.7,52z"
100
+ />
101
+ <g>
102
+ <circle className="st71" cx="72" cy="101" r="30" />
103
+ </g>
104
+ <path
105
+ className="st51"
106
+ d="M86.9,100.3c-1.4-1.4-3.7-1.4-5.1,0l-6.2,6.2V81.7h-7.2v24.8l-6.2-6.2c-1.4-1.4-3.7-1.4-5.1,0
107
+ c-1.4,1.4-1.4,3.7,0,5.1l15,15l15-15C88.3,104,88.3,101.7,86.9,100.3z"
108
+ />
109
+ </g>
110
+ </svg>
111
+ );
112
+ };
package/src/assets/{Error_Gray.svg → Error_Gray.tsx} RENAMED
@@ -1,9 +1,19 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
1
+ export const Error = () => {
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
+ aria-label="Error"
13
+ aria-hidden="true"
14
+ >
15
+ <style type="text/css">
16
+ {`.st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
7
17
  .st1{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
8
18
  .st2{fill:#FFFFFF;}
9
19
  .st3{fill:#BBD6EB;}
@@ -79,19 +89,33 @@
79
89
  .st73{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
80
90
  .st74{fill:#E5E5E5;}
81
91
  .st75{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
82
- .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
83
- </style>
84
- <rect x="21" y="34.2" class="st2" width="101.9" height="57.1"/>
85
- <path class="st4" d="M23.4,36.6h97.2v37.1h5.1V33.6c0-1.2-1-2.2-2.2-2.2H20.5c-1.2,0-2.2,1-2.2,2.2v40.1h5.1V36.6z"/>
86
- <path class="st4" d="M126.1,97.3H17.9L4,126.4H140L126.1,97.3z M58.5,122.6L61,115H83l2.4,7.6H58.5z M24.3,111.2l4.7-10.1H115
87
- l4.7,10.1H24.3z"/>
88
- <polygon class="st2" points="61,115 58.5,122.6 85.5,122.6 83,115 "/>
89
- <polygon class="st2" points="29,101.2 24.3,111.2 119.7,111.2 115,101.2 "/>
90
- <path class="st4" d="M135.3,131.7H8.7c-0.9,0-1.9-0.4-2.5-1.1L4,128.2H140l-2.2,2.5C137.2,131.3,136.3,131.7,135.3,131.7z"/>
91
- <g>
92
- <path class="st2" d="M32.3,16.3v74.3c0,2.5,1.8,1.7,4.1,1.7h71.3c2.3,0,4.1,0.8,4.1-1.7V16.3c0-2.5-1.8-4.6-4.1-4.6H36.4
93
- C34.1,11.7,32.3,13.8,32.3,16.3z"/>
94
- <path class="st4" d="M94.6,11.7h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C95.6,12.2,95.2,11.7,94.6,11.7L94.6,11.7z
92
+ .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}`}
93
+ </style>
94
+ <rect x="21" y="34.2" className="st2" width="101.9" height="57.1" />
95
+ <path
96
+ className="st4"
97
+ d="M23.4,36.6h97.2v37.1h5.1V33.6c0-1.2-1-2.2-2.2-2.2H20.5c-1.2,0-2.2,1-2.2,2.2v40.1h5.1V36.6z"
98
+ />
99
+ <path
100
+ className="st4"
101
+ d="M126.1,97.3H17.9L4,126.4H140L126.1,97.3z M58.5,122.6L61,115H83l2.4,7.6H58.5z M24.3,111.2l4.7-10.1H115
102
+ l4.7,10.1H24.3z"
103
+ />
104
+ <polygon className="st2" points="61,115 58.5,122.6 85.5,122.6 83,115 " />
105
+ <polygon className="st2" points="29,101.2 24.3,111.2 119.7,111.2 115,101.2 " />
106
+ <path
107
+ className="st4"
108
+ d="M135.3,131.7H8.7c-0.9,0-1.9-0.4-2.5-1.1L4,128.2H140l-2.2,2.5C137.2,131.3,136.3,131.7,135.3,131.7z"
109
+ />
110
+ <g>
111
+ <path
112
+ className="st2"
113
+ d="M32.3,16.3v74.3c0,2.5,1.8,1.7,4.1,1.7h71.3c2.3,0,4.1,0.8,4.1-1.7V16.3c0-2.5-1.8-4.6-4.1-4.6H36.4
114
+ C34.1,11.7,32.3,13.8,32.3,16.3z"
115
+ />
116
+ <path
117
+ className="st4"
118
+ d="M94.6,11.7h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C95.6,12.2,95.2,11.7,94.6,11.7L94.6,11.7z
95
119
  M81.6,11.7h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C82.6,12.2,82.2,11.7,81.6,11.7L81.6,11.7z M68.6,11.7h-8
96
120
  c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C69.6,12.2,69.2,11.7,68.6,11.7L68.6,11.7z M55.6,11.7h-8c-0.6,0-1,0.4-1,1
97
121
  c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C56.6,12.2,56.2,11.7,55.6,11.7L55.6,11.7z M42.6,11.7h-6.3l0,0c0,0,0,0,0,0c0,0,0,0,0,0
@@ -243,16 +267,28 @@
243
267
  C107.7,11.7,107.7,11.7,107.6,11.7C107.7,11.7,107.7,11.7,107.6,11.7C107.7,11.7,107.7,11.7,107.6,11.7
244
268
  C107.7,11.7,107.7,11.7,107.6,11.7C107.7,11.7,107.7,11.7,107.6,11.7C107.6,11.7,107.6,11.7,107.6,11.7
245
269
  C107.6,11.7,107.6,11.7,107.6,11.7C107.6,11.7,107.6,11.7,107.6,11.7C107.6,11.7,107.6,11.7,107.6,11.7
246
- C107.6,11.7,107.6,11.7,107.6,11.7C107.6,11.7,107.6,11.7,107.6,11.7L107.6,11.7L107.6,11.7z"/>
247
- </g>
248
- <g>
249
- <path class="st71" d="M70.5,28.3L46.2,70.4c-0.7,1.1,0.2,2.6,1.5,2.6h48.7c1.3,0,2.1-1.4,1.5-2.6L73.5,28.3
270
+ C107.6,11.7,107.6,11.7,107.6,11.7C107.6,11.7,107.6,11.7,107.6,11.7L107.6,11.7L107.6,11.7z"
271
+ />
272
+ </g>
273
+ <g>
274
+ <path
275
+ className="st71"
276
+ d="M70.5,28.3L46.2,70.4c-0.7,1.1,0.2,2.6,1.5,2.6h48.7c1.3,0,2.1-1.4,1.5-2.6L73.5,28.3
250
277
  C72.8,27.2,71.2,27.2,70.5,28.3L46.2,70.4c-0.7,1.1,0.2,2.6,1.5,2.6h48.7c1.3,0,2.1-1.4,1.5-2.6L73.5,28.3
251
- C72.8,27.2,71.2,27.2,70.5,28.3z"/>
252
- <g>
253
- <path class="st51" d="M69.2,62.3c0-1.5,1.2-2.7,2.8-2.7c1.6,0,2.8,1.2,2.8,2.7c0,1.5-1.2,2.7-2.8,2.7
254
- C70.4,65.1,69.2,63.8,69.2,62.3z M69.4,42.8h5.1l-0.8,14.5h-3.5L69.4,42.8z"/>
255
- </g>
256
- </g>
257
- <polygon class="st4" points="120.6,73.7 120.6,89.3 23.4,89.3 23.4,73.7 18.3,73.7 18.3,95.5 125.7,95.5 125.7,73.7 "/>
258
- </svg>
278
+ C72.8,27.2,71.2,27.2,70.5,28.3z"
279
+ />
280
+ <g>
281
+ <path
282
+ className="st51"
283
+ d="M69.2,62.3c0-1.5,1.2-2.7,2.8-2.7c1.6,0,2.8,1.2,2.8,2.7c0,1.5-1.2,2.7-2.8,2.7
284
+ C70.4,65.1,69.2,63.8,69.2,62.3z M69.4,42.8h5.1l-0.8,14.5h-3.5L69.4,42.8z"
285
+ />
286
+ </g>
287
+ </g>
288
+ <polygon
289
+ className="st4"
290
+ points="120.6,73.7 120.6,89.3 23.4,89.3 23.4,73.7 18.3,73.7 18.3,95.5 125.7,95.5 125.7,73.7 "
291
+ />
292
+ </svg>
293
+ );
294
+ };
package/src/assets/{No-Data_Gray.svg → No-Data_Gray.tsx} RENAMED
@@ -1,9 +1,19 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
1
+ export const NoData = () => {
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
+ aria-label="No Data"
13
+ aria-hidden="true"
14
+ >
15
+ <style type="text/css">
16
+ {`.st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
7
17
  .st1{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
8
18
  .st2{fill:#FFFFFF;}
9
19
  .st3{fill:#BBD6EB;}
@@ -79,11 +89,13 @@
79
89
  .st73{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
80
90
  .st74{fill:#E5E5E5;}
81
91
  .st75{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
82
- .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
83
- </style>
84
- <g>
85
- <path class="st2" d="M124,12.9H20c-2.8,0-5.1,2-5.1,4.4v82.2h114.1V17.3C129.1,14.9,126.8,12.9,124,12.9z"/>
86
- <path class="st4" d="M111,12.9h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C112,13.4,111.5,12.9,111,12.9L111,12.9z
92
+ .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}`}
93
+ </style>
94
+ <g>
95
+ <path className="st2" d="M124,12.9H20c-2.8,0-5.1,2-5.1,4.4v82.2h114.1V17.3C129.1,14.9,126.8,12.9,124,12.9z" />
96
+ <path
97
+ className="st4"
98
+ d="M111,12.9h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C112,13.4,111.5,12.9,111,12.9L111,12.9z
87
99
  M98,12.9h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C99,13.4,98.5,12.9,98,12.9L98,12.9z M85,12.9h-8
88
100
  c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C86,13.4,85.5,12.9,85,12.9L85,12.9z M72,12.9h-8c-0.6,0-1,0.4-1,1
89
101
  c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C73,13.4,72.5,12.9,72,12.9L72,12.9z M59,12.9h-8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8
@@ -203,13 +215,22 @@
203
215
  C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9
204
216
  C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9
205
217
  C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9
206
- C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9L124,12.9z"/>
207
- </g>
208
- <path class="st4" d="M80.8,30.1L66,44.9H9c-3,0-5.3,2.6-4.8,5.6l8.5,58c0.2,1.3,1.3,2.3,2.7,2.3h111.3c1.4,0,2.5-1,2.7-2.3
209
- l10.6-72.9c0.4-3-1.9-5.6-4.8-5.6H80.8z"/>
210
- <g>
211
- <circle class="st71" cx="107.4" cy="99.4" r="30.5"/>
212
- <polygon class="st51" points="124.8,88 118.7,81.9 107.3,93.3 95.8,81.9 89.7,88 101.2,99.5 89.7,110.9 95.8,117 107.3,105.6
213
- 118.7,117 124.8,110.9 113.4,99.5 "/>
214
- </g>
215
- </svg>
218
+ C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9C124,12.9,124,12.9,124,12.9L124,12.9z"
219
+ />
220
+ </g>
221
+ <path
222
+ className="st4"
223
+ d="M80.8,30.1L66,44.9H9c-3,0-5.3,2.6-4.8,5.6l8.5,58c0.2,1.3,1.3,2.3,2.7,2.3h111.3c1.4,0,2.5-1,2.7-2.3
224
+ l10.6-72.9c0.4-3-1.9-5.6-4.8-5.6H80.8z"
225
+ />
226
+ <g>
227
+ <circle className="st71" cx="107.4" cy="99.4" r="30.5" />
228
+ <polygon
229
+ className="st51"
230
+ points="124.8,88 118.7,81.9 107.3,93.3 95.8,81.9 89.7,88 101.2,99.5 89.7,110.9 95.8,117 107.3,105.6
231
+ 118.7,117 124.8,110.9 113.4,99.5 "
232
+ />
233
+ </g>
234
+ </svg>
235
+ );
236
+ };
package/{dist/No-Search-Found_Gray-4OSPRMF4.svg → src/assets/No-Search-Found_Gray.tsx} RENAMED
@@ -1,9 +1,19 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
1
+ export const NoSearchFound = () => {
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
+ aria-label="No Search Found"
13
+ aria-hidden="true"
14
+ >
15
+ <style type="text/css">
16
+ {`.st0{fill:#FFFFFF;stroke:#BBD6EB;stroke-miterlimit:10;}
7
17
  .st1{fill:#FFFFFF;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
8
18
  .st2{fill:#FFFFFF;}
9
19
  .st3{fill:#BBD6EB;}
@@ -79,12 +89,17 @@
79
89
  .st73{fill:#FFFFFF;stroke:#1A74CC;stroke-miterlimit:10;}
80
90
  .st74{fill:#E5E5E5;}
81
91
  .st75{fill:#BBD6EB;stroke:#BBD6EB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
82
- .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}
83
- </style>
84
- <g>
85
- <path class="st2" d="M63.6,17.8c-2-0.5-4.1,0.8-4.6,2.8L43.4,84.3l-3.2,13.1l-4.9,20c-0.5,2,0.8,4.1,2.8,4.6l72.9,17.8
86
- c2,0.5,4.1-0.8,4.6-2.8l4.9-20l3.2-13.1l15.6-63.8c0.5-2-0.8-4.1-2.8-4.6L63.6,17.8z"/>
87
- <path class="st4" d="M62.7,17.7c-1.7,0-3.3,1.2-3.7,2.9l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0
92
+ .st76{fill:#FFFFFF;stroke:#EEEFF2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:8,5;}`}
93
+ </style>
94
+ <g>
95
+ <path
96
+ className="st2"
97
+ d="M63.6,17.8c-2-0.5-4.1,0.8-4.6,2.8L43.4,84.3l-3.2,13.1l-4.9,20c-0.5,2,0.8,4.1,2.8,4.6l72.9,17.8
98
+ c2,0.5,4.1-0.8,4.6-2.8l4.9-20l3.2-13.1l15.6-63.8c0.5-2-0.8-4.1-2.8-4.6L63.6,17.8z"
99
+ />
100
+ <path
101
+ className="st4"
102
+ d="M62.7,17.7c-1.7,0-3.3,1.2-3.7,2.9l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0
88
103
  c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0
89
104
  l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l-0.6,2.6c-0.1,0.5,0.2,1.1,0.7,1.2c0.1,0,0.2,0,0.2,0c0.5,0,0.9-0.3,1-0.8L61,21
90
105
  c0.2-0.8,0.9-1.4,1.8-1.4c0.2,0,0.3,0,0.5-0.1c0.1,0.1,0.3,0.3,0.5,0.3l7.8,1.9c0.1,0,0.2,0,0.2,0c0.5,0,0.9-0.3,1-0.8
@@ -223,16 +238,28 @@
223
238
  c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0
224
239
  l0,0c0,0,0,0,0,0l-0.1,0l0,0l-0.5-0.1C89.4,24.1,89.3,24.1,89.2,24.1L89.2,24.1z M76.6,21c-0.5,0-0.9,0.3-1,0.8
225
240
  c-0.1,0.5,0.2,1.1,0.7,1.2l7.8,1.9c0.1,0,0.2,0,0.2,0c0.5,0,0.9-0.3,1-0.8c0.1-0.5-0.2-1.1-0.7-1.2c0,0-4.3-1.1-6.5-1.6l0,0
226
- c0,0,0,0,0,0l0,0c0,0,0,0,0,0l-0.1,0l0,0l-0.1,0c0,0,0,0,0,0L76.8,21C76.7,21,76.6,21,76.6,21L76.6,21z"/>
227
- </g>
228
- <path class="st4" d="M7,18.3c-2.1,0.4-3.4,2.4-3,4.5l12.5,64.9l2.6,13.3l3.9,20.4c0.4,2.1,2.4,3.4,4.5,3l74.2-14.3
229
- c2.1-0.4,3.4-2.4,3-4.5l-3.9-20.4l-2.6-13.3L85.8,7c-0.4-2.1-2.4-3.4-4.5-3L7,18.3z"/>
230
- <g>
231
- <path class="st51" d="M113.3,108.9l-4.5,4.5c-1.2,1.2-3.2,1.2-4.4,0L80.3,89.2c-1.2-1.2-1.2-3.2,0-4.4l4.5-4.5
232
- c1.2-1.2,3.2-1.2,4.4,0l24.1,24.1C114.5,105.7,114.5,107.7,113.3,108.9z"/>
233
- <circle class="st71" cx="58.3" cy="58.3" r="28.5"/>
234
- <polygon class="st51" points="74.7,47.7 68.9,41.9 58.2,52.6 47.5,41.9 41.8,47.7 52.5,58.4 41.8,69.1 47.5,74.8 58.2,64.1
235
- 68.9,74.8 74.7,69.1 63.9,58.4 "/>
236
- </g>
237
- <line class="st72" x1="78.5" y1="78.4" x2="90.2" y2="90.1"/>
238
- </svg>
241
+ c0,0,0,0,0,0l0,0c0,0,0,0,0,0l-0.1,0l0,0l-0.1,0c0,0,0,0,0,0L76.8,21C76.7,21,76.6,21,76.6,21L76.6,21z"
242
+ />
243
+ </g>
244
+ <path
245
+ className="st4"
246
+ d="M7,18.3c-2.1,0.4-3.4,2.4-3,4.5l12.5,64.9l2.6,13.3l3.9,20.4c0.4,2.1,2.4,3.4,4.5,3l74.2-14.3
247
+ c2.1-0.4,3.4-2.4,3-4.5l-3.9-20.4l-2.6-13.3L85.8,7c-0.4-2.1-2.4-3.4-4.5-3L7,18.3z"
248
+ />
249
+ <g>
250
+ <path
251
+ className="st51"
252
+ d="M113.3,108.9l-4.5,4.5c-1.2,1.2-3.2,1.2-4.4,0L80.3,89.2c-1.2-1.2-1.2-3.2,0-4.4l4.5-4.5
253
+ c1.2-1.2,3.2-1.2,4.4,0l24.1,24.1C114.5,105.7,114.5,107.7,113.3,108.9z"
254
+ />
255
+ <circle className="st71" cx="58.3" cy="58.3" r="28.5" />
256
+ <polygon
257
+ className="st51"
258
+ points="74.7,47.7 68.9,41.9 58.2,52.6 47.5,41.9 41.8,47.7 52.5,58.4 41.8,69.1 47.5,74.8 58.2,64.1
259
+ 68.9,74.8 74.7,69.1 63.9,58.4 "
260
+ />
261
+ </g>
262
+ <line className="st72" x1="78.5" y1="78.4" x2="90.2" y2="90.1" />
263
+ </svg>
264
+ );
265
+ };
package/src/lib/EmptyState.stories.tsx CHANGED
@@ -1,12 +1,33 @@
1
1
  // Each exported component in the package should have its own stories file
2
2
 
3
- import type { Meta, StoryObj } from '@storybook/react';
3
+ import type { Meta, StoryObj, Decorator } from '@storybook/react';
4
4
  import { Box, Button, List, ListItem, Typography } from '@mui/material';
5
+ import { visuallyHidden } from '@mui/utils';
5
6
  import { Link } from '@availity/mui-link';
6
7
  import { EmptyState, EmptyStateProps } from './EmptyState';
7
8
  import { SystemPropsList } from '../../../../data/MuiSystemProperties';
8
9
 
9
- /** Built on top of the `Stack` component, `EmptyState` will add the desired spacing to every direct descendant. */
10
+ /** Remove 508 warning of Heading Level Jump while leaving Story heading levels realistic */
11
+ const HeadingLevelDecorator: Decorator = (Story, context) => (
12
+ <>
13
+ {context.viewMode !== 'docs' ? (
14
+ <>
15
+ <Typography variant="h1" sx={visuallyHidden}>
16
+ Component: Empty State
17
+ </Typography>
18
+ <Typography variant="h2" sx={visuallyHidden}>
19
+ Story: {context.name}
20
+ </Typography>
21
+ </>
22
+ ) : null}
23
+ <Story />
24
+ </>
25
+ );
26
+
27
+ /** Built on top of the `Stack` component, `EmptyState` will add the desired spacing to every direct descendant.
28
+ *
29
+ * _Accessibility Note: Check the appropriate heading level needed for your usage to not create a heading jump._
30
+ */
10
31
  export default {
11
32
  title: 'Components/EmptyState/EmptyState',
12
33
  component: EmptyState,
@@ -14,6 +35,7 @@ export default {
14
35
  args: {
15
36
  variant: 'NoSearchFound',
16
37
  },
38
+ decorators: [HeadingLevelDecorator],
17
39
  parameters: {
18
40
  docs: {
19
41
  controls: {
package/src/lib/EmptyState.test.tsx CHANGED
@@ -7,7 +7,7 @@ describe('EmptyState', () => {
7
7
  expect(getByText('Test')).toBeTruthy();
8
8
  });
9
9
  test('should render EmptyStateImage when variant passed', () => {
10
- const { getByRole } = render(<EmptyState variant="NoSearchFound">Test</EmptyState>);
11
- expect(getByRole('img', { hidden: true })).toBeTruthy();
10
+ const { getByLabelText } = render(<EmptyState variant="NoSearchFound">Test</EmptyState>);
11
+ expect(getByLabelText('No Search Found')).toBeTruthy();
12
12
  });
13
13
  });
package/src/lib/EmptyStateImage.test.tsx CHANGED
@@ -3,7 +3,7 @@ import { EmptyStateImage } from './EmptyStateImage';
3
3
 
4
4
  describe('EmptyStateImages', () => {
5
5
  test('should render successfully', () => {
6
- const { getByRole } = render(<EmptyStateImage />);
7
- expect(getByRole('img', { hidden: true })).toBeTruthy();
6
+ const { getByLabelText } = render(<EmptyStateImage />);
7
+ expect(getByLabelText('No Search Found')).toBeTruthy();
8
8
  });
9
9
  });
package/src/lib/EmptyStateImage.tsx CHANGED
@@ -1,18 +1,18 @@
1
1
  import { forwardRef } from 'react';
2
2
  import { styled } from '@mui/material';
3
3
  import { Box, BoxProps } from '@availity/mui-layout';
4
- import PageNotFound from '../assets/404-Page-Not-Found_Gray.svg';
5
- import ContentLoading from '../assets/Content-Loading_Gray.svg';
6
- import Error from '../assets/Error_Gray.svg';
7
- import NoData from '../assets/No-Data_Gray.svg';
8
- import NoSearchFound from '../assets/No-Search-Found_Gray.svg';
4
+ import { PageNotFound } from '../assets/404-Page-Not-Found_Gray';
5
+ import { ContentLoading } from '../assets/Content-Loading_Gray';
6
+ import { Error } from '../assets/Error_Gray';
7
+ import { NoData } from '../assets/No-Data_Gray';
8
+ import { NoSearchFound } from '../assets/No-Search-Found_Gray';
9
9
 
10
- const EmptyStateImages: Record<string, { src: string; alt: string }> = {
11
- PageNotFound: { src: PageNotFound, alt: 'Page Not Found' },
12
- ContentLoading: { src: ContentLoading, alt: 'Content Loading' },
13
- Error: { src: Error, alt: 'Error' },
14
- NoData: { src: NoData, alt: 'No Data' },
15
- NoSearchFound: { src: NoSearchFound, alt: 'No Search Found' },
10
+ const EmptyStateImages = {
11
+ PageNotFound,
12
+ ContentLoading,
13
+ Error,
14
+ NoData,
15
+ NoSearchFound,
16
16
  };
17
17
 
18
18
  export interface EmptyStateImageProps extends Omit<BoxProps, 'children'> {
@@ -30,9 +30,11 @@ const EmptyStateImageContainer = styled(Box, {
30
30
  export const EmptyStateImage = forwardRef<unknown, EmptyStateImageProps>((props, ref) => {
31
31
  const { variant = 'NoSearchFound', ...rest } = props;
32
32
 
33
+ const Image = EmptyStateImages[variant];
34
+
33
35
  return (
34
36
  <EmptyStateImageContainer ref={ref} aria-hidden {...rest}>
35
- <img src={EmptyStateImages[variant].src} alt={EmptyStateImages[variant].alt} />
37
+ <Image />
36
38
  </EmptyStateImageContainer>
37
39
  );
38
40
  });
package/dist/404-Page-Not-Found_Gray-COTPFMFP.svg DELETED
@@ -1,25 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
3
- <defs>
4
- <style>
5
- .cls-1 {
6
- fill: #fff;
7
- stroke: #d7dae0;
8
- stroke-linecap: round;
9
- stroke-linejoin: round;
10
- stroke-width: 4px;
11
- }
12
-
13
- .cls-2 {
14
- fill: #d7dae0;
15
- stroke-width: 0px;
16
- }
17
- </style>
18
- </defs>
19
- <circle class="cls-1" cx="72" cy="72" r="65.36"/>
20
- <g>
21
- <path class="cls-2" d="m41.45,81.06h-15.96v-5.15l16.54-22.52h7.28v21.63h5.1v6.03h-5.1v6.97h-7.85v-6.97Zm-4.37-6.03h4.47v-11.39h-.1l-8.16,11.54c.73-.1,2.08-.16,3.8-.16Z"/>
22
- <path class="cls-2" d="m57.62,70.71c0-9.2,3.85-17.94,14.3-17.94s14.46,8.79,14.46,17.94-4.11,17.94-14.4,17.94-14.35-8.79-14.35-17.94Zm20.23,0c0-7.59-1.66-11.7-5.88-11.7s-5.88,4.11-5.88,11.7,1.61,11.7,5.82,11.7,5.93-4.11,5.93-11.7Z"/>
23
- <path class="cls-2" d="m105.25,81.06h-15.96v-5.15l16.54-22.52h7.28v21.63h5.1v6.03h-5.1v6.97h-7.85v-6.97Zm-4.37-6.03h4.47v-11.39h-.1l-8.16,11.54c.73-.1,2.08-.16,3.8-.16Z"/>
24
- </g>
25
- </svg>