@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/accordion-group/AccordionGroup.stories.tsx

@@ -27,7 +27,7 @@ export const Chromatic = () => (
             leo lobortis eget.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
+        <DxcAccordionGroup.Accordion label="Accordion3" assistiveText="Assistive text">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -38,7 +38,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Expanded" theme="light" level={4} />
       <DxcAccordionGroup defaultIndexActive={1}>
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion4">
           <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
@@ -47,13 +47,13 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion5">
           <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">
+        <DxcAccordionGroup.Accordion label="Accordion6">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -64,7 +64,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <DxcAccordionGroup disabled>
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion7">
           <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
@@ -73,7 +73,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion8">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -84,7 +84,7 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
       <DxcAccordionGroup defaultIndexActive={2}>
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion9">
           <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
@@ -93,13 +93,13 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion10">
           <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">
+        <DxcAccordionGroup.Accordion label="Accordion11">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -111,7 +111,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xxsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion12">
           <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
@@ -120,7 +120,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion13">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -131,7 +131,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion14">
           <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
@@ -140,7 +140,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion15">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -151,7 +151,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
       <DxcAccordionGroup margin="small">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion16">
           <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
@@ -160,7 +160,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion17">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -171,7 +171,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
       <DxcAccordionGroup margin="medium">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion18">
           <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
@@ -180,7 +180,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion19">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -191,7 +191,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
       <DxcAccordionGroup margin="large">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion20">
           <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
@@ -200,7 +200,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion21">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -211,7 +211,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion22">
           <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
@@ -220,7 +220,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion23">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
@@ -231,7 +231,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xxlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1">
+        <DxcAccordionGroup.Accordion label="Accordion24">
           <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
@@ -240,7 +240,7 @@ export const Chromatic = () => (
             anim id est laborum.
           </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2">
+        <DxcAccordionGroup.Accordion label="Accordion25">
           <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.

package/accordion-group/AccordionGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion-group/AccordionGroup.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
 describe("Accordion component tests", function () {
   test("Uncontrolled accordion group calls correct function on click", function () {
     var onActiveChange = jest.fn();
@@ -11,8 +11,7 @@ describe("Accordion component tests", function () {
         margin: "large",
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__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.")))),
@@ -48,8 +47,7 @@ describe("Accordion component tests", function () {
         indexActive: 1,
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
@@ -70,8 +68,7 @@ describe("Accordion component tests", function () {
       indexActive: 0,
       onActiveChange: onActiveChange
     }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      margin: "large"
+      label: "Accordion1"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
       label: "Accordion2"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
@@ -85,8 +82,7 @@ describe("Accordion component tests", function () {
         onActiveChange: onActiveChange,
         disabled: true
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),

package/accordion-group/AccordionGroupAccordion.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
 var _AccordionGroupContext = require("./AccordionGroupContext");
 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; }
+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 && {}.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)(_AccordionGroupContext.AccordionGroupAccordionContext),

package/action-icon/ActionIcon.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/action-icon/ActionIcon.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
-var _jestAxe = require("jest-axe");
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",
@@ -29,7 +29,7 @@ describe("Action icon component accessibility tests", function () {
             title: "favourite"
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -50,7 +50,7 @@ describe("Action icon component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/action-icon/ActionIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/action-icon/ActionIcon.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",

package/alert/Alert.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/alert/Alert.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Alert = _interopRequireDefault(require("./Alert.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Alert = _interopRequireDefault(require("./Alert"));
 describe("Alert component accessibility tests", function () {
   it("Should not have basic accessibility issues for confirm mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;
@@ -19,7 +19,7 @@ describe("Alert component accessibility tests", function () {
             margin: "small"
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -40,7 +40,7 @@ describe("Alert component accessibility tests", function () {
             margin: "small"
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -61,7 +61,7 @@ describe("Alert component accessibility tests", function () {
             margin: "small"
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -82,7 +82,7 @@ describe("Alert component accessibility tests", function () {
             margin: "small"
           })), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();

package/alert/Alert.js

@@ -17,7 +17,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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" != _typeof3(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; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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 && {}.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 DxcAlert = function DxcAlert(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "info" : _ref$type,
@@ -47,7 +47,9 @@ var DxcAlert = function DxcAlert(_ref) {
     mode: mode,
     type: type,
     margin: margin,
-    size: size
+    size: size,
+    role: type === "error" ? "alert" : "status",
+    "aria-live": type === "error" ? "assertive" : "off"
   }, /*#__PURE__*/_react["default"].createElement(AlertInfo, null, /*#__PURE__*/_react["default"].createElement(AlertIcon, {
     type: type
   }, type === "info" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -58,9 +60,10 @@ var DxcAlert = function DxcAlert(_ref) {
     icon: "filled_warning"
   }) || type === "error" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     icon: "filled_cancel"
-  })), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
+  })), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), typeof onClose === "function" && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
     onClick: onClose,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    "aria-label": "Close alert"
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     icon: "close"
   }))), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, children))));

package/alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/alert/Alert.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Alert = _interopRequireDefault(require("./Alert.tsx"));
+var _Alert = _interopRequireDefault(require("./Alert"));
 describe("Alert component tests", function () {
   test("Info alert renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {

package/badge/Badge.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/badge/Badge.accessibility.test.js

@@ -5,9 +5,9 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Badge = _interopRequireDefault(require("./Badge.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var icon = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24",
   height: "24",
@@ -78,7 +78,7 @@ describe("Badge component accessibility tests", function () {
             title: "Badge1"
           }))), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -116,7 +116,7 @@ describe("Badge component accessibility tests", function () {
             title: "Badge2"
           }))), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/badge/Badge.test.js

@@ -3,8 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Badge = _interopRequireDefault(require("./Badge.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 describe("Badge component tests", function () {
   test("Badge renders with correct label when it is less than notification limit", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Badge["default"], {

package/bar-chart/BarChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import BarChartProps, { DataTypes } from "./types";
+declare const DxcBarChart: <X extends DataTypes>({ chartTitle, error, horizontalBars, legendTitle, loading, onFilterChange, onHighlightChange, onRetry, series, showFilter, showLegend, stackedBars, xDomain, xFormatter, xTitle, yDomain, yFormatter, yTitle, }: BarChartProps<X>) => React.JSX.Element;
+export default DxcBarChart;

package/bar-chart/BarChart.js

@@ -0,0 +1,152 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("@cloudscape-design/components");
+var _theming = require("@cloudscape-design/components/theming");
+var _theme = _interopRequireDefault(require("./theme"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _main = require("../main");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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 && {}.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; }
+/**
+ * Cloudscape Design Components - Theming
+ * https://cloudscape.design/foundation/visual-foundation/theming/
+ */
+(0, _theming.applyTheme)({
+  theme: _theme["default"]
+});
+var StatusMessage = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var title = _ref.title,
+    description = _ref.description;
+  return /*#__PURE__*/_react["default"].createElement(StatusMessageContainer, null, /*#__PURE__*/_react["default"].createElement("strong", null, title), description);
+});
+var InsetWrapper = function InsetWrapper(_ref2) {
+  var condition = _ref2.condition,
+    children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? /*#__PURE__*/_react["default"].createElement(_main.DxcInset, {
+    top: "0.5rem"
+  }, children) : children);
+};
+var DxcBarChart = function DxcBarChart(_ref3) {
+  var chartTitle = _ref3.chartTitle,
+    error = _ref3.error,
+    horizontalBars = _ref3.horizontalBars,
+    legendTitle = _ref3.legendTitle,
+    loading = _ref3.loading,
+    onFilterChange = _ref3.onFilterChange,
+    _onHighlightChange = _ref3.onHighlightChange,
+    onRetry = _ref3.onRetry,
+    series = _ref3.series,
+    showFilter = _ref3.showFilter,
+    showLegend = _ref3.showLegend,
+    stackedBars = _ref3.stackedBars,
+    xDomain = _ref3.xDomain,
+    xFormatter = _ref3.xFormatter,
+    xTitle = _ref3.xTitle,
+    yDomain = _ref3.yDomain,
+    yFormatter = _ref3.yFormatter,
+    yTitle = _ref3.yTitle;
+  var _useState = (0, _react.useState)(series),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    filteredData = _useState2[0],
+    setFilteredData = _useState2[1];
+  var filters = (0, _react.useMemo)(function () {
+    return series.map(function (series) {
+      return series.title;
+    });
+  }, [series]);
+  var _useState3 = (0, _react.useState)(filters),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedFilters = _useState4[0],
+    setSelectedFilters = _useState4[1];
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var filterData = (0, _react.useCallback)(function (value) {
+    setSelectedFilters(value);
+    setFilteredData(series.filter(function (series) {
+      return value.includes(series.title);
+    }));
+  }, [series]);
+  return loading ? /*#__PURE__*/_react["default"].createElement(LoadingContainer, null, /*#__PURE__*/_react["default"].createElement(_main.DxcSpinner, {
+    mode: "small"
+  }), translatedLabels.barChart.loadingDataMessage) : error ? /*#__PURE__*/_react["default"].createElement(ErrorStatus, null, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "cancel"
+  }), error), onRetry && /*#__PURE__*/_react["default"].createElement(_main.DxcButton, {
+    label: translatedLabels.barChart.retryButtonLabel,
+    mode: "secondary",
+    onClick: function onClick() {
+      onRetry();
+    }
+  })) : /*#__PURE__*/_react["default"].createElement(_main.DxcGrid, {
+    gap: "1rem"
+  }, chartTitle && /*#__PURE__*/_react["default"].createElement(_main.DxcGrid.Item, {
+    placeSelf: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_main.DxcHeading, {
+    text: chartTitle,
+    level: 2
+  })), showFilter && /*#__PURE__*/_react["default"].createElement(_main.DxcSelect, {
+    label: translatedLabels.barChart.filterLabel,
+    multiple: true,
+    onChange: function onChange(_ref4) {
+      var visibleSeries = _ref4.value;
+      filterData(visibleSeries);
+      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(visibleSeries);
+    },
+    options: filters.map(function (filter) {
+      return {
+        label: filter,
+        value: filter
+      };
+    }),
+    placeholder: translatedLabels.barChart.filterPlaceholder,
+    searchable: true,
+    value: selectedFilters
+  }), /*#__PURE__*/_react["default"].createElement(InsetWrapper, {
+    condition: !yTitle && !horizontalBars
+  }, /*#__PURE__*/_react["default"].createElement(_components.BarChart, {
+    ariaLabel: translatedLabels.barChart.ariaLabel,
+    empty: /*#__PURE__*/_react["default"].createElement(StatusMessage, {
+      title: translatedLabels.barChart.noDataMessageTitle,
+      description: translatedLabels.barChart.noDataMessageBody
+    }),
+    hideFilter: true,
+    hideLegend: !showLegend,
+    horizontalBars: horizontalBars,
+    legendTitle: legendTitle,
+    noMatch: /*#__PURE__*/_react["default"].createElement(StatusMessage, {
+      title: translatedLabels.barChart.noMatchesMessageTitle,
+      description: translatedLabels.barChart.noMatchesMessageBody
+    }),
+    onHighlightChange: function onHighlightChange(highlightedSeries) {
+      var _highlightedSeries$de;
+      var highlightedSeriesTitle = (_highlightedSeries$de = highlightedSeries.detail.highlightedSeries) === null || _highlightedSeries$de === void 0 ? void 0 : _highlightedSeries$de.title;
+      _onHighlightChange === null || _onHighlightChange === void 0 ? void 0 : _onHighlightChange(highlightedSeriesTitle);
+    },
+    series: series,
+    stackedBars: stackedBars,
+    visibleSeries: filteredData,
+    xDomain: xDomain,
+    xTickFormatter: xFormatter,
+    xTitle: xTitle,
+    yDomain: yDomain,
+    yTickFormatter: yFormatter,
+    yTitle: yTitle
+  })));
+};
+var sharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: ", ";\n  font-size: ", ";\n  min-height: 500px;\n"])), _coreTokens["default"].type_sans, _coreTokens["default"].type_scale_02);
+var ErrorStatus = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  flex-direction: column;\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_16, _coreTokens["default"].color_red_700);
+var Label = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n\n  > span {\n    font-size: 20px;\n  }\n"])), _coreTokens["default"].spacing_4);
+var LoadingContainer = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_8, _coreTokens["default"].color_grey_900);
+var StatusMessageContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  flex-direction: column;\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_4, _coreTokens["default"].color_grey_800);
+var _default = exports["default"] = DxcBarChart;