@dxc-technology/halstack-react 0.0.0-89339f9 → 0.0.0-8c3739a

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 (109) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/accordion/Accordion.js +72 -59
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +126 -111
  5. package/dist/alert/index.d.ts +51 -0
  6. package/dist/badge/Badge.js +3 -1
  7. package/dist/box/Box.js +1 -9
  8. package/dist/button/Button.js +30 -20
  9. package/dist/card/Card.js +2 -4
  10. package/dist/checkbox/Checkbox.js +30 -21
  11. package/dist/chip/Chip.js +30 -28
  12. package/dist/common/variables.js +987 -572
  13. package/dist/date/Date.js +17 -29
  14. package/dist/date-input/DateInput.js +400 -0
  15. package/dist/date-input/index.d.ts +95 -0
  16. package/dist/dialog/Dialog.js +21 -39
  17. package/dist/dropdown/Dropdown.js +123 -71
  18. package/dist/file-input/FileInput.js +644 -0
  19. package/dist/file-input/FileItem.js +280 -0
  20. package/dist/file-input/index.d.ts +81 -0
  21. package/dist/footer/Footer.js +25 -35
  22. package/dist/footer/dxc_logo.svg +15 -0
  23. package/dist/header/Header.js +14 -42
  24. package/dist/header/dxc_logo_black.svg +8 -0
  25. package/dist/heading/Heading.js +1 -5
  26. package/dist/input-text/InputText.js +96 -58
  27. package/dist/layout/ApplicationLayout.js +1 -1
  28. package/dist/link/Link.js +23 -26
  29. package/dist/main.d.ts +8 -0
  30. package/dist/main.js +57 -1
  31. package/dist/new-select/NewSelect.js +836 -0
  32. package/dist/new-select/index.d.ts +53 -0
  33. package/dist/new-textarea/NewTextarea.js +369 -0
  34. package/dist/new-textarea/index.d.ts +117 -0
  35. package/dist/number-input/NumberInput.js +136 -0
  36. package/dist/number-input/NumberInputContext.js +16 -0
  37. package/dist/number-input/index.d.ts +113 -0
  38. package/dist/paginator/Paginator.js +10 -4
  39. package/dist/password-input/PasswordInput.js +198 -0
  40. package/dist/password-input/index.d.ts +94 -0
  41. package/dist/progress-bar/ProgressBar.js +63 -27
  42. package/dist/resultsetTable/ResultsetTable.js +5 -22
  43. package/dist/select/Select.js +189 -185
  44. package/dist/sidenav/Sidenav.js +11 -15
  45. package/dist/slider/Slider.js +145 -66
  46. package/dist/spinner/Spinner.js +226 -59
  47. package/dist/switch/Switch.js +3 -3
  48. package/dist/table/Table.js +15 -5
  49. package/dist/tabs/Tabs.js +4 -8
  50. package/dist/tag/Tag.js +38 -36
  51. package/dist/text-input/TextInput.js +971 -0
  52. package/dist/text-input/index.d.ts +135 -0
  53. package/dist/textarea/Textarea.js +26 -22
  54. package/dist/toggle-group/ToggleGroup.js +130 -44
  55. package/dist/upload/buttons-upload/ButtonsUpload.js +8 -4
  56. package/dist/upload/dragAndDropArea/DragAndDropArea.js +16 -12
  57. package/dist/upload/file-upload/FileToUpload.js +4 -4
  58. package/dist/upload/transaction/Transaction.js +13 -9
  59. package/dist/upload/transactions/Transactions.js +11 -11
  60. package/dist/wizard/Wizard.js +84 -56
  61. package/dist/wizard/invalid_icon.svg +4 -5
  62. package/dist/wizard/valid_icon.svg +4 -5
  63. package/package.json +4 -2
  64. package/test/DateInput.test.js +242 -0
  65. package/test/Dropdown.test.js +15 -0
  66. package/test/FileInput.test.js +201 -0
  67. package/test/InputText.test.js +24 -16
  68. package/test/NewTextarea.test.js +195 -0
  69. package/test/NumberInput.test.js +259 -0
  70. package/test/Paginator.test.js +1 -1
  71. package/test/PasswordInput.test.js +83 -0
  72. package/test/ResultsetTable.test.js +1 -2
  73. package/test/Select.test.js +44 -24
  74. package/test/Spinner.test.js +5 -0
  75. package/test/TextInput.test.js +732 -0
  76. package/test/ToggleGroup.test.js +5 -1
  77. package/dist/accordion/Accordion.stories.js +0 -207
  78. package/dist/accordion/readme.md +0 -96
  79. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  80. package/dist/accordion-group/readme.md +0 -70
  81. package/dist/alert/Alert.stories.js +0 -158
  82. package/dist/alert/close.svg +0 -4
  83. package/dist/alert/error.svg +0 -4
  84. package/dist/alert/info.svg +0 -4
  85. package/dist/alert/readme.md +0 -43
  86. package/dist/alert/success.svg +0 -4
  87. package/dist/alert/warning.svg +0 -4
  88. package/dist/button/Button.stories.js +0 -224
  89. package/dist/button/readme.md +0 -93
  90. package/dist/date/calendar.svg +0 -1
  91. package/dist/date/calendar_dark.svg +0 -1
  92. package/dist/dialog/Dialog.stories.js +0 -217
  93. package/dist/dialog/readme.md +0 -32
  94. package/dist/dropdown/Dropdown.stories.js +0 -249
  95. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  96. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  97. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  98. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  99. package/dist/dropdown/readme.md +0 -69
  100. package/dist/footer/Footer.stories.js +0 -94
  101. package/dist/footer/dxc_logo_wht.png +0 -0
  102. package/dist/header/dxc_logo_black.png +0 -0
  103. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  104. package/dist/header/dxc_logo_white.png +0 -0
  105. package/dist/input-text/InputText.stories.js +0 -209
  106. package/dist/select/Select.stories.js +0 -235
  107. package/dist/select/readme.md +0 -72
  108. package/dist/slider/Slider.stories.js +0 -241
  109. package/dist/toggle-group/readme.md +0 -82
