Skip to content

Commit cc817c9

Browse files
arkajyotiMukherjeearkajyotiMukherjee
authored
Update0.2.6 (#68)
Update0.2.6 * changed modal and kubera cards component * fixed test cases for both the components Signed-off-by: arkajyotiMukherjee <arkajyoti.mukherjee@mayadata.io>
1 parent c3523c5 commit cc817c9

File tree

10 files changed

+197
-137
lines changed

10 files changed

+197
-137
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "kubera-ui",
33
"license": "Apache-2.0",
4-
"version": "0.2.5",
4+
"version": "0.2.6",
55
"private": false,
66
"description": "Component Library for Kubera products",
77
"author": "MayaData, Inc.",

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ storiesOf('Card', module)
1919
// Litmus Portal
2020
.add('Litmus Portal', () => (
2121
<ThemedBackground platform="litmus-portal" row>
22-
<KuberaCard width="15rem" height="20rem" glow>
22+
<KuberaCard width="15rem" height="20rem" borderColor="#5B44BA" glow>
2323
{cardContainer('Card With Glow')}
2424
</KuberaCard>
25-
<KuberaCard width="15rem" height="20rem" glow={false}>
25+
<KuberaCard width="15rem" height="20rem" borderColor="#5B44BA">
2626
{cardContainer('Card Without Glow')}
2727
</KuberaCard>
2828
</ThemedBackground>
@@ -31,10 +31,10 @@ storiesOf('Card', module)
3131
// Kubera Chaos
3232
.add('Kubera Chaos', () => (
3333
<ThemedBackground platform="kubera-chaos" row>
34-
<KuberaCard width="15rem" height="20rem" glow>
34+
<KuberaCard width="15rem" height="20rem" borderColor="#28CB69" glow>
3535
{cardContainer('Card With Glow')}
3636
</KuberaCard>
37-
<KuberaCard width="15rem" height="20rem" glow={false}>
37+
<KuberaCard width="15rem" height="20rem" borderColor="#28CB69">
3838
{cardContainer('Card Without Glow')}
3939
</KuberaCard>
4040
</ThemedBackground>
@@ -43,10 +43,10 @@ storiesOf('Card', module)
4343
// Kubera Propel
4444
.add('Kubera Propel', () => (
4545
<ThemedBackground platform="kubera-propel" row>
46-
<KuberaCard width="15rem" height="20rem" glow>
46+
<KuberaCard width="15rem" height="20rem" borderColor="#EAD7A2" glow>
4747
{cardContainer('Card With Glow')}
4848
</KuberaCard>
49-
<KuberaCard width="15rem" height="20rem" glow={false}>
49+
<KuberaCard width="15rem" height="20rem" borderColor="#EAD7A2">
5050
{cardContainer('Card Without Glow')}
5151
</KuberaCard>
5252
</ThemedBackground>
@@ -55,10 +55,10 @@ storiesOf('Card', module)
5555
// Kubera Portal
5656
.add('Kubera Portal', () => (
5757
<ThemedBackground platform="kubera-portal" row>
58-
<KuberaCard width="15rem" height="20rem" glow>
58+
<KuberaCard width="15rem" height="20rem" borderColor="#DE7EDF" glow>
5959
{cardContainer('Card With Glow')}
6060
</KuberaCard>
61-
<KuberaCard width="15rem" height="20rem" glow={false}>
61+
<KuberaCard width="15rem" height="20rem" borderColor="#DE7EDF">
6262
{cardContainer('Card Without Glow')}
6363
</KuberaCard>
6464
</ThemedBackground>
@@ -67,10 +67,10 @@ storiesOf('Card', module)
6767
// Kubera Core
6868
.add('Kubera Core', () => (
6969
<ThemedBackground platform="kubera-core" row>
70-
<KuberaCard width="15rem" height="20rem" glow>
70+
<KuberaCard width="15rem" height="20rem" borderColor="#C34FC5" glow>
7171
{cardContainer('Card With Glow')}
7272
</KuberaCard>
73-
<KuberaCard width="15rem" height="20rem" glow={false}>
73+
<KuberaCard width="15rem" height="20rem" borderColor="#C34FC5">
7474
{cardContainer('Card Without Glow')}
7575
</KuberaCard>
7676
</ThemedBackground>

‎src/core/KuberaCard/KuberaCard.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@ import React from 'react';
22
import { useStyles } from './styles';
33

44
interface KuberaCardProps {
5-
glow: boolean;
5+
glow?: boolean;
6+
borderColor: string;
67
width: string;
78
height: string;
89
}
910

1011
const KuberaCard: React.FC<KuberaCardProps> = ({
1112
glow,
13+
borderColor,
1214
width,
1315
height,
1416
children,
1517
}) => {
16-
const classes = useStyles({ glow, width, height });
18+
const classes = useStyles({ glow, borderColor, width, height });
1719
return <div className={classes.root}>{children}</div>;
1820
};
1921

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('Button Filled Component', () => {
77
it('Renders', () => {
88
const { getByText } = render(
99
<KuberaThemeProvider platform="kubera-propel">
10-
<KuberaCard width="15rem" height="20rem" glow>
10+
<KuberaCard width="15rem" height="20rem" borderColor="#5B44BA" glow>
1111
Card With Glow
1212
</KuberaCard>
1313
</KuberaThemeProvider>

‎src/core/KuberaCard/styles.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
import { fade, makeStyles } from '@material-ui/core';
22

33
interface StyleProps {
4-
glow: boolean;
4+
glow?: boolean;
5+
borderColor: string;
56
height: string;
67
width: string;
78
}
89

910
const useStyles = makeStyles((theme) => ({
1011
root: (props: StyleProps) => ({
1112
background: theme.palette.background.paper,
12-
border: props.glow
13-
? `1px solid ${theme.palette.highlight}`
14-
: `1px solid ${theme.palette.border.main}`,
13+
border: `1px solid ${props.borderColor}`,
1514
boxShadow: props.glow
1615
? `0px 3px 5px -1px ${fade(
17-
theme.palette.highlight,
16+
props.borderColor,
1817
0.14
1918
)},0px 6px 10px 0px ${fade(
20-
theme.palette.highlight,
19+
props.borderColor,
2120
0.14
22-
)},0px 1px 18px 0px ${fade(theme.palette.highlight, 0.14)}`
21+
)},0px 1px 18px 0px ${fade(props.borderColor, 0.14)}`
2322
: '',
2423
width: props.width,
2524
height: props.height,

‎src/core/Modal/Modal.stories.tsx

Lines changed: 141 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,151 @@
11
import { storiesOf } from '@storybook/react';
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import { ThemedBackground } from '../../utils/storybook';
4+
import { ButtonFilled, ButtonOutlined } from '../Button';
45
import { Modal } from './Modal';
56

67
storiesOf('Modal/Base Modal', module)
7-
// Kubera Chaos
8-
.add('Kubera Chaos', () => (
9-
<ThemedBackground platform="kubera-chaos">
10-
<Modal
11-
open={true}
12-
onClose={() => console.log('clicked')}
13-
aria-labelledby="simple-modal-title"
14-
aria-describedby="simple-modal-description"
15-
hasCloseBtn
16-
>
17-
<>Modal</>
18-
</Modal>
19-
</ThemedBackground>
20-
))
8+
// Litmus Portal
9+
.add('Litmus Portal', () => {
10+
const [open, setOpen] = useState(false);
11+
return (
12+
<ThemedBackground platform="litmus-portal">
13+
<ButtonFilled onClick={() => setOpen(true)}>Open Modal</ButtonFilled>
14+
<Modal
15+
open={open}
16+
onClose={() => setOpen(false)}
17+
modalActions={
18+
<ButtonOutlined onClick={() => setOpen(false)}>
19+
&#x2715;
20+
</ButtonOutlined>
21+
}
22+
>
23+
<div
24+
style={{
25+
padding: '2.5rem',
26+
fontSize: '2rem',
27+
marginBottom: '15rem',
28+
}}
29+
>
30+
Modal
31+
</div>
32+
</Modal>
33+
</ThemedBackground>
34+
);
35+
})
2136

22-
// Kubera Core
23-
.add('Kubera Core', () => (
24-
<ThemedBackground platform="kubera-core">
25-
<Modal
26-
open={true}
27-
onClose={() => console.log('clicked')}
28-
aria-labelledby="simple-modal-title"
29-
aria-describedby="simple-modal-description"
30-
hasCloseBtn
31-
>
32-
<>Modal</>
33-
</Modal>
34-
</ThemedBackground>
35-
))
37+
// Kubera Chaos
38+
.add('Kubera Chaos', () => {
39+
const [open, setOpen] = useState(false);
40+
return (
41+
<ThemedBackground platform="kubera-chaos">
42+
<ButtonFilled onClick={() => setOpen(true)}>Open Modal</ButtonFilled>
43+
<Modal
44+
open={open}
45+
onClose={() => setOpen(false)}
46+
modalActions={
47+
<ButtonOutlined onClick={() => setOpen(false)}>
48+
&#x2715;
49+
</ButtonOutlined>
50+
}
51+
>
52+
<div
53+
style={{
54+
padding: '2.5rem',
55+
fontSize: '2rem',
56+
marginBottom: '15rem',
57+
}}
58+
>
59+
Modal
60+
</div>
61+
</Modal>
62+
</ThemedBackground>
63+
);
64+
})
3665

37-
// Litmus Portal
38-
.add('Litmus Portal', () => (
39-
<ThemedBackground platform="litmus-portal">
40-
<Modal
41-
open={true}
42-
onClose={() => console.log('clicked')}
43-
aria-labelledby="simple-modal-title"
44-
aria-describedby="simple-modal-description"
45-
hasCloseBtn
46-
>
47-
<>Modal</>
48-
</Modal>
49-
</ThemedBackground>
50-
))
66+
// Kubera Propel
67+
.add('Kubera Propel', () => {
68+
const [open, setOpen] = useState(false);
69+
return (
70+
<ThemedBackground platform="kubera-propel">
71+
<ButtonFilled onClick={() => setOpen(true)}>Open Modal</ButtonFilled>
72+
<Modal
73+
open={open}
74+
onClose={() => setOpen(false)}
75+
modalActions={
76+
<ButtonOutlined onClick={() => setOpen(false)}>
77+
&#x2715;
78+
</ButtonOutlined>
79+
}
80+
>
81+
<div
82+
style={{
83+
padding: '2.5rem',
84+
fontSize: '2rem',
85+
marginBottom: '15rem',
86+
}}
87+
>
88+
Modal
89+
</div>
90+
</Modal>
91+
</ThemedBackground>
92+
);
93+
})
5194

5295
// Kubera Portal
53-
.add('Kubera Portal', () => (
54-
<ThemedBackground platform="kubera-portal">
55-
<Modal
56-
open={true}
57-
onClose={() => console.log('clicked')}
58-
aria-labelledby="simple-modal-title"
59-
aria-describedby="simple-modal-description"
60-
hasCloseBtn
61-
>
62-
<>Modal</>
63-
</Modal>
64-
</ThemedBackground>
65-
))
96+
.add('Kubera Portal', () => {
97+
const [open, setOpen] = useState(false);
98+
return (
99+
<ThemedBackground platform="kubera-portal">
100+
<ButtonFilled onClick={() => setOpen(true)}>Open Modal</ButtonFilled>
101+
<Modal
102+
open={open}
103+
onClose={() => setOpen(false)}
104+
modalActions={
105+
<ButtonOutlined onClick={() => setOpen(false)}>
106+
&#x2715;
107+
</ButtonOutlined>
108+
}
109+
>
110+
<div
111+
style={{
112+
padding: '2.5rem',
113+
fontSize: '2rem',
114+
marginBottom: '15rem',
115+
}}
116+
>
117+
Modal
118+
</div>
119+
</Modal>
120+
</ThemedBackground>
121+
);
122+
})
66123

67-
// Kubera Propel
68-
.add('Kubera Propel', () => (
69-
<ThemedBackground platform="kubera-propel">
70-
<Modal
71-
open={true}
72-
onClose={() => console.log('clicked')}
73-
aria-labelledby="simple-modal-title"
74-
aria-describedby="simple-modal-description"
75-
hasCloseBtn
76-
>
77-
<>Modal</>
78-
</Modal>
79-
</ThemedBackground>
80-
));
124+
// Kubera Core
125+
.add('Kubera Core', () => {
126+
const [open, setOpen] = useState(false);
127+
return (
128+
<ThemedBackground platform="kubera-core">
129+
<ButtonFilled onClick={() => setOpen(true)}>Open Modal</ButtonFilled>
130+
<Modal
131+
open={open}
132+
onClose={() => setOpen(false)}
133+
modalActions={
134+
<ButtonOutlined onClick={() => setOpen(false)}>
135+
&#x2715;
136+
</ButtonOutlined>
137+
}
138+
>
139+
<div
140+
style={{
141+
padding: '2.5rem',
142+
fontSize: '2rem',
143+
marginBottom: '15rem',
144+
}}
145+
>
146+
Modal
147+
</div>
148+
</Modal>
149+
</ThemedBackground>
150+
);
151+
});

0 commit comments

Comments
 (0)