@dxc-technology/halstack-react 0.0.0-3fa9e5c → 0.0.0-422fa7b

package/dist/toggle-group/ToggleGroup.js

@@ -23,24 +23,12 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-require("../common/OpenSans.css");
-
 var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 20px;\n  width: 20px;\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 20px;\n  width: 20px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -50,7 +38,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font: normal normal normal 14px/19px Open Sans;\n  letter-spacing: 1.25px;\n  text-transform: uppercase;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -60,7 +48,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -70,7 +58,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -80,7 +68,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: flex;\n  flex-direction: column;\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: flex;\n  flex-direction: row;\n  opacity: 1;\n  min-height: 40px;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -98,7 +86,9 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       options = _ref$options === void 0 ? [] : _ref$options,
       margin = _ref.margin,
       _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple;
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
   var _useState = (0, _react.useState)(multiple ? [] : null),
@@ -123,19 +113,25 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
         }
 
         setSelectedValue(newSelectedOptions);
-      } else {
-        setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
-      }
+      } else setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
     } else if (multiple) {
       newSelectedOptions = value.map(function (v) {
         return v;
       });
-      newSelectedOptions.push(selectedOption);
-    }
 
-    if (typeof onChange === "function") {
-      onChange(multiple ? newSelectedOptions : selectedOption);
+      if (newSelectedOptions.includes(selectedOption)) {
+        var _index = newSelectedOptions.indexOf(selectedOption);
+
+        newSelectedOptions.splice(_index, 1);
+      } else newSelectedOptions.push(selectedOption);
     }
+
+    typeof onChange === "function" && onChange(multiple ? newSelectedOptions : selectedOption);
+  };
+
+  var handleKeyPress = function handleKeyPress(event, optionValue) {
+    event.preventDefault();
+    if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) handleToggleChange(optionValue);
   };
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -143,9 +139,10 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
   }, _react["default"].createElement(ToggleGroup, {
     margin: margin,
     disabled: disabled
-  }, _react["default"].createElement(ToggleGroupContainer, null, options.map(function (option, i) {
+  }, options.map(function (option, i) {
     return _react["default"].createElement(ToggleContainer, {
       selected: multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      tabIndex: !disabled ? tabIndex : -1,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
       },
@@ -153,11 +150,16 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       isLast: i === options.length - 1,
       isIcon: option.iconSrc || option.icon,
       disabled: disabled,
+      onKeyPress: function onKeyPress(event) {
+        handleKeyPress(event, option.value);
+      },
       key: "toggle-".concat(i, "-").concat(option.label)
     }, option.icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc ? _react["default"].createElement(Icon, {
       src: option.iconSrc
-    }) : _react["default"].createElement(LabelContainer, null, option.label));
-  }))));
+    }) : _react["default"].createElement(LabelContainer, {
+      disabled: disabled
+    }, option.label));
+  })));
 };
 
 var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (props) {
@@ -170,24 +172,35 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return props.disabled && "opacity: ".concat(props.theme.disabledOpacity, ";");
 });
 
-var ToggleGroupContainer = _styledComponents["default"].div(_templateObject2());
-
-var ToggleContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return "\n  background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "10px 12px" : "12px 30px", ";\n    ").concat(!props.disabled ? "&:hover {\n          background-color: ".concat(props.selected ? props.theme.selectedBackgroundHoverColor : props.theme.unselectedBackgroundHoverColor, ";\n          color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
+var ToggleContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
+  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.selectedDisabledBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.unselectedDisabledBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n    \n    ").concat(!props.disabled ? ":hover {\n          background-color: ".concat(props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor, ";\n        }\n        :active {\n          background-color: ").concat(props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor, ";\n          color: #ffffff;\n        }        \n        :focus {\n          outline: ").concat(props.theme.focusColor, " solid 2px;\n          outline-offset: -2px;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
 });
 
-var LabelContainer = _styledComponents["default"].span(_templateObject4());
+var LabelContainer = _styledComponents["default"].span(_templateObject3(), function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.fontSize;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontWeight;
+});
 
