@dxc-technology/halstack-react 0.0.0-a9c6846 → 0.0.0-acb1a24

package/dist/upload/file-upload/Icons.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.audioIcon = exports.videoIcon = exports.defaultIcon = exports.closeIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var closeIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "30",
+  height: "30",
+  viewBox: "0 0 24 24"
+}, _react["default"].createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.closeIcon = closeIcon;
+
+var defaultIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+}));
+
+exports.defaultIcon = defaultIcon;
+
+var videoIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, _react["default"].createElement("path", {
+  d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.videoIcon = videoIcon;
+
+var audioIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"
+}));
+
+exports.audioIcon = audioIcon;

package/dist/upload/index.d.ts

@@ -0,0 +1,15 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  callbackUpload?: void;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcUpload(props: Props): JSX.Element;

package/dist/upload/transaction/Icons.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.audioIconError = exports.videoIconError = exports.imageIconError = exports.defaultIconError = exports.audioIcon = exports.videoIcon = exports.imageIcon = exports.defaultIcon = exports.errorIcon = exports.successIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var successIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#50B50F"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), _react["default"].createElement("path", {
+  d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+}));
+
+exports.successIcon = successIcon;
+
+var errorIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D0011B"
+}, _react["default"].createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.errorIcon = errorIcon;
+
+var defaultIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D9D9D9"
+}, _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"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.defaultIcon = defaultIcon;
+
+var imageIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D9D9D9"
+}, _react["default"].createElement("path", {
+  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.imageIcon = imageIcon;
+
+var videoIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D9D9D9"
+}, _react["default"].createElement("path", {
+  d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.videoIcon = videoIcon;
+
+var audioIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D9D9D9"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"
+}));
+
+exports.audioIcon = audioIcon;
+
+var defaultIconError = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D0011B"
+}, _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"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.defaultIconError = defaultIconError;
+
+var imageIconError = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D0011B"
+}, _react["default"].createElement("path", {
+  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.imageIconError = imageIconError;
+
+var videoIconError = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D0011B"
+}, _react["default"].createElement("path", {
+  d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+exports.videoIconError = videoIconError;
+
+var audioIconError = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#D0011B"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"
+}));
+
+exports.audioIconError = audioIconError;

package/dist/upload/transaction/Transaction.js

@@ -19,25 +19,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
-var _successIcon = _interopRequireDefault(require("./success-icon.svg"));
-
-var _errorIcon = _interopRequireDefault(require("./error-icon.svg"));
-
-var _fileIcon = _interopRequireDefault(require("./file-icon.svg"));
-
-var _imageIcon = _interopRequireDefault(require("./image-icon.svg"));
-
-var _videoIcon = _interopRequireDefault(require("./video-icon.svg"));
-
-var _audioIcon = _interopRequireDefault(require("./audio-icon.svg"));
-
-var _fileIconErr = _interopRequireDefault(require("./file-icon-err.svg"));
-
-var _imageIconErr = _interopRequireDefault(require("./image-icon-err.svg"));
-
-var _videoIconErr = _interopRequireDefault(require("./video-icon-err.svg"));
-
-var _audioIconErr = _interopRequireDefault(require("./audio-icon-err.svg"));
+var _Icons = require("./Icons");
 
 var _Spinner = _interopRequireDefault(require("../../spinner/Spinner"));
 
@@ -56,7 +38,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  width: 25px;\n  height: 20px;\n  max-width: 20%;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 25px;\n  height: 20px;\n  max-width: 20%;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -76,7 +58,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 16px;\n  max-width: 20%;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 16px;\n  max-width: 20%;\n  & svg {\n    fill: ", ";\n  }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -106,26 +88,21 @@ var DxcTransaction = function DxcTransaction(_ref) {
       message = _ref$message === void 0 ? "" : _ref$message;
   var colorsTheme = (0, _useTheme["default"])();
 
-  var icon = status === "error" && (type.includes("image") && _imageIconErr["default"] || type.includes("video") && _videoIconErr["default"] || type.includes("audio") && _audioIconErr["default"] || _fileIconErr["default"]) || type.includes("image") && _imageIcon["default"] || type.includes("video") && _videoIcon["default"] || type.includes("audio") && _audioIcon["default"] || _fileIcon["default"];
+  var icon = status === "error" && (type.includes("image") && _Icons.imageIconError || type.includes("video") && _Icons.videoIconError || type.includes("audio") && _Icons.audioIconError || _Icons.defaultIconError) || type.includes("image") && _Icons.imageIcon || type.includes("video") && _Icons.videoIcon || type.includes("audio") && _Icons.audioIcon || _Icons.defaultIcon;
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
   }, _react["default"].createElement(DXCTransaction, {
     status: status
   }, _react["default"].createElement(FileImage, {
-    status: status,
-    img: icon
-  }), status === "processing" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    status: status
+  }, icon), status === "processing" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(_Spinner["default"], {
     mode: "small"
-  }))) || status === "success" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileStatus, {
-    status: status
-  })) || status === "error" && _react["default"].createElement(FileData, null, _react["default"].createElement(_Tooltip["default"], {
+  }))) || status === "success" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileStatus, null, _Icons.successIcon)) || status === "error" && _react["default"].createElement(FileData, null, _react["default"].createElement(_Tooltip["default"], {
     title: message
-  }, _react["default"].createElement(FileName, null, name)), _react["default"].createElement(FileStatus, {
-    status: status
-  }))));
+  }, _react["default"].createElement(FileName, null, name)), _react["default"].createElement(FileStatus, null, _Icons.errorIcon), " ")));
 };
 
 DxcTransaction.propTypes = {
@@ -142,15 +119,13 @@ var DXCTransaction = _styledComponents["default"].div(_templateObject(), functio
 });
 
 var FileImage = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.status === "error" && props.theme.errorColor || props.theme.uploadedFileIconColor;
