intelicoreact 0.0.43 → 0.0.48

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),
@@ -89,6 +86,8 @@ var Dropdown = function Dropdown(_ref) {
   var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
 
   var handleClickOutside = function handleClickOutside(event) {
+    console.log(dropdownRef.current.contains(event.target));
+
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -121,6 +120,7 @@ var Dropdown = function Dropdown(_ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), item.value === value))
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: item.className || '',
       dangerouslySetInnerHTML: {
         __html: hightlightedText(item.label)
       }
@@ -159,26 +159,28 @@ 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"),
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : '')
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
     value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: placeholder
-  }) : selectedLabel || placeholder, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
+    placeholder: placeholder,
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "text",
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
+    onClick: function onClick() {
+      return setIsOpen(!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")
   }, filteredOptions.map(function (filteredOption) {

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,11 +62,11 @@ var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [{
     label: 'Dropdown1',
-    value: 'drop1'
+    value: 'drop1',
+    className: 'status status--approved'
   }, {
     label: 'Dropdown2',
     value: 'drop2'
@@ -94,5 +108,6 @@ DropdownTemplate.args = {
       label: 'Group 23',
       value: 'group23'
     }]
-  }]
+  }],
+  error: ''
 };

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

@@ -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;
@@ -142,3 +133,4 @@
   visibility: visible;
   pointer-events: all;
 }
+

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,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
 
+require("./FormElement.scss");
+
 var RC = 'form-element';
 
 var FormElement = function FormElement(_ref) {

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.43",
+  "version": "0.0.48",
   "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);
@@ -24,6 +24,7 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
   const filteredOptions = [...filteredItems, ...filteredGroups];
 
   const handleClickOutside = event => {
+    console.log(dropdownRef.current.contains(event.target));
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -53,7 +54,7 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
           <Check />
         </span>
-        <div dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
+        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
       </button>
     ) : null;
 
@@ -75,19 +76,23 @@ 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' : ''}`} >
         {isSearchable ? (
           <input
             className={`${RC}__input`}
             value={searchValue ?? selectedLabel}
             onChange={e => onSearchHandler(e.target.value)}
             placeholder={placeholder}
+            onFocus={() => setIsOpen(true)}
           />
         ) : (
-          selectedLabel || placeholder
+          <span className="text" onClick={() => setIsOpen(!isOpen)}>
+            {selectedLabel || placeholder}
+          </span>
         )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <ChevronUp /> : <ChevronDown />}</span>
+        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </span>
       </button>
       {isOpen && filteredOptions.length > 0 && (
         <div className={`${RC}__list`}>

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,10 +30,9 @@ export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [
-    { label: 'Dropdown1', value: 'drop1' },
+    { label: 'Dropdown1', value: 'drop1', className: 'status status--approved' },
     { label: 'Dropdown2', value: 'drop2' },
     { label: 'Dropdown3', value: 'drop3', disabled: true },
     { label: 'Dropdown4', value: 'drop4' },
@@ -46,5 +54,6 @@ DropdownTemplate.args = {
         { label: 'Group 23', value: 'group23' }
       ]
     }
-  ]
+  ],
+  error: ''
 };

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

@@ -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;
@@ -142,3 +133,4 @@
   visibility: visible;
   pointer-events: all;
 }
+

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,6 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import Label from '../../Atomic/FormElements/Label/Label';
+import './FormElement.scss';
 
 const RC = 'form-element';
 

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;
+}