@dxc-technology/halstack-react 0.0.0-e904570 → 0.0.0-e961efe

package/dist/accordion/Accordion.js

@@ -9,11 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -27,18 +27,30 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
 
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-require("../common/OpenSans.css");
+var _utils = require("../common/utils.js");
 
 var _variables = require("../common/variables.js");
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
+var _BackgroundColorContext = require("../BackgroundColorContext.js");
+
+function _templateObject7() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -48,7 +60,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: 1px;\n  font-size: 14px;\n  font: Italic 14px/19px Open Sans;\n  letter-spacing: 0.24px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: ", ";\n  padding-right: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: ", ";\n  text-align: end;\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -58,7 +70,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -68,7 +80,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])([""]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -78,7 +90,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  flex-grow: 1;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -88,7 +100,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 280px;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  font-family: \"Open Sans\", sans-serif;\n  cursor: ", ";\n  .MuiPaper-root {\n    left: 85px;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0px 6px 10px #00000024;\n    border: ", ";\n    display: block;\n    position: static;\n    width: 100%;\n    border-radius: 4px;\n\n    &.Mui-expanded {\n      border-radius: 4px;\n      color: ", ";\n      .MuiSvgIcon-root {\n        color: ", ";\n      }\n    }\n\n    .MuiButtonBase-root {\n      border-radius: 4px;\n      height: 72px;\n      :hover {\n        background-color: ", ";\n        color: ", ";\n\n        .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n\n      &.MuiIconButton-root {\n        height: auto;\n      }\n\n      .MuiExpansionPanelSummary-content {\n        padding-right: 30px;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n\n    .MuiExpansionPanelSummary-root.Mui-expanded {\n      border-bottom: ", ";\n    }\n\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n\n  .MuiCollapse-hidden {\n    display: none;\n  }\n\n  .MuiPaper-root.Mui-disabled {\n    background-color: ", ";\n    opacity: ", ";\n  }\n\n  .MuiCollapse-container {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0px 6px 10px ", "24;\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n  }\n\n  .MuiSvgIcon-root {\n    color: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root {\n    padding: 0 30px;\n  }\n\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n  cursor: ", ";\n\n  .MuiPaper-root {\n    min-width: 0;\n    display: flex;\n    left: 85px;\n    background-color: ", " !important;\n    box-shadow: ", ";\n    position: static;\n    width: 100%;\n    border-radius: ", ";\n\n    &.Mui-expanded {\n      border-radius: ", ";\n    }\n    &.MuiExpansionPanel-root {\n      display: flex;\n      flex-direction: column;\n      min-height: 48px;\n    }\n    &.MuiExpansionPanel-rounded {\n      border-radius: ", ";\n    }\n    .MuiButtonBase-root.MuiExpansionPanelSummary-root {\n      min-height: 48px;\n      height: 48px;\n\n      :focus {\n        outline-color: ", ";\n        outline-style: ", ";\n        outline-width: ", ";\n        background-color: ", ";\n      }\n      :hover {\n        background-color: ", ";\n      }\n      :active {\n        background-color: ", ";\n      }\n      &.Mui-disabled {\n        opacity: 1;\n      }\n    }\n    .MuiButtonBase-root {\n      border-radius: ", ";\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n      &.MuiIconButton-root {\n        height: auto;\n      }\n      .MuiExpansionPanelSummary-content {\n        padding-top: ", ";\n        padding-bottom: ", ";\n        padding-right: ", ";\n        padding-left: ", ";\n        min-width: 0;\n        align-items: baseline;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n  .MuiCollapse-hidden {\n    display: none;\n  }\n  .MuiCollapse-container {\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n  .MuiIconButton-label {\n    & > .MuiSvgIcon-root {\n      color: ", ";\n    }\n  }\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -98,33 +110,53 @@ function _templateObject() {
 }
 
 var DxcAccordion = function DxcAccordion(_ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "default" : _ref$mode,
-      _ref$label = _ref.label,
+  var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
       _ref$iconSrc = _ref.iconSrc,
       iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
+      icon = _ref.icon,
       _ref$assistiveText = _ref.assistiveText,
       assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
       isExpanded = _ref.isExpanded,
       children = _ref.children,
       margin = _ref.margin,
-      padding = _ref.padding;
+      padding = _ref.padding,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _React$useState = _react["default"].useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       innerIsExpanded = _React$useState2[0],
       setInnerIsExpanded = _React$useState2[1];
 
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isResponsive = _useState2[0],
+      setIsResponsive = _useState2[1];
+
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var handleResize = function handleResize(width) {
+    if (width) {
+      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
+    }
+  };
+
+  var handleEventListener = function handleEventListener() {
+    handleResize(window.innerWidth);
+  };
+
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleEventListener);
+    handleResize(window.innerWidth);
+    return function () {
+      window.removeEventListener("resize", handleEventListener);
+    };
+  }, []);
 
   var handlerAccordion = function handlerAccordion() {
     if (isExpanded == null) {
@@ -137,55 +169,37 @@ var DxcAccordion = function DxcAccordion(_ref) {
   };
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
+    theme: colorsTheme.accordion
   }, _react["default"].createElement(DXCAccordion, {
     padding: padding,
     margin: margin,
-    brightness: theme,
-    mode: mode,
-    disabled: disabled
+    disabled: disabled,
+    icon: icon || iconSrc,
+    isResponsive: isResponsive
   }, _react["default"].createElement(_ExpansionPanel["default"], {
     disabled: disabled,
     onChange: handlerAccordion,
     expanded: isExpanded != null ? isExpanded : innerIsExpanded
   }, _react["default"].createElement(_ExpansionPanelSummary["default"], {
-    expandIcon: _react["default"].createElement(_ExpandMore["default"], null)
+    expandIcon: _react["default"].createElement(_ExpandMore["default"], null),
+    tabIndex: disabled ? -1 : tabIndex
   }, _react["default"].createElement(AccordionInfo, {
-    iconPosition: iconPosition
-  }, _react["default"].createElement(AccordionLabel, {
-    iconPosition: iconPosition
-  }, label), iconSrc && _react["default"].createElement(AccordionIcon, {
-    iconPosition: iconPosition,
+    disabled: disabled
+  }, _react["default"].createElement(AccordionLabel, null, label), icon ? _react["default"].createElement(IconContainer, {
+    disabled: disabled
+  }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(AccordionIcon, {
     src: iconSrc
-  })), _react["default"].createElement(AccordionAssistiveText, {
-    brightness: theme,
-    mode: mode
-  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, null, children)))));
+  })), assistiveText && _react["default"].createElement(AccordionAssistiveText, {
+    disabled: disabled
+  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionContent, {
+    disabled: disabled
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.accordion.backgroundColor
+  }, children))))));
 };
 