package/dist/link/Link.js CHANGED
@@ -26,7 +26,7 @@ var _variables = require("../common/variables.js");
26
26
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
27
 
28
28
  function _templateObject6() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ": ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
29
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n \n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
30
30
 
31
31
  _templateObject6 = function _templateObject6() {
32
32
  return data;
@@ -36,7 +36,7 @@ function _templateObject6() {
36
36
  }
37
37
 
38
38
  function _templateObject5() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ": ", ";\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
40
40
 
41
41
  _templateObject5 = function _templateObject5() {
42
42
  return data;
@@ -56,7 +56,7 @@ function _templateObject4() {
56
56
  }
57
57
 
58
58
  function _templateObject3() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n ", "\n color: ", ";\n\n ", "\n ", "\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-offset: 1px;\n }\n"]);
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n outline-offset: 1px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
60
60
 
61
61
  _templateObject3 = function _templateObject3() {
62
62
  return data;
@@ -66,7 +66,7 @@ function _templateObject3() {
66
66
  }
67
67
 
68
68
  function _templateObject2() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n\n ", "\n ", "\n ", "\n\n &:visited {\n ", "\n }\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n }\n"]);
69
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
70
70
 
71
71
  _templateObject2 = function _templateObject2() {
72
72
  return data;
@@ -86,9 +86,7 @@ function _templateObject() {
86
86
  }
87
87
 
88
88
  var DxcLink = function DxcLink(_ref) {
89
- var _ref$underlined = _ref.underlined,
90
- underlined = _ref$underlined === void 0 ? true : _ref$underlined,
91
- _ref$inheritColor = _ref.inheritColor,
89
+ var _ref$inheritColor = _ref.inheritColor,
92
90
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
93
91
  _ref$disabled = _ref.disabled,
94
92
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -126,7 +124,6 @@ var DxcLink = function DxcLink(_ref) {
126
124
  onClick: !disabled && onClick,
127
125
  margin: margin,
128
126
  disabled: disabled,
129
- underlined: underlined,
130
127
  inheritColor: inheritColor
131
128
  }, linkContent) : _react["default"].createElement(StyledLink, {
132
129
  tabIndex: tabIndex,
@@ -134,7 +131,6 @@ var DxcLink = function DxcLink(_ref) {
134
131
  target: newWindow ? "_blank" : "_self",
135
132
  margin: margin,
136
133
  disabled: disabled,
137
- underlined: underlined,
138
134
  inheritColor: inheritColor
139
135
  }, linkContent)));
140
136
  };
@@ -154,33 +150,39 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), funct
154
150
  var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
155
151
  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
