@dxc-technology/halstack-react 0.0.0-c5f6a2f → 0.0.0-c67081d

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