-}, function (props) {
-  return props.img;
-}, function (props) {
   return "".concat(props.theme.uploadedFileIconSize, " ").concat(props.theme.uploadedFileIconSize);
 }, function (props) {
   return props.theme.uploadedFileIconSize;
 }, function (props) {
   return props.theme.uploadedFileIconSize;
+}, function (props) {
+  return props.status === "error" && props.theme.errorColor || props.theme.uploadedFileIconColor;
 });
 
 var FileName = _styledComponents["default"].div(_templateObject3(), function (props) {
@@ -165,9 +140,7 @@ var FileName = _styledComponents["default"].div(_templateObject3(), function (pr
   return props.theme.fileNameFontColor;
 });
 
-var FileStatus = _styledComponents["default"].div(_templateObject4(), function (props) {
-  return props.status === "success" && "url('".concat(_successIcon["default"], "') no-repeat padding-box") || props.status === "error" && "url('".concat(_errorIcon["default"], "') no-repeat padding-box");
-});
+var FileStatus = _styledComponents["default"].div(_templateObject4());
 
 var FileData = _styledComponents["default"].div(_templateObject5());
 

package/dist/wizard/Icons.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validIcon = exports.invalidIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var invalidIcon = _react["default"].createElement("svg", {
+  id: "highlight_off_black_18dp",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18"
+}, _react["default"].createElement("path", {
+  id: "Path_2943",
+  "data-name": "Path 2943",
+  d: "M0,0H18V18H0Z",
+  fill: "none"
+}), _react["default"].createElement("path", {
+  id: "Path_2944",
+  "data-name": "Path 2944",
+  d: "M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z",
+  transform: "translate(-1.002 -1.002)",
+  fill: "#ffe6e9"
+}), _react["default"].createElement("path", {
+  id: "Path_2945",
+  "data-name": "Path 2945",
+  d: "M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z",
+  transform: "translate(-0.501 -0.501)",
+  fill: "#d0011b"
+}));
+
+exports.invalidIcon = invalidIcon;
+
+var validIcon = _react["default"].createElement("svg", {
+  id: "check_circle_black_18dp",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18"
+}, _react["default"].createElement("path", {
+  id: "Path_2946",
+  "data-name": "Path 2946",
+  d: "M0,0H18V18H0Z",
+  fill: "none"
+}), _react["default"].createElement("path", {
+  id: "Path_2947",
+  "data-name": "Path 2947",
+  d: "M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z",
+  transform: "translate(-0.986 -0.986)",
+  fill: "#eafaef",
+  opacity: "0.999"
+}), _react["default"].createElement("path", {
+  id: "Path_2948",
+  "data-name": "Path 2948",
+  d: "M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z",
+  transform: "translate(-0.493 -0.493)",
+  fill: "#24a148"
+}));
+
+exports.validIcon = validIcon;

package/dist/wizard/Wizard.js

@@ -27,9 +27,7 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _valid_icon = _interopRequireDefault(require("./valid_icon.svg"));
-
-var _invalid_icon = _interopRequireDefault(require("./invalid_icon.svg"));
+var _Icons = require("./Icons");
 
 function _templateObject14() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"]);
@@ -232,11 +230,7 @@ var DxcWizard = function DxcWizard(_ref) {
     }) : _react["default"].createElement(Number, {
       disabled: step.disabled,
       current: i === renderedCurrent
-    }, i + 1)), step.valid !== undefined ? step.valid ? _react["default"].createElement(ValidityIcon, {
-      src: _valid_icon["default"]
-    }) : _react["default"].createElement(ValidityIcon, {
-      src: _invalid_icon["default"]
-    }) : ""), step.label || step.description ? _react["default"].createElement(InfoContainer, null, step.label ? _react["default"].createElement(Label, {
+    }, i + 1)), step.valid !== undefined ? step.valid ? _react["default"].createElement(ValidityIconContainer, null, _Icons.validIcon) : _react["default"].createElement(ValidityIconContainer, null, _Icons.invalidIcon) : ""), step.label || step.description ? _react["default"].createElement(InfoContainer, null, step.label ? _react["default"].createElement(Label, {
       disabled: step.disabled,
       visited: i <= innerCurrent
     }, step.label) : "", step.description ? _react["default"].createElement(Description, {
@@ -337,7 +331,7 @@ var Number = _styledComponents["default"].p(_templateObject9(), function (props)
   return props.theme.stepContainerLetterSpacing;
 });
 
-var ValidityIcon = _styledComponents["default"].img(_templateObject10());
+var ValidityIconContainer = _styledComponents["default"].div(_templateObject10());
 
 var InfoContainer = _styledComponents["default"].div(_templateObject11());
 

package/dist/wizard/index.d.ts

@@ -0,0 +1,18 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  mode?: "horizontal" | "vertical";
+  currentStep?: number;
+  onStepClick?: void;
+  steps?: any;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcWizard(props: Props): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-a9c6846",
+  "version": "0.0.0-acb1a24",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -13,9 +13,9 @@
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "styled-components": ">= 4.3.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.0.1"
   },
   "dependencies": {
     "@date-io/date-fns": "^1.3.9",
@@ -29,7 +29,6 @@
     "date-fns": "^2.0.0-beta.4",
     "moment": "2.24.0",
     "prop-types": "^15.7.2",
-    "react-use-scrollspy": "^2.0.0",
     "rgb-hex": "^3.0.0",
     "uuid": "^8.3.2"
   },
@@ -48,7 +47,7 @@
     "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "12.1.2",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "eslint": "^5.16.0",
@@ -71,9 +70,6 @@
       "\\.(css|less|scss|sass)$": "identity-obj-proxy",
       "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",
       "\\.(png)$": "<rootDir>/test/mocks/pngMock.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!react-use-scrollspy).+\\.js$"
-    ]
+    }
   }
 }

