@dxc-technology/halstack-react 0.0.0-9d656a4 → 0.0.0-9d82cb9

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 (434) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/ThemeContext.d.ts +15 -0
  4. package/ThemeContext.js +243 -0
  5. package/V3Select/V3Select.js +455 -0
  6. package/V3Select/index.d.ts +27 -0
  7. package/V3Textarea/V3Textarea.js +260 -0
  8. package/V3Textarea/index.d.ts +27 -0
  9. package/accordion/Accordion.d.ts +4 -0
  10. package/accordion/Accordion.js +258 -0
  11. package/accordion/Accordion.stories.tsx +307 -0
  12. package/accordion/types.d.ts +68 -0
  13. package/accordion/types.js +5 -0
  14. package/accordion-group/AccordionGroup.d.ts +7 -0
  15. package/accordion-group/AccordionGroup.js +170 -0
  16. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  17. package/accordion-group/types.d.ts +72 -0
  18. package/accordion-group/types.js +5 -0
  19. package/alert/Alert.d.ts +4 -0
  20. package/alert/Alert.js +290 -0
  21. package/alert/Alert.stories.tsx +170 -0
  22. package/alert/types.d.ts +49 -0
  23. package/alert/types.js +5 -0
  24. package/badge/Badge.js +59 -0
  25. package/bleed/Bleed.d.ts +3 -0
  26. package/bleed/Bleed.js +84 -0
  27. package/bleed/Bleed.stories.tsx +342 -0
  28. package/bleed/types.d.ts +13 -0
  29. package/bleed/types.js +5 -0
  30. package/box/Box.d.ts +4 -0
  31. package/box/Box.js +126 -0
  32. package/box/Box.stories.tsx +132 -0
  33. package/box/types.d.ts +43 -0
  34. package/box/types.js +5 -0
  35. package/button/Button.d.ts +4 -0
  36. package/button/Button.js +171 -0
  37. package/button/Button.stories.tsx +274 -0
  38. package/button/types.d.ts +53 -0
  39. package/button/types.js +5 -0
  40. package/card/Card.d.ts +4 -0
  41. package/card/Card.js +164 -0
  42. package/card/Card.stories.tsx +201 -0
  43. package/card/ice-cream.jpg +0 -0
  44. package/card/types.d.ts +67 -0
  45. package/card/types.js +5 -0
  46. package/checkbox/Checkbox.d.ts +4 -0
  47. package/checkbox/Checkbox.js +253 -0
  48. package/checkbox/Checkbox.stories.tsx +192 -0
  49. package/checkbox/types.d.ts +60 -0
  50. package/checkbox/types.js +5 -0
  51. package/chip/Chip.d.ts +4 -0
  52. package/chip/Chip.js +199 -0
  53. package/chip/Chip.stories.tsx +121 -0
  54. package/chip/types.d.ts +53 -0
  55. package/chip/types.js +5 -0
  56. package/{dist/common → common}/OpenSans.css +0 -0
  57. package/{dist/common → common}/RequiredComponent.js +5 -19
  58. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  59. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  60. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  61. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  62. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  63. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  64. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  65. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  68. package/common/utils.js +22 -0
  69. package/common/variables.js +1612 -0
  70. package/{dist/date → date}/Date.js +87 -70
  71. package/date/index.d.ts +27 -0
  72. package/date-input/DateInput.d.ts +4 -0
  73. package/date-input/DateInput.js +358 -0
  74. package/date-input/DateInput.stories.tsx +138 -0
  75. package/date-input/types.d.ts +100 -0
  76. package/date-input/types.js +5 -0
  77. package/dialog/Dialog.d.ts +4 -0
  78. package/dialog/Dialog.js +166 -0
  79. package/dialog/Dialog.stories.tsx +212 -0
  80. package/dialog/types.d.ts +43 -0
  81. package/dialog/types.js +5 -0
  82. package/dropdown/Dropdown.d.ts +4 -0
  83. package/dropdown/Dropdown.js +417 -0
  84. package/dropdown/Dropdown.stories.tsx +247 -0
  85. package/dropdown/types.d.ts +89 -0
  86. package/dropdown/types.js +5 -0
  87. package/file-input/FileInput.d.ts +4 -0
  88. package/file-input/FileInput.js +590 -0
  89. package/file-input/FileInput.stories.tsx +507 -0
  90. package/file-input/FileItem.d.ts +14 -0
  91. package/file-input/FileItem.js +184 -0
  92. package/file-input/types.d.ts +112 -0
  93. package/file-input/types.js +5 -0
  94. package/footer/Footer.d.ts +4 -0
  95. package/footer/Footer.js +260 -0
  96. package/footer/Footer.stories.tsx +130 -0
  97. package/footer/Icons.d.ts +2 -0
  98. package/footer/Icons.js +77 -0
  99. package/footer/types.d.ts +65 -0
  100. package/footer/types.js +5 -0
  101. package/header/Header.d.ts +7 -0
  102. package/header/Header.js +324 -0
  103. package/header/Header.stories.tsx +162 -0
  104. package/header/Icons.d.ts +2 -0
  105. package/header/Icons.js +34 -0
  106. package/header/types.d.ts +47 -0
  107. package/header/types.js +5 -0
  108. package/heading/Heading.d.ts +4 -0
  109. package/heading/Heading.js +159 -0
  110. package/heading/Heading.stories.tsx +54 -0
  111. package/heading/types.d.ts +33 -0
  112. package/heading/types.js +5 -0
  113. package/input-text/Icons.js +22 -0
  114. package/input-text/InputText.js +611 -0
  115. package/input-text/index.d.ts +36 -0
  116. package/inset/Inset.d.ts +3 -0
  117. package/inset/Inset.js +84 -0
  118. package/inset/Inset.stories.tsx +229 -0
  119. package/inset/types.d.ts +13 -0
  120. package/inset/types.js +5 -0
  121. package/layout/ApplicationLayout.d.ts +10 -0
  122. package/layout/ApplicationLayout.js +225 -0
  123. package/layout/ApplicationLayout.stories.tsx +171 -0
  124. package/layout/Icons.js +55 -0
  125. package/layout/types.d.ts +57 -0
  126. package/layout/types.js +5 -0
  127. package/link/Link.d.ts +3 -0
  128. package/link/Link.js +161 -0
  129. package/link/Link.stories.tsx +146 -0
  130. package/link/types.d.ts +74 -0
  131. package/link/types.js +5 -0
  132. package/list/List.d.ts +8 -0
  133. package/list/List.js +47 -0
  134. package/list/List.stories.tsx +95 -0
  135. package/main.d.ts +48 -0
  136. package/{dist/main.js → main.js} +165 -49
  137. package/number-input/NumberInput.d.ts +4 -0
  138. package/number-input/NumberInput.js +83 -0
  139. package/number-input/NumberInput.stories.tsx +115 -0
  140. package/number-input/NumberInputContext.d.ts +4 -0
  141. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +6 -2
  142. package/number-input/numberInputContextTypes.d.ts +19 -0
  143. package/number-input/numberInputContextTypes.js +5 -0
  144. package/number-input/types.d.ts +117 -0
  145. package/number-input/types.js +5 -0
  146. package/package.json +39 -23
  147. package/paginator/Icons.js +66 -0
  148. package/paginator/Paginator.d.ts +4 -0
  149. package/paginator/Paginator.js +192 -0
  150. package/paginator/Paginator.stories.tsx +63 -0
  151. package/paginator/types.d.ts +38 -0
  152. package/paginator/types.js +5 -0
  153. package/password-input/PasswordInput.d.ts +4 -0
  154. package/password-input/PasswordInput.js +163 -0
  155. package/password-input/PasswordInput.stories.tsx +131 -0
  156. package/password-input/types.d.ts +107 -0
  157. package/password-input/types.js +5 -0
  158. package/progress-bar/ProgressBar.d.ts +4 -0
  159. package/progress-bar/ProgressBar.js +170 -0
  160. package/progress-bar/ProgressBar.stories.jsx +58 -0
  161. package/progress-bar/types.d.ts +37 -0
  162. package/progress-bar/types.js +5 -0
  163. package/radio/Radio.d.ts +4 -0
  164. package/radio/Radio.js +174 -0
  165. package/radio/Radio.stories.tsx +192 -0
  166. package/radio/types.d.ts +54 -0
  167. package/radio/types.js +5 -0
  168. package/radio-group/Radio.d.ts +4 -0
  169. package/radio-group/Radio.js +130 -0
  170. package/radio-group/RadioGroup.d.ts +4 -0
  171. package/radio-group/RadioGroup.js +268 -0
  172. package/radio-group/RadioGroup.stories.tsx +79 -0
  173. package/radio-group/types.d.ts +36 -0
  174. package/radio-group/types.js +5 -0
  175. package/resultsetTable/ResultsetTable.d.ts +4 -0
  176. package/resultsetTable/ResultsetTable.js +251 -0
  177. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  178. package/resultsetTable/types.d.ts +67 -0
  179. package/resultsetTable/types.js +5 -0
  180. package/row/Row.d.ts +11 -0
  181. package/row/Row.js +127 -0
  182. package/row/Row.stories.tsx +239 -0
  183. package/select/Select.d.ts +4 -0
  184. package/select/Select.js +863 -0
  185. package/select/Select.stories.tsx +572 -0
  186. package/select/types.d.ts +170 -0
  187. package/select/types.js +5 -0
  188. package/sidenav/Sidenav.d.ts +9 -0
  189. package/sidenav/Sidenav.js +136 -0
  190. package/sidenav/Sidenav.stories.tsx +182 -0
  191. package/sidenav/types.d.ts +50 -0
  192. package/sidenav/types.js +5 -0
  193. package/slider/Slider.d.ts +4 -0
  194. package/slider/Slider.js +317 -0
  195. package/slider/Slider.stories.tsx +177 -0
  196. package/slider/types.d.ts +78 -0
  197. package/slider/types.js +5 -0
  198. package/spinner/Spinner.d.ts +4 -0
  199. package/spinner/Spinner.js +250 -0
  200. package/spinner/Spinner.stories.jsx +103 -0
  201. package/spinner/types.d.ts +32 -0
  202. package/spinner/types.js +5 -0
  203. package/stack/Stack.d.ts +10 -0
  204. package/stack/Stack.js +97 -0
  205. package/stack/Stack.stories.tsx +166 -0
  206. package/switch/Switch.d.ts +4 -0
  207. package/switch/Switch.js +179 -0
  208. package/switch/Switch.stories.tsx +160 -0
  209. package/switch/types.d.ts +58 -0
  210. package/switch/types.js +5 -0
  211. package/table/Table.d.ts +4 -0
  212. package/table/Table.js +118 -0
  213. package/table/Table.stories.jsx +277 -0
  214. package/table/types.d.ts +21 -0
  215. package/table/types.js +5 -0
  216. package/tabs/Tabs.d.ts +4 -0
  217. package/tabs/Tabs.js +213 -0
  218. package/tabs/Tabs.stories.tsx +122 -0
  219. package/tabs/types.d.ts +70 -0
  220. package/tabs/types.js +5 -0
  221. package/tag/Tag.d.ts +4 -0
  222. package/tag/Tag.js +193 -0
  223. package/tag/Tag.stories.tsx +145 -0
  224. package/tag/types.d.ts +60 -0
  225. package/tag/types.js +5 -0
  226. package/text/Text.d.ts +7 -0
  227. package/text/Text.js +30 -0
  228. package/text/Text.stories.tsx +19 -0
  229. package/text-input/TextInput.d.ts +4 -0
  230. package/text-input/TextInput.js +794 -0
  231. package/text-input/TextInput.stories.tsx +456 -0
  232. package/text-input/types.d.ts +159 -0
  233. package/text-input/types.js +5 -0
  234. package/textarea/Textarea.d.ts +4 -0
  235. package/textarea/Textarea.js +284 -0
  236. package/textarea/Textarea.stories.jsx +136 -0
  237. package/textarea/types.d.ts +130 -0
  238. package/textarea/types.js +5 -0
  239. package/{dist/toggle → toggle}/Toggle.js +30 -67
  240. package/toggle/index.d.ts +21 -0
  241. package/toggle-group/ToggleGroup.d.ts +4 -0
  242. package/toggle-group/ToggleGroup.js +214 -0
  243. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  244. package/toggle-group/types.d.ts +97 -0
  245. package/toggle-group/types.js +5 -0
  246. package/{dist/upload → upload}/Upload.js +23 -22
  247. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  248. package/upload/buttons-upload/Icons.js +40 -0
  249. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  250. package/upload/dragAndDropArea/Icons.js +39 -0
  251. package/upload/file-upload/FileToUpload.js +115 -0
  252. package/upload/file-upload/Icons.js +66 -0
  253. package/upload/files-upload/FilesToUpload.js +109 -0
  254. package/upload/index.d.ts +15 -0
  255. package/upload/transaction/Icons.js +160 -0
  256. package/upload/transaction/Transaction.js +104 -0
  257. package/upload/transactions/Transactions.js +94 -0
  258. package/useTheme.d.ts +2 -0
  259. package/useTheme.js +22 -0
  260. package/wizard/Wizard.d.ts +4 -0
  261. package/wizard/Wizard.js +281 -0
  262. package/wizard/Wizard.stories.tsx +224 -0
  263. package/wizard/types.d.ts +60 -0
  264. package/wizard/types.js +5 -0
  265. package/README.md +0 -66
  266. package/babel.config.js +0 -4
  267. package/dist/accordion/Accordion.js +0 -248
  268. package/dist/accordion/Accordion.stories.js +0 -207
  269. package/dist/accordion/readme.md +0 -96
  270. package/dist/alert/Alert.js +0 -304
  271. package/dist/alert/Alert.stories.js +0 -158
  272. package/dist/alert/close.svg +0 -4
  273. package/dist/alert/error.svg +0 -4
  274. package/dist/alert/info.svg +0 -4
  275. package/dist/alert/readme.md +0 -43
  276. package/dist/alert/success.svg +0 -4
  277. package/dist/alert/warning.svg +0 -4
  278. package/dist/box/Box.js +0 -148
  279. package/dist/button/Button.js +0 -181
  280. package/dist/button/Button.stories.js +0 -224
  281. package/dist/button/readme.md +0 -93
  282. package/dist/card/Card.js +0 -217
  283. package/dist/checkbox/Checkbox.js +0 -240
  284. package/dist/checkbox/Checkbox.stories.js +0 -144
  285. package/dist/checkbox/readme.md +0 -116
  286. package/dist/chip/Chip.js +0 -173
  287. package/dist/common/services/example-service.js +0 -10
  288. package/dist/common/services/example-service.test.js +0 -12
  289. package/dist/common/utils.js +0 -42
  290. package/dist/common/variables.js +0 -434
  291. package/dist/date/Date.stories.js +0 -205
  292. package/dist/date/calendar.svg +0 -1
  293. package/dist/date/calendar_dark.svg +0 -1
  294. package/dist/date/readme.md +0 -73
  295. package/dist/dialog/Dialog.js +0 -197
  296. package/dist/dialog/Dialog.stories.js +0 -217
  297. package/dist/dialog/readme.md +0 -32
  298. package/dist/dropdown/Dropdown.js +0 -416
  299. package/dist/dropdown/Dropdown.stories.js +0 -249
  300. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  301. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  302. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  303. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  304. package/dist/dropdown/readme.md +0 -69
  305. package/dist/footer/Footer.js +0 -346
  306. package/dist/footer/Footer.stories.js +0 -94
  307. package/dist/footer/dxc_logo_wht.png +0 -0
  308. package/dist/footer/readme.md +0 -41
  309. package/dist/header/Header.js +0 -360
  310. package/dist/header/Header.stories.js +0 -176
  311. package/dist/header/close_icon.svg +0 -1
  312. package/dist/header/dxc_logo_black.png +0 -0
  313. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  314. package/dist/header/dxc_logo_white.png +0 -0
  315. package/dist/header/hamb_menu_black.svg +0 -1
  316. package/dist/header/hamb_menu_white.svg +0 -1
  317. package/dist/header/readme.md +0 -33
  318. package/dist/heading/Heading.js +0 -153
  319. package/dist/input-text/InputText.js +0 -519
  320. package/dist/input-text/InputText.stories.js +0 -209
  321. package/dist/input-text/error.svg +0 -1
  322. package/dist/input-text/readme.md +0 -91
  323. package/dist/layout/ApplicationLayout.js +0 -333
  324. package/dist/layout/facebook.svg +0 -45
  325. package/dist/layout/linkedin.svg +0 -50
  326. package/dist/layout/twitter.svg +0 -53
  327. package/dist/link/Link.js +0 -168
  328. package/dist/link/readme.md +0 -51
  329. package/dist/paginator/Paginator.js +0 -196
  330. package/dist/paginator/images/next.svg +0 -3
  331. package/dist/paginator/images/nextPage.svg +0 -3
  332. package/dist/paginator/images/previous.svg +0 -3
  333. package/dist/paginator/images/previousPage.svg +0 -3
  334. package/dist/paginator/readme.md +0 -50
  335. package/dist/progress-bar/ProgressBar.js +0 -185
  336. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  337. package/dist/progress-bar/readme.md +0 -63
  338. package/dist/radio/Radio.js +0 -195
  339. package/dist/radio/Radio.stories.js +0 -166
  340. package/dist/radio/readme.md +0 -70
  341. package/dist/resultsetTable/ResultsetTable.js +0 -333
  342. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  343. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  344. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  345. package/dist/select/Select.js +0 -453
  346. package/dist/select/Select.stories.js +0 -235
  347. package/dist/select/readme.md +0 -72
  348. package/dist/sidenav/Sidenav.js +0 -69
  349. package/dist/slider/Slider.js +0 -266
  350. package/dist/slider/Slider.stories.js +0 -241
  351. package/dist/slider/readme.md +0 -64
  352. package/dist/spinner/Spinner.js +0 -193
  353. package/dist/spinner/Spinner.stories.js +0 -183
  354. package/dist/spinner/readme.md +0 -65
  355. package/dist/switch/Switch.js +0 -199
  356. package/dist/switch/Switch.stories.js +0 -134
  357. package/dist/switch/readme.md +0 -133
  358. package/dist/table/Table.js +0 -105
  359. package/dist/tabs/Tabs.js +0 -172
  360. package/dist/tabs/Tabs.stories.js +0 -130
  361. package/dist/tabs/readme.md +0 -78
  362. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  363. package/dist/tabs-for-sections/readme.md +0 -78
  364. package/dist/tag/Tag.js +0 -234
  365. package/dist/textarea/Textarea.js +0 -227
  366. package/dist/toggle/Toggle.stories.js +0 -297
  367. package/dist/toggle/readme.md +0 -80
  368. package/dist/toggle-group/ToggleGroup.js +0 -214
  369. package/dist/toggle-group/readme.md +0 -82
  370. package/dist/upload/Upload.stories.js +0 -72
  371. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  372. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  373. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  374. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  375. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  376. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  377. package/dist/upload/file-upload/FileToUpload.js +0 -158
  378. package/dist/upload/file-upload/audio-icon.svg +0 -4
  379. package/dist/upload/file-upload/close.svg +0 -4
  380. package/dist/upload/file-upload/file-icon.svg +0 -4
  381. package/dist/upload/file-upload/video-icon.svg +0 -4
  382. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  383. package/dist/upload/readme.md +0 -37
  384. package/dist/upload/transaction/Transaction.js +0 -155
  385. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  386. package/dist/upload/transaction/audio-icon.svg +0 -4
  387. package/dist/upload/transaction/error-icon.svg +0 -4
  388. package/dist/upload/transaction/file-icon-err.svg +0 -4
  389. package/dist/upload/transaction/file-icon.svg +0 -4
  390. package/dist/upload/transaction/image-icon-err.svg +0 -4
  391. package/dist/upload/transaction/image-icon.svg +0 -4
  392. package/dist/upload/transaction/success-icon.svg +0 -4
  393. package/dist/upload/transaction/video-icon-err.svg +0 -4
  394. package/dist/upload/transaction/video-icon.svg +0 -4
  395. package/dist/upload/transactions/Transactions.js +0 -120
  396. package/dist/wizard/Wizard.js +0 -327
  397. package/dist/wizard/invalid_icon.svg +0 -6
  398. package/dist/wizard/valid_icon.svg +0 -6
  399. package/dist/wizard/validation-wrong.svg +0 -6
  400. package/test/Accordion.test.js +0 -33
  401. package/test/Alert.test.js +0 -53
  402. package/test/Box.test.js +0 -10
  403. package/test/Button.test.js +0 -18
  404. package/test/Card.test.js +0 -30
  405. package/test/Checkbox.test.js +0 -45
  406. package/test/Chip.test.js +0 -25
  407. package/test/Date.test.js +0 -393
  408. package/test/Dialog.test.js +0 -23
  409. package/test/Dropdown.test.js +0 -130
  410. package/test/Footer.test.js +0 -99
  411. package/test/Header.test.js +0 -39
  412. package/test/Heading.test.js +0 -35
  413. package/test/InputText.test.js +0 -236
  414. package/test/Link.test.js +0 -33
  415. package/test/Paginator.test.js +0 -165
  416. package/test/ProgressBar.test.js +0 -35
  417. package/test/Radio.test.js +0 -37
  418. package/test/ResultsetTable.test.js +0 -282
  419. package/test/Select.test.js +0 -191
  420. package/test/Sidenav.test.js +0 -19
  421. package/test/Slider.test.js +0 -82
  422. package/test/Spinner.test.js +0 -27
  423. package/test/Switch.test.js +0 -45
  424. package/test/Table.test.js +0 -36
  425. package/test/Tabs.test.js +0 -88
  426. package/test/TabsForSections.test.js +0 -34
  427. package/test/Tag.test.js +0 -32
  428. package/test/TextArea.test.js +0 -52
  429. package/test/Toggle.test.js +0 -43
  430. package/test/ToggleGroup.test.js +0 -81
  431. package/test/Upload.test.js +0 -60
  432. package/test/Wizard.test.js +0 -130
  433. package/test/mocks/pngMock.js +0 -1
  434. package/test/mocks/svgMock.js +0 -1
