@dxc-technology/halstack-react 0.0.0-0d951d2 → 0.0.0-0da54d8

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 (140) hide show
  1. package/BackgroundColorContext.js +8 -4
  2. package/ThemeContext.js +84 -88
  3. package/V3Select/V3Select.js +33 -127
  4. package/V3Textarea/V3Textarea.js +10 -14
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +35 -130
  7. package/accordion/types.d.ts +68 -0
  8. package/accordion/types.js +5 -0
  9. package/accordion-group/AccordionGroup.d.ts +7 -0
  10. package/accordion-group/AccordionGroup.js +65 -81
  11. package/accordion-group/types.d.ts +72 -0
  12. package/accordion-group/types.js +5 -0
  13. package/alert/Alert.d.ts +4 -0
  14. package/alert/Alert.js +38 -151
  15. package/alert/types.d.ts +49 -0
  16. package/alert/types.js +5 -0
  17. package/badge/Badge.js +9 -13
  18. package/box/Box.js +9 -13
  19. package/box/Box.stories.jsx +132 -0
  20. package/button/Button.d.ts +4 -0
  21. package/button/Button.js +15 -71
  22. package/button/Button.stories.tsx +293 -0
  23. package/button/types.d.ts +57 -0
  24. package/button/types.js +5 -0
  25. package/card/Card.d.ts +4 -0
  26. package/card/Card.js +32 -121
  27. package/card/types.d.ts +69 -0
  28. package/card/types.js +5 -0
  29. package/checkbox/Checkbox.d.ts +4 -0
  30. package/checkbox/Checkbox.js +13 -59
  31. package/checkbox/types.d.ts +60 -0
  32. package/checkbox/types.js +5 -0
  33. package/chip/Chip.js +17 -61
  34. package/common/RequiredComponent.js +3 -11
  35. package/common/variables.js +40 -45
  36. package/date/Date.js +16 -22
  37. package/date-input/DateInput.d.ts +4 -0
  38. package/date-input/DateInput.js +22 -61
  39. package/date-input/types.d.ts +100 -0
  40. package/date-input/types.js +5 -0
  41. package/dialog/Dialog.d.ts +4 -0
  42. package/dialog/Dialog.js +20 -73
  43. package/dialog/types.d.ts +43 -0
  44. package/dialog/types.js +5 -0
  45. package/dropdown/Dropdown.d.ts +4 -0
  46. package/dropdown/Dropdown.js +44 -171
  47. package/dropdown/types.d.ts +89 -0
  48. package/dropdown/types.js +5 -0
  49. package/file-input/FileInput.js +49 -161
  50. package/file-input/FileItem.js +29 -123
  51. package/footer/Footer.d.ts +4 -0
  52. package/footer/Footer.js +38 -193
  53. package/footer/Icons.js +13 -13
  54. package/footer/types.d.ts +61 -0
  55. package/footer/types.js +5 -0
  56. package/header/Header.js +35 -179
  57. package/header/Icons.js +11 -11
  58. package/heading/Heading.js +18 -72
  59. package/input-text/Icons.js +2 -2
  60. package/input-text/InputText.js +36 -130
  61. package/input-text/index.d.ts +1 -1
  62. package/layout/ApplicationLayout.js +31 -123
  63. package/layout/Icons.js +7 -7
  64. package/link/Link.js +18 -72
  65. package/main.d.ts +44 -40
  66. package/main.js +91 -87
  67. package/number-input/NumberInput.js +5 -13
  68. package/number-input/NumberInput.stories.jsx +115 -0
  69. package/number-input/NumberInputContext.js +1 -1
  70. package/package.json +15 -12
  71. package/paginator/Icons.js +9 -9
  72. package/paginator/Paginator.d.ts +4 -0
  73. package/paginator/Paginator.js +24 -131
  74. package/paginator/types.d.ts +38 -0
  75. package/paginator/types.js +5 -0
  76. package/password-input/PasswordInput.js +17 -21
  77. package/password-input/PasswordInput.stories.jsx +131 -0
  78. package/progress-bar/ProgressBar.d.ts +4 -0
  79. package/progress-bar/ProgressBar.js +19 -91
  80. package/progress-bar/types.d.ts +37 -0
  81. package/progress-bar/types.js +5 -0
  82. package/radio/Radio.d.ts +4 -0
  83. package/radio/Radio.js +15 -50
  84. package/radio/types.d.ts +54 -0
  85. package/radio/types.js +5 -0
  86. package/resultsetTable/ResultsetTable.js +35 -119
  87. package/select/Select.js +194 -466
  88. package/select/index.d.ts +4 -4
  89. package/sidenav/Sidenav.js +15 -49
  90. package/slider/Slider.d.ts +4 -0
  91. package/slider/Slider.js +45 -143
  92. package/slider/types.d.ts +83 -0
  93. package/slider/types.js +5 -0
  94. package/spinner/Spinner.js +38 -152
  95. package/switch/Switch.d.ts +4 -0
  96. package/switch/Switch.js +26 -69
  97. package/switch/types.d.ts +58 -0
  98. package/switch/types.js +5 -0
  99. package/table/Table.js +10 -24
  100. package/tabs/Tabs.d.ts +4 -0
  101. package/tabs/Tabs.js +29 -161
  102. package/tabs/types.d.ts +71 -0
  103. package/tabs/types.js +5 -0
  104. package/tag/Tag.js +22 -96
  105. package/text-input/TextInput.js +240 -389
  106. package/text-input/index.d.ts +2 -2
  107. package/textarea/Textarea.js +20 -72
  108. package/textarea/Textarea.stories.jsx +135 -0
  109. package/toggle/Toggle.js +15 -49
  110. package/toggle-group/ToggleGroup.js +23 -107
  111. package/upload/Upload.js +11 -15
  112. package/upload/buttons-upload/ButtonsUpload.js +13 -37
  113. package/upload/buttons-upload/Icons.js +7 -7
  114. package/upload/dragAndDropArea/DragAndDropArea.js +24 -128
  115. package/upload/dragAndDropArea/Icons.js +6 -6
  116. package/upload/file-upload/FileToUpload.js +16 -90
  117. package/upload/file-upload/Icons.js +13 -13
  118. package/upload/files-upload/FilesToUpload.js +12 -26
  119. package/upload/transaction/Icons.js +31 -31
  120. package/upload/transaction/Transaction.js +17 -61
  121. package/upload/transactions/Transactions.js +13 -57
  122. package/wizard/Icons.js +8 -8
  123. package/wizard/Wizard.js +31 -165
  124. package/accordion/index.d.ts +0 -28
  125. package/accordion-group/index.d.ts +0 -16
  126. package/alert/index.d.ts +0 -51
  127. package/button/Button.stories.js +0 -27
  128. package/button/index.d.ts +0 -24
  129. package/card/index.d.ts +0 -22
  130. package/checkbox/index.d.ts +0 -24
  131. package/date-input/index.d.ts +0 -95
  132. package/dialog/index.d.ts +0 -18
  133. package/dropdown/index.d.ts +0 -26
  134. package/footer/index.d.ts +0 -25
  135. package/paginator/index.d.ts +0 -20
  136. package/progress-bar/index.d.ts +0 -18
  137. package/radio/index.d.ts +0 -23
  138. package/slider/index.d.ts +0 -29
  139. package/switch/index.d.ts +0 -24
  140. package/tabs/index.d.ts +0 -19
