@dxc-technology/halstack-react 0.0.0-0ddd74a → 0.0.0-0def59e

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 (428) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +226 -0
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +169 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/AccordionGroup.test.js +151 -0
  15. package/accordion-group/types.d.ts +72 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +43 -153
  19. package/alert/Alert.stories.tsx +170 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +116 -0
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +43 -0
  37. package/box/types.js +5 -0
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +156 -0
  45. package/button/Button.stories.tsx +283 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +161 -0
  51. package/card/Card.stories.tsx +201 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +67 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/{dist/checkbox → checkbox}/Checkbox.js +55 -98
  58. package/checkbox/Checkbox.stories.tsx +188 -0
  59. package/checkbox/Checkbox.test.js +78 -0
  60. package/checkbox/types.d.ts +64 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +161 -0
  64. package/chip/Chip.stories.tsx +119 -0
  65. package/chip/Chip.test.js +56 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/{dist/common → common}/OpenSans.css +0 -0
  69. package/{dist/common → common}/RequiredComponent.js +3 -11
  70. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  79. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  80. package/{dist/common → common}/utils.js +0 -0
  81. package/{dist/common → common}/variables.js +363 -432
  82. package/date-input/DateInput.d.ts +4 -0
  83. package/{dist/date-input → date-input}/DateInput.js +80 -108
  84. package/date-input/DateInput.stories.tsx +138 -0
  85. package/date-input/DateInput.test.js +479 -0
  86. package/date-input/types.d.ts +107 -0
  87. package/date-input/types.js +5 -0
  88. package/dialog/Dialog.d.ts +4 -0
  89. package/dialog/Dialog.js +162 -0
  90. package/dialog/Dialog.stories.tsx +211 -0
  91. package/dialog/Dialog.test.js +70 -0
  92. package/dialog/types.d.ts +43 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/{dist/dropdown → dropdown}/Dropdown.js +54 -207
  96. package/dropdown/Dropdown.stories.tsx +249 -0
  97. package/dropdown/Dropdown.test.js +189 -0
  98. package/dropdown/types.d.ts +80 -0
  99. package/dropdown/types.js +5 -0
  100. package/file-input/FileInput.d.ts +4 -0
  101. package/file-input/FileInput.js +593 -0
  102. package/file-input/FileInput.stories.tsx +507 -0
  103. package/file-input/FileInput.test.js +457 -0
  104. package/file-input/FileItem.d.ts +14 -0
  105. package/file-input/FileItem.js +186 -0
  106. package/file-input/types.d.ts +112 -0
  107. package/file-input/types.js +5 -0
  108. package/flex/Flex.d.ts +4 -0
  109. package/flex/Flex.js +57 -0
  110. package/flex/Flex.stories.tsx +103 -0
  111. package/flex/types.d.ts +21 -0
  112. package/flex/types.js +5 -0
  113. package/footer/Footer.d.ts +4 -0
  114. package/footer/Footer.js +185 -0
  115. package/footer/Footer.stories.tsx +130 -0
  116. package/footer/Footer.test.js +109 -0
  117. package/footer/Icons.d.ts +2 -0
  118. package/{dist/footer → footer}/Icons.js +16 -16
  119. package/footer/types.d.ts +65 -0
  120. package/footer/types.js +5 -0
  121. package/header/Header.d.ts +7 -0
  122. package/header/Header.js +303 -0
  123. package/header/Header.stories.tsx +172 -0
  124. package/header/Header.test.js +79 -0
  125. package/header/Icons.d.ts +2 -0
  126. package/{dist/header → header}/Icons.js +7 -32
  127. package/header/types.d.ts +47 -0
  128. package/header/types.js +5 -0
  129. package/heading/Heading.d.ts +4 -0
  130. package/{dist/heading → heading}/Heading.js +31 -90
  131. package/heading/Heading.stories.tsx +54 -0
  132. package/heading/Heading.test.js +186 -0
  133. package/heading/types.d.ts +33 -0
  134. package/heading/types.js +5 -0
  135. package/inset/Inset.d.ts +3 -0
  136. package/inset/Inset.js +51 -0
  137. package/inset/Inset.stories.tsx +229 -0
  138. package/inset/types.d.ts +37 -0
  139. package/inset/types.js +5 -0
  140. package/layout/ApplicationLayout.d.ts +20 -0
  141. package/layout/ApplicationLayout.js +171 -0
  142. package/layout/ApplicationLayout.stories.tsx +161 -0
  143. package/layout/Icons.d.ts +5 -0
  144. package/{dist/layout → layout}/Icons.js +19 -8
  145. package/layout/SidenavContext.d.ts +5 -0
  146. package/layout/SidenavContext.js +19 -0
  147. package/layout/types.d.ts +42 -0
  148. package/layout/types.js +5 -0
  149. package/link/Link.d.ts +4 -0
  150. package/link/Link.js +136 -0
  151. package/link/Link.stories.tsx +193 -0
  152. package/link/Link.test.js +83 -0
  153. package/link/types.d.ts +54 -0
  154. package/link/types.js +5 -0
  155. package/main.d.ts +44 -0
  156. package/{dist/main.js → main.js} +111 -109
  157. package/number-input/NumberInput.d.ts +4 -0
  158. package/number-input/NumberInput.js +76 -0
  159. package/number-input/NumberInput.stories.tsx +115 -0
  160. package/number-input/NumberInput.test.js +506 -0
  161. package/number-input/NumberInputContext.d.ts +4 -0
  162. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  163. package/number-input/numberInputContextTypes.d.ts +19 -0
  164. package/number-input/numberInputContextTypes.js +5 -0
  165. package/number-input/types.d.ts +124 -0
  166. package/number-input/types.js +5 -0
  167. package/package.json +40 -29
  168. package/{dist/paginator → paginator}/Icons.js +9 -9
  169. package/paginator/Paginator.d.ts +4 -0
  170. package/paginator/Paginator.js +171 -0
  171. package/paginator/Paginator.stories.tsx +63 -0
  172. package/paginator/Paginator.test.js +308 -0
  173. package/paginator/types.d.ts +38 -0
  174. package/paginator/types.js +5 -0
  175. package/paragraph/Paragraph.d.ts +6 -0
  176. package/paragraph/Paragraph.js +38 -0
  177. package/paragraph/Paragraph.stories.tsx +44 -0
  178. package/password-input/PasswordInput.d.ts +4 -0
  179. package/{dist/password-input → password-input}/PasswordInput.js +45 -77
  180. package/password-input/PasswordInput.stories.tsx +131 -0
  181. package/password-input/PasswordInput.test.js +180 -0
  182. package/password-input/types.d.ts +110 -0
  183. package/password-input/types.js +5 -0
  184. package/progress-bar/ProgressBar.d.ts +4 -0
  185. package/progress-bar/ProgressBar.js +181 -0
  186. package/progress-bar/ProgressBar.stories.jsx +60 -0
  187. package/progress-bar/ProgressBar.test.js +110 -0
  188. package/progress-bar/types.d.ts +36 -0
  189. package/progress-bar/types.js +5 -0
  190. package/quick-nav/QuickNav.d.ts +4 -0
  191. package/quick-nav/QuickNav.js +118 -0
  192. package/quick-nav/QuickNav.stories.tsx +264 -0
  193. package/quick-nav/types.d.ts +21 -0
  194. package/quick-nav/types.js +5 -0
  195. package/radio-group/Radio.d.ts +4 -0
  196. package/radio-group/Radio.js +141 -0
  197. package/radio-group/RadioGroup.d.ts +4 -0
  198. package/radio-group/RadioGroup.js +283 -0
  199. package/radio-group/RadioGroup.stories.tsx +100 -0
  200. package/radio-group/RadioGroup.test.js +695 -0
  201. package/radio-group/types.d.ts +114 -0
  202. package/radio-group/types.js +5 -0
  203. package/resultsetTable/ResultsetTable.d.ts +4 -0
  204. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  205. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  206. package/resultsetTable/ResultsetTable.test.js +348 -0
  207. package/resultsetTable/types.d.ts +67 -0
  208. package/resultsetTable/types.js +5 -0
  209. package/select/Icons.d.ts +10 -0
  210. package/select/Icons.js +93 -0
  211. package/select/Listbox.d.ts +4 -0
  212. package/select/Listbox.js +199 -0
  213. package/select/Option.d.ts +4 -0
  214. package/select/Option.js +110 -0
  215. package/select/Select.d.ts +4 -0
  216. package/select/Select.js +643 -0
  217. package/select/Select.stories.tsx +627 -0
  218. package/select/Select.test.js +2175 -0
  219. package/select/types.d.ts +210 -0
  220. package/select/types.js +5 -0
  221. package/sidenav/Sidenav.d.ts +10 -0
  222. package/sidenav/Sidenav.js +268 -0
  223. package/sidenav/Sidenav.stories.tsx +180 -0
  224. package/sidenav/Sidenav.test.js +44 -0
  225. package/sidenav/types.d.ts +73 -0
  226. package/sidenav/types.js +5 -0
  227. package/slider/Slider.d.ts +4 -0
  228. package/{dist/slider → slider}/Slider.js +76 -162
  229. package/slider/Slider.stories.tsx +177 -0
  230. package/slider/Slider.test.js +150 -0
  231. package/slider/types.d.ts +82 -0
  232. package/slider/types.js +5 -0
  233. package/spinner/Spinner.d.ts +4 -0
  234. package/spinner/Spinner.js +250 -0
  235. package/spinner/Spinner.stories.jsx +103 -0
  236. package/spinner/Spinner.test.js +64 -0
  237. package/spinner/types.d.ts +32 -0
  238. package/spinner/types.js +5 -0
  239. package/switch/Switch.d.ts +4 -0
  240. package/switch/Switch.js +195 -0
  241. package/switch/Switch.stories.tsx +160 -0
  242. package/switch/Switch.test.js +98 -0
  243. package/switch/types.d.ts +62 -0
  244. package/switch/types.js +5 -0
  245. package/table/Table.d.ts +4 -0
  246. package/{dist/table → table}/Table.js +12 -26
  247. package/table/Table.stories.jsx +277 -0
  248. package/table/Table.test.js +26 -0
  249. package/table/types.d.ts +21 -0
  250. package/table/types.js +5 -0
  251. package/tabs/Tabs.d.ts +4 -0
  252. package/tabs/Tabs.js +211 -0
  253. package/tabs/Tabs.stories.tsx +112 -0
  254. package/tabs/Tabs.test.js +140 -0
  255. package/tabs/types.d.ts +82 -0
  256. package/tabs/types.js +5 -0
  257. package/tabs-nav/NavTabs.d.ts +8 -0
  258. package/tabs-nav/NavTabs.js +125 -0
  259. package/tabs-nav/NavTabs.stories.tsx +170 -0
  260. package/tabs-nav/NavTabs.test.js +82 -0
  261. package/tabs-nav/Tab.d.ts +4 -0
  262. package/tabs-nav/Tab.js +132 -0
  263. package/tabs-nav/types.d.ts +53 -0
  264. package/tabs-nav/types.js +5 -0
  265. package/tag/Tag.d.ts +4 -0
  266. package/tag/Tag.js +183 -0
  267. package/tag/Tag.stories.tsx +142 -0
  268. package/tag/Tag.test.js +60 -0
  269. package/tag/types.d.ts +69 -0
  270. package/tag/types.js +5 -0
  271. package/text-input/Suggestion.d.ts +4 -0
  272. package/text-input/Suggestion.js +55 -0
  273. package/text-input/TextInput.d.ts +4 -0
  274. package/{dist/text-input → text-input}/TextInput.js +284 -485
  275. package/text-input/TextInput.stories.tsx +473 -0
  276. package/text-input/TextInput.test.js +1712 -0
  277. package/text-input/types.d.ts +178 -0
  278. package/text-input/types.js +5 -0
  279. package/textarea/Textarea.d.ts +4 -0
  280. package/{dist/textarea → textarea}/Textarea.js +50 -142
  281. package/textarea/Textarea.stories.jsx +157 -0
  282. package/textarea/Textarea.test.js +437 -0
  283. package/textarea/types.d.ts +137 -0
  284. package/textarea/types.js +5 -0
  285. package/toggle-group/ToggleGroup.d.ts +4 -0
  286. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  287. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  288. package/toggle-group/ToggleGroup.test.js +156 -0
  289. package/toggle-group/types.d.ts +105 -0
  290. package/toggle-group/types.js +5 -0
  291. package/typography/Typography.d.ts +4 -0
  292. package/typography/Typography.js +131 -0
  293. package/typography/Typography.stories.tsx +198 -0
  294. package/typography/types.d.ts +18 -0
  295. package/typography/types.js +5 -0
  296. package/useTheme.d.ts +2 -0
  297. package/{dist/useTheme.js → useTheme.js} +2 -2
  298. package/useTranslatedLabels.d.ts +2 -0
  299. package/useTranslatedLabels.js +20 -0
  300. package/wizard/Wizard.d.ts +4 -0
  301. package/wizard/Wizard.js +285 -0
  302. package/wizard/Wizard.stories.tsx +233 -0
  303. package/wizard/Wizard.test.js +141 -0
  304. package/wizard/types.d.ts +65 -0
  305. package/wizard/types.js +5 -0
  306. package/README.md +0 -66
  307. package/babel.config.js +0 -8
  308. package/dist/BackgroundColorContext.js +0 -46
  309. package/dist/ThemeContext.js +0 -248
  310. package/dist/V3Textarea/V3Textarea.js +0 -264
  311. package/dist/accordion/Accordion.js +0 -353
  312. package/dist/accordion-group/AccordionGroup.js +0 -186
  313. package/dist/alert/index.d.ts +0 -51
  314. package/dist/badge/Badge.js +0 -63
  315. package/dist/box/Box.js +0 -156
  316. package/dist/button/Button.js +0 -238
  317. package/dist/card/Card.js +0 -254
  318. package/dist/checkbox/Checkbox.stories.js +0 -144
  319. package/dist/checkbox/readme.md +0 -116
  320. package/dist/chip/Chip.js +0 -265
  321. package/dist/date/Date.js +0 -379
  322. package/dist/date/Date.stories.js +0 -205
  323. package/dist/date/readme.md +0 -73
  324. package/dist/date-input/index.d.ts +0 -95
  325. package/dist/dialog/Dialog.js +0 -218
  326. package/dist/file-input/FileInput.js +0 -644
  327. package/dist/file-input/FileItem.js +0 -280
  328. package/dist/file-input/index.d.ts +0 -81
  329. package/dist/footer/Footer.js +0 -421
  330. package/dist/header/Header.js +0 -434
  331. package/dist/input-text/Icons.js +0 -22
  332. package/dist/input-text/InputText.js +0 -705
  333. package/dist/layout/ApplicationLayout.js +0 -327
  334. package/dist/link/Link.js +0 -237
  335. package/dist/link/readme.md +0 -51
  336. package/dist/main.d.ts +0 -8
  337. package/dist/new-select/NewSelect.js +0 -836
  338. package/dist/new-select/index.d.ts +0 -53
  339. package/dist/number-input/NumberInput.js +0 -136
  340. package/dist/number-input/index.d.ts +0 -113
  341. package/dist/paginator/Paginator.js +0 -283
  342. package/dist/password-input/index.d.ts +0 -94
  343. package/dist/progress-bar/ProgressBar.js +0 -242
  344. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  345. package/dist/progress-bar/readme.md +0 -63
  346. package/dist/radio/Radio.js +0 -209
  347. package/dist/radio/Radio.stories.js +0 -166
  348. package/dist/radio/readme.md +0 -70
  349. package/dist/select/Select.js +0 -549
  350. package/dist/sidenav/Sidenav.js +0 -179
  351. package/dist/slider/readme.md +0 -64
  352. package/dist/spinner/Spinner.js +0 -381
  353. package/dist/spinner/Spinner.stories.js +0 -183
  354. package/dist/spinner/readme.md +0 -65
  355. package/dist/switch/Switch.js +0 -222
  356. package/dist/switch/Switch.stories.js +0 -134
  357. package/dist/switch/readme.md +0 -133
  358. package/dist/tabs/Tabs.js +0 -343
  359. package/dist/tabs/Tabs.stories.js +0 -130
  360. package/dist/tabs/readme.md +0 -78
  361. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  362. package/dist/tabs-for-sections/readme.md +0 -78
  363. package/dist/tag/Tag.js +0 -282
  364. package/dist/text-input/index.d.ts +0 -135
  365. package/dist/textarea/index.d.ts +0 -117
  366. package/dist/toggle/Toggle.js +0 -220
  367. package/dist/toggle/Toggle.stories.js +0 -297
  368. package/dist/toggle/readme.md +0 -80
  369. package/dist/upload/Upload.js +0 -205
  370. package/dist/upload/Upload.stories.js +0 -72
  371. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  372. package/dist/upload/buttons-upload/Icons.js +0 -40
  373. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  374. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  375. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  376. package/dist/upload/file-upload/FileToUpload.js +0 -184
  377. package/dist/upload/file-upload/audio-icon.svg +0 -4
  378. package/dist/upload/file-upload/close.svg +0 -4
  379. package/dist/upload/file-upload/file-icon.svg +0 -4
  380. package/dist/upload/file-upload/video-icon.svg +0 -4
  381. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  382. package/dist/upload/readme.md +0 -37
  383. package/dist/upload/transaction/Icons.js +0 -160
  384. package/dist/upload/transaction/Transaction.js +0 -148
  385. package/dist/upload/transactions/Transactions.js +0 -138
  386. package/dist/wizard/Icons.js +0 -65
  387. package/dist/wizard/Wizard.js +0 -405
  388. package/test/Accordion.test.js +0 -33
  389. package/test/AccordionGroup.test.js +0 -125
  390. package/test/Alert.test.js +0 -53
  391. package/test/Box.test.js +0 -10
  392. package/test/Button.test.js +0 -18
  393. package/test/Card.test.js +0 -30
  394. package/test/Checkbox.test.js +0 -45
  395. package/test/Chip.test.js +0 -25
  396. package/test/Date.test.js +0 -397
  397. package/test/DateInput.test.js +0 -242
  398. package/test/Dialog.test.js +0 -23
  399. package/test/Dropdown.test.js +0 -145
  400. package/test/FileInput.test.js +0 -201
  401. package/test/Footer.test.js +0 -94
  402. package/test/Header.test.js +0 -34
  403. package/test/Heading.test.js +0 -35
  404. package/test/InputText.test.js +0 -248
  405. package/test/Link.test.js +0 -43
  406. package/test/NumberInput.test.js +0 -259
  407. package/test/Paginator.test.js +0 -177
  408. package/test/PasswordInput.test.js +0 -83
  409. package/test/ProgressBar.test.js +0 -35
  410. package/test/Radio.test.js +0 -37
  411. package/test/ResultsetTable.test.js +0 -329
  412. package/test/Select.test.js +0 -212
  413. package/test/Sidenav.test.js +0 -45
  414. package/test/Slider.test.js +0 -74
  415. package/test/Spinner.test.js +0 -32
  416. package/test/Switch.test.js +0 -45
  417. package/test/Table.test.js +0 -36
  418. package/test/Tabs.test.js +0 -109
  419. package/test/TabsForSections.test.js +0 -34
  420. package/test/Tag.test.js +0 -32
  421. package/test/TextInput.test.js +0 -732
  422. package/test/Textarea.test.js +0 -193
  423. package/test/ToggleGroup.test.js +0 -85
  424. package/test/Upload.test.js +0 -60
  425. package/test/V3TextArea.test.js +0 -51
  426. package/test/Wizard.test.js +0 -130
  427. package/test/mocks/pngMock.js +0 -1
  428. package/test/mocks/svgMock.js +0 -1
