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

package/dist/upload/file-upload/FileToUpload.js

@@ -1,189 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Icons = require("./Icons");
-
-var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  border: none;\n  display: flex;\n  margin-right: 30px;\n  margin-top: 11px;\n  padding: 0px;\n  background: none;\n  &:focus {\n    visibility: visible;\n  }\n  & svg {\n    fill: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 12px;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 30px;\n  width: 70px;\n  height: 52px;\n  & svg {\n    width: 70px;\n    height: 52px;\n  }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 30px;\n  width: 70px;\n  height: 52px;\n  object-fit: contain;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 25px;\n  margin-left: 40px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  max-width: 100%;\n  height: 52px;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 25px;\n  padding-top: 25px;\n  border-bottom: ", " solid ", ";\n  :hover {\n    background: ", ";\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcFileToUpload = function DxcFileToUpload(_ref) {
-  var _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "" : _ref$type,
-      image = _ref.image,
-      onDelete = _ref.onDelete,
-      tabIndexValue = _ref.tabIndexValue;
-
-  var icon = type.includes("video") && _Icons.videoIcon || type.includes("audio") && _Icons.audioIcon || _Icons.defaultIcon;
-
-  var hasImage = image && image.includes("image");
-  var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.upload
-  }, _react["default"].createElement(DXCFileToUpload, null, _react["default"].createElement(FileContent, null, hasImage && _react["default"].createElement(FileImage, {
-    src: image
-  }) || _react["default"].createElement(FileIconContainer, null, icon), _react["default"].createElement(FileInfo, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileType, null, type)), _react["default"].createElement(DeleteFile, {
-    onClick: onDelete,
-    tabIndex: tabIndexValue
-  }, _Icons.closeIcon))));
-};
-
-DxcFileToUpload.propTypes = {
-  name: _propTypes["default"].string,
-  type: _propTypes["default"].string,
-  image: _propTypes["default"].string,
-  onDelete: _propTypes["default"].func
-};
-
-var DXCFileToUpload = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.fileUnderlineThickness;
-}, function (props) {
-  return props.theme.fileUnderlineColor;
-}, function (props) {
-  return props.theme.hoverFileColor;
-});
-
-var FileContent = _styledComponents["default"].div(_templateObject2());
-
-var FileImage = _styledComponents["default"].img(_templateObject3());
-
-var FileIconContainer = _styledComponents["default"].div(_templateObject4());
-
-var FileInfo = _styledComponents["default"].div(_templateObject5());
-
-var FileName = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.fileNameFontSize;
-}, function (props) {
-  return props.theme.fileNameFontStyle;
-}, function (props) {
-  return props.theme.fileNameFontWeight;
-}, function (props) {
-  return props.theme.fileNameFontTextTransform;
-}, function (props) {
-  return props.theme.fileNameFontColor;
-});
-
-var FileType = _styledComponents["default"].div(_templateObject7(), function (props) {
-  return props.theme.fileTypeFontSize;
-}, function (props) {
-  return props.theme.fileTypeFontStyle;
-}, function (props) {
-  return props.theme.fileTypeFontWeight;
-}, function (props) {
-  return props.theme.fileTypeFontTextTransform;
-}, function (props) {
-  return props.theme.fileTypeFontColor;
-});
-
-var DeleteFile = _styledComponents["default"].button(_templateObject8(), function (props) {
-  return props.theme.fileDeleteIconSize;
-}, function (props) {
-  return props.theme.fileDeleteIconSize;
-}, function (props) {
-  return props.theme.fileDeleteIconColor;
-}, function (props) {
-  return props.theme.fileDeleteIconSize;
-}, function (props) {
-  return props.theme.fileDeleteIconSize;
-});
-
-var _default = DxcFileToUpload;
-exports["default"] = _default;

