Skip to content

Commit f1e9c6a

Browse files
ANIRUDH-SJANIRUDH-SJ
committed
feat: add EmptyContent stories and snapshots
1 parent 46b01f5 commit f1e9c6a

File tree

5 files changed

+70
-75
lines changed

5 files changed

+70
-75
lines changed

‎frontend/src/components/common/EmptyContent.stories.tsx

Lines changed: 17 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -14,97 +14,39 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { Typography } from '@mui/material';
1817
import { Meta, StoryFn } from '@storybook/react';
19-
import React from 'react';
20-
import { TestContext } from '../../test'; // Adjust path if necessary
21-
import EmptyContent from './EmptyContent'; // Assuming EmptyContentProps is exported if needed, or define locally
22-
23-
// Define props if not directly exported from EmptyContent.tsx
24-
// For EmptyContent, it's simple enough that we might not need explicit props interface here.
25-
// type EmptyContentProps = React.ComponentProps<typeof EmptyContent>;
18+
import EmptyContent from './EmptyContent';
2619

2720
export default {
28-
title: 'common/EmptyContent', // How it will appear in the Storybook hierarchy
21+
title: 'Common/EmptyContent',
2922
component: EmptyContent,
30-
decorators: [
31-
// Optional: Wrap with TestContext if your component or its children might need it
32-
// For EmptyContent, it's probably not strictly necessary but good practice for consistency.
33-
Story => (
34-
<TestContext>
35-
<Story />
36-
</TestContext>
37-
),
38-
],
3923
argTypes: {
4024
color: {
4125
control: 'select',
42-
options: [
43-
'textPrimary',
44-
'textSecondary',
45-
'primary',
46-
'secondary',
47-
'error',
48-
'warning',
49-
'info',
50-
'success',
51-
],
52-
description: 'The color of the text, using theme palette options.',
53-
},
54-
children: {
55-
control: 'text',
56-
description: 'The content to display inside the Empty component.',
26+
options: ['textPrimary', 'textSecondary', 'error', 'warning', 'info', 'success'],
5727
},
5828
},
59-
} as Meta<typeof EmptyContent>;
29+
} as Meta;
6030

6131
const Template: StoryFn<typeof EmptyContent> = args => <EmptyContent {...args} />;
6232

63-
export const DefaultMessage = Template.bind({});
64-
DefaultMessage.args = {
65-
children: 'No items to display.',
66-
};
67-
DefaultMessage.storyName = 'Default Message (string child)';
68-
69-
export const CustomColor = Template.bind({});
70-
CustomColor.args = {
71-
children: 'This message has a custom color.',
72-
color: 'primary.main', // Example of using theme palette path
73-
};
74-
CustomColor.storyName = 'Custom Text Color';
75-
76-
export const ErrorColor = Template.bind({});
77-
ErrorColor.args = {
78-
children: 'An error occurred, nothing to show!',
79-
color: 'error.main',
33+
export const Default = Template.bind({});
34+
Default.args = {
35+
children: 'No data to be shown.',
8036
};
81-
ErrorColor.storyName = 'Error Message Color';
8237

83-
export const WithReactNodeChild = Template.bind({});
84-
WithReactNodeChild.args = {
85-
children: (
86-
<>
87-
<Typography variant="h6">No Data Available</Typography>
88-
<Typography variant="body2">Please try adjusting your filters or come back later.</Typography>
89-
</>
90-
),
38+
export const WithCustomColor = Template.bind({});
39+
WithCustomColor.args = {
40+
children: 'No data to be shown.',
41+
color: 'error',
9142
};
92-
WithReactNodeChild.storyName = 'With React Node Child';
9343

94-
export const EmptyChildren = Template.bind({});
95-
EmptyChildren.args = {
96-
children: '', // Or simply omit children, as it will render nothing
44+
export const WithMultipleChildren = Template.bind({});
45+
WithMultipleChildren.args = {
46+
children: ['No data to be shown.', <div key="custom-element">Custom element</div>],
9747
};
98-
EmptyChildren.storyName = 'Empty Children (renders nothing)';
9948

100-
export const MultipleStringChildren = Template.bind({});
101-
MultipleStringChildren.args = {
102-
children: (
103-
<>
104-
First line of message.
105-
<br />
106-
Second line of message.
107-
</>
108-
),
49+
export const Empty = Template.bind({});
50+
Empty.args = {
51+
children: '',
10952
};
110-
MultipleStringChildren.storyName = 'Multiple String Children';

‎frontend/src/components/common/__snapshots__/EmptyContent.Default.stories.storyshot

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-19midj6"
5+
>
6+
<p
7+
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-18lkse1-MuiTypography-root"
8+
>
9+
No data to be shown.
10+
</p>
11+
</div>
12+
</div>
13+
</body>

‎frontend/src/components/common/__snapshots__/EmptyContent.Empty.stories.storyshot

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-19midj6"
5+
>
6+
<p
7+
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-18lkse1-MuiTypography-root"
8+
/>
9+
</div>
10+
</div>
11+
</body>

‎frontend/src/components/common/__snapshots__/EmptyContent.WithCustomColor.stories.storyshot

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-19midj6"
5+
>
6+
<p
7+
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
8+
>
9+
No data to be shown.
10+
</p>
11+
</div>
12+
</div>
13+
</body>

‎frontend/src/components/common/__snapshots__/EmptyContent.WithMultipleChildren.stories.storyshot

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-19midj6"
5+
>
6+
<p
7+
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-18lkse1-MuiTypography-root"
8+
>
9+
No data to be shown.
10+
</p>
11+
<div>
12+
Custom element
13+
</div>
14+
</div>
15+
</div>
16+
</body>

0 commit comments

Comments
 (0)