package/test/Date.test.js

@@ -51,7 +51,7 @@ describe("Controlled Date Component", () => {
 
   test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", () => {
     const { getByRole, getByText, getByTestId } = render(<DxcDate label="Birthdate" value="16-10-2020" />);
-    fireEvent.click(getByTestId('calendarIcon'));
+    fireEvent.click(getByTestId("calendarIcon"));
     expect(getByText("Fri, Oct 16")).toBeTruthy();
   });
 
@@ -64,7 +64,7 @@ describe("Controlled Date Component", () => {
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
     rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
-    const calendarButton = getByTestId('calendarIcon');
+    const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
   });
@@ -152,7 +152,7 @@ describe("Controlled Date Component", () => {
     const onChange = jest.fn();
 
     const component = render(<DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
     fireEvent.click(dayButton);
@@ -166,7 +166,7 @@ describe("Controlled Date Component", () => {
     });
 
     const component = render(<DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -179,7 +179,7 @@ describe("Controlled Date Component", () => {
     });
 
     const component = render(<DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -192,7 +192,7 @@ describe("Controlled Date Component", () => {
     });
 
     const component = render(<DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -201,7 +201,7 @@ describe("Controlled Date Component", () => {
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
     const component = render(<DxcDate label="Birthdate" value="01-10-2020" />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "1" });
     expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
@@ -249,14 +249,16 @@ describe("Uncontrolled Date Component", () => {
   const date = new Date("2020-10-16 00:00:00");
 
   test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
-    const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(<DxcDate label="Birthdate" placeholder />);
+    const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
+      <DxcDate label="Birthdate" placeholder />
+    );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
     rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
-    const calendarButton = getByTestId('calendarIcon');
+    const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
   });
@@ -336,7 +338,7 @@ describe("Uncontrolled Date Component", () => {
     const onChange = jest.fn();
 
     const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
     fireEvent.click(dayButton);
@@ -350,7 +352,7 @@ describe("Uncontrolled Date Component", () => {
     const input = component.getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "10-02-2020" } });
-    const calendarButton = component.getByTestId('calendarIcon');
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
     expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);