@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ec6fe9

package/dist/upload/transactions/Transactions.js

@@ -107,31 +107,31 @@ var DXCTransactions = _styledComponents["default"].div(_templateObject(), functi
 var TransactionsText = _styledComponents["default"].span(_templateObject2());
 
 var TransactionsTitle = _styledComponents["default"].span(_templateObject3(), function (props) {
-  return props.theme.filesUploadedTitleFontSize;
+  return props.theme.uploadedFilesTitleFontSize;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontStyle;
+  return props.theme.uploadedFilesTitleFontStyle;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontWeight;
+  return props.theme.uploadedFilesTitleFontWeight;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontTextTransform;
+  return props.theme.uploadedFilesTitleFontTextTransform;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontColor;
+  return props.theme.uploadedFilesTitleFontColor;
 });
 
 var TransactionsSubTitle = _styledComponents["default"].span(_templateObject4(), function (props) {
-  return props.theme.filesUploadedSubtitleFontSize;
+  return props.theme.uploadedFilesSubtitleFontSize;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontStyle;
+  return props.theme.uploadedFilesSubtitleFontStyle;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontWeight;
+  return props.theme.uploadedFilesSubtitleFontWeight;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontTextTransform;
+  return props.theme.uploadedFilesSubtitleFontTextTransform;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontColor;
+  return props.theme.uploadedFilesSubtitleFontColor;
 });
 
 var TransactionsNumber = _styledComponents["default"].span(_templateObject5(), function (props) {
-  return props.theme.filesUploadedNumberFontWeight;
+  return props.theme.uploadedFilesNumberFontWeight;
 });
 
 var _default = DxcTransactions;

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,16 +230,12 @@ 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,
-      active: i <= innerCurrent
+      visited: i <= innerCurrent
     }, step.label) : "", step.description ? _react["default"].createElement(Description, {
       disabled: step.disabled,
-      active: i <= innerCurrent
+      visited: i <= innerCurrent
     }, step.description) : "") : ""), i === steps.length - 1 ? "" : _react["default"].createElement(StepSeparator, {
       mode: mode
     }));
@@ -289,15 +283,15 @@ var Step = _styledComponents["default"].button(_templateObject3(), function (pro
 var StepHeader = _styledComponents["default"].div(_templateObject4());
 
 var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
-  return props.disabled ? props.theme.circleDisabledWidth : props.current ? props.theme.circleSelectedWidth : props.theme.circleWidth;
+  return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
 }, function (props) {
-  return props.disabled ? props.theme.circleDisabledHeight : props.current ? props.theme.circleSelectedHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.circleSelectedBorderThickness, " ").concat(props.theme.circleSelectedBorderStyle, " ").concat(props.theme.circleSelectedBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.circleDisabledBorderThickness, " ").concat(props.theme.circleDisabledBorderStyle, " ").concat(props.theme.circleDisabledBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
 }, function (props) {
   return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
 }, function (props) {
-  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.circleSelectedBorderRadius : props.disabled ? props.theme.circleDisabledBorderRadius : "";
+  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
 });
 
 var Icon = _styledComponents["default"].img(_templateObject6(), function (props) {
@@ -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());
 
@@ -354,7 +348,7 @@ var Label = _styledComponents["default"].p(_templateObject12(), function (props)
 }, function (props) {
   return props.theme.labelLetterSpacing;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.labelActiveFontColor : props.theme.labelFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
 }, function (props) {
   return props.theme.labelFontTextTransform;
 });
@@ -374,7 +368,7 @@ var Description = _styledComponents["default"].p(_templateObject13(), function (
 }, function (props) {
   return props.theme.descriptionFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.descriptionActiveFontColor : props.theme.descriptionFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
 });
 
 var StepSeparator = _styledComponents["default"].div(_templateObject14(), function (props) {

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-4e9134c",
+  "version": "0.0.0-4ec6fe9",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -11,10 +11,11 @@
     "url": "https://dxc.com"
   },
   "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",
@@ -28,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"
   },
@@ -70,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);

package/test/{NewDate.test.js → DateInput.test.js}

@@ -2,38 +2,55 @@ import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import DxcNewDate from "../src/new-date/NewDate";
+import DxcDateInput from "../src/date-input/DateInput";
 
