@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fd5a25e

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 (462) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +226 -0
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +169 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/AccordionGroup.test.js +151 -0
  15. package/accordion-group/types.d.ts +72 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +47 -157
  19. package/alert/Alert.stories.tsx +170 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +116 -0
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +43 -0
  37. package/box/types.js +5 -0
  38. package/button/Button.d.ts +4 -0
  39. package/{dist/button → button}/Button.js +34 -98
  40. package/button/Button.stories.tsx +274 -0
  41. package/button/Button.test.js +35 -0
  42. package/button/types.d.ts +53 -0
  43. package/button/types.js +5 -0
  44. package/card/Card.d.ts +4 -0
  45. package/card/Card.js +161 -0
  46. package/card/Card.stories.tsx +201 -0
  47. package/card/Card.test.js +50 -0
  48. package/card/ice-cream.jpg +0 -0
  49. package/card/types.d.ts +67 -0
  50. package/card/types.js +5 -0
  51. package/checkbox/Checkbox.d.ts +4 -0
  52. package/{dist/checkbox → checkbox}/Checkbox.js +55 -98
  53. package/checkbox/Checkbox.stories.tsx +188 -0
  54. package/checkbox/Checkbox.test.js +78 -0
  55. package/checkbox/types.d.ts +64 -0
  56. package/checkbox/types.js +5 -0
  57. package/chip/Chip.d.ts +4 -0
  58. package/chip/Chip.js +161 -0
  59. package/chip/Chip.stories.tsx +119 -0
  60. package/chip/Chip.test.js +56 -0
  61. package/chip/types.d.ts +45 -0
  62. package/chip/types.js +5 -0
  63. package/{dist/common → common}/OpenSans.css +0 -0
  64. package/{dist/common → common}/RequiredComponent.js +3 -11
  65. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  68. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  75. package/{dist/common → common}/utils.js +0 -0
  76. package/{dist/common → common}/variables.js +524 -421
  77. package/date-input/DateInput.d.ts +4 -0
  78. package/date-input/DateInput.js +372 -0
  79. package/date-input/DateInput.stories.tsx +138 -0
  80. package/date-input/DateInput.test.js +479 -0
  81. package/date-input/types.d.ts +107 -0
  82. package/date-input/types.js +5 -0
  83. package/dialog/Dialog.d.ts +4 -0
  84. package/dialog/Dialog.js +138 -0
  85. package/dialog/Dialog.stories.tsx +212 -0
  86. package/dialog/Dialog.test.js +40 -0
  87. package/dialog/types.d.ts +43 -0
  88. package/dialog/types.js +5 -0
  89. package/dropdown/Dropdown.d.ts +4 -0
  90. package/{dist/dropdown → dropdown}/Dropdown.js +60 -218
  91. package/dropdown/Dropdown.stories.tsx +249 -0
  92. package/dropdown/Dropdown.test.js +189 -0
  93. package/dropdown/types.d.ts +80 -0
  94. package/dropdown/types.js +5 -0
  95. package/file-input/FileInput.d.ts +4 -0
  96. package/file-input/FileInput.js +593 -0
  97. package/file-input/FileInput.stories.tsx +507 -0
  98. package/file-input/FileInput.test.js +457 -0
  99. package/file-input/FileItem.d.ts +14 -0
  100. package/file-input/FileItem.js +186 -0
  101. package/file-input/types.d.ts +112 -0
  102. package/file-input/types.js +5 -0
  103. package/footer/Footer.d.ts +4 -0
  104. package/footer/Footer.js +185 -0
  105. package/footer/Footer.stories.tsx +130 -0
  106. package/footer/Footer.test.js +109 -0
  107. package/footer/Icons.d.ts +2 -0
  108. package/footer/Icons.js +77 -0
  109. package/footer/types.d.ts +65 -0
  110. package/footer/types.js +5 -0
  111. package/header/Header.d.ts +7 -0
  112. package/header/Header.js +303 -0
  113. package/header/Header.stories.tsx +172 -0
  114. package/header/Header.test.js +79 -0
  115. package/header/Icons.d.ts +2 -0
  116. package/header/Icons.js +34 -0
  117. package/header/types.d.ts +47 -0
  118. package/header/types.js +5 -0
  119. package/heading/Heading.d.ts +4 -0
  120. package/{dist/heading → heading}/Heading.js +31 -90
  121. package/heading/Heading.stories.tsx +54 -0
  122. package/heading/Heading.test.js +186 -0
  123. package/heading/types.d.ts +33 -0
  124. package/heading/types.js +5 -0
  125. package/inline/Inline.d.ts +4 -0
  126. package/inline/Inline.js +60 -0
  127. package/inline/Inline.stories.tsx +319 -0
  128. package/inline/types.d.ts +36 -0
  129. package/inline/types.js +5 -0
  130. package/inset/Inset.d.ts +3 -0
  131. package/inset/Inset.js +51 -0
  132. package/inset/Inset.stories.tsx +229 -0
  133. package/inset/types.d.ts +37 -0
  134. package/inset/types.js +5 -0
  135. package/layout/ApplicationLayout.d.ts +11 -0
  136. package/layout/ApplicationLayout.js +199 -0
  137. package/layout/ApplicationLayout.stories.tsx +126 -0
  138. package/layout/Icons.d.ts +5 -0
  139. package/layout/Icons.js +66 -0
  140. package/layout/SidenavContext.d.ts +5 -0
  141. package/layout/SidenavContext.js +19 -0
  142. package/layout/types.d.ts +52 -0
  143. package/layout/types.js +5 -0
  144. package/link/Link.d.ts +4 -0
  145. package/link/Link.js +136 -0
  146. package/link/Link.stories.tsx +186 -0
  147. package/link/Link.test.js +83 -0
  148. package/link/types.d.ts +54 -0
  149. package/link/types.js +5 -0
  150. package/list/List.d.ts +4 -0
  151. package/list/List.js +47 -0
  152. package/list/List.stories.tsx +89 -0
  153. package/list/types.d.ts +7 -0
  154. package/list/types.js +5 -0
  155. package/main.d.ts +48 -0
  156. package/{dist/main.js → main.js} +151 -101
  157. package/number-input/NumberInput.d.ts +4 -0
  158. package/number-input/NumberInput.js +76 -0
  159. package/number-input/NumberInput.stories.tsx +115 -0
  160. package/number-input/NumberInput.test.js +506 -0
  161. package/number-input/NumberInputContext.d.ts +4 -0
  162. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
  163. package/number-input/numberInputContextTypes.d.ts +19 -0
  164. package/number-input/numberInputContextTypes.js +5 -0
  165. package/number-input/types.d.ts +124 -0
  166. package/number-input/types.js +5 -0
  167. package/package.json +39 -27
  168. package/paginator/Icons.js +66 -0
  169. package/paginator/Paginator.d.ts +4 -0
  170. package/paginator/Paginator.js +171 -0
  171. package/paginator/Paginator.stories.tsx +63 -0
  172. package/paginator/Paginator.test.js +308 -0
  173. package/paginator/types.d.ts +38 -0
  174. package/paginator/types.js +5 -0
  175. package/password-input/PasswordInput.d.ts +4 -0
  176. package/{dist/password/Password.js → password-input/PasswordInput.js} +48 -82
  177. package/password-input/PasswordInput.stories.tsx +131 -0
  178. package/password-input/PasswordInput.test.js +180 -0
  179. package/password-input/types.d.ts +110 -0
  180. package/password-input/types.js +5 -0
  181. package/progress-bar/ProgressBar.d.ts +4 -0
  182. package/{dist/progress-bar → progress-bar}/ProgressBar.js +23 -95
  183. package/progress-bar/ProgressBar.stories.jsx +58 -0
  184. package/progress-bar/ProgressBar.test.js +65 -0
  185. package/progress-bar/types.d.ts +37 -0
  186. package/progress-bar/types.js +5 -0
  187. package/quick-nav/QuickNav.d.ts +4 -0
  188. package/quick-nav/QuickNav.js +116 -0
  189. package/quick-nav/QuickNav.stories.tsx +264 -0
  190. package/quick-nav/types.d.ts +21 -0
  191. package/quick-nav/types.js +5 -0
  192. package/radio-group/Radio.d.ts +4 -0
  193. package/radio-group/Radio.js +141 -0
  194. package/radio-group/RadioGroup.d.ts +4 -0
  195. package/radio-group/RadioGroup.js +283 -0
  196. package/radio-group/RadioGroup.stories.tsx +100 -0
  197. package/radio-group/RadioGroup.test.js +695 -0
  198. package/radio-group/types.d.ts +114 -0
  199. package/radio-group/types.js +5 -0
  200. package/resultsetTable/ResultsetTable.d.ts +4 -0
  201. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  202. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  203. package/resultsetTable/ResultsetTable.test.js +348 -0
  204. package/resultsetTable/types.d.ts +67 -0
  205. package/resultsetTable/types.js +5 -0
  206. package/row/Row.d.ts +3 -0
  207. package/row/Row.js +127 -0
  208. package/row/Row.stories.tsx +237 -0
  209. package/row/types.d.ts +28 -0
  210. package/row/types.js +5 -0
  211. package/select/Icons.d.ts +10 -0
  212. package/select/Icons.js +93 -0
  213. package/select/Listbox.d.ts +4 -0
  214. package/select/Listbox.js +175 -0
  215. package/select/Option.d.ts +4 -0
  216. package/select/Option.js +110 -0
  217. package/select/Select.d.ts +4 -0
  218. package/select/Select.js +660 -0
  219. package/select/Select.stories.tsx +626 -0
  220. package/select/Select.test.js +2162 -0
  221. package/select/types.d.ts +212 -0
  222. package/select/types.js +5 -0
  223. package/sidenav/Sidenav.d.ts +9 -0
  224. package/sidenav/Sidenav.js +147 -0
  225. package/sidenav/Sidenav.stories.tsx +182 -0
  226. package/sidenav/Sidenav.test.js +56 -0
  227. package/sidenav/types.d.ts +50 -0
  228. package/sidenav/types.js +5 -0
  229. package/slider/Slider.d.ts +4 -0
  230. package/slider/Slider.js +318 -0
  231. package/slider/Slider.stories.tsx +177 -0
  232. package/slider/Slider.test.js +150 -0
  233. package/slider/types.d.ts +82 -0
  234. package/slider/types.js +5 -0
  235. package/spinner/Spinner.d.ts +4 -0
  236. package/spinner/Spinner.js +250 -0
  237. package/spinner/Spinner.stories.jsx +103 -0
  238. package/spinner/Spinner.test.js +64 -0
  239. package/spinner/types.d.ts +32 -0
  240. package/spinner/types.js +5 -0
  241. package/stack/Stack.d.ts +4 -0
  242. package/stack/Stack.js +56 -0
  243. package/stack/Stack.stories.tsx +263 -0
  244. package/stack/types.d.ts +32 -0
  245. package/stack/types.js +5 -0
  246. package/switch/Switch.d.ts +4 -0
  247. package/switch/Switch.js +195 -0
  248. package/switch/Switch.stories.tsx +160 -0
  249. package/switch/Switch.test.js +98 -0
  250. package/switch/types.d.ts +62 -0
  251. package/switch/types.js +5 -0
  252. package/table/Table.d.ts +4 -0
  253. package/{dist/table → table}/Table.js +12 -26
  254. package/table/Table.stories.jsx +277 -0
  255. package/table/Table.test.js +26 -0
  256. package/table/types.d.ts +21 -0
  257. package/table/types.js +5 -0
  258. package/tabs/Tabs.d.ts +4 -0
  259. package/tabs/Tabs.js +211 -0
  260. package/tabs/Tabs.stories.tsx +112 -0
  261. package/tabs/Tabs.test.js +140 -0
  262. package/tabs/types.d.ts +82 -0
  263. package/tabs/types.js +5 -0
  264. package/tabs-nav/NavTabs.d.ts +8 -0
  265. package/tabs-nav/NavTabs.js +125 -0
  266. package/tabs-nav/NavTabs.stories.tsx +170 -0
  267. package/tabs-nav/NavTabs.test.js +82 -0
  268. package/tabs-nav/Tab.d.ts +4 -0
  269. package/tabs-nav/Tab.js +132 -0
  270. package/tabs-nav/types.d.ts +53 -0
  271. package/tabs-nav/types.js +5 -0
  272. package/tag/Tag.d.ts +4 -0
  273. package/tag/Tag.js +183 -0
  274. package/tag/Tag.stories.tsx +142 -0
  275. package/tag/Tag.test.js +60 -0
  276. package/tag/types.d.ts +69 -0
  277. package/tag/types.js +5 -0
  278. package/text/Text.d.ts +7 -0
  279. package/text/Text.js +30 -0
  280. package/text/Text.stories.tsx +19 -0
  281. package/text-input/Suggestion.d.ts +4 -0
  282. package/text-input/Suggestion.js +55 -0
  283. package/text-input/TextInput.d.ts +4 -0
  284. package/text-input/TextInput.js +770 -0
  285. package/text-input/TextInput.stories.tsx +474 -0
  286. package/text-input/TextInput.test.js +1712 -0
  287. package/text-input/types.d.ts +178 -0
  288. package/text-input/types.js +5 -0
  289. package/textarea/Textarea.d.ts +4 -0
  290. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +88 -157
  291. package/textarea/Textarea.stories.jsx +157 -0
  292. package/textarea/Textarea.test.js +437 -0
  293. package/textarea/types.d.ts +137 -0
  294. package/textarea/types.js +5 -0
  295. package/toggle-group/ToggleGroup.d.ts +4 -0
  296. package/toggle-group/ToggleGroup.js +215 -0
  297. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  298. package/toggle-group/ToggleGroup.test.js +156 -0
  299. package/toggle-group/types.d.ts +105 -0
  300. package/toggle-group/types.js +5 -0
  301. package/useTheme.d.ts +2 -0
  302. package/{dist/useTheme.js → useTheme.js} +2 -2
  303. package/useTranslatedLabels.d.ts +2 -0
  304. package/useTranslatedLabels.js +20 -0
  305. package/wizard/Wizard.d.ts +4 -0
  306. package/wizard/Wizard.js +292 -0
  307. package/wizard/Wizard.stories.tsx +214 -0
  308. package/wizard/Wizard.test.js +141 -0
  309. package/wizard/types.d.ts +64 -0
  310. package/wizard/types.js +5 -0
  311. package/README.md +0 -66
  312. package/babel.config.js +0 -8
  313. package/dist/BackgroundColorContext.js +0 -46
  314. package/dist/ThemeContext.js +0 -241
  315. package/dist/accordion/Accordion.js +0 -353
  316. package/dist/accordion-group/AccordionGroup.js +0 -188
  317. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  318. package/dist/accordion-group/readme.md +0 -70
  319. package/dist/badge/Badge.js +0 -63
  320. package/dist/box/Box.js +0 -156
  321. package/dist/card/Card.js +0 -254
  322. package/dist/checkbox/Checkbox.stories.js +0 -144
  323. package/dist/checkbox/readme.md +0 -116
  324. package/dist/chip/Chip.js +0 -265
  325. package/dist/date/Date.js +0 -381
  326. package/dist/date/Date.stories.js +0 -205
  327. package/dist/date/readme.md +0 -73
  328. package/dist/dialog/Dialog.js +0 -218
  329. package/dist/footer/Footer.js +0 -395
  330. package/dist/footer/Footer.stories.js +0 -94
  331. package/dist/footer/dxc_logo.svg +0 -15
  332. package/dist/footer/readme.md +0 -41
  333. package/dist/header/Header.js +0 -403
  334. package/dist/header/Header.stories.js +0 -176
  335. package/dist/header/close_icon.svg +0 -1
  336. package/dist/header/dxc_logo_black.svg +0 -8
  337. package/dist/header/hamb_menu_black.svg +0 -1
  338. package/dist/header/hamb_menu_white.svg +0 -1
  339. package/dist/header/readme.md +0 -33
  340. package/dist/input-text/InputText.js +0 -707
  341. package/dist/input-text/InputText.stories.js +0 -209
  342. package/dist/input-text/error.svg +0 -1
  343. package/dist/input-text/readme.md +0 -91
  344. package/dist/layout/ApplicationLayout.js +0 -331
  345. package/dist/layout/facebook.svg +0 -45
  346. package/dist/layout/linkedin.svg +0 -50
  347. package/dist/layout/twitter.svg +0 -53
  348. package/dist/link/Link.js +0 -241
  349. package/dist/link/readme.md +0 -51
  350. package/dist/new-date/NewDate.js +0 -403
  351. package/dist/new-input-text/NewInputText.js +0 -961
  352. package/dist/number/Number.js +0 -138
  353. package/dist/paginator/Paginator.js +0 -289
  354. package/dist/paginator/images/next.svg +0 -3
  355. package/dist/paginator/images/nextPage.svg +0 -3
  356. package/dist/paginator/images/previous.svg +0 -3
  357. package/dist/paginator/images/previousPage.svg +0 -3
  358. package/dist/paginator/readme.md +0 -50
  359. package/dist/password/styles.css +0 -3
  360. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  361. package/dist/progress-bar/readme.md +0 -63
  362. package/dist/radio/Radio.js +0 -209
  363. package/dist/radio/Radio.stories.js +0 -166
  364. package/dist/radio/readme.md +0 -70
  365. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  366. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  367. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  368. package/dist/select/Select.js +0 -585
  369. package/dist/select/Select.stories.js +0 -235
  370. package/dist/select/readme.md +0 -72
  371. package/dist/sidenav/Sidenav.js +0 -177
  372. package/dist/slider/Slider.js +0 -319
  373. package/dist/slider/Slider.stories.js +0 -241
  374. package/dist/slider/readme.md +0 -64
  375. package/dist/spinner/Spinner.js +0 -218
  376. package/dist/spinner/Spinner.stories.js +0 -183
  377. package/dist/spinner/readme.md +0 -65
  378. package/dist/switch/Switch.js +0 -222
  379. package/dist/switch/Switch.stories.js +0 -134
  380. package/dist/switch/readme.md +0 -133
  381. package/dist/tabs/Tabs.js +0 -343
  382. package/dist/tabs/Tabs.stories.js +0 -130
  383. package/dist/tabs/readme.md +0 -78
  384. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  385. package/dist/tabs-for-sections/readme.md +0 -78
  386. package/dist/tag/Tag.js +0 -288
  387. package/dist/textarea/Textarea.js +0 -264
  388. package/dist/toggle/Toggle.js +0 -220
  389. package/dist/toggle/Toggle.stories.js +0 -297
  390. package/dist/toggle/readme.md +0 -80
  391. package/dist/toggle-group/ToggleGroup.js +0 -223
  392. package/dist/upload/Upload.js +0 -205
  393. package/dist/upload/Upload.stories.js +0 -72
  394. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  395. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  396. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  397. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  398. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  399. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  400. package/dist/upload/file-upload/FileToUpload.js +0 -184
  401. package/dist/upload/file-upload/audio-icon.svg +0 -4
  402. package/dist/upload/file-upload/close.svg +0 -4
  403. package/dist/upload/file-upload/file-icon.svg +0 -4
  404. package/dist/upload/file-upload/video-icon.svg +0 -4
  405. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  406. package/dist/upload/readme.md +0 -37
  407. package/dist/upload/transaction/Transaction.js +0 -175
  408. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  409. package/dist/upload/transaction/audio-icon.svg +0 -4
  410. package/dist/upload/transaction/error-icon.svg +0 -4
  411. package/dist/upload/transaction/file-icon-err.svg +0 -4
  412. package/dist/upload/transaction/file-icon.svg +0 -4
  413. package/dist/upload/transaction/image-icon-err.svg +0 -4
  414. package/dist/upload/transaction/image-icon.svg +0 -4
  415. package/dist/upload/transaction/success-icon.svg +0 -4
  416. package/dist/upload/transaction/video-icon-err.svg +0 -4
  417. package/dist/upload/transaction/video-icon.svg +0 -4
  418. package/dist/upload/transactions/Transactions.js +0 -138
  419. package/dist/wizard/Wizard.js +0 -411
  420. package/dist/wizard/invalid_icon.svg +0 -5
  421. package/dist/wizard/valid_icon.svg +0 -5
  422. package/dist/wizard/validation-wrong.svg +0 -6
  423. package/test/Accordion.test.js +0 -33
  424. package/test/AccordionGroup.test.js +0 -125
  425. package/test/Alert.test.js +0 -53
  426. package/test/Box.test.js +0 -10
  427. package/test/Button.test.js +0 -18
  428. package/test/Card.test.js +0 -30
  429. package/test/Checkbox.test.js +0 -45
  430. package/test/Chip.test.js +0 -25
  431. package/test/Date.test.js +0 -393
  432. package/test/Dialog.test.js +0 -23
  433. package/test/Dropdown.test.js +0 -145
  434. package/test/Footer.test.js +0 -99
  435. package/test/Header.test.js +0 -39
  436. package/test/Heading.test.js +0 -35
  437. package/test/InputText.test.js +0 -240
  438. package/test/Link.test.js +0 -43
  439. package/test/NewDate.test.js +0 -203
  440. package/test/NewInputText.test.js +0 -817
  441. package/test/NewTextarea.test.js +0 -201
  442. package/test/Number.test.js +0 -241
  443. package/test/Paginator.test.js +0 -177
  444. package/test/Password.test.js +0 -76
  445. package/test/ProgressBar.test.js +0 -35
  446. package/test/Radio.test.js +0 -37
  447. package/test/ResultsetTable.test.js +0 -330
  448. package/test/Select.test.js +0 -189
  449. package/test/Sidenav.test.js +0 -45
  450. package/test/Slider.test.js +0 -82
  451. package/test/Spinner.test.js +0 -27
  452. package/test/Switch.test.js +0 -45
  453. package/test/Table.test.js +0 -36
  454. package/test/Tabs.test.js +0 -109
  455. package/test/TabsForSections.test.js +0 -34
  456. package/test/Tag.test.js +0 -32
  457. package/test/TextArea.test.js +0 -52
  458. package/test/ToggleGroup.test.js +0 -81
  459. package/test/Upload.test.js +0 -60
  460. package/test/Wizard.test.js +0 -130
  461. package/test/mocks/pngMock.js +0 -1
  462. package/test/mocks/svgMock.js +0 -1
