From d052b7ac152502b9889eefbae68c95c6a88b7b67 Mon Sep 17 00:00:00 2001
From: Dennis Espinoza <fev-ekd@MacBook-Pro-de-Dennis.local>
Date: Sat, 24 Feb 2018 19:11:53 -0500
Subject: [PATCH] refactor: eslint format

---
 .eslintrc                                     |  5 +-
 src/components/common/TechnologyLogo/index.js |  6 +--
 .../common/TechnologyLogo/styles.js           |  6 +--
 src/components/common/TopDrops/index.js       | 12 ++---
 src/components/common/TopDrops/styles.js      | 15 +++---
 src/components/forms/TextField/index.js       |  6 +--
 src/components/forms/TextField/styles.js      | 31 +++++------
 src/pages/index.js                            | 51 +++++++++++--------
 8 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 475c1cd..7419b37 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,10 @@
 {
   "parser": "babel-eslint",
 
-  "extends": ["prettier"],
+  "extends": [
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
 
   "parserOptions": {
     "ecmaVersion": 6,
diff --git a/src/components/common/TechnologyLogo/index.js b/src/components/common/TechnologyLogo/index.js
index fa88e53..bccdcf5 100644
--- a/src/components/common/TechnologyLogo/index.js
+++ b/src/components/common/TechnologyLogo/index.js
@@ -11,9 +11,7 @@ const TechnologyLogo = props => {
   return (
     <div className={cls}>
       <img className={classes.logo} src={logo} alt={name} />
-      <div className={classes.name}>
-        {name}
-      </div>
+      <div className={classes.name}>{name}</div>
     </div>
   );
 };
@@ -31,7 +29,7 @@ TechnologyLogo.propTypes = {
   /**
    * Technology route to website.
    */
-  route: PropTypes.string,
+  route: PropTypes.string
 };
 
 export default withStyles(styles)(TechnologyLogo);
diff --git a/src/components/common/TechnologyLogo/styles.js b/src/components/common/TechnologyLogo/styles.js
index 49f0e2d..b6a5bda 100644
--- a/src/components/common/TechnologyLogo/styles.js
+++ b/src/components/common/TechnologyLogo/styles.js
@@ -12,7 +12,7 @@ export default theme => ({
     fontStyle: 'italic',
     fontSize: 16,
     lineHeight: '20px',
-    padding: [0, 10],
+    padding: [0, 10]
   },
   logo: {
     width: 60,
@@ -23,10 +23,10 @@ export default theme => ({
   '@media screen and (min-width: 48em)': {
     root: {
       width: '14.28%',
-      marginBottom: 45,
+      marginBottom: 45
     },
     name: {
       padding: 0
     }
-  },
+  }
 });
diff --git a/src/components/common/TopDrops/index.js b/src/components/common/TopDrops/index.js
index 4191449..69d2070 100644
--- a/src/components/common/TopDrops/index.js
+++ b/src/components/common/TopDrops/index.js
@@ -12,18 +12,18 @@ const TopDrops = props => {
   return (
     <div className={classes.root}>
       <div className={classes.content}>
-        <div className={classes.segment}/>
+        <div className={classes.segment} />
       </div>
-      <div className={classes.line}/>
+      <div className={classes.line} />
       <div className={classes.dropsContainer}>
         <div className="container">
           <div className={classes.drops}>
-            <img src={dropLeftA} alt=""/>
-            <img className={classes.hideOnSmall} src={dropLeftB}/>
+            <img src={dropLeftA} alt="" />
+            <img className={classes.hideOnSmall} src={dropLeftB} />
           </div>
           <div className={classes.drops}>
-            <img className={classes.hideOnSmall} src={dropRightA}/>
-            <img src={dropRightB} alt=""/>
+            <img className={classes.hideOnSmall} src={dropRightA} />
+            <img src={dropRightB} alt="" />
           </div>
         </div>
       </div>
diff --git a/src/components/common/TopDrops/styles.js b/src/components/common/TopDrops/styles.js
index 570ad7a..d656545 100644
--- a/src/components/common/TopDrops/styles.js
+++ b/src/components/common/TopDrops/styles.js
@@ -8,8 +8,9 @@ export default theme => ({
   // CONTENT AREA
   content: {
     overflow: 'hidden',
+    position: 'relative',
     height: '100%',
-    width: '100%',
+    width: '100%'
   },
 
   // SEMI SPHERE
@@ -20,7 +21,7 @@ export default theme => ({
     bottom: -15,
     backgroundColor: '#fff',
     position: 'absolute',
-    borderRadius: '50%',
+    borderRadius: '50%'
   },
 
   // CENTER LINE
@@ -49,7 +50,7 @@ export default theme => ({
     bottom: 0,
     left: 0,
     '& .container': {
-      height: 215,
+      height: 215
     }
   },
   drops: {
@@ -103,7 +104,7 @@ export default theme => ({
     line: {
       height: 160,
       '&:after': {
-        height: 80,
+        height: 80
       }
     },
 
@@ -111,10 +112,10 @@ export default theme => ({
     drops: {
       width: 180,
       height: 180,
-      marginTop: 10,
+      marginTop: 10
     },
     hideOnSmall: {
       display: 'inline-block'
-    },
-  },
+    }
+  }
 });
diff --git a/src/components/forms/TextField/index.js b/src/components/forms/TextField/index.js
index ec8779c..d34bfd4 100644
--- a/src/components/forms/TextField/index.js
+++ b/src/components/forms/TextField/index.js
@@ -33,7 +33,7 @@ const TextField = props => {
         onChange,
         placeholder,
         ...fieldProps,
-        className: cx(classes.field, fieldProps.className),
+        className: cx(classes.field, fieldProps.className)
       })}
       {!!errorText && <div className={classes.errorText}>{errorText}</div>}
     </div>
@@ -84,13 +84,13 @@ TextField.propTypes = {
   /**
    * Extra fields to pass to the encapsulated field element.
    */
-  fieldProps: PropTypes.object,
+  fieldProps: PropTypes.object
 };
 
 TextField.defaultProps = {
   type: 'text',
   palette: 'primary',
-  fieldProps: {},
+  fieldProps: {}
 };
 
 export default withStyles(styles)(TextField);
diff --git a/src/components/forms/TextField/styles.js b/src/components/forms/TextField/styles.js
index c7c0e83..335c8de 100644
--- a/src/components/forms/TextField/styles.js
+++ b/src/components/forms/TextField/styles.js
@@ -1,8 +1,9 @@
-export default (theme) => {
-  const getColor = props => props.reversed ? '#fff' : theme.palette.inverted.base;
+export default theme => {
+  const getColor = props =>
+    props.reversed ? '#fff' : theme.palette.inverted.base;
   return {
     root: {
-      display: 'block',
+      display: 'block'
     },
     field: {
       display: 'block',
@@ -17,12 +18,12 @@ export default (theme) => {
       resize: 'none',
       transition: 'border-color 200ms ease-out',
 
-      minHeight: props => props.isTextarea ? 16 * 3 : 'auto',
+      minHeight: props => (props.isTextarea ? 16 * 3 : 'auto'),
       border: props => '2px solid ' + getColor(props),
       color: props => getColor(props),
 
       '&:focus': {
-        borderColor: props => theme.palette[props.palette].base,
+        borderColor: props => theme.palette[props.palette].base
       },
 
       // Remove browser/os appareance
@@ -33,41 +34,41 @@ export default (theme) => {
       // Placeholder color
       '&::-webkit-input-placeholder': {
         opacity: 1,
-        color: props => getColor(props),
+        color: props => getColor(props)
       },
       '&::-moz-placeholder': {
         opacity: 1,
-        color: props => getColor(props),
+        color: props => getColor(props)
       },
       '&:-ms-input-placeholder': {
         opacity: 1,
-        color: props => getColor(props),
+        color: props => getColor(props)
       },
       '&:-moz-placeholder': {
         opacity: 1,
-        color: props => getColor(props),
+        color: props => getColor(props)
       },
 
       // Autofill background color
       '&:-webkit-autofill': {
-        '-webkit-box-shadow': '0 0 0 rgba(0, 0, 0, 0.001)',
+        '-webkit-box-shadow': '0 0 0 rgba(0, 0, 0, 0.001)'
       },
 
       // Input number arrows
       '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
         '-webkit-appearance': 'none',
-        margin: 0,
+        margin: 0
       },
       '&[type="number"]': {
-        '-moz-appearance': 'textfield',
-      },
+        '-moz-appearance': 'textfield'
+      }
     },
     errorText: {
       padding: [4, 0, 0, 14],
       lineHeight: 1.2,
       fontFamily: theme.typography.secondary,
       fontStyle: 'italic',
-      color: theme.palette.alert.base,
-    },
+      color: theme.palette.alert.base
+    }
   };
 };
diff --git a/src/pages/index.js b/src/pages/index.js
index c4238c1..2671da8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -7,17 +7,17 @@ import imagePatternDots from '../assets/images/patterns/dots.png';
 import { Header, Footer, TopDrops, TechnologyLogo } from '../components';
 import technologies from '../data/technologies.json';
 
-const styles = (theme) => ({
+const styles = theme => ({
   root: {
     display: 'flex',
     minHeight: '100vh',
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
 
   // HERO
   hero: {
     backgroundColor: theme.palette.inverted.base,
-    backgroundImage: `url(${imagePatternDots})`,
+    backgroundImage: `url(${imagePatternDots})`
   },
   heading: {
     margin: 'auto',
@@ -27,8 +27,8 @@ const styles = (theme) => ({
     position: 'relative',
     color: '#fff',
     '& h1': {
-      fontSize: 24,
-    },
+      fontSize: 24
+    }
   },
   headingDescription: {
     fontFamily: theme.typography.secondary,
@@ -46,12 +46,12 @@ const styles = (theme) => ({
     fontFamily: theme.typography.secondary,
     fontStyle: 'italic',
     textAlign: 'center',
-    color: '#fff',
+    color: '#fff'
   },
 
   // MAIN
   main: {
-    flex: '1',
+    flex: '1'
   },
 
   // LOGOS
@@ -65,7 +65,7 @@ const styles = (theme) => ({
   // FOOTER
   footer: {
     backgroundColor: theme.palette.inverted.base,
-    backgroundImage: `url(${imagePatternDots})`,
+    backgroundImage: `url(${imagePatternDots})`
   },
 
   // small +
@@ -74,13 +74,13 @@ const styles = (theme) => ({
       padding: [80, 20, 0],
       width: '76%',
       '& h1': {
-        fontSize: 32,
-      },
+        fontSize: 32
+      }
     },
     headingDescription: {
-      bottom: -100,
+      bottom: -100
     }
-  },
+  }
 });
 
 const HomePage = ({ classes }) => (
@@ -89,37 +89,44 @@ const HomePage = ({ classes }) => (
       <title>Real World React</title>
     </Helmet>
     <div className={classes.root}>
-
       {/* HERO */}
       <div className={classes.hero}>
         <Header reversed />
-        <div className='container'>
+        <div className="container">
           <div className={classes.heading}>
             <h1>
-              We are a professional services and consulting firm specializing
-              in <span className='text-inverted background-secondary'>&nbsp;modern front-end tools&nbsp;</span> and
-              serverless architecture.
+              We are a professional services and consulting firm specializing in{' '}
+              <span className="text-inverted background-secondary">
+                &nbsp;modern front-end tools&nbsp;
+              </span>{' '}
+              and serverless architecture.
             </h1>
-            <div className={classes.headingDescription}>Fig. 1 - Our fields of speciality</div>
+            <div className={classes.headingDescription}>
+              Fig. 1 - Our fields of speciality
+            </div>
           </div>
         </div>
-        <TopDrops/>
+        <TopDrops />
       </div>
 
       {/* MAIN */}
       <div className={classes.main}>
         <div className={cx(classes.logos, 'container')}>
           {technologies.map((item, key) => (
-            <TechnologyLogo name={item.name} logo={item.logo} route={item.route} key={key}/>
+            <TechnologyLogo
+              name={item.name}
+              logo={item.logo}
+              route={item.route}
+              key={key}
+            />
           ))}
         </div>
       </div>
 
       {/* FOOTER */}
       <div className={classes.footer}>
-        <Footer></Footer>
+        <Footer />
       </div>
-
     </div>
   </div>
 );