-DxcAccordion.propTypes = {
-  mode: _propTypes["default"].oneOf(["default", "alternative"]),
-  label: _propTypes["default"].string,
-  iconSrc: _propTypes["default"].string,
-  iconPosition: _propTypes["default"].oneOf(["before", "after"]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  theme: _propTypes["default"].oneOf(["light", "dark"]),
-  isExpanded: _propTypes["default"].bool,
-  children: _propTypes["default"].element,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+var calculateWidth = function calculateWidth(margin) {
+  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
 var DXCAccordion = _styledComponents["default"].div(_templateObject(), function (props) {
@@ -198,38 +212,44 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+}, function (props) {
+  return calculateWidth(props.margin);
 }, function (props) {
   return props.disabled && "not-allowed" || "pointer";
 }, function (props) {
-  return props.mode === "alternative" && props.theme.black || props.theme.white;
+  return props.disabled ? props.theme.disabledBackgroundColor : props.theme.backgroundColor;
 }, function (props) {
-  return props.mode === "default" && props.theme.darkGrey || props.theme.white;
+  return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
 }, function (props) {
-  return props.brightness === "dark" && props.mode === "alternative" ? "2px solid ".concat(props.theme.white) : "";
+  return props.theme.borderRadius;
 }, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
+  return props.theme.borderRadius;
 }, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
+  return props.theme.borderRadius;
 }, function (props) {
-  return props.mode === "default" && props.theme.lightGrey || props.theme.lightBlack;
+  return props.theme.focusBorderColor;
 }, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
+  return props.theme.focusBorderStyle;
 }, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
+  return props.theme.focusBorderThickness;
 }, function (props) {
-  return props.mode === "default" && "1px solid ".concat(props.theme.lightGrey) || "1px solid ".concat(props.theme.white);
+  return props.theme.backgroundColor;
 }, function (props) {
-  return props.mode === "default" && props.theme.white || props.theme.black;
+  return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
-  return props.mode === "default" && 1 || 0.8;
+  return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
-  return props.mode === "default" && props.theme.white || props.theme.black;
+  return props.theme.borderRadius;
 }, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
