Add new props - start year and end year

Author: Proskynete

build/index.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const BodyComponent = styled.div`
-	color: #002a3a;
 	font-size: 0.9em;
-	padding-bottom: 20px;
+	padding-bottom: 30px;
 	padding-left: 15px;
 	position: relative;
 
@@ -14,8 +13,8 @@ const BodyComponent = styled.div`
 	}
 
 	&::before {
-		background-color: #ccc;
 		content: '';
+		background-color: #cccccc;
 		height: 100%;
 		left: -3px;
 		min-height: 95%;
@@ -26,8 +25,10 @@ const BodyComponent = styled.div`
 `;
 
 const BodyComponentTitle = styled.p`
+	color: #002a3a;
 	font-weight: bold;
-	margin-bottom: 5px;
+	margin-bottom: 10px;
+	font-size: 18px;
 	margin-top: 0;
 	text-align: left;
 `;

src/components/content_body/index.js

@@ -27,31 +27,38 @@ const YearComponentItem = styled.div`
 	margin-bottom: 8px;
 `;
 
-const compare = (a, b) => {
-	if (a < b) return 1;
-	if (b < a) return -1;
-	return 0;
-};
-
-const handleEachYears = years =>
-	years.sort(compare).map(year => (
-		<YearComponentItem key={year} className="item-year-component">
-			{year}
-		</YearComponentItem>
-	));
-
 const ContentYear = props => {
-	const { years } = props;
+	const { startYear, endYear, current } = props;
 
 	return (
 		<YearComponent className="year-component">
-			{handleEachYears(years)}
+			{current ? (
+				<>
+					<YearComponentItem className="item-year-component">
+						{endYear}
+					</YearComponentItem>
+					<YearComponentItem className="item-year-component">
+						{startYear}
+					</YearComponentItem>
+				</>
+			) : (
+				<YearComponentItem className="item-year-component">
+					{startYear}
+				</YearComponentItem>
+			)}
 		</YearComponent>
 	);
 };
 
+ContentYear.defaultProps = {
+	current: false,
+	endYear: 0
+};
+
 ContentYear.propTypes = {
-	years: PropTypes.arrayOf(PropTypes.string).isRequired
+	startYear: PropTypes.number.isRequired,
+	endYear: PropTypes.number,
+	current: PropTypes.bool
 };
 
 export default ContentYear;

src/components/content_year/index.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const DescriptionComponent = styled.div`
-	margin-bottom: 10px;
-	margin-top: 10px;
+	margin-top: 5px;
 	text-align: left;
 `;