@availity/mui-empty-state 0.3.0 → 0.3.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.
- package/CHANGELOG.md +14 -0
- package/package.json +1 -1
- package/src/lib/EmptyState.stories.tsx +146 -106
- package/src/lib/EmptyStateImage.stories.tsx +24 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.3.2](https://github.com/Availity/element/compare/@availity/mui-empty-state@0.3.1...@availity/mui-empty-state@0.3.2) (2025-01-24)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **mui-empty-state:** update stories ([65b5d9e](https://github.com/Availity/element/commit/65b5d9e0b23cc3e9489cb6480512a2989370a445))
|
|
11
|
+
|
|
12
|
+
## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-empty-state@0.3.0...@availity/mui-empty-state@0.3.1) (2025-01-23)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **mui-empty-state:** update stories ([19d5cbb](https://github.com/Availity/element/commit/19d5cbb52859edeff75b6f31d29b4c2e9a07613f))
|
|
18
|
+
|
|
5
19
|
## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-empty-state@0.2.4...@availity/mui-empty-state@0.3.0) (2025-01-22)
|
|
6
20
|
|
|
7
21
|
|
package/package.json
CHANGED
|
@@ -29,6 +29,26 @@ const HeadingLevelDecorator: Decorator = (Story, context) => (
|
|
|
29
29
|
</>
|
|
30
30
|
);
|
|
31
31
|
|
|
32
|
+
const StoryBox = ({ children }: { children: React.ReactNode }) => (
|
|
33
|
+
<Box
|
|
34
|
+
sx={{
|
|
35
|
+
backgroundColor: 'background.paper',
|
|
36
|
+
width: {
|
|
37
|
+
xs: '100%',
|
|
38
|
+
md: '25%',
|
|
39
|
+
},
|
|
40
|
+
mx: 'auto',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
flexDirection: 'column',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
justifyContent: 'center',
|
|
45
|
+
textAlign: 'center',
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
{children}
|
|
49
|
+
</Box>
|
|
50
|
+
);
|
|
51
|
+
|
|
32
52
|
/** Built on top of the `Stack` component, `EmptyState` will add the desired spacing to every direct descendant.
|
|
33
53
|
*
|
|
34
54
|
* _Accessibility Note: Check the appropriate heading level needed for your usage to not create a heading jump._
|
|
@@ -52,129 +72,92 @@ export default {
|
|
|
52
72
|
|
|
53
73
|
export const _EmptyState: StoryObj<typeof EmptyState> = {
|
|
54
74
|
render: (args: EmptyStateProps) => (
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
75
|
+
<StoryBox>
|
|
76
|
+
<EmptyState {...args}>
|
|
77
|
+
<Typography variant="h6" component="h3">
|
|
78
|
+
Header
|
|
79
|
+
</Typography>
|
|
80
|
+
<Typography variant="body2">
|
|
81
|
+
This body explains the empty state. The illustration relates to the situation.
|
|
82
|
+
</Typography>
|
|
83
|
+
<Button>Optional Button</Button>
|
|
84
|
+
<Link href="#">Optional Link</Link>
|
|
85
|
+
</EmptyState>
|
|
86
|
+
</StoryBox>
|
|
63
87
|
),
|
|
64
88
|
};
|
|
65
89
|
|
|
66
|
-
export const
|
|
90
|
+
export const _ContentLoading: StoryObj<typeof EmptyState> = {
|
|
67
91
|
render: (args: EmptyStateProps) => (
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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>
|
|
92
|
+
<StoryBox>
|
|
93
|
+
<EmptyState {...args}>
|
|
94
|
+
<Typography variant="h6" component="h3">
|
|
95
|
+
Content Loading
|
|
96
|
+
</Typography>
|
|
97
|
+
<Typography variant="body2">Data is loading.</Typography>
|
|
98
|
+
</EmptyState>
|
|
99
|
+
</StoryBox>
|
|
95
100
|
),
|
|
96
101
|
args: {
|
|
97
|
-
variant: '
|
|
102
|
+
variant: 'ContentLoading',
|
|
98
103
|
},
|
|
99
104
|
};
|
|
100
105
|
|
|
101
106
|
export const _Error: StoryObj<typeof EmptyState> = {
|
|
102
107
|
render: (args: EmptyStateProps) => (
|
|
103
|
-
<
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
108
|
+
<StoryBox>
|
|
109
|
+
<EmptyState {...args}>
|
|
110
|
+
<Typography variant="h6" component="h3">
|
|
111
|
+
Error
|
|
112
|
+
</Typography>
|
|
113
|
+
<Typography variant="body2">
|
|
114
|
+
Oops! Something went wrong. Try your request again later. If the problem continues, contact Availity Client
|
|
115
|
+
Services at 1.800.AVAILITY (282.4548).
|
|
116
|
+
</Typography>
|
|
117
|
+
</EmptyState>
|
|
118
|
+
</StoryBox>
|
|
112
119
|
),
|
|
113
120
|
args: {
|
|
114
121
|
variant: 'Error',
|
|
115
122
|
},
|
|
116
123
|
};
|
|
117
124
|
|
|
118
|
-
export const
|
|
125
|
+
export const _Instructional: StoryObj<typeof EmptyState> = {
|
|
119
126
|
render: (args: EmptyStateProps) => (
|
|
120
|
-
<
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
127
|
+
<StoryBox>
|
|
128
|
+
<EmptyState {...args}>
|
|
129
|
+
<Typography variant="h6" component="h3">
|
|
130
|
+
Tasks need to be completed
|
|
131
|
+
</Typography>
|
|
132
|
+
<Typography variant="body2">You have tasks to complete</Typography>
|
|
133
|
+
<Button>Get Started</Button>
|
|
134
|
+
</EmptyState>
|
|
135
|
+
</StoryBox>
|
|
126
136
|
),
|
|
127
137
|
args: {
|
|
128
|
-
variant: '
|
|
138
|
+
variant: 'Instructional',
|
|
129
139
|
},
|
|
130
140
|
};
|
|
131
141
|
|
|
132
142
|
export const _NoData: StoryObj<typeof EmptyState> = {
|
|
133
143
|
render: (args: EmptyStateProps) => (
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
144
|
+
<StoryBox>
|
|
145
|
+
<EmptyState {...args}>
|
|
146
|
+
<Typography variant="h6" component="h3">
|
|
147
|
+
No data
|
|
148
|
+
</Typography>
|
|
149
|
+
<Typography variant="body2">Sorry, but we cannot seem to find the data you are looking for.</Typography>
|
|
150
|
+
</EmptyState>
|
|
151
|
+
</StoryBox>
|
|
140
152
|
),
|
|
141
153
|
args: {
|
|
142
154
|
variant: 'NoData',
|
|
143
155
|
},
|
|
144
156
|
};
|
|
145
157
|
|
|
146
|
-
export const _PageNotFound: StoryObj<typeof EmptyState> = {
|
|
147
|
-
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>
|
|
154
|
-
),
|
|
155
|
-
args: {
|
|
156
|
-
variant: 'PageNotFound',
|
|
157
|
-
},
|
|
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
158
|
export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
176
159
|
render: (args: EmptyStateProps) => (
|
|
177
|
-
<
|
|
160
|
+
<StoryBox>
|
|
178
161
|
<EmptyState {...args}>
|
|
179
162
|
<Typography variant="h6" component="h3">
|
|
180
163
|
No favorites
|
|
@@ -184,7 +167,7 @@ export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
|
184
167
|
quick access.
|
|
185
168
|
</Typography>
|
|
186
169
|
</EmptyState>
|
|
187
|
-
</
|
|
170
|
+
</StoryBox>
|
|
188
171
|
),
|
|
189
172
|
args: {
|
|
190
173
|
variant: 'NoFavorites',
|
|
@@ -193,14 +176,14 @@ export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
|
193
176
|
|
|
194
177
|
export const _NoMessages: StoryObj<typeof EmptyState> = {
|
|
195
178
|
render: (args: EmptyStateProps) => (
|
|
196
|
-
<
|
|
179
|
+
<StoryBox>
|
|
197
180
|
<EmptyState {...args}>
|
|
198
181
|
<Typography variant="h6" component="h3">
|
|
199
182
|
No messages
|
|
200
183
|
</Typography>
|
|
201
184
|
<Typography variant="body2">You do not have any messages</Typography>
|
|
202
185
|
</EmptyState>
|
|
203
|
-
</
|
|
186
|
+
</StoryBox>
|
|
204
187
|
),
|
|
205
188
|
args: {
|
|
206
189
|
variant: 'NoMessages',
|
|
@@ -209,14 +192,14 @@ export const _NoMessages: StoryObj<typeof EmptyState> = {
|
|
|
209
192
|
|
|
210
193
|
export const _NoNotifications: StoryObj<typeof EmptyState> = {
|
|
211
194
|
render: (args: EmptyStateProps) => (
|
|
212
|
-
<
|
|
195
|
+
<StoryBox>
|
|
213
196
|
<EmptyState {...args}>
|
|
214
197
|
<Typography variant="h6" component="h3">
|
|
215
198
|
No notifications
|
|
216
199
|
</Typography>
|
|
217
200
|
<Typography variant="body2">You do not have any notifications</Typography>
|
|
218
201
|
</EmptyState>
|
|
219
|
-
</
|
|
202
|
+
</StoryBox>
|
|
220
203
|
),
|
|
221
204
|
args: {
|
|
222
205
|
variant: 'NoNotifications',
|
|
@@ -225,25 +208,82 @@ export const _NoNotifications: StoryObj<typeof EmptyState> = {
|
|
|
225
208
|
|
|
226
209
|
export const _NoPatients: StoryObj<typeof EmptyState> = {
|
|
227
210
|
render: (args: EmptyStateProps) => (
|
|
228
|
-
<
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
211
|
+
<StoryBox>
|
|
212
|
+
<EmptyState {...args}>
|
|
213
|
+
<Typography variant="h6" component="h3">
|
|
214
|
+
Patient(s) not found
|
|
215
|
+
</Typography>
|
|
216
|
+
</EmptyState>
|
|
217
|
+
</StoryBox>
|
|
233
218
|
),
|
|
234
219
|
args: {
|
|
235
220
|
variant: 'NoPatients',
|
|
236
221
|
},
|
|
237
222
|
};
|
|
238
223
|
|
|
224
|
+
export const _NoSearchResults: StoryObj<typeof EmptyState> = {
|
|
225
|
+
render: (args: EmptyStateProps) => (
|
|
226
|
+
<StoryBox>
|
|
227
|
+
<EmptyState {...args} alignItems="start" textAlign="start">
|
|
228
|
+
<Typography variant="h6" component="h3">
|
|
229
|
+
No search results found -- Results not found for [variable].
|
|
230
|
+
</Typography>
|
|
231
|
+
<Box>Adjust your search or filter options for better results.</Box>
|
|
232
|
+
<Box>
|
|
233
|
+
Suggestions:
|
|
234
|
+
<List
|
|
235
|
+
sx={{ listStyleType: 'disc', listStylePosition: 'inside', '.MuiListItem-root': { display: 'list-item' } }}
|
|
236
|
+
disablePadding
|
|
237
|
+
>
|
|
238
|
+
<ListItem disableGutters disablePadding>
|
|
239
|
+
Correctly spell all words in search criteria
|
|
240
|
+
</ListItem>
|
|
241
|
+
<ListItem disableGutters disablePadding>
|
|
242
|
+
Use different keywords
|
|
243
|
+
</ListItem>
|
|
244
|
+
<ListItem disableGutters disablePadding>
|
|
245
|
+
Use general keywords
|
|
246
|
+
</ListItem>
|
|
247
|
+
<ListItem disableGutters disablePadding>
|
|
248
|
+
Use fewer keywords
|
|
249
|
+
</ListItem>
|
|
250
|
+
</List>
|
|
251
|
+
</Box>
|
|
252
|
+
<Link href="#">Clear filter</Link>
|
|
253
|
+
</EmptyState>
|
|
254
|
+
</StoryBox>
|
|
255
|
+
),
|
|
256
|
+
args: {
|
|
257
|
+
variant: 'NoSearchFound',
|
|
258
|
+
},
|
|
259
|
+
};
|
|
260
|
+
|
|
261
|
+
export const _PageNotFound: StoryObj<typeof EmptyState> = {
|
|
262
|
+
render: (args: EmptyStateProps) => (
|
|
263
|
+
<StoryBox>
|
|
264
|
+
<EmptyState {...args}>
|
|
265
|
+
<Typography variant="h6" component="h3">
|
|
266
|
+
Page not found
|
|
267
|
+
</Typography>
|
|
268
|
+
<Typography variant="body2">The page you are looking is no longer available.</Typography>
|
|
269
|
+
</EmptyState>
|
|
270
|
+
</StoryBox>
|
|
271
|
+
),
|
|
272
|
+
args: {
|
|
273
|
+
variant: 'PageNotFound',
|
|
274
|
+
},
|
|
275
|
+
};
|
|
276
|
+
|
|
239
277
|
export const _SuccessConfirmation: StoryObj<typeof EmptyState> = {
|
|
240
278
|
render: (args: EmptyStateProps) => (
|
|
241
|
-
<
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
279
|
+
<StoryBox>
|
|
280
|
+
<EmptyState {...args}>
|
|
281
|
+
<Typography variant="h6" component="h3">
|
|
282
|
+
Success!
|
|
283
|
+
</Typography>
|
|
284
|
+
<Typography variant="body2">You have completed your task</Typography>
|
|
285
|
+
</EmptyState>
|
|
286
|
+
</StoryBox>
|
|
247
287
|
),
|
|
248
288
|
args: {
|
|
249
289
|
variant: 'SuccessConfirmation',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import type { StoryObj } from '@storybook/react';
|
|
4
4
|
import { Box, Stack } from '@availity/mui-layout';
|
|
5
|
+
import { Typography } from '@availity/mui-typography';
|
|
5
6
|
|
|
6
7
|
import { EmptyStateImage, EmptyStateImageProps, EmptyStateImages } from './EmptyStateImage';
|
|
7
8
|
// eslint-disable-next-line @nx/enforce-module-boundaries
|
|
@@ -24,7 +25,26 @@ export default {
|
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
export const _EmptyStateImage: StoryObj<typeof EmptyStateImage> = {
|
|
27
|
-
render: (args: EmptyStateImageProps) =>
|
|
28
|
+
render: (args: EmptyStateImageProps) => (
|
|
29
|
+
<Box
|
|
30
|
+
sx={{
|
|
31
|
+
backgroundColor: 'background.paper',
|
|
32
|
+
padding: '2rem',
|
|
33
|
+
width: {
|
|
34
|
+
xs: '100%',
|
|
35
|
+
md: '25%',
|
|
36
|
+
},
|
|
37
|
+
mx: 'auto',
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
textAlign: 'center',
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
<EmptyStateImage {...args} />
|
|
46
|
+
</Box>
|
|
47
|
+
),
|
|
28
48
|
};
|
|
29
49
|
|
|
30
50
|
const variants = Object.keys(EmptyStateImages);
|
|
@@ -32,10 +52,10 @@ const variants = Object.keys(EmptyStateImages);
|
|
|
32
52
|
export const _variants: StoryObj<typeof EmptyStateImage> = {
|
|
33
53
|
render: () => {
|
|
34
54
|
return (
|
|
35
|
-
<Stack direction="row" spacing={2} flexWrap="wrap">
|
|
55
|
+
<Stack direction="row" spacing={2} alignItems="flex-start" flexWrap="wrap" useFlexGap>
|
|
36
56
|
{variants.map((variant) => (
|
|
37
|
-
<Box textAlign="center" key={variant}>
|
|
38
|
-
<
|
|
57
|
+
<Box textAlign="center" key={variant} sx={{ backgroundColor: 'background.paper', padding: '3rem' }}>
|
|
58
|
+
<Typography>{variant}</Typography>
|
|
39
59
|
<EmptyStateImage variant={variant as keyof typeof EmptyStateImages} />
|
|
40
60
|
</Box>
|
|
41
61
|
))}
|