@dxc-technology/halstack-react 0.0.0-d20101f → 0.0.0-d4fec82

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 (308) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/alert/Alert.js +290 -0
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -21
  21. package/box/Box.stories.jsx +132 -0
  22. package/box/index.d.ts +25 -0
  23. package/button/Button.d.ts +4 -0
  24. package/button/Button.js +182 -0
  25. package/button/Button.stories.tsx +293 -0
  26. package/button/types.d.ts +57 -0
  27. package/button/types.js +5 -0
  28. package/card/Card.d.ts +4 -0
  29. package/{dist/card → card}/Card.js +32 -121
  30. package/card/types.d.ts +69 -0
  31. package/card/types.js +5 -0
  32. package/checkbox/Checkbox.d.ts +4 -0
  33. package/{dist/checkbox → checkbox}/Checkbox.js +42 -80
  34. package/checkbox/types.d.ts +60 -0
  35. package/checkbox/types.js +5 -0
  36. package/{dist/chip → chip}/Chip.js +33 -81
  37. package/chip/index.d.ts +22 -0
  38. package/{dist/common → common}/OpenSans.css +0 -0
  39. package/{dist/common → common}/RequiredComponent.js +3 -11
  40. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  50. package/{dist/common → common}/utils.js +0 -0
  51. package/common/variables.js +1569 -0
  52. package/{dist/date → date}/Date.js +23 -31
  53. package/date/index.d.ts +27 -0
  54. package/date-input/DateInput.d.ts +4 -0
  55. package/date-input/DateInput.js +361 -0
  56. package/date-input/types.d.ts +100 -0
  57. package/date-input/types.js +5 -0
  58. package/{dist/dialog → dialog}/Dialog.js +26 -77
  59. package/dialog/index.d.ts +18 -0
  60. package/dropdown/Dropdown.d.ts +4 -0
  61. package/dropdown/Dropdown.js +417 -0
  62. package/dropdown/types.d.ts +89 -0
  63. package/dropdown/types.js +5 -0
  64. package/file-input/FileInput.js +532 -0
  65. package/file-input/FileItem.js +193 -0
  66. package/file-input/index.d.ts +81 -0
  67. package/footer/Footer.d.ts +4 -0
  68. package/footer/Footer.js +266 -0
  69. package/footer/Icons.js +77 -0
  70. package/footer/types.d.ts +61 -0
  71. package/footer/types.js +5 -0
  72. package/header/Header.js +326 -0
  73. package/header/Icons.js +59 -0
  74. package/header/index.d.ts +25 -0
  75. package/{dist/heading → heading}/Heading.js +30 -76
  76. package/heading/index.d.ts +17 -0
  77. package/input-text/Icons.js +22 -0
  78. package/{dist/input-text → input-text}/InputText.js +120 -178
  79. package/input-text/index.d.ts +36 -0
  80. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  81. package/layout/Icons.js +55 -0
  82. package/{dist/link → link}/Link.js +29 -83
  83. package/link/index.d.ts +23 -0
  84. package/main.d.ts +44 -0
  85. package/{dist/main.js → main.js} +121 -69
  86. package/number-input/NumberInput.js +128 -0
  87. package/number-input/NumberInput.stories.jsx +115 -0
  88. package/number-input/NumberInputContext.js +16 -0
  89. package/number-input/index.d.ts +113 -0
  90. package/package.json +34 -25
  91. package/paginator/Icons.js +66 -0
  92. package/paginator/Paginator.d.ts +4 -0
  93. package/paginator/Paginator.js +198 -0
  94. package/paginator/types.d.ts +38 -0
  95. package/paginator/types.js +5 -0
  96. package/password-input/PasswordInput.js +199 -0
  97. package/password-input/PasswordInput.stories.jsx +131 -0
  98. package/password-input/index.d.ts +94 -0
  99. package/progress-bar/ProgressBar.d.ts +4 -0
  100. package/progress-bar/ProgressBar.js +170 -0
  101. package/progress-bar/types.d.ts +37 -0
  102. package/progress-bar/types.js +5 -0
  103. package/radio/Radio.d.ts +4 -0
  104. package/{dist/radio → radio}/Radio.js +15 -50
  105. package/radio/types.d.ts +54 -0
  106. package/radio/types.js +5 -0
  107. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  108. package/resultsetTable/index.d.ts +19 -0
  109. package/select/Select.js +865 -0
  110. package/select/index.d.ts +131 -0
  111. package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
  112. package/sidenav/index.d.ts +13 -0
  113. package/slider/Slider.d.ts +4 -0
  114. package/slider/Slider.js +306 -0
  115. package/slider/types.d.ts +83 -0
  116. package/slider/types.js +5 -0
  117. package/spinner/Spinner.js +267 -0
  118. package/spinner/index.d.ts +17 -0
  119. package/switch/Switch.d.ts +4 -0
  120. package/{dist/switch → switch}/Switch.js +26 -69
  121. package/switch/types.d.ts +58 -0
  122. package/switch/types.js +5 -0
  123. package/{dist/table → table}/Table.js +13 -23
  124. package/table/index.d.ts +13 -0
  125. package/tabs/Tabs.d.ts +4 -0
  126. package/tabs/Tabs.js +211 -0
  127. package/tabs/types.d.ts +71 -0
  128. package/tabs/types.js +5 -0
  129. package/{dist/tag → tag}/Tag.js +50 -122
  130. package/tag/index.d.ts +24 -0
  131. package/text-input/TextInput.js +825 -0
  132. package/text-input/index.d.ts +135 -0
  133. package/textarea/Textarea.js +317 -0
  134. package/textarea/Textarea.stories.jsx +135 -0
  135. package/textarea/index.d.ts +117 -0
  136. package/{dist/toggle → toggle}/Toggle.js +15 -49
  137. package/toggle/index.d.ts +21 -0
  138. package/toggle-group/ToggleGroup.js +243 -0
  139. package/toggle-group/index.d.ts +21 -0
  140. package/{dist/upload → upload}/Upload.js +11 -15
  141. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  142. package/upload/buttons-upload/Icons.js +40 -0
  143. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  144. package/upload/dragAndDropArea/Icons.js +39 -0
  145. package/upload/file-upload/FileToUpload.js +115 -0
  146. package/upload/file-upload/Icons.js +66 -0
  147. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  148. package/upload/index.d.ts +15 -0
  149. package/upload/transaction/Icons.js +160 -0
  150. package/upload/transaction/Transaction.js +104 -0
  151. package/upload/transactions/Transactions.js +94 -0
  152. package/{dist/useTheme.js → useTheme.js} +0 -0
  153. package/wizard/Icons.js +65 -0
  154. package/{dist/wizard → wizard}/Wizard.js +40 -180
  155. package/wizard/index.d.ts +18 -0
  156. package/README.md +0 -66
  157. package/babel.config.js +0 -8
  158. package/dist/BackgroundColorContext.js +0 -46
  159. package/dist/ThemeContext.js +0 -216
  160. package/dist/accordion/Accordion.js +0 -346
  161. package/dist/accordion/Accordion.stories.js +0 -207
  162. package/dist/accordion/readme.md +0 -96
  163. package/dist/accordion-group/AccordionGroup.js +0 -188
  164. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  165. package/dist/accordion-group/readme.md +0 -70
  166. package/dist/alert/Alert.js +0 -388
  167. package/dist/alert/Alert.stories.js +0 -158
  168. package/dist/alert/close.svg +0 -4
  169. package/dist/alert/error.svg +0 -4
  170. package/dist/alert/info.svg +0 -4
  171. package/dist/alert/readme.md +0 -43
  172. package/dist/alert/success.svg +0 -4
  173. package/dist/alert/warning.svg +0 -4
  174. package/dist/badge/Badge.js +0 -63
  175. package/dist/button/Button.js +0 -232
  176. package/dist/button/Button.stories.js +0 -224
  177. package/dist/button/readme.md +0 -93
  178. package/dist/checkbox/Checkbox.stories.js +0 -144
  179. package/dist/checkbox/readme.md +0 -116
  180. package/dist/common/variables.js +0 -1158
  181. package/dist/date/Date.stories.js +0 -205
  182. package/dist/date/readme.md +0 -73
  183. package/dist/dialog/Dialog.stories.js +0 -217
  184. package/dist/dialog/readme.md +0 -32
  185. package/dist/dropdown/Dropdown.js +0 -492
  186. package/dist/dropdown/Dropdown.stories.js +0 -249
  187. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  188. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  189. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  190. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  191. package/dist/dropdown/readme.md +0 -69
  192. package/dist/footer/Footer.js +0 -405
  193. package/dist/footer/Footer.stories.js +0 -94
  194. package/dist/footer/dxc_logo_wht.png +0 -0
  195. package/dist/footer/readme.md +0 -41
  196. package/dist/header/Header.js +0 -431
  197. package/dist/header/Header.stories.js +0 -176
  198. package/dist/header/close_icon.svg +0 -1
  199. package/dist/header/dxc_logo_black.png +0 -0
  200. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  201. package/dist/header/dxc_logo_white.png +0 -0
  202. package/dist/header/hamb_menu_black.svg +0 -1
  203. package/dist/header/hamb_menu_white.svg +0 -1
  204. package/dist/header/readme.md +0 -33
  205. package/dist/input-text/InputText.stories.js +0 -209
  206. package/dist/input-text/error.svg +0 -1
  207. package/dist/input-text/readme.md +0 -91
  208. package/dist/layout/facebook.svg +0 -45
  209. package/dist/layout/linkedin.svg +0 -50
  210. package/dist/layout/twitter.svg +0 -53
  211. package/dist/link/readme.md +0 -51
  212. package/dist/paginator/Paginator.js +0 -283
  213. package/dist/paginator/images/next.svg +0 -3
  214. package/dist/paginator/images/nextPage.svg +0 -3
  215. package/dist/paginator/images/previous.svg +0 -3
  216. package/dist/paginator/images/previousPage.svg +0 -3
  217. package/dist/paginator/readme.md +0 -50
  218. package/dist/progress-bar/ProgressBar.js +0 -206
  219. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  220. package/dist/progress-bar/readme.md +0 -63
  221. package/dist/radio/Radio.stories.js +0 -166
  222. package/dist/radio/readme.md +0 -70
  223. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  224. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  225. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  226. package/dist/select/Select.js +0 -563
  227. package/dist/select/Select.stories.js +0 -235
  228. package/dist/select/readme.md +0 -72
  229. package/dist/slider/Slider.js +0 -315
  230. package/dist/slider/Slider.stories.js +0 -241
  231. package/dist/slider/readme.md +0 -64
  232. package/dist/spinner/Spinner.js +0 -214
  233. package/dist/spinner/Spinner.stories.js +0 -183
  234. package/dist/spinner/readme.md +0 -65
  235. package/dist/switch/Switch.stories.js +0 -134
  236. package/dist/switch/readme.md +0 -133
  237. package/dist/tabs/Tabs.js +0 -343
  238. package/dist/tabs/Tabs.stories.js +0 -130
  239. package/dist/tabs/readme.md +0 -78
  240. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  241. package/dist/tabs-for-sections/readme.md +0 -78
  242. package/dist/toggle/Toggle.stories.js +0 -297
  243. package/dist/toggle/readme.md +0 -80
  244. package/dist/toggle-group/ToggleGroup.js +0 -241
  245. package/dist/toggle-group/readme.md +0 -82
  246. package/dist/upload/Upload.stories.js +0 -72
  247. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  248. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  249. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  250. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  251. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  252. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  253. package/dist/upload/file-upload/FileToUpload.js +0 -184
  254. package/dist/upload/file-upload/audio-icon.svg +0 -4
  255. package/dist/upload/file-upload/close.svg +0 -4
  256. package/dist/upload/file-upload/file-icon.svg +0 -4
  257. package/dist/upload/file-upload/video-icon.svg +0 -4
  258. package/dist/upload/readme.md +0 -37
  259. package/dist/upload/transaction/Transaction.js +0 -171
  260. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  261. package/dist/upload/transaction/audio-icon.svg +0 -4
  262. package/dist/upload/transaction/error-icon.svg +0 -4
  263. package/dist/upload/transaction/file-icon-err.svg +0 -4
  264. package/dist/upload/transaction/file-icon.svg +0 -4
  265. package/dist/upload/transaction/image-icon-err.svg +0 -4
  266. package/dist/upload/transaction/image-icon.svg +0 -4
  267. package/dist/upload/transaction/success-icon.svg +0 -4
  268. package/dist/upload/transaction/video-icon-err.svg +0 -4
  269. package/dist/upload/transaction/video-icon.svg +0 -4
  270. package/dist/upload/transactions/Transactions.js +0 -138
  271. package/dist/wizard/invalid_icon.svg +0 -5
  272. package/dist/wizard/valid_icon.svg +0 -5
  273. package/dist/wizard/validation-wrong.svg +0 -6
  274. package/test/Accordion.test.js +0 -33
  275. package/test/AccordionGroup.test.js +0 -125
  276. package/test/Alert.test.js +0 -53
  277. package/test/Box.test.js +0 -10
  278. package/test/Button.test.js +0 -18
  279. package/test/Card.test.js +0 -30
  280. package/test/Checkbox.test.js +0 -45
  281. package/test/Chip.test.js +0 -25
  282. package/test/Date.test.js +0 -393
  283. package/test/Dialog.test.js +0 -23
  284. package/test/Dropdown.test.js +0 -130
  285. package/test/Footer.test.js +0 -99
  286. package/test/Header.test.js +0 -39
  287. package/test/Heading.test.js +0 -35
  288. package/test/InputText.test.js +0 -240
  289. package/test/Link.test.js +0 -43
  290. package/test/Paginator.test.js +0 -177
  291. package/test/ProgressBar.test.js +0 -35
  292. package/test/Radio.test.js +0 -37
  293. package/test/ResultsetTable.test.js +0 -330
  294. package/test/Select.test.js +0 -192
  295. package/test/Sidenav.test.js +0 -45
  296. package/test/Slider.test.js +0 -82
  297. package/test/Spinner.test.js +0 -27
  298. package/test/Switch.test.js +0 -45
  299. package/test/Table.test.js +0 -36
  300. package/test/Tabs.test.js +0 -109
  301. package/test/TabsForSections.test.js +0 -34
  302. package/test/Tag.test.js +0 -32
  303. package/test/TextArea.test.js +0 -52
  304. package/test/ToggleGroup.test.js +0 -81
  305. package/test/Upload.test.js +0 -60
  306. package/test/Wizard.test.js +0 -130
  307. package/test/mocks/pngMock.js +0 -1
  308. package/test/mocks/svgMock.js +0 -1
