@dxc-technology/halstack-react 11.0.0 → 12.0.0

package/accordion/Accordion.js

@@ -14,28 +14,12 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _utils = require("../common/utils");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _BackgroundColorContext = require("../BackgroundColorContext");
 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,
@@ -81,8 +65,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,
@@ -100,13 +84,13 @@ 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)
-  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.accordion.backgroundColor
-  }, children))));
+  }, children)));
 };
 var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
@@ -156,16 +140,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;
@@ -174,7 +160,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/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.js

@@ -0,0 +1,88 @@
+"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.tsx"));
+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
+          }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion1",
+            assistiveText: "Assistive Text1",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion2",
+            assistiveText: "Assistive Text2",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__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,
+            disabled: true
+          }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion1",
+            assistiveText: "Assistive Text1",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+            label: "Accordion2",
+            assistiveText: "Assistive Text2",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__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;

package/accordion-group/AccordionGroup.js

@@ -5,7 +5,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.AccordionGroupAccordionContext = void 0;
+exports["default"] = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -16,12 +16,12 @@ var _utils = require("../common/utils");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _AccordionGroupAccordion = _interopRequireDefault(require("./AccordionGroupAccordion"));
+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 AccordionGroupAccordionContext = exports.AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
 var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
   var defaultIndexActive = _ref.defaultIndexActive,
     indexActive = _ref.indexActive,
@@ -54,7 +54,7 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
     margin: margin,
     disabled: disabled
   }, _react.Children.map(children, function (accordion, index) {
-    return /*#__PURE__*/_react["default"].createElement(AccordionGroupAccordionContext.Provider, {
+    return /*#__PURE__*/_react["default"].createElement(_AccordionGroupContext.AccordionGroupAccordionContext.Provider, {
       key: "accordion-".concat(index),
       value: _objectSpread({
         index: index

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/AccordionGroupAccordion.js

@@ -10,12 +10,12 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
-var _AccordionGroup = require("./AccordionGroup");
+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)(_AccordionGroup.AccordionGroupAccordionContext),
+  var _useContext = (0, _react.useContext)(_AccordionGroupContext.AccordionGroupAccordionContext),
     activeIndex = _useContext.activeIndex,
     handlerActiveChange = _useContext.handlerActiveChange,
     disabled = _useContext.disabled,

package/accordion-group/AccordionGroupContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AccordionGroupAccordionContextProps } from "./types";
+export declare const AccordionGroupAccordionContext: import("react").Context<AccordionGroupAccordionContextProps>;

package/accordion-group/AccordionGroupContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionGroupAccordionContext = void 0;
+var _react = require("react");
+var AccordionGroupAccordionContext = exports.AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);

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;
     /**