@coorpacademy/components 10.1.0 → 10.1.4

package/es/atom/input-search/index.js

@@ -0,0 +1,65 @@
+import _isEmpty from "lodash/fp/isEmpty";
+import _noop from "lodash/fp/noop";
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { NovaCompositionCoorpacademySearch1 as CMSearchIcon, NovaCompositionCoorpacademySearch as SearchIcon, NovaSolidStatusClose as CloseIcon } from '@coorpacademy/nova-icons';
+import Provider from '../provider';
+import style from './style.css';
+
+const Search = props => {
+  const {
+    value,
+    placeholder,
+    onChange = _noop,
+    onClear = _noop,
+    onFocus,
+    onBlur,
+    theme = 'default'
+  } = props;
+  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
+  const cmStyle = classnames(style.coorpmanager);
+  const isDefaultTheme = theme === 'default';
+  return /*#__PURE__*/React.createElement("div", {
+    className: isDefaultTheme ? style.wrapperSearch : cmStyle
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "search",
+    title: placeholder
+  }, !isDefaultTheme ? /*#__PURE__*/React.createElement(CMSearchIcon, {
+    className: style.searchIcon
+  }) : /*#__PURE__*/React.createElement(SearchIcon, {
+    className: style.searchIcon
+  }), !isDefaultTheme ? /*#__PURE__*/React.createElement("span", {
+    className: classnames(style.title, _isEmpty(value) && style.noValue)
+  }, placeholder) : null), /*#__PURE__*/React.createElement("input", {
+    "data-name": "search-input",
+    className: style.search,
+    type: "text",
+    name: "search",
+    id: "search",
+    placeholder: placeholder,
+    value: value,
+    onInput: handleChange,
+    onFocus: onFocus,
+    onChange: _noop,
+    onBlur: onBlur
+  }), value && !isDefaultTheme ? /*#__PURE__*/React.createElement(CloseIcon, {
+    onClick: onClear,
+    className: style.clearIcon
+  }) : null);
+};
+
+Search.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
+Search.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: PropTypes.string,
+  placeholder: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  theme: PropTypes.oneOf(['default', 'coorpmanager'])
+} : {};
+export default Search;
+//# sourceMappingURL=index.js.map

package/es/atom/input-search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/input-search/index.js"],"names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearch1","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","onClear","onFocus","onBlur","theme","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","wrapperSearch","searchIcon","title","noValue","search","clearIcon","contextTypes","skin","childContextTypes","propTypes","string","isRequired","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearch1 as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default'\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const cmStyle = classnames(style.coorpmanager);\n  const isDefaultTheme = theme === 'default';\n\n  return (\n    <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n      <label htmlFor=\"search\" title={placeholder}>\n        {!isDefaultTheme ? (\n          <CMSearchIcon className={style.searchIcon} />\n        ) : (\n          <SearchIcon className={style.searchIcon} />\n        )}\n        {!isDefaultTheme ? (\n          <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n            {placeholder}\n          </span>\n        ) : null}\n      </label>\n      <input\n        data-name=\"search-input\"\n        className={style.search}\n        type=\"text\"\n        name=\"search\"\n        id=\"search\"\n        placeholder={placeholder}\n        value={value}\n        onInput={handleChange}\n        onFocus={onFocus}\n        onChange={noop}\n        onBlur={onBlur}\n      />\n      {value && !isDefaultTheme ? (\n        <CloseIcon onClick={onClear} className={style.clearIcon} />\n      ) : null}\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\n\nexport default Search;\n"],"file":"index.js"}

package/es/atom/input-search/style.css

