Skip to content

Commit c49bfbe

Browse files
ProskyneteProskynete
authored
Merge pull request #12 from Proskynete/dev
Update dependencies version and create new props
2 parents b9eca50 + 8123a3e commit c49bfbe

File tree

10 files changed

+151
-6742
lines changed

10 files changed

+151
-6742
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ node_modules/
22
coverage/
33

44
yarn-error.log
5+
yarn.lock
56

67
npm-debug.log
78
package-lock.json

‎build/index.js‎

Lines changed: 24 additions & 384 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vertical-timeline-component-react",
3-
"version": "1.1.2",
3+
"version": "1.2.1",
44
"description": "A simple component for create a vertical timeline with Reactjs",
55
"main": "build/index.js",
66
"repository": "https://github.com/Proskynete/vertical-timeline-component-react",
@@ -27,7 +27,7 @@
2727
"Vertical Timeline"
2828
],
2929
"peerDependencies": {
30-
"react": "^16.8.6"
30+
"react": "^16.12.0"
3131
},
3232
"dependencies": {
3333
"chai": "^4.2.0",
@@ -38,11 +38,11 @@
3838
"jest": "^24.7.1",
3939
"path": "^0.12.7",
4040
"prop-types": "^15.7.2",
41-
"react": "^16.8.6",
42-
"react-dom": "^16.8.6",
43-
"styled-components": "^4.3.1",
44-
"webpack": "^4.29.6",
45-
"webpack-cli": "^3.3.0"
41+
"react": "^16.12.0",
42+
"react-dom": "^16.12.0",
43+
"styled-components": "^4.4.1",
44+
"webpack": "^4.41.5",
45+
"webpack-cli": "^3.3.10"
4646
},
4747
"devDependencies": {
4848
"@babel/core": "^7.0.0",
@@ -51,17 +51,12 @@
5151
"@babel/preset-env": "^7.0.0",
5252
"babel-jest": "^24.7.1",
5353
"babel-loader": "^8.0.0",
54-
"css-loader": "^2.1.1",
5554
"eslint": "^5.16.0",
5655
"eslint-config-airbnb": "^17.1.0",
5756
"eslint-import-resolver-webpack": "^0.11.1",
5857
"eslint-plugin-import": "^2.17.2",
5958
"eslint-plugin-jsx-a11y": "^6.2.1",
6059
"eslint-plugin-react": "^7.12.4",
61-
"node-sass": "^4.11.0",
62-
"react-test-renderer": "^16.8.6",
63-
"sass-lint": "^1.12.1",
64-
"sass-loader": "^7.1.0",
65-
"style-loader": "^0.23.1"
60+
"react-test-renderer": "^16.8.6"
6661
}
67-
}
62+
}

‎src/components/content/index.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@ const ContainerComponent = styled.div`
1717
`;
1818

1919
const Content = (props) => {
20-
const {
21-
children,
22-
} = props;
20+
const { children } = props;
2321

2422
return (
2523
<ContainerComponent className="content-component">
26-
{ children }
24+
{children}
2725
</ContainerComponent>
2826
);
2927
};

‎src/components/content_body/index.js‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,45 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const BodyComponent = styled.div`
6-
color: #002a3a;
7-
font-size: .9em;
8-
padding-bottom: 20px;
9-
padding-left: 15px;
10-
position: relative;
11-
12-
@media (min-width: 1200px) {
13-
font-size: 1em;
14-
}
15-
16-
&::before {
17-
background-color: #ccc;
18-
content: '';
19-
height: 100%;
20-
left: -3px;
21-
min-height: 95%;
22-
position: absolute;
23-
top: 10px;
24-
width: 2px;
25-
}
6+
font-size: 0.9em;
7+
padding-bottom: 30px;
8+
padding-left: 15px;
9+
position: relative;
10+
11+
@media (min-width: 1200px) {
12+
font-size: 1em;
13+
}
14+
15+
&::before {
16+
content: '';
17+
background-color: #cccccc;
18+
height: 100%;
19+
left: -3px;
20+
min-height: 95%;
21+
position: absolute;
22+
top: 10px;
23+
width: 2px;
24+
}
2625
`;
2726

2827
const BodyComponentTitle = styled.p`
29-
font-weight: bold;
30-
margin-bottom: 5px;
31-
margin-top: 0;
32-
text-align: left;
28+
color: #002a3a;
29+
font-weight: bold;
30+
margin-bottom: 10px;
31+
font-size: 18px;
32+
margin-top: 0;
33+
text-align: left;
3334
`;
3435

3536
const ContentBody = (props) => {
36-
const {
37-
title,
38-
children,
39-
} = props;
37+
const { title, children } = props;
4038

4139
return (
4240
<BodyComponent className="body-component">
4341
<BodyComponentTitle className="title-body-component">
44-
{ title }
42+
{title}
4543
</BodyComponentTitle>
46-
{ children }
44+
{children}
4745
</BodyComponent>
4846
);
4947
};
@@ -53,5 +51,4 @@ ContentBody.propTypes = {
5351
children: PropTypes.node.isRequired,
5452
};
5553

56-
5754
export default ContentBody;

