@dxc-technology/halstack-react 0.0.0-dfcca07 → 0.0.0-e01c6f9

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

@@ -0,0 +1,98 @@
+"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.tsx"));
+describe("Accordion component tests", function () {
+  test("Uncontrolled accordion group calls correct function on click", function () {
+    var onActiveChange = jest.fn();
+    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 _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");
+    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
+    rerender( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+      margin: "large",
+      indexActive: 0,
+      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"))));
+    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 _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,31 +1,21 @@
 /// <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> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-export declare type AccordionPropsType = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type AccordionPropsType = {
     /**
      * The panel label.
      */
-    label?: string;
-    /**
-     * Element used as the icon that will be placed next to panel label.
-     */
-    icon?: SVG;
+    label: string;
     /**
-     * @deprecated URL of the icon that will be placed next to panel label.
+     * Element or path used as the icon that will be placed next to panel label.
      */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Assistive text to be placed on the right side of the panel.
      */
@@ -34,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.
@@ -69,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 ActionIconProps from "./types";
+declare const DxcActionIcon: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
+export default DxcActionIcon;

package/action-icon/ActionIcon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+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 = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DxcActionIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    title = _ref.title,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    tabIndex = _ref.tabIndex;
+  return /*#__PURE__*/_react["default"].createElement(ActionIcon, {
+    "aria-label": title,
+    disabled: disabled,
+    onClick: onClick,
+    onMouseDown: function onMouseDown(event) {
+      event.stopPropagation();
+    },
+    tabIndex: tabIndex,
+    title: title,
+    type: "button",
+    ref: ref
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: icon
+  }) : icon);
+});
+var ActionIcon = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border: none;\n  border-radius: 2px;\n  width: 24px;\n  height: 24px;\n  padding: 3px;\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  img, svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
+  return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
+}, function (props) {
+  return props.disabled ? props.theme.disabledActionBackgroundColor : props.theme.actionBackgroundColor;
+}, function (props) {
+  return props.disabled ? props.theme.disabledActionIconColor : props.theme.actionIconColor;
+}, function (props) {
+  return !props.disabled && "\n      &:focus,\n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.theme.focusActionBorderColor, ";\n        color: ").concat(props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.theme.activeActionIconColor, ";\n      }\n    ");
+});
+var _default = exports["default"] = DxcActionIcon;

package/action-icon/types.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type Props = {
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title: string;
+    /**
+     * Element or path used as the icon that will be placed next to the label.
+     */
+    icon: string | SVG;
+    /**
+     * This function will be called when the user clicks the button.
+     */
+    onClick?: () => void;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+export type RefType = HTMLButtonElement;
+export default Props;