@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4fd9593

package/dist/toggle-group/ToggleGroup.js

@@ -189,7 +189,7 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (
 var ToggleGroupContainer = _styledComponents["default"].div(_templateObject2());
 
 var ToggleContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    &:focus {\n      outline: ").concat(props.theme.focusColor, " auto 1px;\n    }\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n    ").concat(!props.disabled ? "&:hover {\n          background-color: ".concat(props.selected ? props.theme.selectedBackgroundHoverColor : props.theme.unselectedBackgroundHoverColor, ";\n          color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
+  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    &:focus {\n      outline: ").concat(props.theme.focusColor, " auto 1px;\n    }\n    border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n    color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n    padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n    ").concat(!props.disabled ? "&:hover {\n          background-color: ".concat(props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor, ";\n          color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n        }\n        cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n        cursor: not-allowed;"), "\n  ");
 });
 
 var LabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {

package/dist/upload/buttons-upload/ButtonsUpload.js

@@ -25,6 +25,8 @@ var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject3() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n"]);
 
@@ -77,6 +79,8 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIcon, null), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
     margin: {
       right: "small"
@@ -97,7 +101,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
     iconPosition: "after",
     iconSrc: _uploadButton["default"],
     onClick: onUpload
-  })));
+  }))));
 };
 
 DxcButtonsUpload.propTypes = {

package/dist/upload/dragAndDropArea/DragAndDropArea.js

@@ -29,6 +29,8 @@ var _Button = _interopRequireDefault(require("../../button/Button"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject11() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-bottom: 10px;\n"]);
 
@@ -206,6 +208,8 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
   }, _react["default"].createElement(DXCDragAndDrop, {
     onDrop: handleDrop,
     onDragEnter: handleDragIn,
@@ -237,7 +241,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
     style: {
       display: "none"
     }
-  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null))));
+  })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null)))));
 };
 
 DxcDragAndDropArea.propTypes = {
@@ -288,15 +292,15 @@ var DragAndDropDescription = _styledComponents["default"].div(_templateObject7()
 }, function (props) {
   return props.theme.dragAndDropDescriptionFontWeight;
 }, function (props) {
-  return props.theme.dragAndDropTextDescriptionFontTextTransform;
+  return props.theme.dragAndDropDescriptionFontTextTransform;
 }, function (props) {
-  return props.theme.dragAndDropTextDescriptionFontColor;
+  return props.theme.dragAndDropDescriptionFontColor;
 });
 
 var ButtonChooseFiles = _styledComponents["default"].div(_templateObject8());
 
 var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9(), function (props) {
-  return props.theme.draggingAreaBackgroundColor;
+  return props.theme.draggingStateBackgroundColor;
 });
 
 var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), function (props) {
@@ -316,9 +320,9 @@ var DragAndDropTextHover = _styledComponents["default"].div(_templateObject11(),
 }, function (props) {
   return props.theme.dragAndDropDraggingStateFontWeight;
 }, function (props) {
-  return props.theme.dragAndDropTextDraggingStateFontTextTransform;
+  return props.theme.dragAndDropDraggingStateFontTextTransform;
 }, function (props) {
-  return props.theme.dragAndDropTextDraggingStateFontColor;
+  return props.theme.dragAndDropDraggingStateFontColor;
 });
 
 var _default = DxcDragAndDropArea;

package/dist/upload/file-upload/FileToUpload.js

@@ -137,7 +137,7 @@ var DXCFileToUpload = _styledComponents["default"].div(_templateObject(), functi
 }, function (props) {
   return props.theme.fileUnderlineColor;
 }, function (props) {
-  return props.theme.fileHoverColor;
+  return props.theme.hoverFileColor;
 });
 
 var FileContent = _styledComponents["default"].div(_templateObject2());

package/dist/upload/transaction/Transaction.js

@@ -43,6 +43,8 @@ var _Spinner = _interopRequireDefault(require("../../spinner/Spinner"));
 
 var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
 
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
 function _templateObject5() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: 80%;\n"]);
 
