@dxc-technology/halstack-react 0.0.0-c5f6a2f → 0.0.0-c6243ef

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 (112) hide show
  1. package/dist/ThemeContext.js +130 -98
  2. package/dist/accordion/Accordion.js +80 -83
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +168 -83
  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 +15 -8
  10. package/dist/checkbox/Checkbox.js +88 -21
  11. package/dist/chip/Chip.js +63 -21
  12. package/dist/common/variables.js +1105 -418
  13. package/dist/date/Date.js +60 -40
  14. package/dist/dialog/Dialog.js +44 -29
  15. package/dist/dropdown/Dropdown.js +162 -74
  16. package/dist/file-input/FileInput.js +644 -0
  17. package/dist/file-input/FileItem.js +280 -0
  18. package/dist/file-input/index.d.ts +81 -0
  19. package/dist/footer/Footer.js +25 -35
  20. package/dist/footer/dxc_logo.svg +15 -0
  21. package/dist/header/Header.js +14 -42
  22. package/dist/header/dxc_logo_black.svg +8 -0
  23. package/dist/heading/Heading.js +1 -5
  24. package/dist/input-text/InputText.js +132 -56
  25. package/dist/layout/ApplicationLayout.js +3 -3
  26. package/dist/link/Link.js +71 -46
  27. package/dist/main.d.ts +8 -0
  28. package/dist/main.js +56 -0
  29. package/dist/new-date/NewDate.js +400 -0
  30. package/dist/new-date/index.d.ts +95 -0
  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/Number.js +136 -0
  36. package/dist/number/NumberContext.js +16 -0
  37. package/dist/number/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/radio/Radio.js +28 -9
  43. package/dist/resultsetTable/ResultsetTable.js +64 -38
  44. package/dist/select/Select.js +207 -148
  45. package/dist/sidenav/Sidenav.js +11 -15
  46. package/dist/slider/Slider.js +190 -63
  47. package/dist/spinner/Spinner.js +226 -59
  48. package/dist/switch/Switch.js +3 -3
  49. package/dist/table/Table.js +19 -5
  50. package/dist/tabs/Tabs.js +6 -10
  51. package/dist/tag/Tag.js +50 -36
  52. package/dist/text-input/TextInput.js +971 -0
  53. package/dist/text-input/index.d.ts +135 -0
  54. package/dist/textarea/Textarea.js +59 -33
  55. package/dist/toggle-group/ToggleGroup.js +130 -44
  56. package/dist/upload/Upload.js +1 -5
  57. package/dist/upload/buttons-upload/ButtonsUpload.js +27 -11
  58. package/dist/upload/dragAndDropArea/DragAndDropArea.js +54 -18
  59. package/dist/upload/file-upload/FileToUpload.js +37 -15
  60. package/dist/upload/files-upload/FilesToUpload.js +3 -3
  61. package/dist/upload/transaction/Transaction.js +39 -16
  62. package/dist/upload/transactions/Transactions.js +24 -8
  63. package/dist/wizard/Wizard.js +84 -56
  64. package/dist/wizard/invalid_icon.svg +4 -5
  65. package/dist/wizard/valid_icon.svg +4 -5
  66. package/package.json +4 -2
  67. package/test/Date.test.js +13 -13
  68. package/test/Dropdown.test.js +15 -0
  69. package/test/FileInput.test.js +201 -0
  70. package/test/Link.test.js +3 -2
  71. package/test/NewDate.test.js +232 -0
  72. package/test/NewTextarea.test.js +195 -0
  73. package/test/Number.test.js +257 -0
  74. package/test/Paginator.test.js +1 -1
  75. package/test/PasswordInput.test.js +83 -0
  76. package/test/ResultsetTable.test.js +1 -2
  77. package/test/Select.test.js +44 -24
  78. package/test/Spinner.test.js +5 -0
  79. package/test/TextInput.test.js +732 -0
  80. package/test/ToggleGroup.test.js +5 -1
  81. package/dist/accordion/Accordion.stories.js +0 -207
  82. package/dist/accordion/readme.md +0 -96
  83. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  84. package/dist/accordion-group/readme.md +0 -70
  85. package/dist/alert/Alert.stories.js +0 -158
  86. package/dist/alert/close.svg +0 -4
  87. package/dist/alert/error.svg +0 -4
  88. package/dist/alert/info.svg +0 -4
  89. package/dist/alert/readme.md +0 -43
  90. package/dist/alert/success.svg +0 -4
  91. package/dist/alert/warning.svg +0 -4
  92. package/dist/button/Button.stories.js +0 -224
  93. package/dist/button/readme.md +0 -93
  94. package/dist/date/calendar.svg +0 -1
  95. package/dist/date/calendar_dark.svg +0 -1
  96. package/dist/dialog/Dialog.stories.js +0 -217
  97. package/dist/dialog/readme.md +0 -32
  98. package/dist/dropdown/Dropdown.stories.js +0 -249
  99. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  100. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  101. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  102. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  103. package/dist/dropdown/readme.md +0 -69
  104. package/dist/footer/Footer.stories.js +0 -94
  105. package/dist/footer/dxc_logo_wht.png +0 -0
  106. package/dist/header/dxc_logo_black.png +0 -0
  107. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  108. package/dist/header/dxc_logo_white.png +0 -0
  109. package/dist/input-text/InputText.stories.js +0 -209
  110. package/dist/select/Select.stories.js +0 -235
  111. package/dist/select/readme.md +0 -72
  112. package/dist/toggle-group/readme.md +0 -82
