@dxc-technology/halstack-react 0.0.0-652d679 → 0.0.0-65fe4ab

package/toggle-group/types.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type OptionCommons = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+};
+declare type OptionIcon = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label?: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon: string | SVG;
+};
+declare type OptionLabel = OptionCommons & {
+    /**
+     * String with the option display value.
+     */
+    label: string;
+    /**
+     * Element used as the icon. Icon and label can't be used at same time.
+     */
+    icon?: string | SVG;
+};
+declare type Option = OptionIcon | OptionLabel;
+declare type CommonProps = {
+    /**
+     * Text to be placed above the component.
+     */
+    label?: string;
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option[];
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+declare type SingleSelectionToggle = CommonProps & {
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple?: false;
+    /**
+     * The key of the selected value. If the component allows multiple selection, value must be an array.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number;
+    /**
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number) => void;
+};
+declare type MultipleSelectionToggle = CommonProps & {
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple: true;
+    /**
+     * An array with the keys of the selected values.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number[];
+    /**
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number[]) => void;
+};
+declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+export default Props;

package/toggle-group/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/{dist/upload → upload}/Upload.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,8 +21,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-require("../common/OpenSans.css");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DragAndDropArea = _interopRequireDefault(require("./dragAndDropArea/DragAndDropArea"));
@@ -33,19 +31,17 @@ var _Transactions = _interopRequireDefault(require("./transactions/Transactions"
 
 var _variables = require("../common/variables.js");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  max-width: 100%;\n  height: 400px;\n  box-shadow: 0px 3px 6px #00000029;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcUpload = function DxcUpload(_ref) {
   var callbackUpload = _ref.callbackUpload,
-      margin = _ref.margin;
+      margin = _ref.margin,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -157,20 +153,24 @@ var DxcUpload = function DxcUpload(_ref) {
 
   var filesToUpload = getFilesToUpload();
   var transactionFiles = getTransactionsFiles();
-  return _react["default"].createElement(DXCUpload, {
+  return /*#__PURE__*/_react["default"].createElement(DXCUpload, {
     margin: margin
-  }, transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_Transactions["default"], {
+  }, transactionFiles && transactionFiles.length !== 0 && /*#__PURE__*/_react["default"].createElement(_Transactions["default"], {
+    tabIndexValue: tabIndex,
     transactions: transactionFiles
-  }), filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length === 0 && _react["default"].createElement(_DragAndDropArea["default"], {
+  }), filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length === 0 && /*#__PURE__*/_react["default"].createElement(_DragAndDropArea["default"], {
     dashed: false,
-    addFile: onDragHandler
-  }) || filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_DragAndDropArea["default"], {
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
+  }) || filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length !== 0 && /*#__PURE__*/_react["default"].createElement(_DragAndDropArea["default"], {
     dashed: true,
-    addFile: onDragHandler
-  }), filesToUpload && filesToUpload.length !== 0 && _react["default"].createElement(_FilesToUpload["default"], {
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
+  }), filesToUpload && filesToUpload.length !== 0 && /*#__PURE__*/_react["default"].createElement(_FilesToUpload["default"], {
     filesToUpload: filesToUpload,
     addFile: onDragHandler,
-    onUpload: onUploadHandler
+    onUpload: onUploadHandler,
+    tabIndexValue: tabIndex
   }));
 };
 
@@ -181,10 +181,11 @@ DxcUpload.propTypes = {
     bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  tabIndex: _propTypes["default"].number
 };
 
-var DXCUpload = _styledComponents["default"].div(_templateObject(), function (props) {
+var DXCUpload = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100%;\n  height: 400px;\n  box-shadow: 0px 3px 6px #00000029;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";

package/upload/buttons-upload/ButtonsUpload.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Button = _interopRequireDefault(require("../../button/Button"));
+
+var _Icons = require("./Icons");
+
+var _useTheme = _interopRequireDefault(require("../../useTheme"));
+
+var _BackgroundColorContext = require("../../BackgroundColorContext");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
+  var addFile = _ref.addFile,
+      onUpload = _ref.onUpload;
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var selectFile = function selectFile(e) {
+    var filesObject = e.target.files;
+
+    if (filesObject && filesObject.length > 0) {
+      var filesArray = Object.keys(filesObject).map(function (key) {
+        return filesObject[key];
+      });
+      addFile(filesArray);
+    }
+  };
+
+  var handleClick = function handleClick() {
+    document.getElementById("chooseFiles").click();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.upload
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
+  }, /*#__PURE__*/_react["default"].createElement(DXCButtonsUpload, null, /*#__PURE__*/_react["default"].createElement(DragAndDropLabel, null, /*#__PURE__*/_react["default"].createElement(DragAndDropIconContainer, null, _Icons.dragAndDropIcon), "Drag and Drop area"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    margin: {
+      right: "small"
+    },
+    mode: "text",
+    label: "CHOOSE FILES",
+    onClick: handleClick
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "chooseFiles",
+    type: "file",
+    multiple: true,
+    onChange: selectFile,
+    style: {
+      display: "none"
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    label: "UPLOAD",
+    iconPosition: "after",
+    icon: _Icons.uploadIcon,
+    onClick: onUpload
+  }))));
+};
+
+DxcButtonsUpload.propTypes = {
+  addFile: _propTypes["default"].func,
+  onUpload: _propTypes["default"].func
+};
+
+var DXCButtonsUpload = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 80px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+
+var DragAndDropLabel = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-right: 50px;\n"])), function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontStyle;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontWeight;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontTextTransform;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontColor;
+});
+
+var DragAndDropIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n  & svg {\n    fill: ", ";\n  }\n"])), function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconColor;
+});
+
+var _default = DxcButtonsUpload;
+exports["default"] = _default;

