@dxc-technology/halstack-react 0.0.0-a210ee9 → 0.0.0-a4bef7b

package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js}

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,17 +35,13 @@ var _RequiredComponent = _interopRequireDefault(require("../common/RequiredCompo
 
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n\n  .MuiTextField-root {\n    width: 100%;\n\n    .MuiFormHelperText-root {\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n      padding-left: \"inherit\";\n\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        font-family: ", ";\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink) {\n        font-family: ", ";\n        color: ", ";\n        & + div,\n        & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      &::before {\n        border-bottom: ", ";\n      }\n      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n      &::after {\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: 1px;\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: 2px;\n          border-color: ", ";\n          transform: scaleX(1);\n        }\n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n\n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n\n      .MuiInputBase-input {\n        font-family: ", ";\n        font-size: ", ";\n        font-style: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        color: ", ";\n        line-height: ", ";\n        padding-left: \"inherit\";\n        text-overflow: ellipsis;\n\n        &.Mui-disabled {\n          cursor: not-allowed;\n          color: ", ";\n        }\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n        border-bottom: ", ";\n      }\n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n    }\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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); }
 
-  return data;
-}
+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; }
 
-var DxcTextarea = function DxcTextarea(_ref) {
+var V3DxcTextarea = function V3DxcTextarea(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? " " : _ref$label,
       _ref$name = _ref.name,
@@ -106,21 +102,21 @@ var DxcTextarea = function DxcTextarea(_ref) {
     }
   };
 
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.textarea
-  }, _react["default"].createElement(TextContainer, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.V3Textarea
+  }, /*#__PURE__*/_react["default"].createElement(TextContainer, {
     required: required,
     assistiveText: assistiveText,
     margin: margin,
     size: size,
     backgroundType: backgroundType
-  }, _react["default"].createElement(_TextField["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
     error: invalid,
     value: value !== null ? value : innerValue,
     name: name,
     multiline: true,
     disabled: disabled,
-    label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
+    label: required ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label) : label,
     helperText: assistiveText,
     onChange: handlerTextareaChange,
     onBlur: onBlur && handlerTextareaBlur || null,
@@ -143,7 +139,7 @@ var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
 
-var TextContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var TextContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n\n  .MuiTextField-root {\n    width: 100%;\n\n    .MuiFormHelperText-root {\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n      padding-left: \"inherit\";\n\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        font-family: ", ";\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink) {\n        font-family: ", ";\n        color: ", ";\n        & + div,\n        & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      &::before {\n        border-bottom: ", ";\n      }\n\n      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n\n      &::after {\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: ", ";\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: calc(", " + 1px);\n          border-color: ", ";\n        }\n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n\n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n\n      .MuiInputBase-input {\n        font-family: ", ";\n        font-size: ", ";\n        font-style: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        color: ", ";\n        line-height: ", ";\n        padding-left: \"inherit\";\n        text-overflow: ellipsis;\n\n        &.Mui-disabled {\n          cursor: not-allowed;\n          color: ", ";\n        }\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n        border-bottom-color: ", ";\n      }\n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n    }\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -156,7 +152,7 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
-  return props.theme.assistiveTextFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
   return props.theme.assistiveTextFontSize;
 }, function (props) {
@@ -176,66 +172,70 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
-  return props.theme.labelFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
 }, function (props) {
-  return props.theme.labelFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
 }, function (props) {
-  return props.backgroundType ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
+  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
-  return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
 }, function (props) {
-  return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
 }, function (props) {
-  return "2px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
+  return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
+}, function (props) {
+  return props.theme.underlineThickness;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  return props.theme.underlineThickness;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
 }, function (props) {
-  return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor, " !important");
+  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
 }, function (props) {
-  return props.theme.customContentFontFamily;
+  return props.theme.fontFamily;
 }, function (props) {
-  return props.theme.customContentFontSize;
+  return props.theme.valueFontSize;
 }, function (props) {
-  return props.theme.customContentFontStyle;
+  return props.theme.valueFontStyle;
 }, function (props) {
-  return props.theme.customContentFontWeight;
+  return props.theme.valueFontWeight;
 }, function (props) {
-  return props.theme.customContentLetterSpacing;
+  return props.theme.valueLetterSpacing;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.customContentFontColorOnDark : props.theme.customContentFontColor;
+  return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
 }, function (props) {
-  return props.theme.customContentLineHeight;
+  return props.theme.valueLineHeight;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
 }, function (props) {
   return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 });
 
-DxcTextarea.propTypes = {
+V3DxcTextarea.propTypes = {
   label: _propTypes["default"].string,
   name: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -256,5 +256,5 @@ DxcTextarea.propTypes = {
   }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
   tabIndex: _propTypes["default"].number
 };
-var _default = DxcTextarea;
+var _default = V3DxcTextarea;
 exports["default"] = _default;

package/V3Textarea/index.d.ts

@@ -0,0 +1,27 @@
+type Size = "small" | "medium" | "large" | "fillParent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  name?: string;
+  value?: string;
+  assistiveText?: string;
+  disabled?: boolean,
+  onChange?: void;
+  onBlur?: void;
+  numRows?: number;
+  required?: boolean;
+  invalid?: boolean;
+  placeholder?: string;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function V3DxcTextarea(props: Props): JSX.Element;

package/{dist/accordion → accordion}/Accordion.js

@@ -1,18 +1,18 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
@@ -39,75 +39,11 @@ 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"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-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"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-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"]);
+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); }
 
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  font-family: ", ";\n  font-size:", ";\n  font-weight: ", ";\n  color: ", " !important;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-size: ", ";\n  min-width: ", ";\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    &.Mui-expanded {\n      border-radius: ", "; \n    }\n    &.MuiExpansionPanel-root {\n      display: flex;\n      flex-direction: column;\n     \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      \n      height: 48px;\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: 24px;\n        min-width: 0;\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: ", ";\n      border-width:", ";\n      border-style:", ";\n      border-color:", ";\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  \n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n\n  .MuiSvgIcon-root {\n    color: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root {\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root.Mui-disabled {\n    opacity: 1;\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;
-  };
-
-  return data;
-}
+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; }
 
 var DxcAccordion = function DxcAccordion(_ref) {
   var _ref$label = _ref.label,
@@ -138,7 +74,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) {
@@ -168,24 +104,32 @@ var DxcAccordion = function DxcAccordion(_ref) {
     }
   };
 
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.accordion
-  }, _react["default"].createElement(DXCAccordion, {
+  }, /*#__PURE__*/_react["default"].createElement(DXCAccordion, {
     padding: padding,
     margin: margin,
     disabled: disabled,
     icon: icon || iconSrc,
     isResponsive: isResponsive
-  }, _react["default"].createElement(_ExpansionPanel["default"], {
+  }, /*#__PURE__*/_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),
+  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
+    expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null),
     tabIndex: disabled ? -1 : tabIndex
-  }, _react["default"].createElement(AccordionInfo, null, _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, {
+  }, /*#__PURE__*/_react["default"].createElement(AccordionInfo, {
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, label), icon ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    disabled: disabled
+  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(AccordionIcon, {
     src: iconSrc
-  })), assistiveText && _react["default"].createElement(AccordionAssistiveText, null, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  })), assistiveText && /*#__PURE__*/_react["default"].createElement(AccordionAssistiveText, {
+    disabled: disabled
+  }, assistiveText)), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], null, /*#__PURE__*/_react["default"].createElement(AccordionContent, {
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.accordion.backgroundColor
   }, children))))));
 };