@@ -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
  });
@@ -27,149 +27,13 @@ var _variables = require("../common/variables.js");
27
27
 
28
28
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
- var _valid_icon = _interopRequireDefault(require("./valid_icon.svg"));
31
-
32
- var _invalid_icon = _interopRequireDefault(require("./invalid_icon.svg"));
33
-
34
- function _templateObject14() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"]);
36
-
37
- _templateObject14 = function _templateObject14() {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _templateObject13() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"]);
46
-
47
- _templateObject13 = function _templateObject13() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject12() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"]);
56
-
57
- _templateObject12 = function _templateObject12() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- function _templateObject11() {
65
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"]);
66
-
67
- _templateObject11 = function _templateObject11() {
68
- return data;
69
- };
70
-
71
- return data;
72
- }
73
-
74
- function _templateObject10() {
75
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"]);
76
-
77
- _templateObject10 = function _templateObject10() {
78
- return data;
79
- };
80
-
81
- return data;
82
- }
83
-
84
- function _templateObject9() {
85
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"]);
86
-
87
- _templateObject9 = function _templateObject9() {
88
- return data;
89
- };
90
-
91
- return data;
92
- }
93
-
94
- function _templateObject8() {
95
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n"]);
30
+ var _Icons = require("./Icons");
96
31
 
97
- _templateObject8 = function _templateObject8() {
98
- return data;
99
- };
100
-
101
- return data;
102
- }
103
-
104
- function _templateObject7() {
105
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
106
-
107
- _templateObject7 = function _templateObject7() {
108
- return data;
109
- };
110
-
111
- return data;
112
- }
113
-
114
- function _templateObject6() {
115
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"]);
116
-
117
- _templateObject6 = function _templateObject6() {
118
- return data;
119
- };
120
-
121
- return data;
122
- }
123
-
124
- function _templateObject5() {
125
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n"]);
126
-
127
- _templateObject5 = function _templateObject5() {
128
- return data;
129
- };
130
-
131
- return data;
132
- }
32
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
133
33
 
134
- function _templateObject4() {
135
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n padding-bottom: 4px;\n"]);
136
-
137
- _templateObject4 = function _templateObject4() {
138
- return data;
139
- };
140
-
141
- return data;
142
- }
143
-
144
- function _templateObject3() {
145
- var data = (0, _taggedTemplateLiteral2["default"])(["\n border: none;\n background: inherit;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n"]);
146
-
147
- _templateObject3 = function _templateObject3() {
148
- return data;
149
- };
150
-
151
- return data;
152
- }
153
-
154
- function _templateObject2() {
155
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"]);
156
-
157
- _templateObject2 = function _templateObject2() {
158
- return data;
159
- };
160
-
161
- return data;
162
- }
163
-
164
- function _templateObject() {
165
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n justify-content: \"center\";\n ", ";\n font-family: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
166
-
167
- _templateObject = function _templateObject() {
168
- return data;
169
- };
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); }
170
35
 
