From f7b9ea20d0441fc384d0db48bb9a36e6cd942f3e Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 9 Feb 2017 13:56:29 +0000
Subject: [PATCH] removing inline styles and passing styles down to
 styled-component via props

---
 ui/src/components/avatar/index.js             |  4 ++-
 ui/src/components/checkbox/index.js           |  4 ++-
 ui/src/components/close/index.js              |  7 ++--
 ui/src/components/nav-link/index.js           | 13 ++++++--
 ui/src/components/notification/index.js       |  3 +-
 ui/src/components/radio-group/item.js         | 10 ++----
 ui/src/components/radio-group/style.css       | 33 -------------------
 ui/src/components/radio/index.js              |  4 ++-
 ui/src/components/range-slider/index.js       |  4 ++-
 ui/src/components/table-data-table/index.js   |  6 +++-
 ui/src/components/table-simple-table/table.js |  6 +++-
 ui/src/components/textarea/index.js           |  8 +++--
 ui/src/components/tooltip/index.js            |  4 +--
 13 files changed, 48 insertions(+), 58 deletions(-)
 delete mode 100644 ui/src/components/radio-group/style.css

diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js
index b43210a3..0ec2bff6 100644
--- a/ui/src/components/avatar/index.js
+++ b/ui/src/components/avatar/index.js
@@ -37,6 +37,8 @@ const Avatar = styled.div`
   overflow: hidden;
   position: relative;
   text-align: center;
+  
+  ${props => props.styles}
 `;
 
 module.exports = ({
@@ -77,7 +79,7 @@ module.exports = ({
   );
 
   return (
-    <Avatar className={className} style={_style}>
+    <Avatar className={className} styles={_style}>
       {av}
     </Avatar>
   );
diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js
index 15b0ce48..6a8aaae5 100644
--- a/ui/src/components/checkbox/index.js
+++ b/ui/src/components/checkbox/index.js
@@ -26,6 +26,8 @@ const StyledInput = styled.input`
   &:disabled + label::after {
     opacity: 0.3;
   }
+  
+  ${props => props.styles}
 `;
 
 const StyledLabel = styled.label`
@@ -92,7 +94,7 @@ const Checkbox = ({
         onChange={onChange}
         readOnly={readOnly}
         required={required}
-        style={style}
+        styles={style}
         tabIndex={tabIndex}
         type='checkbox'
       />
diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 07658740..00e78635 100644
--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@@ -18,19 +18,17 @@ const StyledButton = styled.button`
   top: ${remcalc(16)};
   right: ${remcalc(16)};
   
-  ${props => props.customStyles ? props.customStyles : null}
+  ${props => props.styles}
 `;
 
 const Close = ({
   style,
   onClick,
-  customStyles = ''
 }) => {
   return (
     <StyledButton
-      customStyles={customStyles}
       onClick={onClick}
-      style={style}
+      styles={style}
     >
       <img
         alt="Close"
@@ -41,7 +39,6 @@ const Close = ({
 };
 
 Close.propTypes = {
-  customStyles: React.PropTypes.string,
   onClick: React.PropTypes.func,
   style: React.PropTypes.object
 };
diff --git a/ui/src/components/nav-link/index.js b/ui/src/components/nav-link/index.js
index 3b65ac58..dc14e28c 100644
--- a/ui/src/components/nav-link/index.js
+++ b/ui/src/components/nav-link/index.js
@@ -2,12 +2,21 @@
 
 const React = require('react');
 const ReactRouter = require('react-router-dom');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
 
 const {
   Link,
   Route
 } = ReactRouter;
 
+const StyledLink = styled(Link)`
+  ${props => props.styles}
+`;
+
 const NavLink = ({
   activeClassName,
   activeStyle,
@@ -39,7 +48,7 @@ const NavLink = ({
       : className;
 
     return (
-      <Link
+      <StyledLink
         className={clssnm}
         // eslint-disable-next-line object-curly-newline
         style={isActive ? { ...style, ...activeStyle } : style}
@@ -47,7 +56,7 @@ const NavLink = ({
         {...rest}
       >
         {newChildren}
-      </Link>
+      </StyledLink>
     );
   };
 
diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js
index 619b559f..83b108ca 100644
--- a/ui/src/components/notification/index.js
+++ b/ui/src/components/notification/index.js
@@ -31,6 +31,7 @@ const StyledNotification = styled.div`
   width: 100%;
 
   ${baseBox(0)}
+  ${props => props.styles}
   
   &::before {
     background-color: ${props => colors[props.type] || colors.brandPrimary}
@@ -60,7 +61,7 @@ const Notificaton = ({
   return (
     <StyledNotification
       className={className}
-      style={style}
+      styles={style}
       type={type}
     >
       { renderClose  }
diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js
index 98177329..18333b44 100644
--- a/ui/src/components/radio-group/item.js
+++ b/ui/src/components/radio-group/item.js
@@ -1,19 +1,15 @@
 const React = require('react');
-// const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 const constants = require('../../shared/constants');
 
-// const {
-//   verticallyAlignCenter
-// } = composers;
-
 const {
   remcalc
 } = fns;
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -21,7 +17,7 @@ const {
 } = Styled;
 
 const RadioItem = styled.div`
-  background: #FFFFFF;
+  background: ${colors.base.white};
   border: ${boxes.border.unchecked};
   cursor: pointer;
   flaot: left;
diff --git a/ui/src/components/radio-group/style.css b/ui/src/components/radio-group/style.css
deleted file mode 100644
index 61e7680e..00000000
--- a/ui/src/components/radio-group/style.css
+++ /dev/null
@@ -1,33 +0,0 @@
-~boxes: "../../shared/constants.js";
-~colors: "../../shared/constants.js";
-
-:root {
-  --border-checked: ~boxes.border.checked;
-  --border-unchecked: ~boxes.border.unchecked;
-  --border-radius: remcalc(~boxes.borderRadius);
-  --bottom-shaddow: ~boxes.bottomShaddow;
-}
-
-.group {
-  & .item {
-    background: #FFFFFF;
-    cursor: pointer;
-    margin-bottom: remcalc(15);
-    padding: remcalc(25);
-
-    @add-mixin create-base-box-properties;
-
-    &:last-child {
-      margin-bottom: initial;
-    }
-
-    &.checked {
-      border: var(--border-checked);
-      box-shadow: var(--bottom-shaddow);
-    }
-
-    &.disabled {
-      cursor: default;
-    }
-  }
-}
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 8c57492c..642317ca 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -32,6 +32,8 @@ const StyledInput = styled.input`
 `;
 
 const StyledLabel = styled.label`
+
+  ${props => props.styles}
 `;
 
 const StyledContent = styled.div`
@@ -82,7 +84,7 @@ const Radio = ({
 }) => {
 
   return (
-    <StyledLabel>
+    <StyledLabel styles={style}>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}
diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js
index 0373bb59..b102655f 100644
--- a/ui/src/components/range-slider/index.js
+++ b/ui/src/components/range-slider/index.js
@@ -127,6 +127,8 @@ const StyledRange = styled.input`
   &:focus::-ms-fill-upper {
     ${rangeUpper}
   }
+  
+  ${props => props.styles}
 `;
 
 const RangeSlider = ({
@@ -138,7 +140,7 @@ const RangeSlider = ({
     <StyledRange
       className={className}
       onChange={onChange}
-      style={style}
+      styles={style}
       type='range'
     />
   );
diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js
index a665420b..0989974d 100644
--- a/ui/src/components/table-data-table/index.js
+++ b/ui/src/components/table-data-table/index.js
@@ -14,18 +14,21 @@ const StyledTitle = styled.h3`
 const StyledTableWrapper = styled.section`
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
+	
+	${props => props.styles}
 `;
 
 const Table = ({
   children,
   columns = [],
   data = [],
+  style,
   title,
 }) => {
 
   return (
 
-    <StyledTableWrapper>
+    <StyledTableWrapper styles={style}>
       <StyledTitle>{title}</StyledTitle>
 
       <TableContent
@@ -40,6 +43,7 @@ Table.propTypes = {
   children: React.PropTypes.node,
   columns: React.PropTypes.array,
   data: React.PropTypes.array,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 
diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js
index 4fe899ed..8ba65e76 100644
--- a/ui/src/components/table-simple-table/table.js
+++ b/ui/src/components/table-simple-table/table.js
@@ -15,19 +15,23 @@ const StyledTableWrapper = styled.section`
   border: solid 1px ${colors.base.greyDark}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
+	
+	${props => props.styles}
 `;
 
 const Table = ({
   children,
+  style,
   title,
 }) => (
-  <StyledTableWrapper>
+  <StyledTableWrapper styles={style}>
     {children}
   </StyledTableWrapper>
 );
 
 Table.propTypes = {
   children: React.PropTypes.node,
+  style: React.PropTypes.object,
   title: React.PropTypes.string,
 };
 
diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js
index f11d8aaa..07f95c36 100644
--- a/ui/src/components/textarea/index.js
+++ b/ui/src/components/textarea/index.js
@@ -22,6 +22,10 @@ const {
   default: styled
 } = Styled;
 
+const StyledDiv = styled.div`
+  ${props => props.styles}
+`;
+
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
@@ -81,7 +85,7 @@ const Textarea = ({
   const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
-    <div>
+    <StyledDiv styles={style}>
       <Label
         error={error}
         htmlFor={id}
@@ -112,7 +116,7 @@ const Textarea = ({
         value={value}
       />
       {_children}
-    </div>
+    </StyledDiv>
   );
 };
 
diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js
index f885792b..85c743e4 100644
--- a/ui/src/components/tooltip/index.js
+++ b/ui/src/components/tooltip/index.js
@@ -39,7 +39,7 @@ const StyledList = styled.ul`
   padding: ${remcalc(ulPadder)};
   min-width: ${remcalc(200)};
 
-  ${props => props.style}
+  ${props => props.styles}
 
   ${baseBox()}
 
@@ -86,7 +86,7 @@ module.exports = ({
     <StyledList
       arrowPosition={arrowPosition}
       className={className}
-      style={style}
+      styles={style}
     >
       {children}
     </StyledList>