@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e3dbad

package/accordion/Accordion.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 _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 describe("Accordion component tests", function () {
   test("Renders with correct aria accessibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
@@ -30,7 +30,7 @@ describe("Accordion component tests", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
         label: "Accordion",
         onChange: onChange
-      })),
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
       getByText = _render3.getByText;
     _react2.fireEvent.click(getByText("Accordion"));
     expect(onChange).toHaveBeenCalled();
@@ -41,7 +41,7 @@ describe("Accordion component tests", function () {
         label: "Accordion",
         onChange: onChange,
         isExpanded: true
-      })),
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
       getByText = _render4.getByText,
       getByRole = _render4.getByRole;
     expect(getByRole("button").getAttribute("aria-expanded")).toBe("true");

package/accordion/types.d.ts

@@ -23,7 +23,7 @@ type Props = {
      */
     isExpanded?: boolean;
     /**
-     * Element or path used as the icon that will be placed next to panel label.
+     * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
      */
     icon?: string | SVG;
     /**

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

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

package/accordion-group/AccordionGroup.accessibility.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var folderIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  enableBackground: "new 0 0 24 24",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
+  fill: "none",
+  height: "24",
+  width: "24"
+})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z"
+})));
+describe("Accordion component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+            defaultIndexActive: 1,
+            margin: "small"
+          }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion1",
+            assistiveText: "Assistive Text1",
+            icon: folderIcon
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion2",
+            assistiveText: "Assistive Text2",
+            icon: folderIcon
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
+            defaultIndexActive: 1,
+            margin: "small",
+            disabled: true
+          }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion1",
+            assistiveText: "Assistive Text1",
+            icon: folderIcon
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion2",
+            assistiveText: "Assistive Text2",
+            icon: folderIcon
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/accordion-group/AccordionGroup.js

@@ -19,7 +19,7 @@ var _AccordionGroupAccordion = _interopRequireDefault(require("./AccordionGroupA
 var _AccordionGroupContext = require("./AccordionGroupContext");
 var _templateObject;
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DxcAccordionGroup = function DxcAccordionGroup(_ref) {

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/accordion-group/types.d.ts

@@ -13,7 +13,7 @@ export type AccordionPropsType = {
      */
     label: string;
     /**
-     * Element or path used as the icon that will be placed next to panel label.
+     * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
      */
     icon?: string | SVG;
     /**

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

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

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  width: "24px",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+}));
+describe("Action icon component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
+            icon: iconSVG,
+            title: "favourite"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
+            icon: iconSVG,
+            title: "disabled",
+            disabled: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/action-icon/ActionIcon.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject;
 var DxcActionIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
@@ -28,11 +29,11 @@ var DxcActionIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     title: title,
     type: "button",
     ref: ref
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: 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: 0px;\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) {
+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  font-size: 16px;\n  padding: 0px;\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
 }, function (props) {
   var _props$theme$disabled, _props$theme$actionBa;

package/action-icon/ActionIcon.stories.tsx

@@ -19,15 +19,15 @@ export const Chromatic = () => (
   <>
     <Title title="Default" theme="light" level={2} />
     <ExampleContainer>
-      <DxcActionIcon icon={"https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"} title="Favourite" />
+      <DxcActionIcon icon="favorite" title="Favourite" />
     </ExampleContainer>
     <Title title="Disabled" theme="light" level={2} />
     <ExampleContainer>
-      <DxcActionIcon icon={iconSVG} title="Favourite" disabled />
+      <DxcActionIcon icon="favorite" title="Favourite" disabled />
     </ExampleContainer>
     <Title title="Hover" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <DxcActionIcon icon={iconSVG} title="Favourite" />
+      <DxcActionIcon icon="filled_favorite" title="Favourite" />
     </ExampleContainer>
     <Title title="Focus" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-focus">

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/action-icon/types.d.ts

@@ -10,7 +10,7 @@ type Props = {
      */
     title: string;
     /**
-     * Element or path used as the icon that will be placed next to the label.
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
     icon: string | SVG;
     /**

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

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