@coorpacademy/components 11.19.1-alpha.13 → 11.19.1-alpha.4

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

@@ -1,81 +0,0 @@
-@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/lib/atom/input-file-draggable/index.d.ts.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["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","useCallback","e","preventDefault","linkCustomStyle","width","color","onClick_","onDragStart","onDragStop","style","input","templateLink","href","download","multipleFilesContainer","icon","seeDetailsButton","seeIcon","propTypes","DragAndDrop","PropTypes","string","func","FilesPropType"],"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/lib/atom/input-file-draggable/style.css

@@ -1,81 +0,0 @@
-@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;
-}