Refacto Input library scss

packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputAddon from 'components/InputAddon';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -93,7 +94,7 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;

packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/styles.scss

@@ -3,7 +3,3 @@
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { includes, isEmpty, isObject, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isObject, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -15,6 +15,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputCheckbox from 'components/InputCheckbox';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -70,7 +71,7 @@ class InputCheckboxWithErrors extends React.Component {
     const handleBlur = onBlur ? onBlur : () => {};
     let inputTitle = '';
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;

packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss

@@ -4,10 +4,6 @@
   font-family: 'Lato';
 }
 
-.spacer {
-  height: .5rem;
-}
-
 .inputCheckboxDescriptionContainer {
   width: 150%;
   margin-top: .2rem;

packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get, includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { get, isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputDate from 'components/InputDate';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -92,7 +93,7 @@ class InputDateWithErrors extends React.Component { // eslint-disable-line react
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;

packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss

@@ -30,7 +30,3 @@
     }
   }
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputEmail from 'components/InputEmail';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -90,7 +91,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -98,7 +99,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerEmail,
           this.props.customBootstrapClass,
           !isEmpty(this.props.className) && this.props.className,
         )}

packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/styles.scss

@@ -1,9 +1,5 @@
-.container {
+.containerEmail {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/index.js

@@ -13,6 +13,7 @@ import { isEmpty } from 'lodash';
 import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputFile from 'components/InputFile';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -35,8 +36,8 @@ class InputFileWithErrors extends React.Component {
       value,
     } = this.props;
 
-    const labelClass = labelClassName === '' ? styles.label : labelClassName;
+    const labelClass = labelClassName === '' ? styles.labelFile : labelClassName;
-    const spacer = isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    const spacer = isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     return (
       <div

packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/styles.scss

@@ -4,10 +4,6 @@
   font-size: 1.3rem;
 }
 
-.label {
+.labelFile {
   margin-bottom: 9px;
 }
-
-.spacer {
-  height: 1.4rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputNumber from 'components/InputNumber';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -94,7 +95,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerInputNumber,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}

packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/styles.scss

@@ -1,9 +1,5 @@
-.container {
+.containerInputNumber {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputPassword from 'components/InputPassword';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -71,6 +72,7 @@ class InputPasswordWithErrors extends React.Component {
       errorsClassName,
       errorsStyle,
       inputClassName,
+      inputDescription,
       inputDescriptionClassName,
       inputDescriptionStyle,
       inputStyle,
@@ -87,9 +89,15 @@ class InputPasswordWithErrors extends React.Component {
     } = this.props;
     const handleBlur = isFunction(this.props.onBlur) ? this.props.onBlur : this.handleBlur;
 
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
+
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
+
     return (
       <div className={cn(
-          styles.container,
+          styles.containerInputPassword,
           this.props.customBootstrapClass,
           !isEmpty(this.props.className) && this.props.className,
         )}
@@ -118,7 +126,7 @@ class InputPasswordWithErrors extends React.Component {
         />
         <InputDescription
           className={inputDescriptionClassName}
-          message={this.props.inputDescription}
+          message={inputDescription}
           style={inputDescriptionStyle}
         />
         <InputErrors
@@ -126,6 +134,7 @@ class InputPasswordWithErrors extends React.Component {
           errors={!noErrorsDescription && this.state.errors || []}
           style={errorsStyle}
         />
+        {spacer}
       </div>
     );
   }

packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/styles.scss

@@ -1,4 +1,4 @@
-.container {
+.containerInputPassword {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;

packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputSearch from 'components/InputSearch';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -90,7 +91,7 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;

packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss

@@ -3,7 +3,3 @@
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -67,7 +67,7 @@ class InputSelectWithErrors extends React.Component {
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerSelect,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}

packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/styles.scss

@@ -1,4 +1,4 @@
-.container {
+.containerSelect {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;

packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js

@@ -0,0 +1,14 @@
+/**
+ *
+ * InputSpacer
+ *
+ */
+
+import React from 'react';
+import styles from './styles.scss';
+
+function InputSpacer() {
+  return <div className={styles.spacerInput} />;
+}
+
+export default InputSpacer;

packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss

@@ -0,0 +1,3 @@
+.spacerInput {
+  height: .5rem;
+}

packages/strapi-helper-plugin/lib/src/components/InputText/index.js

@@ -13,7 +13,7 @@ function InputText(props) {
         <input
           autoFocus={props.autoFocus}
           className={cn(
-            styles.input,
+            styles.textInput,
             'form-control',
             !props.deactivateErrorHighlight && props.error && 'is-invalid',
             !isEmpty(props.className) && props.className,

packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss

@@ -1,4 +1,4 @@
-.input {
+.textInput {
   height: 3.4rem;
   margin-top: .9rem;
   padding-left: 1rem;

packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputTextArea from 'components/InputTextArea';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -94,7 +95,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerTextArea,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}

packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/styles.scss

@@ -1,4 +1,4 @@
-.container {
+.containerTextArea {
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
   font-family: 'Lato';

packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputText from 'components/InputText';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;

packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss

@@ -1,9 +1,5 @@
-.container {
+.containerText {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/index.js

@@ -13,6 +13,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputToggle from 'components/InputToggle';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -61,7 +62,7 @@ class InputToggleWithErrors extends React.Component {
       value,
     } = this.props;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -69,7 +70,7 @@ class InputToggleWithErrors extends React.Component {
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerToggleErrors,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}

packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/styles.scss

@@ -1,4 +1,4 @@
-.container {
+.containerToggleErrors {
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
@@ -7,7 +7,3 @@
   margin-bottom: 0 !important;
   font-weight: 500 !important;
 }
-
-.spacer {
-  height: .5rem;
-}

packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js

@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash';
 // Design
 import InputAddonWithErrors from 'components/InputAddonWithErrors';
 import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors';
-import InputDateWithErrors from 'components/InputDateWithErrors';
+// import InputDateWithErrors from 'components/InputDateWithErrors';
 import InputEmailWithErrors from 'components/InputEmailWithErrors';
 import InputFileWithErrors from 'components/InputFileWithErrors';
 import InputNumberWithErrors from 'components/InputNumberWithErrors';
@@ -26,7 +26,7 @@ const DefaultInputError = ({ type }) => <div>Your input type: <b>{type}</b> does
 const inputs = {
   addon: InputAddonWithErrors,
   checkbox: InputCheckboxWithErrors,
-  date: InputDateWithErrors,
+  // date: InputDateWithErrors,
   email: InputEmailWithErrors,
   file: InputFileWithErrors,
   number: InputNumberWithErrors,
@@ -60,17 +60,3 @@ InputsIndex.propTypes = {
 };
 
 export default InputsIndex;
-export {
-  InputAddonWithErrors,
-  InputCheckboxWithErrors,
-  InputDateWithErrors,
-  InputEmailWithErrors,
-  InputFileWithErrors,
-  InputNumberWithErrors,
-  InputPasswordWithErrors,
-  InputSearchWithErrors,
-  InputSelectWithErrors,
-  InputTextWithErrors,
-  InputTextAreaWithErrors,
-  InputToggleWithErrors,
-};

packages/strapi-helper-plugin/lib/src/components/Label/index.js

@@ -23,7 +23,7 @@ function Label(props) {
 
   return (
     <label
-      className={cn(styles.label, props.className)}
+      className={cn(styles.labelCompo, props.className)}
       htmlFor={props.htmlFor}
       style={props.style}
     >

packages/strapi-helper-plugin/lib/src/components/Label/styles.scss

@@ -1,4 +1,4 @@
-.label {
+.labelCompo {
   margin-bottom: 0;
   font-weight: 500;
 }