@dxc-technology/halstack-react 0.0.0-0fbe58b → 0.0.0-100df21

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 (525) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +30 -0
  3. package/HalstackContext.d.ts +1235 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +28 -47
  6. package/accordion/Accordion.d.ts +4 -0
  7. package/accordion/Accordion.js +182 -0
  8. package/accordion/Accordion.stories.tsx +283 -0
  9. package/accordion/Accordion.test.js +56 -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 +101 -0
  14. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  15. package/accordion-group/AccordionGroup.test.js +98 -0
  16. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  17. package/accordion-group/AccordionGroupAccordion.js +31 -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 +254 -0
  22. package/alert/Alert.stories.tsx +198 -0
  23. package/alert/Alert.test.js +75 -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 +48 -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 +43 -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 +75 -0
  37. package/box/Box.stories.tsx +119 -0
  38. package/box/Box.test.js +13 -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 +89 -0
  43. package/bulleted-list/BulletedList.stories.tsx +115 -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 +120 -0
  48. package/button/Button.stories.tsx +344 -0
  49. package/button/Button.test.js +36 -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 +120 -0
  54. package/card/Card.stories.tsx +171 -0
  55. package/card/Card.test.js +39 -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 +215 -0
  60. package/checkbox/Checkbox.stories.tsx +222 -0
  61. package/checkbox/Checkbox.test.js +199 -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 +121 -0
  66. package/chip/Chip.stories.tsx +214 -0
  67. package/chip/Chip.test.js +41 -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 +237 -0
  72. package/common/coreTokens.js +184 -0
  73. package/common/utils.d.ts +1 -0
  74. package/{dist/common → common}/utils.js +6 -12
  75. package/common/variables.d.ts +1381 -0
  76. package/common/variables.js +1253 -0
  77. package/container/Container.d.ts +4 -0
  78. package/container/Container.js +194 -0
  79. package/container/Container.stories.tsx +214 -0
  80. package/container/types.d.ts +74 -0
  81. package/container/types.js +5 -0
  82. package/date-input/Calendar.d.ts +4 -0
  83. package/date-input/Calendar.js +214 -0
  84. package/date-input/DateInput.d.ts +4 -0
  85. package/date-input/DateInput.js +223 -0
  86. package/date-input/DateInput.stories.tsx +285 -0
  87. package/date-input/DateInput.test.js +808 -0
  88. package/date-input/DatePicker.d.ts +4 -0
  89. package/date-input/DatePicker.js +115 -0
  90. package/date-input/Icons.d.ts +6 -0
  91. package/date-input/Icons.js +58 -0
  92. package/date-input/YearPicker.d.ts +4 -0
  93. package/date-input/YearPicker.js +100 -0
  94. package/date-input/types.d.ts +164 -0
  95. package/date-input/types.js +5 -0
  96. package/dialog/Dialog.d.ts +4 -0
  97. package/dialog/Dialog.js +104 -0
  98. package/dialog/Dialog.stories.tsx +365 -0
  99. package/dialog/Dialog.test.js +307 -0
  100. package/dialog/types.d.ts +36 -0
  101. package/dialog/types.js +5 -0
  102. package/dropdown/Dropdown.d.ts +4 -0
  103. package/dropdown/Dropdown.js +334 -0
  104. package/dropdown/Dropdown.stories.tsx +438 -0
  105. package/dropdown/Dropdown.test.js +599 -0
  106. package/dropdown/DropdownMenu.d.ts +4 -0
  107. package/dropdown/DropdownMenu.js +63 -0
  108. package/dropdown/DropdownMenuItem.d.ts +4 -0
  109. package/dropdown/DropdownMenuItem.js +67 -0
  110. package/dropdown/types.d.ts +98 -0
  111. package/dropdown/types.js +5 -0
  112. package/file-input/FileInput.d.ts +4 -0
  113. package/file-input/FileInput.js +479 -0
  114. package/file-input/FileInput.stories.tsx +618 -0
  115. package/file-input/FileInput.test.js +459 -0
  116. package/file-input/FileItem.d.ts +4 -0
  117. package/file-input/FileItem.js +135 -0
  118. package/file-input/types.d.ts +129 -0
  119. package/file-input/types.js +5 -0
  120. package/flex/Flex.d.ts +4 -0
  121. package/flex/Flex.js +57 -0
  122. package/flex/Flex.stories.tsx +112 -0
  123. package/flex/types.d.ts +97 -0
  124. package/flex/types.js +5 -0
  125. package/footer/Footer.d.ts +4 -0
  126. package/footer/Footer.js +125 -0
  127. package/footer/Footer.stories.tsx +152 -0
  128. package/footer/Footer.test.js +85 -0
  129. package/footer/Icons.d.ts +2 -0
  130. package/footer/Icons.js +72 -0
  131. package/footer/types.d.ts +58 -0
  132. package/footer/types.js +5 -0
  133. package/grid/Grid.d.ts +7 -0
  134. package/grid/Grid.js +76 -0
  135. package/grid/Grid.stories.tsx +219 -0
  136. package/grid/types.d.ts +115 -0
  137. package/grid/types.js +5 -0
  138. package/header/Header.d.ts +8 -0
  139. package/header/Header.js +220 -0
  140. package/header/Header.stories.tsx +251 -0
  141. package/header/Header.test.js +66 -0
  142. package/header/Icons.d.ts +2 -0
  143. package/header/Icons.js +29 -0
  144. package/header/types.d.ts +33 -0
  145. package/header/types.js +5 -0
  146. package/heading/Heading.d.ts +4 -0
  147. package/{dist/heading → heading}/Heading.js +34 -119
  148. package/heading/Heading.stories.tsx +54 -0
  149. package/heading/Heading.test.js +169 -0
  150. package/heading/types.d.ts +33 -0
  151. package/heading/types.js +5 -0
  152. package/image/Image.d.ts +4 -0
  153. package/image/Image.js +70 -0
  154. package/image/Image.stories.tsx +127 -0
  155. package/image/types.d.ts +72 -0
  156. package/image/types.js +5 -0
  157. package/inset/Inset.d.ts +3 -0
  158. package/inset/Inset.js +43 -0
  159. package/inset/Inset.stories.tsx +230 -0
  160. package/inset/types.d.ts +37 -0
  161. package/inset/types.js +5 -0
  162. package/layout/ApplicationLayout.d.ts +20 -0
  163. package/layout/ApplicationLayout.js +134 -0
  164. package/layout/ApplicationLayout.stories.tsx +162 -0
  165. package/layout/Icons.d.ts +8 -0
  166. package/layout/Icons.js +58 -0
  167. package/layout/SidenavContext.d.ts +5 -0
  168. package/layout/SidenavContext.js +13 -0
  169. package/layout/types.d.ts +41 -0
  170. package/layout/types.js +5 -0
  171. package/link/Link.d.ts +4 -0
  172. package/link/Link.js +115 -0
  173. package/link/Link.stories.tsx +253 -0
  174. package/link/Link.test.js +63 -0
  175. package/link/types.d.ts +54 -0
  176. package/link/types.js +5 -0
  177. package/main.d.ts +46 -0
  178. package/{dist/main.js → main.js} +140 -115
  179. package/nav-tabs/NavTabs.d.ts +8 -0
  180. package/nav-tabs/NavTabs.js +90 -0
  181. package/nav-tabs/NavTabs.stories.tsx +274 -0
  182. package/nav-tabs/NavTabs.test.js +75 -0
  183. package/nav-tabs/Tab.d.ts +4 -0
  184. package/nav-tabs/Tab.js +117 -0
  185. package/nav-tabs/types.d.ts +52 -0
  186. package/nav-tabs/types.js +5 -0
  187. package/number-input/NumberInput.d.ts +11 -0
  188. package/number-input/NumberInput.js +67 -0
  189. package/number-input/NumberInput.stories.tsx +131 -0
  190. package/number-input/NumberInput.test.js +830 -0
  191. package/number-input/types.d.ts +130 -0
  192. package/number-input/types.js +5 -0
  193. package/package.json +59 -49
  194. package/paginator/Icons.d.ts +5 -0
  195. package/paginator/Icons.js +40 -0
  196. package/paginator/Paginator.d.ts +4 -0
  197. package/paginator/Paginator.js +135 -0
  198. package/paginator/Paginator.stories.tsx +87 -0
  199. package/paginator/Paginator.test.js +335 -0
  200. package/paginator/types.d.ts +38 -0
  201. package/paginator/types.js +5 -0
  202. package/paragraph/Paragraph.d.ts +5 -0
  203. package/paragraph/Paragraph.js +22 -0
  204. package/paragraph/Paragraph.stories.tsx +27 -0
  205. package/password-input/Icons.d.ts +6 -0
  206. package/password-input/Icons.js +35 -0
  207. package/password-input/PasswordInput.d.ts +4 -0
  208. package/password-input/PasswordInput.js +97 -0
  209. package/password-input/PasswordInput.stories.tsx +99 -0
  210. package/password-input/PasswordInput.test.js +198 -0
  211. package/password-input/types.d.ts +111 -0
  212. package/password-input/types.js +5 -0
  213. package/progress-bar/ProgressBar.d.ts +4 -0
  214. package/progress-bar/ProgressBar.js +144 -0
  215. package/progress-bar/ProgressBar.stories.tsx +93 -0
  216. package/progress-bar/ProgressBar.test.js +93 -0
  217. package/progress-bar/types.d.ts +37 -0
  218. package/progress-bar/types.js +5 -0
  219. package/quick-nav/QuickNav.d.ts +4 -0
  220. package/quick-nav/QuickNav.js +94 -0
  221. package/quick-nav/QuickNav.stories.tsx +356 -0
  222. package/quick-nav/types.d.ts +21 -0
  223. package/quick-nav/types.js +5 -0
  224. package/radio-group/Radio.d.ts +4 -0
  225. package/radio-group/Radio.js +124 -0
  226. package/radio-group/RadioGroup.d.ts +4 -0
  227. package/radio-group/RadioGroup.js +235 -0
  228. package/radio-group/RadioGroup.stories.tsx +214 -0
  229. package/radio-group/RadioGroup.test.js +756 -0
  230. package/radio-group/types.d.ts +114 -0
  231. package/radio-group/types.js +5 -0
  232. package/resultset-table/Icons.d.ts +7 -0
  233. package/resultset-table/Icons.js +47 -0
  234. package/resultset-table/ResultsetTable.d.ts +4 -0
  235. package/resultset-table/ResultsetTable.js +159 -0
  236. package/resultset-table/ResultsetTable.stories.tsx +300 -0
  237. package/resultset-table/ResultsetTable.test.js +305 -0
  238. package/resultset-table/types.d.ts +67 -0
  239. package/resultset-table/types.js +5 -0
  240. package/select/Icons.d.ts +10 -0
  241. package/select/Icons.js +89 -0
  242. package/select/Listbox.d.ts +4 -0
  243. package/select/Listbox.js +143 -0
  244. package/select/Option.d.ts +4 -0
  245. package/select/Option.js +80 -0
  246. package/select/Select.d.ts +4 -0
  247. package/select/Select.js +581 -0
  248. package/select/Select.stories.tsx +971 -0
  249. package/select/Select.test.js +2370 -0
  250. package/select/types.d.ts +209 -0
  251. package/select/types.js +5 -0
  252. package/sidenav/Icons.d.ts +7 -0
  253. package/sidenav/Icons.js +47 -0
  254. package/sidenav/Sidenav.d.ts +10 -0
  255. package/sidenav/Sidenav.js +196 -0
  256. package/sidenav/Sidenav.stories.tsx +282 -0
  257. package/sidenav/Sidenav.test.js +37 -0
  258. package/sidenav/types.d.ts +76 -0
  259. package/sidenav/types.js +5 -0
  260. package/slider/Slider.d.ts +4 -0
  261. package/slider/Slider.js +285 -0
  262. package/slider/Slider.test.js +254 -0
  263. package/slider/types.d.ts +86 -0
  264. package/slider/types.js +5 -0
  265. package/spinner/Spinner.d.ts +4 -0
  266. package/spinner/Spinner.js +206 -0
  267. package/spinner/Spinner.stories.tsx +129 -0
  268. package/spinner/Spinner.test.js +55 -0
  269. package/spinner/types.d.ts +32 -0
  270. package/spinner/types.js +5 -0
  271. package/switch/Switch.d.ts +4 -0
  272. package/switch/Switch.js +214 -0
  273. package/switch/Switch.stories.tsx +137 -0
  274. package/switch/Switch.test.js +180 -0
  275. package/switch/types.d.ts +66 -0
  276. package/switch/types.js +5 -0
  277. package/table/Table.d.ts +4 -0
  278. package/table/Table.js +96 -0
  279. package/table/Table.stories.tsx +356 -0
  280. package/table/Table.test.js +21 -0
  281. package/table/types.d.ts +21 -0
  282. package/table/types.js +5 -0
  283. package/tabs/Tab.d.ts +4 -0
  284. package/tabs/Tab.js +113 -0
  285. package/tabs/Tabs.d.ts +4 -0
  286. package/tabs/Tabs.js +385 -0
  287. package/tabs/Tabs.stories.tsx +226 -0
  288. package/tabs/Tabs.test.js +294 -0
  289. package/tabs/types.d.ts +92 -0
  290. package/tabs/types.js +5 -0
  291. package/tag/Tag.d.ts +4 -0
  292. package/tag/Tag.js +151 -0
  293. package/tag/Tag.stories.tsx +155 -0
  294. package/tag/Tag.test.js +49 -0
  295. package/tag/types.d.ts +69 -0
  296. package/tag/types.js +5 -0
  297. package/text-input/Icons.d.ts +8 -0
  298. package/text-input/Icons.js +56 -0
  299. package/text-input/Suggestion.d.ts +4 -0
  300. package/text-input/Suggestion.js +67 -0
  301. package/text-input/Suggestions.d.ts +4 -0
  302. package/text-input/Suggestions.js +84 -0
  303. package/text-input/TextInput.d.ts +4 -0
  304. package/text-input/TextInput.js +578 -0
  305. package/text-input/TextInput.stories.tsx +465 -0
  306. package/text-input/TextInput.test.js +1739 -0
  307. package/text-input/types.d.ts +205 -0
  308. package/text-input/types.js +5 -0
  309. package/textarea/Textarea.d.ts +4 -0
  310. package/textarea/Textarea.js +234 -0
  311. package/textarea/Textarea.stories.tsx +174 -0
  312. package/textarea/Textarea.test.js +406 -0
  313. package/textarea/types.d.ts +141 -0
  314. package/textarea/types.js +5 -0
  315. package/toggle-group/ToggleGroup.d.ts +4 -0
  316. package/toggle-group/ToggleGroup.js +201 -0
  317. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  318. package/toggle-group/ToggleGroup.test.js +137 -0
  319. package/toggle-group/types.d.ts +114 -0
  320. package/toggle-group/types.js +5 -0
  321. package/typography/Typography.d.ts +4 -0
  322. package/typography/Typography.js +23 -0
  323. package/typography/Typography.stories.tsx +198 -0
  324. package/typography/types.d.ts +18 -0
  325. package/typography/types.js +5 -0
  326. package/useTheme.d.ts +1134 -0
  327. package/{dist/useTheme.js → useTheme.js} +4 -11
  328. package/useTranslatedLabels.d.ts +85 -0
  329. package/useTranslatedLabels.js +14 -0
  330. package/utils/BaseTypography.d.ts +21 -0
  331. package/utils/BaseTypography.js +94 -0
  332. package/utils/FocusLock.d.ts +13 -0
  333. package/utils/FocusLock.js +121 -0
  334. package/wizard/Wizard.d.ts +4 -0
  335. package/wizard/Wizard.js +250 -0
  336. package/wizard/Wizard.stories.tsx +253 -0
  337. package/wizard/Wizard.test.js +114 -0
  338. package/wizard/types.d.ts +64 -0
  339. package/wizard/types.js +5 -0
  340. package/babel.config.js +0 -8
  341. package/dist/BackgroundColorContext.js +0 -46
  342. package/dist/ThemeContext.js +0 -216
  343. package/dist/accordion/Accordion.js +0 -356
  344. package/dist/accordion/Accordion.stories.js +0 -207
  345. package/dist/accordion/readme.md +0 -96
  346. package/dist/accordion-group/AccordionGroup.js +0 -188
  347. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  348. package/dist/accordion-group/readme.md +0 -70
  349. package/dist/alert/Alert.js +0 -388
  350. package/dist/alert/Alert.stories.js +0 -158
  351. package/dist/alert/close.svg +0 -4
  352. package/dist/alert/error.svg +0 -4
  353. package/dist/alert/info.svg +0 -4
  354. package/dist/alert/readme.md +0 -43
  355. package/dist/alert/success.svg +0 -4
  356. package/dist/alert/warning.svg +0 -4
  357. package/dist/badge/Badge.js +0 -61
  358. package/dist/box/Box.js +0 -164
  359. package/dist/button/Button.js +0 -228
  360. package/dist/button/Button.stories.js +0 -224
  361. package/dist/button/readme.md +0 -93
  362. package/dist/card/Card.js +0 -247
  363. package/dist/checkbox/Checkbox.js +0 -233
  364. package/dist/checkbox/Checkbox.stories.js +0 -144
  365. package/dist/checkbox/readme.md +0 -116
  366. package/dist/chip/Chip.js +0 -223
  367. package/dist/common/OpenSans.css +0 -81
  368. package/dist/common/RequiredComponent.js +0 -40
  369. package/dist/common/variables.js +0 -919
  370. package/dist/date/Date.js +0 -359
  371. package/dist/date/Date.stories.js +0 -205
  372. package/dist/date/calendar.svg +0 -1
  373. package/dist/date/calendar_dark.svg +0 -1
  374. package/dist/date/readme.md +0 -73
  375. package/dist/dialog/Dialog.js +0 -203
  376. package/dist/dialog/Dialog.stories.js +0 -217
  377. package/dist/dialog/readme.md +0 -32
  378. package/dist/dropdown/Dropdown.js +0 -456
  379. package/dist/dropdown/Dropdown.stories.js +0 -249
  380. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  381. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  382. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  383. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  384. package/dist/dropdown/readme.md +0 -69
  385. package/dist/footer/Footer.js +0 -405
  386. package/dist/footer/Footer.stories.js +0 -94
  387. package/dist/footer/dxc_logo_wht.png +0 -0
  388. package/dist/footer/readme.md +0 -41
  389. package/dist/header/Header.js +0 -431
  390. package/dist/header/Header.stories.js +0 -176
  391. package/dist/header/close_icon.svg +0 -1
  392. package/dist/header/dxc_logo_black.png +0 -0
  393. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  394. package/dist/header/dxc_logo_white.png +0 -0
  395. package/dist/header/hamb_menu_black.svg +0 -1
  396. package/dist/header/hamb_menu_white.svg +0 -1
  397. package/dist/header/readme.md +0 -33
  398. package/dist/input-text/InputText.js +0 -631
  399. package/dist/input-text/InputText.stories.js +0 -209
  400. package/dist/input-text/error.svg +0 -1
  401. package/dist/input-text/readme.md +0 -91
  402. package/dist/layout/ApplicationLayout.js +0 -331
  403. package/dist/layout/facebook.svg +0 -45
  404. package/dist/layout/linkedin.svg +0 -50
  405. package/dist/layout/twitter.svg +0 -53
  406. package/dist/link/Link.js +0 -212
  407. package/dist/link/readme.md +0 -51
  408. package/dist/paginator/Paginator.js +0 -283
  409. package/dist/paginator/images/next.svg +0 -3
  410. package/dist/paginator/images/nextPage.svg +0 -3
  411. package/dist/paginator/images/previous.svg +0 -3
  412. package/dist/paginator/images/previousPage.svg +0 -3
  413. package/dist/paginator/readme.md +0 -50
  414. package/dist/progress-bar/ProgressBar.js +0 -206
  415. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  416. package/dist/progress-bar/readme.md +0 -63
  417. package/dist/radio/Radio.js +0 -190
  418. package/dist/radio/Radio.stories.js +0 -166
  419. package/dist/radio/readme.md +0 -70
  420. package/dist/resultsetTable/ResultsetTable.js +0 -332
  421. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  422. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  423. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  424. package/dist/select/Select.js +0 -490
  425. package/dist/select/Select.stories.js +0 -235
  426. package/dist/select/readme.md +0 -72
  427. package/dist/sidenav/Sidenav.js +0 -183
  428. package/dist/slider/Slider.js +0 -267
  429. package/dist/slider/Slider.stories.js +0 -241
  430. package/dist/slider/readme.md +0 -64
  431. package/dist/spinner/Spinner.js +0 -214
  432. package/dist/spinner/Spinner.stories.js +0 -183
  433. package/dist/spinner/readme.md +0 -65
  434. package/dist/switch/Switch.js +0 -222
  435. package/dist/switch/Switch.stories.js +0 -134
  436. package/dist/switch/readme.md +0 -133
  437. package/dist/table/Table.js +0 -118
  438. package/dist/tabs/Tabs.js +0 -347
  439. package/dist/tabs/Tabs.stories.js +0 -130
  440. package/dist/tabs/readme.md +0 -78
  441. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  442. package/dist/tabs-for-sections/readme.md +0 -78
  443. package/dist/tag/Tag.js +0 -268
  444. package/dist/textarea/Textarea.js +0 -238
  445. package/dist/toggle/Toggle.js +0 -220
  446. package/dist/toggle/Toggle.stories.js +0 -297
  447. package/dist/toggle/readme.md +0 -80
  448. package/dist/toggle-group/ToggleGroup.js +0 -241
  449. package/dist/toggle-group/readme.md +0 -82
  450. package/dist/upload/Upload.js +0 -209
  451. package/dist/upload/Upload.stories.js +0 -72
  452. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  453. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  454. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  455. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -293
  456. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  457. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  458. package/dist/upload/file-upload/FileToUpload.js +0 -162
  459. package/dist/upload/file-upload/audio-icon.svg +0 -4
  460. package/dist/upload/file-upload/close.svg +0 -4
  461. package/dist/upload/file-upload/file-icon.svg +0 -4
  462. package/dist/upload/file-upload/video-icon.svg +0 -4
  463. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  464. package/dist/upload/readme.md +0 -37
  465. package/dist/upload/transaction/Transaction.js +0 -152
  466. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  467. package/dist/upload/transaction/audio-icon.svg +0 -4
  468. package/dist/upload/transaction/error-icon.svg +0 -4
  469. package/dist/upload/transaction/file-icon-err.svg +0 -4
  470. package/dist/upload/transaction/file-icon.svg +0 -4
  471. package/dist/upload/transaction/image-icon-err.svg +0 -4
  472. package/dist/upload/transaction/image-icon.svg +0 -4
  473. package/dist/upload/transaction/success-icon.svg +0 -4
  474. package/dist/upload/transaction/video-icon-err.svg +0 -4
  475. package/dist/upload/transaction/video-icon.svg +0 -4
  476. package/dist/upload/transactions/Transactions.js +0 -122
  477. package/dist/wizard/Wizard.js +0 -383
  478. package/dist/wizard/invalid_icon.svg +0 -6
  479. package/dist/wizard/valid_icon.svg +0 -6
  480. package/dist/wizard/validation-wrong.svg +0 -6
  481. package/test/Accordion.test.js +0 -33
  482. package/test/AccordionGroup.test.js +0 -125
  483. package/test/Alert.test.js +0 -53
  484. package/test/Box.test.js +0 -10
  485. package/test/Button.test.js +0 -18
  486. package/test/Card.test.js +0 -30
  487. package/test/Checkbox.test.js +0 -45
  488. package/test/Chip.test.js +0 -25
  489. package/test/Date.test.js +0 -393
  490. package/test/Dialog.test.js +0 -23
  491. package/test/Dropdown.test.js +0 -130
  492. package/test/Footer.test.js +0 -99
  493. package/test/Header.test.js +0 -39
  494. package/test/Heading.test.js +0 -35
  495. package/test/InputText.test.js +0 -240
  496. package/test/Link.test.js +0 -42
  497. package/test/Paginator.test.js +0 -177
  498. package/test/ProgressBar.test.js +0 -35
  499. package/test/Radio.test.js +0 -37
  500. package/test/ResultsetTable.test.js +0 -330
  501. package/test/Select.test.js +0 -192
  502. package/test/Sidenav.test.js +0 -45
  503. package/test/Slider.test.js +0 -82
  504. package/test/Spinner.test.js +0 -27
  505. package/test/Switch.test.js +0 -45
  506. package/test/Table.test.js +0 -36
  507. package/test/Tabs.test.js +0 -109
  508. package/test/TabsForSections.test.js +0 -34
  509. package/test/Tag.test.js +0 -32
  510. package/test/TextArea.test.js +0 -52
  511. package/test/ToggleGroup.test.js +0 -81
  512. package/test/Upload.test.js +0 -60
  513. package/test/Wizard.test.js +0 -130
  514. package/test/mocks/pngMock.js +0 -1
  515. package/test/mocks/svgMock.js +0 -1
  516. /package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  517. /package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  518. /package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  519. /package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  520. /package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  521. /package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  522. /package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  523. /package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  524. /package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  525. /package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
