@dxc-technology/halstack-react 0.0.0-13e0035 → 0.0.0-1418b62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/ThemeContext.js +130 -98
  2. package/dist/accordion/Accordion.js +44 -39
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +124 -113
  5. package/dist/alert/index.d.ts +51 -0
  6. package/dist/button/Button.js +31 -25
  7. package/dist/checkbox/Checkbox.js +19 -13
  8. package/dist/common/variables.js +507 -344
  9. package/dist/date/Date.js +5 -7
  10. package/dist/dialog/Dialog.js +8 -30
  11. package/dist/dropdown/Dropdown.js +108 -68
  12. package/dist/file-input/FileInput.js +644 -0
  13. package/dist/file-input/FileItem.js +280 -0
  14. package/dist/file-input/index.d.ts +81 -0
  15. package/dist/header/Header.js +3 -23
  16. package/dist/layout/ApplicationLayout.js +1 -1
  17. package/dist/link/Link.js +4 -8
  18. package/dist/main.d.ts +8 -0
  19. package/dist/main.js +16 -0
  20. package/dist/new-date/NewDate.js +68 -67
  21. package/dist/new-date/index.d.ts +95 -0
  22. package/dist/new-input-text/NewInputText.js +169 -159
  23. package/dist/new-input-text/index.d.ts +135 -0
  24. package/dist/new-select/NewSelect.js +836 -0
  25. package/dist/new-select/index.d.ts +53 -0
  26. package/dist/new-textarea/NewTextarea.js +60 -37
  27. package/dist/new-textarea/index.d.ts +117 -0
  28. package/dist/number/Number.js +5 -3
  29. package/dist/number/index.d.ts +113 -0
  30. package/dist/password/Password.js +7 -3
  31. package/dist/password/index.d.ts +94 -0
  32. package/dist/progress-bar/ProgressBar.js +62 -26
  33. package/dist/select/Select.js +122 -158
  34. package/dist/sidenav/Sidenav.js +6 -4
  35. package/dist/slider/Slider.js +56 -52
  36. package/dist/spinner/Spinner.js +217 -54
  37. package/dist/tag/Tag.js +26 -32
  38. package/dist/toggle-group/ToggleGroup.js +21 -39
  39. package/dist/upload/transaction/Transaction.js +2 -2
  40. package/package.json +2 -1
  41. package/test/FileInput.test.js +201 -0
  42. package/test/NewDate.test.js +41 -12
  43. package/test/NewInputText.test.js +106 -189
  44. package/test/NewTextarea.test.js +96 -102
  45. package/test/Number.test.js +46 -30
  46. package/test/Paginator.test.js +1 -1
  47. package/test/Password.test.js +17 -10
  48. package/test/ResultsetTable.test.js +1 -2
  49. package/test/Select.test.js +40 -17
  50. package/test/Spinner.test.js +5 -0
  51. package/dist/accordion/Accordion.stories.js +0 -207
  52. package/dist/accordion/readme.md +0 -96
  53. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  54. package/dist/accordion-group/readme.md +0 -70
  55. package/dist/alert/Alert.stories.js +0 -158
  56. package/dist/alert/close.svg +0 -4
  57. package/dist/alert/error.svg +0 -4
  58. package/dist/alert/info.svg +0 -4
  59. package/dist/alert/readme.md +0 -43
  60. package/dist/alert/success.svg +0 -4
  61. package/dist/alert/warning.svg +0 -4
  62. package/dist/button/Button.stories.js +0 -224
  63. package/dist/button/readme.md +0 -93
  64. package/dist/dialog/Dialog.stories.js +0 -217
  65. package/dist/dialog/readme.md +0 -32
  66. package/dist/dropdown/Dropdown.stories.js +0 -249
  67. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  68. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  69. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  70. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  71. package/dist/dropdown/readme.md +0 -69
  72. package/dist/select/Select.stories.js +0 -235
  73. package/dist/select/readme.md +0 -72
  74. package/dist/toggle-group/readme.md +0 -82
