Skip to content

Commit e01094b

Browse files
steven11329steven11329
authored
Merge pull request #16 from BeeInventor/develop
v1.1.4
2 parents 93c2c92 + e97fc90 commit e01094b

File tree

10 files changed

+489
-90
lines changed

10 files changed

+489
-90
lines changed

‎.storybook/preview.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,15 @@ export const parameters = {
2020
},
2121
},
2222
backgrounds: {
23-
default: 'figma',
23+
default: 'dark',
2424
values: [
2525
{
26-
name: 'figma',
27-
value: '#E5E5E5',
26+
name: 'dark',
27+
value: '#3E3E3E',
28+
},
29+
{
30+
name: 'light',
31+
value: '#EBEBEB',
2832
},
2933
],
3034
},

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@beeinventor/dasiot-react-component-lib",
3-
"version": "1.1.2",
3+
"version": "1.1.4",
44
"module": "lib/index.js",
55
"types": "lib/index.d.ts",
66
"files": [

‎src/Theme.types.ts

+3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ export interface Color {
2828
$80: string;
2929
$100: string;
3030
};
31+
green: {
32+
$100: string;
33+
};
3134
highlight: string;
3235
box_bbg: string;
3336
}

‎src/components/Button/Button.stories.tsx

+95-13
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
import React from 'react';
22
import { Meta, Story } from '@storybook/react';
3-
import { ButtonProps } from '@mui/material/Button';
3+
import { styled } from '@mui/material';
4+
45
import Button from '.';
6+
import { ButtonProps } from './Button';
7+
8+
const Title = styled('h2')`
9+
color: white;
10+
text-shadow: 0 0 2px black;
11+
`;
12+
13+
const Block = styled('div')`
14+
margin-bottom: 8px;
15+
& > button {
16+
margin: 0 8px;
17+
}
18+
`;
519