@@ -1,403 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
29
-
30
- var _close_icon = _interopRequireDefault(require("./close_icon.svg"));
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
37
-
38
- function _templateObject12() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: ", ";\n opacity: ", " !important;\n visibility: ", ";\n opacity: ", ";\n display: ", ";\n transition: opacity 0.2s 0.2s ease-in-out;\n z-index: ", ";\n"]);
40
-
41
- _templateObject12 = function _templateObject12() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject11() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n :focus {\n outline: ", " auto 1px;\n }\n"]);
50
-
51
- _templateObject11 = function _templateObject11() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject10() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 100%;\n margin-top: 40px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"]);
60
-
61
- _templateObject10 = function _templateObject10() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject9() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-evenly;\n background-color: ", ";\n position: fixed;\n top: 0;\n right: 0;\n z-index: ", ";\n width: ", ";\n height: 100vh;\n padding: 20px;\n transform: ", ";\n opacity: ", ";\n transition-property: transform, opacity;\n transition-duration: 0.6s;\n transition-timing-function: ease-in-out;\n box-sizing: border-box;\n\n & > img:first-of-type {\n position: absolute;\n top: 23px;\n left: 20px;\n }\n\n & > img:last-of-type {\n position: fixed;\n top: 23px;\n right: 20px;\n width: 24px;\n height: 24px;\n padding: ", ";\n }\n"]);
70
-
71
- _templateObject9 = function _templateObject9() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject8() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-grow: 1;\n"]);
80
-
81
- _templateObject8 = function _templateObject8() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject7() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n text-transform: ", ";\n font-weight: ", ";\n color: ", ";\n"]);
90
-
91
- _templateObject7 = function _templateObject7() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject6() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 54px;\n cursor: pointer;\n :hover {\n background-color: ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n & > svg {\n fill: ", ";\n }\n"]);
100
-
101
- _templateObject6 = function _templateObject6() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject5() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: calc(100% - 186px);\n display: flex;\n align-items: center;\n flex-grow: 1;\n justify-content: flex-end;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"]);
110
-
111
- _templateObject5 = function _templateObject5() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject4() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n vertical-align: middle;\n"]);
120
-
121
- _templateObject4 = function _templateObject4() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function _templateObject3() {
129
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"]);
130
-
131
- _templateObject3 = function _templateObject3() {
132
- return data;
133
- };
134
-
135
- return data;
136
- }
137
-
138
- function _templateObject2() {
139
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", ";\n\n &.MuiAppBar-colorPrimary {\n background-color: ", ";\n border-bottom: ", ";\n\n &.MuiPaper-elevation4 {\n box-shadow: none;\n }\n .ChildComponents {\n display: flex;\n align-items: center;\n }\n }\n & {\n min-height: ", ";\n }\n &.MuiAppBar-root {\n flex-direction: row;\n align-items: center;\n padding: ", ";\n justify-content: space-between;\n }\n"]);
140
-
141
- _templateObject2 = function _templateObject2() {
142
- return data;
143
- };
144
-
145
- return data;
146
- }
147
-
148
- function _templateObject() {
149
- var data = (0, _taggedTemplateLiteral2["default"])(["\n button {\n background-color: transparent;\n :hover {\n background-color: transparent;\n }\n }\n"]);
150
-
151
- _templateObject = function _templateObject() {
152
- return data;
153
- };
154
-
155
- return data;
156
- }
157
-
158
- var Dropdown = function Dropdown(props) {
159
- return _react["default"].createElement(HeaderDropdown, null, _react["default"].createElement(_Dropdown["default"], props));
160
- };
161
-
162
- var HeaderDropdown = _styledComponents["default"].div(_templateObject());
163
-
164
- var DxcHeader = function DxcHeader(_ref) {
165
- var _ref$underlined = _ref.underlined,
166
- underlined = _ref$underlined === void 0 ? false : _ref$underlined,
167
- _ref$logoSrc = _ref.logoSrc,
168
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
169
- onClick = _ref.onClick,
170
- content = _ref.content,
171
- responsiveContent = _ref.responsiveContent,
172
- margin = _ref.margin,
173
- padding = _ref.padding,
174
- _ref$tabIndex = _ref.tabIndex,
175
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
176
- var colorsTheme = (0, _useTheme["default"])();
177
- var ref = (0, _react.useRef)(null);
178
-
179
- var _useState = (0, _react.useState)(),
180
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
181
- refSize = _useState2[0],
182
- setRefSize = _useState2[1];
183
-
184
- var _useState3 = (0, _react.useState)(),
185
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
186
- isResponsive = _useState4[0],
187
- setIsResponsive = _useState4[1];
188
-
189
- var _useState5 = (0, _react.useState)(false),
190
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
191
- isMenuVisible = _useState6[0],
192
- setIsMenuVisible = _useState6[1];
193
-
194
- var handleResize = function handleResize(refWidth) {
195
- if (refWidth) {
196
- setRefSize(refWidth);
197
-
198
- if (refWidth <= _variables.responsiveSizes.tablet && !isResponsive) {
199
- setIsResponsive(true);
200
- } else {
201
- setIsResponsive(false);
202
- }
203
- }
204
- };
205
-
206
- var handleMenu = function handleMenu() {
207
- if (isResponsive && !isMenuVisible) {
208
- setIsMenuVisible(!isMenuVisible);
209
- } else {
210
- setIsMenuVisible(!isMenuVisible);
211
- }
212
- };
213
-
214
- var getLogoRendered = function getLogoRendered(intoMenu) {
215
- return _react["default"].createElement(LogoIcon, {
216
- logoSrc: logoSrc,
217
- src: intoMenu && logoSrc === "default" ? colorsTheme.header.logoResponsive : !intoMenu && logoSrc === "default" ? colorsTheme.header.logo : logoSrc
218
- });
219
- };
220
-
221
- var handleEventListener = function handleEventListener() {
222
- handleResize(ref.current.offsetWidth);
223
- };
224
-
225
- (0, _react.useEffect)(function () {
226
- if (ref.current) {
227
- window.addEventListener("resize", handleEventListener);
228
- handleResize(ref.current.offsetWidth);
229
- }
230
-
231
- return function () {
232
- window.removeEventListener("resize", handleEventListener);
233
- };
234
- }, []);
235
-
236
- var HamburgerIcon = function HamburgerIcon() {
237
- return _react["default"].createElement("svg", {
238
- xmlns: "http://www.w3.org/2000/svg",
239
- viewBox: "0 0 24 24",
240
- width: "24",
241
- height: "24"
242
- }, _react["default"].createElement("path", {
243
- d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
244
- }));
245
- };
246
-
247
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
248
- theme: colorsTheme.header
249
- }, _react["default"].createElement(HeaderContainer, {
250
- underlined: underlined,
251
- position: "static",
252
- margin: margin,
253
- ref: ref
254
- }, _react["default"].createElement(LogoAnchor, {
255
- tabIndex: typeof onClick === "function" ? tabIndex : -1,
256
- interactuable: typeof onClick === "function",
257
- onClick: onClick
258
- }, getLogoRendered(false)), isResponsive && responsiveContent && _react["default"].createElement(MainContainer, null, _react["default"].createElement(ChildContainer, {
259
- padding: padding
260
- }, _react["default"].createElement(HamburguerItem, {
261
- tabIndex: tabIndex,
262
- underlined: underlined,
263
- onClick: handleMenu
264
- }, _react["default"].createElement(HamburgerIcon, null), _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
265
- hasVisibility: isMenuVisible,
266
- refSize: refSize
267
- }, getLogoRendered(true), _react["default"].createElement(MenuContent, null, responsiveContent(handleMenu)), _react["default"].createElement(CloseContainer, {
268
- tabIndex: tabIndex,
269
- onClick: handleMenu,
270
- src: _close_icon["default"],
271
- className: "closeIcon"
272
- })), _react["default"].createElement(Overlay, {
273
- onClick: handleMenu,
274
- hasVisibility: isMenuVisible,
275
- refSize: refSize
276
- }))), !isResponsive && _react["default"].createElement(ChildContainer, {
277
- padding: padding
278
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
279
- color: colorsTheme.header.backgroundColor
280
- }, content))));
281
- };
282
-
283
- DxcHeader.Dropdown = Dropdown;
284
- var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_templateObject2(), function (props) {
285
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
286
- }, function (props) {
287
- return props.theme.backgroundColor;
288
- }, function (props) {
289
- return props.underlined && "".concat(props.theme.underlinedThickness, " ").concat(props.theme.underlinedStyle, " ").concat(props.theme.underlinedColor);
290
- }, function (props) {
291
- return props.theme.minHeight;
292
- }, function (props) {
293
- return "".concat(props.theme.paddingTop, " ").concat(props.theme.paddingRight, " ").concat(props.theme.paddingBottom, " ").concat(props.theme.paddingLeft);
294
- });
295
-
296
- var LogoAnchor = _styledComponents["default"].a(_templateObject3(), function (props) {
297
- if (!props.interactuable) {
298
- return "cursor: default; outline:none;";
299
- } else {
300
- return "cursor: pointer;";
301
- }
302
- });
303
-
304
- var LogoIcon = _styledComponents["default"].img(_templateObject4(), function (props) {
305
- return props.theme.logoHeight;
306
- }, function (props) {
307
- return props.theme.logoWidth;
308
- });
309
-
310
- var ChildContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
311
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
312
- }, function (props) {
313
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
314
- }, function (props) {
315
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
316
- }, function (props) {
317
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
318
- }, function (props) {
319
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
320
- });
321
-
322
- var HamburguerItem = _styledComponents["default"].div(_templateObject6(), function (props) {
323
- return props.theme.hamburguerHoverColor;
324
- }, function (props) {
325
- return props.theme.hamburguerFocusColor;
326
- }, function (props) {
327
- return props.theme.hamburguerIconColor;
328
- });
329
-
330
- var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), function (props) {
331
- return props.theme.hamburguerFontFamily;
332
- }, function (props) {
333
- return props.theme.hamburguerFontStyle;
334
- }, function (props) {
335
- return props.theme.hamburguerFontSize;
336
- }, function (props) {
337
- return props.theme.hamburguerTextTransform;
338
- }, function (props) {
339
- return props.theme.hamburguerFontWeight;
340
- }, function (props) {
341
- return props.theme.hamburguerFontColor;
342
- });
343
-
344
- var MainContainer = _styledComponents["default"].div(_templateObject8());
345
-
346
- var ResponsiveMenu = _styledComponents["default"].div(_templateObject9(), function (props) {
347
- return props.theme.menuBackgroundColor;
348
- }, function (props) {
349
- return props.theme.menuZindex;
350
- }, function (props) {
351
- return props.refSize <= _variables.responsiveSizes.laptop && props.refSize > _variables.responsiveSizes.mobileLarge ? "".concat(function (props) {
352
- return props.theme.menuTabletWidth;
353
- }) : "".concat(function (props) {
354
- return props.theme.menuMobileWidth;
355
- });
356
- }, function (props) {
357
- return props.hasVisibility ? "translateX(0)" : "translateX(100vw)";
358
- }, function (props) {
359
- return props.hasVisibility ? "1" : "0.96";
360
- }, _variables.spaces.xxsmall);
361
-
362
- var MenuContent = _styledComponents["default"].div(_templateObject10());
363
-
364
- var CloseContainer = _styledComponents["default"].img(_templateObject11(), function (props) {
365
- return props.theme.hamburguerFocusColor;
366
- });
367
-
368
- var Overlay = _styledComponents["default"].div(_templateObject12(), function (props) {
369
- return props.theme.overlayColor;
370
- }, function (props) {
371
- return props.theme.overlayOpacity;
372
- }, function (props) {
373
- return props.hasVisibility ? "visible" : "hidden";
374
- }, function (props) {
375
- return props.hasVisibility ? "1" : "0";
376
- }, function (props) {
377
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "none" : "";
378
- }, function (props) {
379
- return props.theme.overlayZindex;
380
- });
381
-
382
- DxcHeader.propTypes = {
383
- logoSrc: _propTypes["default"].string,
384
- underlined: _propTypes["default"].bool,
385
- onClick: _propTypes["default"].func,
386
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
387
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
388
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
389
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
390
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
391
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
392
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
393
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
394
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
395
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
396
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
397
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
398
- content: _propTypes["default"].object,
399
- responsiveContent: _propTypes["default"].func,
400
- tabIndex: _propTypes["default"].number
401
- };
402
- var _default = DxcHeader;
403
- exports["default"] = _default;
@@ -1,176 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Header = _interopRequireDefault(require("./Header"));
18
-
19
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
20
-
21
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
22
-
23
- var selectOption = function selectOption(option) {
24
- console.log(option);
25
- };
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
- var onClick = (0, _addonActions.action)("headerLogo Clicked");
29
- var optionsWithoutIcon = [{
30
- value: 1,
31
- label: "Amazon"
32
- }, {
33
- value: 2,
34
- label: "Ebay"
35
- }, {
36
- value: 3,
37
- label: "Apple"
38
- }];
39
- (0, _react2.storiesOf)("Form Components|Header", module).add("Component", function () {
40
- return _react["default"].createElement("div", {
41
- style: {
42
- background: "lightgrey"
43
- }
44
- }, _react["default"].createElement("div", null, _react["default"].createElement("div", {
45
- style: {
46
- marginBottom: "20px"
47
- }
48
- }, _react["default"].createElement(_Header["default"], {
49
- theme: "light",
50
- underlined: false,
51
- onClick: onClick
52
- }, _react["default"].createElement(_Dropdown["default"], {
53
- theme: "light",
54
- onSelectOption: selectOption,
55
- options: optionsWithoutIcon
56
- }), _react["default"].createElement(_Dropdown["default"], {
57
- theme: "light",
58
- onSelectOption: selectOption,
59
- label: "Dropdown",
60
- options: optionsWithoutIcon
61
- }), _react["default"].createElement(_Switch["default"], {
62
- checked: false,
63
- label: "Switch component",
64
- labelPosition: "after",
65
- theme: "dark",
66
- onChange: onChange
67
- }))), _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
68
- theme: "light",
69
- underlined: true,
70
- onClick: onClick
71
- }, _react["default"].createElement(_Dropdown["default"], {
72
- theme: "light",
73
- onSelectOption: selectOption,
74
- options: optionsWithoutIcon,
75
- mode: "outlined"
76
- }), _react["default"].createElement(_Dropdown["default"], {
77
- theme: "light",
78
- onSelectOption: selectOption,
79
- label: "Dropdown",
80
- options: optionsWithoutIcon,
81
- mode: "outlined"
82
- }), _react["default"].createElement(_Switch["default"], {
83
- checked: false,
84
- label: "Switch component",
85
- labelPosition: "after",
86
- theme: "light",
87
- onChange: onChange
88
- })))), _react["default"].createElement("div", {
89
- style: {
90
- paddingTop: "20px",
91
- height: "200px"
92
- }
93
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
94
- theme: "dark",
95
- underlined: false
96
- }, _react["default"].createElement(_Dropdown["default"], {
97
- theme: "dark",
98
- onSelectOption: selectOption,
99
- options: optionsWithoutIcon,
100
- mode: "basic"
101
- }), _react["default"].createElement(_Dropdown["default"], {
102
- theme: "dark",
103
- onSelectOption: selectOption,
104
- label: "Dropdown",
105
- options: optionsWithoutIcon,
106
- mode: "basic"
107
- }), _react["default"].createElement(_Switch["default"], {
108
- checked: false,
109
- label: "Switch component",
110
- labelPosition: "after",
111
- theme: "light",
112
- onChange: onChange
113
- }))), _react["default"].createElement("div", {
114
- style: {
115
- marginTop: "20px"
116
- }
117
- }, _react["default"].createElement(_Header["default"], {
118
- theme: "dark",
119
- underlined: true
120
- }, _react["default"].createElement(_Dropdown["default"], {
121
- theme: "dark",
122
- onSelectOption: selectOption,
123
- options: optionsWithoutIcon,
124
- mode: "outlined"
125
- }), _react["default"].createElement(_Dropdown["default"], {
126
- theme: "dark",
127
- onSelectOption: selectOption,
128
- label: "Dropdown",
129
- options: optionsWithoutIcon,
130
- mode: "outlined"
131
- }), _react["default"].createElement(_Switch["default"], {
132
- checked: false,
133
- label: "Switch component",
134
- labelPosition: "after",
135
- theme: "dark",
136
- onChange: onChange
137
- })))));
138
- }, {
139
- notes: {
140
- markdown: _readme["default"]
141
- }
142
- });
143
-
144
- var knobProps = function knobProps() {
145
- return {
146
- theme: (0, _addonKnobs.select)("Theme", {
147
- light: "light",
148
- dark: "dark"
149
- }, "light"),
150
- underlined: (0, _addonKnobs["boolean"])("Underlined", false)
151
- };
152
- };
153
-
154
- (0, _react2.storiesOf)("Form Components|Header", module).add("Knobs example", function () {
155
- var props = knobProps();
156
- return _react["default"].createElement("div", {
157
- style: {
158
- height: "250px",
159
- background: props.theme === "dark" && "black" || "transparent"
160
- }
161
- }, _react["default"].createElement(_Header["default"], props, _react["default"].createElement(_Dropdown["default"], {
162
- theme: props.theme,
163
- mode: props.underlined ? "outlined" : "basic",
164
- onSelectOption: selectOption,
165
- options: optionsWithoutIcon,
166
- label: "Dropdown"
167
- })), _react["default"].createElement("div", {
168
- style: {
169
- marginTop: "20px"
170
- }
171
- }, _react["default"].createElement(_Header["default"], props)));
172
- }, {
173
- notes: {
174
- markdown: _readme["default"]
175
- }
176
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,8 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
2
- <g id="g10" transform="translate(0)">
3
- <g id="g12">
4
- <path id="path14" d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322" transform="translate(-21.028 65.555)" fill="#100f0d"/>
5
- <path id="path16" d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978" transform="translate(-21.049 88.739)" fill="#100f0d"/>
6
- </g>
7
- </g>
8
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="black"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="white"/></svg>
@@ -1,33 +0,0 @@
1
- # DXC Header 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>theme: 'light' | 'dark'</td>
13
- <td><code>'light'</code></td>
14
- <td>Uses one of the available component themes.</td>
15
- </tr>
16
- <tr>
17
- <td>underline: boolean</td>
18
- <td><code>false</code></td>
19
- <td>Wether a contrast line should appear at the bottom of the header.</td>
20
- </tr>
21
- <tr>
22
- <td>logoSrc: string</td>
23
- <td><code>'default'</code></td>
24
- <td>The path of an icon to replace the theme logo.</td>
25
- </tr>
26
- <tr>
27
- <td>onClick: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the header logo.<br>
30
- </td>
31
- </tr>
32
- </table>
33
-