@@ -1,117 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- /**
12
- * Text to be placed above the textarea.
13
- */
14
- label?: string;
15
- /**
16
- * Name attribute of the textarea element.
17
- */
18
- name?: string;
19
- /**
20
- * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
21
- */
22
- value?: string;
23
- /**
24
- * Helper text to be placed above the textarea.
25
- */
26
- helperText?: string;
27
- /**
28
- * Text to be put as placeholder of the textarea.
29
- */
30
- placeholder?: string;
31
- /**
32
- * If true, the component will be disabled.
33
- */
34
- disabled?: boolean;
35
- /**
36
- * If true, the textarea will be optional, showing '(Optional)'
37
- * next to the label. Otherwise, the field will be considered required
38
- * and an error will be passed as a parameter to the OnBlur and onChange functions
39
- * when it has not been filled.
40
- */
41
- optional?: boolean;
42
- /**
43
- * Defines the textarea's ability to resize vertically. It can be:
44
- * - 'auto': The textarea grows or shrinks automatically in order to fit the content.
45
- * - 'manual': The height of the textarea is enabled to be manually modified.
46
- * - 'none': The textarea has a fixed height and can't be modified.
47
- */
48
- verticalGrow?: "auto" | "manual" | "none";
49
- /**
50
- * Number of rows of the textarea.
51
- */
52
- rows?: number;
53
- /**
54
- * This function will be called when the user types within the textarea.
55
- * An object including the current value and the error (if the value
56
- * entered is not valid) will be passed to this function.
57
- * If there is no error, error will be null.
58
- */
59
- onChange?: (val: { value: string; error: string }) => void;
60
- /**
61
- * This function will be called when the textarea loses the focus. An
62
- * object including the textarea value and the error (if the value entered
63
- * is not valid) will be passed to this function. If there is no error,
64
- * error will be null.
65
- */
66
- onBlur?: (val: { value: string; error: string }) => void;
67
- /**
68
- * If it is defined, the component will change its appearance, showing
69
- * the error below the textarea. If it is not defined, the error
70
- * messages will be managed internally, but never displayed on its own.
71
- */
72
- error?: string;
73
- /**
74
- * Regular expression that defines the valid format allowed by the
75
- * textarea. This will be checked both when the textarea loses the focus
76
- * and while typing within it. If the string entered does not match the
77
- * pattern, the onBlur and onChange functions will be called with the
78
- * current value and an internal error informing that this value does not
79
- * match the pattern. If the pattern is met, the error parameter of both
80
- * events will be null.
81
- */
82
- pattern?: string;
83
- /**
84
- * Specifies the minimun and maximum length allowed by the textarea.
85
- * This will be checked both when the textarea loses the
86
- * focus and while typing within it. If the string entered does not
87
- * comply the length, the onBlur and onChange functions will be called
88
- * with the current value and an internal error informing that the value
89
- * length does not comply the specified range. If a valid length is
90
- * reached, the error parameter of both events will be null.
91
- */
92
- length?: { min: number; max: number };
93
- /**
94
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
95
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
96
- */
97
- autocomplete?: string;
98
- /**
99
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
100
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
101
- */
102
- margin?: Space | Margin;
103
- /**
104
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
105
- */
106
- size?: Size;
107
- /**
108
- * Value of the tabindex attribute.
109
- */
110
- tabIndex?: number;
111
- /**
112
- * Reference to the component.
113
- */
114
- ref?: React.RefObject<HTMLDivElement>;
115
- };
116
-
117
- export default function DxcTextarea(props: Props): JSX.Element;
@@ -1,220 +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 = _interopRequireDefault(require("react"));
19
-
20
- var _lab = require("@material-ui/lab");
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- var _utils = require("../common/utils.js");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
-
30
- function _templateObject4() {
31
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
32
-
33
- _templateObject4 = function _templateObject4() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject3() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 20px;\n height: 20px;\n line-height: 1;\n margin-right: ", ";\n margin-left: ", ";\n"]);
42
-
43
- _templateObject3 = function _templateObject3() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject2() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n line-height: 1;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n"]);
52
-
53
- _templateObject2 = function _templateObject2() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n opacity: ", ";\n cursor: ", ";\n display: inline-block;\n width: ", ";\n }\n\n .MuiToggleButton-label {\n font-size: 14px;\n font-family: ", ";\n color: ", ";\n }\n .MuiButtonBase-root {\n width: ", ";\n min-height: ", ";\n background-color: ", ";\n &:hover {\n background-color: ", ";\n .MuiToggleButton-label {\n color: ", ";\n }\n }\n }\n\n .MuiToggleButton-root {\n min-width: 42px;\n height: 43px;\n border: ", ";\n\n border-radius: 4px !important;\n }\n\n .MuiToggleButton-root.Mui-selected {\n background-color: ", ";\n &:hover {\n background-color: ", ";\n .MuiToggleButton-label {\n color: ", ";\n }\n }\n }\n\n .MuiToggleButton-root:last-child,\n .MuiToggleButton-root:first-child,\n .MuiToggleButton-root:not(:first-child) {\n padding: ", ";\n }\n\n .MuiTouchRipple-child {\n background-color: ", ";\n }\n"]);
62
-
63
- _templateObject = function _templateObject() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- var DxcToggle = function DxcToggle(_ref) {
71
- var _ref$label = _ref.label,
72
- label = _ref$label === void 0 ? "" : _ref$label,
73
- _ref$iconSrc = _ref.iconSrc,
74
- iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
75
- _ref$mode = _ref.mode,
76
- mode = _ref$mode === void 0 ? "basic" : _ref$mode,
77
- _ref$theme = _ref.theme,
78
- theme = _ref$theme === void 0 ? "light" : _ref$theme,
79
- _ref$disableRipple = _ref.disableRipple,
80
- disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
81
- _ref$iconPosition = _ref.iconPosition,
82
- iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
83
- _ref$disabled = _ref.disabled,
84
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
85
- onClick = _ref.onClick,
86
- _ref$selected = _ref.selected,
87
- selected = _ref$selected === void 0 ? false : _ref$selected,
88
- margin = _ref.margin,
89
- _ref$size = _ref.size,
90
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
91
- var colorsTheme = (0, _useTheme["default"])();
92
-
93
- var handlerToggleClick = function handlerToggleClick() {
94
- if (!disabled && typeof onClick === "function") {
95
- onClick(!selected);
96
- }
97
- };
98
-
99
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
100
- theme: colorsTheme
101
- }, _react["default"].createElement(DxcToggleContainer, {
102
- margin: margin,
103
- brightness: theme,
104
- disabled: disabled,
105
- disableRipple: disableRipple,
106
- selected: selected,
107
- label: label,
108
- mode: mode,
109
- iconPosition: iconPosition,
110
- value: true,
111
- size: size,
112
- onClick: handlerToggleClick
113
- }, _react["default"].createElement(_lab.ToggleButton, {
114
- disabled: disabled,
115
- disableRipple: disableRipple,
116
- selected: selected,
117
- label: label,
118
- value: true
119
- }, _react["default"].createElement(ContentContainer, {
120
- iconPosition: iconPosition,
121
- label: label,
122
- iconSrc: iconSrc
123
- }, iconSrc !== "" && _react["default"].createElement(IconContainer, {
124
- iconPosition: iconPosition,
125
- label: label,
126
- src: iconSrc
127
- }), label !== "" && _react["default"].createElement(LabelContainer, null, label)))));
128
- };
129
-
130
- var sizes = {
131
- small: "42px",
132
- medium: "120px",
133
- large: "240px",
134
- fillParent: "100%",
135
- fitContent: "unset"
136
- };
137
-
138
- var calculateWidth = function calculateWidth(margin, size) {
139
- if (size === "fillParent") {
140
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
141
- }
142
-
143
- return sizes[size];
144
- };
145
-
146
- var DxcToggleContainer = _styledComponents["default"].div(_templateObject(), function (props) {
147
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? spaces[props.margin] : "0px";
148
- }, function (props) {
149
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? spaces[props.margin.top] : "";
150
- }, function (props) {
151
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? spaces[props.margin.right] : "";
152
- }, function (props) {
153
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? spaces[props.margin.bottom] : "";
154
- }, function (props) {
155
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? spaces[props.margin.left] : "";
156
- }, function (props) {
157
- return props.disabled ? "0.5" : "1";
158
- }, function (props) {
159
- return props.disabled ? "not-allowed" : "pointer";
160
- }, function (props) {
161
- return calculateWidth(props.margin, props.size);
162
- }, function (props) {
163
- return props.theme.fontFamily;
164
- }, function (props) {
165
- return props.brightness === "dark" && props.mode === "outlined" ? props.theme.white : props.theme.black;
166
- }, function (props) {
167
- return calculateWidth(props.margin, props.size);
168
- }, function (props) {
169
- return props.mode === "outlined" ? "41px" : "43px";
170
- }, function (props) {
171
- return props.mode !== "outlined" ? props.theme.darkWhite : "transparent";
172
- }, function (props) {
173
- return props.mode === "basic" ? props.theme.lightGrey : props.brightness === "dark" ? props.theme.darkGrey : props.theme.darkWhite;
174
- }, function (props) {
175
- return props.brightness === "dark" && props.mode === "outlined" ? props.theme.white : props.theme.black;
176
- }, function (props) {
177
- return props.mode === "basic" ? "none !important" : props.brightness === "dark" && !props.selected ? "2px solid ".concat(props.theme.white, " !important") : props.brightness === "dark" && props.selected ? "2px solid ".concat(props.theme.yellow, " !important") : "2px solid ".concat(props.theme.black, " !important");
178
- }, function (props) {
179
- return props.mode === "outlined" ? props.brightness === "light" ? props.theme.darkWhite : "transparent" : props.theme.yellow;
180
- }, function (props) {
181
- return props.mode === "basic" && props.brightness === "light" ? props.theme.black : props.mode === "basic" && props.brightness === "dark" ? props.theme.lightBlack : props.brightness === "light" ? props.theme.lightGrey : props.theme.darkGrey;
182
- }, function (props) {
183
- return props.mode === "basic" ? props.theme.yellow : props.brightness === "dark" && props.mode === "outlined" ? props.theme.white : props.theme.black;
184
- }, function (props) {
185
- return props.label !== "" && props.size !== "small" ? props.mode === "outlined" ? "8px 30px " : "12px 30px" : props.mode === "outlined" ? "8px 10px " : "12px 10px";
186
- }, function (props) {
187
- return props.mode === "basic" ? props.selected === false ? props.theme.yellow : props.theme.darkWhite : props.selected === false ? props.theme.lightGrey : props.theme.white;
188
- });
189
-
190
- var ContentContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
191
- return props.iconPosition === "after" ? "row-reverse" : "row";
192
- });
193
-
194
- var IconContainer = _styledComponents["default"].img(_templateObject3(), function (props) {
195
- return props.label !== "" && props.iconPosition === "before" ? "10px" : "";
196
- }, function (props) {
197
- return props.label !== "" && props.iconPosition === "after" ? "10px" : "";
198
- });
199
-
200
- var LabelContainer = _styledComponents["default"].span(_templateObject4());
201
-
202
- DxcToggle.propTypes = {
203
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
204
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
205
- mode: _propTypes["default"].oneOf(["basic", "outlined", ""]),
206
- iconPosition: _propTypes["default"].oneOf(["before", "after", ""]),
207
- iconSrc: _propTypes["default"].string,
208
- selected: _propTypes["default"].bool,
209
- disabled: _propTypes["default"].bool,
210
- disableRipple: _propTypes["default"].bool,
211
- onClick: _propTypes["default"].func,
212
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
213
- top: _propTypes["default"].oneOf(Object.keys(spaces)),
214
- bottom: _propTypes["default"].oneOf(Object.keys(spaces)),
215
- left: _propTypes["default"].oneOf(Object.keys(spaces)),
216
- right: _propTypes["default"].oneOf(Object.keys(spaces))
217
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(spaces)))])
218
- };
219
- var _default = DxcToggle;
220
- exports["default"] = _default;
@@ -1,297 +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
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
-
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
-
11
- var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
12
-
13
- var _react = _interopRequireWildcard(require("react"));
14
-
15
- var _react2 = require("@storybook/react");
16
-
17
- var _addonActions = require("@storybook/addon-actions");
18
-
19
- var _addonKnobs = require("@storybook/addon-knobs");
20
-
21
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
22
-
23
- var _Toggle = _interopRequireDefault(require("./Toggle.jsx"));
24
-
25
- var _readme = _interopRequireDefault(require("./readme.md"));
26
-
27
- var onClick = (0, _addonActions.action)("onClick");
28
-
29
- onClick.toString = function () {
30
- return "onClickHandler";
31
- };
32
-
33
- (0, _react2.storiesOf)("Form Components|Toggle", module).add("Types", function () {
34
- var ControlledStory = function ControlledStory(_ref) {
35
- (0, _objectDestructuringEmpty2["default"])(_ref);
36
-
37
- var _useState = (0, _react.useState)(false),
38
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
39
- selected = _useState2[0],
40
- setSelected = _useState2[1];
41
-
42
- var _useState3 = (0, _react.useState)(false),
43
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
44
- selected1 = _useState4[0],
45
- setselected1 = _useState4[1];
46
-
47
- var _useState5 = (0, _react.useState)(false),
48
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
49
- selected2 = _useState6[0],
50
- setselected2 = _useState6[1];
51
-
52
- var _useState7 = (0, _react.useState)(false),
53
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
54
- selected3 = _useState8[0],
55
- setselected3 = _useState8[1];
56
-
57
- var _useState9 = (0, _react.useState)(false),
58
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
59
- selected4 = _useState10[0],
60
- setselected4 = _useState10[1];
61
-
62
- var _useState11 = (0, _react.useState)(false),
63
- _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
64
- selected5 = _useState12[0],
65
- setselected5 = _useState12[1];
66
-
67
- var _useState13 = (0, _react.useState)(false),
68
- _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
69
- selected6 = _useState14[0],
70
- setSelected6 = _useState14[1];
71
-
72
- var _useState15 = (0, _react.useState)(false),
73
- _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
74
- selected7 = _useState16[0],
75
- setselected7 = _useState16[1];
76
-
77
- var _useState17 = (0, _react.useState)(false),
78
- _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
79
- selected8 = _useState18[0],
80
- setselected8 = _useState18[1];
81
-
82
- var _useState19 = (0, _react.useState)(false),
83
- _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
84
- selected9 = _useState20[0],
85
- setselected9 = _useState20[1];
86
-
87
- var _useState21 = (0, _react.useState)(false),
88
- _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
89
- selected10 = _useState22[0],
90
- setselected10 = _useState22[1];
91
-
92
- var _useState23 = (0, _react.useState)(false),
93
- _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
94
- selected11 = _useState24[0],
95
- setselected11 = _useState24[1];
96
-
97
- var click = function click(value) {
98
- setSelected(!value);
99
- };
100
-
101
- var click1 = function click1(value) {
102
- setselected1(!value);
103
- };
104
-
105
- var click2 = function click2(value) {
106
- setselected2(!value);
107
- };
108
-
109
- var click3 = function click3(value) {
110
- setselected3(!value);
111
- };
112
-
113
- var click4 = function click4(value) {
114
- setselected4(!value);
115
- };
116
-
117
- var click5 = function click5(value) {
118
- setselected5(!value);
119
- };
120
-
121
- var click6 = function click6(value) {
122
- setSelected6(!value);
123
- };
124
-
125
- var click7 = function click7(value) {
126
- setselected7(!value);
127
- };
128
-
129
- var click8 = function click8(value) {
130
- setselected8(!value);
131
- };
132
-
133
- var click9 = function click9(value) {
134
- setselected9(!value);
135
- };
136
-
137
- var click10 = function click10(value) {
138
- setselected10(!value);
139
- };
140
-
141
- var click11 = function click11(value) {
142
- setselected11(!value);
143
- };
144
-
145
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
146
- style: {
147
- width: "100%",
148
- display: "inline-flex",
149
- alignItems: "center"
150
- }
151
- }, _react["default"].createElement(_Toggle["default"], {
152
- iconSrc: _amazon["default"],
153
- label: "Toggle 1",
154
- selected: selected,
155
- onClick: click
156
- }), _react["default"].createElement(_Toggle["default"], {
157
- label: "Toggle 2",
158
- selected: true,
159
- disabled: true
160
- }), _react["default"].createElement(_Toggle["default"], {
161
- iconSrc: _amazon["default"],
162
- selected: selected1,
163
- onClick: click1
164
- }), _react["default"].createElement(_Toggle["default"], {
165
- label: "Disabled Ripple",
166
- disableRipple: true,
167
- iconSrc: _amazon["default"],
168
- selected: selected2,
169
- onClick: click2
170
- }), _react["default"].createElement(_Toggle["default"], {
171
- iconSrc: _amazon["default"],
172
- label: "Toggle 1",
173
- mode: "outlined",
174
- selected: false,
175
- disabled: true
176
- }), _react["default"].createElement(_Toggle["default"], {
177
- label: "Toggle 2",
178
- mode: "outlined",
179
- selected: selected3,
180
- onClick: click3
181
- }), _react["default"].createElement(_Toggle["default"], {
182
- iconSrc: _amazon["default"],
183
- mode: "outlined",
184
- selected: selected4,
185
- onClick: click4
186
- }), _react["default"].createElement(_Toggle["default"], {
187
- label: "Disabled Ripple",
188
- disableRipple: true,
189
- iconSrc: _amazon["default"],
190
- mode: "outlined",
191
- selected: selected5,
192
- onClick: click5
193
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
194
- style: {
195
- width: "100%",
196
- display: "inline-flex",
197
- background: "black",
198
- alignItems: "center"
199
- }
200
- }, _react["default"].createElement(_Toggle["default"], {
201
- theme: "dark",
202
- iconSrc: _amazon["default"],
203
- label: "Toggle 1",
204
- selected: selected6,
205
- onClick: click6
206
- }), _react["default"].createElement(_Toggle["default"], {
207
- theme: "dark",
208
- label: "Toggle 2",
209
- selected: false,
210
- disabled: true
211
- }), _react["default"].createElement(_Toggle["default"], {
212
- theme: "dark",
213
- iconSrc: _amazon["default"],
214
- selected: selected7,
215
- onClick: click7
216
- }), _react["default"].createElement(_Toggle["default"], {
217
- label: "Disabled Ripple",
218
- disableRipple: true,
219
- theme: "dark",
220
- iconSrc: _amazon["default"],
221
- selected: selected8,
222
- onClick: click8
223
- }), _react["default"].createElement(_Toggle["default"], {
224
- theme: "dark",
225
- iconSrc: _amazon["default"],
226
- label: "Toggle 1",
227
- mode: "outlined",
228
- selected: true,
229
- disabled: true
230
- }), _react["default"].createElement(_Toggle["default"], {
231
- theme: "dark",
232
- label: "Toggle 2",
233
- mode: "outlined",
234
- selected: selected9,
235
- onClick: click9
236
- }), _react["default"].createElement(_Toggle["default"], {
237
- theme: "dark",
238
- iconSrc: _amazon["default"],
239
- mode: "outlined",
240
- selected: selected10,
241
- onClick: click10
242
- }), _react["default"].createElement(_Toggle["default"], {
243
- label: "Disabled Ripple",
244
- disableRipple: true,
245
- theme: "dark",
246
- iconSrc: _amazon["default"],
247
- mode: "outlined",
248
- selected: selected11,
249
- onClick: click11
250
- })));
251
- };
252
-
253
- return _react["default"].createElement(ControlledStory, null);
254
- }, {
255
- notes: {
256
- markdown: _readme["default"]
257
- }
258
- });
259
-
260
- var knobProps = function knobProps() {
261
- return {
262
- theme: (0, _addonKnobs.select)("Theme", {
263
- light: "light",
264
- dark: "dark"
265
- }, "light"),
266
- iconPosition: (0, _addonKnobs.select)("Icon Position", {
267
- after: "after",
268
- before: "before"
269
- }, "before"),
270
- mode: (0, _addonKnobs.select)("Mode", {
271
- "default": "basic",
272
- alternative: "outlined"
273
- }, "basic"),
274
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
275
- disableRipple: (0, _addonKnobs["boolean"])("Disable ripple", false),
276
- selected: (0, _addonKnobs["boolean"])("Selected", false),
277
- label: (0, _addonKnobs.text)("Label", "label")
278
- };
279
- };
280
-
281
- (0, _react2.storiesOf)("Form Components|Toggle", module).add("Knobs example", function () {
282
- var props = knobProps();
283
- return _react["default"].createElement("div", {
284
- style: {
285
- background: props.theme === "dark" && "black" || "transparent",
286
- display: "flex",
287
- alignItems: "center",
288
- flexWrap: "wrap"
289
- }
290
- }, _react["default"].createElement(_Toggle["default"], (0, _extends2["default"])({}, props, {
291
- iconSrc: _amazon["default"]
292
- })));
293
- }, {
294
- notes: {
295
- markdown: _readme["default"]
296
- }
297
- });