intelicoreact 0.0.42 → 0.0.46

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -40,13 +40,10 @@ var Dropdown = function Dropdown(_ref) {
 
   var options = _ref.options,
       value = _ref.value,
+      error = _ref.error,
       onChange = _ref.onChange,
       placeholder = _ref.placeholder,
       className = _ref.className,
-      label = _ref.label,
-      isLabelBold = _ref.isLabelBold,
-      hint = _ref.hint,
-      hintSide = _ref.hintSide,
       isSearchable = _ref.isSearchable;
 
   var _useState = (0, _react.useState)(false),
@@ -159,14 +156,8 @@ var Dropdown = function Dropdown(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className),
     ref: dropdownRef
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    className: "".concat(RC, "-label"),
-    isBold: isLabelBold,
-    label: label,
-    hint: hint,
-    hintSide: hintSide
-  }), /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger"),
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
@@ -177,7 +168,9 @@ var Dropdown = function Dropdown(_ref) {
       return onSearchHandler(e.target.value);
     },
     placeholder: placeholder
-  }) : selectedLabel || placeholder, /*#__PURE__*/_react.default.createElement("span", {
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
   }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -13,7 +13,6 @@
     border-radius: 3px;
     width: 100%;
     height: 28px;
-    display: flex;
     align-items: center;
     cursor: pointer;
     padding-left: 9px;
@@ -26,9 +25,12 @@
     position: relative;
     text-align: left;
 
-    &_error {
+    &.error {
       border-color: $color--secondary;
     }
+    &.placeholder .text{
+      opacity: .7;
+    }
   }
 
   &__input {
@@ -71,6 +73,8 @@
       display: flex;
       align-items: center;
       //justify-content: center;
+      border: none;
+      background: transparent;
       padding: 0 20px 0 30px;
       position: relative;
       cursor: pointer;
@@ -101,6 +105,7 @@
     display: flex;
     align-items: center;
     width: 16px;
+    height: 16px;
     position: absolute;
     right: 4px;
     top: 50%;

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -24,12 +24,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 global.lng = 'en';
 var _default = {
   title: 'Dropdown',
-  component: _Dropdown.default
+  component: _Dropdown.default,
+  argTypes: {
+    className: {
+      description: 'string'
+    },
+    value: {
+      description: 'string - current option'
+    },
+    isSearchable: {
+      description: 'boolean - enable search'
+    },
+    onChange: {
+      description: 'callback return selected value'
+    }
+  }
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
@@ -48,7 +62,6 @@ var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [{
     label: 'Dropdown1',
@@ -94,5 +107,6 @@ DropdownTemplate.args = {
       label: 'Group 23',
       value: 'group23'
     }]
-  }]
+  }],
+  error: ''
 };

package/dist/Atomic/FormElements/Input/Input.js