package/dist/upload/transaction/Transaction.js

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
-var _Icons = require("./Icons");
-
-var _Spinner = _interopRequireDefault(require("../../spinner/Spinner"));
-
-var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
-
-var _BackgroundColorContext = require("../../BackgroundColorContext.js");
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: 80%;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 25px;\n  height: 20px;\n  max-width: 20%;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-right: 16px;\n  width: 80%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 16px;\n  max-width: 20%;\n  & svg {\n    fill: ", ";\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n  color: ", ";\n  .MuiCircularProgress-root {\n    width: 28px !important;\n    height: 28px !important;\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcTransaction = function DxcTransaction(_ref) {
-  var _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "" : _ref$type,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? "" : _ref$status,
-      _ref$message = _ref.message,
-      message = _ref$message === void 0 ? "" : _ref$message;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var icon = status === "error" && (type.includes("image") && _Icons.imageIconError || type.includes("video") && _Icons.videoIconError || type.includes("audio") && _Icons.audioIconError || _Icons.defaultIconError) || type.includes("image") && _Icons.imageIcon || type.includes("video") && _Icons.videoIcon || type.includes("audio") && _Icons.audioIcon || _Icons.defaultIcon;
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.upload
-  }, _react["default"].createElement(DXCTransaction, {
-    status: status
-  }, _react["default"].createElement(FileImage, {
-    status: status
-  }, icon), status === "processing" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.upload.backgroundColor
-  }, _react["default"].createElement(_Spinner["default"], {
-    mode: "small"
-  }))) || status === "success" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileStatus, null, _Icons.successIcon)) || status === "error" && _react["default"].createElement(FileData, null, _react["default"].createElement(_Tooltip["default"], {
-    title: message
-  }, _react["default"].createElement(FileName, null, name)), _react["default"].createElement(FileStatus, null, _Icons.errorIcon), " ")));
-};
-
-DxcTransaction.propTypes = {
-  name: _propTypes["default"].string,
-  type: _propTypes["default"].string,
-  status: _propTypes["default"].string,
-  message: _propTypes["default"].string
-};
-
-var DXCTransaction = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.status === "error" && props.theme.errorColor;
-});
-
-var FileImage = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return "".concat(props.theme.uploadedFileIconSize, " ").concat(props.theme.uploadedFileIconSize);
-}, function (props) {
-  return props.theme.uploadedFileIconSize;
-}, function (props) {
-  return props.theme.uploadedFileIconSize;
-}, function (props) {
-  return props.status === "error" && props.theme.errorColor || props.theme.uploadedFileIconColor;
-});
-
-var FileName = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.theme.fileNameFontSize;
-}, function (props) {
-  return props.theme.fileNameFontStyle;
-}, function (props) {
-  return props.theme.fileNameFontWeight;
-}, function (props) {
-  return props.theme.fileNameFontTextTransform;
-}, function (props) {
-  return props.theme.fileNameFontColor;
-});
-
-var FileStatus = _styledComponents["default"].div(_templateObject4());
-
-var FileData = _styledComponents["default"].div(_templateObject5());
-
-var _default = DxcTransaction;
-exports["default"] = _default;

package/dist/upload/transactions/Transactions.js

@@ -1,138 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Transaction = _interopRequireDefault(require("../transaction/Transaction"));
-
-var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 4px;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 35px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  max-width: 100%;\n  width: 35%;\n  padding-top: 46px;\n  padding-left: 65px;\n  border-radius: 4px 0px 4px 4px;\n  box-shadow: 0px 0px 1px ", ";\n  background-color: ", ";\n  overflow: auto;\n  ::-webkit-scrollbar {\n    width: 3px;\n    height: 3px;\n  }\n  ::-webkit-scrollbar-track {\n    border-radius: 3px;\n    background-color: ", ";\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: 3px;\n    background-color: ", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcTransactions = function DxcTransactions(_ref) {
-  var transactions = _ref.transactions;
-  var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.upload
-  }, _react["default"].createElement(DXCTransactions, null, _react["default"].createElement(TransactionsText, null, _react["default"].createElement(TransactionsTitle, null, "Files uploaded"), _react["default"].createElement(TransactionsSubTitle, null, _react["default"].createElement(TransactionsNumber, null, transactions && transactions.filter(function (file) {
-    return file.status === "success";
-  }).length), " ", "documents in total")), transactions.map(function (transaction) {
-    return _react["default"].createElement(_Transaction["default"], {
-      name: transaction.name,
-      type: transaction.type,
-      status: transaction.status,
-      message: transaction.message
-    });
-  })));
-};
-
-DxcTransactions.propTypes = {
-  transactions: _propTypes["default"].array
-};
-
-var DXCTransactions = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.shadowColor;
-}, function (props) {
-  return props.theme.backgroundColor;
-}, function (props) {
-  return props.theme.scrollBarTrackColor;
-}, function (props) {
-  return props.theme.scrollBarThumbColor;
-});
-
-var TransactionsText = _styledComponents["default"].span(_templateObject2());
-
-var TransactionsTitle = _styledComponents["default"].span(_templateObject3(), function (props) {
-  return props.theme.uploadedFilesTitleFontSize;
-}, function (props) {
-  return props.theme.uploadedFilesTitleFontStyle;
-}, function (props) {
-  return props.theme.uploadedFilesTitleFontWeight;
-}, function (props) {
-  return props.theme.uploadedFilesTitleFontTextTransform;
-}, function (props) {
-  return props.theme.uploadedFilesTitleFontColor;
-});
-
-var TransactionsSubTitle = _styledComponents["default"].span(_templateObject4(), function (props) {
-  return props.theme.uploadedFilesSubtitleFontSize;
-}, function (props) {
-  return props.theme.uploadedFilesSubtitleFontStyle;
-}, function (props) {
-  return props.theme.uploadedFilesSubtitleFontWeight;
-}, function (props) {
-  return props.theme.uploadedFilesSubtitleFontTextTransform;
-}, function (props) {
-  return props.theme.uploadedFilesSubtitleFontColor;
-});
-
-var TransactionsNumber = _styledComponents["default"].span(_templateObject5(), function (props) {
-  return props.theme.uploadedFilesNumberFontWeight;
-});
-
-var _default = DxcTransactions;
-exports["default"] = _default;