-var Icon = _styledComponents["default"].img(_templateObject5());
+var Icon = _styledComponents["default"].img(_templateObject4(), function (props) {
+  return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
+});
 
-var IconContainer = _styledComponents["default"].div(_templateObject6());
+var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+  return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
+});
 
 DxcToggleGroup.propTypes = {
-  //label: PropTypes.string,
   value: _propTypes["default"].any,
   onChange: _propTypes["default"].func,
   disabled: _propTypes["default"].bool,
@@ -203,7 +216,8 @@ DxcToggleGroup.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 _default = DxcToggleGroup;
 exports["default"] = _default;

package/dist/upload/Upload.js

@@ -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"));
@@ -34,7 +32,7 @@ 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 data = (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"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -45,7 +43,9 @@ function _templateObject() {
 
 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),
@@ -160,17 +160,21 @@ var DxcUpload = function DxcUpload(_ref) {
   return _react["default"].createElement(DXCUpload, {
     margin: margin
   }, transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_Transactions["default"], {
+    tabIndexValue: tabIndex,
     transactions: transactionFiles
   }), filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length === 0 && _react["default"].createElement(_DragAndDropArea["default"], {
     dashed: false,
-    addFile: onDragHandler
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
   }) || filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_DragAndDropArea["default"], {
     dashed: true,
-    addFile: onDragHandler
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
   }), filesToUpload && filesToUpload.length !== 0 && _react["default"].createElement(_FilesToUpload["default"], {
     filesToUpload: filesToUpload,
     addFile: onDragHandler,
-    onUpload: onUploadHandler
+    onUpload: onUploadHandler,
+    tabIndexValue: tabIndex
   }));
 };
 
@@ -181,7 +185,8 @@ 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) {

package/dist/upload/buttons-upload/ButtonsUpload.js

@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-require("../../common/OpenSans.css");
-
 var _Button = _interopRequireDefault(require("../../button/Button"));
 
 var _uploadButton = _interopRequireDefault(require("./upload-button.svg"));
@@ -27,8 +25,10 @@ var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: url(\"", "\") no-repeat padding-box;\n  width: 24px;\n  height: 24px;\n  margin-right: 5px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -38,7 +38,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-style: italic;\n  font-size: 12px;\n  color: ", ";\n  margin-right: 50px;\n"]);
+  var data = (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"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -48,7 +48,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  margin-right: 80px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 80px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -79,6 +79,8 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIcon, null), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
     margin: {
       right: "small"
@@ -99,7 +101,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
     iconPosition: "after",
     iconSrc: _uploadButton["default"],
     onClick: onUpload
-  })));
+  }))));
 };
 
 DxcButtonsUpload.propTypes = {
@@ -110,10 +112,28 @@ DxcButtonsUpload.propTypes = {
 var DXCButtonsUpload = _styledComponents["default"].div(_templateObject());
 
 var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.theme.fontColor;
+  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 DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), _dragDropIcon["default"]);
+var DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), function (props) {
+  return props.theme.dragAndDropAreaIconColor;
+}, _dragDropIcon["default"], function (props) {
+  return "".concat(props.theme.dragAndDropAreaIconSize, " ").concat(props.theme.dragAndDropAreaIconSize);
+}, function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+});
 
 var _default = DxcButtonsUpload;
 exports["default"] = _default;

package/dist/upload/dragAndDropArea/DragAndDropArea.js

@@ -19,8 +19,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-require("../../common/OpenSans.css");
-
 require("../../common/variables.js");
 
 var _upload_file = _interopRequireDefault(require("./upload_file.svg"));
