@dxc-technology/halstack-react 0.0.0-b4fde6b → 0.0.0-b5ec444

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;
-
 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 _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 && 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 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,
-      _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;
@@ -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

@@ -1,10 +1,11 @@
 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";
 
 export default {
-  title: "Accordion group",
+  title: "Accordion Group",
   component: DxcAccordionGroup,
 };
 
@@ -14,95 +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" 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>
@@ -110,142 +111,142 @@ 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>
   </>
-);
+);

package/accordion-group/AccordionGroup.test.js

@@ -1,54 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
-
 describe("Accordion component tests", function () {
   test("Uncontrolled accordion group calls correct function on click", function () {
     var onActiveChange = jest.fn();
-
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
-        getByText = _render.getByText,
-        getAllByRole = _render.getAllByRole;
-
+        margin: "large",
+        onActiveChange: onActiveChange
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
+      getByText = _render.getByText,
+      getAllByRole = _render.getAllByRole;
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-
     _react2.fireEvent.click(getByText("Accordion1"));
-
     expect(onActiveChange).toHaveBeenCalled();
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
   test("Uncontrolled accordion group renders initially with an accordion expanded using defaultIndexActive", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      defaultIndexActive: 1
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
-        queryByText = _render2.queryByText,
-        getByText = _render2.getByText,
-        getAllByRole = _render2.getAllByRole;
-
+        defaultIndexActive: 1
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
+      queryByText = _render2.queryByText,
+      getByText = _render2.getByText,
+      getAllByRole = _render2.getAllByRole;
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
     expect(getByText("Second accordion")).toBeTruthy();
@@ -56,31 +43,24 @@ describe("Accordion component tests", function () {
   });
   test("Controlled accordion with indexActive change", function () {
     var onActiveChange = jest.fn();
-
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      indexActive: 1,
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        queryByText = _render3.queryByText,
-        getByText = _render3.getByText,
-        getAllByRole = _render3.getAllByRole,
-        rerender = _render3.rerender;
-
+        margin: "large",
+        indexActive: 1,
+        onActiveChange: onActiveChange
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
+      queryByText = _render3.queryByText,
+      getByText = _render3.getByText,
+      getAllByRole = _render3.getAllByRole,
+      rerender = _render3.rerender;
     expect(queryByText("Text1")).toBeFalsy();
     expect(getByText("Text2")).toBeTruthy();
-
     _react2.fireEvent.click(getByText("Accordion1"));
-
     _react2.fireEvent.click(getByText("Accordion2"));
-
     expect(onActiveChange.mock.calls[0][0]).toBe(0);
     expect(onActiveChange.mock.calls[1][0]).toBe(1);
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
@@ -91,36 +71,28 @@ describe("Accordion component tests", function () {
       onActiveChange: onActiveChange
     }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
       label: "Accordion1",
-      padding: "medium",
       margin: "large"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
+      label: "Accordion2"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
   test("Disabled uncontrolled accordion group", function () {
     var onActiveChange = jest.fn();
-
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange,
-      disabled: true
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        getByText = _render4.getByText;
-
+        margin: "large",
+        onActiveChange: onActiveChange,
+        disabled: true
+      }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion1",
+        margin: "large"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
+        label: "Accordion2"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
+      getByText = _render4.getByText;
     _react2.fireEvent.click(getByText("Accordion1"));
-
     _react2.fireEvent.click(getByText("Accordion2"));
-
     expect(onActiveChange).toHaveBeenCalledTimes(0);
   });
 });