package/tag/Tag.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -29,85 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
30
  var _Box = _interopRequireDefault(require("../box/Box"));
31
31
 
32
- function _templateObject8() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"]);
34
-
35
- _templateObject8 = function _templateObject8() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject7() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n"]);
44
-
45
- _templateObject7 = function _templateObject7() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject6() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n\n img,\n svg {\n width: ", ";\n height: ", ";\n }\n"]);
54
-
55
- _templateObject6 = function _templateObject6() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject5() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: ", ";\n height: ", ";\n"]);
64
-
65
- _templateObject5 = function _templateObject5() {
66
- return data;
67
- };
32
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
68
33
 
69
- return data;
70
- }
71
-
72
- function _templateObject4() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n\n :focus {\n outline: 2px solid ", ";\n }\n"]);
74
-
75
- _templateObject4 = function _templateObject4() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject3() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n\n :focus {\n outline: 2px solid ", ";\n outline-offset: 0px;\n }\n"]);
84
-
85
- _templateObject3 = function _templateObject3() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- function _templateObject2() {
93
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width: ", ";\n height: ", ";\n"]);
94
-
95
- _templateObject2 = function _templateObject2() {
96
- return data;
97
- };
98
-
99
- return data;
100
- }
101
-
102
- function _templateObject() {
103
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
104
-
105
- _templateObject = function _templateObject() {
106
- return data;
107
- };
34
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
108
35
 
109
- return data;
110
- }
36
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
111
37
 