@@ -113,11 +115,13 @@ var DxcTransaction = function DxcTransaction(_ref) {
   }, _react["default"].createElement(FileImage, {
     status: status,
     img: icon
-  }), status === "processing" && _react["default"].createElement(Prueba, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_Spinner["default"], {
+  }), status === "processing" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
+  }, _react["default"].createElement(_Spinner["default"], {
     mode: "small"
-  })) || status === "success" && _react["default"].createElement(Prueba, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(FileStatus, {
-    status: status
-  })) || status === "error" && _react["default"].createElement(Prueba, null, _react["default"].createElement(_Tooltip["default"], {
+  }))) || status === "success" && _react["default"].createElement(FileData, null, _react["default"].createElement(FileName, null, name), _react["default"].createElement(_Spinner["default"], {
+    mode: "small"
+  })) || status === "error" && _react["default"].createElement(FileData, null, _react["default"].createElement(_Tooltip["default"], {
     title: message
   }, _react["default"].createElement(FileName, null, name)), _react["default"].createElement(FileStatus, {
     status: status
@@ -138,15 +142,15 @@ var DXCTransaction = _styledComponents["default"].div(_templateObject(), functio
 });
 
 var FileImage = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.status === "error" && props.theme.errorColor || props.theme.fileUploadedIconColor;
+  return props.status === "error" && props.theme.errorColor || props.theme.uploadedFileIconColor;
 }, function (props) {
   return props.img;
 }, function (props) {
-  return "".concat(props.theme.fileUploadedIconSize, " ").concat(props.theme.fileUploadedIconSize);
+  return "".concat(props.theme.uploadedFileIconSize, " ").concat(props.theme.uploadedFileIconSize);
 }, function (props) {
-  return props.theme.fileUploadedIconSize;
+  return props.theme.uploadedFileIconSize;
 }, function (props) {
-  return props.theme.fileUploadedIconSize;
+  return props.theme.uploadedFileIconSize;
 });
 
 var FileName = _styledComponents["default"].div(_templateObject3(), function (props) {
@@ -165,7 +169,7 @@ var FileStatus = _styledComponents["default"].div(_templateObject4(), function (
   return props.status === "success" && "url('".concat(_successIcon["default"], "') no-repeat padding-box") || props.status === "error" && "url('".concat(_errorIcon["default"], "') no-repeat padding-box");
 });
 
-var Prueba = _styledComponents["default"].div(_templateObject5());
+var FileData = _styledComponents["default"].div(_templateObject5());
 
 var _default = DxcTransaction;
 exports["default"] = _default;

package/dist/upload/transactions/Transactions.js

@@ -107,31 +107,31 @@ var DXCTransactions = _styledComponents["default"].div(_templateObject(), functi
 var TransactionsText = _styledComponents["default"].span(_templateObject2());
 
 var TransactionsTitle = _styledComponents["default"].span(_templateObject3(), function (props) {
-  return props.theme.filesUploadedTitleFontSize;
+  return props.theme.uploadedFilesTitleFontSize;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontStyle;
+  return props.theme.uploadedFilesTitleFontStyle;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontWeight;
+  return props.theme.uploadedFilesTitleFontWeight;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontTextTransform;
+  return props.theme.uploadedFilesTitleFontTextTransform;
 }, function (props) {
-  return props.theme.filesUploadedTitleFontColor;
+  return props.theme.uploadedFilesTitleFontColor;
 });
 
 var TransactionsSubTitle = _styledComponents["default"].span(_templateObject4(), function (props) {
-  return props.theme.filesUploadedSubtitleFontSize;
+  return props.theme.uploadedFilesSubtitleFontSize;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontStyle;
+  return props.theme.uploadedFilesSubtitleFontStyle;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontWeight;
+  return props.theme.uploadedFilesSubtitleFontWeight;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontTextTransform;
+  return props.theme.uploadedFilesSubtitleFontTextTransform;
 }, function (props) {
-  return props.theme.filesUploadedSubtitleFontColor;
+  return props.theme.uploadedFilesSubtitleFontColor;
 });
 
 var TransactionsNumber = _styledComponents["default"].span(_templateObject5(), function (props) {
-  return props.theme.filesUploadedNumberFontWeight;
+  return props.theme.uploadedFilesNumberFontWeight;
 });
 
 var _default = DxcTransactions;

package/dist/wizard/Wizard.js

@@ -238,10 +238,10 @@ var DxcWizard = function DxcWizard(_ref) {
       src: _invalid_icon["default"]
     }) : ""), step.label || step.description ? _react["default"].createElement(InfoContainer, null, step.label ? _react["default"].createElement(Label, {
       disabled: step.disabled,
-      active: i <= innerCurrent
+      visited: i <= innerCurrent
     }, step.label) : "", step.description ? _react["default"].createElement(Description, {
       disabled: step.disabled,
-      active: i <= innerCurrent
+      visited: i <= innerCurrent
     }, step.description) : "") : ""), i === steps.length - 1 ? "" : _react["default"].createElement(StepSeparator, {
       mode: mode
     }));