171
- return data;
172
- }
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; }
173
37
 
174
38
  var DxcWizard = function DxcWizard(_ref) {
175
39
  var _ref$mode = _ref.mode,
@@ -199,17 +63,17 @@ var DxcWizard = function DxcWizard(_ref) {
199
63
  }
200
64
  };
201
65
 
202
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
66
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
203
67
  theme: colorsTheme.wizard
204
- }, _react["default"].createElement(StepsContainer, {
68
+ }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
205
69
  mode: mode,
206
70
  margin: margin
207
71
  }, steps.map(function (step, i) {
208
- return _react["default"].createElement(StepContainer, {
72
+ return /*#__PURE__*/_react["default"].createElement(StepContainer, {
209
73
  key: "step".concat(i),
210
74
  mode: mode,
211
75
  lastStep: i === steps.length - 1
212
- }, _react["default"].createElement(Step, {
76
+ }, /*#__PURE__*/_react["default"].createElement(Step, {
213
77
  tabIndex: tabIndex,
214
78
  onClick: function onClick() {
215
79
  return handleStepClick(i);
@@ -218,37 +82,33 @@ var DxcWizard = function DxcWizard(_ref) {
218
82
  disabled: step.disabled,
219
83
  first: i === 0,
220
84
  last: i === steps.length - 1
221
- }, _react["default"].createElement(StepHeader, null, _react["default"].createElement(IconContainer, {
85
+ }, /*#__PURE__*/_react["default"].createElement(StepHeader, null, /*#__PURE__*/_react["default"].createElement(IconContainer, {
222
86
  current: i === renderedCurrent,
223
87
  visited: i < renderedCurrent,
224
88
  disabled: step.disabled
225
- }, step.icon ? _react["default"].createElement(StepIconContainer, {
89
+ }, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
226
90
  disabled: step.disabled
227
- }, (0, _typeof2["default"])(step.icon) === "object" ? step.icon.type === "img" ? _react["default"].createElement(ImgContainer, {
91
+ }, (0, _typeof2["default"])(step.icon) === "object" ? step.icon.type === "img" ? /*#__PURE__*/_react["default"].createElement(ImgContainer, {
228
92
  current: i === renderedCurrent,
229
93
  img: step.icon.props.src
230
- }) : step.icon : _react["default"].createElement(step.icon)) : step.iconSrc ? _react["default"].createElement(Icon, {
94
+ }) : step.icon : /*#__PURE__*/_react["default"].createElement(step.icon)) : step.iconSrc ? /*#__PURE__*/_react["default"].createElement(Icon, {
231
95
  src: step.iconSrc
232
- }) : _react["default"].createElement(Number, {
96
+ }) : /*#__PURE__*/_react["default"].createElement(Number, {
233
97
  disabled: step.disabled,
234
98
  current: i === renderedCurrent
235
- }, i + 1)), step.valid !== undefined ? step.valid ? _react["default"].createElement(ValidityIcon, {
236
- src: _valid_icon["default"]
237
- }) : _react["default"].createElement(ValidityIcon, {
238
- src: _invalid_icon["default"]
239
- }) : ""), step.label || step.description ? _react["default"].createElement(InfoContainer, null, step.label ? _react["default"].createElement(Label, {
99
+ }, i + 1)), step.valid !== undefined ? step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, _Icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, _Icons.invalidIcon) : ""), step.label || step.description ? /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label ? /*#__PURE__*/_react["default"].createElement(Label, {
240
100
  disabled: step.disabled,
241
- active: i <= innerCurrent
242
- }, step.label) : "", step.description ? _react["default"].createElement(Description, {
101
+ visited: i <= innerCurrent
102
+ }, step.label) : "", step.description ? /*#__PURE__*/_react["default"].createElement(Description, {
243
103
  disabled: step.disabled,
244
- active: i <= innerCurrent
245
- }, step.description) : "") : ""), i === steps.length - 1 ? "" : _react["default"].createElement(StepSeparator, {
104
+ visited: i <= innerCurrent
105
+ }, step.description) : "") : ""), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
246
106
  mode: mode
247
107
  }));
248
108
  })));