@@ -194,35 +138,7 @@ 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.theme.fontSizeBase;
-}, function (props) {
-  return props.theme.minWidth;
-}, function (props) {
+var DXCAccordion = _styledComponents["default"].div(_templateObject || (_templateObject = (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"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -237,7 +153,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) {
@@ -247,29 +163,29 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.theme.borderRadius;
 }, function (props) {
-  return "".concat(props.theme.hoverBackgroundColor);
+  return props.theme.focusBorderColor;
 }, function (props) {
-  return props.theme.borderRadius;
+  return props.theme.focusBorderStyle;
 }, function (props) {
-  return props.theme.minHeight;
+  return props.theme.focusBorderThickness;
 }, function (props) {
-  return props.theme.headerFocusBorderThickness;
+  return props.theme.backgroundColor;
 }, function (props) {
-  return props.theme.headerFocusBorderStyle;
+  return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
-  return props.theme.headerFocusBorderColor;
+  return "".concat(props.theme.hoverBackgroundColor);
 }, function (props) {
-  return props.theme.disabledFontColor;
+  return props.theme.borderRadius;
 }, function (props) {
-  return props.theme.arrowColor;
+  return props.theme.titleLabelPaddingTop;
 }, function (props) {
-  return props.theme.headerPaddingTop;
+  return props.theme.titleLabelPaddingBottom;
 }, function (props) {
-  return props.theme.headerPaddingRight;
+  return props.theme.titleLabelPaddingRight;
 }, function (props) {
-  return props.theme.headerPaddingBottom;
+  return props.theme.titleLabelPaddingLeft;
 }, function (props) {
-  return props.theme.headerPaddingLeft;
+  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) {
@@ -282,46 +198,30 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
-var AccordionInfo = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.theme.headerTitleMarginRight;
+var AccordionInfo = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (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"])), function (props) {
+  return props.theme.titlePaddingLeft;
 }, function (props) {
-  return props.theme.headerTitleMarginLeft;
+  return props.theme.titlePaddingRight;
 }, function (props) {
-  return props.theme.headerTitleMarginTop;
+  return props.theme.titleLabelFontFamily;
 }, function (props) {
-  return props.theme.headerTitleMarginBottom;
+  return props.theme.titleLabelFontSize;
 }, function (props) {
-  return props.theme.titleFontFamily;
+  return props.theme.titleLabelFontStyle;
 }, function (props) {
-  return props.theme.titleFontSize;
+  return props.theme.titleFonLabeltWeight;
 }, function (props) {
-  return props.theme.titleFontStyle;
-}, function (props) {
-  return props.theme.titleFontWeight;
-}, function (props) {
-  return props.theme.titleFontColor || props.theme.fontColorBase;
+  return props.disabled ? props.theme.disabledTitleLabelFontColor : props.theme.titleLabelFontColor;
 });
 
-var AccordionLabel = _styledComponents["default"].div(_templateObject3());
+var AccordionLabel = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-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.theme.customContentFontColor || props.theme.fontColorBase;
-});
+var AccordionContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"])));
 
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5(), function (props) {
-  return props.theme.assistiveTextMarginTop;
-}, function (props) {
-  return props.theme.assistiveTextMarginBottom;
+var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (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"])), function (props) {
+  return props.theme.assistiveTextPaddingLeft;
 }, function (props) {
-  return props.theme.assistiveTextMarginLeft;
-}, function (props) {
-  return props.theme.assistiveTextMarginRight;
+  return props.theme.assistiveTextPaddingRight;
 }, function (props) {
   return props.theme.assistiveTextFontSize;
 }, function (props) {
@@ -331,26 +231,59 @@ var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5()
 }, function (props) {
   return props.theme.assistiveTextFontWeight;
 }, function (props) {
-  return props.theme.assistiveTextFontColor || props.theme.fontColorBase;
+  return props.disabled ? props.theme.disabledAssistiveTextFontColor : props.theme.assistiveTextFontColor;
 }, function (props) {
   return props.theme.assistiveTextLetterSpacing;
 }, function (props) {
   return props.theme.assistiveTextMinWidth;
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.iconMaxHeight;
+var IconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (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"])), function (props) {
+  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 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n"])), 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/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;