styled components migration

packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/index.js

@@ -1,34 +1,36 @@
 /**
-*
+ *
-* BoundRoute
+ * BoundRoute
-*
+ *
-*/
+ */
 
 import React from 'react';
 import { get, includes, map, tail, toLower } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+
-import styles from './styles.scss';
+import { Header, Path, Verb, Wrapper } from './Components';
 
 function BoundRoute({ route }) {
   const title = get(route, 'handler');
-  const formattedRoute = get(route, 'path') ? tail(get(route, 'path').split('/')) : [];
+  const formattedRoute = get(route, 'path')
-  const [ controller = '', action = '' ] = title ? title.split('.') : [];
+    ? tail(get(route, 'path').split('/'))
+    : [];
+  const [controller = '', action = ''] = title ? title.split('.') : [];
 
   return (
     <div className="col-md-12">
-      <div className={styles.title}>
+      <Header>
         <FormattedMessage id="users-permissions.BoundRoute.title" />
         &nbsp;
         <span>{controller}</span>
         <span>.{action} </span>
-      </div>
+      </Header>
-      <div className={styles.boundRoute}>
+      <Wrapper>
-        <div className={cn(styles.verb, styles[toLower(get(route, 'method'))])}>
+        <Verb className={toLower(get(route, 'method'))}>
           {get(route, 'method')}
-        </div>
+        </Verb>
-        <div className={styles.path}>
+        <Path>
           {map(formattedRoute, value => (
             <span
               key={value}
@@ -37,8 +39,8 @@ function BoundRoute({ route }) {
               /{value}
             </span>
           ))}
-        </div>
+        </Path>
-      </div>
+      </Wrapper>
     </div>
   );
 }

packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/styles.scss

@@ -1,59 +0,0 @@
-.boundRoute {
-  display: flex;
-  height: 2.4rem;
-  border-radius: 3px;
-  background-color: #E9EAEB;
-  line-height: 2.4rem;
-}
-
-.verb {
-  padding: 0 1rem;
-  border-radius: 3px;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.path {
-  padding: 0 1rem;
-  font-size: 13px;
-  font-weight: 600;
-  color: #333740;
-}
-
-.title {
-  margin-bottom: 3rem;
-  padding-top: 1.1rem;
-  color: #333740;
-  font-size: 18px;
-  font-weight: 600;
-
-  > span:not(:first-child) {
-    color: #787E8F;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  > span:last-child {
-    color: #1642E1;
-    font-weight: 600;
-  }
-}
-
-.get {
-  background-color: #008DFE;
-}
-
-.post {
-  background-color: #69BA05;
-}
-
-.put {
-  background-color: #F68E0E;
-}
-
-.delete {
-  background-color: #F64D0A;
-}

packages/strapi-plugin-users-permissions/admin/src/components/Controller/Components.js

@@ -5,6 +5,12 @@ const Wrapper = styled.div`
   background: #ffffff;
   opacity: none;
   -webkit-font-smoothing: antialiased;
+  .checkbox-wrapper {
+    font-size: 13px;
+    > div {
+      margin-bottom: 0 !important;
+    }
+  }
 `;
 
 const Header = styled.div`
@@ -18,7 +24,6 @@ const Header = styled.div`
 `;
 
 const Label = styled.label`
-  position: relative;
   margin-right: 0px;
   margin-left: 10px;
   font-weight: 400 !important;

packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js

@@ -7,12 +7,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { get, map } from 'lodash';
-import cn from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import pluginId from '../../pluginId';
 
 import InputCheckbox from '../InputCheckboxPlugin';
-import styles from './styles.scss';
 
 import { Header, Label, Separator, Wrapper } from './Components';
 
@@ -55,10 +53,10 @@ class Controller extends React.Component {
           <div>{this.props.name}</div>
           <Separator />
           <div>
-            <div className={cn(styles.inputCheckbox)}>
+            <div className="checkbox-wrapper">
               <div className="form-check">
                 <Label
-                  className={`${this.areAllActionsSelected() &&
+                  className={`form-check-label ${this.areAllActionsSelected() &&
                     'checked'} ${!this.areAllActionsSelected() &&
                     this.hasSomeActionsSelected() &&
                     'some-checked'}`}

packages/strapi-plugin-users-permissions/admin/src/components/Controller/styles.scss

@@ -1,81 +0,0 @@
-.checked {
-  &:after {
-    content: '\f00c';
-    position: absolute;
-    top: 0px; left: 2px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-    transition: all .2s;
-
-  }
-}
-.someChecked {
-  &:after {
-    content: '\f068';
-    position: absolute;
-    top: 0px; left: 3px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-  }
-}
-
-.controller {
-  padding: 1px 43px 0 28px;
-  background: #ffffff;
-  opacity: none;
-  -webkit-font-smoothing: antialiased;
-}
-
-.controllerHeader {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 1.5rem;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-transform: capitalize;
-}
-
-.inputCheckbox {
-  font-size: 13px;
-  > div {
-    margin-bottom: 0 !important;
-  }
-}
-
-.label {
-  margin-right: 0px;
-  margin-left: 10px;
-  font-weight: 400 !important;
-  cursor: pointer;
-
-  > input {
-    display: none;
-    margin-right: 9px;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left:0px;
-    top: 1px;
-    width: 14px; height: 14px;
-    border: 1px solid rgba(16,22,34,0.15);
-    background-color: #FDFDFD;
-    border-radius: 3px;
-  }
-}
-
-.separator {
-  height: 1px;
-  flex-grow: 2;
-  margin-top: 8px;
-  margin-right: 15px;
-  margin-left: 15px;
-  background-color: #F6F6F6;
-}
-

packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js

@@ -6,9 +6,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 
-import styles from './styles.scss';
+import { Label, Wrapper } from './Components';
 
 class InputCheckboxPlugin extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -65,8 +64,8 @@ class InputCheckboxPlugin extends React.Component {
 
   render() {
     return (
-      <div
+      <Wrapper
-        className={cn(styles.inputCheckbox, 'col-md-4')}
+        className="col-md-4"
         onMouseEnter={() => {
           if (this.props.value) {
             this.setState({ showCog: true });
@@ -75,17 +74,12 @@ class InputCheckboxPlugin extends React.Component {
         onMouseLeave={() => this.setState({ showCog: false })}
       >
         <div
-          className={cn(
+          className={`form-check ${
-            'form-check',
+            this.state.showBackground ? 'highlighted' : ''
-            this.state.showBackground ? styles.highlighted : ''
+          }`}
-          )}
         >
-          <label
+          <Label
-            className={cn(
+            className={`form-check-label ${this.props.value ? 'checked' : ''}`}
-              'form-check-label',
-              styles.label,
-              this.props.value ? styles.checked : ''
-            )}
             htmlFor={this.props.name}
           >
             <input
@@ -97,14 +91,14 @@ class InputCheckboxPlugin extends React.Component {
               type="checkbox"
             />
             {this.props.label}
-          </label>
+          </Label>
           {this.state.showCog || this.state.showBackground ? (
             <i className="fa fa-cog" onClick={this.handleClick} />
           ) : (
             ''
           )}
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss

@@ -1,58 +0,0 @@
-.inputCheckbox {
-  margin-bottom: .5rem;
-  padding-left: 0;
-  font-size: 13px;
-
-  > div {
-    height: 26px;
-    padding-left: 15px;
-    line-height: 26px;
-
-    > i {
-      position: absolute;
-      top: 8px;
-      right: 10px;
-      color: #787E8F;
-      cursor: pointer;
-    }
-  }
-}
-
-.label {
-  margin-left: 9px;
-  cursor: pointer;
-  > input {
-    display: none;
-    margin-right: 9px;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left:15px; top: 6px;
-    width: 14px; height: 14px;
-    border: 1px solid rgba(16,22,34,0.15);
-    background-color: #FDFDFD;
-    border-radius: 3px;
-  }
-}
-
-.checked {
-  &:after {
-    content: '\f00c';
-    position: absolute;
-    top: 0; left: 17px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-    transition: all .2s;
-
-  }
-}
-
-.highlighted {
-  border-radius: 3px;
-  background-color: #E9EAEB;
-  font-weight: 600;
-}

packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js

@@ -15,6 +15,8 @@ import InputSearchLi from '../InputSearchLi';
 
 import styles from './styles.scss';
 
+import { Wrapper } from './Components';
+
 class InputSearchContainer extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   state = {
@@ -99,9 +101,9 @@ class InputSearchContainer extends React.Component {
 
   render() {
     return (
-      <div className={cn(styles.inputSearch, 'col-md-6')}>
+      <Wrapper className="col-md-6">
         <Label htmlFor={this.props.name} message={this.props.label} />
-        <div className={cn('input-group')}>
+        <div className="input-group">
           <span
             className={cn(
               'input-group-addon',
@@ -148,7 +150,7 @@ class InputSearchContainer extends React.Component {
             ))}
           </ul>
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss

@@ -1,19 +1,19 @@
 .addon {
   width: 3.2rem;
   height: 3.4rem;
-  margin-top: .9rem;
+  margin-top: 0.9rem;
   background-color: rgba(16, 22, 34, 0.02);
-  border: 1px solid #E3E9F3;
+  border: 1px solid #e3e9f3;
   border-right: 0;
   border-bottom: 0px;
   border-radius: 0.25rem;
-  border-bottom-left-radius: 0!important;
+  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0!important;
+  border-bottom-right-radius: 0 !important;
-  color: #B3B5B9;
+  color: #b3b5b9;
   line-height: 3.2rem;
   font-size: 1.3rem;
   font-family: 'Lato';
-  font-weight: 600!important;
+  font-weight: 600 !important;
   text-transform: capitalize;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -23,7 +23,7 @@
     display: inline-table;
     margin-top: 0px;
     margin-left: 2px;
-    color: #B3B5B9;
+    color: #b3b5b9;
     font-weight: 900;
     font-size: 14px;
     font-family: 'FontAwesome';
@@ -31,42 +31,42 @@
   }
 }
 
-.inputSearch {
+// .inputSearch {
-  min-width: 200px;
+//   min-width: 200px;
-  margin-bottom: 1.5rem;
+//   margin-bottom: 1.5rem;
-  font-size: 1.3rem;
+//   font-size: 1.3rem;
 
-  label {
+//   label {
-    margin-bottom: 0;
+//     margin-bottom: 0;
-    font-weight: 500;
+//     font-weight: 500;
-  }
+//   }
 
-  input {
+//   input {
-    height: 3.4rem;
+//     height: 3.4rem;
-    margin-top: .9rem;
+//     margin-top: .9rem;
-    padding-left: 1rem;
+//     padding-left: 1rem;
-    background-size: 0 !important;
+//     background-size: 0 !important;
-    border: 1px solid #E3E9F3;
+//     border: 1px solid #E3E9F3;
-    border-left: 0;
+//     border-left: 0;
-    border-bottom: 0px;
+//     border-bottom: 0px;
-    border-radius: 0.25rem;
+//     border-radius: 0.25rem;
-    border-bottom-right-radius: 0;
+//     border-bottom-right-radius: 0;
-    line-height: 3.4rem;
+//     line-height: 3.4rem;
-    font-size: 1.3rem;
+//     font-size: 1.3rem;
-    font-family: 'Lato' !important;
+//     font-family: 'Lato' !important;
-    box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
+//     box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
-    &:focus {
+//     &:focus {
-      border-color: #78caff;
+//       border-color: #78caff;
-    }
+//     }
-  }
+//   }
-}
+// }
 
 .ulContainer {
   height: 16.3rem;
   overflow: scroll;
-  border: 1px solid #E3E9F3;
+  border: 1px solid #e3e9f3;
-  border-top-left-radius: 0!important;
+  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0!important;
+  border-top-right-radius: 0 !important;
   border-top: none;
   border-radius: 0.25rem;
   > ul {

packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
@@ -13,7 +12,7 @@ import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
 import { InputsIndex as Input } from 'strapi-helper-plugin';
 import BoundRoute from '../BoundRoute';
 
-import styles from './styles.scss';
+import { Header, Wrapper } from './Components';
 
 class Policies extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -27,7 +26,7 @@ class Policies extends React.Component {
       this.props.inputSelectName.split('.'),
       'permissions',
       'controllers',
-      'policy',
+      'policy'
     );
     const controllerRoutes = get(
       this.props.routes,
@@ -35,22 +34,22 @@ class Policies extends React.Component {
         this.props.inputSelectName.split('.'),
         'permissions',
         'controllers',
-        'policy',
+        'policy'
-      )[0],
+      )[0]
     );
     const routes = isEmpty(controllerRoutes)
       ? []
       : controllerRoutes.filter(
-        o => toLower(o.handler) === toLower(takeRight(path, 2).join('.')),
+          o => toLower(o.handler) === toLower(takeRight(path, 2).join('.'))
-      );
+        );
 
     return (
-      <div className={cn('col-md-5', styles.policies)}>
+      <Wrapper className="col-md-5">
         <div className="container-fluid">
-          <div className={cn('row', styles.inputWrapper)}>
+          <div className="row">
-            <div className={cn('col-md-12', styles.header)}>
+            <Header className="col-md-12">
               <FormattedMessage id={`${baseTitle}.${title}`} />
-            </div>
+            </Header>
             {!this.props.shouldDisplayPoliciesHint ? (
               <Input
                 customBootstrapClass="col-md-12"
@@ -69,12 +68,12 @@ class Policies extends React.Component {
           <div className="row">
             {!this.props.shouldDisplayPoliciesHint
               ? map(routes, (route, key) => (
-                <BoundRoute key={key} route={route} />
+                  <BoundRoute key={key} route={route} />
-              ))
+                ))
               : ''}
           </div>
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/Policies/styles.scss

@@ -1,20 +0,0 @@
-.policies {
-  min-height: 100%;
-  background-color: #F6F6F6;
-}
-
-.header {
-  margin-bottom: 1.1rem;
-  padding-top: 2.8rem;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 3.6rem;
-}
-
-.inputWrapper {
-  > div:nth-child(2) {
-    > label {
-      // font-weight: 800!important;
-    }
-  }
-}