Rename custome InputCheckbox

I ran into an issue with webpack which chould get the appropriate file beacsue of conflicting between components from the strapi-helper-plugin and components from the plugin itself. Had to rename this file in order to solve the bug

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

@@ -0,0 +1,115 @@
+/**
+*
+* InputCheckboxPlugin
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+class InputCheckboxPlugin extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  state = { showBackground: false, showCog: false };
+
+  componentWillReceiveProps(nextProps) {
+    // Remove background if another input is selected
+    if (nextProps.inputSelected !== this.props.inputSelected && nextProps.inputSelected !== this.props.name) {
+      this.setState({ showBackground: false });
+    }
+
+    if (!nextProps.isOpen) {
+      this.setState({ showBackground: false, showCog: false });
+    }
+  }
+
+  handleChange = () => {
+    const target = {
+      type: 'checkbox',
+      name: this.props.name,
+      value: !this.props.value,
+    };
+
+    // Don't show the label background if the user unselects the input
+    if (!this.props.value) {
+      this.setState({ showBackground: true });
+      // Tell the Parent component that another input has been selected
+      this.props.setNewInputSelected(this.props.name);
+      // Tell the policies component to show the associated routes
+      this.context.setShouldDisplayPolicieshint();
+      this.context.setInputPoliciesPath(this.props.name);
+    } else {
+      this.setState({ showBackground: false, showCog: false });
+      this.props.setNewInputSelected('');
+    }
+
+    this.context.onChange({ target });
+  }
+
+  handleClick = () => {
+    this.setState({ showBackground: !this.state.showBackground });
+    this.props.setNewInputSelected(this.props.name);
+    this.context.setInputPoliciesPath(this.props.name);
+
+    if (this.state.showBackground) {
+      this.context.resetShouldDisplayPoliciesHint();
+    } else {
+      this.context.setShouldDisplayPolicieshint();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className={cn(styles.inputCheckbox, 'col-md-4')}
+        onMouseEnter={() => {
+          if (this.props.value) {
+            this.setState({ showCog: true });
+          }
+        }}
+        onMouseLeave={() => this.setState({ showCog: false })}
+      >
+        <div className={cn('form-check', this.state.showBackground ? styles.highlighted : '')}>
+          <label className={cn('form-check-label', styles.label, this.props.value ? styles.checked : '')} htmlFor={this.props.name}>
+            <input
+              className="form-check-input"
+              defaultChecked={this.props.value}
+              id={this.props.name}
+              name={this.props.name}
+              onChange={this.handleChange}
+              type="checkbox"
+            />
+            {this.props.label}
+          </label>
+          {this.state.showCog || this.state.showBackground ? (
+            <i className="fa fa-cog" onClick={this.handleClick} />
+          ) : ''}
+        </div>
+      </div>
+    );
+  }
+}
+
+InputCheckboxPlugin.contextTypes = {
+  onChange: PropTypes.func.isRequired,
+  resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
+  setInputPoliciesPath: PropTypes.func.isRequired,
+  setShouldDisplayPolicieshint: PropTypes.func.isRequired,
+};
+
+InputCheckboxPlugin.defaultProps = {
+  label: '',
+  value: false,
+};
+
+InputCheckboxPlugin.propTypes = {
+  inputSelected: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  setNewInputSelected: PropTypes.func.isRequired,
+  value: PropTypes.bool,
+};
+
+export default InputCheckboxPlugin;

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

@@ -0,0 +1,58 @@
+.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;
+}