package/test/Accordion.test.js

@@ -1,33 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcAccordion from "../src/accordion/Accordion";
-
-describe("Accordion component tests", () => {
-  test("Accordion renders with correct text", () => {
-    const onChange = jest.fn();
-    const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} />);
-
-    expect(getByText("Accordion")).toBeTruthy();
-  });
-
-  test("Calls correct function on click", () => {
-    const onChange = jest.fn();
-    const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} />);
-
-    fireEvent.click(getByText("Accordion"));
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  test("Controlled accordion", () => {
-    const onChange = jest.fn();
-    const { getByText } = render(<DxcAccordion label="Accordion" onChange={onChange} isExpanded={true} />);
-
-    fireEvent.click(getByText("Accordion"));
-    fireEvent.click(getByText("Accordion"));
-    fireEvent.click(getByText("Accordion"));
-    expect(onChange).toHaveBeenCalledTimes(3);
-    expect(onChange.mock.calls[0][0]).toBe(false);
-    expect(onChange.mock.calls[1][0]).toBe(false);
-    expect(onChange.mock.calls[2][0]).toBe(false);
-  });
-});

package/test/AccordionGroup.test.js

@@ -1,125 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcAccordionGroup from "../src/accordion-group/AccordionGroup";
-
-describe("Accordion component tests", () => {
-  test("Uncontrolled accordion group renders with children", () => {
-    const { getByText, getAllByRole } = render(
-      <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-
-    expect(getByText("Accordion1")).toBeTruthy();
-    expect(getByText("Accordion2")).toBeTruthy();
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-  });
-
-  test("Uncontrolled accordion group renders with only one children", () => {
-    const { getByText, getAllByRole } = render(
-      <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-
-    expect(getByText("Accordion1")).toBeTruthy();
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-  });
-
-  test("Uncontrolled accordion group calls correct function on click", () => {
-    const onActiveChange = jest.fn();
-    const { getByText, getAllByRole } = render(
-      <DxcAccordionGroup margin="large" onActiveChange={onActiveChange}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium" margin="large">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-    fireEvent.click(getByText("Accordion1"));
-    expect(onActiveChange).toHaveBeenCalled();
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-  });
-
-  test("Controlled accordion with indexActive change", () => {
-    const onActiveChange = jest.fn();
-    const { getByText, getAllByRole, rerender } = render(
-      <DxcAccordionGroup margin="large" indexActive={1} onActiveChange={onActiveChange}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium" margin="large">
-          <div>Text1</div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>Text2</div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-    expect(getByText("Text1")).toBeTruthy();
-    expect(getByText("Text2")).toBeTruthy();
-    fireEvent.click(getByText("Accordion1"));
-    fireEvent.click(getByText("Accordion2"));
-    expect(onActiveChange.mock.calls[0][0]).toBe(0);
-    expect(onActiveChange.mock.calls[1][0]).toBe(1);
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
-
-    rerender(
-      <DxcAccordionGroup margin="large" indexActive={0} onActiveChange={onActiveChange}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium" margin="large">
-          <div>Text1</div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>Text2</div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-  });
-
-  test("Disabled uncontrolled accordion group", () => {
-    const onActiveChange = jest.fn();
-    const { getByText } = render(
-      <DxcAccordionGroup margin="large" onActiveChange={onActiveChange} disabled={true}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium" margin="large">
-          <div>Text1</div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>Text2</div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    );
-    fireEvent.click(getByText("Accordion1"));
-    fireEvent.click(getByText("Accordion2"));
-    expect(onActiveChange).toHaveBeenCalledTimes(0);
-  });
-});