Skip to content

Commit 0db05c3

Browse files
author
Sayan Mondal
authored
Added Card component (#55)
* Added Card component * Updated Stories * Added Card to core export * Changed name Signed-off-by: Sayan Mondal <sayan.mondal@mayadata.io>
1 parent 5e58bbc commit 0db05c3

File tree

6 files changed

+154
-7
lines changed

6 files changed

+154
-7
lines changed

‎src/core/KuberaCard/KuberaCard.stories.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
import { ThemedBackground } from '../../utils/storybook';
4+
import { KuberaCard } from '../KuberaCard';
5+
6+
const cardContainer = (content: string) => (
7+
<div
8+
style={{
9+
textAlign: 'center',
10+
marginTop: '50%',
11+
fontSize: '1.2rem',
12+
}}
13+
>
14+
{content}
15+
</div>
16+
);
17+
18+
storiesOf('Card', module)
19+
// Litmus Portal
20+
.add('Litmus Portal', () => (
21+
<ThemedBackground platform="litmus-portal" row>
22+
<KuberaCard width="15rem" height="20rem" glow>
23+
{cardContainer('Card With Glow')}
24+
</KuberaCard>
25+
<KuberaCard width="15rem" height="20rem" glow={false}>
26+
{cardContainer('Card Without Glow')}
27+
</KuberaCard>
28+
</ThemedBackground>
29+
))
30+
31+
// Kubera Chaos
32+
.add('Kubera Chaos', () => (
33+
<ThemedBackground platform="kubera-chaos" row>
34+
<KuberaCard width="15rem" height="20rem" glow>
35+
{cardContainer('Card With Glow')}
36+
</KuberaCard>
37+
<KuberaCard width="15rem" height="20rem" glow={false}>
38+
{cardContainer('Card Without Glow')}
39+
</KuberaCard>
40+
</ThemedBackground>
41+
))
42+
43+
// Kubera Propel
44+
.add('Kubera Propel', () => (
45+
<ThemedBackground platform="kubera-propel" row>
46+
<KuberaCard width="15rem" height="20rem" glow>
47+
{cardContainer('Card With Glow')}
48+
</KuberaCard>
49+
<KuberaCard width="15rem" height="20rem" glow={false}>
50+
{cardContainer('Card Without Glow')}
51+
</KuberaCard>
52+
</ThemedBackground>
53+
))
54+
55+
// Kubera Portal
56+
.add('Kubera Portal', () => (
57+
<ThemedBackground platform="kubera-portal" row>
58+
<KuberaCard width="15rem" height="20rem" glow>
59+
{cardContainer('Card With Glow')}
60+
</KuberaCard>
61+
<KuberaCard width="15rem" height="20rem" glow={false}>
62+
{cardContainer('Card Without Glow')}
63+
</KuberaCard>
64+
</ThemedBackground>
65+
))
66+
67+
// Kubera Core
68+
.add('Kubera Core', () => (
69+
<ThemedBackground platform="kubera-core" row>
70+
<KuberaCard width="15rem" height="20rem" glow>
71+
{cardContainer('Card With Glow')}
72+
</KuberaCard>
73+
<KuberaCard width="15rem" height="20rem" glow={false}>
74+
{cardContainer('Card Without Glow')}
75+
</KuberaCard>
76+
</ThemedBackground>
77+
));

‎src/core/KuberaCard/KuberaCard.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import useStyles from './styles';
3+
4+
interface KuberaCardProps {
5+
glow: boolean;
6+
width: string;
7+
height: string;
8+
}
9+
10+
const KuberaCard: React.FC<KuberaCardProps> = ({
11+
glow,
12+
width,
13+
height,
14+
children,
15+
}) => {
16+
const classes = useStyles({ glow, width, height });
17+
return <div className={classes.root}>{children}</div>;
18+
};
19+
20+
export { KuberaCard };

‎src/core/KuberaCard/__tests__/KuberaCard.test.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { render } from '@testing-library/react';
2+
import React from 'react';
3+
import { KuberaThemeProvider } from '../../../theme';
4+
import { KuberaCard } from '../KuberaCard';
5+
6+
describe('Button Filled Component', () => {
7+
it('Renders', () => {
8+
const { getByText } = render(
9+
<KuberaThemeProvider platform="kubera-propel">
10+
<KuberaCard width="15rem" height="20rem" glow>
11+
Card With Glow
12+
</KuberaCard>
13+
</KuberaThemeProvider>
14+
);
15+
16+
expect(getByText('Card With Glow')).toBeTruthy();
17+
});
18+
});

‎src/core/KuberaCard/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './KuberaCard';

‎src/core/KuberaCard/styles.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { fade, makeStyles } from '@material-ui/core';
2+
3+
interface StyleProps {
4+
glow: boolean;
5+
height: string;
6+
width: string;
7+
}
8+
9+
const useStyles = makeStyles((theme) => ({
10+
root: (props: StyleProps) => ({
11+
background: theme.palette.background.paper,
12+
border: props.glow
13+
? `1px solid ${theme.palette.highlight}`
14+
: `1px solid ${theme.palette.border.main}`,
15+
boxShadow: props.glow
16+
? `0px 3px 5px -1px ${fade(
17+
theme.palette.highlight,
18+
0.14
19+
)},0px 6px 10px 0px ${fade(
20+
theme.palette.highlight,
21+
0.14
22+
)},0px 1px 18px 0px ${fade(theme.palette.highlight, 0.14)}`
23+
: '',
24+
width: props.width,
25+
height: props.height,
26+
borderRadius: 10,
27+
}),
28+
}));
29+
30+
export default useStyles;

‎src/core/index.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
export * from './Button';
2-
export * from './RadioButton';
2+
export * from './ButtonGroup';
33
export * from './InputField';
4-
export * from './ProgressBar';
5-
export * from './Text';
6-
export * from './Pills';
7-
export * from './Tabs';
4+
export * from './KuberaCard';
85
export * from './Link';
9-
export * from './ButtonGroup';
10-
export * from './Search';
116
export * from './Modal';
7+
export * from './Pills';
8+
export * from './ProgressBar';
9+
export * from './RadioButton';
10+
export * from './Search';
11+
export * from './Tabs';
12+
export * from './Text';

0 commit comments

Comments
 (0)