@dxc-technology/halstack-react 0.0.0-de3a219 → 0.0.0-de7c6b0

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