@@ -1,209 +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 _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _InputText = _interopRequireDefault(require("./InputText"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- var onBlur = (0, _addonActions.action)("onBlur");
28
-
29
- onBlur.toString = function () {
30
- return "onBlurHandler";
31
- };
32
-
33
- var onClickIcon = (0, _addonActions.action)("onClickIcon");
34
-
35
- onClickIcon.toString = function () {
36
- return "onClickIconHandler";
37
- };
38
-
39
- (0, _react2.storiesOf)("Form Components|Text", module).add("Component", function () {
40
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_InputText["default"], {
41
- disabled: false,
42
- label: "Normal Input",
43
- error: false,
44
- value: "Test Value",
45
- onChange: onChange,
46
- onBlur: onBlur,
47
- required: true,
48
- assistiveText: "Assistive Text Here"
49
- }), _react["default"].createElement(_InputText["default"], {
50
- disabled: false,
51
- label: "With Assistive Text",
52
- assistiveText: "Assistive Text Here",
53
- error: true,
54
- onChange: onChange,
55
- onBlur: onBlur,
56
- required: true
57
- }), _react["default"].createElement(_InputText["default"], {
58
- disabled: false,
59
- label: "With Prefix text",
60
- prefijo: "Kg",
61
- onChange: onChange,
62
- onBlur: onBlur,
63
- assistiveText: "Assistive Text Here"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- disabled: true,
66
- label: "With Sufix text",
67
- sufix: "\u20AC",
68
- onChange: onChange,
69
- onBlur: onBlur
70
- }), _react["default"].createElement(_InputText["default"], {
71
- disabled: true,
72
- label: "With Prefix icon",
73
- prefijoIconSrc: _amazon["default"],
74
- onChange: onChange,
75
- onBlur: onBlur,
76
- onClickIcon: onClickIcon
77
- }), _react["default"].createElement(_InputText["default"], {
78
- disabled: true,
79
- label: "With Sufix icon",
80
- sufixIconSrc: _amazon["default"],
81
- onChange: onChange,
82
- onBlur: onBlur,
83
- onClickIcon: onClickIcon
84
- }), _react["default"].createElement(_InputText["default"], {
85
- disabled: false,
86
- label: "With Sufix icon",
87
- sufixIconSrc: _amazon["default"],
88
- onChange: onChange,
89
- onBlur: onBlur,
90
- onClickIcon: onClickIcon
91
- }), _react["default"].createElement(_InputText["default"], {
92
- disabled: false,
93
- label: "Multiline",
94
- multiline: true,
95
- onChange: onChange,
96
- onBlur: onBlur,
97
- onClickIcon: onClickIcon
98
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
99
- style: {
100
- background: "black"
101
- }
102
- }, _react["default"].createElement(_InputText["default"], {
103
- disabled: false,
104
- theme: "dark",
105
- label: "Normal Input",
106
- error: false,
107
- value: "Test Value",
108
- onChange: onChange,
109
- onBlur: onBlur,
110
- required: true,
111
- assistiveText: "Assistive Text Here"
112
- }), _react["default"].createElement(_InputText["default"], {
113
- disabled: false,
114
- theme: "dark",
115
- label: "With Assistive Text",
116
- assistiveText: "Assistive Text Here",
117
- error: true,
118
- onChange: onChange,
119
- onBlur: onBlur,
120
- required: true
121
- }), _react["default"].createElement(_InputText["default"], {
122
- disabled: false,
123
- theme: "dark",
124
- label: "With Prefix text",
125
- prefijo: "Kg",
126
- onChange: onChange,
127
- onBlur: onBlur,
128
- assistiveText: "Assistive Text Here"
129
- }), _react["default"].createElement(_InputText["default"], {
130
- disabled: true,
131
- label: "With Sufix text",
132
- sufix: "\u20AC",
133
- theme: "dark",
134
- onChange: onChange,
135
- onBlur: onBlur
136
- }), _react["default"].createElement(_InputText["default"], {
137
- disabled: false,
138
- theme: "dark",
139
- label: "With Prefix icon",
140
- prefijoIconSrc: _amazon["default"],
141
- onChange: onChange,
142
- onBlur: onBlur,
143
- onClickIcon: onClickIcon
144
- }), _react["default"].createElement(_InputText["default"], {
145
- disabled: false,
146
- theme: "dark",
147
- label: "With Sufix icon",
148
- sufixIconSrc: _amazon["default"],
149
- onChange: onChange,
150
- onBlur: onBlur,
151
- onClickIcon: onClickIcon
152
- }), _react["default"].createElement(_InputText["default"], {
153
- disabled: false,
154
- theme: "dark",
155
- label: "With Sufix icon",
156
- sufixIconSrc: _amazon["default"],
157
- onChange: onChange,
158
- onBlur: onBlur,
159
- onClickIcon: onClickIcon
160
- }), _react["default"].createElement(_InputText["default"], {
161
- disabled: false,
162
- label: "Multiline",
163
- multiline: true,
164
- sufix: "\u20AC",
165
- prefijo: "Kg",
166
- theme: "dark",
167
- onChange: onChange,
168
- onBlur: onBlur,
169
- onClickIcon: onClickIcon
170
- })));
171
- }, {
172
- notes: {
173
- markdown: _readme["default"]
174
- }
175
- });
176
-
177
- var knobProps = function knobProps() {
178
- return {
179
- label: (0, _addonKnobs.text)("Label", "Test Label"),
180
- theme: (0, _addonKnobs.select)("Theme", {
181
- light: "light",
182
- dark: "dark"
183
- }, "light"),
184
- assistiveText: (0, _addonKnobs.text)("Assistive text", "Helper text"),
185
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
186
- prefijo: (0, _addonKnobs.text)("Prefix word", ""),
187
- sufix: (0, _addonKnobs.text)("Sufix word", ""),
188
- required: (0, _addonKnobs["boolean"])("Required", false),
189
- error: (0, _addonKnobs["boolean"])("Error", false),
190
- multiline: (0, _addonKnobs["boolean"])("Multiline", false)
191
- };
192
- };
193
-
194
- (0, _react2.storiesOf)("Form Components|Text", module).add("Knobs example", function () {
195
- var props = knobProps();
196
- return _react["default"].createElement("div", {
197
- style: {
198
- background: props.theme === "dark" && "black" || "transparent"
199
- }
200
- }, _react["default"].createElement(_InputText["default"], (0, _extends2["default"])({}, props, {
201
- onChange: onChange,
202
- onBlur: onBlur,
203
- onClickIcon: onClickIcon
204
- })));
205
- }, {
206
- notes: {
207
- markdown: _readme["default"]
208
- }
209
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" style=""><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/><g class="currentLayer" style=""><title>Layer 1</title><path d="M0 0h24v24H0V0z" fill="transparent" id="svg_1" class="" stroke="transparent" stroke-opacity="1" fill-opacity="1"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" id="svg_2" class="selected" stroke="#eb1a1a" stroke-opacity="1" fill="#FF6161" fill-opacity="1"/></g></svg>
@@ -1,91 +0,0 @@
1
- # DXC Input Text Component
2
-
3
- ## 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>value: string</td>
13
- <td><code></code></td>
14
- <td>The value of the input element.</td>
15
- </tr>
16
- <tr>
17
- <td>label: string</td>
18
- <td></td>
19
- <td>Text to be placed next to the input.</td>
20
- </tr>
21
- <tr>
22
- <td>assistiveText: string</td>
23
- <td></td>
24
- <td>Assistive text to be placed at the bottom of the input.</td>
25
- </tr>
26
- <tr>
27
- <td>prefix: string</td>
28
- <td></td>
29
- <td>A prefix to be placed before the input value. Use prefixIconSrc in case the prefix needs to be an icon.</td>
30
- </tr>
31
- <tr>
32
- <td>suffix: string</td>
33
- <td></td>
34
- <td>A suffix to be placed after the input value. Use suffixIconSrc in case the suffix needs to be an icon.</td>
35
- </tr>
36
- <tr>
37
- <td>prefixIconSrc: string</td>
38
- <td></td>
39
- <td>The path of an icon to be placed before the input value.</td>
40
- </tr>
41
- <tr>
42
- <td>suffixIconSrc: string</td>
43
- <td></td>
44
- <td>The path of an icon to be placed after the input value.</td>
45
- </tr>
46
- <tr>
47
- <td>theme: 'light' | 'dark'</td>
48
- <td><code>'light'</code></td>
49
- <td>Uses one of the available component themes.</td>
50
- </tr>
51
- <tr>
52
- <td>name: string</td>
53
- <td></td>
54
- <td>Name attribute of the input element.</td>
55
- </tr>
56
- <tr>
57
- <td>disabled: boolean</td>
58
- <td><code>false</code></td>
59
- <td>If true, the component will be disabled.</td>
60
- </tr>
61
- <tr>
62
- <td>required: boolean</td>
63
- <td><code>false</code></td>
64
- <td>If true, the input will change its appearence, showing that the value is required.</td>
65
- </tr>
66
- <tr>
67
- <td>invalid: boolean</td>
68
- <td><code>false</code></td>
69
- <td>If true, the input will change its appearence, showing that the value is valid.</td>
70
- </tr>
71
- <tr>
72
- <td>multiline: boolean</td>
73
- <td><code>false</code></td>
74
- <td>If true, a resizable text area will be displayed.</td>
75
- </tr>
76
- <tr>
77
- <td>onChange: function</td>
78
- <td></td>
79
- <td>This function will be called when the user changes the value of the input. The new value will be passed as a parameter.</td>
80
- </tr>
81
- <tr>
82
- <td>onBlur: function</td>
83
- <td></td>
84
- <td>This function will be called when the focus moves away from the input. The input value will be passed as a parameter.</td>
85
- </tr>
86
- <tr>
87
- <td>onClickIcon: function</td>
88
- <td></td>
89
- <td>This function will be called when either of the two icons, prefixIcon or sufixIcon, is clicked.</td>
90
- </tr>
91
- </table>
@@ -1,331 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _main = require("../main");
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _linkedin = _interopRequireDefault(require("./linkedin.svg"));
29
-
30
- var _twitter = _interopRequireDefault(require("./twitter.svg"));
31
-
32
- var _facebook = _interopRequireDefault(require("./facebook.svg"));
33
-
34
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- function _templateObject10() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 2000;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
38
-
39
- _templateObject10 = function _templateObject10() {
40
- return data;
41
- };
42
-
43
- return data;
44
- }
45
-
46
- function _templateObject9() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n height: calc(100vh - 64px);\n left: 279px;\n"]);
48
-
49
- _templateObject9 = function _templateObject9() {
50
- return data;
51
- };
52
-
53
- return data;
54
- }
55
-
56
- function _templateObject8() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
58
-
59
- _templateObject8 = function _templateObject8() {
60
- return data;
61
- };
62
-
63
- return data;
64
- }
65
-
66
- function _templateObject7() {
67
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n position: relative;\n min-height: calc(100vh - 184px);\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
68
-
69
- _templateObject7 = function _templateObject7() {
70
- return data;
71
- };
72
-
73
- return data;
74
- }
75
-
76
- function _templateObject6() {
77
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
78
-
79
- _templateObject6 = function _templateObject6() {
80
- return data;
81
- };
82
-
83
- return data;
84
- }
85
-
86
- function _templateObject5() {
87
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"]);
88
-
89
- _templateObject5 = function _templateObject5() {
90
- return data;
91
- };
92
-
93
- return data;
94
- }
95
-
96
- function _templateObject4() {
97
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex: 1 1 auto;\n align-items: flex-start;\n"]);
98
-
99
- _templateObject4 = function _templateObject4() {
100
- return data;
101
- };
102
-
103
- return data;
104
- }
105
-
106
- function _templateObject3() {
107
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"]);
108
-
109
- _templateObject3 = function _templateObject3() {
110
- return data;
111
- };
112
-
113
- return data;
114
- }
115
-
116
- function _templateObject2() {
117
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
118
-
119
- _templateObject2 = function _templateObject2() {
120
- return data;
121
- };
122
-
123
- return data;
124
- }
125
-
126
- function _templateObject() {
127
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right:0;\n"]);
128
-
129
- _templateObject = function _templateObject() {
130
- return data;
131
- };
132
-
133
- return data;
134
- }
135
-
136
- var year = new Date().getFullYear();
137
-
138
- var Header = function Header(_ref) {
139
- var children = _ref.children;
140
- return _react["default"].createElement(_react["default"].Fragment, null, children);
141
- };
142
-
143
- var Main = function Main(_ref2) {
144
- var children = _ref2.children;
145
- return _react["default"].createElement(_react["default"].Fragment, null, children);
146
- };
147
-
148
- var Footer = function Footer(_ref3) {
149
- var children = _ref3.children;
150
- return _react["default"].createElement(_react["default"].Fragment, null, children);
151
- };
152
-
153
- var SideNav = function SideNav(props) {
154
- var displayArrow = props.displayArrow,
155
- mode = props.mode,
156
- childProps = (0, _objectWithoutProperties2["default"])(props, ["displayArrow", "mode"]);
157
- return _react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
158
- };
159
-
160
- SideNav.propTypes = {
161
- mode: _propTypes["default"].oneOf(["overlay", "push", ""]),
162
- displayArrow: _propTypes["default"].bool,
163
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
164
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
165
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
166
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
167
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
168
- })])
169
- };
170
-
171
- var defaultFooter = function defaultFooter() {
172
- return _react["default"].createElement(_main.DxcFooter, {
173
- copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
174
- bottomLinks: [{
175
- href: "https://www.linkedin.com/company/dxctechnology",
176
- text: "Linkedin"
177
- }, {
178
- href: "https://twitter.com/dxctechnology",
179
- text: "Twitter"
180
- }, {
181
- href: "https://www.facebook.com/DXCTechnology/",
182
- text: "Facebook"
183
- }],
184
- socialLinks: [{
185
- href: "https://www.linkedin.com/company/dxctechnology",
186
- logoSrc: _linkedin["default"]
187
- }, {
188
- href: "https://twitter.com/dxctechnology",
189
- logoSrc: _twitter["default"]
190
- }, {
191
- href: "https://www.facebook.com/DXCTechnology/",
192
- logoSrc: _facebook["default"]
193
- }]
194
- });
195
- };
196
-
197
- var defaultHeader = function defaultHeader() {
198
- return _react["default"].createElement(_main.DxcHeader, {
199
- underlined: true
200
- });
201
- };
202
-
203
- var childTypeExists = function childTypeExists(children, childType) {
204
- return children.find(function (child) {
205
- return child && child.type && child.type === childType;
206
- });
207
- };
208
-
209
- var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
210
- var children = _ref4.children;
211
- var ref = (0, _react.useRef)(null);
212
- var colorsTheme = (0, _useTheme["default"])();
213
-
214
- var _useState = (0, _react.useState)(true),
215
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
216
- isSideNavVisible = _useState2[0],
217
- setIsSideNavVisible = _useState2[1];
218
-
219
- var _useState3 = (0, _react.useState)(),
220
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
221
- isResponsive = _useState4[0],
222
- setIsResponsive = _useState4[1];
223
-
224
- var childrenArray = _react["default"].Children.toArray(children);
225
-
226
- var header = childTypeExists(childrenArray, _main.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
227
- var footer = childTypeExists(childrenArray, _main.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
228
- var sideNav = childTypeExists(childrenArray, SideNav);
229
- var main = childTypeExists(childrenArray, Main);
230
- var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
231
- var sideNavMode = sideNav && sideNav.props && sideNav.props.mode;
232
-
233
- var ArrowIcon = function ArrowIcon() {
234
- return _react["default"].createElement("svg", {
235
- xmlns: "http://www.w3.org/2000/svg",
236
- width: "15.995",
237
- height: "10.01",
238
- viewBox: "0 0 15.995 10.01"
239
- }, _react["default"].createElement("path", {
240
- "data-testid": "arrow-to-right",
241
- d: "M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z",
242
- transform: "translate(-2 -6.996)"
243
- }));
244
- };
245
-
246
- var handleResize = function handleResize(width) {
247
- if (width) {
248
- if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
249
- setIsSideNavVisible(true);
250
- }
251
- };
252
-
253
- var handleEventListener = function handleEventListener() {
254
- handleResize(ref.current.offsetWidth);
255
- };
256
-
257
- (0, _react.useEffect)(function () {
258
- if (ref.current) {
259
- window.addEventListener("resize", handleEventListener);
260
- handleResize(ref.current.offsetWidth);
261
- }
262
-
263
- return function () {
264
- window.removeEventListener("resize", handleEventListener);
265
- };
266
- }, []);
267
-
268
- var handleSidenav = function handleSidenav() {
269
- setIsSideNavVisible(!isSideNavVisible);
270
- };
271
-
272
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
273
- theme: colorsTheme.sidenav
274
- }, _react["default"].createElement(ApplicationLayoutContainer, {
275
- ref: ref
276
- }, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
277
- isSideNavVisible: isSideNavVisible
278
- }, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
279
- tabIndex: 0,
280
- onClick: handleSidenav,
281
- isSideNavVisible: isSideNavVisible
282
- }, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
283
- sideNav: sideNav,
284
- mode: isResponsive ? "overlay" : sideNavMode,
285
- isSideNavVisible: isSideNavVisible
286
- }, main), _react["default"].createElement(FooterContainer, {
287
- sideNav: sideNav,
288
- mode: isResponsive ? "overlay" : sideNavMode,
289
- isSideNavVisible: isSideNavVisible
290
- }, footer))))));
291
- };
292
-
293
- DxcApplicationLayout.Header = Header;
294
- DxcApplicationLayout.Main = Main;
295
- DxcApplicationLayout.Footer = Footer;
296
- DxcApplicationLayout.SideNav = SideNav;
297
-
298
- var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject());
299
-
300
- var HeaderContainer = _styledComponents["default"].div(_templateObject2());
301
-
302
- var BodyContainer = _styledComponents["default"].div(_templateObject3());
303
-
304
- var ContentContainer = _styledComponents["default"].div(_templateObject4());
305
-
306
- var MainBodyContainer = _styledComponents["default"].div(_templateObject5());
307
-
308
- var FooterContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
309
- return props.sideNav ? props.mode === "push" && !props.isSideNavVisible || props.mode === "overlay" ? "-300px" : "" : "";
310
- });
311
-
312
- var MainContent = _styledComponents["default"].div(_templateObject7(), function (props) {
313
- return props.sideNav ? props.mode === "push" && props.isSideNavVisible ? "" : "-297px" : "";
314
- });
315
-
316
- var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
317
- return props.isSideNavVisible ? "translateX(0)" : !props.isSideNavVisible ? "translateX(-100%)" : "";
318
- });
319
-
320
- var ArrowContainer = _styledComponents["default"].div(_templateObject9());
321
-
322
- var ArrowTrigger = _styledComponents["default"].div(_templateObject10(), function (props) {
323
- return "".concat(props.theme.arrowContainerColor);
324
- }, function (props) {
325
- return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
326
- }, function (props) {
327
- return props.theme.arrowColor;
328
- });
329
-
330
- var _default = DxcApplicationLayout;
331
- exports["default"] = _default;
@@ -1,45 +0,0 @@
1
- <?xml version="1.0" encoding="iso-8859-1"?>
2
- <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="438.536px" height="438.536px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
6
- xml:space="preserve" fill="#FFFFFF">
7
- <g>
8
- <path d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
9
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
10
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
11
- C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
12
- c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
13
- c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"/>
14
- </g>
15
- <g>
16
- </g>
17
- <g>
18
- </g>
19
- <g>
20
- </g>
21
- <g>
22
- </g>
23
- <g>
24
- </g>
25
- <g>
26
- </g>
27
- <g>
28
- </g>
29
- <g>
30
- </g>
31
- <g>
32
- </g>
33
- <g>
34
- </g>
35
- <g>
36
- </g>
37
- <g>
38
- </g>
39
- <g>
40
- </g>
41
- <g>
42
- </g>
43
- <g>
44
- </g>
45
- </svg>