112
38
  var DxcTag = function DxcTag(_ref) {
113
39
  var icon = _ref.icon,
@@ -137,21 +63,21 @@ var DxcTag = function DxcTag(_ref) {
137
63
  onClick && onClick();
138
64
  };
139
65
 
140
- var tagContent = _react["default"].createElement(_Box["default"], {
66
+ var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
141
67
  size: size,
142
68
  shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
143
- }, _react["default"].createElement(TagContent, {
69
+ }, /*#__PURE__*/_react["default"].createElement(TagContent, {
144
70
  labelPosition: labelPosition,
145
71
  size: size
146
- }, _react["default"].createElement(IconContainer, {
72
+ }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
147
73
  iconBgColor: iconBgColor
148
- }, icon ? _react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : _react["default"].createElement(TagIcon, {
74
+ }, icon ? /*#__PURE__*/_react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : /*#__PURE__*/_react["default"].createElement(TagIcon, {
149
75
  src: iconSrc
150
- })), size !== "small" && _react["default"].createElement(TagLabel, null, label)));
76
+ })), size !== "small" && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label)));
151
77
 
152
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
78
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
153
79
  theme: colorsTheme.tag
154
- }, _react["default"].createElement(StyledDxcTag, {
80
+ }, /*#__PURE__*/_react["default"].createElement(StyledDxcTag, {
155
81
  margin: margin,
156
82
  onMouseEnter: function onMouseEnter() {
157
83
  return changeIsHovered(true);
@@ -161,9 +87,9 @@ var DxcTag = function DxcTag(_ref) {
161
87
  },
162
88
  onClick: clickHandler,
163
89
  hasAction: onClick || linkHref
164
- }, onClick ? _react["default"].createElement(StyledButton, {
90
+ }, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
165
91
  tabIndex: tabIndex
166
- }, tagContent) : linkHref ? _react["default"].createElement(StyledLink, {
92
+ }, tagContent) : linkHref ? /*#__PURE__*/_react["default"].createElement(StyledLink, {
167
93
  tabIndex: tabIndex,
168
94
  href: linkHref,
169
95
  target: newWindow ? "_blank" : "_self"
@@ -182,7 +108,7 @@ var calculateWidth = function calculateWidth(size) {
182
108
  return sizes[size];
183
109
  };
184
110
 
185
- var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (_ref2) {
111
+ var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
186
112
  var hasAction = _ref2.hasAction;
187
113
  return hasAction && "pointer" || "unset";
188
114
  }, function (_ref3) {
@@ -202,7 +128,7 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function
202
128
  return margin && margin.left ? _variables.spaces[margin.left] : "";
203
129
  });
204
130
 
205
- var TagContent = _styledComponents["default"].div(_templateObject2(), function (_ref8) {
131
+ var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width: ", ";\n height: ", ";\n"])), function (_ref8) {
206
132
  var labelPosition = _ref8.labelPosition;
207
133
  return labelPosition === "before" && "row-reverse" || "row";
208
134
  }, function (props) {
@@ -211,27 +137,27 @@ var TagContent = _styledComponents["default"].div(_templateObject2(), function (
211
137
  return props.theme.height;
212
138
  });
213
139
 
214
- var StyledLink = _styledComponents["default"].a(_templateObject3(), function (props) {
140
+ var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n\n :focus {\n outline: 2px solid ", ";\n outline-offset: 0px;\n }\n"])), function (props) {
215
141
  return props.theme.focusColor;
216
142
  });
217
143
 
218
- var StyledButton = _styledComponents["default"].button(_templateObject4(), function (props) {
144
+ var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n\n :focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
219
145
  return props.theme.focusColor;
220
146
  });
221
147
 
222
- var TagIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
148
+ var TagIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: ", ";\n height: ", ";\n"])), function (props) {
223
149
  return props.theme.iconWidth;
224
150
  }, function (props) {
225
151
  return props.theme.iconHeight;
226
152
  });
227
153
 
228
- var TagIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
154
+ var TagIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n\n img,\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (props) {
229
155
  return props.theme.iconWidth;
230
156
  }, function (props) {
231
157
  return props.theme.iconHeight;
232
158
  });
233
159
 
234
- var IconContainer = _styledComponents["default"].div(_templateObject7(), function (_ref9) {
160
+ var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n"])), function (_ref9) {
235
161
  var iconBgColor = _ref9.iconBgColor;
236
162
  return iconBgColor;
237
163
  }, function (props) {
@@ -240,7 +166,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject7(), functio
240
166
  return props.theme.iconColor;
241
167
  });
242
168
 
243
- var TagLabel = _styledComponents["default"].div(_templateObject8(), function (props) {
169
+ var TagLabel = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"])), function (props) {
244
170
  return props.theme.fontFamily;
245
171
  }, function (props) {
246
172
  return props.theme.fontSize;