Skip to content

Commit 1d9155c

Browse files
arkajyotiMukherjeearkajyotiMukherjee
authored
New api v0.3.0 (#80)
Changes: * added className support * changed jest config to exclude lab components and index.ts files from coverage * modified some components to add base models * fixed ToggleButton component * changed to v0.3.0 Signed-off-by: arkajyotiMukherjee <arkajyoti.mukherjee@mayadata.io>
1 parent 32a9fb1 commit 1d9155c

File tree

23 files changed

+172
-113
lines changed

23 files changed

+172
-113
lines changed

‎jest.config.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@ module.exports = {
66
testMatch: [
77
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
88
'<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
9+
'!<rootDir>/src/**/index.ts',
910
],
10-
coveragePathIgnorePatterns: [
11-
'/node_modules/',
12-
'dist/',
13-
'<rootDir>/src/index.ts',
14-
'<rootDir>/src/components/index.ts',
15-
],
11+
coveragePathIgnorePatterns: ['/node_modules/', 'dist/', '<rootDir>/src/lab/'],
1612
collectCoverageFrom: [
1713
'<rootDir>/src/**/*.{js,ts,tsx,jsx}',
1814
'!<rootDir>/src/**/*.stories.*',
15+
'!<rootDir>/src/**/index.ts',
1916
],
2017
coverageThreshold: {
2118
global: {

‎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.11",
4+
"version": "0.3.0",
55
"private": false,
66
"description": "Component Library for Kubera products",
77
"author": "MayaData, Inc.",

‎src/core/Button/ButtonFilled/ButtonFilled.stories.tsx

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@ import { ButtonFilled } from '../ButtonFilled';
55

66
storiesOf('Button/Button Filled', module)
77
// Litmus Portal
8-
.add('Litmus Portal', () => (
9-
<ThemedBackground platform="litmus-portal" row>
10-
<ButtonFilled variant="default" onClick={() => console.log('clicked')}>
11-
Button Filled Default
12-
</ButtonFilled>
13-
14-
<ButtonFilled variant="error" onClick={() => console.log('clicked')}>
15-
Button Filled Error
16-
</ButtonFilled>
17-
18-
<ButtonFilled variant="success" onClick={() => console.log('clicked')}>
19-
Button Filled Success
20-
</ButtonFilled>
21-
22-
<ButtonFilled disabled onClick={() => console.log('clicked')}>
23-
Button Filled Disabled
24-
</ButtonFilled>
25-
</ThemedBackground>
26-
))
8+
.add('Litmus Portal', () => {
9+
return (
10+
<ThemedBackground platform="litmus-portal" row>
11+
<ButtonFilled variant="default" onClick={() => console.log('clicked')}>
12+
Button Filled Default
13+
</ButtonFilled>
14+
15+
<ButtonFilled variant="error" onClick={() => console.log('clicked')}>
16+
Button Filled Error
17+
</ButtonFilled>
18+
19+
<ButtonFilled variant="success" onClick={() => console.log('clicked')}>
20+
Button Filled Success
21+
</ButtonFilled>
22+
23+
<ButtonFilled disabled onClick={() => console.log('clicked')}>
24+
Button Filled Disabled
25+
</ButtonFilled>
26+
</ThemedBackground>
27+
);
28+
})
2729

2830
// Kubera Chaos
2931
.add('Kubera Chaos', () => (

‎src/core/Button/ButtonFilled/ButtonFilled.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface ButtonFilledProps extends ButtonBaseProps {
1212
const ButtonFilled: React.FC<ButtonFilledProps> = ({
1313
variant,
1414
children,
15+
className,
1516
...rest
1617
}) => {
1718
// Styles
@@ -31,7 +32,7 @@ const ButtonFilled: React.FC<ButtonFilledProps> = ({
3132
return (
3233
<Button
3334
variant="contained"
34-
className={`${classes.root} ${getVariant(variant)} `}
35+
className={`${classes.root} ${className} ${getVariant(variant)}`}
3536
{...rest}
3637
>
3738
{children}

‎src/core/Button/ButtonGroup/ButtonGroup.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ interface ButtonGroupProps extends ButtonBaseProps {
1111
variant?: Variant;
1212
}
1313

14-
const ButtonGroup: React.FC<ButtonGroupProps> = ({ variant }) => {
14+
const ButtonGroup: React.FC<ButtonGroupProps> = ({ variant, className }) => {
1515
const classes = useStyles();
1616

1717
return (
18-
<div className={classes.root} data-testid="switch">
18+
<div className={`${classes.root} ${className}`} data-testid="switch">
1919
{/* Pass Button */}
2020
<ButtonFilled
2121
aria-label="left aligned"

‎src/core/Button/ButtonOutlined/ButtonOutlined.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface ButtonOutlinedProps extends ButtonBaseProps {
1212
const ButtonOutlined: React.FC<ButtonOutlinedProps> = ({
1313
variant,
1414
children,
15+
className,
1516
...rest
1617
}) => {
1718
// Styles
@@ -29,7 +30,7 @@ const ButtonOutlined: React.FC<ButtonOutlinedProps> = ({
2930
return (
3031
<Button
3132
variant="outlined"
32-
className={`${classes.root} ${getVariant(variant)}`}
33+
className={`${classes.root} ${className} ${getVariant(variant)}`}
3334
{...rest}
3435
>
3536
{children}

‎src/core/Button/ToggleButton/ToggleButton.stories.tsx

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,70 @@
11
import { storiesOf } from '@storybook/react';
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import { ThemedBackground } from '../../../utils/storybook';
44
import { ToggleButton } from './ToggleButton';
55

6-
storiesOf('Button/Button Hybrid', module)
6+
storiesOf('Button/Toggle Button', module)
77
// Litmus Portal
8-
.add('Litmus Portal', () => (
9-
<ThemedBackground platform="litmus-portal" row>
10-
<ToggleButton onClick={() => console.log('clicked')}>
11-
Button Hybrid
12-
</ToggleButton>
13-
</ThemedBackground>
14-
))
8+
.add('Litmus Portal', () => {
9+
const [open, setOpen] = useState(false);
10+
return (
11+
<ThemedBackground platform="litmus-portal" row>
12+
<ToggleButton isToggled={open} onClick={() => setOpen(!open)}>
13+
Toggle Button
14+
</ToggleButton>
15+
{open ? <p>Toggled</p> : <p>Not toggled</p>}
16+
</ThemedBackground>
17+
);
18+
})
1519

1620
// Kubera Chaos
17-
.add('Kubera Chaos', () => (
18-
<ThemedBackground platform="kubera-chaos" row>
19-
<ToggleButton onClick={() => console.log('clicked')}>
20-
Button Hybrid
21-
</ToggleButton>
22-
</ThemedBackground>
23-
))
21+
.add('Kubera Chaos', () => {
22+
const [open, setOpen] = useState(false);
23+
return (
24+
<ThemedBackground platform="litmus-portal" row>
25+
<ToggleButton isToggled={open} onClick={() => setOpen(!open)}>
26+
Toggle Button
27+
</ToggleButton>
28+
{open ? <p>Toggled</p> : <p>Not toggled</p>}
29+
</ThemedBackground>
30+
);
31+
})
2432

2533
// Kubera Propel
26-
.add('Kubera Propel', () => (
27-
<ThemedBackground platform="kubera-propel" row>
28-
<ToggleButton onClick={() => console.log('clicked')}>
29-
Button Hybrid
30-
</ToggleButton>
31-
</ThemedBackground>
32-
))
34+
.add('Kubera Propel', () => {
35+
const [open, setOpen] = useState(false);
36+
return (
37+
<ThemedBackground platform="litmus-portal" row>
38+
<ToggleButton isToggled={open} onClick={() => setOpen(!open)}>
39+
Toggle Button
40+
</ToggleButton>
41+
{open ? <p>Toggled</p> : <p>Not toggled</p>}
42+
</ThemedBackground>
43+
);
44+
})
3345

3446
// Kubera Portal
35-
.add('Kubera Portal', () => (
36-
<ThemedBackground platform="kubera-portal" row>
37-
<ToggleButton onClick={() => console.log('clicked')}>
38-
Button Hybrid
39-
</ToggleButton>
40-
</ThemedBackground>
41-
))
47+
.add('Kubera Portal', () => {
48+
const [open, setOpen] = useState(false);
49+
return (
50+
<ThemedBackground platform="litmus-portal" row>
51+
<ToggleButton isToggled={open} onClick={() => setOpen(!open)}>
52+
Toggle Button
53+
</ToggleButton>
54+
{open ? <p>Toggled</p> : <p>Not toggled</p>}
55+
</ThemedBackground>
56+
);
57+
})
4258

4359
// Kubera Core
44-
.add('Kubera Core', () => (
45-
<ThemedBackground platform="kubera-core" row>
46-
<ToggleButton onClick={() => console.log('clicked')}>
47-
Button Hybrid
48-
</ToggleButton>
49-
</ThemedBackground>
50-
));
60+
.add('Kubera Core', () => {
61+
const [open, setOpen] = useState(false);
62+
return (
63+
<ThemedBackground platform="litmus-portal" row>
64+
<ToggleButton isToggled={open} onClick={() => setOpen(!open)}>
65+
Toggle Button
66+
</ToggleButton>
67+
{open ? <p>Toggled</p> : <p>Not toggled</p>}
68+
</ThemedBackground>
69+
);
70+
});

‎src/core/Button/ToggleButton/ToggleButton.tsx

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { ButtonBaseProps } from '../base';
33
import { ButtonFilled } from '../ButtonFilled';
44
import { ButtonOutlined } from '../ButtonOutlined';
55

6-
const ToggleButton: React.FC<ButtonBaseProps> = ({ onClick, children }) => {
7-
// Styles
8-
const [toggle, setToggle] = useState<boolean>(false);
6+
interface ToggleButtonProps extends ButtonBaseProps {
7+
isToggled: boolean;
8+
}
99

10-
return toggle ? (
11-
<ButtonFilled
12-
variant="default"
13-
onClick={() => {
14-
onClick;
15-
setToggle(!toggle);
16-
}}
17-
>
10+
const ToggleButton: React.FC<ToggleButtonProps> = ({
11+
isToggled,
12+
onClick,
13+
children,
14+
className,
15+
}) => {
16+
return isToggled ? (
17+
<ButtonFilled variant="default" className={className} onClick={onClick}>
1818
{children}
1919
</ButtonFilled>
2020
) : (
21-
<ButtonOutlined
22-
variant="highlight"
23-
onClick={() => {
24-
onClick;
25-
setToggle(!toggle);
26-
}}
27-
>
21+
<ButtonOutlined variant="highlight" className={className} onClick={onClick}>
2822
{children}
2923
</ButtonOutlined>
3024
);

‎src/core/Button/ToggleButton/__tests__/ToggleButton.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ describe('Toggle Button Component', () => {
77
it('Renders', () => {
88
const { getByText } = render(
99
<KuberaThemeProvider platform="kubera-chaos">
10-
<ToggleButton onClick={() => {}}>Toggle Button</ToggleButton>
10+
<ToggleButton isToggled={true} onClick={() => {}}>
11+
Toggle Button
12+
</ToggleButton>
1113
</KuberaThemeProvider>
1214
);
1315

‎src/core/InputField/InputField.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const InputField: React.FC<InputProps> = ({
1818
disabled,
1919
type,
2020
fullWidth,
21+
className,
2122
...rest
2223
}) => {
2324
const classes = useStyles({ fullWidth });
@@ -43,11 +44,9 @@ const InputField: React.FC<InputProps> = ({
4344
<TextField
4445
data-testid="inputField"
4546
variant="outlined"
46-
className={
47-
disabled
48-
? `${classes.root} ${classes.disabled}`
49-
: `${classes.root} ${getVariant(variant)}`
50-
}
47+
className={`${classes.root} ${className} ${
48+
disabled ? classes.disabled : getVariant(variant)
49+
}`}
5150
type={type !== 'password' ? type : showPassword ? 'text' : 'password'}
5251
error={variant === 'error'}
5352
disabled={disabled}

‎src/core/KuberaCard/KuberaCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@ interface KuberaCardProps {
66
borderColor: string;
77
width: string;
88
height: string;
9+
className?: string;
910
}
1011

1112
const KuberaCard: React.FC<KuberaCardProps> = ({
1213
glow,
1314
borderColor,
1415
width,
1516
height,
17+
className,
1618
children,
1719
}) => {
1820
const classes = useStyles({ glow, borderColor, width, height });
19-
return <div className={classes.root}>{children}</div>;
21+
return <div className={`${classes.root} ${className}`}>{children}</div>;
2022
};
2123

2224
export { KuberaCard };

‎src/core/Link/Link.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import React from 'react';
22
import { NavLink } from 'react-router-dom';
3-
import { useStyles } from './styles';
43
import { LinkBaseProps } from './base';
4+
import { useStyles } from './styles';
55

66
interface LinkProps extends LinkBaseProps {
77
disabled: boolean;
8+
className?: string;
89
}
910

10-
const Link: React.FC<LinkProps> = ({ to, target, children, disabled }) => {
11+
const Link: React.FC<LinkProps> = ({
12+
to,
13+
target,
14+
disabled,
15+
className,
16+
children,
17+
}) => {
1118
const classes = useStyles();
1219
const disableLink = disabled ? classes.disabled : '';
1320
return (
1421
<NavLink
15-
className={`${classes.root} ${disableLink}`}
22+
className={`${classes.root} ${className} ${disableLink}`}
1623
to={to}
1724
target={target}
1825
rel="noreferrer noopener"

‎src/core/Modal/Modal.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@ const Modal: React.FC<ModalProps> = ({
1414
width,
1515
open,
1616
onClose,
17+
className,
1718
modalActions,
1819
...rest
1920
}) => {
2021
const classes = useStyles({ width });
2122

2223
return (
23-
<MuiModal open={open} onClose={onClose} className={classes.root} {...rest}>
24+
<MuiModal
25+
open={open}
26+
onClose={onClose}
27+
className={`${classes.root} ${className}`}
28+
{...rest}
29+
>
2430
<div className={classes.content}>
2531
{modalActions && (
2632
<div className={classes.modalActions}>{modalActions}</div>

0 commit comments

Comments
 (0)