249
109
  };
250
110
 
251
- var StepsContainer = _styledComponents["default"].div(_templateObject(), function (props) {
111
+ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n justify-content: \"center\";\n ", ";\n font-family: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
252
112
  return props.mode === "vertical" ? "column" : "row";
253
113
  }, function (props) {
254
114
  return props.mode === "vertical" ? "height: 500px" : "width: 100%";
@@ -266,7 +126,7 @@ var StepsContainer = _styledComponents["default"].div(_templateObject(), functio
266
126
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
267
127
  });
268
128
 
269
- var StepContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
129
+ var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"])), function (props) {
270
130
  return props.mode === "vertical" ? "" : "align-items: center;";
271
131
  }, function (props) {
272
132
  return props.lastStep ? "0" : "1";
@@ -276,7 +136,7 @@ var StepContainer = _styledComponents["default"].div(_templateObject2(), functio
276
136
  return props.mode === "vertical" ? "width: 100%;" : "";
277
137
  });
278
138
 
279
- var Step = _styledComponents["default"].button(_templateObject3(), function (props) {
139
+ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n border: none;\n background: inherit;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n"])), function (props) {
280
140
  return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
281
141
  }, function (props) {
282
142
  return props.disabled ? "cursor: not-allowed" : "";
@@ -286,33 +146,33 @@ var Step = _styledComponents["default"].button(_templateObject3(), function (pro
286
146
  return props.theme.focusColor;
287
147
  });
288
148
 
289
- var StepHeader = _styledComponents["default"].div(_templateObject4());
149
+ var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n padding-bottom: 4px;\n"])));
290
150
 
291
- var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
292
- return props.disabled ? props.theme.circleDisabledWidth : props.current ? props.theme.circleSelectedWidth : props.theme.circleWidth;
151
+ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n"])), function (props) {
152
+ return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
293
153
  }, function (props) {
294
- return props.disabled ? props.theme.circleDisabledHeight : props.current ? props.theme.circleSelectedHeight : props.theme.circleHeight;
154
+ return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
295
155
  }, function (props) {
296
- return "\n ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.circleSelectedBorderThickness, " ").concat(props.theme.circleSelectedBorderStyle, " ").concat(props.theme.circleSelectedBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.circleDisabledBorderThickness, " ").concat(props.theme.circleDisabledBorderStyle, " ").concat(props.theme.circleDisabledBorderColor, ";") : "", "\n background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n ");
156
+ return "\n ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n ");
297
157
  }, function (props) {
298
158
  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
299
159
  }, function (props) {
300
- return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.circleSelectedBorderRadius : props.disabled ? props.theme.circleDisabledBorderRadius : "";
160
+ return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
301
161
  });
