Skip to content

Commit 64cd358

Browse files
arkajyotiMukherjeearkajyotiMukherjee
authored
Merge pull request #59
Updated Pills(Added Outlined Pills) + Added Text Variants Signed-off-by: Sayan Mondal <sayan.mondal@mayadata.io>
2 parents b847061 + 276c2b6 commit 64cd358

File tree

16 files changed

+174
-58
lines changed

16 files changed

+174
-58
lines changed

‎src/core/Pills/OutlinedPills/OutlinedPills.stories.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
import { ThemedBackground } from '../../../utils/storybook';
4+
import { OutlinedPills } from '../../Pills';
5+
6+
storiesOf('Pills/Outlined Pills', module)
7+
// Litmus Portal
8+
.add('Litmus Portal', () => (
9+
<ThemedBackground platform="litmus-portal">
10+
<OutlinedPills label="Outlined Pill" />
11+
</ThemedBackground>
12+
))
13+
14+
// Kubera Chaos
15+
.add('Kubera Chaos', () => (
16+
<ThemedBackground platform="kubera-chaos">
17+
<OutlinedPills label="Outlined Pill" />
18+
</ThemedBackground>
19+
))
20+
21+
// Kubera Propel
22+
.add('Kubera Propel', () => (
23+
<ThemedBackground platform="kubera-propel">
24+
<OutlinedPills label="Outlined Pill" />
25+
</ThemedBackground>
26+
))
27+
28+
// Kubera Portal
29+
.add('Kubera Portal', () => (
30+
<ThemedBackground platform="kubera-portal">
31+
<OutlinedPills label="Outlined Pill" />
32+
</ThemedBackground>
33+
))
34+
35+
// Kubera Core
36+
.add('Kubera Core', () => (
37+
<ThemedBackground platform="kubera-core">
38+
<OutlinedPills label="Outlined Pill" />
39+
</ThemedBackground>
40+
));

‎src/core/Pills/OutlinedPills/OutlinedPills.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Chip } from '@material-ui/core';
2+
import React from 'react';
3+
import { ChipBaseProps } from '../base';
4+
import { useStyles } from './style';
5+
6+
interface OutlinedPillsProps extends ChipBaseProps {
7+
label: string;
8+
}
9+
10+
const OutlinedPills: React.FC<OutlinedPillsProps> = ({ label }) => {
11+
const classes = useStyles();
12+
13+
return <Chip label={label} className={classes.root} />;
14+
};
15+
export { OutlinedPills };

‎src/core/Pills/OutlinedPills/__tests__/OutlinedPills.test.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { render } from '@testing-library/react';
2+
import React from 'react';
3+
import { KuberaThemeProvider } from '../../../../theme';
4+
import { OutlinedPills } from '../../../Pills';
5+
6+
describe('Basic Pills Component', () => {
7+
it('Renders', () => {
8+
const { getByText } = render(
9+
<KuberaThemeProvider platform="kubera-chaos">
10+
<OutlinedPills label="Outlined Pill" />
11+
</KuberaThemeProvider>
12+
);
13+
14+
expect(getByText('Outlined Pill')).toBeTruthy();
15+
});
16+
});

‎src/core/Pills/OutlinedPills/index.ts

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

‎src/core/Pills/OutlinedPills/style.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { makeStyles, Theme } from '@material-ui/core';
2+
3+
const useStyles = makeStyles((theme: Theme) => ({
4+
root: {
5+
padding: theme.spacing(0.45, 1.5),
6+
borderRadius: '0.1875rem',
7+
fontSize: '0.625rem',
8+
fontWeight: 500,
9+
textTransform: 'none',
10+
color: theme.palette.primary.light,
11+
height: 'auto',
12+
background: 'transparent',
13+
border: `0.025rem solid ${theme.palette.primary.dark}`,
14+
},
15+
}));
16+
17+
export { useStyles };

‎src/core/Pills/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './BasicPills';
22
export * from './LightPills';
3+
export * from './OutlinedPills';

‎src/core/Text/Header/Header.stories.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,49 @@ storiesOf('Text/HeaderText', module)
77
// Litmus Portal
88
.add('Litmus Portal', () => (
99
<ThemedBackground platform="litmus-portal" row>
10-
<Header>Header Text</Header>
11-
<Header variant="bold">Header Text</Header>
12-
<Header color={'green'}>Header Text</Header>
10+
<Header>Header Text Primary</Header>
11+
<Header variant="bold">Header Text Bold</Header>
12+
<Header variant="small">Header Text Small</Header>
13+
<Header color={'green'}>Header Text Colored</Header>
1314
</ThemedBackground>
1415
))
1516