‎src/components/content_year/index.js‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,60 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const YearComponent = styled.div`
6-
color: #002a3a;
7-
font-size: 1em;
8-
font-weight: 400;
9-
padding-right: 15px;
10-
position: relative;
11-
width: 40px;
12-
13-
&::after {
14-
background: #ccc;
15-
border-radius: 50%;
16-
content: '';
17-
height: 6px;
18-
position: absolute;
19-
right: -1px;
20-
top: 5px;
21-
width: 6px;
22-
}
6+
color: #002a3a;
7+
font-size: 1em;
8+
font-weight: 400;
9+
padding-right: 15px;
10+
padding-bottom: 10px;
11+
position: relative;
12+
width: 40px;
13+
14+
&::after {
15+
background: #ccc;
16+
border-radius: 50%;
17+
content: '';
18+
height: 6px;
19+
position: absolute;
20+
right: -1px;
21+
top: 5px;
22+
width: 6px;
23+
}
2324
`;
2425

2526
const YearComponentItem = styled.div`
26-
margin-bottom: 8px;
27+
margin-bottom: 8px;
2728
`;
2829

2930
const ContentYear = (props) => {
30-
const {
31-
year,
32-
} = props;
31+
const { startYear, current } = props;
3332

3433
return (
3534
<YearComponent className="year-component">
36-
<YearComponentItem className="item-year-component">
37-
{ year }
38-
</YearComponentItem>
35+
{current ? (
36+
<>
37+
<YearComponentItem className="item-year-component">
38+
{new Date().getFullYear()}
39+
</YearComponentItem>
40+
<YearComponentItem className="item-year-component">
41+
{startYear}
42+
</YearComponentItem>
43+
</>
44+
) : (
45+
<YearComponentItem className="item-year-component">
46+
{startYear}
47+
</YearComponentItem>
48+
)}
3949
</YearComponent>
4050
);
4151
};
4252

53+
ContentYear.defaultProps = {
54+
current: false,
55+
};
56+
4357
ContentYear.propTypes = {
44-
year: PropTypes.string.isRequired,
58+
startYear: PropTypes.number.isRequired,
59+
current: PropTypes.bool,
4560
};
4661

4762
export default ContentYear;

‎src/components/description/index.js‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,43 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const DescriptionComponent = styled.div`
6-
margin-bottom: 10px;
7-
margin-top: 10px;
8-
text-align: left;
6+
margin-top: 5px;
7+
text-align: left;
98
`;
109

1110
const DescriptionComponentText = styled.span`
12-
font-weight: 300;
11+
font-weight: 300;
1312
`;
1413

1514
const DescriptionComponentTextOptional = styled.span`
16-
color: #818a91;
17-
font-style: italic;
15+
color: #818a91;
16+
font-style: italic;
1817
19-
&::before {
20-
content: '- (';
21-
margin-left: 5px;
22-
}
18+
&::before {
19+
content: '- (';
20+
margin-left: 5px;
21+
}
2322
24-
&::after {
25-
content: ')';
26-
}
23+
&::after {
24+
content: ')';
25+
}
2726
`;
2827

2928
const Description = (props) => {
30-
const {
31-
text,
32-
optional,
33-
} = props;
29+
const { text, optional } = props;
3430

3531
return (
3632
<DescriptionComponent>
3733
<DescriptionComponentText className="text-description-component">
38-
{ text }
34+
{text}
3935
</DescriptionComponentText>
40-
{ optional
41-
? (
42-
<DescriptionComponentTextOptional className="optional-description-component">
43-
{ optional }
44-
</DescriptionComponentTextOptional>
45-
) : ''
46-
}
36+
{optional ? (
37+
<DescriptionComponentTextOptional className="optional-description-component">
38+
{optional}
39+
</DescriptionComponentTextOptional>
40+
) : (
41+
''
42+
)}
4743
</DescriptionComponent>
4844
);
4945
};
@@ -57,5 +53,4 @@ Description.defaultProps = {
5753
optional: '',
5854
};
5955

60-
6156
export default Description;

‎src/components/timeline/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,16 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
const TimelineComponent = styled.div`
6-
padding: 10px 20px 20px;
7-
width: 100%;
6+
padding: 10px 20px 20px;
7+
width: 100%;
88
`;
99

1010
const Timeline = (props) => {
11-
const {
12-
children,
13-
} = props;
11+
const { children } = props;
1412

1513
return (
1614
<TimelineComponent className="timeline-component">
17-
{ children }
15+
{children}
1816
</TimelineComponent>
1917
);
2018
};

‎webpack.config.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
const path = require('path');
22

33
module.exports = {
4-
entry: './src/main.js',
5-
output: {
6-
path: path.resolve(__dirname, 'build'),
7-
filename: 'index.js',
8-
libraryTarget: 'commonjs2',
9-
},
10-
module: {
11-
rules: [
12-
{
13-
test: /\.js$/,
14-
include: path.resolve(__dirname, 'src'),
15-
exclude: /(node_modules|bower_components|build)/,
16-
loader: 'babel-loader',
17-
query: {
18-
presets: ['@babel/preset-env'],
19-
},
20-
},
21-
],
22-
},
23-
externals: {
24-
react: 'commonjs react',
25-
},
4+
entry: './src/main.js',
5+
output: {
6+
path: path.resolve(__dirname, 'build'),
7+
filename: 'index.js',
8+
libraryTarget: 'commonjs2'
9+
},
10+
module: {
11+
rules: [
12+
{
13+
test: /\.js$/,
14+
include: path.resolve(__dirname, 'src'),
15+
exclude: /(node_modules|build)/,
16+
loader: 'babel-loader',
17+
query: {
18+
presets: ['@babel/preset-env']
19+
}
20+
}
21+
]
22+
},
23+
externals: {
24+
react: 'commonjs react'
25+
}
2626
};

0 commit comments

Comments
 (0)