@dxc-technology/halstack-react 0.0.0-11cad3f → 0.0.0-1418b62

package/dist/accordion/Accordion.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -40,7 +40,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: 0px;\n  margin-right: 10px;\n"]);
+  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;
@@ -50,7 +50,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  max-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"]);
+  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;
@@ -60,7 +60,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  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\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"]);
+  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;
@@ -70,7 +70,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", " !important;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -100,7 +100,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  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\n  width: ", ";\n\n  cursor: ", ";\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      :hover {\n        background-color: ", ";\n      }\n    }\n\n    .MuiButtonBase-root {\n      border-radius: ", ";\n      height: auto;\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-top: ", ";\n        padding-bottom: ", ";\n        padding-right: 16px;\n        padding-left: 0;\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\n    .MuiExpansionPanelSummary-root.Mui-expanded {\n      min-height: 48px;\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    color: ", ";\n  }\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\n  .MuiExpansionPanelSummary-root.Mui-disabled {\n    opacity: 1;\n  }\n  .MuiExpansionPanelSummary-root.Mui-focused {\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n  }\n\n  .MuiExpansionPanelDetails-root {\n    height: ", ";\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;
@@ -138,7 +138,7 @@ var DxcAccordion = function DxcAccordion(_ref) {
       isResponsive = _useState2[0],
       setIsResponsive = _useState2[1];
 
-  var colorsTheme = (0, _useTheme["default"])(); // const backgroundType = useContext(BackgroundColorContext);
+  var colorsTheme = (0, _useTheme["default"])();
 
   var handleResize = function handleResize(width) {
     if (width) {
@@ -185,11 +185,13 @@ var DxcAccordion = function DxcAccordion(_ref) {
     tabIndex: disabled ? -1 : tabIndex
   }, _react["default"].createElement(AccordionInfo, {
     disabled: disabled
-  }, _react["default"].createElement(AccordionLabel, null, label), icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(AccordionIcon, {
+  }, _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
   })), assistiveText && _react["default"].createElement(AccordionAssistiveText, {
     disabled: disabled
-  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, {
+  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionContent, {
     disabled: disabled
   }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.accordion.backgroundColor
@@ -200,30 +202,6 @@ var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
-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 DXCAccordion = _styledComponents["default"].div(_templateObject(), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
@@ -239,7 +217,7 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.disabled && "not-allowed" || "pointer";
 }, function (props) {
-  return props.theme.backgroundColor;
+  return props.disabled ? props.theme.disabledBackgroundColor : props.theme.backgroundColor;
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
 }, function (props) {
@@ -248,6 +226,16 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
   return props.theme.borderRadius;
 }, function (props) {
   return props.theme.borderRadius;
+}, function (props) {
+  return props.theme.focusBorderColor;
+}, function (props) {
+  return props.theme.focusBorderStyle;
+}, function (props) {
+  return props.theme.focusBorderThickness;
+}, function (props) {
+  return props.theme.backgroundColor;
+}, function (props) {
+  return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
   return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
@@ -257,17 +245,11 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.theme.titleLabelPaddingBottom;
 }, function (props) {
-  return props.theme.disabledFontColor;
+  return props.theme.titleLabelPaddingRight;
 }, function (props) {
-  return props.theme.arrowColor;
+  return props.theme.titleLabelPaddingLeft;
 }, function (props) {
-  return props.theme.titleFocusBorderThickness;
-}, function (props) {
-  return props.theme.titleFocusBorderStyle;
-}, function (props) {
-  return props.theme.titleFocusBorderColor;
-}, function (props) {
-  return props.theme.customContentPanelHeight;
+  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) {
@@ -293,20 +275,12 @@ var AccordionInfo = _styledComponents["default"].div(_templateObject2(), functio
 }, function (props) {
   return props.theme.titleFonLabeltWeight;
 }, function (props) {
-  return props.disabled && props.theme.disabledFontColor || props.theme.titleLabelFontColor || props.theme.fontColorBase;
+  return props.disabled ? props.theme.disabledTitleLabelFontColor : props.theme.titleLabelFontColor;
 });
 
 var AccordionLabel = _styledComponents["default"].div(_templateObject3());
 
-var AccordionText = _styledComponents["default"].div(_templateObject4(), function (props) {
-  return props.theme.customContentFontFamily;
-}, function (props) {
-  return props.theme.customContentFontSize;
-}, function (props) {
-  return props.theme.customContentFontWeight;
-}, function (props) {
-  return props.disabled && props.theme.disabledFontColor || props.theme.customContentFontColor || props.theme.fontColorBase;
-});
+var AccordionContent = _styledComponents["default"].div(_templateObject4());
 
 var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5(), function (props) {
   return props.theme.assistiveTextPaddingLeft;
@@ -321,7 +295,7 @@ var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5()
 }, function (props) {
   return props.theme.assistiveTextFontWeight;
 }, function (props) {
-  return props.disabled && props.theme.disabledFontColor || props.theme.assistiveTextFontColor || props.theme.fontColorBase;
+  return props.disabled ? props.theme.disabledAssistiveTextFontColor : props.theme.assistiveTextFontColor;
 }, function (props) {
   return props.theme.assistiveTextLetterSpacing;
 }, function (props) {
@@ -329,18 +303,51 @@ var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5()
 });
 
 var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.iconMaxHeight;
+  return props.theme.iconSize;
 }, function (props) {
-  return props.theme.iconMaxWidth;
+  return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconMarginLeft;
 }, function (props) {
   return props.theme.iconMarginRigth;
 }, function (props) {
-  return props.theme.arrowColor;
+  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 });
 
-var AccordionIcon = _styledComponents["default"].img(_templateObject7());
+var AccordionIcon = _styledComponents["default"].img(_templateObject7(), 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;
+});
 
+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-group/AccordionGroup.js

@@ -34,7 +34,7 @@ var _variables = require("../common/variables.js");
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: ", ";\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"]);
+  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;
@@ -103,8 +103,6 @@ var calculateWidth = function calculateWidth(margin) {
 };
 
 var AccordionGroupContainer = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.theme.minWidth;
-}, function (props) {
   return calculateWidth(props.margin);
 }, function (_ref3) {
   var margin = _ref3.margin;