@@ -31,8 +29,10 @@ var _Button = _interopRequireDefault(require("../../button/Button"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: 16px;\n  margin-bottom: 20px;\n  color: ", ";\n  font-style: italic;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -42,7 +42,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 74.5px;\n  height: 74.5px;\n  background: url(\"", "\") no-repeat padding-box;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -72,7 +72,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: 16px;\n  margin-bottom: 40px;\n  color: ", ";\n  font-style: italic;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 40px;\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -82,7 +82,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: 20px;\n  font-weight: bold;\n  margin-bottom: 10px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -102,7 +102,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 43.5px;\n  height: 43.5px;\n  margin-bottom: 20px;\n  background: url(\"", "\") no-repeat padding-box;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-bottom: 20px;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -132,7 +132,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  width: 100%;\n  height: 100%;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  background-color: ", ";\n  width: 100%;\n  height: 100%;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -144,7 +144,8 @@ function _templateObject() {
 var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
   var _ref$dashed = _ref.dashed,
       dashed = _ref$dashed === void 0 ? false : _ref$dashed,
-      addFile = _ref.addFile;
+      addFile = _ref.addFile,
+      tabIndexValue = _ref.tabIndexValue;
 
   var _React$useState = _react["default"].useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -207,6 +208,8 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCDragAndDrop, {
     onDrop: handleDrop,
     onDragEnter: handleDragIn,
@@ -215,7 +218,8 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     dashed: dashed
   }, !dragging && !dashed && _react["default"].createElement(DXCDragAndDropArea, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
     label: "CHOOSE FILES",
-    onClick: handleClick
+    onClick: handleClick,
+    tabIndex: tabIndexValue
   }), _react["default"].createElement("input", {
     id: "chooseFiles",
     type: "file",
@@ -227,7 +231,8 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
   })))), !dragging && dashed && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement(ButtonChooseFiles, null, _react["default"].createElement(_Button["default"], {
     theme: "light",
     label: "CHOOSE FILES",
-    onClick: handleClick
+    onClick: handleClick,
+    tabIndex: tabIndexValue
   }), _react["default"].createElement("input", {
     id: "chooseFiles",
     type: "file",
@@ -236,7 +241,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     style: {
       display: "none"
     }
-  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null))));
+  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null)))));
 };
 
 DxcDragAndDropArea.propTypes = {
@@ -244,7 +249,11 @@ DxcDragAndDropArea.propTypes = {
   addFile: _propTypes["default"].func
 };
 
-var DXCDragAndDrop = _styledComponents["default"].div(_templateObject());
+var DXCDragAndDrop = _styledComponents["default"].div(_templateObject(), function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.backgroundColor;
+});
 
 var DXCDragAndDropArea = _styledComponents["default"].div(_templateObject2(), function (props) {
   return props.theme.shadowColor;
@@ -252,26 +261,68 @@ var DXCDragAndDropArea = _styledComponents["default"].div(_templateObject2(), fu
 
 var DragAndDropContent = _styledComponents["default"].div(_templateObject3());
 
-var DragAndDropIcon = _styledComponents["default"].div(_templateObject4(), _upload_file["default"]);
+var DragAndDropIcon = _styledComponents["default"].div(_templateObject4(), function (props) {
+  return props.theme.dragAndDropIconColor;
+}, _upload_file["default"], function (props) {
+  return "".concat(props.theme.dragAndDropIconSize, " ").concat(props.theme.dragAndDropIconSize);
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+}, function (props) {
+  return props.theme.dragAndDropIconSize;
+});
 
 var DragAndDropText = _styledComponents["default"].div(_templateObject5());
 
-var DragAndDropTitle = _styledComponents["default"].div(_templateObject6());
+var DragAndDropTitle = _styledComponents["default"].div(_templateObject6(), 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(), function (props) {
-  return props.theme.fontColor;
+  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());
 
 var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9(), function (props) {
-  return props.theme.backgroundDragColor;
+  return props.theme.draggingStateBackgroundColor;
 });
 
-var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), _upload_drop["default"]);
+var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), function (props) {
+  return props.theme.dragAndDropDraggingStateIconColor;
+}, _upload_drop["default"], function (props) {
+  return "".concat(props.theme.dragAndDropDraggingStateIconSize, " ").concat(props.theme.dragAndDropDraggingStateIconSize);
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+}, function (props) {
+  return props.theme.dragAndDropDraggingStateIconSize;
+});
 
 var DragAndDropTextHover = _styledComponents["default"].div(_templateObject11(), function (props) {
-  return props.theme.fontColor;
+  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;