-describe("NewDate component tests", () => {
-  test("Renders with correct label, helper text, optional and placeholder", () => {
-    const { getByText, getByRole } = render(
-      <DxcNewDate label="Example label" helperText="Example of helper text" placeholder optional />
+describe("DateInput component tests", () => {
+  test("Renders with correct label, helper text, optional, placeholder and clearable action", () => {
+    const { getByText, getByRole, getAllByRole } = render(
+      <DxcDateInput label="Example label" helperText="Example of helper text" placeholder optional clearable />
     );
     const input = getByRole("textbox");
-
     expect(getByText("Example label")).toBeTruthy();
     expect(getByText("Example of helper text")).toBeTruthy();
     expect(getByText("(Optional)")).toBeTruthy();
     expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
+    userEvent.type(input, "10/10/2010");
+    const closeAction = getAllByRole("button")[0];
+    userEvent.click(closeAction);
+    expect(input.value).toBe("");
   });
 
   test("Renders with personalized error", () => {
-    const { getByText } = render(<DxcNewDate error="Personalized error." />);
-
+    const { getByText } = render(<DxcDateInput error="Personalized error." />);
     expect(getByText("Personalized error.")).toBeTruthy();
   });
 
-  test("Renders with correct format: user typed date but it's invalid", () => {
-    const { getByText, getByRole } = render(<DxcNewDate label="With format MM/dd/yyyy" format="MM/dd/yyyy" />);
+  test("Renders with correct format: user typed date but it's invalid, onBlur error", () => {
+    const onBlur = jest.fn(({ value, error }) => {
+      expect(value).toBe("10/90/2010");
+      expect(error).toBe("Invalid date.");
+    });
+    const { getByRole } = render(<DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onBlur={onBlur} />);
     const input = getByRole("textbox");
 
     userEvent.type(input, "10/90/2010");
     fireEvent.blur(input);
-    expect(getByText("Invalid date.")).toBeTruthy();
+  });
+
+  test("Renders with correct format: user typed date but it's invalid, onChange error", () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(
+      <DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onChange={onChange} />
+    );
+    const input = getByRole("textbox");
+
+    userEvent.type(input, "10/90/2010");
+    expect(onChange).toHaveBeenCalledTimes(10);
+    expect(onChange).toHaveBeenCalledWith({ value: "10/90/2010", error: "Invalid date.", date: null });
   });
 
   test("Calendar renders with correct date: today's date", () => {
-    const { getByText, getByRole } = render(<DxcNewDate />);
+    const { getByText, getByRole } = render(<DxcDateInput />);
     const calendarAction = getByRole("button");
     const d = new Date();
     const options = { weekday: "short", month: "short", day: "numeric" };
@@ -43,7 +60,7 @@ describe("NewDate component tests", () => {
   });
 
   test("Calendar renders with correct date: value prop", () => {
-    const { getByText, getByRole } = render(<DxcNewDate value="20-10-2019" />);
+    const { getByText, getByRole } = render(<DxcDateInput value="20-10-2019" />);
     const calendarAction = getByRole("button");
     const d = new Date(2019, 9, 20);
     const options = { weekday: "short", month: "short", day: "numeric" };
@@ -53,7 +70,7 @@ describe("NewDate component tests", () => {
   });
 
   test("Calendar renders with correct date: user typed value", () => {
-    const { getByText, getByRole } = render(<DxcNewDate />);
+    const { getByText, getByRole } = render(<DxcDateInput />);
     const calendarAction = getByRole("button");
     const d = new Date(2010, 0, 1);
     const options = { weekday: "short", month: "short", day: "numeric" };
@@ -65,7 +82,8 @@ describe("NewDate component tests", () => {
   });
 
   test("Calendar renders with correct date: invalid date, renders with today's date", () => {
-    const { getByText, getByRole } = render(<DxcNewDate />);
+    const onBlur = jest.fn();
+    const { getByText, getByRole } = render(<DxcDateInput onBlur={onBlur} />);
     const calendarAction = getByRole("button");
     const d = new Date();
     const options = { weekday: "short", month: "short", day: "numeric" };
@@ -73,17 +91,18 @@ describe("NewDate component tests", () => {
 
     userEvent.type(input, "01-01-xxxx");
     fireEvent.blur(input);
-    expect(getByText("Invalid date.")).toBeTruthy();
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "01-01-xxxx", error: "Invalid date.", date: null });
     userEvent.click(calendarAction);
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
 
   test("Selecting a date from the calendar with an specific format", () => {
-    const { getByText, getByRole } = render(<DxcNewDate label="With format M-dd-yyyy" format="M-dd-yyyy" />);
+    const { getByText, getByRole } = render(<DxcDateInput label="With format M-dd-yyyy" format="M-dd-yyyy" />);
     const input = getByRole("textbox");
     const calendarAction = getByRole("button");
     userEvent.click(calendarAction);
-    const dayButton = getByRole("button", { name: "10" });
+    const dayButton = getByText("10").closest("button");
     fireEvent.click(dayButton);
     const d = new Date();
     d.setDate(10);
@@ -94,7 +113,7 @@ describe("NewDate component tests", () => {
   });
 
   test("Selecting a date from the calendar (using keyboard presses)", () => {
-    const { getByRole } = render(<DxcNewDate />);
+    const { getByRole } = render(<DxcDateInput />);
     const calendarAction = getByRole("button");
     const input = getByRole("textbox");
 
@@ -111,14 +130,14 @@ describe("NewDate component tests", () => {
   test("onChange & onBlur functions are called correctly", () => {
     const onBlur = jest.fn();
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
+    const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
     const input = getByRole("textbox");
     const d = new Date(2011, 9, 10);
 
     userEvent.type(input, "10-10-2011");
     expect(input.value).toBe("10-10-2011");
     expect(onChange).toHaveBeenCalledTimes(10);
-    expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", date: d });
+    expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
     fireEvent.blur(input);
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
@@ -127,14 +146,13 @@ describe("NewDate component tests", () => {
   test("onChange & onBlur functions are called correctly, also with errors", () => {
     const onBlur = jest.fn();
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
+    const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
     const input = getByRole("textbox");
-    const d = new Date(2011, 9, 10);
 
     userEvent.type(input, "10-10-");
     expect(input.value).toBe("10-10-");
     expect(onChange).toHaveBeenCalledTimes(6);
-    expect(onChange).toHaveBeenCalledWith({ value: "10-10-", date: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
     fireEvent.blur(input);
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
@@ -142,7 +160,7 @@ describe("NewDate component tests", () => {
 
   test("onBlur function removes the error when it is fixed", () => {
     const onBlur = jest.fn();
-    const { getByRole } = render(<DxcNewDate onBlur={onBlur} />);
+    const { getByRole } = render(<DxcDateInput onBlur={onBlur} />);
     const input = getByRole("textbox");
     const d = new Date(2002, 1, 20);
 
@@ -161,7 +179,7 @@ describe("NewDate component tests", () => {
 
   test("onBlur function removes the error when the input is empty", () => {
     const onBlur = jest.fn();
-    const { getByRole } = render(<DxcNewDate onBlur={onBlur} />);
+    const { getByRole } = render(<DxcDateInput onBlur={onBlur} optional />);
     const input = getByRole("textbox");
 
     userEvent.type(input, "test");
@@ -175,8 +193,32 @@ describe("NewDate component tests", () => {
     expect(onBlur).toHaveBeenCalledWith({ value: "", error: null, date: null });
   });
 
-  test("Disabled date (calendar action must be shown but not clickable)", () => {
-    const { getByRole, queryByText } = render(<DxcNewDate disabled />);
+  test("onBlur & onChange functions error: required field (not optional)", () => {
+    const onBlur = jest.fn();
+    const onChange = jest.fn();
+    const { getByRole } = render(<DxcDateInput onBlur={onBlur} onChange={onChange} />);
+    const date = getByRole("textbox");
+
+    userEvent.type(date, "t");
+    expect(date.value).toBe("t");
+    userEvent.clear(date);
+    fireEvent.blur(date);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null,
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null,
+    });
+  });
+
+  test("Disabled date input (calendar action must be shown but not clickable)", () => {
+    const { getByRole, queryByText } = render(<DxcDateInput disabled />);
     const calendarAction = getByRole("button");
     const d = new Date();
     const options = { weekday: "short", month: "short", day: "numeric" };
@@ -187,7 +229,7 @@ describe("NewDate component tests", () => {
   });
 
   test("Input has correct accesibility attributes", () => {
-    const { getByRole } = render(<DxcNewDate label="Date label" />);
+    const { getByRole } = render(<DxcDateInput label="Date input label" />);
     const input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();