@@ -0,0 +1,201 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value medium from colors;
+@value light from colors;
+@value white from colors;
+@value dark from colors;
+@value black from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_150 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.wrapperSearch {
+  display: flex;
+  width: 100%;
+  flex-flow: nowrap;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+}
+
+.searchIcon {
+  color: dark;
+  position: relative;
+  margin: 0 0 -3px -20px;
+  width: 19px;
+  height: 19px;
+  left: 35px;
+}
+
+.search {
+  font-family: "Open Sans";
+  text-transform: none;
+  margin: 0 3px;
+  padding: 0 15px 0 45px;
+  border: 0;
+  height: 50px;
+  border-radius: 0;
+  font-size: 14px;
+  color: dark;
+  width: 100%;
+  outline: none;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search::placeholder {
+  color: medium;
+  font-size: 14px;
+}
+
+.search:focus {
+  outline: none;
+}
+
+.search:-webkit-autofill {
+  background-color: white;
+  background-image: none;
+  color: medium;
+}
+
+.search::placeholder {
+  color: medium;
+  font-size: 14px;
+}
+
+.coorpmanager {
+  position: relative;
+}
+
+.coorpmanager label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  height: 64px;
+}
+
+.coorpmanager .title {
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 10px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: normal;
+  text-align: left;
+  z-index: 1;
+  color: cm_grey_400;
+  width: max-content;
+  transition: all 0.25s ease;
+  pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: absolute;
+  top: 7px;
+  left: 30px;
+}
+
+.coorpmanager .search {
+  height: 44px;
+  margin: 0;
+  flex-grow: 0;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 19px 30px 5px 30px;
+  border-radius: 7px;
+  background-color: cm_grey_100;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 44px;
+  letter-spacing: normal;
+  text-align: left;
+  color: cm_grey_700;
+  border: none;
+  transition: all 0.25s ease;
+  outline: none;
+}
+
+.coorpmanager .title.noValue {
+  font-size: 14px;
+  font-weight: 500;
+  color: cm_grey_400;
+  top: 14px;
+}
+
+.coorpmanager:focus-within .title.noValue {
+  font-size: 10px;
+  font-weight: bold;
+  color: cm_grey_400;
+  top: 7px;
+}
+
+.coorpmanager:focus-within .title.noValue {
+  width: max-content;
+  height: 8px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+.coorpmanager .search:hover {
+  background-color: cm_grey_150;
+}
+
+.coorpmanager .search::placeholder {
+  color: transparent;
+}
+
+.coorpmanager .clearIcon {
+  color: cm_grey_400;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  right: 15px;
+  top: 16px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.coorpmanager .searchIcon {
+  color: #000;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: 30px;
+  top: 16px;
+  line-height: 16px;
+}
+
+@media tablet {
+  .search,
+  input {
+    font-size: 12px;
+  }
+
+  .search::placeholder {
+    font-size: 12px;
+  }
+}
+
+@media mobile {
+  .search {
+    font-size: 12px;
+  }
+
+  .search::placeholder {
+    font-size: 12px;
+  }
+}

package/es/atom/input-search/test/change.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/atom/input-search/test/change.js"],"names":["browserEnv","test","React","shallow","configure","Adapter","Search","adapter","t","plan","onChange","value","is","wrapper","find","simulate","target"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,OAAR,EAAiBC,SAAjB,QAAiC,QAAjC;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,MAAP,MAAmB,IAAnB;AAEAN,UAAU;AACVI,SAAS,CAAC;AAACG,EAAAA,OAAO,EAAE,IAAIF,OAAJ;AAAV,CAAD,CAAT;AAEAJ,IAAI,CAAC,6EAAD,EAAgFO,CAAC,IAAI;AACvFA,EAAAA,CAAC,CAACC,IAAF,CAAO,CAAP;;AAEA,QAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxBH,IAAAA,CAAC,CAACI,EAAF,CAAKD,KAAL,EAAY,mBAAZ;AACD,GAFD;;AAIA,QAAME,OAAO,GAAGV,OAAO,eACrB,oBAAC,MAAD;AAAQ,IAAA,WAAW,EAAC,eAApB;AAAoC,IAAA,KAAK,EAAC,kBAA1C;AAA6D,IAAA,QAAQ,EAAEO;AAAvE,IADqB,CAAvB;AAIAG,EAAAA,OAAO,CAACC,IAAR,CAAa,OAAb,EAAsBC,QAAtB,CAA+B,OAA/B,EAAwC;AAACC,IAAAA,MAAM,EAAE;AAACL,MAAAA,KAAK,EAAE;AAAR;AAAT,GAAxC;AACD,CAZG,CAAJ","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport Search from '..';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('should call onChange with new value when user try to change the input value', t => {\n  t.plan(1);\n\n  const onChange = value => {\n    t.is(value, 'my name is murphy');\n  };\n\n  const wrapper = shallow(\n    <Search placeholder=\"say your name\" value=\"my name is murph\" onChange={onChange} />\n  );\n\n  wrapper.find('input').simulate('input', {target: {value: 'my name is murphy'}});\n});\n"],"file":"change.js"}

