@dxc-technology/halstack-react 0.0.0-9196773 → 0.0.0-933ff75

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");

package/test/Footer.test.js

@@ -5,13 +5,8 @@ import icon from "../../app/src/images/linkedin.svg";
 
 describe("Footer component tests", () => {
   test("Footer renders with default logo", () => {
-    const { getByRole } = render(<DxcFooter></DxcFooter>);
-    expect(getByRole("img")).toBeTruthy();
-  });
-
-  test("Footer renders with logo", () => {
-    const { getByRole } = render(<DxcFooter logoSrc={icon}></DxcFooter>);
-    expect(getByRole("img")).toBeTruthy();
+    const { getByTitle } = render(<DxcFooter></DxcFooter>);
+    expect(getByTitle("DXC Logo")).toBeTruthy();
   });
 
   test("Footer renders with social links", () => {

package/test/Header.test.js

@@ -5,25 +5,20 @@ import icon from "../../app/src/images/linkedin.svg";
 
 describe("Header component tests", () => {
   test("Header renders with default logo", () => {
-    const { getByRole } = render(<DxcHeader></DxcHeader>);
-    expect(getByRole("img")).toBeTruthy();
-  });
-
-  test("Header renders with logo", () => {
-    const { getByRole } = render(<DxcHeader logoSrc={icon}></DxcHeader>);
-    expect(getByRole("img")).toBeTruthy();
+    const { getByTitle } = render(<DxcHeader></DxcHeader>);
+    expect(getByTitle("DXC Logo")).toBeTruthy();
   });
 
   test("Call correct function on logo click", () => {
     const onClick = jest.fn();
-    const { getByRole } = render(<DxcHeader onClick={onClick}></DxcHeader>);
-    const logo = getByRole("img");
+    const { getByTitle } = render(<DxcHeader onClick={onClick}></DxcHeader>);
+    const logo = getByTitle("DXC Logo");
     fireEvent.click(logo);
     expect(onClick).toHaveBeenCalled();
   });
 
   test("Header renders with correct children", () => {
-    //We need to force the offsetWidth value
+    // We need to force the offsetWidth value
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 1024 });
 
     const { getByText } = render(<DxcHeader content={<p>header-child-text</p>}></DxcHeader>);

package/test/Slider.test.js

@@ -4,7 +4,7 @@ import DxcSlider from "../src/slider/Slider";
 
 describe("Slider component tests", () => {
   test("Slider renders with correct text", () => {
-    const { getByText } = render(<DxcSlider minValue={0} maxValue={100} showLimitsValues></DxcSlider>);
+    const { getByText } = render(<DxcSlider minValue={0} maxValue={100} showLimitsValues />);
     expect(getByText("0")).toBeTruthy();
     expect(getByText("100")).toBeTruthy();
   });
@@ -12,37 +12,29 @@ describe("Slider component tests", () => {
   test("Calls correct function onChange in controlled slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput></DxcSlider>
+      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
     );
     act(() => {
       fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
     });
-    expect(onChange).toHaveBeenCalledWith("25");
+    expect(onChange).toHaveBeenCalledWith(25);
   });
 
   test("Calls correct function onChange in uncontrolled slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues showInput></DxcSlider>
+      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues showInput />
     );
     act(() => {
       fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
     });
-    expect(onChange).toHaveBeenCalledWith("25");
+    expect(onChange).toHaveBeenCalledWith(25);
   });
 
   test("Disabled slider have disabled input", () => {
     const onChange = jest.fn();
     const { getByRole } = render(
-      <DxcSlider
-        minValue={0}
-        maxValue={100}
-        onChange={onChange}
-        showLimitsValues
-        disabled
-        showInput
-        value={13}
-      ></DxcSlider>
+      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues disabled showInput value={13} />
     );
     act(() => {
       fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
@@ -54,7 +46,7 @@ describe("Slider component tests", () => {
   test("Calls correct function onDragEnd", () => {
     const onDragEnd = jest.fn();
     const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} showLimitsValues showInput onDragEnd={onDragEnd} value={25}></DxcSlider>
+      <DxcSlider minValue={0} maxValue={100} showLimitsValues showInput onDragEnd={onDragEnd} value={25} />
     );
     act(() => {
       fireEvent.mouseDown(getByRole("slider"));
@@ -64,7 +56,7 @@ describe("Slider component tests", () => {
   });
 
   test("Calls correct function labelFormatCallback", () => {
-    const labelFormatCallback = jest.fn(x => `${x}$`);
+    const labelFormatCallback = jest.fn((x) => `${x}$`);
     const { getByText } = render(
       <DxcSlider
         minValue={0}
@@ -73,7 +65,7 @@ describe("Slider component tests", () => {
         showInput
         value={25}
         labelFormatCallback={labelFormatCallback}
-      ></DxcSlider>
+      />
     );
     expect(getByText("0$")).toBeTruthy();
     expect(getByText("100$")).toBeTruthy();

package/test/{NewTextarea.test.js → Textarea.test.js}

@@ -1,21 +1,21 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import DxcNewTextarea from "../src/new-textarea/NewTextarea";
+import DxcTextarea from "../src/textarea/Textarea";
 
-describe("NewTextarea component tests", () => {
+describe("Textarea component tests", () => {
   test("Renders with correct label", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" />);
+    const { getByText } = render(<DxcTextarea label="Example label" />);
     expect(getByText("Example label")).toBeTruthy();
   });
   test("Renders with correct label and helper text", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" />);
+    const { getByText } = render(<DxcTextarea label="Example label" helperText="Example helper text" />);
     expect(getByText("Example label")).toBeTruthy();
     expect(getByText("Example helper text")).toBeTruthy();
   });
   test("Renders with correct label and optional", () => {
     const { getByText, getByRole } = render(
-      <DxcNewTextarea label="Example label" helperText="Example helper text" optional />
+      <DxcTextarea label="Example label" helperText="Example helper text" optional />
     );
     const textarea = getByRole("textbox");
     expect(getByText("Example label")).toBeTruthy();
@@ -24,24 +24,24 @@ describe("NewTextarea component tests", () => {
     expect(textarea.getAttribute("aria-required")).toBe("false");
   });
   test("Renders with correct placeholder", () => {
-    const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
+    const { getByRole } = render(<DxcTextarea placeholder="Placeholder" />);
     const textarea = getByRole("textbox");
     expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
   });
   test("Renders with error message", () => {
-    const { getByText, getByRole } = render(<DxcNewTextarea error="Error message." />);
+    const { getByText, getByRole } = render(<DxcTextarea error="Error message." />);
     const textarea = getByRole("textbox");
     expect(getByText("Error message.")).toBeTruthy();
     expect(textarea.getAttribute("aria-invalid")).toBe("true");
     expect(textarea.getAttribute("aria-describedBy")).not.toBeNull();
   });
   test("Renders with correct default rows", () => {
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
+    const { getByLabelText } = render(<DxcTextarea label="Example label" rows={10} />);
     const textarea = getByLabelText("Example label");
     expect(textarea.rows).toBe(10);
   });
   test("Renders with correct accesibility attributes", () => {
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" />);
+    const { getByLabelText } = render(<DxcTextarea label="Example label" />);
     const textarea = getByLabelText("Example label");
     expect(textarea.getAttribute("aria-invalid")).toBe("false");
     expect(textarea.getAttribute("aria-describedBy")).toBeNull();
@@ -51,7 +51,7 @@ describe("NewTextarea component tests", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
+      <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
     );
     const textarea = getByLabelText("Example label");
 
@@ -67,7 +67,7 @@ describe("NewTextarea component tests", () => {
   test("Not optional constraint (onChange)", () => {
     const onChange = jest.fn();
     const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
+      <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
     );
     const textarea = getByLabelText("Example label");
 
@@ -83,7 +83,7 @@ describe("NewTextarea component tests", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const { getByLabelText } = render(
-      <DxcNewTextarea
+      <DxcTextarea
         label="Example label"
         placeholder="Placeholder"
         onChange={onChange}
@@ -112,7 +112,7 @@ describe("NewTextarea component tests", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const { getByLabelText } = render(
-      <DxcNewTextarea
+      <DxcTextarea
         label="Example label"
         placeholder="Placeholder"
         onChange={onChange}
@@ -141,7 +141,7 @@ describe("NewTextarea component tests", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
+      <DxcTextarea
         label="Example label"
         placeholder="Placeholder"
         onChange={onChange}
@@ -174,7 +174,7 @@ describe("NewTextarea component tests", () => {
   });
   test("onBlur function is called correctly", () => {
     const onBlur = jest.fn();
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
+    const { getByLabelText } = render(<DxcTextarea label="Example label" onBlur={onBlur} />);
     const textarea = getByLabelText("Example label");
     fireEvent.change(textarea, { target: { value: "Blur test" } });
     fireEvent.blur(textarea);
@@ -183,9 +183,7 @@ describe("NewTextarea component tests", () => {
   });
   test("onChange function is called correctly", () => {
     const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} />
-    );
+    const { getByLabelText } = render(<DxcTextarea label="Example label" value="Test value" onChange={onChange} />);
     const textarea = getByLabelText("Example label");
     fireEvent.change(textarea, { target: { value: "Controlled test" } });
     expect(onChange).toHaveBeenCalled();

package/test/{TextArea.test.js → V3TextArea.test.js}

@@ -1,17 +1,17 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import DxcTextarea from "../src/textarea/Textarea";
+import V3DxcTextarea from "../src/V3Textarea/V3Textarea";
 
 describe("TextArea component tests", () => {
   test("TextArea renders with correct text", () => {
-    const { getByText } = render(<DxcTextarea label="TextArea label" />);
+    const { getByText } = render(<V3DxcTextarea label="TextArea label" />);
     expect(getByText("TextArea label")).toBeTruthy();
   });
 
   test("onChange function is called correctly", () => {
     const onChange = jest.fn();
 
-    const { getByRole } = render(<DxcTextarea label="TextArea label" onChange={onChange} />);
+    const { getByRole } = render(<V3DxcTextarea label="TextArea label" onChange={onChange} />);
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "Testing..." } });
     expect(onChange).toHaveBeenCalled();
@@ -21,7 +21,7 @@ describe("TextArea component tests", () => {
   test("onBlur function is called correctly", () => {
     const onBlur = jest.fn();
 
-    const { getByRole } = render(<DxcTextarea label="TextArea label" onBlur={onBlur} />);
+    const { getByRole } = render(<V3DxcTextarea label="TextArea label" onBlur={onBlur} />);
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "Testing..." } });
     fireEvent.blur(input);
@@ -31,7 +31,7 @@ describe("TextArea component tests", () => {
 
   test("Controlled component", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcTextarea label="TextArea label" value="TextArea Value" onChange={onChange} />);
+    const { getByRole } = render(<V3DxcTextarea label="TextArea label" value="TextArea Value" onChange={onChange} />);
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "Tests" } });
     expect(onChange).toHaveBeenCalled();
@@ -41,12 +41,11 @@ describe("TextArea component tests", () => {
 
   test("Uncontrolled component", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcTextarea label="TextArea label" onChange={onChange} />);
+    const { getByRole } = render(<V3DxcTextarea label="TextArea label" onChange={onChange} />);
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "Tests" } });
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith("Tests");
     expect(input.value).toBe("Tests");
   });
-
 });

package/dist/footer/dxc_logo.svg

@@ -1,15 +0,0 @@
-<svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
-  <g id="g12">
-    <path id="path14" d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5" transform="translate(-68.528 65.45)" fill="#fff"/>
-    <path id="path16" d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96" transform="translate(-77.56 65.45)" fill="#fff"/>
-    <path id="path18" d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813" transform="translate(-86.019 65.583)" fill="#fff"/>
-    <path id="path20" d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594" transform="translate(-95.903 65.45)" fill="#fff"/>
-    <path id="path22" d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058" transform="translate(-105.869 65.45)" fill="#fff"/>
-    <path id="path24" d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145" transform="translate(-115.631 65.583)" fill="#fff"/>
-    <path id="path26" d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786" transform="translate(-126.654 65.45)" fill="#fff"/>
-    <path id="path28" d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145" transform="translate(-135.016 65.583)" fill="#fff"/>
-    <path id="path30" d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5" transform="translate(-145.284 65.583)" fill="#fff"/>
-    <path id="path32" d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46" transform="translate(-154.162 65.45)" fill="#fff"/>
-    <path id="path34" d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892" transform="translate(-21.08 69.298)" fill="#fff"/>
-  </g>
-</svg>