@dxc-technology/halstack-react 0.0.0-afd5470 → 0.0.0-b1729d7

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 (155) hide show
  1. package/babel.config.js +6 -2
  2. package/dist/BackgroundColorContext.js +46 -0
  3. package/dist/ThemeContext.js +235 -2
  4. package/dist/V3Textarea/V3Textarea.js +264 -0
  5. package/dist/accordion/Accordion.js +168 -63
  6. package/dist/accordion-group/AccordionGroup.js +186 -0
  7. package/dist/alert/Alert.js +183 -84
  8. package/dist/alert/index.d.ts +51 -0
  9. package/dist/badge/Badge.js +63 -0
  10. package/dist/box/Box.js +31 -23
  11. package/dist/button/Button.js +83 -26
  12. package/dist/card/Card.js +72 -35
  13. package/dist/checkbox/Checkbox.js +98 -38
  14. package/dist/chip/Chip.js +128 -36
  15. package/dist/common/RequiredComponent.js +2 -8
  16. package/dist/common/utils.js +2 -22
  17. package/dist/common/variables.js +1439 -308
  18. package/dist/date/Date.js +80 -57
  19. package/dist/date-input/DateInput.js +400 -0
  20. package/dist/date-input/index.d.ts +95 -0
  21. package/dist/dialog/Dialog.js +58 -37
  22. package/dist/dropdown/Dropdown.js +199 -71
  23. package/dist/file-input/FileInput.js +644 -0
  24. package/dist/file-input/FileItem.js +280 -0
  25. package/dist/file-input/index.d.ts +81 -0
  26. package/dist/footer/Footer.js +121 -46
  27. package/dist/footer/Icons.js +77 -0
  28. package/dist/header/Header.js +171 -97
  29. package/dist/header/Icons.js +59 -0
  30. package/dist/heading/Heading.js +81 -16
  31. package/dist/input-text/Icons.js +22 -0
  32. package/dist/input-text/InputText.js +292 -106
  33. package/dist/layout/ApplicationLayout.js +52 -45
  34. package/dist/layout/Icons.js +55 -0
  35. package/dist/link/Link.js +136 -35
  36. package/dist/main.d.ts +8 -0
  37. package/dist/main.js +95 -7
  38. package/dist/new-select/NewSelect.js +836 -0
  39. package/dist/new-select/index.d.ts +53 -0
  40. package/dist/number-input/NumberInput.js +136 -0
  41. package/dist/number-input/NumberInputContext.js +16 -0
  42. package/dist/number-input/index.d.ts +113 -0
  43. package/dist/paginator/Icons.js +66 -0
  44. package/dist/paginator/Paginator.js +150 -63
  45. package/dist/password-input/PasswordInput.js +198 -0
  46. package/dist/password-input/index.d.ts +94 -0
  47. package/dist/progress-bar/ProgressBar.js +95 -38
  48. package/dist/radio/Radio.js +31 -17
  49. package/dist/resultsetTable/ResultsetTable.js +93 -68
  50. package/dist/select/Select.js +244 -146
  51. package/dist/sidenav/Sidenav.js +86 -129
  52. package/dist/slider/Slider.js +219 -73
  53. package/dist/spinner/Spinner.js +247 -59
  54. package/dist/switch/Switch.js +50 -27
  55. package/dist/table/Table.js +52 -13
  56. package/dist/tabs/Tabs.js +206 -35
  57. package/dist/tabs-for-sections/TabsForSections.js +1 -16
  58. package/dist/tag/Tag.js +85 -37
  59. package/dist/text-input/TextInput.js +971 -0
  60. package/dist/text-input/index.d.ts +135 -0
  61. package/dist/textarea/Textarea.js +248 -106
  62. package/dist/textarea/index.d.ts +117 -0
  63. package/dist/toggle/Toggle.js +16 -19
  64. package/dist/toggle-group/ToggleGroup.js +159 -46
  65. package/dist/upload/Upload.js +16 -11
  66. package/dist/upload/buttons-upload/ButtonsUpload.js +31 -14
  67. package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -28
  68. package/dist/upload/file-upload/FileToUpload.js +50 -24
  69. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  70. package/dist/upload/readme.md +2 -2
  71. package/dist/upload/transaction/Transaction.js +44 -24
  72. package/dist/upload/transactions/Transactions.js +38 -20
  73. package/dist/useTheme.js +22 -0
  74. package/dist/wizard/Wizard.js +139 -55
  75. package/dist/wizard/invalid_icon.svg +4 -5
  76. package/dist/wizard/valid_icon.svg +4 -5
  77. package/package.json +13 -5
  78. package/test/AccordionGroup.test.js +125 -0
  79. package/test/Date.test.js +49 -45
  80. package/test/DateInput.test.js +242 -0
  81. package/test/Dropdown.test.js +15 -0
  82. package/test/FileInput.test.js +201 -0
  83. package/test/Footer.test.js +2 -7
  84. package/test/Header.test.js +5 -10
  85. package/test/InputText.test.js +53 -41
  86. package/test/Link.test.js +25 -7
  87. package/test/NumberInput.test.js +259 -0
  88. package/test/Paginator.test.js +72 -60
  89. package/test/PasswordInput.test.js +83 -0
  90. package/test/ResultsetTable.test.js +66 -19
  91. package/test/Select.test.js +55 -34
  92. package/test/Sidenav.test.js +22 -64
  93. package/test/Slider.test.js +24 -15
  94. package/test/Spinner.test.js +5 -0
  95. package/test/Tabs.test.js +21 -0
  96. package/test/TextInput.test.js +732 -0
  97. package/test/Textarea.test.js +193 -0
  98. package/test/ToggleGroup.test.js +5 -1
  99. package/test/Upload.test.js +5 -5
  100. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  101. package/dist/accordion/Accordion.stories.js +0 -207
  102. package/dist/accordion/readme.md +0 -96
  103. package/dist/alert/Alert.stories.js +0 -158
  104. package/dist/alert/close.svg +0 -4
  105. package/dist/alert/error.svg +0 -4
  106. package/dist/alert/info.svg +0 -4
  107. package/dist/alert/readme.md +0 -43
  108. package/dist/alert/success.svg +0 -4
  109. package/dist/alert/warning.svg +0 -4
  110. package/dist/button/Button.stories.js +0 -224
  111. package/dist/button/readme.md +0 -93
  112. package/dist/common/services/example-service.js +0 -10
  113. package/dist/common/services/example-service.test.js +0 -12
  114. package/dist/date/calendar.svg +0 -1
  115. package/dist/date/calendar_dark.svg +0 -1
  116. package/dist/dialog/Dialog.stories.js +0 -217
  117. package/dist/dialog/readme.md +0 -32
  118. package/dist/dropdown/Dropdown.stories.js +0 -249
  119. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  120. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  121. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  122. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  123. package/dist/dropdown/readme.md +0 -69
  124. package/dist/footer/Footer.stories.js +0 -94
  125. package/dist/footer/dxc_logo_wht.png +0 -0
  126. package/dist/footer/readme.md +0 -41
  127. package/dist/header/Header.stories.js +0 -176
  128. package/dist/header/close_icon.svg +0 -1
  129. package/dist/header/dxc_logo_black.png +0 -0
  130. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  131. package/dist/header/dxc_logo_white.png +0 -0
  132. package/dist/header/hamb_menu_black.svg +0 -1
  133. package/dist/header/hamb_menu_white.svg +0 -1
  134. package/dist/header/readme.md +0 -33
  135. package/dist/input-text/InputText.stories.js +0 -209
  136. package/dist/input-text/error.svg +0 -1
  137. package/dist/input-text/readme.md +0 -91
  138. package/dist/layout/SideNav.js +0 -67
  139. package/dist/layout/facebook.svg +0 -45
  140. package/dist/layout/linkedin.svg +0 -50
  141. package/dist/layout/twitter.svg +0 -53
  142. package/dist/paginator/images/next.svg +0 -3
  143. package/dist/paginator/images/nextPage.svg +0 -3
  144. package/dist/paginator/images/previous.svg +0 -3
  145. package/dist/paginator/images/previousPage.svg +0 -3
  146. package/dist/paginator/readme.md +0 -50
  147. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  148. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  149. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  150. package/dist/select/Select.stories.js +0 -235
  151. package/dist/select/readme.md +0 -72
  152. package/dist/sidenav/arrow_icon.svg +0 -3
  153. package/dist/slider/Slider.stories.js +0 -241
  154. package/dist/toggle-group/readme.md +0 -82
  155. package/test/Toggle.test.js +0 -43
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
@@ -15,16 +17,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
15
17
 