@@ -289,15 +289,15 @@ var Step = _styledComponents["default"].button(_templateObject3(), function (pro
 var StepHeader = _styledComponents["default"].div(_templateObject4());
 
 var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
-  return props.disabled ? props.theme.circleDisabledWidth : props.current ? props.theme.circleSelectedWidth : props.theme.circleWidth;
+  return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
 }, function (props) {
-  return props.disabled ? props.theme.circleDisabledHeight : props.current ? props.theme.circleSelectedHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.circleSelectedBorderThickness, " ").concat(props.theme.circleSelectedBorderStyle, " ").concat(props.theme.circleSelectedBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.circleDisabledBorderThickness, " ").concat(props.theme.circleDisabledBorderStyle, " ").concat(props.theme.circleDisabledBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
 }, function (props) {
   return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
 }, function (props) {
-  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.circleSelectedBorderRadius : props.disabled ? props.theme.circleDisabledBorderRadius : "";
+  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
 });
 
 var Icon = _styledComponents["default"].img(_templateObject6(), function (props) {
@@ -354,7 +354,7 @@ var Label = _styledComponents["default"].p(_templateObject12(), function (props)
 }, function (props) {
   return props.theme.labelLetterSpacing;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.labelActiveFontColor : props.theme.labelFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
 }, function (props) {
   return props.theme.labelFontTextTransform;
 });
@@ -374,7 +374,7 @@ var Description = _styledComponents["default"].p(_templateObject13(), function (
 }, function (props) {
   return props.theme.descriptionFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.descriptionActiveFontColor : props.theme.descriptionFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
 });
 
 var StepSeparator = _styledComponents["default"].div(_templateObject14(), function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-4e9134c",
+  "version": "0.0.0-4fd9593",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",

package/test/NewTextarea.test.js

@@ -159,7 +159,6 @@ describe("NewTextarea component tests", () => {
         onChange={onChange}
         onBlur={onBlur}
         margin={{ left: "medium", right: "medium" }}
-        clearable
         length={{ min: 5, max: 10 }}
       />
     );

package/test/Select.test.js

@@ -166,25 +166,22 @@ describe("Select component tests", () => {
     act(() => {
       userEvent.click(select);
     });
-    const option1 = getByText("Amazon");
-    const option2 = getByText("Ebay");
-    const option3 = getByText("Apple");
     act(() => {
-      userEvent.click(option1);
+      userEvent.click(getByText("Amazon"));
     });
     expect(onChange).toHaveBeenCalledWith([1]);
     act(() => {
-      userEvent.click(option2);
+      userEvent.click(getByText("Ebay"));
     });
     expect(onChange).toHaveBeenCalledWith([1, 2]);
     expect(getByText("Amazon, Ebay")).toBeTruthy();
     act(() => {
-      userEvent.click(option3);
+      userEvent.click(getByText("Apple"));
     });
     expect(onChange).toHaveBeenCalledWith([1, 2, 3]);
     expect(getByText("Amazon, Ebay, Apple")).toBeTruthy();
     act(() => {
-      userEvent.click(option1);
+      userEvent.click(getByText("Amazon"));
     });
     expect(onChange).toHaveBeenCalledWith([2, 3]);
     expect(getByText("Ebay, Apple")).toBeTruthy();