@dxc-technology/halstack-react 0.0.0-9814987 → 0.0.0-98ce7b0

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 (443) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/ThemeContext.d.ts +15 -0
  4. package/ThemeContext.js +243 -0
  5. package/V3Select/V3Select.js +455 -0
  6. package/V3Select/index.d.ts +27 -0
  7. package/V3Textarea/V3Textarea.js +260 -0
  8. package/V3Textarea/index.d.ts +27 -0
  9. package/accordion/Accordion.d.ts +4 -0
  10. package/accordion/Accordion.js +247 -0
  11. package/accordion/Accordion.stories.tsx +307 -0
  12. package/accordion/types.d.ts +64 -0
  13. package/accordion/types.js +5 -0
  14. package/accordion-group/AccordionGroup.d.ts +7 -0
  15. package/accordion-group/AccordionGroup.js +170 -0
  16. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  17. package/accordion-group/types.d.ts +68 -0
  18. package/accordion-group/types.js +5 -0
  19. package/alert/Alert.d.ts +4 -0
  20. package/alert/Alert.js +290 -0
  21. package/alert/Alert.stories.tsx +170 -0
  22. package/alert/types.d.ts +49 -0
  23. package/alert/types.js +5 -0
  24. package/badge/Badge.d.ts +4 -0
  25. package/badge/Badge.js +59 -0
  26. package/badge/types.d.ts +4 -0
  27. package/badge/types.js +5 -0
  28. package/bleed/Bleed.d.ts +3 -0
  29. package/bleed/Bleed.js +84 -0
  30. package/bleed/Bleed.stories.tsx +342 -0
  31. package/bleed/types.d.ts +13 -0
  32. package/bleed/types.js +5 -0
  33. package/box/Box.d.ts +4 -0
  34. package/box/Box.js +126 -0
  35. package/box/Box.stories.tsx +132 -0
  36. package/box/types.d.ts +43 -0
  37. package/box/types.js +5 -0
  38. package/button/Button.d.ts +4 -0
  39. package/button/Button.js +171 -0
  40. package/button/Button.stories.tsx +274 -0
  41. package/button/types.d.ts +53 -0
  42. package/button/types.js +5 -0
  43. package/card/Card.d.ts +4 -0
  44. package/card/Card.js +164 -0
  45. package/card/Card.stories.tsx +201 -0
  46. package/card/ice-cream.jpg +0 -0
  47. package/card/types.d.ts +67 -0
  48. package/card/types.js +5 -0
  49. package/checkbox/Checkbox.d.ts +4 -0
  50. package/checkbox/Checkbox.js +253 -0
  51. package/checkbox/Checkbox.stories.tsx +192 -0
  52. package/checkbox/types.d.ts +60 -0
  53. package/checkbox/types.js +5 -0
  54. package/chip/Chip.d.ts +4 -0
  55. package/chip/Chip.js +161 -0
  56. package/chip/Chip.stories.tsx +119 -0
  57. package/chip/types.d.ts +45 -0
  58. package/chip/types.js +5 -0
  59. package/{dist/common → common}/OpenSans.css +0 -0
  60. package/{dist/common → common}/RequiredComponent.js +5 -19
  61. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  62. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  63. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  64. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  65. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  68. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  71. package/common/utils.js +22 -0
  72. package/common/variables.js +1611 -0
  73. package/{dist/date → date}/Date.js +87 -70
  74. package/date/index.d.ts +27 -0
  75. package/date-input/DateInput.d.ts +4 -0
  76. package/date-input/DateInput.js +358 -0
  77. package/date-input/DateInput.stories.tsx +138 -0
  78. package/date-input/types.d.ts +100 -0
  79. package/date-input/types.js +5 -0
  80. package/dialog/Dialog.d.ts +4 -0
  81. package/dialog/Dialog.js +166 -0
  82. package/dialog/Dialog.stories.tsx +212 -0
  83. package/dialog/types.d.ts +43 -0
  84. package/dialog/types.js +5 -0
  85. package/dropdown/Dropdown.d.ts +4 -0
  86. package/dropdown/Dropdown.js +395 -0
  87. package/dropdown/Dropdown.stories.tsx +249 -0
  88. package/dropdown/types.d.ts +80 -0
  89. package/dropdown/types.js +5 -0
  90. package/file-input/FileInput.d.ts +4 -0
  91. package/file-input/FileInput.js +590 -0
  92. package/file-input/FileInput.stories.tsx +507 -0
  93. package/file-input/FileItem.d.ts +14 -0
  94. package/file-input/FileItem.js +184 -0
  95. package/file-input/types.d.ts +112 -0
  96. package/file-input/types.js +5 -0
  97. package/footer/Footer.d.ts +4 -0
  98. package/footer/Footer.js +258 -0
  99. package/footer/Footer.stories.tsx +130 -0
  100. package/footer/Icons.d.ts +2 -0
  101. package/footer/Icons.js +77 -0
  102. package/footer/types.d.ts +65 -0
  103. package/footer/types.js +5 -0
  104. package/header/Header.d.ts +7 -0
  105. package/header/Header.js +324 -0
  106. package/header/Header.stories.tsx +162 -0
  107. package/header/Icons.d.ts +2 -0
  108. package/header/Icons.js +34 -0
  109. package/header/types.d.ts +47 -0
  110. package/header/types.js +5 -0
  111. package/heading/Heading.d.ts +4 -0
  112. package/heading/Heading.js +159 -0
  113. package/heading/Heading.stories.tsx +54 -0
  114. package/heading/types.d.ts +33 -0
  115. package/heading/types.js +5 -0
  116. package/input-text/Icons.js +22 -0
  117. package/input-text/InputText.js +611 -0
  118. package/input-text/index.d.ts +36 -0
  119. package/inset/Inset.d.ts +3 -0
  120. package/inset/Inset.js +84 -0
  121. package/inset/Inset.stories.tsx +229 -0
  122. package/inset/types.d.ts +13 -0
  123. package/inset/types.js +5 -0
  124. package/layout/ApplicationLayout.d.ts +10 -0
  125. package/layout/ApplicationLayout.js +231 -0
  126. package/layout/ApplicationLayout.stories.tsx +171 -0
  127. package/layout/Icons.js +55 -0
  128. package/layout/types.d.ts +57 -0
  129. package/layout/types.js +5 -0
  130. package/link/Link.d.ts +3 -0
  131. package/link/Link.js +153 -0
  132. package/link/Link.stories.tsx +151 -0
  133. package/link/types.d.ts +70 -0
  134. package/link/types.js +5 -0
  135. package/list/List.d.ts +4 -0
  136. package/list/List.js +47 -0
  137. package/list/List.stories.tsx +95 -0
  138. package/list/types.d.ts +7 -0
  139. package/list/types.js +5 -0
  140. package/main.d.ts +49 -0
  141. package/{dist/main.js → main.js} +173 -49
  142. package/number-input/NumberInput.d.ts +4 -0
  143. package/number-input/NumberInput.js +83 -0
  144. package/number-input/NumberInput.stories.tsx +115 -0
  145. package/number-input/NumberInputContext.d.ts +4 -0
  146. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +6 -2
  147. package/number-input/numberInputContextTypes.d.ts +19 -0
  148. package/number-input/numberInputContextTypes.js +5 -0
  149. package/number-input/types.d.ts +117 -0
  150. package/number-input/types.js +5 -0
  151. package/package.json +39 -23
  152. package/paginator/Icons.js +66 -0
  153. package/paginator/Paginator.d.ts +4 -0
  154. package/paginator/Paginator.js +192 -0
  155. package/paginator/Paginator.stories.tsx +63 -0
  156. package/paginator/types.d.ts +38 -0
  157. package/paginator/types.js +5 -0
  158. package/password-input/PasswordInput.d.ts +4 -0
  159. package/password-input/PasswordInput.js +163 -0
  160. package/password-input/PasswordInput.stories.tsx +131 -0
  161. package/password-input/types.d.ts +107 -0
  162. package/password-input/types.js +5 -0
  163. package/progress-bar/ProgressBar.d.ts +4 -0
  164. package/progress-bar/ProgressBar.js +170 -0
  165. package/progress-bar/ProgressBar.stories.jsx +58 -0
  166. package/progress-bar/types.d.ts +37 -0
  167. package/progress-bar/types.js +5 -0
  168. package/radio/Radio.d.ts +4 -0
  169. package/radio/Radio.js +174 -0
  170. package/radio/Radio.stories.tsx +192 -0
  171. package/radio/types.d.ts +54 -0
  172. package/radio/types.js +5 -0
  173. package/radio-group/Radio.d.ts +4 -0
  174. package/radio-group/Radio.js +140 -0
  175. package/radio-group/RadioGroup.d.ts +4 -0
  176. package/radio-group/RadioGroup.js +273 -0
  177. package/radio-group/RadioGroup.stories.tsx +79 -0
  178. package/radio-group/RadioGroup.test.js +248 -0
  179. package/radio-group/types.d.ts +36 -0
  180. package/radio-group/types.js +5 -0
  181. package/resultsetTable/ResultsetTable.d.ts +4 -0
  182. package/resultsetTable/ResultsetTable.js +254 -0
  183. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  184. package/resultsetTable/types.d.ts +67 -0
  185. package/resultsetTable/types.js +5 -0
  186. package/row/Row.d.ts +3 -0
  187. package/row/Row.js +127 -0
  188. package/row/Row.stories.tsx +237 -0
  189. package/row/types.d.ts +10 -0
  190. package/row/types.js +5 -0
  191. package/select/Select.d.ts +4 -0
  192. package/select/Select.js +863 -0
  193. package/select/Select.stories.tsx +572 -0
  194. package/select/types.d.ts +170 -0
  195. package/select/types.js +5 -0
  196. package/sidenav/Sidenav.d.ts +9 -0
  197. package/sidenav/Sidenav.js +136 -0
  198. package/sidenav/Sidenav.stories.tsx +182 -0
  199. package/sidenav/types.d.ts +50 -0
  200. package/sidenav/types.js +5 -0
  201. package/slider/Slider.d.ts +4 -0
  202. package/slider/Slider.js +317 -0
  203. package/slider/Slider.stories.tsx +177 -0
  204. package/slider/types.d.ts +78 -0
  205. package/slider/types.js +5 -0
  206. package/spinner/Spinner.d.ts +4 -0
  207. package/spinner/Spinner.js +250 -0
  208. package/spinner/Spinner.stories.jsx +103 -0
  209. package/spinner/types.d.ts +32 -0
  210. package/spinner/types.js +5 -0
  211. package/stack/Stack.d.ts +3 -0
  212. package/stack/Stack.js +97 -0
  213. package/stack/Stack.stories.tsx +164 -0
  214. package/stack/types.d.ts +9 -0
  215. package/stack/types.js +5 -0
  216. package/switch/Switch.d.ts +4 -0
  217. package/switch/Switch.js +179 -0
  218. package/switch/Switch.stories.tsx +160 -0
  219. package/switch/types.d.ts +58 -0
  220. package/switch/types.js +5 -0
  221. package/table/Table.d.ts +4 -0
  222. package/table/Table.js +118 -0
  223. package/table/Table.stories.jsx +277 -0
  224. package/table/types.d.ts +21 -0
  225. package/table/types.js +5 -0
  226. package/tabs/Tabs.d.ts +4 -0
  227. package/tabs/Tabs.js +213 -0
  228. package/tabs/Tabs.stories.tsx +120 -0
  229. package/tabs/types.d.ts +78 -0
  230. package/tabs/types.js +5 -0
  231. package/tag/Tag.d.ts +4 -0
  232. package/tag/Tag.js +188 -0
  233. package/tag/Tag.stories.tsx +138 -0
  234. package/tag/types.d.ts +69 -0
  235. package/tag/types.js +5 -0
  236. package/text/Text.d.ts +7 -0
  237. package/text/Text.js +30 -0
  238. package/text/Text.stories.tsx +19 -0
  239. package/text-input/TextInput.d.ts +4 -0
  240. package/text-input/TextInput.js +794 -0
  241. package/text-input/TextInput.stories.tsx +456 -0
  242. package/text-input/types.d.ts +159 -0
  243. package/text-input/types.js +5 -0
  244. package/textarea/Textarea.d.ts +4 -0
  245. package/textarea/Textarea.js +284 -0
  246. package/textarea/Textarea.stories.jsx +136 -0
  247. package/textarea/types.d.ts +130 -0
  248. package/textarea/types.js +5 -0
  249. package/toggle-group/ToggleGroup.d.ts +4 -0
  250. package/toggle-group/ToggleGroup.js +214 -0
  251. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  252. package/toggle-group/types.d.ts +97 -0
  253. package/toggle-group/types.js +5 -0
  254. package/{dist/upload → upload}/Upload.js +23 -22
  255. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  256. package/upload/buttons-upload/Icons.js +40 -0
  257. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  258. package/upload/dragAndDropArea/Icons.js +39 -0
  259. package/upload/file-upload/FileToUpload.js +115 -0
  260. package/upload/file-upload/Icons.js +66 -0
  261. package/upload/files-upload/FilesToUpload.js +109 -0
  262. package/upload/index.d.ts +15 -0
  263. package/upload/transaction/Icons.js +160 -0
  264. package/upload/transaction/Transaction.js +104 -0
  265. package/upload/transactions/Transactions.js +94 -0
  266. package/useTheme.d.ts +2 -0
  267. package/useTheme.js +22 -0
  268. package/wizard/Wizard.d.ts +4 -0
  269. package/wizard/Wizard.js +281 -0
  270. package/wizard/Wizard.stories.tsx +224 -0
  271. package/wizard/types.d.ts +60 -0
  272. package/wizard/types.js +5 -0
  273. package/README.md +0 -66
  274. package/babel.config.js +0 -4
  275. package/dist/accordion/Accordion.js +0 -268
  276. package/dist/accordion/Accordion.stories.js +0 -207
  277. package/dist/accordion/readme.md +0 -96
  278. package/dist/alert/Alert.js +0 -304
  279. package/dist/alert/Alert.stories.js +0 -158
  280. package/dist/alert/close.svg +0 -4
  281. package/dist/alert/error.svg +0 -4
  282. package/dist/alert/info.svg +0 -4
  283. package/dist/alert/readme.md +0 -43
  284. package/dist/alert/success.svg +0 -4
  285. package/dist/alert/warning.svg +0 -4
  286. package/dist/box/Box.js +0 -148
  287. package/dist/button/Button.js +0 -202
  288. package/dist/button/Button.stories.js +0 -224
  289. package/dist/button/readme.md +0 -93
  290. package/dist/card/Card.js +0 -217
  291. package/dist/checkbox/Checkbox.js +0 -240
  292. package/dist/checkbox/Checkbox.stories.js +0 -144
  293. package/dist/checkbox/readme.md +0 -116
  294. package/dist/chip/Chip.js +0 -208
  295. package/dist/common/services/example-service.js +0 -10
  296. package/dist/common/services/example-service.test.js +0 -12
  297. package/dist/common/utils.js +0 -42
  298. package/dist/common/variables.js +0 -434
  299. package/dist/date/Date.stories.js +0 -205
  300. package/dist/date/calendar.svg +0 -1
  301. package/dist/date/calendar_dark.svg +0 -1
  302. package/dist/date/readme.md +0 -73
  303. package/dist/dialog/Dialog.js +0 -197
  304. package/dist/dialog/Dialog.stories.js +0 -217
  305. package/dist/dialog/readme.md +0 -32
  306. package/dist/dropdown/Dropdown.js +0 -449
  307. package/dist/dropdown/Dropdown.stories.js +0 -249
  308. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  309. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  310. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  311. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  312. package/dist/dropdown/readme.md +0 -69
  313. package/dist/footer/Footer.js +0 -346
  314. package/dist/footer/Footer.stories.js +0 -94
  315. package/dist/footer/dxc_logo_wht.png +0 -0
  316. package/dist/footer/readme.md +0 -41
  317. package/dist/header/Header.js +0 -373
  318. package/dist/header/Header.stories.js +0 -176
  319. package/dist/header/close_icon.svg +0 -1
  320. package/dist/header/dxc_logo_black.png +0 -0
  321. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  322. package/dist/header/dxc_logo_white.png +0 -0
  323. package/dist/header/hamb_menu_black.svg +0 -1
  324. package/dist/header/hamb_menu_white.svg +0 -1
  325. package/dist/header/readme.md +0 -33
  326. package/dist/heading/Heading.js +0 -153
  327. package/dist/input-text/InputText.js +0 -519
  328. package/dist/input-text/InputText.stories.js +0 -209
  329. package/dist/input-text/error.svg +0 -1
  330. package/dist/input-text/readme.md +0 -91
  331. package/dist/layout/ApplicationLayout.js +0 -335
  332. package/dist/layout/facebook.svg +0 -45
  333. package/dist/layout/linkedin.svg +0 -50
  334. package/dist/layout/twitter.svg +0 -53
  335. package/dist/link/Link.js +0 -171
  336. package/dist/link/readme.md +0 -51
  337. package/dist/paginator/Paginator.js +0 -196
  338. package/dist/paginator/images/next.svg +0 -3
  339. package/dist/paginator/images/nextPage.svg +0 -3
  340. package/dist/paginator/images/previous.svg +0 -3
  341. package/dist/paginator/images/previousPage.svg +0 -3
  342. package/dist/paginator/readme.md +0 -50
  343. package/dist/progress-bar/ProgressBar.js +0 -185
  344. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  345. package/dist/progress-bar/readme.md +0 -63
  346. package/dist/radio/Radio.js +0 -195
  347. package/dist/radio/Radio.stories.js +0 -166
  348. package/dist/radio/readme.md +0 -70
  349. package/dist/resultsetTable/ResultsetTable.js +0 -333
  350. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  351. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  352. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  353. package/dist/select/Select.js +0 -453
  354. package/dist/select/Select.stories.js +0 -235
  355. package/dist/select/readme.md +0 -72
  356. package/dist/sidenav/Sidenav.js +0 -128
  357. package/dist/slider/Slider.js +0 -266
  358. package/dist/slider/Slider.stories.js +0 -241
  359. package/dist/slider/readme.md +0 -64
  360. package/dist/spinner/Spinner.js +0 -193
  361. package/dist/spinner/Spinner.stories.js +0 -183
  362. package/dist/spinner/readme.md +0 -65
  363. package/dist/switch/Switch.js +0 -199
  364. package/dist/switch/Switch.stories.js +0 -134
  365. package/dist/switch/readme.md +0 -133
  366. package/dist/table/Table.js +0 -105
  367. package/dist/tabs/Tabs.js +0 -172
  368. package/dist/tabs/Tabs.stories.js +0 -130
  369. package/dist/tabs/readme.md +0 -78
  370. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  371. package/dist/tabs-for-sections/readme.md +0 -78
  372. package/dist/tag/Tag.js +0 -234
  373. package/dist/textarea/Textarea.js +0 -227
  374. package/dist/toggle/Toggle.js +0 -223
  375. package/dist/toggle/Toggle.stories.js +0 -297
  376. package/dist/toggle/readme.md +0 -80
  377. package/dist/toggle-group/ToggleGroup.js +0 -214
  378. package/dist/toggle-group/readme.md +0 -82
  379. package/dist/upload/Upload.stories.js +0 -72
  380. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  381. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  382. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  383. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  384. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  385. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  386. package/dist/upload/file-upload/FileToUpload.js +0 -158
  387. package/dist/upload/file-upload/audio-icon.svg +0 -4
  388. package/dist/upload/file-upload/close.svg +0 -4
  389. package/dist/upload/file-upload/file-icon.svg +0 -4
  390. package/dist/upload/file-upload/video-icon.svg +0 -4
  391. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  392. package/dist/upload/readme.md +0 -37
  393. package/dist/upload/transaction/Transaction.js +0 -155
  394. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  395. package/dist/upload/transaction/audio-icon.svg +0 -4
  396. package/dist/upload/transaction/error-icon.svg +0 -4
  397. package/dist/upload/transaction/file-icon-err.svg +0 -4
  398. package/dist/upload/transaction/file-icon.svg +0 -4
  399. package/dist/upload/transaction/image-icon-err.svg +0 -4
  400. package/dist/upload/transaction/image-icon.svg +0 -4
  401. package/dist/upload/transaction/success-icon.svg +0 -4
  402. package/dist/upload/transaction/video-icon-err.svg +0 -4
  403. package/dist/upload/transaction/video-icon.svg +0 -4
  404. package/dist/upload/transactions/Transactions.js +0 -120
  405. package/dist/wizard/Wizard.js +0 -327
  406. package/dist/wizard/invalid_icon.svg +0 -6
  407. package/dist/wizard/valid_icon.svg +0 -6
  408. package/dist/wizard/validation-wrong.svg +0 -6
  409. package/test/Accordion.test.js +0 -33
  410. package/test/Alert.test.js +0 -53
  411. package/test/Box.test.js +0 -10
  412. package/test/Button.test.js +0 -18
  413. package/test/Card.test.js +0 -30
  414. package/test/Checkbox.test.js +0 -45
  415. package/test/Chip.test.js +0 -25
  416. package/test/Date.test.js +0 -393
  417. package/test/Dialog.test.js +0 -23
  418. package/test/Dropdown.test.js +0 -130
  419. package/test/Footer.test.js +0 -99
  420. package/test/Header.test.js +0 -39
  421. package/test/Heading.test.js +0 -35
  422. package/test/InputText.test.js +0 -236
  423. package/test/Link.test.js +0 -33
  424. package/test/Paginator.test.js +0 -165
  425. package/test/ProgressBar.test.js +0 -35
  426. package/test/Radio.test.js +0 -37
  427. package/test/ResultsetTable.test.js +0 -282
  428. package/test/Select.test.js +0 -191
  429. package/test/Sidenav.test.js +0 -45
  430. package/test/Slider.test.js +0 -82
  431. package/test/Spinner.test.js +0 -27
  432. package/test/Switch.test.js +0 -45
  433. package/test/Table.test.js +0 -36
  434. package/test/Tabs.test.js +0 -88
  435. package/test/TabsForSections.test.js +0 -34
  436. package/test/Tag.test.js +0 -32
  437. package/test/TextArea.test.js +0 -52
  438. package/test/Toggle.test.js +0 -43
  439. package/test/ToggleGroup.test.js +0 -81
  440. package/test/Upload.test.js +0 -60
  441. package/test/Wizard.test.js +0 -130
  442. package/test/mocks/pngMock.js +0 -1
  443. 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
-