package/es/atom/input-search/test/fixtures/coorpmanager-with-value.js

@@ -0,0 +1,14 @@
+export default {
+  props: {
+    value: 'big data - le retour',
+    placeholder: 'Search for a course',
+    onChange: value => {
+      console.log(value);
+    },
+    onEnter: () => console.log('pressed enter'),
+    onFocus: () => console.log('onFocus'),
+    onClear: () => console.log('clear pressed'),
+    theme: 'coorpmanager'
+  }
+};
+//# sourceMappingURL=coorpmanager-with-value.js.map

package/es/atom/input-search/test/fixtures/coorpmanager-with-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-search/test/fixtures/coorpmanager-with-value.js"],"names":["props","value","placeholder","onChange","console","log","onEnter","onFocus","onClear","theme"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,sBADF;AAELC,IAAAA,WAAW,EAAE,qBAFR;AAGLC,IAAAA,QAAQ,EAAEF,KAAK,IAAI;AACjBG,MAAAA,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AACD,KALI;AAMLK,IAAAA,OAAO,EAAE,MAAMF,OAAO,CAACC,GAAR,CAAY,eAAZ,CANV;AAOLE,IAAAA,OAAO,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,SAAZ,CAPV;AAQLG,IAAAA,OAAO,EAAE,MAAMJ,OAAO,CAACC,GAAR,CAAY,eAAZ,CARV;AASLI,IAAAA,KAAK,EAAE;AATF;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    value: 'big data - le retour',\n    placeholder: 'Search for a course',\n    onChange: value => {\n      console.log(value);\n    },\n    onEnter: () => console.log('pressed enter'),\n    onFocus: () => console.log('onFocus'),\n    onClear: () => console.log('clear pressed'),\n    theme: 'coorpmanager'\n  }\n};\n"],"file":"coorpmanager-with-value.js"}

package/es/atom/input-search/test/fixtures/coorpmanager.js

@@ -0,0 +1,13 @@
+export default {
+  props: {
+    value: '',
+    placeholder: 'Search for a course',
+    onChange: value => {
+      console.log(value);
+    },
+    onFocus: () => console.log('onFocus'),
+    onBlur: () => console.log('blur'),
+    theme: 'coorpmanager'
+  }
+};
+//# sourceMappingURL=coorpmanager.js.map

package/es/atom/input-search/test/fixtures/coorpmanager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-search/test/fixtures/coorpmanager.js"],"names":["props","value","placeholder","onChange","console","log","onFocus","onBlur","theme"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,EADF;AAELC,IAAAA,WAAW,EAAE,qBAFR;AAGLC,IAAAA,QAAQ,EAAEF,KAAK,IAAI;AACjBG,MAAAA,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AACD,KALI;AAMLK,IAAAA,OAAO,EAAE,MAAMF,OAAO,CAACC,GAAR,CAAY,SAAZ,CANV;AAOLE,IAAAA,MAAM,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,MAAZ,CAPT;AAQLG,IAAAA,KAAK,EAAE;AARF;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    value: '',\n    placeholder: 'Search for a course',\n    onChange: value => {\n      console.log(value);\n    },\n    onFocus: () => console.log('onFocus'),\n    onBlur: () => console.log('blur'),\n    theme: 'coorpmanager'\n  }\n};\n"],"file":"coorpmanager.js"}

