@dxc-technology/halstack-react 0.0.0-eb2a4cc → 0.0.0-eca8a89

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 (405) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +48 -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 +300 -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/box/Box.d.ts +4 -0
  26. package/box/Box.js +126 -0
  27. package/box/Box.stories.tsx +132 -0
  28. package/box/types.d.ts +43 -0
  29. package/box/types.js +5 -0
  30. package/button/Button.d.ts +4 -0
  31. package/button/Button.js +179 -0
  32. package/button/Button.stories.tsx +276 -0
  33. package/button/types.d.ts +57 -0
  34. package/button/types.js +5 -0
  35. package/card/Card.d.ts +4 -0
  36. package/card/Card.js +164 -0
  37. package/card/Card.stories.tsx +201 -0
  38. package/card/ice-cream.jpg +0 -0
  39. package/card/types.d.ts +67 -0
  40. package/card/types.js +5 -0
  41. package/checkbox/Checkbox.d.ts +4 -0
  42. package/checkbox/Checkbox.js +253 -0
  43. package/checkbox/Checkbox.stories.tsx +192 -0
  44. package/checkbox/types.d.ts +60 -0
  45. package/checkbox/types.js +5 -0
  46. package/chip/Chip.d.ts +4 -0
  47. package/chip/Chip.js +199 -0
  48. package/chip/Chip.stories.tsx +121 -0
  49. package/chip/types.d.ts +53 -0
  50. package/chip/types.js +5 -0
  51. package/{dist/common → common}/OpenSans.css +0 -0
  52. package/{dist/common → common}/RequiredComponent.js +5 -19
  53. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  57. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  58. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  59. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  60. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  61. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  62. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  63. package/common/utils.js +22 -0
  64. package/common/variables.js +1574 -0
  65. package/{dist/date → date}/Date.js +93 -77
  66. package/date/index.d.ts +27 -0
  67. package/date-input/DateInput.d.ts +4 -0
  68. package/date-input/DateInput.js +358 -0
  69. package/date-input/DateInput.stories.tsx +138 -0
  70. package/date-input/types.d.ts +100 -0
  71. package/date-input/types.js +5 -0
  72. package/dialog/Dialog.d.ts +4 -0
  73. package/dialog/Dialog.js +165 -0
  74. package/dialog/Dialog.stories.tsx +212 -0
  75. package/dialog/types.d.ts +43 -0
  76. package/dialog/types.js +5 -0
  77. package/dropdown/Dropdown.d.ts +4 -0
  78. package/dropdown/Dropdown.js +417 -0
  79. package/dropdown/types.d.ts +89 -0
  80. package/dropdown/types.js +5 -0
  81. package/file-input/FileInput.d.ts +4 -0
  82. package/file-input/FileInput.js +521 -0
  83. package/file-input/FileItem.d.ts +14 -0
  84. package/file-input/FileItem.js +184 -0
  85. package/file-input/types.d.ts +112 -0
  86. package/file-input/types.js +5 -0
  87. package/footer/Footer.d.ts +4 -0
  88. package/footer/Footer.js +260 -0
  89. package/footer/Footer.stories.tsx +130 -0
  90. package/footer/Icons.d.ts +2 -0
  91. package/footer/Icons.js +77 -0
  92. package/footer/types.d.ts +65 -0
  93. package/footer/types.js +5 -0
  94. package/header/Header.d.ts +7 -0
  95. package/header/Header.js +324 -0
  96. package/header/Header.stories.tsx +162 -0
  97. package/header/Icons.d.ts +2 -0
  98. package/header/Icons.js +34 -0
  99. package/header/types.d.ts +47 -0
  100. package/header/types.js +5 -0
  101. package/heading/Heading.d.ts +4 -0
  102. package/heading/Heading.js +159 -0
  103. package/heading/Heading.stories.tsx +53 -0
  104. package/heading/types.d.ts +33 -0
  105. package/heading/types.js +5 -0
  106. package/input-text/Icons.js +22 -0
  107. package/input-text/InputText.js +611 -0
  108. package/input-text/index.d.ts +36 -0
  109. package/layout/ApplicationLayout.d.ts +10 -0
  110. package/layout/ApplicationLayout.js +225 -0
  111. package/layout/ApplicationLayout.stories.tsx +171 -0
  112. package/layout/Icons.js +55 -0
  113. package/layout/types.d.ts +57 -0
  114. package/layout/types.js +5 -0
  115. package/link/Link.d.ts +3 -0
  116. package/link/Link.js +161 -0
  117. package/link/Link.stories.tsx +146 -0
  118. package/link/types.d.ts +74 -0
  119. package/link/types.js +5 -0
  120. package/list/List.d.ts +7 -0
  121. package/list/List.js +37 -0
  122. package/list/List.stories.tsx +70 -0
  123. package/main.d.ts +48 -0
  124. package/{dist/main.js → main.js} +175 -43
  125. package/number-input/NumberInput.d.ts +4 -0
  126. package/number-input/NumberInput.js +83 -0
  127. package/number-input/NumberInput.stories.tsx +115 -0
  128. package/number-input/NumberInputContext.d.ts +4 -0
  129. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +6 -2
  130. package/number-input/numberInputContextTypes.d.ts +19 -0
  131. package/number-input/numberInputContextTypes.js +5 -0
  132. package/number-input/types.d.ts +117 -0
  133. package/number-input/types.js +5 -0
  134. package/package.json +39 -24
  135. package/paginator/Icons.js +66 -0
  136. package/paginator/Paginator.d.ts +4 -0
  137. package/paginator/Paginator.js +192 -0
  138. package/paginator/Paginator.stories.tsx +63 -0
  139. package/paginator/types.d.ts +38 -0
  140. package/paginator/types.js +5 -0
  141. package/password-input/PasswordInput.d.ts +4 -0
  142. package/password-input/PasswordInput.js +163 -0
  143. package/password-input/PasswordInput.stories.tsx +131 -0
  144. package/password-input/types.d.ts +107 -0
  145. package/password-input/types.js +5 -0
  146. package/progress-bar/ProgressBar.d.ts +4 -0
  147. package/progress-bar/ProgressBar.js +170 -0
  148. package/progress-bar/ProgressBar.stories.jsx +58 -0
  149. package/progress-bar/types.d.ts +37 -0
  150. package/progress-bar/types.js +5 -0
  151. package/radio/Radio.d.ts +4 -0
  152. package/radio/Radio.js +174 -0
  153. package/radio/Radio.stories.tsx +192 -0
  154. package/radio/types.d.ts +54 -0
  155. package/radio/types.js +5 -0
  156. package/resultsetTable/ResultsetTable.d.ts +4 -0
  157. package/resultsetTable/ResultsetTable.js +251 -0
  158. package/resultsetTable/ResultsetTable.stories.tsx +276 -0
  159. package/resultsetTable/types.d.ts +67 -0
  160. package/resultsetTable/types.js +5 -0
  161. package/row/Row.d.ts +11 -0
  162. package/row/Row.js +124 -0
  163. package/row/Row.stories.tsx +223 -0
  164. package/select/Select.js +863 -0
  165. package/select/Select.stories.tsx +572 -0
  166. package/select/index.d.ts +131 -0
  167. package/sidenav/Sidenav.d.ts +9 -0
  168. package/sidenav/Sidenav.js +136 -0
  169. package/sidenav/Sidenav.stories.tsx +165 -0
  170. package/sidenav/types.d.ts +50 -0
  171. package/sidenav/types.js +5 -0
  172. package/slider/Slider.d.ts +4 -0
  173. package/slider/Slider.js +317 -0
  174. package/slider/Slider.stories.tsx +177 -0
  175. package/slider/types.d.ts +78 -0
  176. package/slider/types.js +5 -0
  177. package/spinner/Spinner.d.ts +4 -0
  178. package/spinner/Spinner.js +250 -0
  179. package/spinner/Spinner.stories.jsx +102 -0
  180. package/spinner/types.d.ts +32 -0
  181. package/spinner/types.js +5 -0
  182. package/stack/Stack.d.ts +10 -0
  183. package/stack/Stack.js +94 -0
  184. package/stack/Stack.stories.tsx +150 -0
  185. package/switch/Switch.d.ts +4 -0
  186. package/switch/Switch.js +179 -0
  187. package/switch/Switch.stories.tsx +160 -0
  188. package/switch/types.d.ts +58 -0
  189. package/switch/types.js +5 -0
  190. package/table/Table.d.ts +4 -0
  191. package/table/Table.js +118 -0
  192. package/table/Table.stories.jsx +276 -0
  193. package/table/types.d.ts +21 -0
  194. package/table/types.js +5 -0
  195. package/tabs/Tabs.d.ts +4 -0
  196. package/tabs/Tabs.js +213 -0
  197. package/tabs/Tabs.stories.tsx +121 -0
  198. package/tabs/types.d.ts +70 -0
  199. package/tabs/types.js +5 -0
  200. package/tag/Tag.d.ts +4 -0
  201. package/tag/Tag.js +193 -0
  202. package/tag/Tag.stories.tsx +145 -0
  203. package/tag/types.d.ts +60 -0
  204. package/tag/types.js +5 -0
  205. package/text/Text.d.ts +7 -0
  206. package/text/Text.js +30 -0
  207. package/text/Text.stories.tsx +19 -0
  208. package/text-input/TextInput.d.ts +4 -0
  209. package/text-input/TextInput.js +786 -0
  210. package/text-input/TextInput.stories.tsx +456 -0
  211. package/text-input/types.d.ts +159 -0
  212. package/text-input/types.js +5 -0
  213. package/textarea/Textarea.js +314 -0
  214. package/textarea/Textarea.stories.jsx +135 -0
  215. package/textarea/index.d.ts +127 -0
  216. package/{dist/toggle → toggle}/Toggle.js +30 -67
  217. package/toggle/index.d.ts +21 -0
  218. package/toggle-group/ToggleGroup.d.ts +4 -0
  219. package/toggle-group/ToggleGroup.js +217 -0
  220. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  221. package/toggle-group/types.d.ts +84 -0
  222. package/toggle-group/types.js +5 -0
  223. package/{dist/upload → upload}/Upload.js +23 -22
  224. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  225. package/upload/buttons-upload/Icons.js +40 -0
  226. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  227. package/upload/dragAndDropArea/Icons.js +39 -0
  228. package/upload/file-upload/FileToUpload.js +115 -0
  229. package/upload/file-upload/Icons.js +66 -0
  230. package/upload/files-upload/FilesToUpload.js +109 -0
  231. package/upload/index.d.ts +15 -0
  232. package/upload/transaction/Icons.js +160 -0
  233. package/upload/transaction/Transaction.js +104 -0
  234. package/upload/transactions/Transactions.js +94 -0
  235. package/useTheme.d.ts +2 -0
  236. package/useTheme.js +22 -0
  237. package/wizard/Icons.js +65 -0
  238. package/wizard/Wizard.d.ts +4 -0
  239. package/wizard/Wizard.js +231 -0
  240. package/wizard/Wizard.stories.jsx +224 -0
  241. package/wizard/types.d.ts +64 -0
  242. package/wizard/types.js +5 -0
  243. package/README.md +0 -66
  244. package/babel.config.js +0 -4
  245. package/dist/accordion/Accordion.js +0 -264
  246. package/dist/accordion/Accordion.stories.js +0 -207
  247. package/dist/accordion/readme.md +0 -96
  248. package/dist/alert/Alert.js +0 -302
  249. package/dist/alert/Alert.stories.js +0 -158
  250. package/dist/alert/close.svg +0 -4
  251. package/dist/alert/error.svg +0 -4
  252. package/dist/alert/info.svg +0 -4
  253. package/dist/alert/readme.md +0 -43
  254. package/dist/alert/success.svg +0 -4
  255. package/dist/alert/warning.svg +0 -4
  256. package/dist/box/Box.js +0 -148
  257. package/dist/button/Button.js +0 -183
  258. package/dist/button/Button.stories.js +0 -224
  259. package/dist/button/readme.md +0 -93
  260. package/dist/card/Card.js +0 -217
  261. package/dist/checkbox/Checkbox.js +0 -224
  262. package/dist/checkbox/Checkbox.stories.js +0 -144
  263. package/dist/checkbox/readme.md +0 -116
  264. package/dist/chip/Chip.js +0 -170
  265. package/dist/common/services/example-service.js +0 -10
  266. package/dist/common/services/example-service.test.js +0 -12
  267. package/dist/common/utils.js +0 -42
  268. package/dist/common/variables.js +0 -261
  269. package/dist/date/Date.stories.js +0 -205
  270. package/dist/date/calendar.svg +0 -1
  271. package/dist/date/calendar_dark.svg +0 -1
  272. package/dist/date/readme.md +0 -73
  273. package/dist/dialog/Dialog.js +0 -193
  274. package/dist/dialog/Dialog.stories.js +0 -217
  275. package/dist/dialog/readme.md +0 -32
  276. package/dist/dropdown/Dropdown.js +0 -412
  277. package/dist/dropdown/Dropdown.stories.js +0 -249
  278. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  279. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  280. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  281. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  282. package/dist/dropdown/readme.md +0 -69
  283. package/dist/footer/Footer.js +0 -346
  284. package/dist/footer/Footer.stories.js +0 -94
  285. package/dist/footer/dxc_logo_wht.png +0 -0
  286. package/dist/footer/readme.md +0 -41
  287. package/dist/header/Header.js +0 -350
  288. package/dist/header/Header.stories.js +0 -176
  289. package/dist/header/close_icon.svg +0 -1
  290. package/dist/header/dxc_logo_black.png +0 -0
  291. package/dist/header/dxc_logo_white.png +0 -0
  292. package/dist/header/hamb_menu_black.svg +0 -1
  293. package/dist/header/hamb_menu_white.svg +0 -1
  294. package/dist/header/readme.md +0 -33
  295. package/dist/heading/Heading.js +0 -159
  296. package/dist/input-text/InputText.js +0 -519
  297. package/dist/input-text/InputText.stories.js +0 -209
  298. package/dist/input-text/error.svg +0 -1
  299. package/dist/input-text/readme.md +0 -91
  300. package/dist/link/Link.js +0 -136
  301. package/dist/link/readme.md +0 -51
  302. package/dist/paginator/Paginator.js +0 -178
  303. package/dist/paginator/images/next.svg +0 -3
  304. package/dist/paginator/images/nextPage.svg +0 -3
  305. package/dist/paginator/images/previous.svg +0 -3
  306. package/dist/paginator/images/previousPage.svg +0 -3
  307. package/dist/paginator/readme.md +0 -50
  308. package/dist/progress-bar/ProgressBar.js +0 -189
  309. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  310. package/dist/progress-bar/readme.md +0 -63
  311. package/dist/radio/Radio.js +0 -191
  312. package/dist/radio/Radio.stories.js +0 -166
  313. package/dist/radio/readme.md +0 -70
  314. package/dist/resultsetTable/ResultsetTable.js +0 -334
  315. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  316. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  317. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  318. package/dist/select/Select.js +0 -442
  319. package/dist/select/Select.stories.js +0 -235
  320. package/dist/select/readme.md +0 -72
  321. package/dist/sidenav/Sidenav.js +0 -217
  322. package/dist/sidenav/arrow_icon.svg +0 -3
  323. package/dist/slider/Slider.js +0 -258
  324. package/dist/slider/Slider.stories.js +0 -241
  325. package/dist/slider/readme.md +0 -64
  326. package/dist/spinner/Spinner.js +0 -196
  327. package/dist/spinner/Spinner.stories.js +0 -183
  328. package/dist/spinner/readme.md +0 -65
  329. package/dist/switch/Switch.js +0 -197
  330. package/dist/switch/Switch.stories.js +0 -134
  331. package/dist/switch/readme.md +0 -133
  332. package/dist/table/Table.js +0 -84
  333. package/dist/tabs/Tabs.js +0 -170
  334. package/dist/tabs/Tabs.stories.js +0 -130
  335. package/dist/tabs/readme.md +0 -78
  336. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  337. package/dist/tabs-for-sections/readme.md +0 -78
  338. package/dist/tag/Tag.js +0 -217
  339. package/dist/textarea/Textarea.js +0 -226
  340. package/dist/toggle/Toggle.stories.js +0 -297
  341. package/dist/toggle/readme.md +0 -80
  342. package/dist/upload/Upload.stories.js +0 -72
  343. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  344. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  345. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  346. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -282
  347. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  348. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  349. package/dist/upload/file-upload/FileToUpload.js +0 -158
  350. package/dist/upload/file-upload/audio-icon.svg +0 -4
  351. package/dist/upload/file-upload/close.svg +0 -4
  352. package/dist/upload/file-upload/file-icon.svg +0 -4
  353. package/dist/upload/file-upload/video-icon.svg +0 -4
  354. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  355. package/dist/upload/readme.md +0 -37
  356. package/dist/upload/transaction/Transaction.js +0 -155
  357. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  358. package/dist/upload/transaction/audio-icon.svg +0 -4
  359. package/dist/upload/transaction/error-icon.svg +0 -4
  360. package/dist/upload/transaction/file-icon-err.svg +0 -4
  361. package/dist/upload/transaction/file-icon.svg +0 -4
  362. package/dist/upload/transaction/image-icon-err.svg +0 -4
  363. package/dist/upload/transaction/image-icon.svg +0 -4
  364. package/dist/upload/transaction/success-icon.svg +0 -4
  365. package/dist/upload/transaction/video-icon-err.svg +0 -4
  366. package/dist/upload/transaction/video-icon.svg +0 -4
  367. package/dist/upload/transactions/Transactions.js +0 -120
  368. package/dist/wizard/Wizard.js +0 -310
  369. package/dist/wizard/invalid_icon.svg +0 -6
  370. package/dist/wizard/valid_icon.svg +0 -6
  371. package/dist/wizard/validation-wrong.svg +0 -6
  372. package/test/Accordion.test.js +0 -33
  373. package/test/Alert.test.js +0 -53
  374. package/test/Box.test.js +0 -10
  375. package/test/Button.test.js +0 -18
  376. package/test/Card.test.js +0 -30
  377. package/test/Checkbox.test.js +0 -45
  378. package/test/Chip.test.js +0 -25
  379. package/test/Date.test.js +0 -393
  380. package/test/Dialog.test.js +0 -23
  381. package/test/Dropdown.test.js +0 -130
  382. package/test/Footer.test.js +0 -99
  383. package/test/Header.test.js +0 -39
  384. package/test/Heading.test.js +0 -35
  385. package/test/InputText.test.js +0 -236
  386. package/test/Link.test.js +0 -25
  387. package/test/Paginator.test.js +0 -165
  388. package/test/ProgressBar.test.js +0 -35
  389. package/test/Radio.test.js +0 -37
  390. package/test/ResultsetTable.test.js +0 -282
  391. package/test/Select.test.js +0 -191
  392. package/test/Sidenav.test.js +0 -87
  393. package/test/Slider.test.js +0 -65
  394. package/test/Spinner.test.js +0 -27
  395. package/test/Switch.test.js +0 -45
  396. package/test/Table.test.js +0 -36
  397. package/test/Tabs.test.js +0 -88
  398. package/test/TabsForSections.test.js +0 -34
  399. package/test/Tag.test.js +0 -32
  400. package/test/TextArea.test.js +0 -52
  401. package/test/Toggle.test.js +0 -43
  402. package/test/Upload.test.js +0 -60
  403. package/test/Wizard.test.js +0 -130
  404. package/test/mocks/pngMock.js +0 -1
  405. package/test/mocks/svgMock.js +0 -1