@@ -48,7 +48,8 @@ var Input = function Input(_ref) {
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
-      error = _ref.error;
+      error = _ref.error,
+      icon = _ref.icon;
 
   // STATES
   var _useState = (0, _react.useState)(false),
@@ -98,7 +99,7 @@ var Input = function Input(_ref) {
     if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
   var uniProps = {
-    className: "input-classic ".concat(className),
+    className: "input ".concat(className),
     placeholder: placeholder,
     value: value || '',
     disabled: disabled,
@@ -122,28 +123,28 @@ var Input = function Input(_ref) {
       ref: inputRef,
       type: isNumeric ? 'number' : type
     })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-classic__nums"
+      className: "input__nums"
     }, /*#__PURE__*/_react.default.createElement("button", {
       onClick: function onClick() {
         return handle.change(value - numStep);
       },
-      className: (0, _classnames.default)("input-classic__num-btn", {
+      className: (0, _classnames.default)("input__num-btn", {
         disabled: value <= min
       })
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
       onClick: function onClick() {
         return handle.change(+value + +numStep);
       },
-      className: (0, _classnames.default)("input-classic__num-btn", {
+      className: (0, _classnames.default)("input__num-btn", {
         disabled: value >= max
       })
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("input-classic__wrap", (0, _defineProperty2.default)({}, "input-classic__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input-classic__wrap_error", error), (0, _defineProperty2.default)({}, "input-classic__wrap_disabled", disabled))
-  }, renderInput(), withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("input-classic__close", {
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+  }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),
     onClick: handle.toggleEdit

package/dist/Atomic/FormElements/Input/Input.scss

@@ -1,4 +1,4 @@
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
   border: none;
@@ -63,15 +63,6 @@
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: #f06d8d;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -138,7 +129,8 @@
   }
 }
 
-.input-classic__wrap:hover .input-classic__close {
+.input__wrap:hover .input__close {
   visibility: visible;
   pointer-events: all;
 }
+

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -15,6 +15,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactFeather = require("react-feather");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -57,6 +59,9 @@ var _default = {
         options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
       }
     },
+    icon: {
+      description: 'JSX'
+    },
     value: {
       description: '(* - required prop)'
     },
@@ -103,5 +108,6 @@ InputTemplate.args = {
   min: '0',
   max: '5',
   placeholder: 'Placeholder',
-  mask: ''
+  mask: '',
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
 };

package/dist/Atomic/FormElements/Label/Label.scss

@@ -2,7 +2,7 @@
     display: flex;
     color: #1e1e2d;
     font-size: 13px;
-    margin-top: 5px;
+    margin-bottom: 5px;
     align-items: center;
 
     &_bold {

package/dist/Molecular/FormElements/FormElement.js

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
 
-var RC = 'input-classic';
+require("./FormElement.scss");
+
+var RC = 'form-element';
 
 var FormElement = function FormElement(_ref) {
   var label = _ref.label,

package/dist/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.42",
+  "version": "0.0.46",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -7,7 +7,7 @@ import './Dropdown.scss';
 
 const RC = 'dropdown';
 
-const Dropdown = ({ options, value, onChange, placeholder, className, label, isLabelBold, hint, hintSide, isSearchable }) => {
+const Dropdown = ({ options, value, error, onChange, placeholder, className, isSearchable }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const dropdownRef = useRef(null);
@@ -75,8 +75,7 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      {label && <Label className={`${RC}-label`} isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} />}
-      <button className={`${RC}__trigger`} onClick={() => setIsOpen(!isOpen)}>
+      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} onClick={() => setIsOpen(!isOpen)}>
         {isSearchable ? (
           <input
             className={`${RC}__input`}
@@ -85,7 +84,7 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
             placeholder={placeholder}
           />
         ) : (
-          selectedLabel || placeholder
+          <span className="text">{selectedLabel || placeholder}</span>
         )}
         <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <ChevronUp /> : <ChevronDown />}</span>
       </button>

package/src/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -13,7 +13,6 @@
     border-radius: 3px;
     width: 100%;
     height: 28px;
-    display: flex;
     align-items: center;
     cursor: pointer;
     padding-left: 9px;
@@ -26,9 +25,12 @@
     position: relative;
     text-align: left;
 
-    &_error {
+    &.error {
       border-color: $color--secondary;
     }
+    &.placeholder .text{
+      opacity: .7;
+    }
   }
 
   &__input {
@@ -71,6 +73,8 @@
       display: flex;
       align-items: center;
       //justify-content: center;
+      border: none;
+      background: transparent;
       padding: 0 20px 0 30px;
       position: relative;
       cursor: pointer;
@@ -101,6 +105,7 @@
     display: flex;
     align-items: center;
     width: 16px;
+    height: 16px;
     position: absolute;
     right: 4px;
     top: 50%;

package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -1,15 +1,24 @@
 import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 
-
 global.lng = 'en';
 export default {
   title: 'Dropdown',
-  component: Dropdown
+  component: Dropdown,
+  argTypes: {
+    className: {
+      description: 'string'
+    },
+    value: { description: 'string - current option'},
+    isSearchable: {
+      description: 'boolean - enable search',
+    },
+    onChange: { description: 'callback return selected value'}
+  }
 };
 
 const Template = args => {
-  const [value, setValue] = useState({});
+  const [value, setValue] = useState('');
   return (
     <div style={{ width: 200 }}>
       <Dropdown {...args} value={value} onChange={setValue} />
@@ -21,7 +30,6 @@ export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [
     { label: 'Dropdown1', value: 'drop1' },
@@ -46,5 +54,6 @@ DropdownTemplate.args = {
         { label: 'Group 23', value: 'group23' }
       ]
     }
-  ]
+  ],
+  error: ''
 };

package/src/Atomic/FormElements/Input/Input.js

@@ -21,7 +21,8 @@ const Input = ({
   onFocus,
   onKeyUp,
   mask,
-  error
+  error,
+  icon,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -60,7 +61,7 @@ const Input = ({
   }, [isEditing, isFocused]);
 
   const uniProps = {
-    className: `input-classic ${className}`,
+    className: `input ${className}`,
     placeholder,
     value: value || '',
     disabled,
@@ -81,11 +82,11 @@ const Input = ({
       <>
         <input {...uniProps} ref={inputRef} type={isNumeric ? 'number' : type} />
         {isNumeric && (
-          <div className="input-classic__nums">
-            <button onClick={() => handle.change(value - numStep)} className={cn(`input-classic__num-btn`, { disabled: value <= min })}>
+          <div className="input__nums">
+            <button onClick={() => handle.change(value - numStep)} className={cn(`input__num-btn`, { disabled: value <= min })}>
               <Minus />
             </button>
-            <button onClick={() => handle.change(+value + +numStep)} className={cn(`input-classic__num-btn`, { disabled: value >= max })}>
+            <button onClick={() => handle.change(+value + +numStep)} className={cn(`input__num-btn`, { disabled: value >= max })}>
               <Plus />
             </button>
           </div>
@@ -97,15 +98,15 @@ const Input = ({
   return (
     <div
       className={cn(
-        `input-classic__wrap`,
-        { [`input-classic__wrap_focus`]: isFocused },
-        { [`input-classic__wrap_error`]: error },
-        { [`input-classic__wrap_disabled`]: disabled }
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error },
+        { [`input__wrap_disabled`]: disabled }
       )}
     >
       {renderInput()}
-
-      {withDelete && !isNumeric && <span className={cn(`input-classic__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
+      {icon}
+      {withDelete && !isNumeric && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
     </div>
   );
 };

package/src/Atomic/FormElements/Input/Input.scss

@@ -1,4 +1,4 @@
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
   border: none;
@@ -63,15 +63,6 @@
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: #f06d8d;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -138,7 +129,8 @@
   }
 }
 
-.input-classic__wrap:hover .input-classic__close {
+.input__wrap:hover .input__close {
   visibility: visible;
   pointer-events: all;
 }
+

package/src/Atomic/FormElements/Input/Input.stories.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import {User} from 'react-feather';
 import Input from './Input';
 
 global.lng = 'en';
@@ -38,6 +39,7 @@ export default {
         options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
       }
     },
+    icon: { description: 'JSX' },
     value: { description: '(* - required prop)' },
     className: { description: 'string' },
     mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
@@ -64,5 +66,6 @@ InputTemplate.args = {
   min: '0',
   max: '5',
   placeholder: 'Placeholder',
-  mask: ''
+  mask: '',
+  icon: <User />
 };

package/src/Atomic/FormElements/Label/Label.scss

@@ -2,7 +2,7 @@
     display: flex;
     color: #1e1e2d;
     font-size: 13px;
-    margin-top: 5px;
+    margin-bottom: 5px;
     align-items: center;
 
     &_bold {

package/src/Molecular/FormElements/FormElement.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import Label from '../../Atomic/FormElements/Label/Label';
+import './FormElement.scss';
 
-const RC = 'input-classic';
+const RC = 'form-element';
 
 const FormElement = ({ label, required, children, error, className, hint }) => {
   return (

package/src/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}