package/es/atom/input-search/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-search/test/fixtures/default.js"],"names":["props","value","placeholder","onChange","console","log","onFocus","onBlur"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,EADF;AAELC,IAAAA,WAAW,EAAE,qBAFR;AAGLC,IAAAA,QAAQ,EAAEF,KAAK,IAAI;AACjBG,MAAAA,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AACD,KALI;AAMLK,IAAAA,OAAO,EAAE,MAAMF,OAAO,CAACC,GAAR,CAAY,SAAZ,CANV;AAOLE,IAAAA,MAAM,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,MAAZ;AAPT;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    value: '',\n    placeholder: 'Search for a course',\n    onChange: value => {\n      console.log(value);\n    },\n    onFocus: () => console.log('onFocus'),\n    onBlur: () => console.log('blur')\n  }\n};\n"],"file":"default.js"}

package/es/atom/input-search/test/fixtures/with-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-search/test/fixtures/with-value.js"],"names":["props","value","placeholder","onChange","console","log","onEnter","onFocus"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,sBADF;AAELC,IAAAA,WAAW,EAAE,qBAFR;AAGLC,IAAAA,QAAQ,EAAEF,KAAK,IAAI;AACjBG,MAAAA,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AACD,KALI;AAMLK,IAAAA,OAAO,EAAE,MAAMF,OAAO,CAACC,GAAR,CAAY,eAAZ,CANV;AAOLE,IAAAA,OAAO,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,SAAZ;AAPV;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    value: 'big data - le retour',\n    placeholder: 'Search for a course',\n    onChange: value => {\n      console.log(value);\n    },\n    onEnter: () => console.log('pressed enter'),\n    onFocus: () => console.log('onFocus')\n  }\n};\n"],"file":"with-value.js"}

package/es/atom/input-text/index.js

@@ -1,13 +1,16 @@
+import _isEmpty from "lodash/fp/isEmpty";
 import _keys from "lodash/fp/keys";
 import _isNil from "lodash/fp/isNil";
 import _noop from "lodash/fp/noop";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidStatusClose as ErrorIcon, NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
 import classnames from 'classnames';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
 const themeStyle = {
   setup: style.setup,
+  coorpmanager: style.coorpmanager,
   cockpit: style.cockpit,
   default: style.default
 };
@@ -17,9 +20,11 @@ const InputText = props => {
     autoFocus = false,
     placeholder = '',
     value,
+    hint,
     defaultValue,
     onChange = _noop,
     error,
+    valid,
     theme = 'default',
     description,
     disabled,
@@ -31,25 +36,46 @@ const InputText = props => {
   const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
   const mainClass = themeStyle[theme];
   const className = getClassState(style.default, style.modified, style.error, modified, error);
-  const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
+  const descriptionView = description && theme !== 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description) : null;
+  const toolTipView = description && theme === 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
+    className: style.infoIconWrapper
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    className: style.infoIcon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.descriptionLabel
+  }, description)) : null;
+  const hintView = theme === 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
+    className: style.hint // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: error || hint
+    }
+  }) : null;
+  const errorIconView = error ? /*#__PURE__*/React.createElement(ErrorIcon, {
+    className: style.leftIcon
+  }) : null;
+  const validIconView = valid ? /*#__PURE__*/React.createElement(CheckIcon, {
+    className: style.leftIcon
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(mainClass, className, _isNil(propsTitle) && style.isNoTitle)
+    className: classnames(mainClass, className, disabled && style.disabled, _isNil(propsTitle) && style.isNoTitle)
   }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
-    className: style.title
-  }, title), /*#__PURE__*/React.createElement("input", {
+    className: classnames(style.title, _isEmpty(value) && style.noValue)
+  }, title, toolTipView), /*#__PURE__*/React.createElement("input", {
     autoFocus: autoFocus,
     type: "text",
     name: title,
     className: style.input,
     placeholder: placeholder,
     defaultValue: defaultValue,
+    autoComplete: 'off',
     value: value,
     onInput: handleChange,
     disabled: disabled,
     onChange: _noop
-  })), descriptionView);
+  }), errorIconView, validIconView, hintView), descriptionView);
 };
 
 InputText.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -61,10 +87,12 @@ InputText.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   value: PropTypes.string,
+  hint: PropTypes.string,
   error: PropTypes.string,
   onChange: PropTypes.func,
   description: PropTypes.string,
-  modified: PropTypes.bool
+  modified: PropTypes.bool,
+  valid: PropTypes.bool
 } : {};
 export default InputText;
 //# sourceMappingURL=index.js.map

