@availity/mui-empty-state 0.3.0 → 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.
- package/CHANGELOG.md +7 -0
- package/package.json +1 -1
- package/src/lib/EmptyState.stories.tsx +130 -106
- package/src/lib/EmptyStateImage.stories.tsx +9 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [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)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **mui-empty-state:** update stories ([19d5cbb](https://github.com/Availity/element/commit/19d5cbb52859edeff75b6f31d29b4c2e9a07613f))
|
|
11
|
+
|
|
5
12
|
## [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
13
|
|
|
7
14
|
|
package/package.json
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,129 +56,92 @@ export default {
|
|
|
52
56
|
|
|
53
57
|
export const _EmptyState: StoryObj<typeof EmptyState> = {
|
|
54
58
|
render: (args: EmptyStateProps) => (
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
|
74
|
+
export const _ContentLoading: StoryObj<typeof EmptyState> = {
|
|
67
75
|
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>
|
|
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: '
|
|
86
|
+
variant: 'ContentLoading',
|
|
98
87
|
},
|
|
99
88
|
};
|
|
100
89
|
|
|
101
90
|
export const _Error: StoryObj<typeof EmptyState> = {
|
|
102
91
|
render: (args: EmptyStateProps) => (
|
|
103
|
-
<
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
|
109
|
+
export const _Instructional: StoryObj<typeof EmptyState> = {
|
|
119
110
|
render: (args: EmptyStateProps) => (
|
|
120
|
-
<
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
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: '
|
|
122
|
+
variant: 'Instructional',
|
|
129
123
|
},
|
|
130
124
|
};
|
|
131
125
|
|
|
132
126
|
export const _NoData: StoryObj<typeof EmptyState> = {
|
|
133
127
|
render: (args: EmptyStateProps) => (
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
|
|
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
142
|
export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
176
143
|
render: (args: EmptyStateProps) => (
|
|
177
|
-
<
|
|
144
|
+
<StoryBox>
|
|
178
145
|
<EmptyState {...args}>
|
|
179
146
|
<Typography variant="h6" component="h3">
|
|
180
147
|
No favorites
|
|
@@ -184,7 +151,7 @@ export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
|
184
151
|
quick access.
|
|
185
152
|
</Typography>
|
|
186
153
|
</EmptyState>
|
|
187
|
-
</
|
|
154
|
+
</StoryBox>
|
|
188
155
|
),
|
|
189
156
|
args: {
|
|
190
157
|
variant: 'NoFavorites',
|
|
@@ -193,14 +160,14 @@ export const _NoFavorites: StoryObj<typeof EmptyState> = {
|
|
|
193
160
|
|
|
194
161
|
export const _NoMessages: StoryObj<typeof EmptyState> = {
|
|
195
162
|
render: (args: EmptyStateProps) => (
|
|
196
|
-
<
|
|
163
|
+
<StoryBox>
|
|
197
164
|
<EmptyState {...args}>
|
|
198
165
|
<Typography variant="h6" component="h3">
|
|
199
166
|
No messages
|
|
200
167
|
</Typography>
|
|
201
168
|
<Typography variant="body2">You do not have any messages</Typography>
|
|
202
169
|
</EmptyState>
|
|
203
|
-
</
|
|
170
|
+
</StoryBox>
|
|
204
171
|
),
|
|
205
172
|
args: {
|
|
206
173
|
variant: 'NoMessages',
|
|
@@ -209,14 +176,14 @@ export const _NoMessages: StoryObj<typeof EmptyState> = {
|
|
|
209
176
|
|
|
210
177
|
export const _NoNotifications: StoryObj<typeof EmptyState> = {
|
|
211
178
|
render: (args: EmptyStateProps) => (
|
|
212
|
-
<
|
|
179
|
+
<StoryBox>
|
|
213
180
|
<EmptyState {...args}>
|
|
214
181
|
<Typography variant="h6" component="h3">
|
|
215
182
|
No notifications
|
|
216
183
|
</Typography>
|
|
217
184
|
<Typography variant="body2">You do not have any notifications</Typography>
|
|
218
185
|
</EmptyState>
|
|
219
|
-
</
|
|
186
|
+
</StoryBox>
|
|
220
187
|
),
|
|
221
188
|
args: {
|
|
222
189
|
variant: 'NoNotifications',
|
|
@@ -225,25 +192,82 @@ export const _NoNotifications: StoryObj<typeof EmptyState> = {
|
|
|
225
192
|
|
|
226
193
|
export const _NoPatients: StoryObj<typeof EmptyState> = {
|
|
227
194
|
render: (args: EmptyStateProps) => (
|
|
228
|
-
<
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
195
|
+
<StoryBox>
|
|
196
|
+
<EmptyState {...args}>
|
|
197
|
+
<Typography variant="h6" component="h3">
|
|
198
|
+
Patient(s) not found
|
|
199
|
+
</Typography>
|
|
200
|
+
</EmptyState>
|
|
201
|
+
</StoryBox>
|
|
233
202
|
),
|
|
234
203
|
args: {
|
|
235
204
|
variant: 'NoPatients',
|
|
236
205
|
},
|
|
237
206
|
};
|
|
238
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
|
+
|
|
245
|
+
export const _PageNotFound: StoryObj<typeof EmptyState> = {
|
|
246
|
+
render: (args: EmptyStateProps) => (
|
|
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>
|
|
255
|
+
),
|
|
256
|
+
args: {
|
|
257
|
+
variant: 'PageNotFound',
|
|
258
|
+
},
|
|
259
|
+
};
|
|
260
|
+
|
|
239
261
|
export const _SuccessConfirmation: StoryObj<typeof EmptyState> = {
|
|
240
262
|
render: (args: EmptyStateProps) => (
|
|
241
|
-
<
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
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>
|
|
247
271
|
),
|
|
248
272
|
args: {
|
|
249
273
|
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,11 @@ export default {
|
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
export const _EmptyStateImage: StoryObj<typeof EmptyStateImage> = {
|
|
27
|
-
render: (args: EmptyStateImageProps) =>
|
|
28
|
+
render: (args: EmptyStateImageProps) => (
|
|
29
|
+
<Box sx={{ backgroundColor: 'background.paper', padding: '2rem', width: '25%' }}>
|
|
30
|
+
<EmptyStateImage {...args} />
|
|
31
|
+
</Box>
|
|
32
|
+
),
|
|
28
33
|
};
|
|
29
34
|
|
|
30
35
|
const variants = Object.keys(EmptyStateImages);
|
|
@@ -32,10 +37,10 @@ const variants = Object.keys(EmptyStateImages);
|
|
|
32
37
|
export const _variants: StoryObj<typeof EmptyStateImage> = {
|
|
33
38
|
render: () => {
|
|
34
39
|
return (
|
|
35
|
-
<Stack direction="row" spacing={2} flexWrap="wrap">
|
|
40
|
+
<Stack direction="row" spacing={2} alignItems="flex-start" flexWrap="wrap" useFlexGap>
|
|
36
41
|
{variants.map((variant) => (
|
|
37
|
-
<Box textAlign="center" key={variant}>
|
|
38
|
-
<
|
|
42
|
+
<Box textAlign="center" key={variant} sx={{ backgroundColor: 'background.paper', padding: '3rem' }}>
|
|
43
|
+
<Typography>{variant}</Typography>
|
|
39
44
|
<EmptyStateImage variant={variant as keyof typeof EmptyStateImages} />
|
|
40
45
|
</Box>
|
|
41
46
|
))}
|