@dxc-technology/halstack-react 0.0.0-89339f9 → 0.0.0-8b133ff

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 (467) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +10 -0
  4. package/HalstackContext.js +243 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +226 -0
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -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 +168 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/AccordionGroup.test.js +151 -0
  15. package/accordion-group/types.d.ts +72 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/alert/Alert.js +290 -0
  19. package/alert/Alert.stories.tsx +170 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +59 -0
  25. package/badge/types.d.ts +4 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +84 -0
  29. package/bleed/Bleed.stories.tsx +342 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/{dist/box → box}/Box.js +15 -53
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -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 +172 -0
  40. package/button/Button.stories.tsx +274 -0
  41. package/button/Button.test.js +35 -0
  42. package/button/types.d.ts +53 -0
  43. package/button/types.js +5 -0
  44. package/card/Card.d.ts +4 -0
  45. package/card/Card.js +163 -0
  46. package/card/Card.stories.tsx +201 -0
  47. package/card/Card.test.js +50 -0
  48. package/card/ice-cream.jpg +0 -0
  49. package/card/types.d.ts +67 -0
  50. package/card/types.js +5 -0
  51. package/checkbox/Checkbox.d.ts +4 -0
  52. package/{dist/checkbox → checkbox}/Checkbox.js +72 -109
  53. package/checkbox/Checkbox.stories.tsx +188 -0
  54. package/checkbox/Checkbox.test.js +78 -0
  55. package/checkbox/types.d.ts +64 -0
  56. package/checkbox/types.js +5 -0
  57. package/chip/Chip.d.ts +4 -0
  58. package/chip/Chip.js +161 -0
  59. package/chip/Chip.stories.tsx +119 -0
  60. package/chip/Chip.test.js +56 -0
  61. package/chip/types.d.ts +45 -0
  62. package/chip/types.js +5 -0
  63. package/{dist/common → common}/OpenSans.css +0 -0
  64. package/{dist/common → common}/RequiredComponent.js +3 -11
  65. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  68. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  75. package/{dist/common → common}/utils.js +0 -0
  76. package/common/variables.js +1372 -0
  77. package/date-input/DateInput.d.ts +4 -0
  78. package/date-input/DateInput.js +369 -0
  79. package/date-input/DateInput.stories.tsx +138 -0
  80. package/date-input/DateInput.test.js +479 -0
  81. package/date-input/types.d.ts +107 -0
  82. package/date-input/types.js +5 -0
  83. package/dialog/Dialog.d.ts +4 -0
  84. package/dialog/Dialog.js +138 -0
  85. package/dialog/Dialog.stories.tsx +212 -0
  86. package/dialog/Dialog.test.js +40 -0
  87. package/dialog/types.d.ts +43 -0
  88. package/dialog/types.js +5 -0
  89. package/dropdown/Dropdown.d.ts +4 -0
  90. package/dropdown/Dropdown.js +391 -0
  91. package/dropdown/Dropdown.stories.tsx +249 -0
  92. package/dropdown/Dropdown.test.js +189 -0
  93. package/dropdown/types.d.ts +80 -0
  94. package/dropdown/types.js +5 -0
  95. package/file-input/FileInput.d.ts +4 -0
  96. package/file-input/FileInput.js +590 -0
  97. package/file-input/FileInput.stories.tsx +507 -0
  98. package/file-input/FileInput.test.js +457 -0
  99. package/file-input/FileItem.d.ts +14 -0
  100. package/file-input/FileItem.js +184 -0
  101. package/file-input/types.d.ts +112 -0
  102. package/file-input/types.js +5 -0
  103. package/footer/Footer.d.ts +4 -0
  104. package/footer/Footer.js +183 -0
  105. package/footer/Footer.stories.tsx +130 -0
  106. package/footer/Footer.test.js +109 -0
  107. package/footer/Icons.d.ts +2 -0
  108. package/footer/Icons.js +77 -0
  109. package/footer/types.d.ts +65 -0
  110. package/footer/types.js +5 -0
  111. package/header/Header.d.ts +7 -0
  112. package/header/Header.js +300 -0
  113. package/header/Header.stories.tsx +172 -0
  114. package/header/Header.test.js +79 -0
  115. package/header/Icons.d.ts +2 -0
  116. package/header/Icons.js +34 -0
  117. package/header/types.d.ts +47 -0
  118. package/header/types.js +5 -0
  119. package/heading/Heading.d.ts +4 -0
  120. package/{dist/heading → heading}/Heading.js +31 -94
  121. package/heading/Heading.stories.tsx +54 -0
  122. package/heading/Heading.test.js +186 -0
  123. package/heading/types.d.ts +33 -0
  124. package/heading/types.js +5 -0
  125. package/inset/Inset.d.ts +3 -0
  126. package/inset/Inset.js +84 -0
  127. package/inset/Inset.stories.tsx +229 -0
  128. package/inset/types.d.ts +37 -0
  129. package/inset/types.js +5 -0
  130. package/layout/ApplicationLayout.d.ts +10 -0
  131. package/layout/ApplicationLayout.js +218 -0
  132. package/layout/ApplicationLayout.stories.tsx +171 -0
  133. package/layout/Icons.js +55 -0
  134. package/layout/types.d.ts +57 -0
  135. package/layout/types.js +5 -0
  136. package/link/Link.d.ts +3 -0
  137. package/link/Link.js +149 -0
  138. package/link/Link.stories.tsx +151 -0
  139. package/link/Link.test.js +91 -0
  140. package/link/types.d.ts +70 -0
  141. package/link/types.js +5 -0
  142. package/list/List.d.ts +4 -0
  143. package/list/List.js +47 -0
  144. package/list/List.stories.tsx +95 -0
  145. package/list/types.d.ts +7 -0
  146. package/list/types.js +5 -0
  147. package/main.d.ts +47 -0
  148. package/{dist/main.js → main.js} +148 -72
  149. package/number-input/NumberInput.d.ts +4 -0
  150. package/number-input/NumberInput.js +76 -0
  151. package/number-input/NumberInput.stories.tsx +115 -0
  152. package/number-input/NumberInput.test.js +506 -0
  153. package/number-input/NumberInputContext.d.ts +4 -0
  154. package/number-input/NumberInputContext.js +19 -0
  155. package/number-input/numberInputContextTypes.d.ts +19 -0
  156. package/number-input/numberInputContextTypes.js +5 -0
  157. package/number-input/types.d.ts +124 -0
  158. package/number-input/types.js +5 -0
  159. package/package.json +39 -28
  160. package/paginator/Icons.js +66 -0
  161. package/paginator/Paginator.d.ts +4 -0
  162. package/paginator/Paginator.js +192 -0
  163. package/paginator/Paginator.stories.tsx +63 -0
  164. package/paginator/Paginator.test.js +266 -0
  165. package/paginator/types.d.ts +38 -0
  166. package/paginator/types.js +5 -0
  167. package/password-input/PasswordInput.d.ts +4 -0
  168. package/password-input/PasswordInput.js +163 -0
  169. package/password-input/PasswordInput.stories.tsx +131 -0
  170. package/password-input/PasswordInput.test.js +181 -0
  171. package/password-input/types.d.ts +110 -0
  172. package/password-input/types.js +5 -0
  173. package/progress-bar/ProgressBar.d.ts +4 -0
  174. package/progress-bar/ProgressBar.js +170 -0
  175. package/progress-bar/ProgressBar.stories.jsx +58 -0
  176. package/progress-bar/ProgressBar.test.js +65 -0
  177. package/progress-bar/types.d.ts +37 -0
  178. package/progress-bar/types.js +5 -0
  179. package/quick-nav/QuickNav.d.ts +4 -0
  180. package/quick-nav/QuickNav.js +64 -0
  181. package/quick-nav/QuickNav.stories.tsx +237 -0
  182. package/quick-nav/types.d.ts +21 -0
  183. package/quick-nav/types.js +5 -0
  184. package/radio/Radio.d.ts +4 -0
  185. package/{dist/radio → radio}/Radio.js +23 -59
  186. package/radio/Radio.stories.tsx +192 -0
  187. package/radio/Radio.test.js +71 -0
  188. package/radio/types.d.ts +54 -0
  189. package/radio/types.js +5 -0
  190. package/radio-group/Radio.d.ts +4 -0
  191. package/radio-group/Radio.js +141 -0
  192. package/radio-group/RadioGroup.d.ts +4 -0
  193. package/radio-group/RadioGroup.js +280 -0
  194. package/radio-group/RadioGroup.stories.tsx +100 -0
  195. package/radio-group/RadioGroup.test.js +695 -0
  196. package/radio-group/types.d.ts +114 -0
  197. package/radio-group/types.js +5 -0
  198. package/resultsetTable/ResultsetTable.d.ts +4 -0
  199. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -164
  200. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  201. package/resultsetTable/ResultsetTable.test.js +306 -0
  202. package/resultsetTable/types.d.ts +67 -0
  203. package/resultsetTable/types.js +5 -0
  204. package/row/Row.d.ts +3 -0
  205. package/row/Row.js +127 -0
  206. package/row/Row.stories.tsx +237 -0
  207. package/row/types.d.ts +28 -0
  208. package/row/types.js +5 -0
  209. package/select/Icons.d.ts +10 -0
  210. package/select/Icons.js +93 -0
  211. package/select/Listbox.d.ts +4 -0
  212. package/select/Listbox.js +148 -0
  213. package/select/Option.d.ts +4 -0
  214. package/select/Option.js +110 -0
  215. package/select/Select.d.ts +4 -0
  216. package/select/Select.js +655 -0
  217. package/select/Select.stories.tsx +582 -0
  218. package/select/Select.test.js +2057 -0
  219. package/select/types.d.ts +213 -0
  220. package/select/types.js +5 -0
  221. package/sidenav/Sidenav.d.ts +9 -0
  222. package/sidenav/Sidenav.js +136 -0
  223. package/sidenav/Sidenav.stories.tsx +182 -0
  224. package/sidenav/Sidenav.test.js +56 -0
  225. package/sidenav/types.d.ts +50 -0
  226. package/sidenav/types.js +5 -0
  227. package/slider/Slider.d.ts +4 -0
  228. package/slider/Slider.js +318 -0
  229. package/slider/Slider.stories.tsx +177 -0
  230. package/slider/Slider.test.js +150 -0
  231. package/slider/types.d.ts +82 -0
  232. package/slider/types.js +5 -0
  233. package/spinner/Spinner.d.ts +4 -0
  234. package/spinner/Spinner.js +250 -0
  235. package/spinner/Spinner.stories.jsx +103 -0
  236. package/spinner/Spinner.test.js +64 -0
  237. package/spinner/types.d.ts +32 -0
  238. package/spinner/types.js +5 -0
  239. package/stack/Stack.d.ts +3 -0
  240. package/stack/Stack.js +97 -0
  241. package/stack/Stack.stories.tsx +164 -0
  242. package/stack/types.d.ts +24 -0
  243. package/stack/types.js +5 -0
  244. package/switch/Switch.d.ts +4 -0
  245. package/switch/Switch.js +192 -0
  246. package/switch/Switch.stories.tsx +160 -0
  247. package/switch/Switch.test.js +98 -0
  248. package/switch/types.d.ts +62 -0
  249. package/switch/types.js +5 -0
  250. package/table/Table.d.ts +4 -0
  251. package/table/Table.js +118 -0
  252. package/table/Table.stories.jsx +277 -0
  253. package/table/Table.test.js +26 -0
  254. package/table/types.d.ts +21 -0
  255. package/table/types.js +5 -0
  256. package/tabs/Tabs.d.ts +4 -0
  257. package/tabs/Tabs.js +211 -0
  258. package/tabs/Tabs.stories.tsx +118 -0
  259. package/tabs/Tabs.test.js +140 -0
  260. package/tabs/types.d.ts +82 -0
  261. package/tabs/types.js +5 -0
  262. package/tag/Tag.d.ts +4 -0
  263. package/tag/Tag.js +183 -0
  264. package/tag/Tag.stories.tsx +142 -0
  265. package/tag/Tag.test.js +60 -0
  266. package/tag/types.d.ts +69 -0
  267. package/tag/types.js +5 -0
  268. package/text/Text.d.ts +7 -0
  269. package/text/Text.js +30 -0
  270. package/text/Text.stories.tsx +19 -0
  271. package/text-input/TextInput.d.ts +4 -0
  272. package/text-input/TextInput.js +796 -0
  273. package/text-input/TextInput.stories.tsx +474 -0
  274. package/text-input/TextInput.test.js +1712 -0
  275. package/text-input/types.d.ts +166 -0
  276. package/text-input/types.js +5 -0
  277. package/textarea/Textarea.d.ts +4 -0
  278. package/textarea/Textarea.js +286 -0
  279. package/textarea/Textarea.stories.jsx +157 -0
  280. package/textarea/Textarea.test.js +437 -0
  281. package/textarea/types.d.ts +137 -0
  282. package/textarea/types.js +5 -0
  283. package/toggle-group/ToggleGroup.d.ts +4 -0
  284. package/toggle-group/ToggleGroup.js +215 -0
  285. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  286. package/toggle-group/ToggleGroup.test.js +156 -0
  287. package/toggle-group/types.d.ts +105 -0
  288. package/toggle-group/types.js +5 -0
  289. package/useTheme.d.ts +2 -0
  290. package/{dist/useTheme.js → useTheme.js} +2 -2
  291. package/wizard/Wizard.d.ts +4 -0
  292. package/wizard/Wizard.js +290 -0
  293. package/wizard/Wizard.stories.tsx +214 -0
  294. package/wizard/Wizard.test.js +141 -0
  295. package/wizard/types.d.ts +64 -0
  296. package/wizard/types.js +5 -0
  297. package/README.md +0 -66
  298. package/babel.config.js +0 -8
  299. package/dist/BackgroundColorContext.js +0 -46
  300. package/dist/ThemeContext.js +0 -216
  301. package/dist/accordion/Accordion.js +0 -340
  302. package/dist/accordion/Accordion.stories.js +0 -207
  303. package/dist/accordion/readme.md +0 -96
  304. package/dist/accordion-group/AccordionGroup.js +0 -188
  305. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  306. package/dist/accordion-group/readme.md +0 -70
  307. package/dist/alert/Alert.js +0 -388
  308. package/dist/alert/Alert.stories.js +0 -158
  309. package/dist/alert/close.svg +0 -4
  310. package/dist/alert/error.svg +0 -4
  311. package/dist/alert/info.svg +0 -4
  312. package/dist/alert/readme.md +0 -43
  313. package/dist/alert/success.svg +0 -4
  314. package/dist/alert/warning.svg +0 -4
  315. package/dist/badge/Badge.js +0 -61
  316. package/dist/button/Button.js +0 -228
  317. package/dist/button/Button.stories.js +0 -224
  318. package/dist/button/readme.md +0 -93
  319. package/dist/card/Card.js +0 -256
  320. package/dist/checkbox/Checkbox.stories.js +0 -144
  321. package/dist/checkbox/readme.md +0 -116
  322. package/dist/chip/Chip.js +0 -263
  323. package/dist/common/variables.js +0 -1154
  324. package/dist/date/Date.js +0 -391
  325. package/dist/date/Date.stories.js +0 -205
  326. package/dist/date/calendar.svg +0 -1
  327. package/dist/date/calendar_dark.svg +0 -1
  328. package/dist/date/readme.md +0 -73
  329. package/dist/dialog/Dialog.js +0 -236
  330. package/dist/dialog/Dialog.stories.js +0 -217
  331. package/dist/dialog/readme.md +0 -32
  332. package/dist/dropdown/Dropdown.js +0 -492
  333. package/dist/dropdown/Dropdown.stories.js +0 -249
  334. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  335. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  336. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  337. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  338. package/dist/dropdown/readme.md +0 -69
  339. package/dist/footer/Footer.js +0 -405
  340. package/dist/footer/Footer.stories.js +0 -94
  341. package/dist/footer/dxc_logo_wht.png +0 -0
  342. package/dist/footer/readme.md +0 -41
  343. package/dist/header/Header.js +0 -431
  344. package/dist/header/Header.stories.js +0 -176
  345. package/dist/header/close_icon.svg +0 -1
  346. package/dist/header/dxc_logo_black.png +0 -0
  347. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  348. package/dist/header/dxc_logo_white.png +0 -0
  349. package/dist/header/hamb_menu_black.svg +0 -1
  350. package/dist/header/hamb_menu_white.svg +0 -1
  351. package/dist/header/readme.md +0 -33
  352. package/dist/input-text/InputText.js +0 -669
  353. package/dist/input-text/InputText.stories.js +0 -209
  354. package/dist/input-text/error.svg +0 -1
  355. package/dist/input-text/readme.md +0 -91
  356. package/dist/layout/ApplicationLayout.js +0 -331
  357. package/dist/layout/facebook.svg +0 -45
  358. package/dist/layout/linkedin.svg +0 -50
  359. package/dist/layout/twitter.svg +0 -53
  360. package/dist/link/Link.js +0 -240
  361. package/dist/link/readme.md +0 -51
  362. package/dist/paginator/Paginator.js +0 -283
  363. package/dist/paginator/images/next.svg +0 -3
  364. package/dist/paginator/images/nextPage.svg +0 -3
  365. package/dist/paginator/images/previous.svg +0 -3
  366. package/dist/paginator/images/previousPage.svg +0 -3
  367. package/dist/paginator/readme.md +0 -50
  368. package/dist/progress-bar/ProgressBar.js +0 -206
  369. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  370. package/dist/progress-bar/readme.md +0 -63
  371. package/dist/radio/Radio.stories.js +0 -166
  372. package/dist/radio/readme.md +0 -70
  373. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  374. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  375. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  376. package/dist/select/Select.js +0 -545
  377. package/dist/select/Select.stories.js +0 -235
  378. package/dist/select/readme.md +0 -72
  379. package/dist/sidenav/Sidenav.js +0 -183
  380. package/dist/slider/Slider.js +0 -315
  381. package/dist/slider/Slider.stories.js +0 -241
  382. package/dist/slider/readme.md +0 -64
  383. package/dist/spinner/Spinner.js +0 -214
  384. package/dist/spinner/Spinner.stories.js +0 -183
  385. package/dist/spinner/readme.md +0 -65
  386. package/dist/switch/Switch.js +0 -222
  387. package/dist/switch/Switch.stories.js +0 -134
  388. package/dist/switch/readme.md +0 -133
  389. package/dist/table/Table.js +0 -122
  390. package/dist/tabs/Tabs.js +0 -347
  391. package/dist/tabs/Tabs.stories.js +0 -130
  392. package/dist/tabs/readme.md +0 -78
  393. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  394. package/dist/tabs-for-sections/readme.md +0 -78
  395. package/dist/tag/Tag.js +0 -280
  396. package/dist/textarea/Textarea.js +0 -260
  397. package/dist/toggle/Toggle.js +0 -220
  398. package/dist/toggle/Toggle.stories.js +0 -297
  399. package/dist/toggle/readme.md +0 -80
  400. package/dist/toggle-group/ToggleGroup.js +0 -241
  401. package/dist/toggle-group/readme.md +0 -82
  402. package/dist/upload/Upload.js +0 -205
  403. package/dist/upload/Upload.stories.js +0 -72
  404. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  405. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  406. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  407. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  408. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  409. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  410. package/dist/upload/file-upload/FileToUpload.js +0 -184
  411. package/dist/upload/file-upload/audio-icon.svg +0 -4
  412. package/dist/upload/file-upload/close.svg +0 -4
  413. package/dist/upload/file-upload/file-icon.svg +0 -4
  414. package/dist/upload/file-upload/video-icon.svg +0 -4
  415. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  416. package/dist/upload/readme.md +0 -37
  417. package/dist/upload/transaction/Transaction.js +0 -171
  418. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  419. package/dist/upload/transaction/audio-icon.svg +0 -4
  420. package/dist/upload/transaction/error-icon.svg +0 -4
  421. package/dist/upload/transaction/file-icon-err.svg +0 -4
  422. package/dist/upload/transaction/file-icon.svg +0 -4
  423. package/dist/upload/transaction/image-icon-err.svg +0 -4
  424. package/dist/upload/transaction/image-icon.svg +0 -4
  425. package/dist/upload/transaction/success-icon.svg +0 -4
  426. package/dist/upload/transaction/video-icon-err.svg +0 -4
  427. package/dist/upload/transaction/video-icon.svg +0 -4
  428. package/dist/upload/transactions/Transactions.js +0 -138
  429. package/dist/wizard/Wizard.js +0 -383
  430. package/dist/wizard/invalid_icon.svg +0 -6
  431. package/dist/wizard/valid_icon.svg +0 -6
  432. package/dist/wizard/validation-wrong.svg +0 -6
  433. package/test/Accordion.test.js +0 -33
  434. package/test/AccordionGroup.test.js +0 -125
  435. package/test/Alert.test.js +0 -53
  436. package/test/Box.test.js +0 -10
  437. package/test/Button.test.js +0 -18
  438. package/test/Card.test.js +0 -30
  439. package/test/Checkbox.test.js +0 -45
  440. package/test/Chip.test.js +0 -25
  441. package/test/Date.test.js +0 -393
  442. package/test/Dialog.test.js +0 -23
  443. package/test/Dropdown.test.js +0 -130
  444. package/test/Footer.test.js +0 -99
  445. package/test/Header.test.js +0 -39
  446. package/test/Heading.test.js +0 -35
  447. package/test/InputText.test.js +0 -240
  448. package/test/Link.test.js +0 -43
  449. package/test/Paginator.test.js +0 -177
  450. package/test/ProgressBar.test.js +0 -35
  451. package/test/Radio.test.js +0 -37
  452. package/test/ResultsetTable.test.js +0 -330
  453. package/test/Select.test.js +0 -192
  454. package/test/Sidenav.test.js +0 -45
  455. package/test/Slider.test.js +0 -82
  456. package/test/Spinner.test.js +0 -27
  457. package/test/Switch.test.js +0 -45
  458. package/test/Table.test.js +0 -36
  459. package/test/Tabs.test.js +0 -109
  460. package/test/TabsForSections.test.js +0 -34
  461. package/test/Tag.test.js +0 -32
  462. package/test/TextArea.test.js +0 -52
  463. package/test/ToggleGroup.test.js +0 -81
  464. package/test/Upload.test.js +0 -60
  465. package/test/Wizard.test.js +0 -130
  466. package/test/mocks/pngMock.js +0 -1
  467. package/test/mocks/svgMock.js +0 -1