package/es/atom/input-text/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-text/index.js"],"names":["React","useMemo","PropTypes","classnames","getClassState","style","themeStyle","setup","cockpit","default","InputText","props","autoFocus","placeholder","value","defaultValue","onChange","error","theme","description","disabled","required","modified","title","propsTitle","handleChange","e","target","mainClass","className","descriptionView","isNoTitle","input","propTypes","bool","string","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  setup: style.setup,\n  cockpit: style.cockpit,\n  default: style.default\n};\nconst InputText = props => {\n  const {\n    autoFocus = false,\n    placeholder = '',\n    value,\n    defaultValue,\n    onChange = noop,\n    error,\n    theme = 'default',\n    description,\n    disabled,\n    required,\n    modified = false,\n    title: propsTitle\n  } = props;\n\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n  return (\n    <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n      <label>\n        <span className={style.title}>{title}</span>\n        <input\n          autoFocus={autoFocus}\n          type=\"text\"\n          name={title}\n          className={style.input}\n          placeholder={placeholder}\n          defaultValue={defaultValue}\n          value={value}\n          onInput={handleChange}\n          disabled={disabled}\n          onChange={noop}\n        />\n      </label>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputText.propTypes = {\n  autoFocus: PropTypes.bool,\n  title: PropTypes.string,\n  placeholder: PropTypes.string,\n  defaultValue: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  error: PropTypes.string,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool\n};\nexport default InputText;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-text/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","classnames","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","InputText","props","autoFocus","placeholder","value","hint","defaultValue","onChange","error","valid","theme","description","disabled","required","modified","title","propsTitle","handleChange","e","target","mainClass","className","descriptionView","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","__html","errorIconView","leftIcon","validIconView","isNoTitle","noValue","input","propTypes","bool","string","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys, isEmpty} from 'lodash/fp';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidStatusClose as ErrorIcon,\n  NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  setup: style.setup,\n  coorpmanager: style.coorpmanager,\n  cockpit: style.cockpit,\n  default: style.default\n};\nconst InputText = props => {\n  const {\n    autoFocus = false,\n    placeholder = '',\n    value,\n    hint,\n    defaultValue,\n    onChange = noop,\n    error,\n    valid,\n    theme = 'default',\n    description,\n    disabled,\n    required,\n    modified = false,\n    title: propsTitle\n  } = props;\n\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const descriptionView =\n    description && theme !== 'coorpmanager' ? (\n      <div className={style.description}>{description}</div>\n    ) : null;\n  const toolTipView =\n    description && theme === 'coorpmanager' ? (\n      <div className={style.infoIconWrapper}>\n        <InfoIcon className={style.infoIcon} />\n        <div className={style.descriptionLabel}>{description}</div>\n      </div>\n    ) : null;\n  const hintView =\n    theme === 'coorpmanager' ? (\n      <div\n        className={style.hint}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: error || hint}}\n      />\n    ) : null;\n  const errorIconView = error ? <ErrorIcon className={style.leftIcon} /> : null;\n  const validIconView = valid ? <CheckIcon className={style.leftIcon} /> : null;\n  return (\n    <div\n      className={classnames(\n        mainClass,\n        className,\n        disabled && style.disabled,\n        isNil(propsTitle) && style.isNoTitle\n      )}\n    >\n      <label>\n        <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n          {title}\n          {toolTipView}\n        </span>\n\n        <input\n          autoFocus={autoFocus}\n          type=\"text\"\n          name={title}\n          className={style.input}\n          placeholder={placeholder}\n          defaultValue={defaultValue}\n          autoComplete={'off'}\n          value={value}\n          onInput={handleChange}\n          disabled={disabled}\n          onChange={noop}\n        />\n        {errorIconView}\n        {validIconView}\n        {hintView}\n      </label>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputText.propTypes = {\n  autoFocus: PropTypes.bool,\n  title: PropTypes.string,\n  placeholder: PropTypes.string,\n  defaultValue: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  hint: PropTypes.string,\n  error: PropTypes.string,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  valid: PropTypes.bool\n};\nexport default InputText;\n"],"file":"index.js"}