@dxc-technology/halstack-react 0.0.0-e441916 → 0.0.0-e628009

package/test/Textarea.test.js

@@ -0,0 +1,193 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DxcTextarea from "../src/textarea/Textarea";
+
+describe("Textarea component tests", () => {
+  test("Renders with correct label", () => {
+    const { getByText } = render(<DxcTextarea label="Example label" />);
+    expect(getByText("Example label")).toBeTruthy();
+  });
+  test("Renders with correct label and 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(
+      <DxcTextarea label="Example label" helperText="Example helper text" optional />
+    );
+    const textarea = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+    expect(textarea.getAttribute("aria-required")).toBe("false");
+  });
+  test("Renders with correct 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(<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(<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(<DxcTextarea label="Example label" />);
+    const textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-invalid")).toBe("false");
+    expect(textarea.getAttribute("aria-describedBy")).toBeNull();
+    expect(textarea.getAttribute("aria-required")).toBe("true");
+  });
+  test("Not optional constraint (onBlur)", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByLabelText } = render(
+      <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
+    );
+    const textarea = getByLabelText("Example label");
+
+    fireEvent.focus(textarea);
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
+    fireEvent.change(textarea, { target: { value: "Test" } });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "Test", error: null });
+  });
+  test("Not optional constraint (onChange)", () => {
+    const onChange = jest.fn();
+    const { getByLabelText } = render(
+      <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
+    );
+    const textarea = getByLabelText("Example label");
+
+    fireEvent.focus(textarea);
+    fireEvent.change(textarea, { target: { value: "Test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "Test", error: null });
+    userEvent.clear(textarea);
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
+  });
+  test("Pattern constraint", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByLabelText } = render(
+      <DxcTextarea
+        label="Example label"
+        placeholder="Placeholder"
+        onChange={onChange}
+        onBlur={onBlur}
+        margin={{ left: "medium", right: "medium" }}
+        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
+      />
+    );
+    const textarea = getByLabelText("Example label");
+
+    fireEvent.change(textarea, { target: { value: "pattern test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
+    userEvent.clear(textarea);
+    fireEvent.change(textarea, { target: { value: "pattern4&" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "pattern4&", error: null });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "pattern4&", error: null });
+  });
+  test("Length constraint", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByLabelText } = render(
+      <DxcTextarea
+        label="Example label"
+        placeholder="Placeholder"
+        onChange={onChange}
+        onBlur={onBlur}
+        margin={{ left: "medium", right: "medium" }}
+        length={{ min: 5, max: 10 }}
+      />
+    );
+    const textarea = getByLabelText("Example label");
+
+    fireEvent.change(textarea, { target: { value: "test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    userEvent.clear(textarea);
+    fireEvent.change(textarea, { target: { value: "length" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "length", error: null });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "length", error: null });
+  });
+  test("Pattern and length constraints", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByLabelText, getByText, queryByText } = render(
+      <DxcTextarea
+        label="Example label"
+        placeholder="Placeholder"
+        onChange={onChange}
+        onBlur={onBlur}
+        margin={{ left: "medium", right: "medium" }}
+        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
+        length={{ min: 5, max: 10 }}
+      />
+    );
+    const textarea = getByLabelText("Example label");
+
+    fireEvent.change(textarea, { target: { value: "test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    fireEvent.change(textarea, { target: { value: "tests" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
+    fireEvent.change(textarea, { target: { value: "tests4&" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "tests4&", error: null });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "tests4&", error: null });
+  });
+  test("onBlur function is called correctly", () => {
+    const onBlur = jest.fn();
+    const { getByLabelText } = render(<DxcTextarea label="Example label" onBlur={onBlur} />);
+    const textarea = getByLabelText("Example label");
+    fireEvent.change(textarea, { target: { value: "Blur test" } });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
+  });
+  test("onChange function is called correctly", () => {
+    const onChange = jest.fn();
+    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();
+    expect(onChange).toHaveBeenCalledWith({ value: "Controlled test", error: null });
+    expect(textarea.value).toBe("Test value");
+  });
+});

package/test/ToggleGroup.test.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import DxcToggleGroup from "../src/toggle-group/ToggleGroup";
+
+const options = [
+  {
+    value: 1,
+    label: "Amazon",
+  },
+  {
+    value: 2,
+    label: "Ebay",
+  },
+  {
+    value: 3,
+    label: "Apple",
+  },
+  {
+    value: 4,
+    label: "Google",
+  },
+];
+
+describe("Toggle group component tests", () => {
+  test("Toggle group renders with correct labels", () => {
+    const { getByText } = render(
+      <DxcToggleGroup label="Toggle group label" helperText="Toggle group helper text" options={options} />
+    );
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    expect(getByText("Apple")).toBeTruthy();
+    expect(getByText("Google")).toBeTruthy();
+  });
+
+  test("Uncontrolled toggle group calls correct function on change with value", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  test("Controlled toggle group calls correct function on change with value", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={1} />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  test("Function on change is not called when disable", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} disabled />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} multiple />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith([2]);
+  });
+
+  test("Controlled multiple toggle returns always same values", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={[1]} multiple />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith([1, 2]);
+
+    const option2 = getByText("Google");
+    fireEvent.click(option2);
+    expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
+  });
+});