+  return props.theme.titleLabelPaddingTop;
 }, function (props) {
-  return props.theme.white;
+  return props.theme.titleLabelPaddingBottom;
 }, function (props) {
-  return props.mode === "default" && props.theme.darkGrey || props.theme.white;
+  return props.theme.titleLabelPaddingRight;
+}, function (props) {
+  return props.theme.titleLabelPaddingLeft;
+}, function (props) {
+  return props.disabled ? props.theme.disabledArrowColor : props.theme.arrowColor;
 }, function (props) {
   return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
 }, function (props) {
@@ -243,22 +263,91 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
 });
 
 var AccordionInfo = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.iconPosition === "after" && "row" || "row-reverse";
+  return props.theme.titlePaddingLeft;
+}, function (props) {
+  return props.theme.titlePaddingRight;
+}, function (props) {
+  return props.theme.titleLabelFontFamily;
+}, function (props) {
+  return props.theme.titleLabelFontSize;
+}, function (props) {
+  return props.theme.titleLabelFontStyle;
+}, function (props) {
+  return props.theme.titleFonLabeltWeight;
+}, function (props) {
+  return props.disabled ? props.theme.disabledTitleLabelFontColor : props.theme.titleLabelFontColor;
 });
 
-var AccordionLabel = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.iconPosition === "after" && "0" || "1";
-});
+var AccordionLabel = _styledComponents["default"].div(_templateObject3());
 
-var AccordionText = _styledComponents["default"].div(_templateObject4());
+var AccordionContent = _styledComponents["default"].div(_templateObject4());
+
+var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5(), function (props) {
+  return props.theme.assistiveTextPaddingLeft;
+}, function (props) {
+  return props.theme.assistiveTextPaddingRight;
+}, function (props) {
+  return props.theme.assistiveTextFontSize;
+}, function (props) {
+  return props.theme.assistiveTextFontFamily;
+}, function (props) {
+  return props.theme.assistiveTextFontStyle;
+}, function (props) {
+  return props.theme.assistiveTextFontWeight;
+}, function (props) {
+  return props.disabled ? props.theme.disabledAssistiveTextFontColor : props.theme.assistiveTextFontColor;
+}, function (props) {
+  return props.theme.assistiveTextLetterSpacing;
+}, function (props) {
+  return props.theme.assistiveTextMinWidth;
+});
 
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5());
+var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
+  return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconMarginLeft;
+}, function (props) {
+  return props.theme.iconMarginRigth;
+}, function (props) {
+  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
+});
 
-var AccordionIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
-  return props.iconPosition === "after" && "10px" || "0px";
+var AccordionIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
+  return props.theme.iconSize;
 }, function (props) {
-  return props.iconPosition === "before" && "10px" || "0px";
+  return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconMarginLeft;
+}, function (props) {
+  return props.theme.iconMarginRigth;
+}, function (props) {
+  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 });
 
