@dxc-technology/halstack-react 0.0.0-82fa030 → 0.0.0-850ec24

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 (373) 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/V3Textarea/V3Textarea.js +260 -0
  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/Alert.stories.tsx +170 -0
  18. package/alert/types.d.ts +49 -0
  19. package/alert/types.js +5 -0
  20. package/badge/Badge.js +59 -0
  21. package/box/Box.d.ts +4 -0
  22. package/box/Box.js +126 -0
  23. package/box/Box.stories.tsx +132 -0
  24. package/box/types.d.ts +43 -0
  25. package/box/types.js +5 -0
  26. package/button/Button.d.ts +4 -0
  27. package/button/Button.js +177 -0
  28. package/button/Button.stories.tsx +276 -0
  29. package/button/types.d.ts +57 -0
  30. package/button/types.js +5 -0
  31. package/card/Card.d.ts +4 -0
  32. package/card/Card.js +164 -0
  33. package/card/Card.stories.tsx +201 -0
  34. package/card/ice-cream.jpg +0 -0
  35. package/card/types.d.ts +67 -0
  36. package/card/types.js +5 -0
  37. package/checkbox/Checkbox.d.ts +4 -0
  38. package/checkbox/Checkbox.js +253 -0
  39. package/checkbox/Checkbox.stories.tsx +192 -0
  40. package/checkbox/types.d.ts +60 -0
  41. package/checkbox/types.js +5 -0
  42. package/chip/Chip.js +221 -0
  43. package/chip/Chip.stories.tsx +121 -0
  44. package/chip/index.d.ts +22 -0
  45. package/{dist/common → common}/OpenSans.css +0 -0
  46. package/{dist/common → common}/RequiredComponent.js +5 -19
  47. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  57. package/common/utils.js +22 -0
  58. package/common/variables.js +1577 -0
  59. package/{dist/date → date}/Date.js +87 -70
  60. package/date/index.d.ts +27 -0
  61. package/date-input/DateInput.d.ts +4 -0
  62. package/date-input/DateInput.js +361 -0
  63. package/date-input/DateInput.stories.tsx +138 -0
  64. package/date-input/types.d.ts +100 -0
  65. package/date-input/types.js +5 -0
  66. package/dialog/Dialog.d.ts +4 -0
  67. package/dialog/Dialog.js +165 -0
  68. package/dialog/Dialog.stories.tsx +212 -0
  69. package/dialog/types.d.ts +43 -0
  70. package/dialog/types.js +5 -0
  71. package/dropdown/Dropdown.d.ts +4 -0
  72. package/dropdown/Dropdown.js +417 -0
  73. package/dropdown/types.d.ts +89 -0
  74. package/dropdown/types.js +5 -0
  75. package/file-input/FileInput.d.ts +4 -0
  76. package/file-input/FileInput.js +511 -0
  77. package/file-input/FileItem.d.ts +14 -0
  78. package/file-input/FileItem.js +182 -0
  79. package/file-input/types.d.ts +87 -0
  80. package/file-input/types.js +5 -0
  81. package/footer/Footer.d.ts +4 -0
  82. package/footer/Footer.js +266 -0
  83. package/footer/Footer.stories.jsx +151 -0
  84. package/footer/Icons.js +77 -0
  85. package/footer/types.d.ts +61 -0
  86. package/footer/types.js +5 -0
  87. package/header/Header.d.ts +7 -0
  88. package/header/Header.js +324 -0
  89. package/header/Header.stories.tsx +162 -0
  90. package/header/Icons.js +34 -0
  91. package/header/types.d.ts +47 -0
  92. package/header/types.js +5 -0
  93. package/heading/Heading.d.ts +4 -0
  94. package/heading/Heading.js +159 -0
  95. package/heading/Heading.stories.tsx +53 -0
  96. package/heading/types.d.ts +33 -0
  97. package/heading/types.js +5 -0
  98. package/input-text/Icons.js +22 -0
  99. package/input-text/InputText.js +611 -0
  100. package/input-text/index.d.ts +36 -0
  101. package/{dist/layout → layout}/ApplicationLayout.js +42 -142
  102. package/layout/Icons.js +55 -0
  103. package/link/Link.d.ts +3 -0
  104. package/link/Link.js +161 -0
  105. package/link/Link.stories.tsx +146 -0
  106. package/link/types.d.ts +74 -0
  107. package/link/types.js +5 -0
  108. package/main.d.ts +44 -0
  109. package/{dist/main.js → main.js} +137 -53
  110. package/number-input/NumberInput.d.ts +4 -0
  111. package/number-input/NumberInput.js +86 -0
  112. package/number-input/NumberInput.stories.tsx +115 -0
  113. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  114. package/number-input/types.d.ts +117 -0
  115. package/number-input/types.js +5 -0
  116. package/package.json +37 -23
  117. package/paginator/Icons.js +66 -0
  118. package/paginator/Paginator.d.ts +4 -0
  119. package/paginator/Paginator.js +198 -0
  120. package/paginator/Paginator.stories.tsx +63 -0
  121. package/paginator/types.d.ts +38 -0
  122. package/paginator/types.js +5 -0
  123. package/password-input/PasswordInput.d.ts +4 -0
  124. package/password-input/PasswordInput.js +162 -0
  125. package/password-input/PasswordInput.stories.tsx +131 -0
  126. package/password-input/types.d.ts +100 -0
  127. package/password-input/types.js +5 -0
  128. package/progress-bar/ProgressBar.d.ts +4 -0
  129. package/progress-bar/ProgressBar.js +170 -0
  130. package/progress-bar/ProgressBar.stories.jsx +58 -0
  131. package/progress-bar/types.d.ts +37 -0
  132. package/progress-bar/types.js +5 -0
  133. package/radio/Radio.d.ts +4 -0
  134. package/radio/Radio.js +174 -0
  135. package/radio/Radio.stories.tsx +192 -0
  136. package/radio/types.d.ts +54 -0
  137. package/radio/types.js +5 -0
  138. package/resultsetTable/ResultsetTable.js +274 -0
  139. package/resultsetTable/index.d.ts +19 -0
  140. package/select/Select.js +865 -0
  141. package/select/Select.stories.tsx +572 -0
  142. package/select/index.d.ts +131 -0
  143. package/sidenav/Sidenav.d.ts +9 -0
  144. package/sidenav/Sidenav.js +136 -0
  145. package/sidenav/types.d.ts +50 -0
  146. package/sidenav/types.js +5 -0
  147. package/slider/Slider.d.ts +4 -0
  148. package/slider/Slider.js +317 -0
  149. package/slider/Slider.stories.tsx +177 -0
  150. package/slider/types.d.ts +78 -0
  151. package/slider/types.js +5 -0
  152. package/spinner/Spinner.d.ts +4 -0
  153. package/spinner/Spinner.js +250 -0
  154. package/spinner/Spinner.stories.jsx +102 -0
  155. package/spinner/types.d.ts +32 -0
  156. package/spinner/types.js +5 -0
  157. package/switch/Switch.d.ts +4 -0
  158. package/switch/Switch.js +179 -0
  159. package/switch/Switch.stories.tsx +160 -0
  160. package/switch/types.d.ts +58 -0
  161. package/switch/types.js +5 -0
  162. package/table/Table.d.ts +4 -0
  163. package/table/Table.js +118 -0
  164. package/table/Table.stories.jsx +276 -0
  165. package/table/types.d.ts +21 -0
  166. package/table/types.js +5 -0
  167. package/tabs/Tabs.d.ts +4 -0
  168. package/tabs/Tabs.js +211 -0
  169. package/tabs/types.d.ts +70 -0
  170. package/tabs/types.js +5 -0
  171. package/tag/Tag.d.ts +4 -0
  172. package/tag/Tag.js +193 -0
  173. package/tag/Tag.stories.tsx +145 -0
  174. package/tag/types.d.ts +60 -0
  175. package/tag/types.js +5 -0
  176. package/text-input/TextInput.js +825 -0
  177. package/text-input/index.d.ts +135 -0
  178. package/textarea/Textarea.js +317 -0
  179. package/textarea/Textarea.stories.jsx +135 -0
  180. package/textarea/index.d.ts +117 -0
  181. package/{dist/toggle → toggle}/Toggle.js +30 -67
  182. package/toggle/index.d.ts +21 -0
  183. package/toggle-group/ToggleGroup.js +243 -0
  184. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  185. package/toggle-group/index.d.ts +21 -0
  186. package/{dist/upload → upload}/Upload.js +23 -22
  187. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  188. package/upload/buttons-upload/Icons.js +40 -0
  189. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  190. package/upload/dragAndDropArea/Icons.js +39 -0
  191. package/upload/file-upload/FileToUpload.js +115 -0
  192. package/upload/file-upload/Icons.js +66 -0
  193. package/upload/files-upload/FilesToUpload.js +109 -0
  194. package/upload/index.d.ts +15 -0
  195. package/upload/transaction/Icons.js +160 -0
  196. package/upload/transaction/Transaction.js +104 -0
  197. package/upload/transactions/Transactions.js +94 -0
  198. package/useTheme.js +22 -0
  199. package/wizard/Icons.js +65 -0
  200. package/wizard/Wizard.d.ts +4 -0
  201. package/wizard/Wizard.js +231 -0
  202. package/wizard/Wizard.stories.jsx +224 -0
  203. package/wizard/types.d.ts +64 -0
  204. package/wizard/types.js +5 -0
  205. package/README.md +0 -66
  206. package/babel.config.js +0 -4
  207. package/dist/accordion/Accordion.js +0 -248
  208. package/dist/accordion/Accordion.stories.js +0 -207
  209. package/dist/accordion/readme.md +0 -96
  210. package/dist/alert/Alert.js +0 -304
  211. package/dist/alert/Alert.stories.js +0 -158
  212. package/dist/alert/close.svg +0 -4
  213. package/dist/alert/error.svg +0 -4
  214. package/dist/alert/info.svg +0 -4
  215. package/dist/alert/readme.md +0 -43
  216. package/dist/alert/success.svg +0 -4
  217. package/dist/alert/warning.svg +0 -4
  218. package/dist/box/Box.js +0 -148
  219. package/dist/button/Button.js +0 -202
  220. package/dist/button/Button.stories.js +0 -224
  221. package/dist/button/readme.md +0 -93
  222. package/dist/card/Card.js +0 -217
  223. package/dist/checkbox/Checkbox.js +0 -240
  224. package/dist/checkbox/Checkbox.stories.js +0 -144
  225. package/dist/checkbox/readme.md +0 -116
  226. package/dist/chip/Chip.js +0 -173
  227. package/dist/common/services/example-service.js +0 -10
  228. package/dist/common/services/example-service.test.js +0 -12
  229. package/dist/common/utils.js +0 -42
  230. package/dist/common/variables.js +0 -434
  231. package/dist/date/Date.stories.js +0 -205
  232. package/dist/date/calendar.svg +0 -1
  233. package/dist/date/calendar_dark.svg +0 -1
  234. package/dist/date/readme.md +0 -73
  235. package/dist/dialog/Dialog.js +0 -197
  236. package/dist/dialog/Dialog.stories.js +0 -217
  237. package/dist/dialog/readme.md +0 -32
  238. package/dist/dropdown/Dropdown.js +0 -416
  239. package/dist/dropdown/Dropdown.stories.js +0 -249
  240. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  241. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  242. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  243. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  244. package/dist/dropdown/readme.md +0 -69
  245. package/dist/footer/Footer.js +0 -346
  246. package/dist/footer/Footer.stories.js +0 -94
  247. package/dist/footer/dxc_logo_wht.png +0 -0
  248. package/dist/footer/readme.md +0 -41
  249. package/dist/header/Header.js +0 -373
  250. package/dist/header/Header.stories.js +0 -176
  251. package/dist/header/close_icon.svg +0 -1
  252. package/dist/header/dxc_logo_black.png +0 -0
  253. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  254. package/dist/header/dxc_logo_white.png +0 -0
  255. package/dist/header/hamb_menu_black.svg +0 -1
  256. package/dist/header/hamb_menu_white.svg +0 -1
  257. package/dist/header/readme.md +0 -33
  258. package/dist/heading/Heading.js +0 -153
  259. package/dist/input-text/InputText.js +0 -519
  260. package/dist/input-text/InputText.stories.js +0 -209
  261. package/dist/input-text/error.svg +0 -1
  262. package/dist/input-text/readme.md +0 -91
  263. package/dist/layout/facebook.svg +0 -45
  264. package/dist/layout/linkedin.svg +0 -50
  265. package/dist/layout/twitter.svg +0 -53
  266. package/dist/link/Link.js +0 -171
  267. package/dist/link/readme.md +0 -51
  268. package/dist/paginator/Paginator.js +0 -196
  269. package/dist/paginator/images/next.svg +0 -3
  270. package/dist/paginator/images/nextPage.svg +0 -3
  271. package/dist/paginator/images/previous.svg +0 -3
  272. package/dist/paginator/images/previousPage.svg +0 -3
  273. package/dist/paginator/readme.md +0 -50
  274. package/dist/progress-bar/ProgressBar.js +0 -185
  275. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  276. package/dist/progress-bar/readme.md +0 -63
  277. package/dist/radio/Radio.js +0 -195
  278. package/dist/radio/Radio.stories.js +0 -166
  279. package/dist/radio/readme.md +0 -70
  280. package/dist/resultsetTable/ResultsetTable.js +0 -333
  281. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  282. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  283. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  284. package/dist/select/Select.js +0 -453
  285. package/dist/select/Select.stories.js +0 -235
  286. package/dist/select/readme.md +0 -72
  287. package/dist/sidenav/Sidenav.js +0 -128
  288. package/dist/slider/Slider.js +0 -266
  289. package/dist/slider/Slider.stories.js +0 -241
  290. package/dist/slider/readme.md +0 -64
  291. package/dist/spinner/Spinner.js +0 -193
  292. package/dist/spinner/Spinner.stories.js +0 -183
  293. package/dist/spinner/readme.md +0 -65
  294. package/dist/switch/Switch.js +0 -199
  295. package/dist/switch/Switch.stories.js +0 -134
  296. package/dist/switch/readme.md +0 -133
  297. package/dist/table/Table.js +0 -105
  298. package/dist/tabs/Tabs.js +0 -172
  299. package/dist/tabs/Tabs.stories.js +0 -130
  300. package/dist/tabs/readme.md +0 -78
  301. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  302. package/dist/tabs-for-sections/readme.md +0 -78
  303. package/dist/tag/Tag.js +0 -234
  304. package/dist/textarea/Textarea.js +0 -227
  305. package/dist/toggle/Toggle.stories.js +0 -297
  306. package/dist/toggle/readme.md +0 -80
  307. package/dist/toggle-group/ToggleGroup.js +0 -214
  308. package/dist/toggle-group/readme.md +0 -82
  309. package/dist/upload/Upload.stories.js +0 -72
  310. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  311. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  312. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  313. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  314. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  315. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  316. package/dist/upload/file-upload/FileToUpload.js +0 -158
  317. package/dist/upload/file-upload/audio-icon.svg +0 -4
  318. package/dist/upload/file-upload/close.svg +0 -4
  319. package/dist/upload/file-upload/file-icon.svg +0 -4
  320. package/dist/upload/file-upload/video-icon.svg +0 -4
  321. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  322. package/dist/upload/readme.md +0 -37
  323. package/dist/upload/transaction/Transaction.js +0 -155
  324. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  325. package/dist/upload/transaction/audio-icon.svg +0 -4
  326. package/dist/upload/transaction/error-icon.svg +0 -4
  327. package/dist/upload/transaction/file-icon-err.svg +0 -4
  328. package/dist/upload/transaction/file-icon.svg +0 -4
  329. package/dist/upload/transaction/image-icon-err.svg +0 -4
  330. package/dist/upload/transaction/image-icon.svg +0 -4
  331. package/dist/upload/transaction/success-icon.svg +0 -4
  332. package/dist/upload/transaction/video-icon-err.svg +0 -4
  333. package/dist/upload/transaction/video-icon.svg +0 -4
  334. package/dist/upload/transactions/Transactions.js +0 -120
  335. package/dist/wizard/Wizard.js +0 -327
  336. package/dist/wizard/invalid_icon.svg +0 -6
  337. package/dist/wizard/valid_icon.svg +0 -6
  338. package/dist/wizard/validation-wrong.svg +0 -6
  339. package/test/Accordion.test.js +0 -33
  340. package/test/Alert.test.js +0 -53
  341. package/test/Box.test.js +0 -10
  342. package/test/Button.test.js +0 -18
  343. package/test/Card.test.js +0 -30
  344. package/test/Checkbox.test.js +0 -45
  345. package/test/Chip.test.js +0 -25
  346. package/test/Date.test.js +0 -393
  347. package/test/Dialog.test.js +0 -23
  348. package/test/Dropdown.test.js +0 -130
  349. package/test/Footer.test.js +0 -99
  350. package/test/Header.test.js +0 -39
  351. package/test/Heading.test.js +0 -35
  352. package/test/InputText.test.js +0 -236
  353. package/test/Link.test.js +0 -33
  354. package/test/Paginator.test.js +0 -165
  355. package/test/ProgressBar.test.js +0 -35
  356. package/test/Radio.test.js +0 -37
  357. package/test/ResultsetTable.test.js +0 -282
  358. package/test/Select.test.js +0 -191
  359. package/test/Sidenav.test.js +0 -45
  360. package/test/Slider.test.js +0 -82
  361. package/test/Spinner.test.js +0 -27
  362. package/test/Switch.test.js +0 -45
  363. package/test/Table.test.js +0 -36
  364. package/test/Tabs.test.js +0 -88
  365. package/test/TabsForSections.test.js +0 -34
  366. package/test/Tag.test.js +0 -32
  367. package/test/TextArea.test.js +0 -52
  368. package/test/Toggle.test.js +0 -43
  369. package/test/ToggleGroup.test.js +0 -81
  370. package/test/Upload.test.js +0 -60
  371. package/test/Wizard.test.js +0 -130
  372. package/test/mocks/pngMock.js +0 -1
  373. package/test/mocks/svgMock.js +0 -1