package/dist/link/Link.js CHANGED
@@ -25,8 +25,18 @@ var _variables = require("../common/variables.js");
25
25
 
26
26
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
27
 
28
+ function _templateObject6() {
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
+
31
+ _templateObject6 = function _templateObject6() {
32
+ return data;
33
+ };
34
+
35
+ return data;
36
+ }
37
+
28
38
  function _templateObject5() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: 0;\n font-family: inherit;\n ", "\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
30
40
 
31
41
  _templateObject5 = function _templateObject5() {
32
42
  return data;
@@ -36,7 +46,7 @@ function _templateObject5() {
36
46
  }
37
47
 
38
48
  function _templateObject4() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n max-width: 100%;\n"]);
40
50
 
41
51
  _templateObject4 = function _templateObject4() {
42
52
  return data;
@@ -46,7 +56,7 @@ function _templateObject4() {
46
56
  }
47
57
 
48
58
  function _templateObject3() {
49
- 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"]);
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"]);
50
60
 
51
61
  _templateObject3 = function _templateObject3() {
52
62
  return data;
@@ -56,7 +66,7 @@ function _templateObject3() {
56
66
  }
57
67
 
58
68
  function _templateObject2() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\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"]);
60
70
 
61
71
  _templateObject2 = function _templateObject2() {
62
72
  return data;
@@ -66,7 +76,7 @@ function _templateObject2() {
66
76
  }
67
77
 
68
78
  function _templateObject() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n text-decoration: none;\n\n ", "\n\n color: ", ";\n ", "\n ", "\n \n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n\n max-width: 100%;\n\n &:hover {\n ", "\n }\n\n &:visited {\n ", "\n }\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
70
80
 
71
81
  _templateObject = function _templateObject() {
72
82
  return data;
@@ -76,9 +86,7 @@ function _templateObject() {
76
86
  }
77
87
 
78
88
  var DxcLink = function DxcLink(_ref) {
79
- var _ref$underlined = _ref.underlined,
80
- underlined = _ref$underlined === void 0 ? true : _ref$underlined,
81
- _ref$inheritColor = _ref.inheritColor,
89
+ var _ref$inheritColor = _ref.inheritColor,
82
90
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
83
91
  _ref$disabled = _ref.disabled,
84
92
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -99,10 +107,6 @@ var DxcLink = function DxcLink(_ref) {
99
107
  var colorsTheme = (0, _useTheme["default"])();
100
108
 
101
109
  var linkContent = _react["default"].createElement(LinkText, {
102
- underlined: underlined,
103
- inheritColor: inheritColor,
104
- disabled: disabled,
105
- margin: margin,
106
110
  iconPosition: iconPosition
107
111
  }, text, icon ? _react["default"].createElement(LinkIconContainer, {
108
112
  iconPosition: iconPosition
@@ -113,27 +117,25 @@ var DxcLink = function DxcLink(_ref) {
113
117
 
114
118
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
115
119
  theme: colorsTheme.link
120
+ }, _react["default"].createElement(DxcLinkContainer, {
121
+ margin: margin
116
122
  }, onClick ? _react["default"].createElement(StyledButton, {
117
123
  type: "button",
118
124
  onClick: !disabled && onClick,
119
- disabled: disabled
125
+ margin: margin,
126
+ disabled: disabled,
127
+ inheritColor: inheritColor
120
128
  }, linkContent) : _react["default"].createElement(StyledLink, {
121
129
  tabIndex: tabIndex,
122
130
  href: !disabled && href,
123
131
  target: newWindow ? "_blank" : "_self",
132
+ margin: margin,
133
+ disabled: disabled,
124
134
  inheritColor: inheritColor
125
- }, linkContent));
135
+ }, linkContent)));
126
136
  };
127
137
 
128
- var LinkText = _styledComponents["default"].div(_templateObject(), function (props) {
129
- return props.theme.fontSize;
130
- }, function (props) {
131
- return props.theme.fontWeight;
132
- }, function (props) {
133
- return props.theme.fontStyle;
134
- }, function (props) {
135
- return props.theme.fontFamily;
136
- }, function (props) {
138
+ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
137
139
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
138
140
  }, function (props) {
139
141
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -143,54 +145,77 @@ var LinkText = _styledComponents["default"].div(_templateObject(), function (pro
143
145
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
144
146
  }, function (props) {
145
147
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
148
+ });
149
+
150
+ var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
151
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
146
152
  }, function (props) {
147
- 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;" : "";
148
154
  }, function (props) {
149
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
155
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
150
156
  }, function (props) {
151
- return !props.underlined ? "text-decoration-color: transparent;" : "";
157
+ return !props.inheritColor ? props.theme.visitedFontColor : "";
152
158
  }, function (props) {
153
- return props.disabled ? "pointer-events: none;" : "";
159
+ return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
154
160
  }, function (props) {
155
- return props.iconPosition === "after" ? "row" : "row-reverse";
161
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
156
162
  }, function (props) {
157
- return props.iconPosition === "after" ? "flex-start" : "flex-end";
163
+ return props.theme.focusColor;
158
164
  }, function (props) {
159
- return !props.disabled && "color: ".concat(props.theme.hoverFontColor, " !important;\n text-decoration: none;\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;");
165
+ return props.disabled && "outline: none";
160
166
  }, function (props) {
161
- return props.underlined ? !props.disabled ? "color: ".concat(props.theme.visitedFontColor, " !important; border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(props.theme.visitedUnderlineColor) : "" : "";
167
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
162
168
  });
163
169
 
164
- var LinkIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
165
- return props.theme.iconWidth;
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;");
166
172
  }, function (props) {
167
- return props.theme.iconHeight;
173
+ return props.disabled && "cursor: default;";
168
174
  }, function (props) {
169
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
175
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
170
176
  }, function (props) {
171
- return props.theme.iconGutter;
177
+ return props.disabled ? "pointer-events: none;" : "";
178
+ }, function (props) {
179
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
180
+ }, function (props) {
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;");
172
186
  });
173
187
 
174
- var LinkIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
175
- return props.theme.iconWidth;
188
+ var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
189
+ return props.theme.fontSize;
176
190
  }, function (props) {
177
- return props.theme.iconHeight;
191
+ return props.theme.fontWeight;
178
192
  }, function (props) {
179
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
193
+ return props.theme.fontStyle;
194
+ }, function (props) {
195
+ return props.theme.fontFamily;
180
196
  }, function (props) {
181
- return props.theme.iconGutter;
197
+ return props.iconPosition === "after" ? "row" : "row-reverse";
198
+ }, function (props) {
199
+ return props.iconPosition === "after" ? "flex-start" : "flex-end";
182
200
  });
183
201
 
184
- var StyledLink = _styledComponents["default"].a(_templateObject4(), function (props) {
185
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
202
+ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
203
+ return props.theme.iconSize;
204
+ }, function (props) {
205
+ return props.theme.iconSize;
206
+ }, function (props) {
207
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
186
208
  });
187
209
 
188
- var StyledButton = _styledComponents["default"].button(_templateObject5(), function (props) {
189
- return props.disabled && "cursor: default;";
210
+ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
211
+ return props.theme.iconSize;
212
+ }, function (props) {
213
+ return props.theme.iconSize;
214
+ }, function (props) {
215
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
190
216
  });
191
217
 
192
218
  DxcLink.propTypes = {
193
- underlined: _propTypes["default"].bool,
194
219
  inheritColor: _propTypes["default"].bool,
195
220
  disabled: _propTypes["default"].bool,
196
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 DxcNewDate } from "./new-date/index";
5
+ export { default as DxcNewTextarea } from "./new-textarea/index";
6
+ export { default as DxcNumber } from "./number/index";
7
+ export { default as DxcPasswordInput } from "./password-input/index";
8
+ export { default as DxcFileInput } from "./file-input/index";
package/dist/main.js CHANGED
@@ -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, "DxcNewDate", {
233
+ enumerable: true,
234
+ get: function get() {
235
+ return _NewDate["default"];
236
+ }
237
+ });
238
+ Object.defineProperty(exports, "DxcNumber", {
239
+ enumerable: true,
240
+ get: function get() {
241
+ return _Number["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 _NewDate = _interopRequireDefault(require("./new-date/NewDate"));
356
+
357
+ var _Number = _interopRequireDefault(require("./number/Number"));
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");