package/dist/box/Box.js DELETED
@@ -1,148 +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 _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _variables = require("../common/variables.js");
25
-
26
- var _utils = require("../common/utils.js");
27
-
28
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
29
-
30
- require("../common/OpenSans.css");
31
-
32
- function _templateObject() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n border-radius: 4px;\n overflow: hidden;\n font-family: \"Open Sans\", sans-serif;\n width: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"]);
34
-
35
- _templateObject = function _templateObject() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- var DxcBox = function DxcBox(_ref) {
43
- var shadowDepth = _ref.shadowDepth,
44
- margin = _ref.margin,
45
- padding = _ref.padding,
46
- _ref$display = _ref.display,
47
- display = _ref$display === void 0 ? "inline-flex" : _ref$display,
48
- children = _ref.children,
49
- _ref$size = _ref.size,
50
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
51
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
52
- var colorsTheme = (0, _react.useMemo)(function () {
53
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
54
- }, [customTheme]);
55
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
56
- theme: colorsTheme.box
57
- }, _react["default"].createElement(StyledDxcBox, {
58
- shadowDepth: shadowDepth,
59
- display: display,
60
- margin: margin,
61
- padding: padding,
62
- size: size
63
- }, children));
64
- };
65
-
66
- var sizes = {
67
- small: "48px",
68
- medium: "240px",
69
- large: "480px",
70
- fillParent: "100%",
71
- fitContent: "unset"
72
- };
73
-
74
- var calculateWidth = function calculateWidth(margin, size, padding) {
75
- if (size === "fillParent") {
76
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), " -\n ").concat((0, _utils.getMargin)(padding, "left"), " - ").concat((0, _utils.getMargin)(padding, "right"), ")");
77
- }
78
-
79
- return sizes[size];
80
- };
81
-
82
- var StyledDxcBox = _styledComponents["default"].div(_templateObject(), function (_ref2) {
83
- var display = _ref2.display;
84
- return display;
85
- }, function (props) {
86
- return calculateWidth(props.margin, props.size, props.padding);
87
- }, function (props) {
88
- return props.theme.backgroundColor;
89
- }, function (_ref3) {
90
- var shadowDepth = _ref3.shadowDepth;
91
- return shadowDepth === 1 ? "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)" : shadowDepth === 2 ? "0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)" : "none";
92
- }, function (_ref4) {
93
- var margin = _ref4.margin;
94
- return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
95
- }, function (_ref5) {
96
- var margin = _ref5.margin;
97
- return margin && margin.top ? _variables.spaces[margin.top] : "";
98
- }, function (_ref6) {
99
- var margin = _ref6.margin;
100
- return margin && margin.right ? _variables.spaces[margin.right] : "";
101
- }, function (_ref7) {
102
- var margin = _ref7.margin;
103
- return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
104
- }, function (_ref8) {
105
- var margin = _ref8.margin;
106
- return margin && margin.left ? _variables.spaces[margin.left] : "";
107
- }, function (_ref9) {
108
- var padding = _ref9.padding;
109
- return padding && (0, _typeof2["default"])(padding) !== "object" ? _variables.spaces[padding] : "0px";
110
- }, function (_ref10) {
111
- var padding = _ref10.padding;
112
- return padding && padding.top ? _variables.spaces[padding.top] : "";
113
- }, function (_ref11) {
114
- var padding = _ref11.padding;
115
- return padding && padding.right ? _variables.spaces[padding.right] : "";
116
- }, function (_ref12) {
117
- var padding = _ref12.padding;
118
- return padding && padding.bottom ? _variables.spaces[padding.bottom] : "";
119
- }, function (_ref13) {
120
- var padding = _ref13.padding;
121
- return padding && padding.left ? _variables.spaces[padding.left] : "";
122
- });
123
-
124
- DxcBox.propTypes = {
125
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
126
- display: _propTypes["default"].string,
127
- shadowDepth: _propTypes["default"].oneOf([0, 1, 2]),
128
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
129
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
130
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
131
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
132
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
133
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
134
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
135
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
136
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
137
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
138
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
139
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
140
- };
141
- DxcBox.defaultProps = {
142
- shadowDepth: 2,
143
- display: "inline-flex",
144
- margin: null,
145
- padding: null
146
- };
147
- var _default = DxcBox;
148
- exports["default"] = _default;
@@ -1,183 +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 _react = _interopRequireWildcard(require("react"));
19
-
20
- var _core = require("@material-ui/core");
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- require("../common/OpenSans.css");
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 _templateObject3() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n width: ", ";\n cursor: ", ";\n\n .MuiButtonBase-root {\n .MuiButton-label {\n display: flex;\n flex-direction: ", ";\n align-items: center;\n }\n letter-spacing: 1px;\n box-shadow: none;\n font-size: 14px;\n font-weight: 500;\n padding: ", ";\n min-width: ", ";\n border-radius: 4px;\n width: 100%;\n min-height: 43px;\n line-height: 1;\n font-family: \"Open Sans\", sans-serif;\n &:active {\n opacity: 0.64;\n }\n &:focus {\n outline: ", " auto 1px;\n }\n transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n &:hover{\n transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n }\n ", "\n }\n"]);
36
-
37
- _templateObject3 = function _templateObject3() {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _templateObject2() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 20px;\n max-width: 20px;\n margin-left: ", ";\n margin-right: ", ";\n"]);
46
-
47
- _templateObject2 = function _templateObject2() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n line-height: 18px;\n font-size: 14px;\n text-overflow: ellipsis;\n overflow: hidden;\n"]);
56
-
57
- _templateObject = function _templateObject() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- var DxcButton = function DxcButton(_ref) {
65
- var _ref$label = _ref.label,
66
- label = _ref$label === void 0 ? "" : _ref$label,
67
- _ref$mode = _ref.mode,
68
- mode = _ref$mode === void 0 ? "primary" : _ref$mode,
69
- _ref$disabled = _ref.disabled,
70
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
71
- _ref$iconPosition = _ref.iconPosition,
72
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
73
- _ref$iconSrc = _ref.iconSrc,
74
- iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
75
- _ref$onClick = _ref.onClick,
76
- _onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
77
- margin = _ref.margin,
78
- size = _ref.size;
79
-
80
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
81
- var colorsTheme = (0, _react.useMemo)(function () {
82
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
83
- }, [customTheme]);
84
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
85
- theme: colorsTheme.button
86
- }, _react["default"].createElement(DxCButton, {
87
- margin: margin,
88
- mode: mode,
89
- disabled: disabled,
90
- iconPosition: iconPosition,
91
- size: size
92
- }, _react["default"].createElement(_core.Button, {
93
- disabled: disabled,
94
- disableRipple: true,
95
- "aria-disabled": disabled ? true : false,
96
- onClick: function onClick() {
97
- if (_onClick) {
98
- _onClick();
99
- }
100
- }
101
- }, _react["default"].createElement(LabelContainer, null, label), iconSrc && _react["default"].createElement(ButtonIcon, {
102
- label: label,
103
- iconPosition: iconPosition,
104
- src: iconSrc
105
- }))));
106
- };
107
-
108
- var sizes = {
109
- small: "42px",
110
- medium: "120px",
111
- large: "240px",
112
- fillParent: "100%",
113
- fitContent: "unset"
114
- };
115
-
116
- var calculateWidth = function calculateWidth(margin, size) {
117
- if (size === "fillParent") {
118
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
119
- }
120
-
121
- return sizes[size];
122
- };
123
-
124
- var LabelContainer = _styledComponents["default"].span(_templateObject());
125
-
126
- var ButtonIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
127
- return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
128
- }, function (props) {
129
- return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
130
- });
131
-
132
- var DxCButton = _styledComponents["default"].div(_templateObject3(), function (props) {
133
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
134
- }, function (props) {
135
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
136
- }, function (props) {
137
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
138
- }, function (props) {
139
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
140
- }, function (props) {
141
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
142
- }, function (props) {
143
- return calculateWidth(props.margin, props.size);
144
- }, function (props) {
145
- return props.disabled && "not-allowed" || "pointer";
146
- }, function (props) {
147
- return props.iconPosition === "after" && "row" || "row-reverse";
148
- }, function (props) {
149
- return props.size === "small" && "11px" || "12px 30px";
150
- }, function (props) {
151
- return props.size === "small" && "calc(100% - 22px)" || "unset";
152
- }, function (props) {
153
- return props.theme.focusColor;
154
- }, function (props) {
155
- var mode = props.mode;
156
-
157
- if (mode === "primary") {
158
- return "\n background-color: ".concat(props.theme.color, ";\n color: ").concat(props.theme.primaryFontColor, ";\n &:hover{\n background-color: ").concat(props.theme.hoverColor, ";\n color: ").concat(props.theme.primaryHoverFontColor, "; \n }\n &:disabled{ \n background-color: ").concat(props.theme.color, ";\n opacity: ").concat(props.theme.primaryDisabledOpacity, ";\n color: ").concat(props.theme.primaryFontColor, ";\n cursor:not-allowed;\n }\n .MuiButton-label {\n z-index: 5\n }\n ");
159
- } else if (mode === "secondary") {
160
- return "\n background-color: ".concat(props.theme.secondaryBackgroundColor, ";\n padding: 10px 28px;\n color: ").concat(props.theme.secondaryFontColor, ";\n border: 2px solid;\n border-color: ").concat(props.theme.color, ";\n &:hover{\n border-color: ").concat(props.theme.hoverColor, ";\n background-color: ").concat(props.theme.secondaryBackgroundColor, ";\n }\n &:disabled{ \n background-color: ").concat(props.theme.secondaryBackgroundColor, ";\n border-color: ").concat(props.theme.color, ";\n color: ").concat(props.theme.secondaryFontColor, ";\n cursor:not-allowed;\n opacity: ").concat(props.theme.secondaryDisabledOpacity, ";\n }\n .MuiButton-label {\n z-index: 5\n }\n \n ");
161
- } else if (mode === "text") {
162
- return "\n background-color: ".concat(props.theme.textBackgroundColor, ";\n color: ").concat(props.theme.textFontColor, ";\n &:hover{\n background-color: ").concat(props.theme.hoverColor, ";\n color: ").concat(props.theme.textHoverFontColor, ";\n }\n &:disabled{ \n background-color: ").concat(props.theme.textBackgroundColor, ";\n opacity: ").concat(props.theme.secondaryDisabledOpacity, ";\n color: ").concat(props.theme.textFontColor, ";\n cursor:not-allowed;\n }\n ");
163
- }
164
- });
165
-
166
- DxcButton.propTypes = {
167
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
168
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
169
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
170
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
171
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
172
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
173
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
174
- label: _propTypes["default"].string,
175
- mode: _propTypes["default"].oneOf(["primary", "secondary", "text"]),
176
- disabled: _propTypes["default"].bool,
177
- theme: _propTypes["default"].oneOf(["dark", "light"]),
178
- iconPosition: _propTypes["default"].oneOf(["after", "before"]),
179
- onClick: _propTypes["default"].func,
180
- iconSrc: _propTypes["default"].string
181
- };
182
- var _default = DxcButton;
183
- exports["default"] = _default;
@@ -1,224 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Button = _interopRequireDefault(require("./Button"));
20
-
21
- var onClick = (0, _addonActions.action)("onClick");
22
-
23
- onClick.toString = function () {
24
- return "onClickHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Button", module).add("Types", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
29
- mode: "basic",
30
- theme: "light",
31
- label: "Basic Button",
32
- onClick: onClick
33
- }), _react["default"].createElement(_Button["default"], {
34
- mode: "raised",
35
- theme: "light",
36
- label: "Raised Button",
37
- onClick: onClick
38
- }), _react["default"].createElement(_Button["default"], {
39
- mode: "flat",
40
- theme: "light",
41
- label: "Flat Button",
42
- onClick: onClick
43
- }), _react["default"].createElement(_Button["default"], {
44
- mode: "outlined",
45
- theme: "light",
46
- label: "Outlined Button",
47
- onClick: onClick
48
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
49
- disabled: true,
50
- mode: "basic",
51
- theme: "light",
52
- label: "Basic Button",
53
- onClick: onClick
54
- }), _react["default"].createElement(_Button["default"], {
55
- disabled: true,
56
- mode: "raised",
57
- theme: "light",
58
- label: "Raised Button",
59
- onClick: onClick
60
- }), _react["default"].createElement(_Button["default"], {
61
- disabled: true,
62
- mode: "flat",
63
- theme: "light",
64
- label: "Flat Button",
65
- onClick: onClick
66
- }), _react["default"].createElement(_Button["default"], {
67
- disabled: true,
68
- mode: "outlined",
69
- theme: "light",
70
- label: "Outlined Button",
71
- onClick: onClick
72
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
73
- style: {
74
- background: "black"
75
- }
76
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
77
- mode: "basic",
78
- theme: "dark",
79
- label: "Basic Button",
80
- onClick: onClick
81
- }), _react["default"].createElement(_Button["default"], {
82
- mode: "raised",
83
- theme: "dark",
84
- label: "Raised Button",
85
- onClick: onClick
86
- }), _react["default"].createElement(_Button["default"], {
87
- mode: "flat",
88
- theme: "dark",
89
- label: "Flat Button",
90
- onClick: onClick
91
- }), _react["default"].createElement(_Button["default"], {
92
- mode: "outlined",
93
- theme: "dark",
94
- label: "Outlined Button",
95
- onClick: onClick
96
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
97
- disabled: true,
98
- mode: "basic",
99
- theme: "dark",
100
- label: "Basic Button",
101
- onClick: onClick
102
- }), _react["default"].createElement(_Button["default"], {
103
- disabled: true,
104
- mode: "raised",
105
- theme: "dark",
106
- label: "Raised Button",
107
- onClick: onClick
108
- }), _react["default"].createElement(_Button["default"], {
109
- disabled: true,
110
- mode: "flat",
111
- theme: "dark",
112
- label: "Flat Button",
113
- onClick: onClick
114
- }), _react["default"].createElement(_Button["default"], {
115
- disabled: true,
116
- mode: "outlined",
117
- theme: "dark",
118
- label: "Outlined Button",
119
- onClick: onClick
120
- }))), _react["default"].createElement("h3", null, "With icon"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
121
- mode: "basic",
122
- theme: "light",
123
- label: "Basic Button",
124
- onClick: onClick,
125
- iconPosition: "after",
126
- iconSrc: _run_icon_black["default"]
127
- }), _react["default"].createElement(_Button["default"], {
128
- mode: "raised",
129
- theme: "light",
130
- label: "Raised Button",
131
- onClick: onClick,
132
- iconPosition: "after",
133
- iconSrc: _run_icon_black["default"]
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "Flat Button",
138
- onClick: onClick,
139
- iconSrc: _run_icon_black["default"]
140
- }), _react["default"].createElement(_Button["default"], {
141
- mode: "outlined",
142
- theme: "light",
143
- label: "Outlined Button",
144
- onClick: onClick,
145
- iconPosition: "after",
146
- iconSrc: _run_icon_black["default"]
147
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
148
- disabled: true,
149
- mode: "basic",
150
- theme: "light",
151
- label: "Basic Button",
152
- onClick: onClick,
153
- iconPosition: "after",
154
- iconSrc: _run_icon_black["default"]
155
- }), _react["default"].createElement(_Button["default"], {
156
- disabled: true,
157
- mode: "raised",
158
- theme: "light",
159
- label: "Raised Button",
160
- onClick: onClick,
161
- iconPosition: "after",
162
- iconSrc: _run_icon_black["default"]
163
- }), _react["default"].createElement(_Button["default"], {
164
- disabled: true,
165
- mode: "flat",
166
- theme: "light",
167
- label: "Flat Button",
168
- onClick: onClick,
169
- iconPosition: "after",
170
- iconSrc: _run_icon_black["default"]
171
- }), _react["default"].createElement(_Button["default"], {
172
- disabled: true,
173
- mode: "outlined",
174
- theme: "light",
175
- label: "Outlined Button",
176
- onClick: onClick,
177
- iconPosition: "after",
178
- iconSrc: _run_icon_black["default"]
179
- })));
180
- }, {
181
- notes: {
182
- markdown: _readme["default"]
183
- }
184
- });
185
-
186
- var knobProps = function knobProps() {
187
- return {
188
- label: (0, _addonKnobs.text)("label", "Test Button"),
189
- mode: (0, _addonKnobs.select)("mode", {
190
- basic: "basic",
191
- raised: "raised",
192
- flat: "flat",
193
- outlined: "outlined"
194
- }, "basic"),
195
- theme: (0, _addonKnobs.select)("theme", {
196
- light: "light",
197
- dark: "dark"
198
- }, "light"),
199
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
200
- iconPosition: (0, _addonKnobs.select)("icon position", {
201
- before: "before",
202
- after: "after"
203
- }, "before"),
204
- icon: (0, _addonKnobs["boolean"])("With Icon", true)
205
- };
206
- };
207
-
208
- (0, _react2.storiesOf)("Form Components|Button", module).add("Knobs example", function () {
209
- var props = knobProps();
210
- return _react["default"].createElement("div", {
211
- style: {
212
- background: props.theme === "dark" && "black" || "transparent"
213
- }
214
- }, props.icon && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
215
- onClick: onClick,
216
- iconSrc: _run_icon_black["default"]
217
- })) || _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
218
- onClick: onClick
219
- })));
220
- }, {
221
- notes: {
222
- markdown: _readme["default"]
223
- }
224
- });
@@ -1,93 +0,0 @@
1
- # DXC Button Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcButton } from "@dxc-technology/halstack-react";
7
-
8
- <DxcButton onClick={handleClick} label="Test Button" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>mode: 'basic' | 'outlined' | 'raised' | 'flat'</td>
21
- <td><code>'basic'</code></td>
22
- <td>Uses on of the available button modes.</td>
23
- </tr>
24
- <tr>
25
- <td>theme: 'light' |'dark'</td>
26
- <td><code>'light'</code></td>
27
- <td>Uses one of the available button modes.</td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td><code>'basic'</code></td>
32
- <td>Text to be placed next to the button.</td>
33
- </tr>
34
- <tr>
35
- <td>iconSrc: string</td>
36
- <td></td>
37
- <td>URL of the icon that will be placed next to the button label.</td>
38
- </tr>
39
- <tr>
40
- <td>iconPosition: 'before' | 'after'</td>
41
- <td><code>'before'</code></td>
42
- <td>Whether the icon should appear after or before the label.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>disableRipple: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the ripple effect will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>onClick: function</td>
56
- <td></td>
57
- <td>This function will be called when the user clicks the button. The event object will be passed as a parameter.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic button - Light theme - Enabled - Icon after label - With ripple
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcButton } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnClick = event => {
73
- console.log("Button clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <DxcButton
79
- label="Basic"
80
- mode="basic"
81
- disabled={false}
82
- theme="light"
83
- disableRipple={false}
84
- iconPosition="after"
85
- iconSrc="/images/run_icon.png"
86
- onClick={handleOnClick}
87
- />
88
- </div>
89
- );
90
- }
91
-
92
- export default App;
93
- ```