@coorpacademy/components 10.13.2 → 10.13.3-alpha.4

package/lib/atom/drag-and-drop/index.js

@@ -5,8 +5,6 @@ exports.default = void 0;
 
 var _constant2 = _interopRequireDefault(require("lodash/fp/constant"));
 
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
-
 var _uniqueId2 = _interopRequireDefault(require("lodash/fp/uniqueId"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -21,9 +19,9 @@ var _loader = _interopRequireDefault(require("../loader"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _buttonLink = _interopRequireDefault(require("../button-link"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -52,10 +50,6 @@ class DragAndDrop extends _react.default.Component {
   }
 
   render() {
-    const {
-      skin
-    } = this.context;
-    const brandColor = (0, _get2.default)('common.brand', skin);
     const idBox = (0, _uniqueId2.default)('drop-box-');
     const {
       children = constantNull,
@@ -75,25 +69,36 @@ class DragAndDrop extends _react.default.Component {
 
     if (previewContent && previewContent.type === 'image') {
       previewView = /*#__PURE__*/_react.default.createElement("div", {
-        className: _style.default.previewView
+        className: _style.default.preview
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: previewContent.src
       }));
     } else if (previewContent && previewContent.type === 'video') {
       previewView = /*#__PURE__*/_react.default.createElement("div", {
-        className: _extends(_extends({}, _style.default.previewView), {}, {
-          width: '300px'
-        })
+        className: _style.default.preview
       }, /*#__PURE__*/_react.default.createElement("video", {
-        width: "100%",
         controls: true,
         src: previewContent.src,
         type: "video/*"
       }));
     } else if (loading) {
       previewView = /*#__PURE__*/_react.default.createElement("div", {
-        className: _style.default.loading
-      }, /*#__PURE__*/_react.default.createElement(_loader.default, null));
+        className: _style.default.loaderWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.loadingCancel
+      }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaLineStatusClose, {
+        "data-name": "reset-content-icon",
+        height: 16,
+        width: 16,
+        className: _style.default.closeIcon,
+        onClick: onReset
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.loader
+      }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+        theme: "coorpmanager"
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: _style.default.loaderText
+      }, "Uploading"));
     } else {
       previewView = /*#__PURE__*/_react.default.createElement("span", null, previewLabel);
     }
@@ -109,30 +114,30 @@ class DragAndDrop extends _react.default.Component {
       className: _style.default.closeIcon,
       onClick: onReset
     })) : null;
+    const buttonProps = {
+      label: uploadLabel,
+      'aria-label': 'aria button',
+      'data-name': 'default-button',
+      icon: {
+        position: 'left',
+        type: 'folders'
+      }
+    };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.wrapper,
       "data-name": "drag-and-drop-wrapper"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.title
-    }, title), /*#__PURE__*/_react.default.createElement("div", {
-      className: modified ? _style.default.modified : _style.default.previewWrapper
-    }, previewView), /*#__PURE__*/_react.default.createElement("div", {
+    }, modified || loading ? /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.modificationsContainer
+    }, previewView) : /*#__PURE__*/_react.default.createElement("div", {
       className: dragging ? _style.default.dragging : _style.default.inputWrapper,
       id: idBox
-    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidDataTransferDataUpload1, {
-      className: _style.default.arrow,
-      color: brandColor
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.uploadLabel
-    }, uploadLabel), children(this.handleDragStart, this.handleDragStop)), resetContent, description ?
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-danger
-    _react.default.createElement("div", {
-      className: _style.default.description,
-      dangerouslySetInnerHTML: {
-        __html: description
-      }
-    }) : null);
+    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidFilesBasicFileUpload2, {
+      className: _style.default.icon
+    }), description ? /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.description
+    }, description) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.title
+    }, title), dragging ? null : /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps), children(this.handleDragStart, this.handleDragStop)), resetContent);
   }
 
 }