+DxcAccordion.propTypes = {
+  label: _propTypes["default"].string,
+  iconSrc: _propTypes["default"].string,
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
+  assistiveText: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  isExpanded: _propTypes["default"].bool,
+  children: _propTypes["default"].element,
+  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  tabIndex: _propTypes["default"].number
+};
 var _default = DxcAccordion;
 exports["default"] = _default;

package/dist/accordion/index.d.ts

@@ -0,0 +1,28 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  iconSrc?: string;
+  icon?: any;
+  assistiveText?: string;
+  disabled?: boolean;
+  onChange?: void;
+  isExpanded?: boolean;
+  margin?: Space | Margin;
+  padding?: Space | Padding;
+  tabIndex?: number;
+};
+
+export default function DxcAccordion(props: Props): JSX.Element;

package/dist/accordion-group/AccordionGroup.js

@@ -0,0 +1,186 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
+
+var _utils = require("../common/utils.js");
+
+var _variables = require("../common/variables.js");
+
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\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\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\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\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"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var Accordion = function Accordion(_ref) {
+  var margin = _ref.margin,
+      childProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin"]);
+  return _react["default"].createElement(_Accordion["default"], childProps, childProps.children);
+};
+
+var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
+  var _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      onActiveChange = _ref2.onActiveChange,
+      _ref2$indexActive = _ref2.indexActive,
+      indexActive = _ref2$indexActive === void 0 ? undefined : _ref2$indexActive,
+      margin = _ref2.margin,
+      _ref2$children = _ref2.children,
+      children = _ref2$children === void 0 ? [] : _ref2$children;
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var _React$useState = _react["default"].useState(indexActive),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      innerIsExpanded = _React$useState2[0],
+      setInnerIsExpanded = _React$useState2[1];
+
+  var handlerActiveChange = function handlerActiveChange(index) {
+    if (indexActive === undefined) {
+      setInnerIsExpanded(index === innerIsExpanded ? -1 : index);
+    } else {
+      setInnerIsExpanded(indexActive);
+    }
+
+    if (typeof onActiveChange === "function" && !disabled) {
+      onActiveChange(index);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    setInnerIsExpanded(indexActive);
+  }, [indexActive]);
+  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.accordion
+  }, _react["default"].createElement(AccordionGroupContainer, {
+    margin: margin,
+    disabled: disabled
+  }, (Array.isArray(children) ? children : [children]).filter(function (el) {
+    return el.type === Accordion;
+  }).map(function (el, index) {
+    return _react["default"].cloneElement(el, {
+      onChange: function onChange() {
+        handlerActiveChange(index);
+      },
+      isExpanded: index === innerIsExpanded,
+      disabled: disabled || el.props.disabled
+    });
+  })));
+};
+
+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(), function (props) {
+  return calculateWidth(props.margin);
+}, function (_ref3) {
+  var margin = _ref3.margin;
+  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
+}, function (_ref4) {
+  var margin = _ref4.margin;
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
+}, function (_ref5) {
+  var margin = _ref5.margin;
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
+}, 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";
+}, 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 "".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) {
+  return props.theme.borderRadius;
+});
+
+DxcAccordionGroup.propTypes = {
+  disabled: _propTypes["default"].bool,
+  onActiveChange: _propTypes["default"].func,
+  indexActive: _propTypes["default"].number,
+  children: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
+    iconSrc: _propTypes["default"].string,
+    iconPosition: _propTypes["default"].oneOf(["before", "after"]),
+    assistiveText: _propTypes["default"].string,
+    disabled: _propTypes["default"].bool,
+    children: _propTypes["default"].element,
+    padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+      top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+      bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+      left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+      right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+    }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+  })),
+  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+};
+DxcAccordionGroup.Accordion = Accordion;
+var _default = DxcAccordionGroup;
+exports["default"] = _default;

package/dist/accordion-group/index.d.ts

@@ -0,0 +1,16 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  disabled?: boolean;
+  onActiveChange?: void;
+  indexActive?: number;
+  margin?: Space | Margin;
+};
+
+export default function DxcAccordionGroup(props: Props): JSX.Element;