@dxc-technology/halstack-react 0.0.0-b1729d7 → 0.0.0-b3de035

package/test/Date.test.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import V3DxcDate from "../src/date/Date";
+import DxcDate from "../src/date/Date";
 
 const defaultFormat = "DD-MM-YYYY";
 
 describe("Date component general tests", () => {
   test("Date renders correctly", () => {
-    const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
+    const { getByPlaceholderText } = render(<DxcDate 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(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate 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(<V3DxcDate label="Birthdate" value="" placeholder />);
+    rerender(<DxcDate 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(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate 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(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -50,20 +50,20 @@ 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(<V3DxcDate label="Birthdate" value="16-10-2020" />);
+    const { getByRole, getByText, getByTestId } = render(<DxcDate 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(
-      <V3DxcDate label="Birthdate" value="30-03-1981" placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
-    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    rerender(<DxcDate 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(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate 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(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate 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(
-      <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
+      <DxcDate 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(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate 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(
-      <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -151,7 +151,7 @@ describe("Controlled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
@@ -165,7 +165,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
     });
 
-    const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
@@ -178,7 +178,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
@@ -191,9 +191,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("2020/10/16");
     });
 
-    const component = render(
-      <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
-    );
+    const component = render(<DxcDate 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" });
@@ -202,7 +200,7 @@ describe("Controlled Date Component", () => {
   });
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
-    const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
+    const component = render(<DxcDate label="Birthdate" value="01-10-2020" />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "1" });
@@ -211,7 +209,7 @@ describe("Controlled Date Component", () => {
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -224,7 +222,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30-03-81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -237,7 +235,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30/03/81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -252,14 +250,14 @@ describe("Uncontrolled Date Component", () => {
 
   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(
-      <V3DxcDate label="Birthdate" placeholder />
+      <DxcDate label="Birthdate" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
-    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
     const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
@@ -271,7 +269,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("something");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -284,7 +282,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -298,7 +296,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YY");
@@ -313,7 +311,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("11-15-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -328,7 +326,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -339,7 +337,7 @@ describe("Uncontrolled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
@@ -349,7 +347,7 @@ describe("Uncontrolled Date Component", () => {
   });
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
-    const component = render(<V3DxcDate label="Birthdate" placeholder />);
+    const component = render(<DxcDate label="Birthdate" placeholder />);
     // const input = component.getByRole("textbox");
     const input = component.getByPlaceholderText(defaultFormat);
 
@@ -361,7 +359,7 @@ describe("Uncontrolled Date Component", () => {
   });
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -372,7 +370,7 @@ describe("Uncontrolled Date Component", () => {
     const onBlur = jest.fn((returnedValue) => {
       expect(returnedValue).toBe("10-02-2020");
     });
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YYYY");
 
@@ -385,7 +383,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue).toBe("10/02/20");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");

package/test/Heading.test.js

@@ -3,33 +3,81 @@ import { render } from "@testing-library/react";
 import DxcHeading from "../src/heading/Heading";
 
 describe("Heading component tests", () => {
-  test("Footer renders with default level", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test"></DxcHeading>);
+  test("Heading renders with default level", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test"></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 1 })).toBeTruthy();
   });
 
-  test("Footer renders with level 1", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={1}></DxcHeading>);
+  test("Heading renders with level 1", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={1}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 1 })).toBeTruthy();
   });
 
-  test("Footer renders with level 2", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={2}></DxcHeading>);
+  test("Heading renders with level 2", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={2}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 2 })).toBeTruthy();
   });
 
-  test("Footer renders with level 3", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={3}></DxcHeading>);
+  test("Heading renders with level 3", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={3}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 3 })).toBeTruthy();
   });
 
-  test("Footer renders with level 4", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={4}></DxcHeading>);
+  test("Heading renders with level 4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={4}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
   });
 
-  test("Footer renders with level 5", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={5}></DxcHeading>);
+  test("Heading renders with level 5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with default level and as h5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" as="h5"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 1 and as h5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={1} as="h5"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 2 and as h4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={2} as="h4"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 3 and as h2", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={3} as="h2"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 2 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 4 and as h3", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={4} as="h3"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 3 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 5 as h4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5} as="h4"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 5 and invalid as", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5} as="h4afdssf"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
   });
 });

package/test/Upload.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { render, fireEvent, act, createEvent } from "@testing-library/react";
-import V3DxcUpload from "../src/upload/Upload";
+import DxcUpload from "../src/upload/Upload";
 
 describe("Upload component tests", () => {
   test("Upload renders with correct text", () => {
-    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
+    const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
     expect(getByText("There are no files to upload")).toBeTruthy();
     expect(getByText("Drag and drop your files here or choose one from your computer")).toBeTruthy();
     expect(getByText("CHOOSE FILES")).toBeTruthy();
@@ -12,7 +12,7 @@ describe("Upload component tests", () => {
 
   test("Upload shows file information", () => {
     const myfunction = jest.fn();
-    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
+    const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);
@@ -36,7 +36,7 @@ describe("Upload component tests", () => {
   test("Calls correct function callbackUpload", () => {
     const onCallbackUpload = jest.fn(() => new Promise((resolve) => setTimeout(resolve, 1000)));
     const myfunction = jest.fn();
-    const { getByText } = render(<V3DxcUpload margin="small" callbackUpload={onCallbackUpload}></V3DxcUpload>);
+    const { getByText } = render(<DxcUpload margin="small" callbackUpload={onCallbackUpload}></DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);

package/test/{Select.test.js → V3Select.test.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import DxcSelect from "../src/select/Select";
+import V3DxcSelect from "../src/V3Select/V3Select";
 
 const optionsWithoutIcon = [
   {
@@ -63,13 +63,13 @@ const optionsWithIcons = [
 
 describe("Select component tests", () => {
   test("Select renders with correct label", () => {
-    const { getByText } = render(<DxcSelect label="test-select-label"></DxcSelect>);
+    const { getByText } = render(<V3DxcSelect label="test-select-label"></V3DxcSelect>);
     expect(getByText("test-select-label")).toBeTruthy();
   });
 
   test("Select renders options when select is clicked", () => {
     const { getByText, getByRole, queryByText } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon}></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon}></V3DxcSelect>
     );
     //Before are not shown
     expect(queryByText("Amazon")).toBeFalsy();
@@ -86,7 +86,7 @@ describe("Select component tests", () => {
 
   test("Select renders options with icons before", () => {
     const { getByRole, getByTestId } = render(
-      <DxcSelect label="test-select-name" options={optionsWithIcons}></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithIcons}></V3DxcSelect>
     );
     const select = getByRole("button");
     act(() => {
@@ -98,7 +98,7 @@ describe("Select component tests", () => {
 
   test("Select renders options with icons after", () => {
     const { getByRole, getByTestId } = render(
-      <DxcSelect label="test-select-name" options={optionsWithIcons} iconPosition="after"></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithIcons} iconPosition="after"></V3DxcSelect>
     );
     const select = getByRole("button");
     act(() => {
@@ -110,21 +110,21 @@ describe("Select component tests", () => {
 
   test("Select renders with a default value", () => {
     const { getByText } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon} value={1}></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon} value={1}></V3DxcSelect>
     );
     expect(getByText("Amazon")).toBeTruthy();
   });
 
   test("Select renders with multiple default values", () => {
     const { getByText } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon} value={[1, 2]} multiple></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon} value={[1, 2]} multiple></V3DxcSelect>
     );
     expect(getByText("Amazon, Ebay")).toBeTruthy();
   });
 
   test("Disabled select is not clickable", () => {
     const { getByText, queryByText } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon} disabled></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon} disabled></V3DxcSelect>
     );
     expect(queryByText("Amazon")).toBeFalsy();
     expect(queryByText("Ebay")).toBeFalsy();
@@ -141,7 +141,7 @@ describe("Select component tests", () => {
   test("Controlled select with unique value", () => {
     const onChange = jest.fn();
     const { getByText, getAllByText } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon} value={1} onChange={onChange}></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon} value={1} onChange={onChange}></V3DxcSelect>
     );
     const select = getByText("Amazon");
     act(() => {
@@ -159,13 +159,13 @@ describe("Select component tests", () => {
   test("Controlled select with multiple values", () => {
     const onChange = jest.fn();
     const { getByText } = render(
-      <DxcSelect
+      <V3DxcSelect
         label="test-select-name"
         options={optionsWithoutIcon}
         value={[1, 2]}
         multiple
         onChange={onChange}
-      ></DxcSelect>
+      ></V3DxcSelect>
     );
     const select = getByText("Amazon, Ebay");
     act(() => {
@@ -183,7 +183,7 @@ describe("Select component tests", () => {
   test("Uncontrolled select with multiple values", () => {
     const onChange = jest.fn();
     const { getByText, getByRole } = render(
-      <DxcSelect label="test-select-name" options={optionsWithoutIcon} multiple onChange={onChange}></DxcSelect>
+      <V3DxcSelect label="test-select-name" options={optionsWithoutIcon} multiple onChange={onChange}></V3DxcSelect>
     );
     const select = getByRole("button");
     act(() => {

package/dist/checkbox/Checkbox.stories.js

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Checkbox", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Checkbox",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange,
-    required: true
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    disabled: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled unchecked",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: true,
-    disabled: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled checked",
-    labelPosition: "after",
-    onChange: onChange
-  })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Checkbox",
-    labelPosition: "after",
-    onChange: onChange,
-    required: true
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    disabled: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled unchecked",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: true,
-    disabled: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled checked",
-    labelPosition: "after",
-    onChange: onChange
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
-    disabled: (0, _addonKnobs["boolean"])("Disabled", false),
-    labelPosition: (0, _addonKnobs.select)("Label position", {
-      before: "before",
-      after: "after"
-    }, "before"),
-    theme: (0, _addonKnobs.select)("Theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
-    required: (0, _addonKnobs["boolean"])("Required", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Checkbox", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, props, {
-    value: "TestValue",
-    onChange: onChange
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});