@dxc-technology/halstack-react 0.0.0-509f1eb → 0.0.0-50acff4

package/BackgroundColorContext.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 var _react = _interopRequireWildcard(require("react"));
 var _color = _interopRequireDefault(require("color"));
 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 BackgroundColorContext = /*#__PURE__*/_react["default"].createContext(null);
 var getColorType = function getColorType(hexColor) {
   try {

package/HalstackContext.d.ts

@@ -38,7 +38,7 @@ declare const HalstackContext: React.Context<DeepPartial<{
         disabledIconColor: string;
         iconSize: string;
         iconMarginLeft: string;
-        iconMarginRigth: string;
+        iconMarginRight: string;
         accordionGroupSeparatorBorderColor: string;
         accordionGroupSeparatorBorderThickness: string;
         accordionGroupSeparatorBorderRadius: string;
@@ -253,8 +253,7 @@ declare const HalstackContext: React.Context<DeepPartial<{
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconWidth: string;
-        closeIconHeight: string;
+        closeIconSize: string;
         closeIconTopPosition: string;
         closeIconRightPosition: string;
         closeIconBackgroundColor: string;
@@ -284,9 +283,14 @@ declare const HalstackContext: React.Context<DeepPartial<{
         buttonPaddingBottom: string;
         buttonPaddingLeft: string;
         buttonPaddingRight: string;
+        buttonHeight: string;
+        buttonBorderRadius: string;
+        buttonBorderStyle: string;
+        buttonBorderThickness: string;
+        buttonBorderColor: string;
         disabledColor: string;
         disabledButtonBackgroundColor: string;
-        disabledBorderColor: string;
+        disabledButtonBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -326,7 +330,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -527,8 +530,8 @@ declare const HalstackContext: React.Context<DeepPartial<{
         totalItemsContainerMarginLeft: string;
     };
     paragraph: {
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     };
@@ -848,8 +851,16 @@ declare const HalstackContext: React.Context<DeepPartial<{
         dataPaddingBottom: string;
         dataPaddingRight: string;
         dataPaddingLeft: string;
+        dataPaddingTopReduced: string;
+        dataPaddingBottomReduced: string;
+        dataPaddingRightReduced: string;
+        dataPaddingLeftReduced: string;
         dataTextAlign: string;
         dataTextLineHeight: string;
+        firstChildPaddingLeft: string;
+        lastChildPaddingRight: string;
+        firstChildPaddingLeftReduced: string;
+        lastChildPaddingRightReduced: string;
         headerBackgroundColor: string;
         headerBorderRadius: string;
         headerFontFamily: string;
@@ -862,11 +873,25 @@ declare const HalstackContext: React.Context<DeepPartial<{
         headerPaddingBottom: string;
         headerPaddingRight: string;
         headerPaddingLeft: string;
+        headerPaddingTopReduced: string;
+        headerPaddingBottomReduced: string;
+        headerPaddingRightReduced: string;
+        headerPaddingLeftReduced: string;
         headerTextAlign: string;
         headerTextLineHeight: string;
         scrollBarThumbColor: string;
         scrollBarTrackColor: string;
         sortIconColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
     };
     tabs: {
         fontFamily: string;
@@ -885,7 +910,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
         disabledFontColor: string;
         disabledIconColor: string;
         disabledFontStyle: string;
-        disabledBadgeBackgroundColor: string;
         hoverBackgroundColor: string;
         pressedBackgroundColor: string;
         pressedFontWeight: string;
@@ -893,19 +917,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
         dividerThickness: string;
         focusOutline: string;
         scrollButtonsWidth: string;
-        badgeBackgroundColor: string;
-        badgeFontFamily: string;
-        badgeFontSize: string;
-        badgeFontStyle: string;
-        badgeFontWeight: string;
-        badgeFontColor: string;
-        badgeLetterSpacing: string;
-        badgeWidth: string;
-        badgeHeight: string;
-        badgeRadius: string;
-        badgeWidthWithNotificationNumber: string;
-        badgeHeightWithNotificationNumber: string;
-        badgeRadiusWithNotificationNumber: string;
     };
     tag: {
         fontFamily: string;

package/HalstackContext.js

@@ -9,11 +9,11 @@ exports["default"] = exports.HalstackProvider = exports.HalstackLanguageContext
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = _interopRequireDefault(require("color"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = require("styled-components");
 var _variables = require("./common/variables");
 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" != _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 HalstackContext = /*#__PURE__*/_react["default"].createContext(null);
 var HalstackLanguageContext = exports.HalstackLanguageContext = /*#__PURE__*/_react["default"].createContext(null);
 var addLightness = function addLightness(newLightness, hexColor) {
@@ -300,11 +300,11 @@ var HalstackProvider = exports.HalstackProvider = function HalstackProvider(_ref
   var parsedLabels = (0, _react.useMemo)(function () {
     return labels ? parseLabels(labels) : _variables.defaultTranslatedComponentLabels;
   }, [labels]);
-  return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
     value: parsedTheme
-  }, /*#__PURE__*/_react["default"].createElement(HalstackLanguageContext.Provider, {
+  }, /*#__PURE__*/_react["default"].createElement(GlobalStyle, null), /*#__PURE__*/_react["default"].createElement(HalstackLanguageContext.Provider, {
     value: parsedLabels
-  }, children)));
+  }, children));
 };
-var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
 var _default = exports["default"] = HalstackContext;

package/accordion/Accordion.accessibility.test.d.ts

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

package/accordion/Accordion.accessibility.test.js

@@ -0,0 +1,71 @@
+"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 _Accordion = _interopRequireDefault(require("./Accordion"));
+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(_Accordion["default"], {
+            label: "Accordion",
+            assistiveText: "Assistive Text",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), 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(_Accordion["default"], {
+            label: "Accordion",
+            assistiveText: "Assistive Text",
+            icon: folderIcon,
+            margin: "small",
+            disabled: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), 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/Accordion.js

@@ -15,26 +15,10 @@ var _utils = require("../common/utils");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-var _uuid = require("uuid");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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; }
-var expandLess = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "m7.4 15.375-1.4-1.4 6-6 6 6-1.4 1.4-4.6-4.6Z"
-}));
-var expandMore = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z"
-}));
+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 DxcAccordion = function DxcAccordion(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -50,13 +34,11 @@ var DxcAccordion = function DxcAccordion(_ref) {
     margin = _ref.margin,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)((0, _uuid.v4)()),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    id = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerIsExpanded = _useState4[0],
-    setInnerIsExpanded = _useState4[1];
+  var id = (0, _react.useId)();
+  var _useState = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerIsExpanded = _useState2[0],
+    setInnerIsExpanded = _useState2[1];
   var colorsTheme = (0, _useTheme["default"])();
   var handleAccordionState = function handleAccordionState() {
     var _isExpanded;
@@ -80,8 +62,8 @@ var DxcAccordion = function DxcAccordion(_ref) {
     isExpanded: isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded
   }, /*#__PURE__*/_react["default"].createElement(AccordionInfo, null, /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     disabled: disabled
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
     color: disabled ? colorsTheme.accordion.disabledTitleLabelFontColor : colorsTheme.accordion.titleLabelFontColor,
     fontFamily: colorsTheme.accordion.titleLabelFontFamily,
@@ -99,7 +81,9 @@ var DxcAccordion = function DxcAccordion(_ref) {
     lineHeight: "1.5em"
   }, assistiveText))), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
     disabled: disabled