1617
// Kubera Chaos
1718
.add('Kubera Chaos', () => (
1819
<ThemedBackground platform="kubera-chaos" row>
19-
<Header>Header Text</Header>
20-
<Header variant="bold">Header Text</Header>
21-
<Header color={'green'}>Header Text</Header>
20+
<Header>Header Text Primary</Header>
21+
<Header variant="bold">Header Text Bold</Header>
22+
<Header variant="small">Header Text Small</Header>
23+
<Header color={'green'}>Header Text Colored</Header>
2224
</ThemedBackground>
2325
))
2426

2527
// Kubera Propel
2628
.add('Kubera Propel', () => (
2729
<ThemedBackground platform="kubera-propel" row>
28-
<Header>Header Text</Header>
29-
<Header variant="bold">Header Text</Header>
30-
<Header color={'green'}>Header Text</Header>
30+
<Header>Header Text Primary</Header>
31+
<Header variant="bold">Header Text Bold</Header>
32+
<Header variant="small">Header Text Small</Header>
33+
<Header color={'green'}>Header Text Colored</Header>
3134
</ThemedBackground>
3235
))
3336

3437
// Kubera Portal
3538
.add('Kubera Portal', () => (
3639
<ThemedBackground platform="kubera-portal" row>
37-
<Header>Header Text</Header>
38-
<Header variant="bold">Header Text</Header>
39-
<Header color={'green'}>Header Text</Header>
40+
<Header>Header Text Primary</Header>
41+
<Header variant="bold">Header Text Bold</Header>
42+
<Header variant="small">Header Text Small</Header>
43+
<Header color={'green'}>Header Text Colored</Header>
4044
</ThemedBackground>
4145
))
4246

4347
// Kubera Core
4448
.add('Kubera Core', () => (
4549
<ThemedBackground platform="kubera-core" row>
46-
<Header>Header Text</Header>
47-
<Header variant="bold">Header Text</Header>
48-
<Header color={'green'}>Header Text</Header>
50+
<Header>Header Text Primary</Header>
51+
<Header variant="bold">Header Text Bold</Header>
52+
<Header variant="small">Header Text Small</Header>
53+
<Header color={'green'}>Header Text Colored</Header>
4954
</ThemedBackground>
5055
));

‎src/core/Text/Header/Header.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
import Typography from '@material-ui/core/Typography';
12
import React from 'react';
3+
import { TypographyBaseProps, Variant } from '../base';
24
import { useStyles } from './styles';
3-
import { TypographyBaseProps } from '../base';
4-
import Typography from '@material-ui/core/Typography';
5-
6-
type Variant = 'bold' | undefined;
75

