@coorpacademy/components 11.19.1-alpha.4 → 11.19.1

package/es/atom/button-link/index.js

@@ -31,9 +31,9 @@ const getButtonContent = (icon, label) => {
     className: style.buttonContent
   }, position === 'left' ? /*#__PURE__*/React.createElement(Icon, {
     className: style.icon
-  }) : null, /*#__PURE__*/React.createElement("span", {
+  }) : null, label ? /*#__PURE__*/React.createElement("span", {
     className: style.label
-  }, label), position === 'right' ? /*#__PURE__*/React.createElement(Icon, {
+  }, label) : null, position === 'right' ? /*#__PURE__*/React.createElement(Icon, {
     className: style.icon
   }) : null);
 };

package/es/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","classnames","Link","ICONS","propTypes","style","getButtonContent","icon","label","type","position","Icon","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","handleOnKeyDown","event","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (icon?: IconType, label?: string) => {\n  const {type, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? <Icon className={style.icon} /> : null}\n      <span className={style.label}>{label}</span>\n      {position === 'right' ? <Icon className={style.icon} /> : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    label,\n    disabled,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const contentView = getButtonContent(icon, label);\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      tabIndex={0}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","classnames","Link","ICONS","propTypes","style","getButtonContent","icon","label","type","position","Icon","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","handleOnKeyDown","event","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (icon?: IconType, label?: string) => {\n  const {type, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? <Icon className={style.icon} /> : null}\n      {label ? <span className={style.label}>{label}</span> : null}\n      {position === 'right' ? <Icon className={style.icon} /> : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    label,\n    disabled,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const contentView = getButtonContent(icon, label);\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      tabIndex={0}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}

package/es/atom/button-link/style.css

@@ -21,6 +21,7 @@
   align-items: center;
   cursor: pointer;
   border: none;
+  padding: 0px 16px;
   /* prevents text selection when dragging
   the mouse over the button */
   user-select: none;

package/es/atom/drag-and-drop/index.d.ts

@@ -20,6 +20,7 @@ declare class DragAndDrop extends React.Component<any, any, any> {
         errorButtonLabel: PropTypes.Requireable<string>;
         pdfButtonLabel: PropTypes.Requireable<string>;
         pdfButtonAriaLabel: PropTypes.Requireable<string>;
+        multiple: PropTypes.Requireable<boolean>;
     };
     constructor(props: any);
     state: {

package/es/atom/drag-and-drop/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/drag-and-drop/index.js"],"names":[],"mappings":";AAiBA;IACE;;;;;;;;;;;;;;;;;;;;MAoBE;IAEF,wBASC;IANC;;MAEC;IAMH,wBAIC;IAED,uBAIC;IAED,sBA0LC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/drag-and-drop/index.js"],"names":[],"mappings":";AAiBA;IACE;;;;;;;;;;;;;;;;;;;;;MAqBE;IAEF,wBASC;IANC;;MAEC;IAMH,wBAIC;IAED,uBAIC;IAED,sBA4MC;CACF"}

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

@@ -55,12 +55,19 @@ class DragAndDrop extends React.Component {
       errorButtonLabel = '',
       disabled = false,
       pdfButtonLabel,
-      pdfButtonAriaLabel
+      pdfButtonAriaLabel,
+      multiple
     } = this.props;
     const {
       dragging
     } = this.state;
     let previewView = null;
+    const customButtonStyle = {
+      width: 'auto',
+      maxWidth: '150px',
+      padding: '12px 24px',
+      boxSizing: 'border-box'
+    };
 
     if (previewContent && previewContent.type === 'image') {
       previewView = /*#__PURE__*/React.createElement("div", {
@@ -94,7 +101,8 @@ class DragAndDrop extends React.Component {
         icon: {
           position: 'left',
           type: 'pdf'
-        }
+        },
+        customStyle: customButtonStyle
       }));
     } else if (previewContent && previewContent.type === 'xlsx') {
       previewView = /*#__PURE__*/React.createElement("div", {
@@ -104,6 +112,14 @@ class DragAndDrop extends React.Component {
       }, /*#__PURE__*/React.createElement(FileLinesIcon, {
         className: style.iconFile
       })));
+    } else if (previewContent && previewContent.type === 'csv') {
+      previewView = /*#__PURE__*/React.createElement("div", {
+        className: style.preview
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.multiplePreview
+      }, /*#__PURE__*/React.createElement(FileLinesIcon, {
+        className: style.iconFile
+      })));
     } else if (loading) {
       previewView = /*#__PURE__*/React.createElement("div", {
         className: style.loaderWrapper
@@ -126,7 +142,7 @@ class DragAndDrop extends React.Component {
       previewView = /*#__PURE__*/React.createElement("span", null, previewLabel);
     }
 
-    const resetContent = previewContent && previewContent.src ? /*#__PURE__*/React.createElement("div", {
+    const resetContent = previewContent && previewContent.src && !multiple ? /*#__PURE__*/React.createElement("div", {
       className: classnames(style.resetUploadWrapper, disabled && style.disabled)
     }, /*#__PURE__*/React.createElement("div", {
       className: style.resetSrcLabel
@@ -146,7 +162,8 @@ class DragAndDrop extends React.Component {
         icon: {
           position: 'left',
           type: 'folders'
-        }
+        },
+        customStyle: customButtonStyle
       };
 
       if (dragging) {
@@ -162,7 +179,7 @@ class DragAndDrop extends React.Component {
     };
 
     const button = buildButton(dragging, error);
-    const previewContainer = getClassState(style.previewContainer, style.modifiedPreviewContainer, null, modified, error);
+    const previewContainer = getClassState(multiple ? style.previewContainerMultiple : style.previewContainer, style.modifiedPreviewContainer, null, modified, error);
     const inputWrapper = getClassState(style.inputWrapper, style.modifiedInputWrapper, style.errorInputWrapper, modified, error);
 
     const buildContent = () => {
@@ -223,7 +240,8 @@ DragAndDrop.propTypes = process.env.NODE_ENV !== "production" ? {
   buttonAriaLabel: PropTypes.string,
   errorButtonLabel: PropTypes.string,
   pdfButtonLabel: PropTypes.string,
-  pdfButtonAriaLabel: PropTypes.string
+  pdfButtonAriaLabel: PropTypes.string,
+  multiple: PropTypes.bool
 } : {};
 export default DragAndDrop;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","NovaSolidFilesBasicFileLines","FileLinesIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","pdfButtonLabel","pdfButtonAriaLabel","previewView","type","preview","src","previewPdf","previewLabelPdf","href","target","download","position","previewXlsxContainer","previewXlsx","iconFile","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","buildContent","infosContainer","iconError","dragAndDropLabel","content","wrapper","errorMessage","propTypes","string","shape","bool","func"],"sources":["../../../src/atom/drag-and-drop/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n  NovaSolidStatusClose as Close,\n  NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n  NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon,\n  NovaSolidFilesBasicFileLines as FileLinesIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\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      label: PropTypes.string\n    }),\n    loading: PropTypes.bool,\n    modified: PropTypes.bool,\n    disabled: PropTypes.bool,\n    children: PropTypes.func,\n    onReset: PropTypes.func,\n    error: PropTypes.string,\n    buttonAriaLabel: PropTypes.string,\n    errorButtonLabel: PropTypes.string,\n    pdfButtonLabel: PropTypes.string,\n    pdfButtonAriaLabel: PropTypes.string\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      error = '',\n      buttonAriaLabel = '',\n      errorButtonLabel = '',\n      disabled = false,\n      pdfButtonLabel,\n      pdfButtonAriaLabel\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 (previewContent && previewContent.type === 'pdf') {\n      previewView = (\n        <div className={style.previewPdf}>\n          <p className={style.previewLabelPdf}>{previewLabel}</p>\n          <Button\n            type=\"secondary\"\n            link={{href: previewContent.src, target: '_blank', download: false}}\n            label={pdfButtonLabel}\n            aria-label={pdfButtonAriaLabel}\n            data-name=\"default-button-pdf\"\n            icon={{\n              position: 'left',\n              type: 'pdf'\n            }}\n          />\n        </div>\n      );\n    } else if (previewContent && previewContent.type === 'xlsx') {\n      previewView = (\n        <div className={style.previewXlsxContainer}>\n          <div className={style.previewXlsx}>\n            <FileLinesIcon className={style.iconFile} />\n          </div>\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={12}\n              width={12}\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 ? (\n        <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n          <div className={style.resetSrcLabel}>\n            {previewContent.label ? previewContent.label : previewContent.src}\n          </div>\n          {onReset ? (\n            <Close\n              data-name=\"reset-content-icon\"\n              height={12}\n              width={12}\n              className={style.closeIcon}\n              onClick={onReset}\n            />\n          ) : null}\n        </div>\n      ) : null;\n\n    const buildButton = () => {\n      const defaultButtonProps = {\n        label: uploadLabel,\n        'aria-label': buttonAriaLabel,\n        'data-name': 'default-button',\n        icon: {\n          position: 'left',\n          type: 'folders'\n        }\n      };\n      if (dragging) {\n        return null;\n      } else if (error) {\n        return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n      } else {\n        return <Button {...defaultButtonProps} />;\n      }\n    };\n\n    const button = buildButton(dragging, error);\n\n    const previewContainer = getClassState(\n      style.previewContainer,\n      style.modifiedPreviewContainer,\n      null,\n      modified,\n      error\n    );\n    const inputWrapper = getClassState(\n      style.inputWrapper,\n      style.modifiedInputWrapper,\n      style.errorInputWrapper,\n      modified,\n      error\n    );\n\n    const buildContent = () => {\n      if (loading) {\n        return previewView;\n      } else if (!isEmpty(previewContent)) {\n        return (\n          <div className={classnames(previewContainer, disabled && style.disabled)}>\n            {previewView}\n          </div>\n        );\n      } else {\n        return (\n          <div\n            className={classnames(\n              dragging ? style.dragging : inputWrapper,\n              disabled && style.disabled\n            )}\n            id={idBox}\n            data-name=\"drag-and-drop-box\"\n          >\n            <div className={style.infosContainer}>\n              {error ? (\n                <FileUploadBlockedIcon className={style.iconError} />\n              ) : (\n                <FileUploadIcon className={style.icon} />\n              )}\n              {description ? <div className={style.description}>{description}</div> : null}\n              {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n            </div>\n            {button}\n            <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n          </div>\n        );\n      }\n    };\n\n    const content = buildContent();\n\n    return (\n      <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n        <div className={style.title}>{title}</div>\n        {content}\n        {error ? (\n          <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n            {error}\n          </span>\n        ) : (\n          resetContent\n        )}\n      </div>\n    );\n  }\n}\n\nexport default DragAndDrop;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SACEC,oBAAoB,IAAIC,KAD1B,EAEEC,8BAA8B,IAAIC,cAFpC,EAGEC,6BAA6B,IAAIC,qBAHnC,EAIEC,4BAA4B,IAAIC,aAJlC,QAKO,0BALP;AAMA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,MAAP,MAAmB,gBAAnB;AACA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAG,UAAS,IAAT,CAArB;;AAEA,MAAMC,WAAN,SAA0BhB,KAAK,CAACiB,SAAhC,CAA0C;EAuBxCC,WAAW,CAACC,KAAD,EAAQ;IACjB,MAAMA,KAAN;IAEA,KAAKC,KAAL,GAAa;MACXC,QAAQ,EAAE;IADC,CAAb;IAIA,KAAKC,eAAL,GAAuB,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B,CAAvB;IACA,KAAKC,cAAL,GAAsB,KAAKA,cAAL,CAAoBD,IAApB,CAAyB,IAAzB,CAAtB;EACD;;EAEDD,eAAe,GAAG;IAChB,KAAKG,QAAL,CAAc;MACZJ,QAAQ,EAAE;IADE,CAAd;EAGD;;EAEDG,cAAc,GAAG;IACf,KAAKC,QAAL,CAAc;MACZJ,QAAQ,EAAE;IADE,CAAd;EAGD;;EAEDK,MAAM,GAAG;IACP,MAAMC,KAAK,GAAG,UAAS,WAAT,CAAd;;IACA,MAAM;MACJC,QAAQ,GAAGb,YADP;MAEJc,KAFI;MAGJC,WAHI;MAIJC,WAJI;MAKJC,YAAY,GAAG,EALX;MAMJC,cANI;MAOJC,OAAO,GAAG,KAPN;MAQJC,QAAQ,GAAG,KARP;MASJC,OAAO,GAAG,IATN;MAUJC,KAAK,GAAG,EAVJ;MAWJC,eAAe,GAAG,EAXd;MAYJC,gBAAgB,GAAG,EAZf;MAaJC,QAAQ,GAAG,KAbP;MAcJC,cAdI;MAeJC;IAfI,IAgBF,KAAKvB,KAhBT;IAiBA,MAAM;MAACE;IAAD,IAAa,KAAKD,KAAxB;IAEA,IAAIuB,WAAW,GAAG,IAAlB;;IAEA,IAAIV,cAAc,IAAIA,cAAc,CAACW,IAAf,KAAwB,OAA9C,EAAuD;MACrDD,WAAW,gBACT;QAAK,SAAS,EAAE7B,KAAK,CAAC+B;MAAtB,gBACE;QAAK,GAAG,EAAEZ,cAAc,CAACa;MAAzB,EADF,CADF;IAKD,CAND,MAMO,IAAIb,cAAc,IAAIA,cAAc,CAACW,IAAf,KAAwB,OAA9C,EAAuD;MAC5DD,WAAW,gBACT;QAAK,SAAS,EAAE7B,KAAK,CAAC+B;MAAtB,gBACE;QAAO,QAAQ,MAAf;QAAgB,GAAG,EAAEZ,cAAc,CAACa,GAApC;QAAyC,IAAI,EAAC;MAA9C,EADF,CADF;IAKD,CANM,MAMA,IAAIb,cAAc,IAAIA,cAAc,CAACW,IAAf,KAAwB,KAA9C,EAAqD;MAC1DD,WAAW,gBACT;QAAK,SAAS,EAAE7B,KAAK,CAACiC;MAAtB,gBACE;QAAG,SAAS,EAAEjC,KAAK,CAACkC;MAApB,GAAsChB,YAAtC,CADF,eAEE,oBAAC,MAAD;QACE,IAAI,EAAC,WADP;QAEE,IAAI,EAAE;UAACiB,IAAI,EAAEhB,cAAc,CAACa,GAAtB;UAA2BI,MAAM,EAAE,QAAnC;UAA6CC,QAAQ,EAAE;QAAvD,CAFR;QAGE,KAAK,EAAEV,cAHT;QAIE,cAAYC,kBAJd;QAKE,aAAU,oBALZ;QAME,IAAI,EAAE;UACJU,QAAQ,EAAE,MADN;UAEJR,IAAI,EAAE;QAFF;MANR,EAFF,CADF;IAgBD,CAjBM,MAiBA,IAAIX,cAAc,IAAIA,cAAc,CAACW,IAAf,KAAwB,MAA9C,EAAsD;MAC3DD,WAAW,gBACT;QAAK,SAAS,EAAE7B,KAAK,CAACuC;MAAtB,gBACE;QAAK,SAAS,EAAEvC,KAAK,CAACwC;MAAtB,gBACE,oBAAC,aAAD;QAAe,SAAS,EAAExC,KAAK,CAACyC;MAAhC,EADF,CADF,CADF;IAOD,CARM,MAQA,IAAIrB,OAAJ,EAAa;MAClBS,WAAW,gBACT;QAAK,SAAS,EAAE7B,KAAK,CAAC0C;MAAtB,gBACE;QAAK,SAAS,EAAE1C,KAAK,CAAC2C;MAAtB,gBACE,oBAAC,KAAD;QACE,aAAU,oBADZ;QAEE,MAAM,EAAE,EAFV;QAGE,KAAK,EAAE,EAHT;QAIE,SAAS,EAAE3C,KAAK,CAAC4C,SAJnB;QAKE,OAAO,EAAEtB;MALX,EADF,CADF,eAUE;QAAK,SAAS,EAAEtB,KAAK,CAAC6C;MAAtB,gBACE,oBAAC,MAAD;QAAQ,KAAK,EAAC;MAAd,EADF,CAVF,eAaE;QAAM,SAAS,EAAE7C,KAAK,CAAC8C;MAAvB,eAbF,CADF;IAiBD,CAlBM,MAkBA;MACLjB,WAAW,gBAAG,kCAAOX,YAAP,CAAd;IACD;;IAED,MAAM6B,YAAY,GAChB5B,cAAc,IAAIA,cAAc,CAACa,GAAjC,gBACE;MAAK,SAAS,EAAEpC,UAAU,CAACI,KAAK,CAACgD,kBAAP,EAA2BtB,QAAQ,IAAI1B,KAAK,CAAC0B,QAA7C;IAA1B,gBACE;MAAK,SAAS,EAAE1B,KAAK,CAACiD;IAAtB,GACG9B,cAAc,CAAC+B,KAAf,GAAuB/B,cAAc,CAAC+B,KAAtC,GAA8C/B,cAAc,CAACa,GADhE,CADF,EAIGV,OAAO,gBACN,oBAAC,KAAD;MACE,aAAU,oBADZ;MAEE,MAAM,EAAE,EAFV;MAGE,KAAK,EAAE,EAHT;MAIE,SAAS,EAAEtB,KAAK,CAAC4C,SAJnB;MAKE,OAAO,EAAEtB;IALX,EADM,GAQJ,IAZN,CADF,GAeI,IAhBN;;IAkBA,MAAM6B,WAAW,GAAG,MAAM;MACxB,MAAMC,kBAAkB,GAAG;QACzBF,KAAK,EAAEjC,WADkB;QAEzB,cAAcO,eAFW;QAGzB,aAAa,gBAHY;QAIzB6B,IAAI,EAAE;UACJf,QAAQ,EAAE,MADN;UAEJR,IAAI,EAAE;QAFF;MAJmB,CAA3B;;MASA,IAAIvB,QAAJ,EAAc;QACZ,OAAO,IAAP;MACD,CAFD,MAEO,IAAIgB,KAAJ,EAAW;QAChB,oBAAO,oBAAC,MAAD,eAAY6B,kBAAZ;UAAgC,KAAK,EAAE3B,gBAAvC;UAAyD,IAAI,EAAE;QAA/D,GAAP;MACD,CAFM,MAEA;QACL,oBAAO,oBAAC,MAAD,EAAY2B,kBAAZ,CAAP;MACD;IACF,CAjBD;;IAmBA,MAAME,MAAM,GAAGH,WAAW,CAAC5C,QAAD,EAAWgB,KAAX,CAA1B;IAEA,MAAMgC,gBAAgB,GAAGxD,aAAa,CACpCC,KAAK,CAACuD,gBAD8B,EAEpCvD,KAAK,CAACwD,wBAF8B,EAGpC,IAHoC,EAIpCnC,QAJoC,EAKpCE,KALoC,CAAtC;IAOA,MAAMkC,YAAY,GAAG1D,aAAa,CAChCC,KAAK,CAACyD,YAD0B,EAEhCzD,KAAK,CAAC0D,oBAF0B,EAGhC1D,KAAK,CAAC2D,iBAH0B,EAIhCtC,QAJgC,EAKhCE,KALgC,CAAlC;;IAQA,MAAMqC,YAAY,GAAG,MAAM;MACzB,IAAIxC,OAAJ,EAAa;QACX,OAAOS,WAAP;MACD,CAFD,MAEO,IAAI,CAAC,SAAQV,cAAR,CAAL,EAA8B;QACnC,oBACE;UAAK,SAAS,EAAEvB,UAAU,CAAC2D,gBAAD,EAAmB7B,QAAQ,IAAI1B,KAAK,CAAC0B,QAArC;QAA1B,GACGG,WADH,CADF;MAKD,CANM,MAMA;QACL,oBACE;UACE,SAAS,EAAEjC,UAAU,CACnBW,QAAQ,GAAGP,KAAK,CAACO,QAAT,GAAoBkD,YADT,EAEnB/B,QAAQ,IAAI1B,KAAK,CAAC0B,QAFC,CADvB;UAKE,EAAE,EAAEb,KALN;UAME,aAAU;QANZ,gBAQE;UAAK,SAAS,EAAEb,KAAK,CAAC6D;QAAtB,GACGtC,KAAK,gBACJ,oBAAC,qBAAD;UAAuB,SAAS,EAAEvB,KAAK,CAAC8D;QAAxC,EADI,gBAGJ,oBAAC,cAAD;UAAgB,SAAS,EAAE9D,KAAK,CAACqD;QAAjC,EAJJ,EAMGrC,WAAW,gBAAG;UAAK,SAAS,EAAEhB,KAAK,CAACgB;QAAtB,GAAoCA,WAApC,CAAH,GAA4D,IAN1E,EAOGO,KAAK,GAAG,IAAH,gBAAU;UAAK,SAAS,EAAEvB,KAAK,CAAC+D;QAAtB,GAAyC,kBAAzC,CAPlB,CARF,EAiBGT,MAjBH,eAkBE,iCAAMxC,QAAQ,CAAC,KAAKN,eAAN,EAAuB,KAAKE,cAA5B,CAAd,CAlBF,CADF;MAsBD;IACF,CAjCD;;IAmCA,MAAMsD,OAAO,GAAGJ,YAAY,EAA5B;IAEA,oBACE;MAAK,SAAS,EAAE5D,KAAK,CAACiE,OAAtB;MAA+B,aAAU;IAAzC,gBACE;MAAK,SAAS,EAAEjE,KAAK,CAACe;IAAtB,GAA8BA,KAA9B,CADF,EAEGiD,OAFH,EAGGzC,KAAK,gBACJ;MAAM,SAAS,EAAE3B,UAAU,CAACI,KAAK,CAACkE,YAAP,EAAqBxC,QAAQ,IAAI1B,KAAK,CAAC0B,QAAvC;IAA3B,GACGH,KADH,CADI,GAKJwB,YARJ,CADF;EAaD;;AAxOuC;;AAApC7C,W,CACGiE,S,2CAAY;EACjBpD,KAAK,EAAE5B,SAAS,CAACiF,MADA;EAEjBpD,WAAW,EAAE7B,SAAS,CAACiF,MAFN;EAGjBnD,WAAW,EAAE9B,SAAS,CAACiF,MAHN;EAIjBlD,YAAY,EAAE/B,SAAS,CAACiF,MAJP;EAKjBjD,cAAc,EAAEhC,SAAS,CAACkF,KAAV,CAAgB;IAC9BvC,IAAI,EAAE3C,SAAS,CAACiF,MADc;IAE9BpC,GAAG,EAAE7C,SAAS,CAACiF,MAFe;IAG9BlB,KAAK,EAAE/D,SAAS,CAACiF;EAHa,CAAhB,CALC;EAUjBhD,OAAO,EAAEjC,SAAS,CAACmF,IAVF;EAWjBjD,QAAQ,EAAElC,SAAS,CAACmF,IAXH;EAYjB5C,QAAQ,EAAEvC,SAAS,CAACmF,IAZH;EAajBxD,QAAQ,EAAE3B,SAAS,CAACoF,IAbH;EAcjBjD,OAAO,EAAEnC,SAAS,CAACoF,IAdF;EAejBhD,KAAK,EAAEpC,SAAS,CAACiF,MAfA;EAgBjB5C,eAAe,EAAErC,SAAS,CAACiF,MAhBV;EAiBjB3C,gBAAgB,EAAEtC,SAAS,CAACiF,MAjBX;EAkBjBzC,cAAc,EAAExC,SAAS,CAACiF,MAlBT;EAmBjBxC,kBAAkB,EAAEzC,SAAS,CAACiF;AAnBb,C;AA0OrB,eAAelE,WAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","NovaSolidFilesBasicFileLines","FileLinesIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","pdfButtonLabel","pdfButtonAriaLabel","multiple","previewView","customButtonStyle","width","maxWidth","padding","boxSizing","type","preview","src","previewPdf","previewLabelPdf","href","target","download","position","previewXlsxContainer","previewXlsx","iconFile","multiplePreview","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","customStyle","button","previewContainer","previewContainerMultiple","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","buildContent","infosContainer","iconError","dragAndDropLabel","content","wrapper","errorMessage","propTypes","string","shape","bool","func"],"sources":["../../../src/atom/drag-and-drop/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n  NovaSolidStatusClose as Close,\n  NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n  NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon,\n  NovaSolidFilesBasicFileLines as FileLinesIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\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      label: PropTypes.string\n    }),\n    loading: PropTypes.bool,\n    modified: PropTypes.bool,\n    disabled: PropTypes.bool,\n    children: PropTypes.func,\n    onReset: PropTypes.func,\n    error: PropTypes.string,\n    buttonAriaLabel: PropTypes.string,\n    errorButtonLabel: PropTypes.string,\n    pdfButtonLabel: PropTypes.string,\n    pdfButtonAriaLabel: PropTypes.string,\n    multiple: PropTypes.bool\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      error = '',\n      buttonAriaLabel = '',\n      errorButtonLabel = '',\n      disabled = false,\n      pdfButtonLabel,\n      pdfButtonAriaLabel,\n      multiple\n    } = this.props;\n    const {dragging} = this.state;\n\n    let previewView = null;\n\n    const customButtonStyle = {\n      width: 'auto',\n      maxWidth: '150px',\n      padding: '12px 24px',\n      boxSizing: 'border-box'\n    };\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 (previewContent && previewContent.type === 'pdf') {\n      previewView = (\n        <div className={style.previewPdf}>\n          <p className={style.previewLabelPdf}>{previewLabel}</p>\n          <Button\n            type=\"secondary\"\n            link={{href: previewContent.src, target: '_blank', download: false}}\n            label={pdfButtonLabel}\n            aria-label={pdfButtonAriaLabel}\n            data-name=\"default-button-pdf\"\n            icon={{\n              position: 'left',\n              type: 'pdf'\n            }}\n            customStyle={customButtonStyle}\n          />\n        </div>\n      );\n    } else if (previewContent && previewContent.type === 'xlsx') {\n      previewView = (\n        <div className={style.previewXlsxContainer}>\n          <div className={style.previewXlsx}>\n            <FileLinesIcon className={style.iconFile} />\n          </div>\n        </div>\n      );\n    } else if (previewContent && previewContent.type === 'csv') {\n      previewView = (\n        <div className={style.preview}>\n          <div className={style.multiplePreview}>\n            <FileLinesIcon className={style.iconFile} />\n          </div>\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={12}\n              width={12}\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 && !multiple ? (\n        <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n          <div className={style.resetSrcLabel}>\n            {previewContent.label ? previewContent.label : previewContent.src}\n          </div>\n          {onReset ? (\n            <Close\n              data-name=\"reset-content-icon\"\n              height={12}\n              width={12}\n              className={style.closeIcon}\n              onClick={onReset}\n            />\n          ) : null}\n        </div>\n      ) : null;\n\n    const buildButton = () => {\n      const defaultButtonProps = {\n        label: uploadLabel,\n        'aria-label': buttonAriaLabel,\n        'data-name': 'default-button',\n        icon: {\n          position: 'left',\n          type: 'folders'\n        },\n        customStyle: customButtonStyle\n      };\n      if (dragging) {\n        return null;\n      } else if (error) {\n        return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n      } else {\n        return <Button {...defaultButtonProps} />;\n      }\n    };\n\n    const button = buildButton(dragging, error);\n\n    const previewContainer = getClassState(\n      multiple ? style.previewContainerMultiple : style.previewContainer,\n      style.modifiedPreviewContainer,\n      null,\n      modified,\n      error\n    );\n    const inputWrapper = getClassState(\n      style.inputWrapper,\n      style.modifiedInputWrapper,\n      style.errorInputWrapper,\n      modified,\n      error\n    );\n\n    const buildContent = () => {\n      if (loading) {\n        return previewView;\n      } else if (!isEmpty(previewContent)) {\n        return (\n          <div className={classnames(previewContainer, disabled && style.disabled)}>\n            {previewView}\n          </div>\n        );\n      } else {\n        return (\n          <div\n            className={classnames(\n              dragging ? style.dragging : inputWrapper,\n              disabled && style.disabled\n            )}\n            id={idBox}\n            data-name=\"drag-and-drop-box\"\n          >\n            <div className={style.infosContainer}>\n              {error ? (\n                <FileUploadBlockedIcon className={style.iconError} />\n              ) : (\n                <FileUploadIcon className={style.icon} />\n              )}\n              {description ? <div className={style.description}>{description}</div> : null}\n              {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n            </div>\n            {button}\n            <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n          </div>\n        );\n      }\n    };\n\n    const content = buildContent();\n\n    return (\n      <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n        <div className={style.title}>{title}</div>\n        {content}\n        {error ? (\n          <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n            {error}\n          </span>\n        ) : (\n          resetContent\n        )}\n      </div>\n    );\n  }\n}\n\nexport default DragAndDrop;\n"],"mappings":"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"}

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

@@ -125,18 +125,18 @@ video {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 8px 8px 8px;
+  padding: 16px;
   overflow: hidden;
 }
 
 .inputWrapper:before {
   content: "";
   position: absolute;
-  border: 10px dashed cm_grey_200;
-  top: -8px;
-  bottom: -8px;
-  left: -8px;
-  right: -8px;
+  border: 7px dashed cm_grey_200;
+  top: -3px;
+  bottom: -3px;
+  left: -4px;
+  right: -4px;
 }
 
 .modifiedInputWrapper {
@@ -304,4 +304,19 @@ video {
   height: 25%;
   width: 25%;
   color: cm_grey_300;
-}
+}
+
+.previewContainerMultiple {
+  composes: previewContainer;
+  height: 100%;
+}
+
+.multiplePreview {
+  background-color: cm_grey_100;
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/atom/{image-upload → input-file-draggable}/index.d.ts

@@ -1,5 +1,5 @@
-export default ImageUpload;
-declare function ImageUpload({ title, description, previewLabel, previewContent, uploadLabel, loading, modified, disabled, onChange, onReset, name, labelLink, labelButtonLink, hrefLink, imageTypes, error, buttonAriaLabel, errorButtonLabel, pdfButtonLabel, pdfButtonAriaLabel }: {
+export default InputFileDraggable;
+declare function InputFileDraggable({ title, description, previewLabel, previewContent, uploadLabel, loading, modified, disabled, onChange, onReset, name, labelLink, labelButtonLink, hrefLink, filesTypes, error, buttonAriaLabel, errorButtonLabel, pdfButtonLabel, pdfButtonAriaLabel, filesNumber, multiple, required, onClick }: {
     title: any;
     description: any;
     previewLabel: any;
@@ -14,19 +14,23 @@ declare function ImageUpload({ title, description, previewLabel, previewContent,
     labelLink: any;
     labelButtonLink: any;
     hrefLink: any;
-    imageTypes?: string | undefined;
+    filesTypes?: string | undefined;
     error?: string | undefined;
     buttonAriaLabel: any;
     errorButtonLabel: any;
     pdfButtonLabel: any;
     pdfButtonAriaLabel: any;
+    filesNumber?: number | undefined;
+    multiple?: boolean | undefined;
+    required?: boolean | undefined;
+    onClick: any;
 }): JSX.Element;
-declare namespace ImageUpload {
+declare namespace InputFileDraggable {
     const propTypes: {
         name: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onReset: PropTypes.Requireable<(...args: any[]) => any>;
-        imageTypes: (props: any, propName: any, componentName: any) => Error | null;
+        filesTypes: (props: any, propName: any, componentName: any) => Error | null;
         error: PropTypes.Requireable<string>;
         buttonAriaLabel: PropTypes.Requireable<string>;
         errorButtonLabel: PropTypes.Requireable<string>;
@@ -47,6 +51,7 @@ declare namespace ImageUpload {
         children: PropTypes.Requireable<(...args: any[]) => any>;
         pdfButtonLabel: PropTypes.Requireable<string>;
         pdfButtonAriaLabel: PropTypes.Requireable<string>;
+        multiple: PropTypes.Requireable<boolean>;
     };
 }
 import PropTypes from "prop-types";

package/es/atom/input-file-draggable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-file-draggable/index.js"],"names":[],"mappings":";AAYA;;;;;;;;;;;;;;;;;;;;;;;;;gBA4GC"}

package/es/atom/{image-upload → input-file-draggable}/index.js

@@ -4,12 +4,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { NovaSolidFilesBasicFileLines as FileLinesIcon, NovaCompositionCoorpacademyEye as EyeIcon } from '@coorpacademy/nova-icons';
 import DragAndDrop from '../drag-and-drop';
 import Link from '../button-link';
-import { ImagePropType } from '../../util/proptypes';
+import { FilesPropType } from '../../util/proptypes';
 import style from './style.css';
 
-const ImageUpload = ({
+const InputFileDraggable = ({
   title,
   description,
   previewLabel,
@@ -24,12 +25,16 @@ const ImageUpload = ({
   labelLink,
   labelButtonLink,
   hrefLink,
-  imageTypes = 'image/*',
+  filesTypes = '',
   error = '',
   buttonAriaLabel,
   errorButtonLabel,
   pdfButtonLabel,
-  pdfButtonAriaLabel
+  pdfButtonAriaLabel,
+  filesNumber = 0,
+  multiple = false,
+  required = false,
+  onClick
 }) => {
   const handleReset = useCallback(e => {
     if (_isNil(onReset)) return;
@@ -40,6 +45,10 @@ const ImageUpload = ({
     width: '40px',
     color: '#FF541F'
   };
+  const onClick_ = useCallback(e => {
+    e.preventDefault();
+    return onClick(e);
+  }, [onClick]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragAndDrop, {
     title: title,
     description: description,
@@ -54,17 +63,20 @@ const ImageUpload = ({
     buttonAriaLabel: buttonAriaLabel,
     errorButtonLabel: errorButtonLabel,
     pdfButtonLabel: pdfButtonLabel,
-    pdfButtonAriaLabel: pdfButtonAriaLabel
+    pdfButtonAriaLabel: pdfButtonAriaLabel,
+    multiple: multiple
   }, (onDragStart, onDragStop) => /*#__PURE__*/React.createElement("input", {
     type: "file",
     name: name,
-    accept: imageTypes,
+    accept: filesTypes,
     disabled: loading || disabled,
     className: style.input,
     onChange: onChange,
     onDragEnter: onDragStart,
     onDrop: onDragStop,
-    onDragLeave: onDragStop
+    onDragLeave: onDragStop,
+    multiple: multiple,
+    required: required
   })), labelLink && hrefLink ? /*#__PURE__*/React.createElement("div", {
     className: style.templateLink
   }, labelLink, /*#__PURE__*/React.createElement(Link, {
@@ -75,19 +87,30 @@ const ImageUpload = ({
       download: true
     },
     label: labelButtonLink
-  })) : null);
+  })) : null, multiple && filesNumber > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.multipleFilesContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.filesNumber
+  }, /*#__PURE__*/React.createElement(FileLinesIcon, {
+    className: style.icon
+  }), /*#__PURE__*/React.createElement("div", null, filesNumber, " files")), /*#__PURE__*/React.createElement("div", {
+    className: style.seeDetailsButton,
+    onClick: onClick_
+  }, /*#__PURE__*/React.createElement(EyeIcon, {
+    className: style.seeIcon
+  }), /*#__PURE__*/React.createElement("div", null, "See details"))) : null);
 };
 
-ImageUpload.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, DragAndDrop.propTypes, {
+InputFileDraggable.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, DragAndDrop.propTypes, {
   name: PropTypes.string,
   onChange: PropTypes.func,
   onReset: PropTypes.func,
-  imageTypes: ImagePropType,
+  filesTypes: FilesPropType,
   error: PropTypes.string,
   buttonAriaLabel: PropTypes.string,
   errorButtonLabel: PropTypes.string,
   labelLink: PropTypes.string,
   hrefLink: PropTypes.string
 }) : {};
-export default ImageUpload;
+export default InputFileDraggable;
 //# sourceMappingURL=index.js.map

package/es/atom/input-file-draggable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","NovaSolidFilesBasicFileLines","FileLinesIcon","NovaCompositionCoorpacademyEye","EyeIcon","DragAndDrop","Link","FilesPropType","style","InputFileDraggable","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","filesTypes","error","buttonAriaLabel","errorButtonLabel","pdfButtonLabel","pdfButtonAriaLabel","filesNumber","multiple","required","onClick","handleReset","e","preventDefault","linkCustomStyle","width","color","onClick_","onDragStart","onDragStop","input","templateLink","href","download","multipleFilesContainer","icon","seeDetailsButton","seeIcon","propTypes","string","func"],"sources":["../../../src/atom/input-file-draggable/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNil} from 'lodash/fp';\nimport {\n  NovaSolidFilesBasicFileLines as FileLinesIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon\n} from '@coorpacademy/nova-icons';\nimport DragAndDrop from '../drag-and-drop';\nimport Link from '../button-link';\nimport {FilesPropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst InputFileDraggable = ({\n  title,\n  description,\n  previewLabel,\n  previewContent,\n  uploadLabel,\n  loading,\n  modified,\n  disabled = false,\n  onChange,\n  onReset = null,\n  name,\n  labelLink,\n  labelButtonLink,\n  hrefLink,\n  filesTypes = '',\n  error = '',\n  buttonAriaLabel,\n  errorButtonLabel,\n  pdfButtonLabel,\n  pdfButtonAriaLabel,\n  filesNumber = 0,\n  multiple = false,\n  required = false,\n  onClick\n}) => {\n  const handleReset = useCallback(\n    e => {\n      if (isNil(onReset)) return;\n      e.preventDefault();\n      return onReset(e);\n    },\n    [onReset]\n  );\n\n  const linkCustomStyle = {\n    width: '40px',\n    color: '#FF541F'\n  };\n\n  const onClick_ = useCallback(\n    e => {\n      e.preventDefault();\n      return onClick(e);\n    },\n    [onClick]\n  );\n\n  return (\n    <>\n      <DragAndDrop\n        title={title}\n        description={description}\n        previewLabel={previewLabel}\n        previewContent={previewContent}\n        uploadLabel={uploadLabel}\n        loading={loading}\n        modified={modified}\n        onReset={handleReset}\n        error={error}\n        disabled={disabled}\n        buttonAriaLabel={buttonAriaLabel}\n        errorButtonLabel={errorButtonLabel}\n        pdfButtonLabel={pdfButtonLabel}\n        pdfButtonAriaLabel={pdfButtonAriaLabel}\n        multiple={multiple}\n      >\n        {(onDragStart, onDragStop) => (\n          <input\n            type=\"file\"\n            name={name}\n            accept={filesTypes}\n            disabled={loading || disabled}\n            className={style.input}\n            onChange={onChange}\n            onDragEnter={onDragStart}\n            onDrop={onDragStop}\n            onDragLeave={onDragStop}\n            multiple={multiple}\n            required={required}\n          />\n        )}\n      </DragAndDrop>\n      {labelLink && hrefLink ? (\n        <div className={style.templateLink}>\n          {labelLink}\n          <Link\n            type=\"text\"\n            customStyle={linkCustomStyle}\n            link={{href: hrefLink, download: true}}\n            label={labelButtonLink}\n          />\n        </div>\n      ) : null}\n      {multiple && filesNumber > 0 ? (\n        <div className={style.multipleFilesContainer}>\n          <div className={style.filesNumber}>\n            <FileLinesIcon className={style.icon} />\n            <div>{filesNumber} files</div>\n          </div>\n          <div className={style.seeDetailsButton} onClick={onClick_}>\n            <EyeIcon className={style.seeIcon} />\n            <div>See details</div>\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n};\n\nInputFileDraggable.propTypes = {\n  ...DragAndDrop.propTypes,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  onReset: PropTypes.func,\n  filesTypes: FilesPropType,\n  error: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  errorButtonLabel: PropTypes.string,\n  labelLink: PropTypes.string,\n  hrefLink: PropTypes.string\n};\n\nexport default InputFileDraggable;\n"],"mappings":"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"}

package/es/atom/input-file-draggable/style.css

@@ -0,0 +1,81 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_50 from colors;
+@value cm_grey_300 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.input {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.templateLink {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  margin-top: 16px;
+  background-color: cm_grey_50;
+  padding: 16px 0 16px 0;
+  border-radius: 10px;
+  font-family: "Gilroy";
+  font-size: 14px;
+}
+
+/* ---------- MULTIPLE FILES ---------- */
+.multipleFilesContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-align: center;
+  margin-top: 16px;
+  background-color: cm_grey_50;
+  padding: 16px 24px 16px 24px;
+  border-radius: 10px;
+  font-family: "Gilroy";
+  font-size: 14px;
+}
+
+.multipleFilesInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: "Gilroy";
+}
+
+.filesNumber {
+  composes: multipleFilesInfo;
+  font-weight: 500;
+  color: cm_grey_700;
+}
+
+.seeDetailsButton {
+  composes: multipleFilesInfo;
+  font-weight: 700;
+  color: cm_grey_500;
+  cursor: pointer;
+}
+
+.icon {
+  min-width: 14px;
+  min-height: 14px;
+  max-width: 30px;
+  max-height: 30px;
+  height: 20%;
+  width: 20%;
+  transition: all 0.2s cubic-bezier(0.47, 1.04, 0.46, 2.16);
+  color: cm_grey_300;
+}
+
+.seeIcon {
+  composes: icon;
+  color: cm_grey_500;
+}

package/es/atom/title/style.css

@@ -58,7 +58,7 @@
 
 .smallSubtitleFormGroup{
     composes: subtitleFormGroup;
-    max-width: 455px;
+    max-width: 450px
 }
 
 .smallSubtitleFormGroupWithoutMargin{

package/es/atom/video-upload/index.d.ts

@@ -33,6 +33,7 @@ declare namespace VideoUpload {
         errorButtonLabel: PropTypes.Requireable<string>;
         pdfButtonLabel: PropTypes.Requireable<string>;
         pdfButtonAriaLabel: PropTypes.Requireable<string>;
+        multiple: PropTypes.Requireable<boolean>;
     };
 }
 import PropTypes from "prop-types";

package/es/molecule/brand-form-group/index.js

@@ -21,7 +21,7 @@ import Button from '../../atom/button';
 import InputTextarea from '../../atom/input-textarea';
 import InputHTML from '../../atom/input-html';
 import InputDoublestep from '../../atom/input-doublestep';
-import ImageUpload from '../../atom/image-upload';
+import InputFileDraggable from '../../atom/input-file-draggable';
 import SetupSlider from '../setup-slider';
 import SetupSections from '../setup-sections';
 import Title from '../../atom/title';
@@ -77,12 +77,12 @@ const buildInput = field => {
     case 'image':
       return /*#__PURE__*/React.createElement("div", {
         className: style.imageUploadContainer
-      }, /*#__PURE__*/React.createElement(ImageUpload, field));
+      }, /*#__PURE__*/React.createElement(InputFileDraggable, field));
 
     case 'bulkUpload':
       return /*#__PURE__*/React.createElement("div", {
         className: style.bulkUploadContainer
-      }, /*#__PURE__*/React.createElement(ImageUpload, field));
+      }, /*#__PURE__*/React.createElement(InputFileDraggable, field));
 
     case 'slider':
       return /*#__PURE__*/React.createElement(SetupSlider, field);
@@ -197,9 +197,9 @@ BrandFormGroup.propTypes = process.env.NODE_ENV !== "production" ? {
     size: PropTypes.oneOf(_keys(inputContainerStyle))
   })), PropTypes.shape(_extends({}, InputCheckbox.propTypes, {
     type: PropTypes.oneOf(['checkbox'])
-  })), PropTypes.shape(_extends({}, ImageUpload.propTypes, {
+  })), PropTypes.shape(_extends({}, InputFileDraggable.propTypes, {
     type: PropTypes.oneOf(['image'])
-  })), PropTypes.shape(_extends({}, ImageUpload.propTypes, {
+  })), PropTypes.shape(_extends({}, InputFileDraggable.propTypes, {
     type: PropTypes.oneOf(['bulkImage'])
   })), PropTypes.shape(_extends({}, SetupSlider.propTypes, {
     type: PropTypes.oneOf(['slider'])