@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3df47e

package/accordion-group/AccordionGroup.stories.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import DxcAccordionGroup from "./AccordionGroup";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
 export default {
-  title: "Accordion group",
+  title: "Accordion Group",
   component: DxcAccordionGroup,
 };
 
@@ -14,69 +15,95 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" theme="light" level={4} />
       <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Expanded" theme="light" level={4} />
-      <DxcAccordionGroup indexActive={1}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+      <DxcAccordionGroup defaultIndexActive={1}>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <DxcAccordionGroup disabled>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcAccordionGroup defaultIndexActive={2}>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </DxcInset>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </DxcInset>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
@@ -84,140 +111,140 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xxsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
       <DxcAccordionGroup margin="small">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
       <DxcAccordionGroup margin="medium">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
       <DxcAccordionGroup margin="large">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xxlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>

package/accordion-group/AccordionGroup.test.js

@@ -1,93 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
-
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
 describe("Accordion component tests", function () {
-  test("Uncontrolled accordion group renders with children", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
-        getByText = _render.getByText,
-        getAllByRole = _render.getAllByRole;
-
-    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", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
-        getByText = _render2.getByText,
-        getAllByRole = _render2.getAllByRole;
-
-    expect(getByText("Accordion1")).toBeTruthy();
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-  });
   test("Uncontrolled accordion group calls correct function on click", function () {
     var onActiveChange = jest.fn();
-
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
-        getByText = _render3.getByText,
-        getAllByRole = _render3.getAllByRole;
-
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+        margin: "large",
+        onActiveChange: onActiveChange
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
+      getByText = _render.getByText,
+      getAllByRole = _render.getAllByRole;
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-
     _react2.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("Uncontrolled accordion group renders initially with an accordion expanded using defaultIndexActive", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+        defaultIndexActive: 1
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
+      queryByText = _render2.queryByText,
+      getByText = _render2.getByText,
+      getAllByRole = _render2.getAllByRole;
+    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
+    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
+    expect(getByText("Second accordion")).toBeTruthy();
+    expect(queryByText("First accordion")).toBeFalsy();
+  });
   test("Controlled accordion with indexActive change", function () {
     var onActiveChange = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      indexActive: 1,
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        getByText = _render4.getByText,
-        getAllByRole = _render4.getAllByRole,
-        rerender = _render4.rerender;
-
-    expect(getByText("Text1")).toBeTruthy();
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+        margin: "large",
+        indexActive: 1,
+        onActiveChange: onActiveChange
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
+      queryByText = _render3.queryByText,
+      getByText = _render3.getByText,
+      getAllByRole = _render3.getAllByRole,
+      rerender = _render3.rerender;
+    expect(queryByText("Text1")).toBeFalsy();
     expect(getByText("Text2")).toBeTruthy();
-
     _react2.fireEvent.click(getByText("Accordion1"));
-
     _react2.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");
@@ -98,36 +71,28 @@ describe("Accordion component tests", function () {
       onActiveChange: onActiveChange
     }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
       label: "Accordion1",
-      padding: "medium",
       margin: "large"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
+      label: "Accordion2"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
   test("Disabled uncontrolled accordion group", function () {
     var onActiveChange = jest.fn();
-
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange,
-      disabled: true
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        getByText = _render5.getByText;
-
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+        margin: "large",
+        onActiveChange: onActiveChange,
+        disabled: true
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
+      getByText = _render4.getByText;
     _react2.fireEvent.click(getByText("Accordion1"));
-
     _react2.fireEvent.click(getByText("Accordion2"));
-
     expect(onActiveChange).toHaveBeenCalledTimes(0);
   });
 });

package/accordion-group/AccordionGroupAccordion.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AccordionPropsType } from "./types";
+declare const AccordionGroupAccordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
+export default AccordionGroupAccordion;

package/accordion-group/AccordionGroupAccordion.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
+var _AccordionGroup = require("./AccordionGroup");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
+  var childProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  var _useContext = (0, _react.useContext)(_AccordionGroup.AccordionGroupAccordionContext),
+    activeIndex = _useContext.activeIndex,
+    handlerActiveChange = _useContext.handlerActiveChange,
+    disabled = _useContext.disabled,
+    index = _useContext.index;
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
+    isExpanded: activeIndex === index,
+    onChange: function onChange() {
+      handlerActiveChange(index);
+    },
+    disabled: disabled
+  }, childProps), childProps.children);
+};
+var _default = exports["default"] = AccordionGroupAccordion;

package/accordion-group/types.d.ts

@@ -1,19 +1,13 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type SVG = React.SVGProps<SVGSVGElement>;
-export declare type AccordionPropsType = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type AccordionPropsType = {
     /**
      * The panel label.
      */
@@ -30,18 +24,17 @@ export declare type AccordionPropsType = {
      * If true, the component will be disabled.
      */
     disabled?: boolean;
-    /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
-     */
-    padding?: Space | Padding;
     /**
      * The expanded panel of the accordion. This area can be used to render
      * custom content.
      */
     children: React.ReactNode;
 };
-declare type Props = {
+type Props = {
+    /**
+     * Initially active accordion, only when it is uncontrolled.
+     */
+    defaultIndexActive?: number;
     /**
      * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
      * If null, the component will be controlled and all accordions will be closed.
@@ -65,4 +58,10 @@ declare type Props = {
      */
     children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
 };
+export type AccordionGroupAccordionContextProps = {
+    activeIndex: number;
+    handlerActiveChange: (index: number) => void;
+    disabled: boolean;
+    index: number;
+};
 export default Props;

package/action-icon/ActionIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import ActionIconPropsTypes from "./types";
+declare const DxcActionIcon: React.ForwardRefExoticComponent<ActionIconPropsTypes & React.RefAttributes<HTMLButtonElement>>;
+export default DxcActionIcon;