-  }, (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) ? expandLess : expandMore))), (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) && /*#__PURE__*/_react["default"].createElement(AccordionPanel, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) ? "expand_less" : "expand_more"
+  })))), (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) && /*#__PURE__*/_react["default"].createElement(AccordionPanel, {
     id: "accordion-panel-".concat(id),
     role: "region",
     "aria-labelledby": "accordion-".concat(id)
@@ -153,16 +137,18 @@ var AccordionLabel = _styledComponents["default"].span(_templateObject5 || (_tem
 }, function (props) {
   return props.theme.titleLabelPaddingLeft;
 });
-var IconContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  svg,\n  img {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
   return props.theme.iconMarginLeft;
 }, function (props) {
-  return props.theme.iconMarginRigth;
+  return props.theme.iconMarginRight;
 }, function (props) {
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 }, function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
 });
 var AccordionAssistiveText = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (props) {
   return props.theme.assistiveTextMinWidth;
@@ -171,7 +157,7 @@ var AccordionAssistiveText = _styledComponents["default"].span(_templateObject7
 }, function (props) {
   return props.theme.assistiveTextPaddingRight;
 });
-var CollapseIndicator = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  color: ", ";\n"])), function (props) {
+var CollapseIndicator = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  font-size: 24px;\n  color: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledArrowColor : props.theme.arrowColor;
 });
 var AccordionPanel = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n"])), function (props) {