package/lib/atom/drag-and-drop/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["constantNull","DragAndDrop","React","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","skin","context","brandColor","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","previewView","type","style","src","width","resetContent","resetUploadWrapper","resetSrcLabel","closeIcon","wrapper","previewWrapper","inputWrapper","arrow","__html","Provider","childContextTypes","propTypes","PropTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, get, constant} from 'lodash/fp';\nimport {\n  NovaSolidDataTransferDataUpload1 as UploadIcon,\n  NovaLineStatusClose as Close\n} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport Loader from '../loader';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    uploadLabel: PropTypes.string,\n    previewLabel: PropTypes.string,\n    previewContent: PropTypes.shape({\n      type: PropTypes.string,\n      src: PropTypes.string\n    }),\n    loading: PropTypes.bool,\n    modified: PropTypes.bool,\n    children: PropTypes.func,\n    onReset: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragging: false\n    };\n\n    this.handleDragStart = this.handleDragStart.bind(this);\n    this.handleDragStop = this.handleDragStop.bind(this);\n  }\n\n  handleDragStart() {\n    this.setState({\n      dragging: true\n    });\n  }\n\n  handleDragStop() {\n    this.setState({\n      dragging: false\n    });\n  }\n\n  render() {\n    const {skin} = this.context;\n    const brandColor = get('common.brand', skin);\n    const idBox = uniqueId('drop-box-');\n    const {\n      children = constantNull,\n      title,\n      description,\n      uploadLabel,\n      previewLabel = '',\n      previewContent,\n      loading = false,\n      modified = false,\n      onReset = null\n    } = this.props;\n    const {dragging} = this.state;\n\n    let previewView = null;\n\n    if (previewContent && previewContent.type === 'image') {\n      previewView = (\n        <div className={style.previewView}>\n          <img src={previewContent.src} />\n        </div>\n      );\n    } else if (previewContent && previewContent.type === 'video') {\n      previewView = (\n        <div className={{...style.previewView, width: '300px'}}>\n          <video width=\"100%\" controls src={previewContent.src} type=\"video/*\" />\n        </div>\n      );\n    } else if (loading) {\n      previewView = (\n        <div className={style.loading}>\n          <Loader />\n        </div>\n      );\n    } else {\n      previewView = <span>{previewLabel}</span>;\n    }\n\n    const resetContent =\n      previewContent && previewContent.src && onReset ? (\n        <div className={style.resetUploadWrapper}>\n          <div className={style.resetSrcLabel}>{previewContent.src}</div>\n          <Close\n            data-name=\"reset-content-icon\"\n            height={16}\n            width={16}\n            className={style.closeIcon}\n            onClick={onReset}\n          />\n        </div>\n      ) : null;\n\n    return (\n      <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n        <div className={style.title}>{title}</div>\n        <div className={modified ? style.modified : style.previewWrapper}>{previewView}</div>\n        <div className={dragging ? style.dragging : style.inputWrapper} id={idBox}>\n          <UploadIcon className={style.arrow} color={brandColor} />\n          <div className={style.uploadLabel}>{uploadLabel}</div>\n          {children(this.handleDragStart, this.handleDragStop)}\n        </div>\n        {resetContent}\n        {description ? (\n          // eslint-disable-next-line react/no-danger\n          <div className={style.description} dangerouslySetInnerHTML={{__html: description}} />\n        ) : null}\n      </div>\n    );\n  }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["constantNull","DragAndDrop","React","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","previewView","type","style","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","buttonProps","label","icon","position","wrapper","modificationsContainer","inputWrapper","skin","Provider","childContextTypes","propTypes","PropTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, get, constant} from 'lodash/fp';\nimport {\n  NovaLineStatusClose as Close,\n  NovaSolidFilesBasicFileUpload2 as FileUploadIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport Loader from '../loader';\nimport style from './style.css';\nimport Button from '../button-link';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    uploadLabel: PropTypes.string,\n    previewLabel: PropTypes.string,\n    previewContent: PropTypes.shape({\n      type: PropTypes.string,\n      src: PropTypes.string\n    }),\n    loading: PropTypes.bool,\n    modified: PropTypes.bool,\n    children: PropTypes.func,\n    onReset: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragging: false\n    };\n\n    this.handleDragStart = this.handleDragStart.bind(this);\n    this.handleDragStop = this.handleDragStop.bind(this);\n  }\n\n  handleDragStart() {\n    this.setState({\n      dragging: true\n    });\n  }\n\n  handleDragStop() {\n    this.setState({\n      dragging: false\n    });\n  }\n\n  render() {\n    const idBox = uniqueId('drop-box-');\n    const {\n      children = constantNull,\n      title,\n      description,\n      uploadLabel,\n      previewLabel = '',\n      previewContent,\n      loading = false,\n      modified = false,\n      onReset = null\n    } = this.props;\n    const {dragging} = this.state;\n\n    let previewView = null;\n\n    if (previewContent && previewContent.type === 'image') {\n      previewView = (\n        <div className={style.preview}>\n          <img src={previewContent.src} />\n        </div>\n      );\n    } else if (previewContent && previewContent.type === 'video') {\n      previewView = (\n        <div className={style.preview}>\n          <video controls src={previewContent.src} type=\"video/*\" />\n        </div>\n      );\n    } else if (loading) {\n      previewView = (\n        <div className={style.loaderWrapper}>\n          <div className={style.loadingCancel}>\n            <Close\n              data-name=\"reset-content-icon\"\n              height={16}\n              width={16}\n              className={style.closeIcon}\n              onClick={onReset}\n            />\n          </div>\n          <div className={style.loader}>\n            <Loader theme='coorpmanager'/>\n          </div>\n          <span className={style.loaderText}>Uploading</span>\n        </div>\n      );\n    } else {\n      previewView = <span>{previewLabel}</span>;\n    }\n\n    const resetContent =\n      previewContent && previewContent.src && onReset ? (\n        <div className={style.resetUploadWrapper}>\n          <div className={style.resetSrcLabel}>{previewContent.src}</div>\n          <Close\n            data-name=\"reset-content-icon\"\n            height={16}\n            width={16}\n            className={style.closeIcon}\n            onClick={onReset}\n          />\n        </div>\n      ) : null;\n\n      const buttonProps = {\n          label: uploadLabel,\n          'aria-label': 'aria button',\n          'data-name': 'default-button',\n          icon: {\n            position: 'left',\n            type: 'folders'\n          },\n      }\n\n    return (\n      <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n        {modified || loading ? \n          <div className={style.modificationsContainer}>{previewView}</div> \n          : \n          <div className={dragging ? style.dragging : style.inputWrapper} id={idBox}>\n            <FileUploadIcon className={style.icon} />\n            {description ? (\n            <div className={style.description}>{description}</div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {dragging ? null : <Button {...buttonProps} />}\n            {children(this.handleDragStart, this.handleDragStop)}\n          </div>\n        }\n        {resetContent}\n      </div>\n    );\n  }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}

package/lib/atom/drag-and-drop/style.css

@@ -6,145 +6,180 @@
 @value battle from colors;
 @value light from colors;
 @value xtraLightGrey from colors;
+@value cm_grey_300 from colors;
+@value cm_grey_700 from colors;
+@value cm_grey_50 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
 
 .wrapper {
-  width: 360px;
+  font-family: "Gilroy";
+  /* height: 100%;
+  width: 100%; */
+  height: 133px;
+  width: 202px;
+  border-radius: 3px;
 }
 
 .title {
-  font-family: "Gilroy";
-  font-size: 15px;
-  text-transform: none;
-  color: dark;
-  margin-bottom: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: cm_grey_700;
+  margin-bottom: 14px;
 }
 
 .description {
-  font-family: 'Gilroy';
-  font-size: 13px;
+  font-size: 10px;
   font-weight: 400;
-  font-style: italic;
-  color: dark;
-  margin: 10px 0;
-  text-align: justify;
-}
-
-.previewWrapper {
+  color: cm_grey_300;
+  margin-bottom: 8px;
+  text-align: center;
   width: 100%;
-  box-sizing: border-box;
-  border: 1px dashed medium;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modified {
-  composes: previewWrapper;
-  border: 2px solid battle;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.previewWrapper span {
-  font-family: 'Gilroy';
-  color: dark;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 100px;
+.modificationsContainer {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 3px;;
+  background: cm_grey_50;
 }
 
-.previewView {
-  padding: 10px;
+.preview {
+  padding: 8px;
   width: 100%;
-  height: 100px;
+  height: 100%;
   box-sizing: border-box;
   display: flex;
 }
 
-.previewView img {
-  max-width: 100%;
-  max-height: 100%;
-  margin: auto;
+.preview img, video {
+  width: 100%;
+  height: 100%;
+  border: 1px cm_grey_100 solid;
 }
 
 .inputWrapper {
+  background: cm_grey_50;
   width: 100%;
-  height: 70px;
+  height: 100%;
   box-sizing: border-box;
-  border: 1px dashed medium;
-  border-radius: 3px;
+  border: 1px dashed cm_grey_200;
+  border-radius: 7px;
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 14px 8px 8px 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resetUploadWrapper {
   width: 100%;
-  height: 30px;
+  height: 20px;
   box-sizing: border-box;
-  background-color: xtraLightGrey;
-  border: solid 1px light;
+  background-color: cm_grey_50;
   border-radius: 3px;
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* fonts */
-  font-family: Gilroy;
-  font-size: 13px;
+  margin-top: 16px;
+  padding: 4px 8px;
+  font-size: 10px;
   font-weight: 400;
-  margin-top: 15px;
 }
 
 .resetSrcLabel {
-  font-family: Gilroy;
-  color: dark;
-  max-width: 220px;
+  color: cm_grey_700;
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
-  margin-left: 9px;
 }
 
 .closeIcon {
-  margin-right: 9px;
   cursor: pointer;
-  color: dark;
-}
-
-.closeIcon:hover {
-  color: black;
+  color: cm_grey_400;
+  padding: 6px;
 }
 
 .dragging {
   composes: inputWrapper;
-  border: 3px dashed brand;
+  border: 1px solid cm_grey_200;
+  background: cm_grey_100;
 }
 
-.arrow {
-  width: 34px;
-  height: 34px;
-  margin-right: 10px;
-  transition: all 0.2s cubic-bezier(0.47, 1.04, 0.46, 2.16);
+.dragging .description .icon .title {
+  font-size: 8px;
 }
 
-.dragging .arrow {
-  transform: scale(1.2);
+.dragging .title {
+  font-size: 10px;
+}
+
+.dragging .icon {
+  transform: scale(0.85);
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  transition: all 0.2s cubic-bezier(0.47, 1.04, 0.46, 2.16);
+  margin-bottom: 4px;
 }
 
 .uploadLabel {
-  font-family: 'Gilroy';
-  font-size: 18px;
-  text-transform: uppercase;
+  font-size: 14px;
   font-weight: 700;
-  color: dark;
+  color: cm_grey_700;
 }
 
-.loading {
-  min-height: 100px;
-  border: none;
+.loaderWrapper {
   position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
+
+.loader {
+  margin-bottom: 8px;
+  height: 14px;
+  width: 14px;
+}
+
+.loaderText {
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.loadingCancel {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.folderIcon {
+  margin-right: 8px;
+}
+
+.wrapper:hover .loadingCancel {
+  display: block;
+}

package/lib/atom/drag-and-drop/test/fixtures/default.js

@@ -4,9 +4,9 @@ exports.__esModule = true;
 exports.default = void 0;
 var _default = {
   props: {
-    title: 'Drag & Drop',
-    description: 'Drag and drop component',
-    uploadLabel: 'Upload',
+    title: 'Drag & drop here',
+    description: 'JPG or PNG, smaller than 5mb',
+    uploadLabel: 'Browse',
     previewLabel: 'File Preview'
   }
 };

package/lib/atom/drag-and-drop/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/default.js"],"names":["props","title","description","uploadLabel","previewLabel"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,aADF;AAELC,IAAAA,WAAW,EAAE,yBAFR;AAGLC,IAAAA,WAAW,EAAE,QAHR;AAILC,IAAAA,YAAY,EAAE;AAJT;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Drag & Drop',\n    description: 'Drag and drop component',\n    uploadLabel: 'Upload',\n    previewLabel: 'File Preview'\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/default.js"],"names":["props","title","description","uploadLabel","previewLabel"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,kBADF;AAELC,IAAAA,WAAW,EAAE,8BAFR;AAGLC,IAAAA,WAAW,EAAE,QAHR;AAILC,IAAAA,YAAY,EAAE;AAJT;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Drag & drop here',\n    description: 'JPG or PNG, smaller than 5mb',\n    uploadLabel: 'Browse',\n    previewLabel: 'File Preview'\n  }\n};\n"],"file":"default.js"}

package/lib/atom/drag-and-drop/test/fixtures/loading.js

@@ -11,7 +11,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var _default = {
   props: _extends(_extends({}, _default2.default.props), {}, {
-    loading: true
+    loading: true,
+    modified: false
   })
 };
 exports.default = _default;

package/lib/atom/drag-and-drop/test/fixtures/loading.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/loading.js"],"names":["props","Default","loading"],"mappings":";;;;;AAAA;;;;;;eAEe;AACbA,EAAAA,KAAK,wBACAC,kBAAQD,KADR;AAEHE,IAAAA,OAAO,EAAE;AAFN;AADQ,C","sourcesContent":["import Default from './default';\n\nexport default {\n  props: {\n    ...Default.props,\n    loading: true\n  }\n};\n"],"file":"loading.js"}
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/loading.js"],"names":["props","Default","loading","modified"],"mappings":";;;;;AAAA;;;;;;eAEe;AACbA,EAAAA,KAAK,wBACAC,kBAAQD,KADR;AAEHE,IAAAA,OAAO,EAAE,IAFN;AAGHC,IAAAA,QAAQ,EAAE;AAHP;AADQ,C","sourcesContent":["import Default from './default';\n\nexport default {\n  props: {\n    ...Default.props,\n    loading: true,\n    modified: false\n  }\n};\n"],"file":"loading.js"}

package/lib/atom/drag-and-drop/test/fixtures/with-children.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = {
   props: {
+    modified: true,
     previewContent: {
       type: 'image',
       src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'

package/lib/atom/drag-and-drop/test/fixtures/with-children.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-children.js"],"names":["props","previewContent","type","src","title","displayName","uploadLabel","children","onDragStart","onDragStop","style","input"],"mappings":";;;;;AAAA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS,KADX;AAKLC,IAAAA,KAAK,EAAE,aALF;AAMLC,IAAAA,WAAW,EAAE,cANR;AAOLC,IAAAA,WAAW,EAAE;AAPR,GADM;AAUb;AACAC,EAAAA,QAAQ,EAAE,CAACC,WAAD,EAAcC,UAAd,kBACR;AACE,IAAA,SAAS,EAAEC,eAAMC,KADnB;AAEE,IAAA,GAAG,EAAC,GAFN;AAGE,IAAA,IAAI,EAAC,MAHP;AAIE,IAAA,MAAM,EAAC,SAJT;AAKE,IAAA,QAAQ,EAAE,MAAM,IALlB;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,MAAM,EAAEC,UAPV;AAQE,IAAA,WAAW,EAAEA;AARf;AAZW,C","sourcesContent":["import React from 'react';\nimport style from '../../../image-upload/style.css';\n\nexport default {\n  props: {\n    previewContent: {\n      type: 'image',\n      src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'\n    },\n    title: 'Desktop (*)',\n    displayName: 'Upload image',\n    uploadLabel: 'Upload'\n  },\n  // eslint-disable-next-line react/display-name\n  children: (onDragStart, onDragStop) => (\n    <input\n      className={style.input}\n      key=\"1\"\n      type=\"file\"\n      accept=\"image*/\"\n      onChange={() => true}\n      onDragEnter={onDragStart}\n      onDrop={onDragStop}\n      onDragLeave={onDragStop}\n    />\n  )\n};\n"],"file":"with-children.js"}
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-children.js"],"names":["props","modified","previewContent","type","src","title","displayName","uploadLabel","children","onDragStart","onDragStop","style","input"],"mappings":";;;;;AAAA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,IADL;AAELC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS,KAFX;AAMLC,IAAAA,KAAK,EAAE,aANF;AAOLC,IAAAA,WAAW,EAAE,cAPR;AAQLC,IAAAA,WAAW,EAAE;AARR,GADM;AAWb;AACAC,EAAAA,QAAQ,EAAE,CAACC,WAAD,EAAcC,UAAd,kBACR;AACE,IAAA,SAAS,EAAEC,eAAMC,KADnB;AAEE,IAAA,GAAG,EAAC,GAFN;AAGE,IAAA,IAAI,EAAC,MAHP;AAIE,IAAA,MAAM,EAAC,SAJT;AAKE,IAAA,QAAQ,EAAE,MAAM,IALlB;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,MAAM,EAAEC,UAPV;AAQE,IAAA,WAAW,EAAEA;AARf;AAbW,C","sourcesContent":["import React from 'react';\nimport style from '../../../image-upload/style.css';\n\nexport default {\n  props: {\n    modified: true,\n    previewContent: {\n      type: 'image',\n      src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'\n    },\n    title: 'Desktop (*)',\n    displayName: 'Upload image',\n    uploadLabel: 'Upload'\n  },\n  // eslint-disable-next-line react/display-name\n  children: (onDragStart, onDragStop) => (\n    <input\n      className={style.input}\n      key=\"1\"\n      type=\"file\"\n      accept=\"image*/\"\n      onChange={() => true}\n      onDragEnter={onDragStart}\n      onDrop={onDragStop}\n      onDragLeave={onDragStop}\n    />\n  )\n};\n"],"file":"with-children.js"}

package/lib/atom/drag-and-drop/test/fixtures/with-image.js

@@ -4,13 +4,14 @@ exports.__esModule = true;
 exports.default = void 0;
 var _default = {
   props: {
+    modified: true,
     title: 'Drag & Drop With Image',
     description: 'Drag and drop component with an image',
     uploadLabel: 'Upload Image(s)',
     previewLabel: 'File Preview',
     previewContent: {
       type: 'image',
-      src: 'https://static.coorpacademy.com/content/up/raw/logo_mobile-1491560713685.svg'
+      src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'
     }
   }
 };

package/lib/atom/drag-and-drop/test/fixtures/with-image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-image.js"],"names":["props","title","description","uploadLabel","previewLabel","previewContent","type","src"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,wBADF;AAELC,IAAAA,WAAW,EAAE,uCAFR;AAGLC,IAAAA,WAAW,EAAE,iBAHR;AAILC,IAAAA,YAAY,EAAE,cAJT;AAKLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS;AALX;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Drag & Drop With Image',\n    description: 'Drag and drop component with an image',\n    uploadLabel: 'Upload Image(s)',\n    previewLabel: 'File Preview',\n    previewContent: {\n      type: 'image',\n      src: 'https://static.coorpacademy.com/content/up/raw/logo_mobile-1491560713685.svg'\n    }\n  }\n};\n"],"file":"with-image.js"}
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-image.js"],"names":["props","modified","title","description","uploadLabel","previewLabel","previewContent","type","src"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,IADL;AAELC,IAAAA,KAAK,EAAE,wBAFF;AAGLC,IAAAA,WAAW,EAAE,uCAHR;AAILC,IAAAA,WAAW,EAAE,iBAJR;AAKLC,IAAAA,YAAY,EAAE,cALT;AAMLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS;AANX;AADM,C","sourcesContent":["export default {\n  props: {\n    modified: true,\n    title: 'Drag & Drop With Image',\n    description: 'Drag and drop component with an image',\n    uploadLabel: 'Upload Image(s)',\n    previewLabel: 'File Preview',\n    previewContent: {\n      type: 'image',\n      src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'\n    }\n  }\n};\n"],"file":"with-image.js"}

package/lib/atom/drag-and-drop/test/fixtures/with-video.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _default = {
   props: {
+    modified: true,
     title: 'Drag & Drop',
     description: 'Drag and drop component with a video',
     uploadLabel: 'Upload',
@@ -11,7 +12,8 @@ var _default = {
     previewContent: {
       type: 'video',
       src: 'https://www.w3schools.com/tags/movie.mp4'
-    }
+    },
+    onReset: () => console.log('reset')
   }
 };
 exports.default = _default;

package/lib/atom/drag-and-drop/test/fixtures/with-video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-video.js"],"names":["props","title","description","uploadLabel","previewLabel","previewContent","type","src"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,aADF;AAELC,IAAAA,WAAW,EAAE,sCAFR;AAGLC,IAAAA,WAAW,EAAE,QAHR;AAILC,IAAAA,YAAY,EAAE,cAJT;AAKLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS;AALX;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Drag & Drop',\n    description: 'Drag and drop component with a video',\n    uploadLabel: 'Upload',\n    previewLabel: 'File Preview',\n    previewContent: {\n      type: 'video',\n      src: 'https://www.w3schools.com/tags/movie.mp4'\n    }\n  }\n};\n"],"file":"with-video.js"}
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-video.js"],"names":["props","modified","title","description","uploadLabel","previewLabel","previewContent","type","src","onReset","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,IADL;AAELC,IAAAA,KAAK,EAAE,aAFF;AAGLC,IAAAA,WAAW,EAAE,sCAHR;AAILC,IAAAA,WAAW,EAAE,QAJR;AAKLC,IAAAA,YAAY,EAAE,cALT;AAMLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS,KANX;AAULC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAVV;AADM,C","sourcesContent":["export default {\n  props: {\n    modified: true,\n    title: 'Drag & Drop',\n    description: 'Drag and drop component with a video',\n    uploadLabel: 'Upload',\n    previewLabel: 'File Preview',\n    previewContent: {\n      type: 'video',\n      src: 'https://www.w3schools.com/tags/movie.mp4'\n    },\n    onReset: () => console.log('reset')\n  }\n};\n"],"file":"with-video.js"}

package/lib/atom/drag-and-drop/test/fixtures/withLongDescription.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _default2 = _interopRequireDefault(require("./default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  props: _extends(_extends({}, _default2.default.props), {}, {
+    description: 'Max file size: 5MO. Recommended format: SVG (if your client uses a majority of IE, use PNG format instead). Recommended aspect ratio : horizontal 2:1 (e.g. 500px x 250px). Maximum recommended aspect ratio 1:1 (e.g. 500x500, which means that it should not be taller than its width).'
+  })
+};
+exports.default = _default;
+//# sourceMappingURL=withLongDescription.js.map

package/lib/atom/drag-and-drop/test/fixtures/withLongDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/withLongDescription.js"],"names":["props","description"],"mappings":";;;;;AACA;;;;;;eAEe;AACXA,EAAAA,KAAK,wBACEA,kBAAMA,KADR;AAEDC,IAAAA,WAAW,EAAE;AAFZ;AADM,C","sourcesContent":["\nimport props from './default';\n\nexport default {\n    props: {\n        ...props.props,\n        description: 'Max file size: 5MO. Recommended format: SVG (if your client uses a majority of IE, use PNG format instead). Recommended aspect ratio : horizontal 2:1 (e.g. 500px x 250px). Maximum recommended aspect ratio 1:1 (e.g. 500x500, which means that it should not be taller than its width).'\n    }\n}\n"],"file":"withLongDescription.js"}

package/lib/atom/drag-and-drop/test/fixtures.js

@@ -20,6 +20,8 @@ var _withImage = _interopRequireDefault(require("./fixtures/with-image"));
 
 var _withVideo = _interopRequireDefault(require("./fixtures/with-video"));
 
+var _withLongDescription = _interopRequireDefault(require("./fixtures/withLongDescription"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _ava.default)('Atom › AtomDragAndDrop > should have valid propTypes', t => {
@@ -34,4 +36,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _ava.default)('Atom › AtomDragAndDrop › WithImageReset › should be rendered', _renderComponent.default, _.default, _withImageReset.default);
 (0, _ava.default)('Atom › AtomDragAndDrop › WithImage › should be rendered', _renderComponent.default, _.default, _withImage.default);
 (0, _ava.default)('Atom › AtomDragAndDrop › WithVideo › should be rendered', _renderComponent.default, _.default, _withVideo.default);
+(0, _ava.default)('Atom › AtomDragAndDrop › WithLongDescription › should be rendered', _renderComponent.default, _.default, _withLongDescription.default);
 //# sourceMappingURL=fixtures.js.map

package/lib/atom/drag-and-drop/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/drag-and-drop/test/fixtures.js"],"names":["t","pass","AtomDragAndDrop","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureLoading","fixtureWithChildren","fixtureWithImageReset","fixtureWithImage","fixtureWithVideo"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,sDAAL,EAA6DA,CAAC,IAAI;AAChEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAgBC,SAAxB,EAAmC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,gDAA+CF,GAAI,mEAA5E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uDAAL,EAA8DG,wBAA9D,EAAoFN,SAApF,EAAqGO,gBAArG;AACA,kBAAK,uDAAL,EAA8DD,wBAA9D,EAAoFN,SAApF,EAAqGQ,gBAArG;AACA,kBAAK,4DAAL,EAAmEF,wBAAnE,EAAyFN,SAAzF,EAA0GS,qBAA1G;AACA,kBAAK,8DAAL,EAAqEH,wBAArE,EAA2FN,SAA3F,EAA4GU,uBAA5G;AACA,kBAAK,yDAAL,EAAgEJ,wBAAhE,EAAsFN,SAAtF,EAAuGW,kBAAvG;AACA,kBAAK,yDAAL,EAAgEL,wBAAhE,EAAsFN,SAAtF,EAAuGY,kBAAvG","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomDragAndDrop from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureLoading from './fixtures/loading';\nimport fixtureWithChildren from './fixtures/with-children';\nimport fixtureWithImageReset from './fixtures/with-image-reset';\nimport fixtureWithImage from './fixtures/with-image';\nimport fixtureWithVideo from './fixtures/with-video';\n\ntest('Atom › AtomDragAndDrop > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomDragAndDrop.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomDragAndDrop.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomDragAndDrop › Default › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDefault);\ntest('Atom › AtomDragAndDrop › Loading › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureLoading);\ntest('Atom › AtomDragAndDrop › WithChildren › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithChildren);\ntest('Atom › AtomDragAndDrop › WithImageReset › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImageReset);\ntest('Atom › AtomDragAndDrop › WithImage › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImage);\ntest('Atom › AtomDragAndDrop › WithVideo › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithVideo);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/atom/drag-and-drop/test/fixtures.js"],"names":["t","pass","AtomDragAndDrop","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureLoading","fixtureWithChildren","fixtureWithImageReset","fixtureWithImage","fixtureWithVideo","fixtureWithLongDescription"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,sDAAL,EAA6DA,CAAC,IAAI;AAChEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAgBC,SAAxB,EAAmC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,gDAA+CF,GAAI,mEAA5E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uDAAL,EAA8DG,wBAA9D,EAAoFN,SAApF,EAAqGO,gBAArG;AACA,kBAAK,uDAAL,EAA8DD,wBAA9D,EAAoFN,SAApF,EAAqGQ,gBAArG;AACA,kBAAK,4DAAL,EAAmEF,wBAAnE,EAAyFN,SAAzF,EAA0GS,qBAA1G;AACA,kBAAK,8DAAL,EAAqEH,wBAArE,EAA2FN,SAA3F,EAA4GU,uBAA5G;AACA,kBAAK,yDAAL,EAAgEJ,wBAAhE,EAAsFN,SAAtF,EAAuGW,kBAAvG;AACA,kBAAK,yDAAL,EAAgEL,wBAAhE,EAAsFN,SAAtF,EAAuGY,kBAAvG;AACA,kBAAK,mEAAL,EAA0EN,wBAA1E,EAAgGN,SAAhG,EAAiHa,4BAAjH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomDragAndDrop from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureLoading from './fixtures/loading';\nimport fixtureWithChildren from './fixtures/with-children';\nimport fixtureWithImageReset from './fixtures/with-image-reset';\nimport fixtureWithImage from './fixtures/with-image';\nimport fixtureWithVideo from './fixtures/with-video';\nimport fixtureWithLongDescription from './fixtures/withLongDescription';\n\ntest('Atom › AtomDragAndDrop > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomDragAndDrop.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomDragAndDrop.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomDragAndDrop › Default › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDefault);\ntest('Atom › AtomDragAndDrop › Loading › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureLoading);\ntest('Atom › AtomDragAndDrop › WithChildren › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithChildren);\ntest('Atom › AtomDragAndDrop › WithImageReset › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImageReset);\ntest('Atom › AtomDragAndDrop › WithImage › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImage);\ntest('Atom › AtomDragAndDrop › WithVideo › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithVideo);\ntest('Atom › AtomDragAndDrop › WithLongDescription › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithLongDescription);\n"],"file":"fixtures.js"}

package/lib/atom/loader/style.css

@@ -32,7 +32,11 @@
 }
 
 .cmLoaderContainer {
-  composes: _container;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .dots {
@@ -73,8 +77,8 @@
 }
 
 .icon {
-  width: 40px;
-  height: 40px;
+  width: 100%;
+  height: 100%;
   position: absolute;
 }