86
interface HeaderProps extends TypographyBaseProps {
97
variant?: Variant;
@@ -17,6 +15,8 @@ const Header: React.FC<HeaderProps> = ({ color, variant, children }) => {
1715
switch (variant) {
1816
case 'bold':
1917
return classes.bold;
18+
case 'small':
19+
return classes.small;
2020
default:
2121
return classes.primary;
2222
}

‎src/core/Text/Header/styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const useStyles = makeStyles((theme: Theme) => ({
1616
bold: {
1717
fontWeight: 'bold',
1818
},
19+
small: {
20+
fontSize: '1.5rem',
21+
},
1922
}));
2023

2124
export { useStyles };

‎src/core/Text/Paragraph/Paragraph.stories.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,49 @@ storiesOf('Text/ParagraphText', module)
77
// Litmus Portal
88
.add('Litmus Portal', () => (
99
<ThemedBackground platform="litmus-portal" row>
10-
<Paragraph>Paragraph Text</Paragraph>
11-
<Paragraph color={'green'}>Paragraph Text</Paragraph>
12-
<Paragraph variant="small">Paragraph Text</Paragraph>
10+
<Paragraph>Paragraph Text Primary</Paragraph>
11+
<Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
12+
<Paragraph variant="small">Paragraph Text Small</Paragraph>
13+
<Paragraph variant="bold">Paragraph Text Bold</Paragraph>
1314
</ThemedBackground>
1415
))
1516

1617
// Kubera Chaos
1718
.add('Kubera Chaos', () => (
1819
<ThemedBackground platform="kubera-chaos" row>
19-
<Paragraph>Paragraph Text</Paragraph>
20-
<Paragraph color={'green'}>Paragraph Text</Paragraph>
21-
<Paragraph variant="small">Paragraph Text</Paragraph>
20+
<Paragraph>Paragraph Text Primary</Paragraph>
21+
<Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
22+
<Paragraph variant="small">Paragraph Text Small</Paragraph>
23+
<Paragraph variant="bold">Paragraph Text Bold</Paragraph>
2224
</ThemedBackground>
2325
))
2426

2527
// Kubera Propel
2628
.add('Kubera Propel', () => (
2729
<ThemedBackground platform="kubera-propel" row>
28-
<Paragraph>Paragraph Text</Paragraph>
29-
<Paragraph color={'green'}>Paragraph Text</Paragraph>
30-
<Paragraph variant="small">Paragraph Text</Paragraph>
30+
<Paragraph>Paragraph Text Primary</Paragraph>
31+
<Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
32+
<Paragraph variant="small">Paragraph Text Small</Paragraph>
33+
<Paragraph variant="bold">Paragraph Text Bold</Paragraph>
3134
</ThemedBackground>
3235
))
3336

3437
// Kubera Portal
3538
.add('Kubera Portal', () => (
3639
<ThemedBackground platform="kubera-portal" row>
37-
<Paragraph>Paragraph Text</Paragraph>
38-
<Paragraph color={'green'}>Paragraph Text</Paragraph>
39-
<Paragraph variant="small">Paragraph Text</Paragraph>
40+
<Paragraph>Paragraph Text Primary</Paragraph>
41+
<Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
42+
<Paragraph variant="small">Paragraph Text Small</Paragraph>
43+
<Paragraph variant="bold">Paragraph Text Bold</Paragraph>
4044
</ThemedBackground>
4145
))
4246

4347
// Kubera Core
4448
.add('Kubera Core', () => (
4549
<ThemedBackground platform="kubera-core" row>
46-
<Paragraph>Paragraph Text</Paragraph>
47-
<Paragraph color={'green'}>Paragraph Text</Paragraph>
48-
<Paragraph variant="small">Paragraph Text</Paragraph>
50+
<Paragraph>Paragraph Text Primary</Paragraph>
51+
<Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
52+
<Paragraph variant="small">Paragraph Text Small</Paragraph>
53+
<Paragraph variant="bold">Paragraph Text Bold</Paragraph>
4954
</ThemedBackground>
5055
));

‎src/core/Text/Paragraph/Paragraph.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
import Typography from '@material-ui/core/Typography';
12
import React from 'react';
3+
import { TypographyBaseProps, Variant } from '../base';
24
import { useStyles } from './styles';
3-
import { TypographyBaseProps } from '../base';
4-
import Typography from '@material-ui/core/Typography';
5-
6-
type Variant = 'small' | undefined;
75

86
interface ParagraphProps extends TypographyBaseProps {
97
variant?: Variant;
@@ -15,6 +13,8 @@ const Paragraph: React.FC<ParagraphProps> = ({ color, variant, children }) => {
1513

1614
function getVarinat(variant: Variant): string {
1715
switch (variant) {
16+
case 'bold':
17+
return classes.bold;
1818
case 'small':
1919
return classes.small;
2020
default:

‎src/core/Text/Paragraph/styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ const useStyles = makeStyles((theme: Theme) => ({
1313
primary: {
1414
fontWeight: 'normal',
1515
},
16+
bold: {
17+
fontWeight: 'bold',
18+
},
1619
small: {
1720
fontSize: '0.75rem',
1821
fontWeight: 'normal',

‎src/core/Text/Subtitle/Subtitle.stories.tsx

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,55 @@
1-
import React from 'react';
21
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
33
import { ThemedBackground } from '../../../utils/storybook';
44
import { Subtitle } from './Subtitle';
55

66
storiesOf('Text/SubtitleText', module)
77
// Litmus Portal
88
.add('Litmus Portal', () => (
99
<ThemedBackground platform="litmus-portal" row>
10-
<Subtitle>Subtitle Text</Subtitle>
11-
<Subtitle color={'green'}>Subtitle Text</Subtitle>
12-
<Subtitle variant="small">Subtitle Text</Subtitle>
10+
<Subtitle>Subtitle Text Primary</Subtitle>
11+
<Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
12+
<Subtitle variant="bold">Subtitle Text Bold</Subtitle>
13+
<Subtitle variant="small">Subtitle Text Small</Subtitle>
1314
</ThemedBackground>
1415
))
1516

1617
// Kubera Chaos
1718
.add('Kubera Chaos', () => (
1819
<ThemedBackground platform="kubera-chaos" row>
19-
<Subtitle>Subtitle Text</Subtitle>
20-
<Subtitle color={'green'}>Subtitle Text</Subtitle>
21-
<Subtitle variant="small">Subtitle Text</Subtitle>
20+
<Subtitle>Subtitle Text Primary</Subtitle>
21+
<Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
22+
<Subtitle variant="bold">Subtitle Text Bold</Subtitle>
23+
<Subtitle variant="small">Subtitle Text Small</Subtitle>
2224
</ThemedBackground>
2325
))
2426

2527
// Kubera Propel
2628
.add('Kubera Propel', () => (
2729
<ThemedBackground platform="kubera-propel" row>
28-
<Subtitle>Subtitle Text</Subtitle>
29-
<Subtitle color={'green'}>Subtitle Text</Subtitle>
30-
<Subtitle variant="small">Subtitle Text</Subtitle>
30+
<Subtitle>Subtitle Text Primary</Subtitle>
31+
<Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
32+
<Subtitle variant="bold">Subtitle Text Bold</Subtitle>
33+
<Subtitle variant="small">Subtitle Text Small</Subtitle>
3134
</ThemedBackground>
3235
))
3336

3437
// Kubera Portal
3538
.add('Kubera Portal', () => (
3639
<ThemedBackground platform="kubera-portal" row>
37-
<Subtitle>Subtitle Text</Subtitle>
38-
<Subtitle color={'green'}>Subtitle Text</Subtitle>
39-
<Subtitle variant="small">Subtitle Text</Subtitle>
40+
<Subtitle>Subtitle Text Primary</Subtitle>
41+
<Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
42+
<Subtitle variant="bold">Subtitle Text Bold</Subtitle>
43+
<Subtitle variant="small">Subtitle Text Small</Subtitle>
4044
</ThemedBackground>
4145
))
4246

4347
// Kubera Core
4448
.add('Kubera Core', () => (
4549
<ThemedBackground platform="kubera-core" row>
46-
<Subtitle>Subtitle Text</Subtitle>
47-
<Subtitle color={'green'}>Subtitle Text</Subtitle>
48-
<Subtitle variant="small">Subtitle Text</Subtitle>
50+
<Subtitle>Subtitle Text Primary</Subtitle>
51+
<Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
52+
<Subtitle variant="bold">Subtitle Text Bold</Subtitle>
53+
<Subtitle variant="small">Subtitle Text Small</Subtitle>
4954
</ThemedBackground>
5055
));

‎src/core/Text/Subtitle/Subtitle.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
import Typography from '@material-ui/core/Typography';
12
import React from 'react';
3+
import { TypographyBaseProps, Variant } from '../base';
24
import { useStyles } from './styles';
3-
import { TypographyBaseProps } from '../base';
4-
import Typography from '@material-ui/core/Typography';
5-
6-
type Variant = 'small' | undefined;
75

86
interface SubtitleProps extends TypographyBaseProps {
97
variant?: Variant;
@@ -15,6 +13,8 @@ const Subtitle: React.FC<SubtitleProps> = ({ color, variant, children }) => {
1513

1614
function getVariant(variant: Variant): string {
1715
switch (variant) {
16+
case 'bold':
17+
return classes.bold;
1818
case 'small':
1919
return classes.small;
2020
default:

‎src/core/Text/Subtitle/styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ const useStyles = makeStyles((theme: Theme) => ({
1313
primary: {
1414
fontWeight: 'normal',
1515
},
16+
bold: {
17+
fontWeight: 'bold',
18+
},
1619
small: {
1720
fontSize: '0.75rem',
1821
fontWeight: 'normal',

‎src/core/Text/base.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ export type TypographyBaseProps = Omit<
44
TypographyProps,
55
'variant' | 'variantMapping' | 'color' | 'paragraph'
66
>;
7+
8+
export type Variant = 'bold' | 'small' | undefined;

0 commit comments

Comments
 (0)