@dxc-technology/halstack-react 10.1.0 → 12.0.0

package/accordion/Accordion.test.js

@@ -1,21 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
-
 describe("Accordion component tests", function () {
   test("Renders with correct aria accessibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
-      label: "Accordion",
-      defaultIsExpanded: true
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
-        getByRole = _render.getByRole;
-
+        label: "Accordion",
+        defaultIsExpanded: true
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
+      getByRole = _render.getByRole;
     var accordion = getByRole("button");
     var panel = getByRole("region");
     expect(accordion.getAttribute("aria-controls")).toBe(panel.id);
@@ -23,46 +18,36 @@ describe("Accordion component tests", function () {
   });
   test("Renders expanded by default when it is uncontrolled", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
-      label: "Accordion",
-      defaultIsExpanded: true
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
-        getByRole = _render2.getByRole;
-
+        label: "Accordion",
+        defaultIsExpanded: true
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
+      getByRole = _render2.getByRole;
     var accordion = getByRole("button");
     expect(accordion.getAttribute("aria-expanded")).toBe("true");
   });
   test("Calls correct function on click", function () {
     var onChange = jest.fn();
-
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
-      label: "Accordion",
-      onChange: onChange
-    })),
-        getByText = _render3.getByText;
-
+        label: "Accordion",
+        onChange: onChange
+      })),
+      getByText = _render3.getByText;
     _react2.fireEvent.click(getByText("Accordion"));
-
     expect(onChange).toHaveBeenCalled();
   });
   test("Controlled accordion", function () {
     var onChange = jest.fn();
-
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
-      label: "Accordion",
-      onChange: onChange,
-      isExpanded: true
-    })),
-        getByText = _render4.getByText,
-        getByRole = _render4.getByRole;
-
+        label: "Accordion",
+        onChange: onChange,
+        isExpanded: true
+      })),
+      getByText = _render4.getByText,
+      getByRole = _render4.getByRole;
     expect(getByRole("button").getAttribute("aria-expanded")).toBe("true");
-
     _react2.fireEvent.click(getByText("Accordion"));
-
     _react2.fireEvent.click(getByText("Accordion"));
-
     _react2.fireEvent.click(getByText("Accordion"));
-
     expect(onChange).toHaveBeenCalledTimes(3);
     expect(onChange.mock.calls[0][0]).toBe(false);
     expect(onChange.mock.calls[1][0]).toBe(false);

package/accordion/types.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type Props = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type Props = {
     /**
      * The panel label.
      */
@@ -23,7 +23,7 @@ declare 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;
     /**
@@ -50,7 +50,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Value of the tabindex.
+     * Value of the tabindex attribute.
      */
     tabIndex?: number;
 };

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

@@ -1,62 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
-exports.AccordionGroupAccordionContext = AccordionGroupAccordionContext;
-
+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 && {}.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) {
   var defaultIndexActive = _ref.defaultIndexActive,
-      indexActive = _ref.indexActive,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onActiveChange = _ref.onActiveChange,
-      margin = _ref.margin,
-      children = _ref.children;
+    indexActive = _ref.indexActive,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onActiveChange = _ref.onActiveChange,
+    margin = _ref.margin,
+    children = _ref.children;
   var colorsTheme = (0, _useTheme["default"])();
-
   var _useState = (0, _react.useState)(defaultIndexActive !== null && defaultIndexActive !== void 0 ? defaultIndexActive : -1),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerIndexActive = _useState2[0],
-      setInnerIndexActive = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerIndexActive = _useState2[0],
+    setInnerIndexActive = _useState2[1];
   var handlerActiveChange = (0, _react.useCallback)(function (index) {
     indexActive !== null && indexActive !== void 0 ? indexActive : setInnerIndexActive(function (prev) {
       return index === prev ? -1 : index;
@@ -76,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
@@ -84,13 +62,10 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
     }, accordion);
   })));
 };
-
 DxcAccordionGroup.Accordion = _AccordionGroupAccordion["default"];
-
 var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
-
 var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n\n  > div:not(:last-of-type):not(:only-of-type) {\n    border-bottom: ", ";\n    border-color: ", ";\n  }\n  > div:not(:first-of-type):not(:last-of-type):not(:only-of-type) {\n    border-radius: 0;\n    & > h3 > button {\n      border-radius: 0;\n    }\n  }\n  > div:first-of-type:not(:only-of-type) {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n\n    & > h3 > button {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n  > div:last-of-type:not(:only-of-type) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    & > h3 > button {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  }\n"])), function (props) {
   return calculateWidth(props.margin);
 }, function (_ref2) {
@@ -123,6 +98,4 @@ var AccordionGroupContainer = _styledComponents["default"].div(_templateObject |
 }, function (props) {
   return props.theme.borderRadius;
 });
-
-var _default = DxcAccordionGroup;
-exports["default"] = _default;
+var _default = exports["default"] = DxcAccordionGroup;

package/accordion-group/AccordionGroup.stories.tsx

@@ -5,7 +5,7 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
 export default {
-  title: "Accordion group",
+  title: "Accordion Group",
   component: DxcAccordionGroup,
 };
 
@@ -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.