156
152
  }, function (props) {
157
- return props.underlined && "padding-bottom: ".concat(props.theme.underlineSpacing, " !important; \n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(!props.inheritColor ? !props.disabled ? props.theme.underlineColor : props.theme.disabledUnderlineColor : "", ";");
153
+ return props.disabled ? "pointer-events: none;" : "";
158
154
  }, function (props) {
159
- return !props.underlined ? "text-decoration-color: transparent;" : "";
155
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
160
156
  }, function (props) {
161
- return props.disabled ? "pointer-events: none;" : "";
157
+ return !props.inheritColor ? props.theme.visitedFontColor : "";
162
158
  }, function (props) {
163
- return props.underlined && !props.disabled ? "color: ".concat(props.theme.visitedFontColor, " !important;\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";") : "";
159
+ return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
164
160
  }, function (props) {
165
- return !props.disabled && "color: ".concat(props.theme.hoverFontColor, " !important;\n padding-bottom: ").concat(props.theme.underlineSpacing, " !important;\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
161
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
166
162
  }, function (props) {
167
163
  return props.theme.focusColor;
164
+ }, function (props) {
165
+ return props.disabled && "outline: none";
166
+ }, function (props) {
167
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
168
168
  });
169
169
 
170
170
  var StyledButton = _styledComponents["default"].button(_templateObject3(), function (props) {
171
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
172
+ }, function (props) {
171
173
  return props.disabled && "cursor: default;";
172
174
  }, function (props) {
173
175
  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
174
- }, function (props) {
175
- return props.underlined && "padding-bottom: ".concat(props.theme.underlineSpacing, " !important; \n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(!props.inheritColor ? !props.disabled ? props.theme.underlineColor : props.theme.disabledUnderlineColor : "", ";");
176
- }, function (props) {
177
- return !props.underlined ? "text-decoration-color: transparent;" : "";
178
176
  }, function (props) {
179
177
  return props.disabled ? "pointer-events: none;" : "";
180
178
  }, function (props) {
181
- return !props.disabled && "color: ".concat(props.theme.hoverFontColor, " !important;\n padding-bottom: ").concat(props.theme.underlineSpacing, " !important;\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
179
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
182
180
  }, function (props) {
183
181
  return props.theme.focusColor;
182
+ }, function (props) {
183
+ return props.disabled && "outline: none";
184
+ }, function (props) {
185
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
184
186
  });
185
187
 
186
188
  var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
@@ -202,9 +204,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (pr
202
204
  }, function (props) {
203
205
  return props.theme.iconSize;
204
206
  }, function (props) {
205
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
206
- }, function (props) {
207
- return props.theme.iconGutter;
207
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
208
208
  });
209
209
 
210
210
  var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
@@ -212,13 +212,10 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), fun
212
212
  }, function (props) {
213
213
  return props.theme.iconSize;
214
214
  }, function (props) {
215
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
216
- }, function (props) {
217
- return props.theme.iconGutter;
215
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
218
216
  });
219
217
 
220
218
  DxcLink.propTypes = {
221
- underlined: _propTypes["default"].bool,
222
219
  inheritColor: _propTypes["default"].bool,
223
220
  disabled: _propTypes["default"].bool,
224
221
  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
package/dist/main.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export { default as DxcAlert } from "./alert/index";
2
+ export { default as DxcNewSelect } from "./new-select/index";
3
+ export { default as DxcTextInput } from "./text-input/index";
4
+ export { default as DxcDateInput } from "./date-input/index";
5
+ export { default as DxcNewTextarea } from "./new-textarea/index";
6
+ export { default as DxcNumberInput } from "./number-input/index";
7
+ export { default as DxcPasswordInput } from "./password-input/index";
8
+ export { default as DxcFileInput } from "./file-input/index";
package/dist/main.js CHANGED
@@ -67,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
67
67
  return _Header["default"];
68
68
  }
69
69
  });
70
- Object.defineProperty(exports, "DxcInput", {
70
+ Object.defineProperty(exports, "V3DxcInputText", {
71
71
  enumerable: true,
72
72
  get: function get() {
73
73
  return _InputText["default"];
@@ -217,6 +217,48 @@ Object.defineProperty(exports, "DxcBadge", {
217
217
  return _Badge["default"];
218
218
  }
219
219
  });
220
+ Object.defineProperty(exports, "DxcTextInput", {
221
+ enumerable: true,
222
+ get: function get() {
223
+ return _TextInput["default"];
224
+ }
225
+ });
226
+ Object.defineProperty(exports, "DxcPasswordInput", {
227
+ enumerable: true,
228
+ get: function get() {
229
+ return _PasswordInput["default"];
230
+ }
231
+ });
232
+ Object.defineProperty(exports, "DxcDateInput", {
233
+ enumerable: true,
234
+ get: function get() {
235
+ return _DateInput["default"];
236
+ }
237
+ });
238
+ Object.defineProperty(exports, "DxcNumberInput", {
239
+ enumerable: true,
240
+ get: function get() {
241
+ return _NumberInput["default"];
242
+ }
243
+ });
244
+ Object.defineProperty(exports, "DxcNewTextarea", {
245
+ enumerable: true,
246
+ get: function get() {
247
+ return _NewTextarea["default"];
248
+ }
249
+ });
250
+ Object.defineProperty(exports, "DxcNewSelect", {
251
+ enumerable: true,
252
+ get: function get() {
253
+ return _NewSelect["default"];
254
+ }
255
+ });
256
+ Object.defineProperty(exports, "DxcFileInput", {
257
+ enumerable: true,
258
+ get: function get() {
259
+ return _FileInput["default"];
260
+ }
261
+ });
220
262
  Object.defineProperty(exports, "ThemeContext", {
221
263
  enumerable: true,
222
264
  get: function get() {
@@ -306,6 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
306
348
 
307
349
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
308
350
 
351
+ var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
352
+
353
+ var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
354
+
355
+ var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
356
+
357
+ var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
358
+
359
+ var _NewTextarea = _interopRequireDefault(require("./new-textarea/NewTextarea"));
360
+
361
+ var _NewSelect = _interopRequireDefault(require("./new-select/NewSelect"));
362
+
363
+ var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
364
+
309
365
  var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
310
366
 
311
367
  var _BackgroundColorContext = require("./BackgroundColorContext.js");