@dxc-technology/halstack-react 0.0.0-4fd9593 → 0.0.0-51a5c42

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 (99) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/accordion/Accordion.js +44 -39
  4. package/dist/accordion-group/AccordionGroup.js +1 -3
  5. package/dist/alert/Alert.js +124 -113
  6. package/dist/alert/index.d.ts +51 -0
  7. package/dist/button/Button.js +31 -25
  8. package/dist/checkbox/Checkbox.js +19 -13
  9. package/dist/common/variables.js +590 -386
  10. package/dist/date/Date.js +11 -13
  11. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +77 -72
  12. package/dist/date-input/index.d.ts +95 -0
  13. package/dist/dialog/Dialog.js +8 -30
  14. package/dist/dropdown/Dropdown.js +108 -68
  15. package/dist/file-input/FileInput.js +644 -0
  16. package/dist/file-input/FileItem.js +280 -0
  17. package/dist/file-input/index.d.ts +81 -0
  18. package/dist/header/Header.js +78 -67
  19. package/dist/header/Icons.js +59 -0
  20. package/dist/input-text/InputText.js +3 -3
  21. package/dist/layout/ApplicationLayout.js +1 -1
  22. package/dist/link/Link.js +4 -8
  23. package/dist/main.d.ts +8 -0
  24. package/dist/main.js +37 -21
  25. package/dist/new-select/NewSelect.js +836 -0
  26. package/dist/new-select/index.d.ts +53 -0
  27. package/dist/{number/Number.js → number-input/NumberInput.js} +13 -11
  28. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  29. package/dist/number-input/index.d.ts +113 -0
  30. package/dist/{password/Password.js → password-input/PasswordInput.js} +15 -13
  31. package/dist/password-input/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 +141 -62
  36. package/dist/spinner/Spinner.js +217 -54
  37. package/dist/tag/Tag.js +26 -32
  38. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +185 -171
  39. package/dist/text-input/index.d.ts +135 -0
  40. package/dist/textarea/Textarea.js +227 -122
  41. package/dist/textarea/index.d.ts +117 -0
  42. package/dist/toggle-group/ToggleGroup.js +130 -44
  43. package/dist/upload/Upload.js +3 -3
  44. package/dist/upload/readme.md +2 -2
  45. package/dist/upload/transaction/Transaction.js +2 -2
  46. package/package.json +2 -1
  47. package/test/Date.test.js +48 -44
  48. package/test/{NewDate.test.js → DateInput.test.js} +71 -29
  49. package/test/FileInput.test.js +201 -0
  50. package/test/Header.test.js +5 -10
  51. package/test/InputText.test.js +24 -16
  52. package/test/{Number.test.js → NumberInput.test.js} +85 -67
  53. package/test/Paginator.test.js +1 -1
  54. package/test/PasswordInput.test.js +83 -0
  55. package/test/ResultsetTable.test.js +1 -2
  56. package/test/Select.test.js +40 -17
  57. package/test/Spinner.test.js +5 -0
  58. package/test/{NewInputText.test.js → TextInput.test.js} +147 -232
  59. package/test/Textarea.test.js +193 -0
  60. package/test/ToggleGroup.test.js +5 -1
  61. package/test/Upload.test.js +5 -5
  62. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  63. package/dist/accordion/Accordion.stories.js +0 -207
  64. package/dist/accordion/readme.md +0 -96
  65. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  66. package/dist/accordion-group/readme.md +0 -70
  67. package/dist/alert/Alert.stories.js +0 -158
  68. package/dist/alert/close.svg +0 -4
  69. package/dist/alert/error.svg +0 -4
  70. package/dist/alert/info.svg +0 -4
  71. package/dist/alert/readme.md +0 -43
  72. package/dist/alert/success.svg +0 -4
  73. package/dist/alert/warning.svg +0 -4
  74. package/dist/button/Button.stories.js +0 -224
  75. package/dist/button/readme.md +0 -93
  76. package/dist/dialog/Dialog.stories.js +0 -217
  77. package/dist/dialog/readme.md +0 -32
  78. package/dist/dropdown/Dropdown.stories.js +0 -249
  79. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  80. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  81. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  82. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  83. package/dist/dropdown/readme.md +0 -69
  84. package/dist/footer/Footer.stories.js +0 -94
  85. package/dist/header/Header.stories.js +0 -176
  86. package/dist/header/close_icon.svg +0 -1
  87. package/dist/header/dxc_logo_black.svg +0 -8
  88. package/dist/header/hamb_menu_black.svg +0 -1
  89. package/dist/header/hamb_menu_white.svg +0 -1
  90. package/dist/header/readme.md +0 -33
  91. package/dist/input-text/InputText.stories.js +0 -209
  92. package/dist/new-textarea/NewTextarea.js +0 -342
  93. package/dist/password/styles.css +0 -3
  94. package/dist/select/Select.stories.js +0 -235
  95. package/dist/select/readme.md +0 -72
  96. package/dist/slider/Slider.stories.js +0 -241
  97. package/dist/toggle-group/readme.md +0 -82
  98. package/test/NewTextarea.test.js +0 -201
  99. package/test/Password.test.js +0 -76
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 = {