package/upload/buttons-upload/Icons.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadIcon = exports.dragAndDropIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var uploadIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+}));
+
+exports.uploadIcon = uploadIcon;
+
+var dragAndDropIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#666666"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"
+}));
+
+exports.dragAndDropIcon = dragAndDropIcon;

package/upload/dragAndDropArea/DragAndDropArea.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Icons = require("./Icons");
+
+var _Button = _interopRequireDefault(require("../../button/Button"));
+
+var _useTheme = _interopRequireDefault(require("../../useTheme"));
+
+var _BackgroundColorContext = require("../../BackgroundColorContext");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
+  var _ref$dashed = _ref.dashed,
+      dashed = _ref$dashed === void 0 ? false : _ref$dashed,
+      addFile = _ref.addFile,
+      tabIndexValue = _ref.tabIndexValue;
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      dragging = _React$useState2[0],
+      setDragging = _React$useState2[1];
+
+  var colorsTheme = (0, _useTheme["default"])();
+  var text = "There are no files to upload";
+  var description = "Drag and drop your files here or choose one from your computer";
+  var textHover = "Drag your file here";
+
+  var handleDrag = function handleDrag(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  var handleDragIn = function handleDragIn(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setDragging(true);
+    }
+  };
+
+  var handleDragOut = function handleDragOut(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+  };
+
+  var handleDrop = function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var filesObject = e.dataTransfer.files;
+
+    if (filesObject && filesObject.length > 0) {
+      var filesArray = Object.keys(filesObject).map(function (key) {
+        return filesObject[key];
+      });
+      addFile(filesArray);
+      e.dataTransfer.clearData();
+    }
+  };
+
+  var selectFile = function selectFile(e) {
+    var filesObject = e.target.files;
+
+    if (filesObject && filesObject.length > 0) {
+      var filesArray = Object.keys(filesObject).map(function (key) {
+        return filesObject[key];
+      });
+      addFile(filesArray);
+    }
+  };
+
+  var handleClick = function handleClick() {
+    document.getElementById("chooseFiles").click();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.upload
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
+  }, /*#__PURE__*/_react["default"].createElement(DXCDragAndDrop, {
+    onDrop: handleDrop,
+    onDragEnter: handleDragIn,
+    onDragOver: handleDrag,
+    onDragLeave: handleDragOut,
+    dashed: dashed
+  }, !dragging && !dashed && /*#__PURE__*/_react["default"].createElement(DXCDragAndDropArea, null, /*#__PURE__*/_react["default"].createElement(DragAndDropContent, null, /*#__PURE__*/_react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), /*#__PURE__*/_react["default"].createElement(DragAndDropText, null, /*#__PURE__*/_react["default"].createElement(DragAndDropTitle, null, text), /*#__PURE__*/_react["default"].createElement(DragAndDropDescription, null, description)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    label: "CHOOSE FILES",
+    onClick: handleClick,
+    tabIndex: tabIndexValue
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "chooseFiles",
+    type: "file",
+    multiple: true,
+    onChange: selectFile,
+    style: {
+      display: "none"
+    }
+  })))), !dragging && dashed && /*#__PURE__*/_react["default"].createElement(DragAndDropContentHover, null, /*#__PURE__*/_react["default"].createElement(DragAndDropContent, null, /*#__PURE__*/_react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), /*#__PURE__*/_react["default"].createElement(DragAndDropText, null, /*#__PURE__*/_react["default"].createElement(DragAndDropTitle, null, text), /*#__PURE__*/_react["default"].createElement(DragAndDropDescription, null, description)), /*#__PURE__*/_react["default"].createElement(ButtonChooseFiles, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    theme: "light",
+    label: "CHOOSE FILES",
+    onClick: handleClick,
+    tabIndex: tabIndexValue
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "chooseFiles",
+    type: "file",
+    multiple: true,
+    onChange: selectFile,
+    style: {
+      display: "none"
+    }
+  })))), dragging && /*#__PURE__*/_react["default"].createElement(DragAndDropContentHover, null, /*#__PURE__*/_react["default"].createElement(DragAndDropTextHover, null, textHover), /*#__PURE__*/_react["default"].createElement(DragAndDropIconHover, null, _Icons.dropFileIcon)))));
+};
+
+DxcDragAndDropArea.propTypes = {
+  dashed: _propTypes["default"].bool,
+  addFile: _propTypes["default"].func
+};
+
+var DXCDragAndDrop = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  background-color: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.backgroundColor;
+});
+
+var DXCDragAndDropArea = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  border-radius: 4px;\n  box-shadow: 0px 3px 6px ", ";\n"])), function (props) {
+  return props.theme.shadowColor;
+});
+
+var DragAndDropContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+
+var DragAndDropIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-bottom: 20px;\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
+  return props.theme.dragAndDropIconColor;
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+});
+
+var DragAndDropText = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+
+var DragAndDropTitle = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"])), function (props) {
+  return props.theme.dragAndDropTitleFontSize;
+}, function (props) {
+  return props.theme.dragAndDropTitleFontStyle;
+}, function (props) {
+  return props.theme.dragAndDropTitleFontWeight;
+}, function (props) {
+  return props.theme.dragAndDropTitleFontTextTransform;
+}, function (props) {
+  return props.theme.dragAndDropTitleFontColor;
+});
+
+var DragAndDropDescription = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 40px;\n"])), function (props) {
+  return props.theme.dragAndDropDescriptionFontSize;
+}, function (props) {
+  return props.theme.dragAndDropDescriptionFontStyle;
+}, function (props) {
+  return props.theme.dragAndDropDescriptionFontWeight;
+}, function (props) {
+  return props.theme.dragAndDropDescriptionFontTextTransform;
+}, function (props) {
+  return props.theme.dragAndDropDescriptionFontColor;
+});
+
+var ButtonChooseFiles = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
+
+var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  --border-color: #666666;\n  --border-weight: 1px;\n  --dash-size: 8px;\n  --gap-size: 8px;\n  background: linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top left no-repeat,\n    linear-gradient(\n        90deg,\n        transparent calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)),\n        transparent calc(var(--gap-size) / 2 + var(--dash-size))\n      )\n      top center repeat-x,\n    linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top right no-repeat,\n    linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top left no-repeat,\n    linear-gradient(\n        0deg,\n        transparent calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)),\n        transparent calc(var(--gap-size) / 2 + var(--dash-size))\n      )\n      center left repeat-y,\n    linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,\n    linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,\n    linear-gradient(\n        90deg,\n        transparent calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)),\n        transparent calc(var(--gap-size) / 2 + var(--dash-size))\n      )\n      bottom center repeat-x,\n    linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat,\n    linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top right no-repeat,\n    linear-gradient(\n        0deg,\n        transparent calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2),\n        var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)),\n        transparent calc(var(--gap-size) / 2 + var(--dash-size))\n      )\n      center right repeat-y,\n    linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat;\n  background-size: var(--dash-size) var(--border-weight), calc(var(--dash-size) + var(--gap-size)) var(--border-weight),\n    var(--dash-size) var(--border-weight), var(--border-weight) var(--dash-size),\n    var(--border-weight) calc(var(--dash-size) + var(--gap-size)), var(--border-weight) var(--dash-size);\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])), function (props) {
+  return props.theme.draggingStateBackgroundColor;
+});
+
+var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconColor;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+});
+
+var DragAndDropTextHover = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"])), function (props) {
+  return props.theme.dragAndDropDraggingStateFontSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateFontStyle;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateFontWeight;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateFontTextTransform;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateFontColor;
+});
+
+var _default = DxcDragAndDropArea;
+exports["default"] = _default;

package/upload/dragAndDropArea/Icons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadFileIcon = exports.dropFileIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var dropFileIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "74.5",
+  height: "74.5",
+  viewBox: "0 0 24 24",
+  fill: "#666666"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"
+}));
+
+exports.dropFileIcon = dropFileIcon;
+
+var uploadFileIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "43.5",
+  height: "43.5",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.uploadFileIcon = uploadFileIcon;