@@ -1,73 +0,0 @@
1
- # DXC Date 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></td>
14
- <td>The value of the input element.</td>
15
- </tr>
16
- <tr>
17
- <td>format: string</td>
18
- <td></td>
19
- <td>The format in which the date value will be displayed. User must use this format when editing the input.</td>
20
- </tr>
21
- <tr>
22
- <td>label: string</td>
23
- <td></td>
24
- <td>Text to be placed next to the date component.</td>
25
- </tr>
26
- <tr>
27
- <td>theme: 'light' | 'dark'</td>
28
- <td><code>'light'</code></td>
29
- <td>Uses one of the available component themes.</td>
30
- </tr>
31
- <tr>
32
- <td>name: string</td>
33
- <td></td>
34
- <td>Name attribute of the input element.</td>
35
- </tr>
36
- <tr>
37
- <td>iconSrc: string</td>
38
- <td></td>
39
- <td>The path of an icon to replace the default calendar icon.</td>
40
- </tr>
41
- <tr>
42
- <td>disabled: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component will be disabled.</td>
45
- </tr>
46
- <tr>
47
- <td>required: boolean</td>
48
- <td><code>false</code></td>
49
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
50
- </tr>
51
- <tr>
52
- <td>assistiveText: string</td>
53
- <td></td>
54
- <td>Assistive text to be placed at the bottom of the input.</td>
55
- </tr>
56
- <tr>
57
- <td>invalid: boolean</td>
58
- <td><code>false</code></td>
59
- <td>If true, the input will change its appearence, showing that the value is not valid.</td>
60
- </tr>
61
- <tr>
62
- <td>disableRipple: boolean</td>
63
- <td><code>false</code></td>
64
- <td>If true, the ripple effect will be disabled.</td>
65
- </tr>
66
- <tr>
67
- <td>onChange: function</td>
68
- <td></td>
69
- <td>This function will be called when the user types within the input. A string with the current value will be passed to this function and also a date object if the string typed is a valid date<br>
70
- </td>
71
- </tr>
72
- </table>
73
-
@@ -1,197 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
33
-
34
- function _templateObject4() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 34px;\n height: 34px;\n"]);
36
-
37
- _templateObject4 = function _templateObject4() {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _templateObject3() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n width: 34px;\n height: 34px;\n"]);
46
-
47
- _templateObject3 = function _templateObject3() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject2() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow-y: auto;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n\n & * {\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n"]);
56
-
57
- _templateObject2 = function _templateObject2() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- function _templateObject() {
65
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: unset;\n\n .MuiBackdrop-root {\n background-color: ", ";\n }\n .MuiDialog-paperWidthSm {\n background-color: ", ";\n max-width: ", ";\n min-width: ", ";\n box-sizing: border-box;\n min-height: ", ";\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n }\n"]);
66
-
67
- _templateObject = function _templateObject() {
68
- return data;
69
- };
70
-
71
- return data;
72
- }
73
-
74
- var DxcDialog = function DxcDialog(_ref) {
75
- var _ref$isCloseVisible = _ref.isCloseVisible,
76
- isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
77
- onCloseClick = _ref.onCloseClick,
78
- children = _ref.children,
79
- _ref$overlay = _ref.overlay,
80
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
81
- onBackgroundClick = _ref.onBackgroundClick,
82
- padding = _ref.padding;
83
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
84
- var colorsTheme = (0, _react.useMemo)(function () {
85
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
86
- }, [customTheme]);
87
-
88
- var _useState = (0, _react.useState)(),
89
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
90
- isResponsive = _useState2[0],
91
- setIsResponsive = _useState2[1];
92
-
93
- var handleClose = function handleClose() {
94
- if (typeof onCloseClick === "function") {
95
- onCloseClick();
96
- }
97
- };
98
-
99
- var handleOverlayClick = function handleOverlayClick() {
100
- if (typeof onBackgroundClick === "function") {
101
- onBackgroundClick();
102
- }
103
- };
104
-
105
- var handleResize = function handleResize(width) {
106
- if (width) {
107
- if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
108
- }
109
- };
110
-
111
- var handleEventListener = function handleEventListener() {
112
- handleResize(window.innerWidth);
113
- };
114
-
115
- (0, _react.useEffect)(function () {
116
- window.addEventListener("resize", handleEventListener);
117
- handleResize(window.innerWidth);
118
- return function () {
119
- window.removeEventListener("resize", handleEventListener);
120
- };
121
- }, []);
122
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
123
- theme: colorsTheme.dialog
124
- }, _react["default"].createElement(DialogContainer, {
125
- open: true,
126
- isCloseVisible: isCloseVisible,
127
- onClose: handleOverlayClick,
128
- overlay: overlay,
129
- padding: padding,
130
- isResponsive: isResponsive
131
- }, isCloseVisible && _react["default"].createElement(CloseIconContainer, {
132
- onClick: handleClose
133
- }, _react["default"].createElement(CloseIcon, {
134
- xmlns: "http://www.w3.org/2000/svg",
135
- width: "24",
136
- height: "24",
137
- viewBox: "0 0 24 24"
138
- }, _react["default"].createElement("path", {
139
- 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"
140
- }), _react["default"].createElement("path", {
141
- d: "M0 0h24v24H0z",
142
- fill: "none"
143
- }))), _react["default"].createElement(Children, null, children)));
144
- };
145
-
146
- var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject(), function (props) {
147
- return props.overlay === true ? props.theme.overlayColor + props.theme.overlayOpacity : "transparent";
148
- }, function (props) {
149
- return props.theme.backgroundColor;
150
- }, function (props) {
151
- return props.isResponsive ? "92%" : "80%";
152
- }, function (props) {
153
- return props.isResponsive ? "92%" : "800px";
154
- }, function (props) {
155
- return props.isCloseVisible ? "72px" : "";
156
- }, function (props) {
157
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
158
- }, function (props) {
159
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
160
- }, function (props) {
161
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
162
- }, function (props) {
163
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
164
- }, function (props) {
165
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
166
- });
167
-
168
- var Children = _styledComponents["default"].div(_templateObject2(), function (props) {
169
- return props.theme.scrollBarTrackColor;
170
- }, function (props) {
171
- return props.theme.scrollBarThumbColor;
172
- }, function (props) {
173
- return props.theme.scrollBarTrackColor;
174
- }, function (props) {
175
- return props.theme.scrollBarThumbColor;
176
- });
177
-
178
- var CloseIconContainer = _styledComponents["default"].button(_templateObject3());
179
-
180
- var CloseIcon = _styledComponents["default"].svg(_templateObject4());
181
-
182
- DxcDialog.propTypes = {
183
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
184
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
185
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
186
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
187
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
188
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
189
- isVisible: _propTypes["default"].bool,
190
- isCloseVisible: _propTypes["default"].bool,
191
- onClose: _propTypes["default"].func,
192
- onCloseClick: _propTypes["default"].func,
193
- onBackgroundClick: _propTypes["default"].func,
194
- overlay: _propTypes["default"].bool
195
- };
196
- var _default = DxcDialog;
197
- exports["default"] = _default;
@@ -1,217 +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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
8
-
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
-
11
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
12
-
13
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
-
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
-
17
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
18
-
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
-
21
- var _react = _interopRequireDefault(require("react"));
22
-
23
- var _react2 = require("@storybook/react");
24
-
25
- var _addonActions = require("@storybook/addon-actions");
26
-
27
- require("../common/OpenSans.css");
28
-
29
- var _addonKnobs = require("@storybook/addon-knobs");
30
-
31
- var _readme = _interopRequireDefault(require("./readme.md"));
32
-
33
- var _Dialog = _interopRequireDefault(require("./Dialog"));
34
-
35
- var _Button = _interopRequireDefault(require("../button/Button"));
36
-
37
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
38
-
39
- var _Date = _interopRequireDefault(require("../date/Date"));
40
-
41
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
42
-
43
- var onChange = (0, _addonActions.action)("onChange");
44
-
45
- onChange.toString = function () {
46
- return "onChangeHandler";
47
- };
48
-
49
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Component", function () {
50
- var ControlledStory =
51
- /*#__PURE__*/
52
- function (_React$Component) {
53
- (0, _inherits2["default"])(ControlledStory, _React$Component);
54
-
55
- function ControlledStory(props) {
56
- var _this;
57
-
58
- (0, _classCallCheck2["default"])(this, ControlledStory);
59
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
60
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler", function () {
61
- _this.setState({
62
- opened: !_this.state.opened
63
- });
64
- });
65
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler1", function () {
66
- _this.setState({
67
- opened1: !_this.state.opened1
68
- });
69
- });
70
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler2", function () {
71
- _this.setState({
72
- opened2: !_this.state.opened2
73
- });
74
- });
75
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "contentHandler", function () {
76
- _this.setState({
77
- content: !_this.state.content
78
- });
79
- });
80
- _this.state = {
81
- opened: false,
82
- opened1: false,
83
- opened2: false,
84
- content: false
85
- };
86
- return _this;
87
- }
88
-
89
- (0, _createClass2["default"])(ControlledStory, [{
90
- key: "render",
91
- value: function render() {
92
- return _react["default"].createElement("div", null, _react["default"].createElement(_Dialog["default"], {
93
- isVisible: this.state.opened,
94
- isCloseVisible: true,
95
- onClose: this.dialogHandler,
96
- overlay: true
97
- }, _react["default"].createElement("div", {
98
- style: {
99
- display: "flex",
100
- justifyContent: "center",
101
- width: "100%"
102
- }
103
- }, _react["default"].createElement(_Switch["default"], {
104
- label: "Content",
105
- checked: false,
106
- onChange: this.contentHandler
107
- })), this.state.content && _react["default"].createElement("div", {
108
- style: {
109
- fontFamily: "Open Sans, sans serif"
110
- }
111
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."))), _react["default"].createElement(_Button["default"], {
112
- onClick: this.dialogHandler,
113
- label: "Click me"
114
- }), _react["default"].createElement(_Dialog["default"], {
115
- isVisible: this.state.opened1,
116
- isCloseVisible: true,
117
- onClose: this.dialogHandler1,
118
- overlay: false
119
- }, _react["default"].createElement("div", {
120
- style: {
121
- fontFamily: "Open Sans, sans serif"
122
- }
123
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis.")), _react["default"].createElement("div", {
124
- style: {
125
- display: "flex",
126
- justifyContent: "center",
127
- width: "100%"
128
- }
129
- }, _react["default"].createElement(_Button["default"], {
130
- mode: "raised",
131
- theme: "light",
132
- label: "OK",
133
- onClick: this.dialogHandler1
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "CANCEL",
138
- onClick: this.dialogHandler1
139
- }))), _react["default"].createElement(_Button["default"], {
140
- onClick: this.dialogHandler1,
141
- label: "Click me"
142
- }), _react["default"].createElement(_Dialog["default"], {
143
- isVisible: this.state.opened2,
144
- isCloseVisible: false,
145
- onClose: this.dialogHandler2,
146
- overlay: true
147
- }, _react["default"].createElement("div", {
148
- style: {
149
- display: "flex",
150
- justifyContent: "center",
151
- alignItems: "center",
152
- width: "100%"
153
- }
154
- }, _react["default"].createElement(_Date["default"], {
155
- name: "date",
156
- format: "dd/MM/yyyy",
157
- label: "BirthDate",
158
- theme: "light",
159
- assistiveText: "Assistive Text Here",
160
- onInputChange: function onInputChange(event) {
161
- return console.log(event);
162
- }
163
- }), _react["default"].createElement(_InputText["default"], {
164
- disabled: false,
165
- label: "Amount",
166
- multiline: false,
167
- sufix: "K",
168
- prefix: "\u20AC",
169
- theme: "light",
170
- assistiveText: "Assistive Text Here"
171
- })), _react["default"].createElement("div", {
172
- style: {
173
- display: "flex",
174
- justifyContent: "center",
175
- width: "100%"
176
- }
177
- }, _react["default"].createElement(_Button["default"], {
178
- onClick: this.dialogHandler2,
179
- label: "Close"
180
- }))), _react["default"].createElement(_Button["default"], {
181
- onClick: this.dialogHandler2,
182
- label: "Click me"
183
- }));
184
- }
185
- }]);
186
- return ControlledStory;
187
- }(_react["default"].Component);
188
-
189
- return _react["default"].createElement(ControlledStory, null);
190
- }, {
191
- notes: {
192
- markdown: _readme["default"]
193
- }
194
- });
195
-
196
- var knobProps = function knobProps() {
197
- return {
198
- isVisible: (0, _addonKnobs["boolean"])("Visible", false),
199
- isCloseVisible: (0, _addonKnobs["boolean"])("Close Visible", false),
200
- overlay: (0, _addonKnobs["boolean"])("Overlay", false)
201
- };
202
- };
203
-
204
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Knobs example", function () {
205
- var props = knobProps();
206
- return _react["default"].createElement("div", null, _react["default"].createElement("p", {
207
- style: {
208
- fontFamily: "Open Sans, sans serif"
209
- }
210
- }, "Check visible"), _react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({
211
- onClose: close
212
- }, props), "This is a knobs example"));
213
- }, {
214
- notes: {
215
- markdown: _readme["default"]
216
- }
217
- });
@@ -1,32 +0,0 @@
1
- # DXC Dialog 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>isVisible: boolean</td>
13
- <td>true</td>
14
- <td>If true, the modal should be visible</td>
15
- </tr>
16
- <tr>
17
- <td>isCloseVisible: boolean</td>
18
- <td>true</td>
19
- <td>If true, the close button should be visible</td>
20
- </tr>
21
- <tr>
22
- <td>onClose: function</td>
23
- <td></td>
24
- <td>This function will be called when the user clicks the close button. If there is no function we should close the modal by default</td>
25
- </tr>
26
- <tr>
27
- <td>overlay: boolean</td>
28
- <td>true</td>
29
- <td>If true, the modal will be over a darker background</td>
30
- </tr>
31
- </table>
32
-