package/dist/tabs/Tabs.js DELETED
@@ -1,347 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
19
-
20
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
21
-
22
- var _react = _interopRequireDefault(require("react"));
23
-
24
- var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
25
-
26
- var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
27
-
28
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
29
-
30
- var _propTypes = _interopRequireDefault(require("prop-types"));
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _Badge = _interopRequireDefault(require("../badge/Badge"));
35
-
36
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
37
-
38
- function _templateObject9() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n margin-bottom: ", ";\n margin-right: ", ";\n overflow: hidden;\n display: flex;\n align-items: center;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
40
-
41
- _templateObject9 = function _templateObject9() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject8() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n"]);
50
-
51
- _templateObject8 = function _templateObject8() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject7() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n .MuiTabs-root {\n background: white;\n min-height: ", ";\n\n .MuiTabs-scroller {\n .MuiTabs-flexContainer + span {\n z-index: 4;\n }\n }\n .MuiTab-root {\n text-transform: ", " !important;\n }\n .MuiButtonBase-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n\n padding: ", ";\n height: ", ";\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n font-weight: ", ";\n }\n &:not(.Mui-selected) {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-selected {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-disabled {\n cursor: not-allowed !important;\n pointer-events: all;\n color: ", ";\n font-style: ", ";\n svg {\n color: ", ";\n }\n }\n &:focus {\n outline: ", " auto 1px;\n }\n }\n .MuiTabs-indicator {\n background-color: ", ";\n height: ", ";\n }\n .MuiTabs-scrollButtons {\n min-width: ", ";\n width: ", ";\n padding: 0;\n }\n @media (max-width: 599.95px) {\n .MuiTabs-scrollButtonsDesktop {\n display: flex;\n }\n }\n }\n"]);
60
-
61
- _templateObject7 = function _templateObject7() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject6() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n left: 0px;\n bottom: 0;\n width: 100%;\n height: ", ";\n position: absolute;\n background-color: ", ";\n"]);
70
-
71
- _templateObject6 = function _templateObject6() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject5() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n margin-left: ", ";\n margin-right: ", ";\n"]);
80
-
81
- _templateObject5 = function _templateObject5() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject4() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n right: 0;\n top: ", ";\n width: 23px;\n height: 17px;\n"]);
90
-
91
- _templateObject4 = function _templateObject4() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject3() {
99
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
100
-
101
- _templateObject3 = function _templateObject3() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject2() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n"]);
110
-
111
- _templateObject2 = function _templateObject2() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n"]);
120
-
121
- _templateObject = function _templateObject() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- var DxcTabs = function DxcTabs(_ref) {
129
- var activeTabIndex = _ref.activeTabIndex,
130
- _ref$tabs = _ref.tabs,
131
- tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
132
- onTabClick = _ref.onTabClick,
133
- onTabHover = _ref.onTabHover,
134
- margin = _ref.margin,
135
- _ref$iconPosition = _ref.iconPosition,
136
- iconPosition = _ref$iconPosition === void 0 ? "left" : _ref$iconPosition,
137
- _ref$tabIndex = _ref.tabIndex,
138
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
139
-
140
- var _React$useState = _react["default"].useState(0),
141
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
142
- innerActiveTabIndex = _React$useState2[0],
143
- setInnerActiveTabIndex = _React$useState2[1];
144
-
145
- var colorsTheme = (0, _useTheme["default"])();
146
- var hasLabelAndIcon = tabs && tabs.filter(function (tab) {
147
- return tab.label && tab.icon;
148
- }).length > 0;
149
-
150
- var handleChange = function handleChange(event, newValue) {
151
- if (activeTabIndex == null) {
152
- setInnerActiveTabIndex(newValue);
153
- }
154
-
155
- if (typeof onTabClick === "function") {
156
- onTabClick(newValue);
157
- }
158
- };
159
-
160
- var getTabIndex = function getTabIndex(index, disabled) {
161
- return (activeTabIndex === index || innerActiveTabIndex === index) && !disabled ? tabIndex : -1;
162
- };
163
-
164
- var getLabelForTab = function getLabelForTab(tab) {
165
- return _react["default"].createElement(ParentLabelSpan, null, _react["default"].createElement(MainLabelContainer, {
166
- hasBadge: tab.notificationNumber
167
- }, _react["default"].createElement(TabLabelContainer, {
168
- hasLabelAndIcon: hasLabelAndIcon,
169
- iconPosition: iconPosition
170
- }, tab.icon ? _react["default"].createElement(TabIconContainer, {
171
- hasLabelAndIcon: hasLabelAndIcon,
172
- iconPosition: iconPosition
173
- }, (0, _typeof2["default"])(tab.icon) === "object" ? tab.icon : _react["default"].createElement(tab.icon)) : tab.iconSrc && _react["default"].createElement(TabIcon, {
174
- src: tab.iconSrc
175
- }), _react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && _react["default"].createElement(BadgeContainer, {
176
- hasLabelAndIcon: hasLabelAndIcon,
177
- iconPosition: iconPosition
178
- }, _react["default"].createElement(_Badge["default"], {
179
- notificationText: tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
180
- })));
181
- };
182
-
183
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
184
- theme: colorsTheme.tabs
185
- }, _react["default"].createElement(DxCTabs, {
186
- margin: margin,
187
- hasLabelAndIcon: hasLabelAndIcon,
188
- iconPosition: iconPosition
189
- }, _react["default"].createElement(Underline, null), _react["default"].createElement(_Tabs["default"], {
190
- value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
191
- onChange: handleChange,
192
- variant: "scrollable",
193
- scrollButtons: "auto"
194
- }, tabs.map(function (tab, i) {
195
- var tabContent = _react["default"].forwardRef(function (props, ref) {
196
- return _react["default"].createElement("div", (0, _extends2["default"])({
197
- role: "button"
198
- }, props, {
199
- ref: ref
200
- }));
201
- });
202
-
203
- return _react["default"].createElement(_Tab["default"], {
204
- tabIndex: (activeTabIndex === i || innerActiveTabIndex === i) && !tab.isDisabled ? tabIndex : -1,
205
- key: "tab".concat(i).concat(tab.label),
206
- label: getLabelForTab(tab),
207
- disabled: tab.isDisabled,
208
- disableRipple: true,
209
- onMouseEnter: function onMouseEnter() {
210
- onTabHover(i);
211
- },
212
- onMouseLeave: function onMouseLeave() {
213
- onTabHover(null);
214
- }
215
- });
216
- }))));
217
- };
218
-
219
- var ParentLabelSpan = _styledComponents["default"].div(_templateObject());
220
-
221
- var TabLabelContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
222
- return props.hasLabelAndIcon && props.iconPosition === "top" && "column" || "row";
223
- });
224
-
225
- var LabelTextContainer = _styledComponents["default"].div(_templateObject3());
226
-
227
- var BadgeContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
228
- return props.hasLabelAndIcon && props.iconPosition === "top" && "0" || "5px";
229
- });
230
-
231
- var MainLabelContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
232
- return props.hasBadge && "35px" || "unset";
233
- }, function (props) {
234
- return props.hasBadge && "35px" || "unset";
235
- });
236
-
237
- var Underline = _styledComponents["default"].div(_templateObject6(), function (props) {
238
- return props.theme.dividerThickness;
239
- }, function (props) {
240
- return props.theme.dividerColor;
241
- });
242
-
243
- var DxCTabs = _styledComponents["default"].div(_templateObject7(), function (props) {
244
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
245
- }, function (props) {
246
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
247
- }, function (props) {
248
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
249
- }, function (props) {
250
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
251
- }, function (props) {
252
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
253
- }, function (props) {
254
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
255
- }, function (props) {
256
- return props.theme.fontTextTransform;
257
- }, function (props) {
258
- return props.theme.fontFamily;
259
- }, function (props) {
260
- return props.theme.fontSize;
261
- }, function (props) {
262
- return props.theme.fontStyle;
263
- }, function (props) {
264
- return props.theme.fontWeight;
265
- }, function (props) {
266
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "12px 16px" || "8px 16px";
267
- }, function (props) {
268
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
269
- }, function (props) {
270
- return props.theme.minWidth;
271
- }, function (props) {
272
- return props.theme.maxWidth;
273
- }, function (props) {
274
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
275
- }, function (props) {
276
- return "".concat(props.theme.hoverBackgroundColor, " !important");
277
- }, function (props) {
278
- return "".concat(props.theme.pressedBackgroundColor, " !important");
279
- }, function (props) {
280
- return "".concat(props.theme.pressedFontWeight, " !important");
281
- }, function (props) {
282
- return props.theme.unselectedBackgroundColor;
283
- }, function (props) {
284
- return props.theme.unselectedFontColor;
285
- }, function (props) {
286
- return props.theme.unselectedIconColor;
287
- }, function (props) {
288
- return props.theme.selectedBackgroundColor;
289
- }, function (props) {
290
- return props.theme.selectedFontColor;
291
- }, function (props) {
292
- return props.theme.selectedIconColor;
293
- }, function (props) {
294
- return props.theme.disabledFontColor;
295
- }, function (props) {
296
- return props.theme.disabledFontStyle;
297
- }, function (props) {
298
- return props.theme.disabledIconColor;
299
- }, function (props) {
300
- return props.theme.focusOutline;
301
- }, function (props) {
302
- return props.theme.selectedUnderlineColor;
303
- }, function (props) {
304
- return props.theme.selectedUnderlineThickness;
305
- }, function (props) {
306
- return props.theme.scrollButtonsWidth;
307
- }, function (props) {
308
- return props.theme.scrollButtonsWidth;
309
- });
310
-
311
- var TabIcon = _styledComponents["default"].img(_templateObject8());
312
-
313
- var TabIconContainer = _styledComponents["default"].div(_templateObject9(), function (props) {
314
- return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";
315
- }, function (props) {
316
- return props.hasLabelAndIcon && props.iconPosition === "left" && "12px" || "";
317
- });
318
-
319
- DxcTabs.propTypes = {
320
- activeTabIndex: _propTypes["default"].number,
321
- onTabClick: _propTypes["default"].func,
322
- onTabHover: _propTypes["default"].func,
323
- tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
324
- label: _propTypes["default"].string,
325
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
326
- iconSrc: _propTypes["default"].string,
327
- isDisabled: _propTypes["default"].bool,
328
- notificationNumber: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].number])
329
- })),
330
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
331
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
332
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
333
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
334
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
335
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
336
- iconPosition: _propTypes["default"].oneOf(["top", "left"]),
337
- tabIndex: _propTypes["default"].number
338
- };
339
- DxcTabs.defaultProps = {
340
- activeTabIndex: null,
341
- tabs: [],
342
- onTabClick: function onTabClick() {},
343
- onTabHover: function onTabHover() {},
344
- iconPosition: "top"
345
- };
346
- var _default = DxcTabs;
347
- 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;