package/dist/checkbox/Checkbox.js CHANGED
@@ -36,7 +36,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
38
  function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 17px;\n height: 17px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n margin-left: ", ";\n margin-right: ", ";\n"]);
40
40
 
41
41
  _templateObject3 = function _templateObject3() {
42
42
  return data;
@@ -46,7 +46,7 @@ function _templateObject3() {
46
46
  }
47
47
 
48
48
  function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 26.6px;\n height: 26.6px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n &.Mui-focusVisible {\n .MuiIconButton-label {\n outline: ", "\n auto 1px;\n }\n }\n z-index: 1;\n padding: 10px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin: 2px;\n margin-left: ", ";\n margin-right: ", ";\n }\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n right: ", ";\n }\n"]);
50
50
 
51
51
  _templateObject2 = function _templateObject2() {
52
52
  return data;
@@ -90,6 +90,11 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
90
90
  innerChecked = _useState2[0],
91
91
  setInnerChecked = _useState2[1];
92
92
 
93
+ var _useState3 = (0, _react.useState)(false),
94
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
95
+ isLabelHovered = _useState4[0],
96
+ setIsLabelHovered = _useState4[1];
97
+
93
98
  var colorsTheme = (0, _useTheme["default"])();
94
99
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
95
100
 
@@ -108,6 +113,10 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
108
113
  }
109
114
  };
110
115
 
116
+ var handleLabelHover = function handleLabelHover() {
117
+ setIsLabelHovered(!isLabelHovered);
118
+ };
119
+
111
120
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
112
121
  theme: colorsTheme.checkbox
113
122
  }, _react["default"].createElement(CheckboxContainer, {
@@ -117,7 +126,8 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
117
126
  disabled: disabled,
118
127
  margin: margin,
119
128
  size: size,
120
- backgroundType: backgroundType
129
+ backgroundType: backgroundType,
130
+ isLabelHovered: isLabelHovered
121
131
  }, _react["default"].createElement(_Checkbox["default"], {
122
132
  checked: checked != undefined ? checked : innerChecked,
123
133
  inputProps: {
@@ -142,7 +152,9 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
142
152
  onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
143
153
  disabled: disabled,
144
154
  className: "labelContainer",
145
- backgroundType: backgroundType
155
+ backgroundType: backgroundType,
156
+ onMouseOver: handleLabelHover,
157
+ onMouseOut: handleLabelHover
146
158
  }, label)));
147
159
  };
148
160
 
@@ -231,7 +243,7 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
231
243
  }, function (props) {
232
244
  return props.labelPosition === "before" ? "row-reverse" : "row";
233
245
  }, function (props) {
234
- return getNotDisabledColor(props, "border");
246
+ return props.isLabelHovered ? props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor : getNotDisabledColor(props, "border");
235
247
  }, function (props) {
236
248
  return getDisabledColor(props, "border");
237
249
  }, function (props) {
@@ -242,8 +254,6 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
242
254
  return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
243
255
  }, function (props) {
244
256
  return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
245
- }, function (props) {
246
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
247
257
  }, function (props) {
248
258
  return props.theme.checkLabelSpacing;
249
259
  }, function (props) {
@@ -251,9 +261,9 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
251
261
  }, function (props) {
252
262
  return props.labelPosition === "before" ? "0px" : "";
253
263
  }, function (props) {
254
- return props.labelPosition === "after" ? "0px" : "";
264
+ return props.labelPosition === "before" ? "unset" : "1px";
255
265
  }, function (props) {
256
- return props.labelPosition === "before" ? "0px" : "";
266
+ return props.labelPosition === "before" ? "1px" : "unset";
257
267
  });
258
268
 
259
269
  var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
@@ -266,10 +276,6 @@ var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), fu
266
276
  return props.labelPosition === "after" ? "0px" : "";
267
277
  }, function (props) {
268
278
  return props.labelPosition === "before" ? "0px" : "";
269
- }, function (props) {
270
- return props.labelPosition === "after" ? "0px" : "";
271
- }, function (props) {
272
- return props.labelPosition === "before" ? "0px" : "";
273
279
  });
274
280
 
275
281
  DxcCheckbox.propTypes = {