package/test/Upload.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { render, fireEvent, act, createEvent } from "@testing-library/react";
-import DxcUpload from "../src/upload/Upload";
+import V3DxcUpload from "../src/upload/Upload";
 
 describe("Upload component tests", () => {
   test("Upload renders with correct text", () => {
-    const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
     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(<DxcUpload margin="small"></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);
@@ -34,9 +34,9 @@ describe("Upload component tests", () => {
   });
 
   test("Calls correct function callbackUpload", () => {
-    const onCallbackUpload = jest.fn(() => new Promise(resolve => setTimeout(resolve, 1000)));
+    const onCallbackUpload = jest.fn(() => new Promise((resolve) => setTimeout(resolve, 1000)));
     const myfunction = jest.fn();
-    const { getByText } = render(<DxcUpload margin="small" callbackUpload={onCallbackUpload}></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small" callbackUpload={onCallbackUpload}></V3DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);

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/accordion/Accordion.stories.js

@@ -1,207 +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 _Accordion = _interopRequireDefault(require("./Accordion"));
-
-var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingTop: "50px",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    mode: (0, _addonKnobs.select)("mode", {
-      "default": "default",
-      alternative: "alternative"
-    }, "default"),
-    label: (0, _addonKnobs.text)("label", "Test Accordion"),
-    assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    iconPosition: (0, _addonKnobs.select)("icon position", {
-      before: "before",
-      after: "after"
-    }, "before")
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/accordion/readme.md

@@ -1,96 +0,0 @@
-# DXC Accordion Component
-
-## Usage
-
-```js
-import { DxcAccordion } from "@dxc-technology/halstack-react";
-
-<DxcAccordion onChange={handleOnChange} label="Test Accordion" />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-     <tr>
-        <td>mode: 'default'|'alternative'</td>
-        <td><code>'default'</code></td>
-        <td>Mode for the color of the accordion.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>The panel label.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>URL of the icon that will be placed next to panel label.</td>
-    </tr>
-    <tr>
-        <td>iconPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>Whether the icon should appear after or before the label.</td>
-    </tr>
-    <tr>
-        <td>assistiveText: string</td>
-        <td></td>
-        <td>Assistive text to be placed on the right side of the panel.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the icon to open/close the panel. The state of the panel(opened/closed) should be passed as a parameter.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' |'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available button modes.</td>
-    </tr>
-
-</table>
-
-## Examples
-
-- Basic accordion - Light theme - Enabled - With assistive text - Icon after label
-
-```js
-import React from "react";
-
-import { DxcAccordion } from "@dxc-technology/halstack-react";
-
-function App() {
-  const handleOnChange = event => {
-    console.log("Accordion clicked");
-  };
-
-  return (
-    <div>
-      <Accordion
-        theme="light"
-        label="Fifth accordion"
-        assistiveText="Extra information"
-        iconPosition="after"
-        iconSrc={logo}
-        onChange={onChange}
-      >
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </Accordion>
-    </div>
-  );
-}
-
-export default App;
-```