package/dist/tabs/Tabs.js DELETED
@@ -1,172 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
23
-
24
- var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
25
-
26
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
27
-
28
- var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
- require("../common/OpenSans.css");
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _utils = require("../common/utils.js");
35
-
36
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
37
-
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n .MuiTabs-root {\n background: white;\n .MuiTabs-scroller {\n .MuiTabs-flexContainer + span {\n z-index: 4;\n }\n }\n .MuiButtonBase-root {\n padding: 12px;\n min-height: 48px;\n height: auto;\n font-family: \"Open Sans\", sans-serif;\n font-size: 14px;\n /* height: 64px cuando vengan con icono y texto */\n min-width: 180px;\n color: ", ";\n margin: 1px 0;\n &:not(.Mui-selected) {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-selected {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-disabled {\n cursor: not-allowed !important;\n pointer-events: all;\n opacity: ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n }\n\n .MuiTabs-indicator {\n background-color: ", ";\n }\n }\n"]);
50
-
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n left: 0px;\n bottom: 0;\n width: 100%;\n height: 2px;\n position: absolute;\n background-color: ", ";\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- var DxcTabs = function DxcTabs(_ref) {
69
- var activeTabIndex = _ref.activeTabIndex,
70
- _ref$tabs = _ref.tabs,
71
- tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
72
- onTabClick = _ref.onTabClick,
73
- margin = _ref.margin;
74
-
75
- var _React$useState = _react["default"].useState(0),
76
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
77
- innerActiveTabIndex = _React$useState2[0],
78
- setInnerActiveTabIndex = _React$useState2[1];
79
-
80
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
81
- var colorsTheme = (0, _react.useMemo)(function () {
82
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
83
- }, [customTheme]);
84
-
85
- var handleChange = function handleChange(event, newValue) {
86
- if (activeTabIndex == null) {
87
- setInnerActiveTabIndex(newValue);
88
- }
89
-
90
- if (typeof onTabClick === "function") {
91
- onTabClick(newValue);
92
- }
93
- };
94
-
95
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
96
- theme: colorsTheme.tabs
97
- }, _react["default"].createElement(DxCTabs, {
98
- margin: margin
99
- }, _react["default"].createElement(Underline, null), _react["default"].createElement(_Tabs["default"], {
100
- value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
101
- onChange: handleChange,
102
- variant: "scrollable",
103
- scrollButtons: "off"
104
- }, tabs.map(function (tab, i) {
105
- return _react["default"].createElement(_Tab["default"], {
106
- key: "tab".concat(i).concat(tab.label),
107
- label: tab.label,
108
- icon: tab.iconSrc && _react["default"].createElement(TabIcon, {
109
- src: tab.iconSrc
110
- }),
111
- disabled: tab.isDisabled,
112
- disableRipple: true
113
- });
114
- }))));
115
- };
116
-
117
- var Underline = _styledComponents["default"].div(_templateObject(), function (props) {
118
- return props.theme.underlinedColor;
119
- });
120
-
121
- var DxCTabs = _styledComponents["default"].div(_templateObject2(), function (props) {
122
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
123
- }, function (props) {
124
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
125
- }, function (props) {
126
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
127
- }, function (props) {
128
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
129
- }, function (props) {
130
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
131
- }, function (props) {
132
- return props.theme.fontColor;
133
- }, function (props) {
134
- return "".concat(props.theme.selectedBackgroundColor).concat(props.theme.backgroundColor);
135
- }, function (props) {
136
- return "".concat(props.theme.fontColor).concat(props.theme.notSelectedOpacity);
137
- }, function (props) {
138
- return props.theme.selectedBackgroundColor;
139
- }, function (props) {
140
- return props.theme.selectedFontColor;
141
- }, function (props) {
142
- return props.theme.disabled;
143
- }, function (props) {
144
- return props.theme.focusColor;
145
- }, function (props) {
146
- return props.theme.selectedUnderlinedColor;
147
- });
148
-
149
- var TabIcon = _styledComponents["default"].img(_templateObject3());
150
-
151
- DxcTabs.propTypes = {
152
- activeTabIndex: _propTypes["default"].number,
153
- onTabClick: _propTypes["default"].func,
154
- tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
155
- label: _propTypes["default"].string,
156
- iconSrc: _propTypes["default"].string,
157
- isDisabled: _propTypes["default"]["boolean"]
158
- })),
159
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
160
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
161
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
162
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
163
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
164
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
165
- };
166
- DxcTabs.defaultProps = {
167
- activeTabIndex: null,
168
- tabs: [],
169
- onTabClick: function onTabClick() {}
170
- };
171
- var _default = DxcTabs;
172
- exports["default"] = _default;
@@ -1,130 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Tabs = _interopRequireDefault(require("./Tabs"));
18
-
19
- var _Tab = _interopRequireDefault(require("./tab/Tab"));
20
-
21
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
22
-
23
- var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
24
-
25
- var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
-
29
- onChange.toString = function () {
30
- return "onChangeHandler";
31
- };
32
-
33
- (0, _react2.storiesOf)("Form Components|Tabs", module).add("Types", function () {
34
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
35
- activeTabIndex: 0,
36
- activeTabIndexChange: onChange,
37
- mode: "underlined"
38
- }, _react["default"].createElement(_Tab["default"], {
39
- label: "Tab ONE",
40
- iconSrc: "",
41
- disabled: false
42
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
43
- label: "Tab TWO",
44
- iconSrc: "",
45
- disabled: false
46
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
47
- label: "Tab THREE",
48
- iconSrc: "",
49
- disabled: false
50
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
51
- activeTabIndex: 0,
52
- activeTabIndexChange: onChange,
53
- mode: "filled"
54
- }, _react["default"].createElement(_Tab["default"], {
55
- label: "Label 1",
56
- iconSrc: _amazon["default"],
57
- disabled: false
58
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
59
- label: "Label 2",
60
- iconSrc: _ebay["default"],
61
- disabled: false
62
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
63
- label: "Label 3",
64
- iconSrc: _apple["default"],
65
- disabled: true
66
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))));
67
- }, {
68
- notes: {
69
- markdown: _readme["default"]
70
- }
71
- });
72
-
73
- var knobProps = function knobProps() {
74
- return {
75
- mode: (0, _addonKnobs.select)("mode", {
76
- filled: "filled",
77
- underlined: "underlined"
78
- }, "filled"),
79
- theme: (0, _addonKnobs.select)("theme", {
80
- light: "light",
81
- dark: "dark"
82
- }, "light"),
83
- activeTabIndex: (0, _addonKnobs.number)("Tab Active", 0)
84
- };
85
- };
86
-
87
- var knobTab1Props = function knobTab1Props() {
88
- return {
89
- label: (0, _addonKnobs.text)("First Tab Label", "Tab 1"),
90
- disabled: (0, _addonKnobs["boolean"])("First Tab Disabled", false)
91
- };
92
- };
93
-
94
- var knobTab2Props = function knobTab2Props() {
95
- return {
96
- label: (0, _addonKnobs.text)("Second Tab Label", "Tab 2"),
97
- disabled: (0, _addonKnobs["boolean"])("Second Tab Disabled", false)
98
- };
99
- };
100
-
101
- var knobTab3Props = function knobTab3Props() {
102
- return {
103
- label: (0, _addonKnobs.text)("Third Tab Label", "Tab 3"),
104
- disabled: (0, _addonKnobs["boolean"])("Third Tab Disabled", false)
105
- };
106
- };
107
-
108
- (0, _react2.storiesOf)("Form Components|Tabs", module).add("Knobs example", function () {
109
- var props = knobProps();
110
- var tab1Props = knobTab1Props();
111
- var tab2Props = knobTab2Props();
112
- var tab3Props = knobTab3Props();
113
- return _react["default"].createElement("div", {
114
- style: {
115
- background: props.theme === "dark" && "black" || "transparent"
116
- }
117
- }, _react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({}, props, {
118
- activeTabIndexChange: onChange
119
- }), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab1Props, {
120
- iconSrc: _amazon["default"]
121
- }), "Content ONE"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab2Props, {
122
- iconSrc: _ebay["default"]
123
- }), "Content TWO"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab3Props, {
124
- iconSrc: _apple["default"]
125
- }), "Content THREE")));
126
- }, {
127
- notes: {
128
- markdown: _readme["default"]
129
- }
130
- });
@@ -1,78 +0,0 @@
1
- # DXC Tabs Component
2
-
3
- ## Tab Group Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>mode: 'filled' | 'underlined'</td>
13
- <td><code>'filled'</code></td>
14
- <td>Uses one of the available component modes.</td>
15
- </tr>
16
- <tr>
17
- <td>theme: 'light' | 'dark'</td>
18
- <td><code>'light'</code></td>
19
- <td>Uses one of the available component themes.</td>
20
- </tr>
21
- <tr>
22
- <td>showDotIndicator: boolean</td>
23
- <td><code>false</code></td>
24
- <td>If true, a dot indicator will be shown in the active tab.</td>
25
- </tr>
26
- <tr>
27
- <td>disableRipple: boolean</td>
28
- <td><code>false</code></td>
29
- <td>If true, the ripple effect will be disabled.</td>
30
- </tr>
31
- <tr>
32
- <td>activeTabIndex: number</td>
33
- <td><code>0</code></td>
34
- <td>The index of the active tab.</td>
35
- </tr>
36
- <tr>
37
- <td>activeTabIndexChange: function</td>
38
- <td></td>
39
- <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
40
- </tr>
41
- <tr>
42
- <td>stepper: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component should be rendered as a Stepper component.</td>
45
- </tr>
46
- <tr>
47
- <td>orientation: 'horizontal' | 'vertical'</td>
48
- <td><code>'horizontal'</code></td>
49
- <td>Only if stepper, this parameter shows the stepper orientation.</td>
50
- </tr>
51
-
52
- </table>
53
-
54
- ## Tab Props
55
-
56
- <table>
57
- <tr style="background-color: grey">
58
- <td>Name</td>
59
- <td>Default</td>
60
- <td>Description</td>
61
- </tr>
62
- <tr>
63
- <td>label: string</td>
64
- <td></td>
65
- <td>Text to be placed within the tab.</td>
66
- </tr>
67
- <tr>
68
- <td>iconSrc: string</td>
69
- <td></td>
70
- <td>The path of an icon to be placed within the tab.</td>
71
- </tr>
72
- <tr>
73
- <td>disabled: boolean</td>
74
- <td><code>false</code></td>
75
- <td>Whether the tab is disabled.</td>
76
- </tr>
77
- </table>
78
-
@@ -1,92 +0,0 @@
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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _reactUseScrollspy = _interopRequireDefault(require("react-use-scrollspy"));
19
-
20
- var _Tabs = _interopRequireDefault(require("../tabs/Tabs"));
21
-
22
- function _templateObject() {
23
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 10;\n ", "\n"]);
24
-
25
- _templateObject = function _templateObject() {
26
- return data;
27
- };
28
-
29
- return data;
30
- }
31
-
32
- var TABS_HEIGHT = 54;
33
-
34
- var DxcTabsForSections = function DxcTabsForSections(_ref) {
35
- var _ref$sections = _ref.sections,
36
- sections = _ref$sections === void 0 ? [] : _ref$sections,
37
- _ref$stickAtPx = _ref.stickAtPx,
38
- stickAtPx = _ref$stickAtPx === void 0 ? 0 : _ref$stickAtPx;
39
- var tabs = sections.map(function (section) {
40
- return {
41
- label: section.tabLabel
42
- };
43
- });
44
- var refs = sections.map(function () {
45
- return _react["default"].createRef();
46
- });
47
- var activeTab = (0, _reactUseScrollspy["default"])({
48
- sectionElementRefs: refs,
49
- offsetPx: -stickAtPx - TABS_HEIGHT
50
- });
51
-
52
- var onTabClick = function onTabClick(tabId) {
53
- var topOfElement = refs[tabId].current.offsetTop - stickAtPx - TABS_HEIGHT + 5;
54
- window.scroll({
55
- top: topOfElement,
56
- behavior: "smooth"
57
- });
58
- };
59
-
60
- return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(StyledTabs, {
61
- stickAtPx: stickAtPx
62
- }, _react["default"].createElement(_Tabs["default"], {
63
- tabs: tabs,
64
- activeTabIndex: activeTab,
65
- onTabClick: onTabClick
66
- })), sections.map(function (section, i) {
67
- return _react["default"].createElement("div", {
68
- key: "section".concat(i),
69
- ref: refs[i]
70
- }, _react["default"].createElement(section.section, null));
71
- }));
72
- };
73
-
74
- DxcTabsForSections.propTypes = {
75
- stickAtPx: _propTypes["default"].number,
76
- sections: _propTypes["default"].arrayOf(_propTypes["default"].shape({
77
- tabLabel: _propTypes["default"].string,
78
- section: _propTypes["default"].func
79
- }))
80
- };
81
- DxcTabsForSections.defaultProps = {
82
- stickAtPx: 0,
83
- sections: []
84
- };
85
-
86
- var StyledTabs = _styledComponents["default"].div(_templateObject(), function (_ref2) {
87
- var stickAtPx = _ref2.stickAtPx;
88
- return stickAtPx && "\n position: sticky;\n top: ".concat(stickAtPx, "px;\n ");
89
- });
90
-
91
- var _default = DxcTabsForSections;
92
- exports["default"] = _default;
@@ -1,78 +0,0 @@
1
- # DXC Tabs Component
2
-
3
- ## Tab Group Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>mode: 'filled' | 'underlined'</td>
13
- <td><code>'filled'</code></td>
14
- <td>Uses one of the available component modes.</td>
15
- </tr>
16
- <tr>
17
- <td>theme: 'light' | 'dark'</td>
18
- <td><code>'light'</code></td>
19
- <td>Uses one of the available component themes.</td>
20
- </tr>
21
- <tr>
22
- <td>showDotIndicator: boolean</td>
23
- <td><code>false</code></td>
24
- <td>If true, a dot indicator will be shown in the active tab.</td>
25
- </tr>
26
- <tr>
27
- <td>disableRipple: boolean</td>
28
- <td><code>false</code></td>
29
- <td>If true, the ripple effect will be disabled.</td>
30
- </tr>
31
- <tr>
32
- <td>activeTabIndex: number</td>
33
- <td><code>0</code></td>
34
- <td>The index of the active tab.</td>
35
- </tr>
36
- <tr>
37
- <td>activeTabIndexChange: function</td>
38
- <td></td>
39
- <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
40
- </tr>
41
- <tr>
42
- <td>stepper: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component should be rendered as a Stepper component.</td>
45
- </tr>
46
- <tr>
47
- <td>orientation: 'horizontal' | 'vertical'</td>
48
- <td><code>'horizontal'</code></td>
49
- <td>Only if stepper, this parameter shows the stepper orientation.</td>
50
- </tr>
51
-
52
- </table>
53
-
54
- ## Tab Props
55
-
56
- <table>
57
- <tr style="background-color: grey">
58
- <td>Name</td>
59
- <td>Default</td>
60
- <td>Description</td>
61
- </tr>
62
- <tr>
63
- <td>label: string</td>
64
- <td></td>
65
- <td>Text to be placed within the tab.</td>
66
- </tr>
67
- <tr>
68
- <td>iconSrc: string</td>
69
- <td></td>
70
- <td>The path of an icon to be placed within the tab.</td>
71
- </tr>
72
- <tr>
73
- <td>disabled: boolean</td>
74
- <td><code>false</code></td>
75
- <td>Whether the tab is disabled.</td>
76
- </tr>
77
- </table>
78
-