@coorpacademy/components 10.1.1 → 10.1.2

package/lib/atom/input-text/style.css

@@ -193,7 +193,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  height: 0px;
+  position: relative;
+  height: 64px;
 }
 
 .coorpmanager .title {
@@ -206,7 +207,6 @@
   line-height: 1.2;
   letter-spacing: normal;
   text-align: left;
-  margin: 7px 0px -19px 16px;
   z-index: 1;
   color: cm_grey_400;
   width: auto;
@@ -215,6 +215,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  position: absolute;
+  top: 7px;
+  left: 16px;
 }
 
 .coorpmanager .title.noValue .infoIcon {
@@ -256,14 +259,14 @@
   font-size: 14px;
   font-weight: 500;
   color: cm_grey_700;
-  margin: 14px 0px -30px 16px;
+  top: 14px;
 }
 
 .coorpmanager:focus-within .title.noValue {
   font-size: 10px;
   font-weight: bold;
   color: cm_grey_400;
-  margin: 7px 0px -19px 16px;
+  top: 7px;
 }
 
 .coorpmanager:focus-within input::placeholder {
@@ -283,6 +286,7 @@
 
 .coorpmanager input::placeholder {
   color: transparent;
+  transition: color 0.25s linear;
 }
 
 .coorpmanager .hint {
@@ -309,18 +313,19 @@
   color: white;
   border-radius: 50%;
   padding: 2px;
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
+  right: 17px;
+  top: 14px;
 }
 
 .coorpmanager .leftIcon {
   color: cm_positive_100;
-  width: 14px;
-  height: 14px;
+  width: 17px;
+  height: 17px;
   position: absolute;
-  right: 15px;
-  top: 16px;
-  line-height: 16px;
+  right: 16px;
+  top: 13px;
 }
 
 .coorpmanager.disabled {

package/lib/atom/input-textarea/index.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
@@ -13,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _novaIcons = require("@coorpacademy/nova-icons");
+
 var _getClassState = _interopRequireDefault(require("../../util/get-class-state"));
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -25,6 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const themeStyle = {
   setup: _style.default.setup,
+  coorpmanager: _style.default.coorpmanager,
   cockpit: _style.default.cockpit,
   default: _style.default.default
 };
@@ -35,9 +40,11 @@ const InputTextarea = props => {
     name,
     placeholder,
     value,
+    hint,
     theme = 'default',
     onChange = _noop2.default,
     error,
+    valid,
     required,
     description,
     disabled,
@@ -47,22 +54,40 @@ const InputTextarea = props => {
   const mainClass = themeStyle[theme];
   const className = (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error);
   const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.value), [onChange]);
+  const descriptionView = description && theme !== 'coorpmanager' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.description
+  }, description) : null;
+  const toolTipView = description && theme === 'coorpmanager' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.infoIconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
+    className: _style.default.infoIcon
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.descriptionLabel
+  }, description)) : null;
+  const hintView = theme === 'coorpmanager' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.hint // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: error || hint
+    }
+  }) : null;
+  const errorIconView = error ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
+    className: _style.default.leftIcon
+  }) : null;
+  const validIconView = valid ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusCheckCircle2, {
+    className: _style.default.leftIcon
+  }) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(mainClass, className)
+    className: (0, _classnames.default)(mainClass, className, disabled && _style.default.disabled)
   }, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.title
-  }, title), /*#__PURE__*/_react.default.createElement("textarea", {
+    className: (0, _classnames.default)(_style.default.title, (0, _isEmpty2.default)(value) && _style.default.noValue)
+  }, title, toolTipView), /*#__PURE__*/_react.default.createElement("textarea", {
     name: name,
     defaultValue: value,
     placeholder: placeholder,
     onInput: handleChange,
-    disabled: disabled,
-    style: {
-      resize: 'none'
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.description
-  }, description));
+    disabled: disabled
+  }), errorIconView, validIconView, hintView), descriptionView);
 };
 
 InputTextarea.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -73,10 +98,12 @@ InputTextarea.propTypes = process.env.NODE_ENV !== "production" ? {
   theme: _propTypes.default.oneOf((0, _keys2.default)(themeStyle)),
   disabled: _propTypes.default.bool,
   value: _propTypes.default.string,
+  hint: _propTypes.default.string,
   error: _propTypes.default.string,
   onChange: _propTypes.default.func,
   description: _propTypes.default.string,
-  modified: _propTypes.default.bool
+  modified: _propTypes.default.bool,
+  valid: _propTypes.default.bool
 } : {};
 var _default = InputTextarea;
 exports.default = _default;

