@dxc-technology/halstack-react 0.0.0-92f4a00 → 0.0.0-933ff75

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-92f4a00",
+  "version": "0.0.0-933ff75",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -11,6 +11,7 @@
     "url": "https://dxc.com"
   },
   "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

package/test/Date.test.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import DxcDate from "../src/date/Date";
+import V3DxcDate from "../src/date/Date";
 
 const defaultFormat = "DD-MM-YYYY";
 
 describe("Date component general tests", () => {
   test("Date renders correctly", () => {
-    const { getByPlaceholderText } = render(<DxcDate label="Birthdate" placeholder />);
+    const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
     // const input = getByPlaceholderText('DD-MM-YYYY');
     expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
   });
@@ -22,19 +22,19 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText, rerender } = render(
-      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     const input = getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "something" } });
     expect(onChange).toHaveBeenCalled();
     fireEvent.blur(input);
-    rerender(<DxcDate label="Birthdate" value="" placeholder />);
+    rerender(<V3DxcDate label="Birthdate" value="" placeholder />);
     // expect(getByRole("textbox").value).toBe('');
   });
 
   test("The input´s value is the same as the one received as a parameter (Default format)", () => {
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" value="30/03/1981" placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
     expect(input.value).toBe("30/03/1981");
@@ -42,7 +42,7 @@ describe("Controlled Date Component", () => {
 
   test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
+      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -50,21 +50,21 @@ 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'));
+    const { getByRole, getByText, getByTestId } = render(<V3DxcDate label="Birthdate" value="16-10-2020" />);
+    fireEvent.click(getByTestId("calendarIcon"));
     expect(getByText("Fri, Oct 16")).toBeTruthy();
   });
 
   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" value="30-03-1981" placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-1981" 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');
+    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
   });
@@ -76,7 +76,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -92,7 +92,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -107,7 +107,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YY");
@@ -123,7 +123,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -139,7 +139,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -151,8 +151,8 @@ describe("Controlled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
     fireEvent.click(dayButton);
@@ -165,8 +165,8 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
     });
 
-    const component = render(<DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -178,8 +178,8 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const component = render(<DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -191,8 +191,10 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("2020/10/16");
     });
 
-    const component = render(<DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const component = render(
+      <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
+    );
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
     fireEvent.click(dayButton);
@@ -200,8 +202,8 @@ 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 component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "1" });
     expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
@@ -209,7 +211,7 @@ describe("Controlled Date Component", () => {
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -222,7 +224,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30-03-81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -235,7 +237,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30/03/81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
+      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -249,14 +251,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(
+      <V3DxcDate 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');
+    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
   });
@@ -267,7 +271,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("something");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -280,7 +284,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -294,7 +298,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YY");
@@ -309,7 +313,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("11-15-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -324,7 +328,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -335,8 +339,8 @@ describe("Uncontrolled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
-    const calendarButton = component.getByTestId('calendarIcon');
+    const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
+    const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
     fireEvent.click(dayButton);
@@ -345,19 +349,19 @@ describe("Uncontrolled Date Component", () => {
   });
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
-    const component = render(<DxcDate label="Birthdate" placeholder />);
+    const component = render(<V3DxcDate label="Birthdate" placeholder />);
     // const input = component.getByRole("textbox");
     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);
   });
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -368,7 +372,7 @@ describe("Uncontrolled Date Component", () => {
     const onBlur = jest.fn((returnedValue) => {
       expect(returnedValue).toBe("10-02-2020");
     });
-    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YYYY");
 
@@ -381,7 +385,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue).toBe("10/02/20");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
+      <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");