package/accordion/Accordion.stories.tsx

@@ -9,24 +9,6 @@ export default {
   component: DxcAccordion,
 };
 
-const folderIcon = (
-  <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"
-  >
-    <g>
-      <rect fill="none" height="24" width="24" />
-    </g>
-    <g>
-      <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" />
-    </g>
-  </svg>
-);
-
 const smallIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
     <path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
@@ -36,7 +18,6 @@ const smallIcon = (
 const facebookIcon = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -57,16 +38,6 @@ const facebookIcon = (
   </svg>
 );
 
-const advancedTheme = {
-  accordion: {
-    backgroundColor: "#000000",
-    assistiveTextFontColor: "#ffffff",
-    titleLabelFontColor: "#ffffff",
-    arrowColor: "#5f249f",
-    iconColor: "#5f249f",
-  },
-};
-
 const opinionatedTheme = {
   accordion: {
     accentColor: "#5f249f",
@@ -80,7 +51,7 @@ export const Chromatic = () => (
     <Title title="Component anatomy" theme="light" level={2} />
     <ExampleContainer>
       <Title title="With label" theme="light" level={4} />
-      <DxcAccordion label="Accordion">
+      <DxcAccordion label="Accordion 1">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -89,7 +60,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With assistive text" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text">
+      <DxcAccordion label="Accordion 2" assistiveText="Assistive text">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -98,7 +69,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
+      <DxcAccordion label="Accordion 3" assistiveText="Assistive text" icon="folder">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -107,7 +78,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With smaller icon" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={smallIcon}>
+      <DxcAccordion label="Accordion 4" assistiveText="Assistive text" icon={smallIcon}>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -123,19 +94,6 @@ export const Chromatic = () => (
         </div>
       </DxcAccordion>
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="With bigger icon (image)" theme="light" level={4} />
-      <DxcAccordion
-        label="Accordion"
-        assistiveText="Assistive text"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      >
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
     <Title title="States" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
@@ -166,7 +124,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
+      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" disabled>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -241,7 +199,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="With assistive text and icon" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
+        <DxcAccordion label="Accordion" assistiveText="Assistive text" icon="folder">
           Content
         </DxcAccordion>
       </HalstackProvider>
@@ -271,7 +229,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
+        <DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" disabled>
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.

package/accordion/Accordion.test.d.ts

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

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.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
-import AccordionGroupPropsType, { AccordionGroupAccordionContextProps } from "./types";
-export declare const AccordionGroupAccordionContext: React.Context<AccordionGroupAccordionContextProps>;
+/// <reference types="react" />
+import AccordionGroupPropsType from "./types";
 declare const DxcAccordionGroup: {
     ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: AccordionGroupPropsType): JSX.Element;
     Accordion: ({ ...childProps }: import("./types").AccordionPropsType) => JSX.Element;