updating ui components to removing props => props.style. HTML inline style is valid, but should be avoided.

ui/src/components/avatar/index.js

@@ -37,8 +37,6 @@ const Avatar = styled.div`
   overflow: hidden;
   position: relative;
   text-align: center;
-  
-  ${props => props.styles}
 `;
 
 module.exports = ({
@@ -79,7 +77,7 @@ module.exports = ({
   );
 
   return (
-    <Avatar className={className} styles={_style}>
+    <Avatar className={className} style={_style}>
       {av}
     </Avatar>
   );

ui/src/components/checkbox/index.js

@@ -26,8 +26,6 @@ const StyledInput = styled.input`
   &:disabled + label::after {
     opacity: 0.3;
   }
-  
-  ${props => props.styles}
 `;
 
 const StyledLabel = styled.label`
@@ -94,7 +92,7 @@ const Checkbox = ({
         onChange={onChange}
         readOnly={readOnly}
         required={required}
-        styles={style}
+        style={style}
         tabIndex={tabIndex}
         type='checkbox'
       />

ui/src/components/close/index.js

@@ -17,8 +17,6 @@ const StyledButton = styled.button`
   position: absolute;
   top: ${remcalc(16)};
   right: ${remcalc(16)};
-  
-  ${props => props.styles}
 `;
 
 const Close = ({
@@ -28,7 +26,7 @@ const Close = ({
   return (
     <StyledButton
       onClick={onClick}
-      styles={style}
+      style={style}
     >
       <img
         alt="Close"

ui/src/components/nav-link/index.js

@@ -2,21 +2,12 @@
 
 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,
@@ -48,7 +39,7 @@ const NavLink = ({
       : className;
 
     return (
-      <StyledLink
+      <Link
         className={clssnm}
         // eslint-disable-next-line object-curly-newline
         style={isActive ? { ...style, ...activeStyle } : style}
@@ -56,7 +47,7 @@ const NavLink = ({
         {...rest}
       >
         {newChildren}
-      </StyledLink>
+      </Link>
     );
   };
 

ui/src/components/notification/index.js

@@ -31,7 +31,6 @@ const StyledNotification = styled.div`
   width: 100%;
 
   ${baseBox(0)}
-  ${props => props.styles}
   
   &::before {
     background-color: ${props => colors[props.type] || colors.brandPrimary}
@@ -61,7 +60,7 @@ const Notificaton = ({
   return (
     <StyledNotification
       className={className}
-      styles={style}
+      style={style}
       type={type}
     >
       { renderClose  }

ui/src/components/radio/index.js

@@ -31,10 +31,7 @@ const StyledInput = styled.input`
   }
 `;
 
-const StyledLabel = styled.label`
+const StyledLabel = styled.label``;
-
-  ${props => props.styles}
-`;
 
 const StyledContent = styled.div`
   margin-left: ${remcalc(45)};
@@ -84,7 +81,7 @@ const Radio = ({
 }) => {
 
   return (
-    <StyledLabel styles={style}>
+    <StyledLabel style={style}>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}

ui/src/components/range-slider/index.js

@@ -127,8 +127,6 @@ const StyledRange = styled.input`
   &:focus::-ms-fill-upper {
     ${rangeUpper}
   }
-  
-  ${props => props.styles}
 `;
 
 const RangeSlider = ({
@@ -140,7 +138,7 @@ const RangeSlider = ({
     <StyledRange
       className={className}
       onChange={onChange}
-      styles={style}
+      style={style}
       type='range'
     />
   );

ui/src/components/table-data-table/index.js

@@ -14,8 +14,6 @@ const StyledTitle = styled.h3`
 const StyledTableWrapper = styled.section`
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
-	
-	${props => props.styles}
 `;
 
 const Table = ({
@@ -28,7 +26,7 @@ const Table = ({
 
   return (
 
-    <StyledTableWrapper styles={style}>
+    <StyledTableWrapper style={style}>
       <StyledTitle>{title}</StyledTitle>
 
       <TableContent

ui/src/components/table-simple-table/table.js

@@ -15,8 +15,6 @@ const StyledTableWrapper = styled.section`
   border: solid 1px ${colors.base.greyDark}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
-	
-	${props => props.styles}
 `;
 
 const Table = ({
@@ -24,7 +22,7 @@ const Table = ({
   style,
   title,
 }) => (
-  <StyledTableWrapper styles={style}>
+  <StyledTableWrapper style={style}>
     {children}
   </StyledTableWrapper>
 );

ui/src/components/textarea/index.js

@@ -22,10 +22,6 @@ const {
   default: styled
 } = Styled;
 
-const StyledDiv = styled.div`
-  ${props => props.styles}
-`;
-
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
@@ -85,7 +81,7 @@ const Textarea = ({
   const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
-    <StyledDiv styles={style}>
+    <div style={style}>
       <Label
         error={error}
         htmlFor={id}
@@ -116,7 +112,7 @@ const Textarea = ({
         value={value}
       />
       {_children}
-    </StyledDiv>
+    </div>
   );
 };