16
18
  var _react = _interopRequireDefault(require("react"));
17
19
 
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
20
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
21
 
20
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
23
 
22
- require("../common/OpenSans.css");
23
-
24
24
  var _variables = require("../common/variables.js");
25
25
 
26
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
+
26
28
  function _templateObject6() {
27
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 20px;\n line-height: 27px;\n font-weight: ", ";\n letter-spacing: 0.26px;\n margin: 0;\n"]);
29
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"]);
28
30
 
29
31
  _templateObject6 = function _templateObject6() {
30
32
  return data;
@@ -34,7 +36,7 @@ function _templateObject6() {
34
36
  }
35
37
 
36
38
  function _templateObject5() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 24px;\n line-height: 33px;\n font-weight: ", ";\n letter-spacing: 0px;\n margin: 0;\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"]);
38
40
 
39
41
  _templateObject5 = function _templateObject5() {
40
42
  return data;
@@ -44,7 +46,7 @@ function _templateObject5() {
44
46
  }
45
47
 
46
48
  function _templateObject4() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 34px;\n line-height: 46px;\n font-weight: ", ";\n letter-spacing: 0.24px;\n margin: 0;\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"]);
48
50
 
49
51
  _templateObject4 = function _templateObject4() {
50
52
  return data;
@@ -54,7 +56,7 @@ function _templateObject4() {
54
56
  }
55
57
 
56
58
  function _templateObject3() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 48px;\n line-height: 65px;\n font-weight: ", ";\n letter-spacing: 0px;\n margin: 0;\n"]);
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"]);
58
60
 
59
61
  _templateObject3 = function _templateObject3() {
60
62
  return data;
@@ -64,7 +66,7 @@ function _templateObject3() {
64
66
  }
65
67
 
66
68
  function _templateObject2() {
67
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 60px;\n line-height: 82px;\n font-weight: ", ";\n letter-spacing: -0.53px;\n margin: 0;\n"]);
69
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n margin: 0;\n"]);
68
70
 
69
71
  _templateObject2 = function _templateObject2() {
70
72
  return data;
@@ -74,7 +76,7 @@ function _templateObject2() {
74
76
  }
75
77
 
76
78
  function _templateObject() {
77
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n font-family: \"Open Sans\", sans-serif;\n color: inherit;\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
78
80
 
79
81
  _templateObject = function _templateObject() {
80
82
  return data;
@@ -91,7 +93,10 @@ var DxcHeading = function DxcHeading(_ref) {
91
93
  _ref$weight = _ref.weight,
92
94
  weight = _ref$weight === void 0 ? "" : _ref$weight,
93
95
  margin = _ref.margin;
94
- return _react["default"].createElement(HeadingContainer, {
96
+ var colorsTheme = (0, _useTheme["default"])();
97
+ return _react["default"].createElement(_styledComponents.ThemeProvider, {
98
+ theme: colorsTheme.heading
99
+ }, _react["default"].createElement(HeadingContainer, {
95
100
  margin: margin
96
101
  }, level === 1 ? _react["default"].createElement(HeadingLevel1, {
97
102
  weight: weight
@@ -103,7 +108,7 @@ var DxcHeading = function DxcHeading(_ref) {
103
108
  weight: weight
104
109
  }, text) : _react["default"].createElement(HeadingLevel5, {
105
110
  weight: weight
106
- }, text));
111
+ }, text)));
107
112
  };
108
113
 
109
114
  var HeadingContainer = _styledComponents["default"].div(_templateObject(), function (props) {
@@ -119,23 +124,83 @@ var HeadingContainer = _styledComponents["default"].div(_templateObject(), funct
119
124
  });
120
125
 
121
126
  var HeadingLevel1 = _styledComponents["default"].h1(_templateObject2(), function (props) {
122
- return props.weight === "light" || props.weight === "" ? 200 : props.weight === "normal" ? 400 : 600;
127
+ return props.theme.level1FontFamily;
128
+ }, function (props) {
129
+ return props.theme.level1FontStyle;
130
+ }, function (props) {
131
+ return props.theme.level1FontSize;
132
+ }, function (props) {
133
+ return props.theme.level1LineHeight;
134
+ }, function (props) {
135
+ return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level1FontWeight;
136
+ }, function (props) {
137
+ return props.theme.level1LetterSpacing;
138
+ }, function (props) {
139
+ return props.theme.level1FontColor;
123
140
  });
124
141
 
125
142
  var HeadingLevel2 = _styledComponents["default"].h2(_templateObject3(), function (props) {
126
- return props.weight === "normal" || props.weight === "" ? 400 : props.weight === "light" ? 200 : 600;
143
+ return props.theme.level2FontFamily;
144
+ }, function (props) {
145
+ return props.theme.level2FontStyle;
146
+ }, function (props) {
147
+ return props.theme.level2FontSize;
148
+ }, function (props) {
149
+ return props.theme.level2LineHeight;
150
+ }, function (props) {
151
+ return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level2FontWeight;
152
+ }, function (props) {
153
+ return props.theme.level2LetterSpacing;
154
+ }, function (props) {
155
+ return props.theme.level2FontColor;
127
156
  });
128
157
 
129
158
  var HeadingLevel3 = _styledComponents["default"].h3(_templateObject4(), function (props) {
130
- return props.weight === "normal" || props.weight === "" ? 400 : props.weight === "light" ? 200 : 600;
159
+ return props.theme.level3FontFamily;
160
+ }, function (props) {
161
+ return props.theme.level3FontStyle;
162
+ }, function (props) {
163
+ return props.theme.level3FontSize;
164
+ }, function (props) {
165
+ return props.theme.level3LineHeight;
166
+ }, function (props) {
167
+ return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level3FontWeight;
168
+ }, function (props) {
169
+ return props.theme.level3LetterSpacing;
170
+ }, function (props) {
171
+ return props.theme.level3FontColor;
131
172
  });
132
173
 
133
174
  var HeadingLevel4 = _styledComponents["default"].h4(_templateObject5(), function (props) {
134
- return props.weight === "normal" || props.weight === "" ? 400 : props.weight === "light" ? 200 : 600;
175
+ return props.theme.level4FontFamily;
176
+ }, function (props) {
177
+ return props.theme.level4FontStyle;
178
+ }, function (props) {
179
+ return props.theme.level4FontSize;
180
+ }, function (props) {
181
+ return props.theme.level4LineHeight;
182
+ }, function (props) {
183
+ return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level4FontWeight;
184
+ }, function (props) {
185
+ return props.theme.level4LetterSpacing;
186
+ }, function (props) {
187
+ return props.theme.level4FontColor;
135
188
  });
136
189
 
137
190
  var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6(), function (props) {
138
- return props.weight === "normal" || props.weight === "" ? 400 : props.weight === "light" ? 200 : 600;
191
+ return props.theme.level5FontFamily;
192
+ }, function (props) {
193
+ return props.theme.level5FontStyle;
194
+ }, function (props) {
195
+ return props.theme.level5FontSize;
196
+ }, function (props) {
197
+ return props.theme.level5LineHeight;
198
+ }, function (props) {
199
+ return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level5FontWeight;
200
+ }, function (props) {
201
+ return props.theme.level5LetterSpacing;
202
+ }, function (props) {
203
+ return props.theme.level5FontColor;
139
204
  });
140
205
 
141
206
  DxcHeading.propTypes = {
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _default = _react["default"].createElement("svg", {
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ height: "24px",
15
+ viewBox: "0 0 24 24",
16
+ width: "24px",
17
+ fill: "currentColor"
18
+ }, _react["default"].createElement("path", {
19
+ d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
20
+ }));
21
+
22
+ exports["default"] = _default;