@dxc-technology/halstack-react 0.0.0-dddc3c4 → 0.0.0-de7c6b0

package/accordion-group/AccordionGroup.d.ts

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

package/accordion-group/AccordionGroup.js

@@ -7,7 +7,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.AccordionGroupAccordionContext = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -17,20 +17,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
-
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _AccordionGroupAccordion = _interopRequireDefault(require("./AccordionGroupAccordion"));
+
 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); }
@@ -42,33 +40,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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);
-
-var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
-  var childProps = (0, _extends2["default"])({}, _ref);
-
-  var _useContext = (0, _react.useContext)(AccordionGroupAccordionContext),
-      activeIndex = _useContext.activeIndex,
-      handlerActiveChange = _useContext.handlerActiveChange,
-      disabled = _useContext.disabled,
-      index = _useContext.index;
-
-  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
-    isExpanded: activeIndex === index,
-    onChange: function onChange() {
-      handlerActiveChange(index);
-    },
-    disabled: disabled
-  }, childProps), childProps.children);
-};
-
-var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
-  var defaultIndexActive = _ref2.defaultIndexActive,
-      indexActive = _ref2.indexActive,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      onActiveChange = _ref2.onActiveChange,
-      margin = _ref2.margin,
-      children = _ref2.children;
+exports.AccordionGroupAccordionContext = AccordionGroupAccordionContext;
+
+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;
   var colorsTheme = (0, _useTheme["default"])();
 
   var _useState = (0, _react.useState)(defaultIndexActive !== null && defaultIndexActive !== void 0 ? defaultIndexActive : -1),
@@ -94,9 +75,7 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement(AccordionGroupContainer, {
     margin: margin,
     disabled: disabled
-  }, (Array.isArray(children) ? children : [children]).filter(function (child) {
-    return child.type === AccordionGroupAccordion;
-  }).map(function (accordion, index) {
+  }, _react.Children.map(children, function (accordion, index) {
     return /*#__PURE__*/_react["default"].createElement(AccordionGroupAccordionContext.Provider, {
       key: "accordion-".concat(index),
       value: _objectSpread({
@@ -106,28 +85,28 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
   })));
 };
 
-DxcAccordionGroup.Accordion = AccordionGroupAccordion;
+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  display: inline-block;\n  width: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n\n  & > :not(div:last-child) {\n    & > div:first-child {\n      border-radius: 0;\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-radius: 0;\n      }\n      & > .MuiButtonBase-root {\n        border-radius: 0;\n      }\n    }\n  }\n\n  & > div:first-child {\n    & > div:first-child {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n    }\n  }\n\n  & > div:last-child {\n    & > div:first-child {\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n"])), function (props) {
+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) {
+  var margin = _ref2.margin;
+  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
 }, function (_ref3) {
   var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
 }, function (_ref4) {
   var margin = _ref4.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
 }, function (_ref5) {
   var margin = _ref5.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
 }, function (_ref6) {
   var margin = _ref6.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
   return margin && (0, _typeof2["default"])(margin) === "object" && margin.left ? _variables.spaces[margin.left] : "";
 }, function (props) {
   return props.disabled ? "not-allowed" : "pointer";
@@ -139,26 +118,6 @@ var AccordionGroupContainer = _styledComponents["default"].div(_templateObject |
   return props.theme.borderRadius;
 }, function (props) {
   return props.theme.borderRadius;
-}, function (props) {
-  return "".concat(props.theme.accordionGroupSeparatorBorderThickness, " ").concat(props.theme.accordionGroupSeparatorBorderStyle);
-}, function (props) {
-  return props.theme.accordionGroupSeparatorBorderColor;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
 }, function (props) {
   return props.theme.borderRadius;
 }, function (props) {

package/accordion-group/AccordionGroup.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import DxcAccordionGroup from "./AccordionGroup";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
@@ -14,69 +15,95 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" theme="light" level={4} />
       <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Expanded" theme="light" level={4} />
       <DxcAccordionGroup defaultIndexActive={1}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <DxcAccordionGroup disabled>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcAccordionGroup defaultIndexActive={2}>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </DxcInset>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <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">
+          <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>
     </ExampleContainer>
@@ -84,140 +111,140 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xxsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
       <DxcAccordionGroup margin="xsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
       <DxcAccordionGroup margin="small">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
       <DxcAccordionGroup margin="medium">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
       <DxcAccordionGroup margin="large">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcAccordionGroup margin="xxlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion1">
+          <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
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
+        <DxcAccordionGroup.Accordion label="Accordion2">
+          <DxcInset space="2rem">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.
-          </div>
+          </DxcInset>
         </DxcAccordionGroup.Accordion>
       </DxcAccordionGroup>
     </ExampleContainer>