Skip to content

Commit 184b3bc

Browse files
author
Turbo
committed
Add Rebass and basic elements
1 parent 047b131 commit 184b3bc

File tree

28 files changed

+520
-178
lines changed

28 files changed

+520
-178
lines changed

‎.eslintrc.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,14 @@ module.exports = {
6060

6161
// Allow console.log inside component
6262
"no-console": "off",
63+
64+
// Allow to write operation without space
65+
"space-infix-ops": [
66+
0,
67+
{
68+
"int32Hint": true,
69+
}
70+
],
6371
},
6472

6573
"settings": {

‎src/Components/Container/index.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,7 @@ import styled from 'styled-components';
22
import { Box } from 'rebass';
33

44
const Container = styled(Box)`
5-
max-width: ${props => props.maxWidth}px;
5+
color: ${props => props.theme.colors.black};
66
`;
77

8-
const FluidContainer = styled(Box)`
9-
max-width: 100%;
10-
`;
11-
12-
Container.defaultProps = {
13-
mx: 'auto',
14-
};
15-
16-
export { Container, FluidContainer };
8+
export default Container;

‎src/Components/Content/index.js‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/Components/FlexBox/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
import { Flex } from 'rebass';
3+
4+
const FlexBox = styled(Flex)`
5+
color: ${props => props.theme.colors.black};
6+
`;
7+
8+
FlexBox.defaultProps = {
9+
width: '100%',
10+
alignItems: 'center',
11+
justifyContent: 'space-between',
12+
mx: 'auto',
13+
};
14+
15+
export default FlexBox;

‎src/Components/FormElements/Form/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import FlexBox from 'src/Components/FlexBox';
5+
6+
const Form = ({ children, submit, ...rest }) => (
7+
<FlexBox {...rest}>
8+
<StyledForm onSubmit={submit} {...rest}>
9+
{children}
10+
</StyledForm>
11+
</FlexBox>
12+
);
13+
14+
const StyledForm = styled.form`
15+
position: relative;
16+
height: max-content;
17+
width: 100%;
18+
`;
19+
20+
Form.defaultProps = {
21+
submit: undefined,
22+
};
23+
24+
Form.propTypes = {
25+
submit: PropTypes.func,
26+
children: PropTypes.oneOfType([
27+
PropTypes.arrayOf(PropTypes.node),
28+
PropTypes.node,
29+
]).isRequired,
30+
};
31+
32+
export default Form;

‎src/Components/FormElements/Input/InputField/index.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import Container from 'src/Components/Container';
5+
6+
const arrowDown = 'static/icons/arrow_solid_black.svg';
7+
8+
const StyledInputField = styled(Container)`
9+
appearance: none;
10+
outline: 0;
11+
flex-grow: 1;
12+
box-shadow: none;
13+
border-radius: ${props => props.theme.radius[1]};
14+
padding: ${props => props.theme.space[2]}px;
15+
border: 1px solid ${props => props.theme.colors.secondary};
16+
17+
&::placeholder {
18+
color: ${props => props.theme.colors.grey};
19+
}
20+
21+
&:focus {
22+
border: 1.2px solid ${props => props.theme.colors.primary};
23+
transition: all .3s ease-out;
24+
}
25+
26+
&[type="date"] {
27+
position: relative;
28+
&::-webkit-inner-spin-button {
29+
display: none;
30+
}
31+
32+
&::-webkit-calendar-picker-indicator {
33+
color: rgba(0, 0, 0, 0);
34+
opacity: 0;
35+
z-index: 1;
36+
cursor: pointer;
37+
}
38+
39+
&:after {
40+
content: '';
41+
width: 48px;
42+
height: 100%;
43+
position: absolute;
44+
top: 0;
45+
right: 0;
46+
background-image: url(${arrowDown});
47+
background-repeat: no-repeat;
48+
background-size: 40%;
49+
background-position: center;
50+
transform: rotate(-90deg);
51+
}
52+
}
53+
`;
54+
55+
const StyledContainerInput = StyledInputField.withComponent('input');
56+
57+
const InputField = ({
58+
id, placeholder, type, ...rest
59+
}) => (
60+
<StyledContainerInput id={id} placeholder={placeholder} type={type} {...rest} />
61+
);
62+
63+
InputField.defaultProps = {
64+
placeholder: '',
65+
type: 'text',
66+
id: '',
67+
};
68+
69+
InputField.propTypes = {
70+
id: PropTypes.string,
71+
placeholder: PropTypes.string,
72+
type: PropTypes.oneOf(['password', 'date', 'text', 'email']),
73+
};
74+
75+
export default InputField;

‎src/Components/FormElements/Input/Label/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import { TextBlock } from 'src/Components/Typo';
5+
6+
const Label = ({
7+
id, label, children, ...rest
8+
}) => (
9+
<StyledLabel htmlFor={id} {...rest}>
10+
{label}
11+
{children}
12+
</StyledLabel>
13+
);
14+
15+
const TextBlockLabel = TextBlock.withComponent('label');
16+
17+
const StyledLabel = styled(TextBlockLabel)`
18+
display: flex;
19+
flex-direction: column;
20+
width: 100%;
21+
font-weight: bold;
22+
line-height: 1;
23+
24+
input {
25+
margin-top: 5px;
26+
}
27+
`;
28+
29+
Label.defaultProps = {
30+
id: null,
31+
label: null,
32+
};
33+
34+
Label.propTypes = {
35+
id: PropTypes.string,
36+
label: PropTypes.string,
37+
children: PropTypes.oneOfType([
38+
PropTypes.arrayOf(PropTypes.node),
39+
PropTypes.node,
40+
]).isRequired,
41+
};
42+
43+
44+
export default Label;

‎src/Components/FormElements/Input/Validation/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
5+
const FormValidation = ({
6+
isShow, messageType, message, ...rest
7+
}) => (
8+
<StyledFormValidation isShow={isShow} messageType={messageType} {...rest}>
9+
{message}
10+
</StyledFormValidation>
11+
);
12+
13+
const StyledFormValidation = styled.span`
14+
width: 100%;
15+
display: ${props => (props.isShow ? 'block' : 'none')};
16+
color: ${props => (props.messageType ? props.theme.colors[props.messageType] : props.theme.colors.black)};
17+
font-weight: normal;
18+
font-size: ${props => props.theme.halfBaseline * 3}px;
19+
line-height: 1;
20+
margin-top: ${props => props.theme.halfBaseline * 3}px;
21+
`;
22+
23+
FormValidation.defaultProps = {
24+
message: '',
25+
messageType: 'info',
26+
isShow: false,
27+
};
28+
29+
FormValidation.propTypes = {
30+
message: PropTypes.string,
31+
messageType: PropTypes.oneOf(['info', 'primary', 'success', 'danger']),
32+
isShow: PropTypes.bool,
33+
};
34+
35+
export default FormValidation;

‎src/Components/FormElements/Input/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import FlexBox from 'src/Components/FlexBox';
5+
import Label from './Label';
6+
import Validation from './Validation';
7+
import InputField from './InputField';
8+
9+
const Input = ({
10+
placeholder, label, type, id,
11+
isShow, messageType, message, hasButton, ...rest
12+
}) => (
13+
<FlexBox {...rest}>
14+
{/* Show Label if label props is true */}
15+
{label
16+
// eslint-disable-next-line jsx-a11y/label-has-for
17+
&& (
18+
<Label htmlFor={id} label={label}>
19+
<InputField id={id} placeholder={placeholder} type={type} {...rest} />
20+
</Label>
21+
)
22+
}
23+
24+
{/* Do not show Label */}
25+
{!label && <InputField id={id} placeholder={placeholder} type={type} {...rest} />}
26+
27+
{/* Do not show Submit button */}
28+
{hasButton && <input value="" type="submit" />}
29+
30+
<Validation isShow={isShow} messageType={messageType} message={message} {...rest} />
31+
</FlexBox>
32+
);
33+
34+
Input.defaultProps = {
35+
children: null,
36+
37+
};
38+
39+
Input.propTypes = {
40+
children: PropTypes.oneOfType([
41+
PropTypes.arrayOf(PropTypes.node),
42+
PropTypes.node,
43+
]),
44+
};
45+
46+
export default Input;

‎src/Components/FormElements/Select/index.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import styled from 'styled-components';
4+
5+
const arrowDown = 'arrow-down-icon-url';
6+
7+
const SelectBox = ({
8+
width, name, children, ...rest
9+
}) => (
10+
<SelectWrapper width={width}>
11+
<Select name={name} {...rest}>
12+
{children}
13+
</Select>
14+
</SelectWrapper>
15+
);
16+
17+
const Select = styled.select`
18+
appearance: none;
19+
outline: 0;
20+
border: 0 !important;
21+
background: white;
22+
background-image: none;
23+
width: 100%;
24+
height: 100%;
25+
margin: 0;
26+
padding: 0 0 0 ${props => props.theme.space.m};
27+
color: black;
28+
cursor: pointer;
29+
font-size: 14px;
30+
font-weight: bold;
31+
transition: .1s all ease;
32+
`;
33+
34+
const SelectWrapper = styled.div`
35+
position: relative;
36+
display: block;
37+
box-shadow: ${props => props.theme.shadows.standard} !important;
38+
width: ${props => props.width};
39+
height: ${props => props.theme.sizes.height.l};
40+
line-height: 1;
41+
overflow: hidden;
42+
border-radius: ${props => props.theme.sizes.radius};
43+
44+
&:after {
45+
content: '';
46+
position: absolute;
47+
top: 0;
48+
right: 0;
49+
bottom: 0;
50+
padding: ${props => props.theme.space.insetSquish.xs};
51+
width: 30px;
52+
pointer-events: none;
53+
background-image: url(${arrowDown});
54+
background-repeat: no-repeat;
55+
background-size: 40%;
56+
background-position: center;
57+
transform: rotate(-90deg);
58+
}
59+
`;
60+
61+
SelectBox.defaultProps = {
62+
width: '100%',
63+
name: '',
64+
};
65+
66+
SelectBox.propTypes = {
67+
width: PropTypes.string,
68+
name: PropTypes.string,
69+
children: PropTypes.oneOfType([
70+
PropTypes.arrayOf(PropTypes.node),
71+
PropTypes.node,
72+
]).isRequired,
73+
};
74+
75+
export default SelectBox;

0 commit comments

Comments
 (0)