620
export default {
721
title: 'Components/Button/Button',
822
component: Button,
923
argTypes: {
10-
color: {
11-
options: ['primary', 'secondary', 'success', 'error', 'info', 'warning'],
12-
control: { type: 'radio' },
13-
},
14-
variant: {
15-
options: ['contained', 'outlined', 'text', 'string'],
16-
control: { type: 'radio' },
17-
},
1824
fullWidth: {
1925
control: { type: 'boolean' },
2026
},
@@ -24,14 +30,90 @@ export default {
2430
},
2531
} as Meta;
2632

27-
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
33+
const Template: Story<ButtonProps> = (args) => (
34+
<>
35+
<Block>
36+
<Title>variant="text"</Title>
37+
<Button variant="text" color="primary" {...args}>
38+
Primary
39+
</Button>
40+
<Button variant="text" color="secondary" {...args}>
41+
Secondary
42+
</Button>
43+
<Button variant="text" color="success" {...args}>
44+
Success
45+
</Button>
46+
<Button variant="text" color="warning" {...args}>
47+
Warning
48+
</Button>
49+
<Button variant="text" color="info" {...args}>
50+
Info
51+
</Button>
52+
<Button variant="text" color="error" {...args}>
53+
Error
54+
</Button>
55+
</Block>
56+
<Block>
57+
<Title>variant="contained"</Title>
58+
<Button variant="contained" color="primary" {...args}>
59+
Primary
60+
</Button>
61+
<Button variant="contained" color="secondary" {...args}>
62+
Secondary
63+
</Button>
64+
<Button variant="contained" color="success" {...args}>
65+
Success
66+
</Button>
67+
<Button variant="contained" color="warning" {...args}>
68+
Warning
69+
</Button>
70+
<Button variant="contained" color="info" {...args}>
71+
Info
72+
</Button>
73+
<Button variant="contained" color="error" {...args}>
74+
Error
75+
</Button>
76+
</Block>
77+
<Block>
78+
<Title>variant="outlined"</Title>
79+
<Button variant="outlined" color="primary" {...args}>
80+
Primary
81+
</Button>
82+
<Button variant="outlined" color="secondary" {...args}>
83+
Secondary
84+
</Button>
85+
<Button variant="outlined" color="success" {...args}>
86+
Success
87+
</Button>
88+
<Button variant="outlined" color="warning" {...args}>
89+
Warning
90+
</Button>
91+
<Button variant="outlined" color="info" {...args}>
92+
Info
93+
</Button>
94+
<Button variant="outlined" color="error" {...args}>
95+
Error
96+
</Button>
97+
</Block>
98+
</>
99+
);
28100

29101
export const Default: Story<ButtonProps> = Template.bind({});
30102

31103
Default.args = {
32-
color: 'primary',
33-
children: 'Button',
34-
variant: 'contained',
35104
fullWidth: false,
36105
disabled: false,
37106
};
107+
108+
export const DefaultLight: Story<ButtonProps> = Template.bind({});
109+
110+
DefaultLight.parameters = {
111+
backgrounds: {
112+
default: 'light',
113+
},
114+
};
115+
116+
DefaultLight.args = {
117+
...Default.args,
118+
mode: 'light',
119+
};

‎src/components/Button/Button.tsx

+125-22
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,151 @@
1-
import MuiButton, { ButtonProps } from '@mui/material/Button';
1+
import React from 'react';
2+
import MuiButton, { ButtonProps as MuiButtonProps } from '@mui/material/Button';
23
import { styled } from '@mui/material/styles';
34

4-
const StyledButton = styled(MuiButton)<ButtonProps>(({ theme }) => ({
5+
import { Mode } from '../main.types';
6+
7+
interface StyledButtonProps {
8+
mode?: Mode;
9+
}
10+
11+
const StyledButton = styled(MuiButton)<StyledButtonProps>(({ theme }) => ({
512
...theme.text.Subtitle_16_Med,
613
padding: '4px 32px',
714
borderRadius: 90000,
815
textTransform: 'none',
916
minHeight: 32,
17+
18+
'&.Mui-disabled': {
19+
opacity: 0.3,
20+
},
21+
22+
'&.MuiButton-textPrimary': {
23+
color: theme.palette.primary.main,
24+
},
25+
26+
'&.MuiButton-textSecondary': {
27+
'&[mode="dark"]': {
28+
color: 'white',
29+
'&:hover': {
30+
backgroundColor: 'rgba(101, 101, 101, 0.1)',
31+
},
32+
},
33+
},
34+
35+
'&.MuiButton-textSuccess': {
36+
color: theme.palette.success.main,
37+
},
38+
39+
'&.MuiButton-textWarning': {
40+
color: theme.palette.warning.main,
41+
},
42+
43+
'&.MuiButton-textInfo': {
44+
color: theme.palette.info.main,
45+
},
46+
47+
'&.MuiButton-textError': {
48+
color: theme.palette.error.main,
49+
},
50+
1051
'&.MuiButton-contained': {
52+
color: '#FFFFFF',
1153
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
1254
'&:hover': {
1355
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
1456
},
15-
'&:active': {
16-
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
17-
},
18-
'&:disabled': {
19-
color: '#FFFFFF',
20-
},
2157
},
58+
2259
'&.MuiButton-containedPrimary': {
23-
color: '#FFFFFF',
60+
backgroundColor: theme.palette.primary.main,
2461
'&:hover': {
2562
backgroundColor: theme.color.primary.$80,
2663
},
27-
'&:active': {
28-
backgroundColor: theme.color.primary.$100,
29-
},
30-
'&:disabled': {
31-
backgroundColor: '#E6D2A1',
32-
},
3364
},
65+
3466
'&.MuiButton-containedSecondary': {
35-
color: '#FFFFFF',
67+
backgroundColor: theme.color.secondary.$80,
3668
'&:hover': {
37-
backgroundColor: theme.color.secondary.$80,
69+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
70+
},
71+
},
72+
73+
'&.MuiButton-containedSuccess': {
74+
'&.Mui-disabled': {
75+
backgroundColor: theme.palette.success.main,
76+
},
77+
},
78+
79+
'&.MuiButton-containedWarning': {
80+
'&.Mui-disabled': {
81+
backgroundColor: theme.palette.warning.main,
3882
},
39-
'&:active': {
40-
backgroundColor: theme.color.secondary.$80,
83+
},
84+
85+
'&.MuiButton-containedInfo': {
86+
'&.Mui-disabled': {
87+
backgroundColor: theme.palette.info.main,
4188
},
42-
'&:disabled': {
43-
backgroundColor: '#B3B3B3',
89+
},
90+
91+
'&.MuiButton-containedError': {
92+
'&.Mui-disabled': {
93+
backgroundColor: theme.palette.error.main,
94+
},
95+
},
96+
97+
'&.MuiButton-outlinedPrimary': {
98+
'&.Mui-disabled': {
99+
color: theme.palette.primary.main,
100+
border: `1px solid ${theme.palette.primary.main}`,
101+
},
102+
},
103+
104+
'&.MuiButton-outlinedSecondary': {
105+
'&[mode="dark"]': {
106+
color: 'white',
107+
borderColor: 'rgba(255, 255, 255, 0.5)',
108+
'&:hover': {
109+
borderColor: 'rgba(255, 255, 255, 1)',
110+
},
111+
},
112+
},
113+
114+
'&.MuiButton-outlinedSuccess': {
115+
'&.Mui-disabled': {
116+
color: theme.palette.success.main,
117+
border: `1px solid ${theme.palette.success.main}`,
118+
},
119+
},
120+
121+
'&.MuiButton-outlinedWarning': {
122+
'&.Mui-disabled': {
123+
color: theme.palette.warning.main,
124+
border: `1px solid ${theme.palette.warning.main}`,
125+
},
126+
},
127+
128+
'&.MuiButton-outlinedInfo': {
129+
'&.Mui-disabled': {
130+
color: theme.palette.info.main,
131+
border: `1px solid ${theme.palette.info.main}`,
132+
},
133+
},
134+
135+
'&.MuiButton-outlinedError': {
136+
'&.Mui-disabled': {
137+
color: theme.palette.error.main,
138+
border: `1px solid ${theme.palette.error.main}`,
44139
},
45140
},
46141
}));
47142

48-
export default StyledButton;
143+
export interface ButtonProps extends MuiButtonProps {
144+
mode?: Mode;
145+
}
146+
147+
const Button: React.VFC<ButtonProps> = ({ mode = 'dark', ...props }) => {
148+
return <StyledButton mode={mode} {...props} />;
149+
};
150+
151+
export default Button;

0 commit comments

Comments
 (0)