Merge pull request #25 from Oliphaunte/develop

Updated components to use children as opposed to props

Author: Rulox

.travis.yml

@@ -10,4 +10,5 @@ before_install:
   npm install
   npm --version
 script:
-  - npm run js-lint -s
+  - npm run js-lint -s
+  - npm run sass-lint -s

app/components/atoms/Button/Button.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 const Button = (props) => {
   return (
-    <button className="a__button">{props.text}</button>
+    <button className="a__button">{props.children}</button>
   );
 };
 
 Button.propTypes = {
-  text: React.PropTypes.string.isRequired
+  children: React.PropTypes.string.isRequired
 };
 
-export default Button;
+export default Button;

app/components/atoms/Paragraph/Paragraph.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 const Paragraph = (props) => {
   return (
-    <p className="a__paragraph">{props.text}</p>
+    <p className="a__paragraph">{props.children}</p>
   );
 };
 
 Paragraph.propTypes = {
-  text: React.PropTypes.string.isRequired
+  children: React.PropTypes.string.isRequired
 };
 
-export default Paragraph;
+export default Paragraph;

app/components/atoms/Title/Title.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 const Title = (props) => {
   return (
-    <h1 className="a__title">{props.text}</h1>
+    <h1 className="a__title">{props.children}</h1>
   );
 };
 
 Title.propTypes = {
-  text: React.PropTypes.string.isRequired
+  children: React.PropTypes.string.isRequired
 };
 
-export default Title;
+export default Title;

app/components/molecules/Content/Content.js

@@ -5,8 +5,8 @@ import Paragraph from '../../atoms/Paragraph/Paragraph';
 const Content = (props) => {
   return (
     <div className="m__content">
-      <Title text={props.title}/>
-      <Paragraph text={props.text}/>
+      <Title>{props.title}</Title>
+      <Paragraph>{props.text}</Paragraph>
     </div>
   );
 };
@@ -16,4 +16,4 @@ Content.propTypes = {
   text: React.PropTypes.string
 };
 
-export default Content;
+export default Content;

app/components/organisms/Form/Form.js

@@ -12,7 +12,7 @@ const Form = (props) => {
           );
         })
       }
-      <Button text={props.buttonText}/>
+      <Button>{props.buttonText}</Button>
     </form>
   );
 };

app/components/templates/About/About.js

@@ -3,8 +3,8 @@ import Title from '../../atoms/Title/Title';
 
 const About = () => {
   return (
-    <Title text="This is an example About page"/>
+    <Title>"This is an example About page"</Title>
   );
 };
 
-export default About;
+export default About;

app/components/templates/Home/Home.js

@@ -6,8 +6,8 @@ import Form from '../../organisms/Form/Form';
 const Home = (props) => {
   return (
     <div>
-      <Title text="Basic React App"/>
-      <Title text="Example of an atomic Blog"/>
+      <Title>Basic React App</Title>
+      <Title>Example of an atomic Blog</Title>
       <Article
         title="This is an article"
         image={{src: 'http://placehold.it/300x200', alt: 'Placehold'}}
@@ -24,7 +24,7 @@ const Home = (props) => {
 
       <hr/>
 
-      <Title text="Example of an Atomic Form"/>
+      <Title>Example of an Atomic Form</Title>
       <Form fields={props.form} buttonText="Submit"/>
     </div>
   );
@@ -47,4 +47,4 @@ Home.defaultProps = {
   ]
 };
 
-export default Home;
+export default Home;