package/lib/atom/input-textarea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-textarea/index.js"],"names":["themeStyle","setup","style","cockpit","default","InputTextarea","props","title","propsTitle","name","placeholder","value","theme","onChange","error","required","description","disabled","modified","mainClass","className","handleChange","e","target","resize","propTypes","PropTypes","string","bool","oneOf","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAEC,eAAMD,KADI;AAEjBE,EAAAA,OAAO,EAAED,eAAMC,OAFE;AAGjBC,EAAAA,OAAO,EAAEF,eAAME;AAHE,CAAnB;;AAKA,MAAMC,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,KAAK,EAAEC,UADH;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,WAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,KAAK,GAAG,SALJ;AAMJC,IAAAA,QAAQ,iBANJ;AAOJC,IAAAA,KAPI;AAQJC,IAAAA,QARI;AASJC,IAAAA,WATI;AAUJC,IAAAA,QAVI;AAWJC,IAAAA,QAAQ,GAAG;AAXP,MAYFZ,KAZJ;AAcA,QAAMC,KAAK,GAAI,GAAEC,UAAW,GAAEO,QAAQ,GAAG,IAAH,GAAU,GAAI,EAApD;AACA,QAAMI,SAAS,GAAGnB,UAAU,CAACY,KAAD,CAA5B;AACA,QAAMQ,SAAS,GAAG,4BAAclB,eAAME,OAApB,EAA6BF,eAAMgB,QAAnC,EAA6ChB,eAAMY,KAAnD,EAA0DI,QAA1D,EAAoEJ,KAApE,CAAlB;AACA,QAAMO,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIT,QAAQ,CAACS,CAAC,CAACC,MAAF,CAASZ,KAAV,CAA3B,EAA6C,CAACE,QAAD,CAA7C,CAArB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAE,yBAAWM,SAAX,EAAsBC,SAAtB;AAAhB,kBACE,yDACE;AAAM,IAAA,SAAS,EAAElB,eAAMK;AAAvB,KAA+BA,KAA/B,CADF,eAEE;AACE,IAAA,IAAI,EAAEE,IADR;AAEE,IAAA,YAAY,EAAEE,KAFhB;AAGE,IAAA,WAAW,EAAED,WAHf;AAIE,IAAA,OAAO,EAAEW,YAJX;AAKE,IAAA,QAAQ,EAAEJ,QALZ;AAME,IAAA,KAAK,EAAE;AACLO,MAAAA,MAAM,EAAE;AADH;AANT,IAFF,CADF,eAcE;AAAK,IAAA,SAAS,EAAEtB,eAAMc;AAAtB,KAAoCA,WAApC,CAdF,CADF;AAkBD,CAtCD;;AAwCAX,aAAa,CAACoB,SAAd,2CAA0B;AACxBf,EAAAA,WAAW,EAAEgB,mBAAUC,MADC;AAExBpB,EAAAA,KAAK,EAAEmB,mBAAUC,MAFO;AAGxBZ,EAAAA,QAAQ,EAAEW,mBAAUE,IAHI;AAIxBnB,EAAAA,IAAI,EAAEiB,mBAAUC,MAJQ;AAKxBf,EAAAA,KAAK,EAAEc,mBAAUG,KAAV,CAAgB,oBAAK7B,UAAL,CAAhB,CALiB;AAMxBiB,EAAAA,QAAQ,EAAES,mBAAUE,IANI;AAOxBjB,EAAAA,KAAK,EAAEe,mBAAUC,MAPO;AAQxBb,EAAAA,KAAK,EAAEY,mBAAUC,MARO;AASxBd,EAAAA,QAAQ,EAAEa,mBAAUI,IATI;AAUxBd,EAAAA,WAAW,EAAEU,mBAAUC,MAVC;AAWxBT,EAAAA,QAAQ,EAAEQ,mBAAUE;AAXI,CAA1B;eAaevB,a","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, 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 InputTextarea = props => {\n  const {\n    title: propsTitle,\n    name,\n    placeholder,\n    value,\n    theme = 'default',\n    onChange = noop,\n    error,\n    required,\n    description,\n    disabled,\n    modified = false\n  } = props;\n\n  const title = `${propsTitle}${required ? '* ' : ' '}`;\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n  return (\n    <div className={classnames(mainClass, className)}>\n      <label>\n        <span className={style.title}>{title}</span>\n        <textarea\n          name={name}\n          defaultValue={value}\n          placeholder={placeholder}\n          onInput={handleChange}\n          disabled={disabled}\n          style={{\n            resize: 'none'\n          }}\n        />\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nInputTextarea.propTypes = {\n  placeholder: PropTypes.string,\n  title: PropTypes.string,\n  required: PropTypes.bool,\n  name: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: 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 InputTextarea;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-textarea/index.js"],"names":["themeStyle","setup","style","coorpmanager","cockpit","default","InputTextarea","props","title","propsTitle","name","placeholder","value","hint","theme","onChange","error","valid","required","description","disabled","modified","mainClass","className","handleChange","e","target","descriptionView","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","__html","errorIconView","leftIcon","validIconView","noValue","propTypes","PropTypes","string","bool","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, keys, isEmpty} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidStatusClose as ErrorIcon,\n  NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\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 InputTextarea = props => {\n  const {\n    title: propsTitle,\n    name,\n    placeholder,\n    value,\n    hint,\n    theme = 'default',\n    onChange = noop,\n    error,\n    valid,\n    required,\n    description,\n    disabled,\n    modified = false\n  } = props;\n\n  const title = `${propsTitle}${required ? '* ' : ' '}`;\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\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\n  return (\n    <div className={classnames(mainClass, className, disabled && style.disabled)}>\n      <label>\n        <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n          {title}\n          {toolTipView}\n        </span>\n        <textarea\n          name={name}\n          defaultValue={value}\n          placeholder={placeholder}\n          onInput={handleChange}\n          disabled={disabled}\n        />\n        {errorIconView}\n        {validIconView}\n        {hintView}\n      </label>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputTextarea.propTypes = {\n  placeholder: PropTypes.string,\n  title: PropTypes.string,\n  required: PropTypes.bool,\n  name: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: 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 InputTextarea;\n"],"file":"index.js"}

package/lib/atom/input-textarea/style.css

@@ -3,6 +3,15 @@
 @value medium from colors;
 @value light from colors;
 @value negative from colors;
+@value xtraLightGrey from colors;
+@value cm_positive_100 from colors;
+@value cm_negative_100 from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_150 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
 
 .default {
   display: flex;
@@ -169,3 +178,259 @@
   align-self: flex-start;
   padding-left: 13px;
 }
+
+/******************************* coorpmanager theme ***************************************/
+
+
+.coorpmanager {
+  width: 300px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.coorpmanager label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: auto;
+  position: relative;
+}
+
+.coorpmanager .title {
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 10px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-align: left;
+  z-index: 1;
+  color: cm_grey_400;
+  width: auto;
+  transition: all 0.25s linear;
+  pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  top: 15px;
+  left: 16px;
+  position: absolute;
+  margin: 0;
+}
+
+.coorpmanager .title.noValue .infoIcon {
+  height: 10px;
+  width: 10px;
+  line-height: 12px;
+  color: cm_grey_500;
+}
+
+.coorpmanager textarea {
+  width: 285px;
+  min-height: 145px;
+  resize: vertical;
+  margin: 0px;
+  flex-grow: 0;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 35px 0px 0px 17px;
+  border-radius: 7px;
+  background-color: transparent;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 21px;
+  letter-spacing: normal;
+  text-align: left;
+  color: cm_grey_700;
+  border: none;
+  transition: all 0.25s linear;
+  outline: none;
+  display: flex;
+  margin: 0px 16px 13px 0px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.coorpmanager label::before {
+  content: '';
+  top: 0px;
+  bottom: 20px;
+  left: 0px;
+  right: 0px;
+  position: absolute;
+  background-color: cm_grey_100;
+  border-radius: 7px;
+  transition: all 0.25s linear;
+}
+
+.coorpmanager .title.noValue{
+  font-size: 14px;
+  font-weight: 500;
+  color: cm_grey_700;
+}
+
+.coorpmanager:focus-within .title.noValue {
+  font-size: 10px;
+  font-weight: bold;
+  color: cm_grey_400;
+  top: 15px;
+}
+
+.coorpmanager:focus-within textarea::placeholder {
+  color: cm_grey_400;
+}
+
+.coorpmanager:focus-within .title.noValue .infoIcon {
+  width: 8px;
+  height: 8px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+
+
+.coorpmanager label:hover:before {
+  background-color: cm_grey_150;
+}
+
+.coorpmanager textarea::placeholder {
+  color: transparent;
+  transition: all 0.25s linear;
+}
+
+.coorpmanager .hint {
+  flex-grow: 0;
+  opacity: 0.5;
+  font-family: Gilroy;
+  font-size: 10px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-align: left;
+  padding-top: 8px;
+  color: cm_grey_700;
+  height: 12px;
+}
+
+.coorpmanager.error .hint {
+  color: cm_negative_100;
+}
+
+.coorpmanager.error .leftIcon {
+  background-color: cm_negative_100;
+  color: white;
+  border-radius: 50%;
+  padding: 2px;
+  width: 11px;
+  height: 11px;
+  right: 17px;
+  top: 13px;
+}
+
+.coorpmanager .leftIcon {
+  color: cm_positive_100;
+  width: 17px;
+  height: 17px;
+  position: absolute;
+  right: 15px;
+  top: 12px;
+}
+
+.coorpmanager.disabled {
+  opacity: 0.5;
+}
+
+.coorpmanager .infoIconWrapper {
+  overflow: visible;
+  height: 12px;
+  margin: 0px 4px;
+  cursor: pointer;
+  pointer-events: fill;
+  position: relative;
+}
+
+.coorpmanager .infoIcon {
+  cursor: pointer;
+  width: 8px;
+  height: 8px;
+  line-height: 16px;
+  color: cm_grey_400;
+  transition: all 0.25s linear;
+}
+
+.coorpmanager .infoIconWrapper:hover .descriptionLabel {
+  visibility: visible;
+  opacity: 1;
+}
+
+.coorpmanager .descriptionLabel {
+  margin: 0 1px 18px 0;
+  padding: 8px 16px;
+  border-radius: 7px;
+  background-color: cm_grey_700;
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: center;
+  color: white;
+  padding: 8px 16px;
+  max-width: 200px;
+  position: absolute;
+  left: -24px;
+  z-index: 3;
+  bottom: 5px;
+  width: max-content;
+  visibility: hidden;
+  opacity: 0s
+}
+
+.coorpmanager .descriptionLabel::after{
+  content:'';
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid cm_grey_700;
+  position: absolute;
+  bottom: -6px;
+  left: 21px;
+}
+.coorpmanager .title.noValue .descriptionLabel::after{
+  left: 22px;
+}
+.coorpmanager:focus-within .title.noValue .descriptionLabel::after{
+  left: 21px;
+}
+.coorpmanager textarea::-webkit-resizer {
+background: repeating-linear-gradient(
+  135deg,
+  transparent,
+  transparent 14px,
+  cm_grey_400 14px,
+  cm_grey_400 15.5px,
+  transparent 15.5px,
+  transparent 17px,
+  cm_grey_400 17px,
+  cm_grey_400 18.5px,
+  transparent 18.5px,
+  transparent 20px,
+  cm_grey_400 20px,
+  cm_grey_400 21.5px
+);
+}

package/lib/atom/input-textarea/test/fixtures/cm-default.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    type: 'textarea',
+    title: 'Input name',
+    hint: 'Hint <span style="color:red;">10<span>/40',
+    placeholder: 'This is an input',
+    theme: 'coorpmanager',
+    description: 'This is the tooltip text',
+    value: 'This is an input',
+    disabled: false,
+    valid: false,
+    error: '',
+    required: true,
+    onChange: value => console.log(value)
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=cm-default.js.map

package/lib/atom/input-textarea/test/fixtures/cm-default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-textarea/test/fixtures/cm-default.js"],"names":["props","type","title","hint","placeholder","theme","description","value","disabled","valid","error","required","onChange","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,KAAK,EAAE,YAFF;AAGLC,IAAAA,IAAI,EAAE,2CAHD;AAILC,IAAAA,WAAW,EAAE,kBAJR;AAKLC,IAAAA,KAAK,EAAE,cALF;AAMLC,IAAAA,WAAW,EAAE,0BANR;AAOLC,IAAAA,KAAK,EAAE,kBAPF;AAQLC,IAAAA,QAAQ,EAAE,KARL;AASLC,IAAAA,KAAK,EAAE,KATF;AAULC,IAAAA,KAAK,EAAE,EAVF;AAWLC,IAAAA,QAAQ,EAAE,IAXL;AAYLC,IAAAA,QAAQ,EAAEL,KAAK,IAAIM,OAAO,CAACC,GAAR,CAAYP,KAAZ;AAZd;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'textarea',\n    title: 'Input name',\n    hint: 'Hint <span style=\"color:red;\">10<span>/40',\n    placeholder: 'This is an input',\n    theme: 'coorpmanager',\n    description: 'This is the tooltip text',\n    value: 'This is an input',\n    disabled: false,\n    valid: false,\n    error: '',\n    required: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"cm-default.js"}

package/lib/atom/input-textarea/test/fixtures/cm-empty.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    type: 'textarea',
+    title: 'Input name',
+    hint: 'Hint <span style="color:red;">10<span>/40',
+    placeholder: 'This is an input',
+    theme: 'coorpmanager',
+    description: 'This is the tooltip text',
+    value: '',
+    disabled: false,
+    valid: false,
+    error: '',
+    required: true,
+    onChange: value => console.log(value)
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=cm-empty.js.map

package/lib/atom/input-textarea/test/fixtures/cm-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-textarea/test/fixtures/cm-empty.js"],"names":["props","type","title","hint","placeholder","theme","description","value","disabled","valid","error","required","onChange","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,KAAK,EAAE,YAFF;AAGLC,IAAAA,IAAI,EAAE,2CAHD;AAILC,IAAAA,WAAW,EAAE,kBAJR;AAKLC,IAAAA,KAAK,EAAE,cALF;AAMLC,IAAAA,WAAW,EAAE,0BANR;AAOLC,IAAAA,KAAK,EAAE,EAPF;AAQLC,IAAAA,QAAQ,EAAE,KARL;AASLC,IAAAA,KAAK,EAAE,KATF;AAULC,IAAAA,KAAK,EAAE,EAVF;AAWLC,IAAAA,QAAQ,EAAE,IAXL;AAYLC,IAAAA,QAAQ,EAAEL,KAAK,IAAIM,OAAO,CAACC,GAAR,CAAYP,KAAZ;AAZd;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'textarea',\n    title: 'Input name',\n    hint: 'Hint <span style=\"color:red;\">10<span>/40',\n    placeholder: 'This is an input',\n    theme: 'coorpmanager',\n    description: 'This is the tooltip text',\n    value: '',\n    disabled: false,\n    valid: false,\n    error: '',\n    required: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"cm-empty.js"}

package/lib/atom/title/test/fixtures.js

@@ -8,11 +8,7 @@ var _renderComponent = _interopRequireDefault(require("../../../test/helpers/ren
 
 var _ = _interopRequireDefault(require(".."));
 
-var _formGroupTitleWithoutSubtitle = _interopRequireDefault(require("./fixtures/form-group-title-without-subtitle"));
-
-var _formGroupTitle = _interopRequireDefault(require("./fixtures/form-group-title"));
-
-var _pageTitle = _interopRequireDefault(require("./fixtures/page-title"));
+var _fixture = _interopRequireDefault(require("./fixtures/fixture"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -22,7 +18,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     t.not(value, undefined, `PropType for "Atom.AtomTitle.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
   });
 });
-(0, _ava.default)('Atom › AtomTitle › FormGroupTitleWithoutSubtitle › should be rendered', _renderComponent.default, _.default, _formGroupTitleWithoutSubtitle.default);
-(0, _ava.default)('Atom › AtomTitle › FormGroupTitle › should be rendered', _renderComponent.default, _.default, _formGroupTitle.default);
-(0, _ava.default)('Atom › AtomTitle › PageTitle › should be rendered', _renderComponent.default, _.default, _pageTitle.default);
+(0, _ava.default)('Atom › AtomTitle › Fixture › should be rendered', _renderComponent.default, _.default, _fixture.default);
 //# sourceMappingURL=fixtures.js.map

package/lib/atom/title/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/title/test/fixtures.js"],"names":["t","pass","AtomTitle","propTypes","value","key","not","undefined","renderComponentMacro","fixtureFormGroupTitleWithoutSubtitle","fixtureFormGroupTitle","fixturePageTitle"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gDAAL,EAAuDA,CAAC,IAAI;AAC1DA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAUC,SAAlB,EAA6B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3CL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0CAAyCF,GAAI,mEAAtE;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uEAAL,EAA8EG,wBAA9E,EAAoGN,SAApG,EAA+GO,sCAA/G;AACA,kBAAK,wDAAL,EAA+DD,wBAA/D,EAAqFN,SAArF,EAAgGQ,uBAAhG;AACA,kBAAK,mDAAL,EAA0DF,wBAA1D,EAAgFN,SAAhF,EAA2FS,kBAA3F","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTitle from '..';\nimport fixtureFormGroupTitleWithoutSubtitle from './fixtures/form-group-title-without-subtitle';\nimport fixtureFormGroupTitle from './fixtures/form-group-title';\nimport fixturePageTitle from './fixtures/page-title';\n\ntest('Atom › AtomTitle > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomTitle.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomTitle.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomTitle › FormGroupTitleWithoutSubtitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitleWithoutSubtitle);\ntest('Atom › AtomTitle › FormGroupTitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitle);\ntest('Atom › AtomTitle › PageTitle › should be rendered', renderComponentMacro, AtomTitle, fixturePageTitle);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/atom/title/test/fixtures.js"],"names":["t","pass","AtomTitle","propTypes","value","key","not","undefined","renderComponentMacro","fixtureFixture"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gDAAL,EAAuDA,CAAC,IAAI;AAC1DA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAUC,SAAlB,EAA6B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3CL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0CAAyCF,GAAI,mEAAtE;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iDAAL,EAAwDG,wBAAxD,EAA8EN,SAA9E,EAAyFO,gBAAzF","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTitle from '..';\nimport fixtureFixture from './fixtures/fixture';\n\ntest('Atom › AtomTitle > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomTitle.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomTitle.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomTitle › Fixture › should be rendered', renderComponentMacro, AtomTitle, fixtureFixture);\n"],"file":"fixtures.js"}

package/lib/molecule/banner/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _link = _interopRequireDefault(require("../../atom/link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Banner = props => {
+  const {
+    type,
+    message,
+    firstCTA,
+    firstCTALabel,
+    secondCTALabel,
+    secondCTA
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.banner, type === 'error' && _style.default.errorBanner)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": `${type}-banner-message`,
+    className: _style.default.message
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond, {
+    className: _style.default.icon
+  }), message), firstCTALabel ? /*#__PURE__*/_react.default.createElement(_link.default, {
+    "data-name": "first-banner-cta",
+    className: _style.default.button,
+    onClick: firstCTA
+  }, firstCTALabel) : null, firstCTALabel && secondCTALabel ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonsBar
+  }) : null, secondCTALabel ? /*#__PURE__*/_react.default.createElement(_link.default, {
+    "data-name": "second-banner-cta",
+    className: _style.default.button,
+    onClick: secondCTA
+  }, secondCTALabel) : null);
+};
+
+Banner.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['information', 'error']),
+  message: _propTypes.default.string.isRequired,
+  firstCTA: _propTypes.default.func,
+  firstCTALabel: _propTypes.default.string,
+  secondCTALabel: _propTypes.default.string,
+  secondCTA: _propTypes.default.func
+} : {};
+var _default = Banner;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","style","banner","errorBanner","icon","button","buttonsBar","propTypes","PropTypes","oneOf","string","isRequired","func"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA;AAAzD,MAAsEN,KAA5E;AACA,sBACE;AAAK,IAAA,SAAS,EAAE,yBAAWO,eAAMC,MAAjB,EAAyBP,IAAI,KAAK,OAAT,IAAoBM,eAAME,WAAnD;AAAhB,kBACE;AAAK,iBAAY,GAAER,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEM,eAAML;AAA3D,kBACE,6BAAC,0DAAD;AAAc,IAAA,SAAS,EAAEK,eAAMG;AAA/B,IADF,EAEGR,OAFH,CADF,EAKGE,aAAa,gBACZ,6BAAC,aAAD;AAAM,iBAAU,kBAAhB;AAAmC,IAAA,SAAS,EAAEG,eAAMI,MAApD;AAA4D,IAAA,OAAO,EAAER;AAArE,KACGC,aADH,CADY,GAIV,IATN,EAUGA,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEE,eAAMK;AAAtB,IAAlC,GAAyE,IAV5E,EAWGP,cAAc,gBACb,6BAAC,aAAD;AAAM,iBAAU,mBAAhB;AAAoC,IAAA,SAAS,EAAEE,eAAMI,MAArD;AAA6D,IAAA,OAAO,EAAEL;AAAtE,KACGD,cADH,CADa,GAIX,IAfN,CADF;AAmBD,CArBD;;AAuBAN,MAAM,CAACc,SAAP,2CAAmB;AACjBZ,EAAAA,IAAI,EAAEa,mBAAUC,KAAV,CAAgB,CAAC,aAAD,EAAgB,OAAhB,CAAhB,CADW;AAEjBb,EAAAA,OAAO,EAAEY,mBAAUE,MAAV,CAAiBC,UAFT;AAGjBd,EAAAA,QAAQ,EAAEW,mBAAUI,IAHH;AAIjBd,EAAAA,aAAa,EAAEU,mBAAUE,MAJR;AAKjBX,EAAAA,cAAc,EAAES,mBAAUE,MALT;AAMjBV,EAAAA,SAAS,EAAEQ,mBAAUI;AANJ,CAAnB;eASenB,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport style from './style.css';\n\nconst Banner = props => {\n  const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA} = props;\n  return (\n    <div className={classnames(style.banner, type === 'error' && style.errorBanner)}>\n      <div data-name={`${type}-banner-message`} className={style.message}>\n        <QuestionIcon className={style.icon} />\n        {message}\n      </div>\n      {firstCTALabel ? (\n        <Link data-name=\"first-banner-cta\" className={style.button} onClick={firstCTA}>\n          {firstCTALabel}\n        </Link>\n      ) : null}\n      {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n      {secondCTALabel ? (\n        <Link data-name=\"second-banner-cta\" className={style.button} onClick={secondCTA}>\n          {secondCTALabel}\n        </Link>\n      ) : null}\n    </div>\n  );\n};\n\nBanner.propTypes = {\n  type: PropTypes.oneOf(['information', 'error']),\n  message: PropTypes.string.isRequired,\n  firstCTA: PropTypes.func,\n  firstCTALabel: PropTypes.string,\n  secondCTALabel: PropTypes.string,\n  secondCTA: PropTypes.func\n};\n\nexport default Banner;\n"],"file":"index.js"}