Merge pull request #18 from whyjay17/text_color_props

Text color props

Author: Proskynete

README.md

@@ -47,10 +47,11 @@ For each `Content` you need `ContentYear` since with this component you mark the
 
 For each `Content` you need `ContentBody`, because with this component you describe the events that occurred in that year using `Description` component.
 
-| Name     | Type   | Required | Description                                       |
-| -------- | ------ | -------- | ------------------------------------------------- |
-| Title    | String | True     | Show the title for the events                     |
-| Children | Node   | True     | It is necessary to use the description component. |
+| Name      | Type      | Required  | Description                                       |
+| --------- | --------- | --------- | ------------------------------------------------- |
+| Title     | String    | True      | Show the title for the events                     |
+| Children  | Node      | True      | It is necessary to use the description component. |
+| TextColor | String    | False     | Change the color of the text in the ContentBody.  |
 
 ### Description
 

build/index.js

@@ -25,17 +25,17 @@ const BodyComponent = styled.div`
 	}
 `;
 
-const BodyComponentTitle = styled.p`
-	color: #002a3a;
-	font-weight: bold;
-	margin-bottom: 10px;
-	font-size: 18px;
-	margin-top: 0;
-	text-align: left;
-`;
-
 const ContentBody = (props) => {
-	const { title, children } = props;
+	const { title, children, textColor } = props;
+
+	const BodyComponentTitle = styled.p`
+		color: ${textColor};
+		font-weight: bold;
+		margin-bottom: 10px;
+		font-size: 18px;
+		margin-top: 0;
+		text-align: left;
+	`;
 
 	return (
 		<BodyComponent className='body-component'>
@@ -50,6 +50,11 @@ const ContentBody = (props) => {
 ContentBody.propTypes = {
 	title: PropTypes.string.isRequired,
 	children: PropTypes.node.isRequired,
+	textColor: PropTypes.string,
+};
+
+ContentBody.defaultProps = {
+	textColor: '#002a3a',
 };
 
 export default ContentBody;