302
162
 
303
- var Icon = _styledComponents["default"].img(_templateObject6(), function (props) {
163
+ var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"])), function (props) {
304
164
  return props.theme.stepContainerIconSize;
305
165
  }, function (props) {
306
166
  return props.theme.stepContainerIconSize;
307
167
  });
308
168
 
309
- var StepIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
169
+ var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
310
170
  return props.theme.stepContainerIconSize;
311
171
  }, function (props) {
312
172
  return props.theme.stepContainerIconSize;
313
173
  });
314
174
 
315
- var ImgContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
175
+ var ImgContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n"])), function (props) {
316
176
  return props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor;
317
177
  }, function (_ref2) {
318
178
  var img = _ref2.img;
@@ -325,7 +185,7 @@ var ImgContainer = _styledComponents["default"].div(_templateObject8(), function
325
185
  return props.theme.stepContainerIconSize;
326
186
  });
327
187
 
328
- var Number = _styledComponents["default"].p(_templateObject9(), function (props) {
188
+ var Number = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"])), function (props) {
329
189
  return props.theme.stepContainerFontSize;
330
190
  }, function (props) {
331
191
  return props.theme.stepContainerFontFamily;
@@ -337,11 +197,11 @@ var Number = _styledComponents["default"].p(_templateObject9(), function (props)
337
197
  return props.theme.stepContainerLetterSpacing;
338
198
  });
339
199
 
340
- var ValidityIcon = _styledComponents["default"].img(_templateObject10());
200
+ var ValidityIconContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"])));
341
201
 
342
- var InfoContainer = _styledComponents["default"].div(_templateObject11());
202
+ var InfoContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
343
203
 
344
- var Label = _styledComponents["default"].p(_templateObject12(), function (props) {
204
+ var Label = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"])), function (props) {
345
205
  return props.theme.labelTextAlign;
346
206
  }, function (props) {
347
207
  return props.theme.labelFontFamily;
@@ -354,12 +214,12 @@ var Label = _styledComponents["default"].p(_templateObject12(), function (props)
354
214
  }, function (props) {
355
215
  return props.theme.labelLetterSpacing;
356
216
  }, function (props) {
357
- return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.labelActiveFontColor : props.theme.labelFontColor, ";");
217
+ return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
358
218
  }, function (props) {
359
219
  return props.theme.labelFontTextTransform;
360
220
  });
361
221
 
362
- var Description = _styledComponents["default"].p(_templateObject13(), function (props) {
222
+ var Description = _styledComponents["default"].p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"])), function (props) {
363
223
  return props.theme.descriptionTextAlign;
364
224
  }, function (props) {
365
225
  return props.theme.descriptionFontFamily;
@@ -374,10 +234,10 @@ var Description = _styledComponents["default"].p(_templateObject13(), function (
374
234
  }, function (props) {
375
235
  return props.theme.descriptionFontTextTransform;
376
236
  }, function (props) {
377
- return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.active ? props.theme.descriptionActiveFontColor : props.theme.descriptionFontColor, ";");
237
+ return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
378
238
  });
379
239
 
380
- var StepSeparator = _styledComponents["default"].div(_templateObject14(), function (props) {
240
+ var StepSeparator = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"])), function (props) {
381
241
  return props.mode === "horizontal" ? "" : "0";
382
242
  }, function (props) {
383
243
  return props.mode === "horizontal" ? "0" : "";
@@ -0,0 +1,18 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ mode?: "horizontal" | "vertical";
11
+ currentStep?: number;
12
+ onStepClick?: void;
13
+ steps?: any;
14
+ margin?: Space | Margin;
15
+ tabIndex?: number;
16
+ };
17
+
18
+ export default function DxcWizard(props: Props): JSX.Element;
package/README.md DELETED
@@ -1,66 +0,0 @@
1
- # Halstack React CDK
2
-
3
- Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
4
-
5
- - It increases visual and behavioral consistency across the applications using the library.
6
-
7
- - It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
8
-
9
- ## Usage
10
-
11
- Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/tools/react/) for details on how to use it.
12
-
13
- ## Contributing
14
-
15
- Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
16
-
17
- ## Development Setup
18
-
19
- These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
20
-
21
-
22
- The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
23
-
24
- ### Library
25
-
26
- Contained in the `lib` folder.
27
-
28
- ```bash
29
- cd lib
30
- ```
31
-
32
- Install the library dependencies.
33
-
34
- ```bash
35
- npm install
36
- ```
37
-
38
- Run the build process into `dist` folder, detecting and automatically building changes in src.
39
-
40
- ```bash
41
- npm run build:watch #'npm run build' if there is no need to watch for changes
42
- ```
43
-
44
- ### Example Application
45
-
46
- Contained in the `app` folder.
47
-
48
- ```bash
49
- cd app # from the root folder
50
- ```
51
-
52
- Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
53
-
54
- ```bash
55
- npm install
56
- ```
57
-
58
- Start the application.
59
-
60
- ```bash
61
- npm start # runs create-react-app dev server
62
- ```
63
-
64
- Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
65
-
66
- ## Running the tests
package/babel.config.js DELETED
@@ -1,8 +0,0 @@
1
- module.exports = {
2
- presets: ["@babel/react", "@babel/env"],
3
- plugins: [
4
- "@babel/plugin-proposal-class-properties",
5
- "@babel/plugin-proposal-optional-chaining",
6
- "@babel/plugin-proposal-nullish-coalescing-operator",
7
- ],
8
- };
@@ -1,46 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.BackgroundColorProvider = exports["default"] = void 0;
11
-
12
- var _react = _interopRequireWildcard(require("react"));
13
-
14
- var _color = _interopRequireDefault(require("color"));
15
-
16
- var _rgbHex = _interopRequireDefault(require("rgb-hex"));
17
-
18
- /* eslint-disable prefer-template */
19
- var BackgroundColorContext = _react["default"].createContext();
20
-
21
- var getColorType = function getColorType(hexColor) {
22
- try {
23
- if (hexColor) {
24
- var hslColor = (0, _color["default"])(hexColor).hsl();
25
- var lightnessColor = hslColor.color[2];
26
- return lightnessColor <= 30 ? "dark" : "light";
27
- }
28
- } catch (e) {
29
- return "light";
30
- }
31
- };
32
-
33
- var BackgroundColorProvider = function BackgroundColorProvider(_ref) {
34
- var color = _ref.color,
35
- children = _ref.children;
36
- var colorType = (0, _react.useMemo)(function () {
37
- return getColorType(color);
38
- }, [color]);
39
- return _react["default"].createElement(BackgroundColorContext.Provider, {
40
- value: colorType
41
- }, children);
42
- };
43
-
44
- exports.BackgroundColorProvider = BackgroundColorProvider;
45
- var _default = BackgroundColorContext;
46
- exports["default"] = _default;