removing inline styles and passing styles down to styled-component via props

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>
   );

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'
       />

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
 };

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>
     );
   };
 

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  }

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;

ui/src/components/radio-group/style.css

@@ -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;
-    }
-  }
-}

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}

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'
     />
   );

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,
 };
 

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,
 };
 

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>
   );
 };
 

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>