@dxc-technology/halstack-react 0.0.0-05eee9e → 0.0.0-099fc65

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 (383) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +260 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -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 +170 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/types.d.ts +72 -0
  15. package/accordion-group/types.js +5 -0
  16. package/alert/Alert.d.ts +4 -0
  17. package/alert/Alert.js +290 -0
  18. package/alert/Alert.stories.tsx +170 -0
  19. package/alert/types.d.ts +49 -0
  20. package/alert/types.js +5 -0
  21. package/badge/Badge.js +59 -0
  22. package/box/Box.d.ts +4 -0
  23. package/{dist/box → box}/Box.js +13 -51
  24. package/box/Box.stories.tsx +132 -0
  25. package/box/types.d.ts +43 -0
  26. package/box/types.js +5 -0
  27. package/button/Button.d.ts +4 -0
  28. package/button/Button.js +179 -0
  29. package/button/Button.stories.tsx +276 -0
  30. package/button/types.d.ts +57 -0
  31. package/button/types.js +5 -0
  32. package/card/Card.d.ts +4 -0
  33. package/card/Card.js +164 -0
  34. package/card/Card.stories.tsx +201 -0
  35. package/card/ice-cream.jpg +0 -0
  36. package/card/types.d.ts +67 -0
  37. package/card/types.js +5 -0
  38. package/checkbox/Checkbox.d.ts +4 -0
  39. package/checkbox/Checkbox.js +253 -0
  40. package/checkbox/Checkbox.stories.tsx +192 -0
  41. package/checkbox/types.d.ts +60 -0
  42. package/checkbox/types.js +5 -0
  43. package/chip/Chip.d.ts +4 -0
  44. package/chip/Chip.js +199 -0
  45. package/chip/Chip.stories.tsx +121 -0
  46. package/chip/types.d.ts +53 -0
  47. package/chip/types.js +5 -0
  48. package/{dist/common → common}/OpenSans.css +0 -0
  49. package/{dist/common → common}/RequiredComponent.js +3 -11
  50. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  57. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  58. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  59. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  60. package/{dist/common → common}/utils.js +0 -0
  61. package/common/variables.js +1578 -0
  62. package/{dist/date → date}/Date.js +71 -57
  63. package/date/index.d.ts +27 -0
  64. package/date-input/DateInput.d.ts +4 -0
  65. package/date-input/DateInput.js +361 -0
  66. package/date-input/DateInput.stories.tsx +138 -0
  67. package/date-input/types.d.ts +100 -0
  68. package/date-input/types.js +5 -0
  69. package/dialog/Dialog.d.ts +4 -0
  70. package/{dist/dialog → dialog}/Dialog.js +29 -100
  71. package/dialog/Dialog.stories.tsx +212 -0
  72. package/dialog/types.d.ts +43 -0
  73. package/dialog/types.js +5 -0
  74. package/dropdown/Dropdown.d.ts +4 -0
  75. package/dropdown/Dropdown.js +417 -0
  76. package/dropdown/types.d.ts +89 -0
  77. package/dropdown/types.js +5 -0
  78. package/file-input/FileInput.d.ts +4 -0
  79. package/file-input/FileInput.js +511 -0
  80. package/file-input/FileItem.d.ts +14 -0
  81. package/file-input/FileItem.js +184 -0
  82. package/file-input/types.d.ts +87 -0
  83. package/file-input/types.js +5 -0
  84. package/footer/Footer.d.ts +4 -0
  85. package/footer/Footer.js +266 -0
  86. package/footer/Footer.stories.jsx +151 -0
  87. package/footer/Icons.js +77 -0
  88. package/footer/types.d.ts +69 -0
  89. package/footer/types.js +5 -0
  90. package/header/Header.d.ts +7 -0
  91. package/header/Header.js +324 -0
  92. package/header/Header.stories.tsx +162 -0
  93. package/header/Icons.js +34 -0
  94. package/header/types.d.ts +47 -0
  95. package/header/types.js +5 -0
  96. package/heading/Heading.d.ts +4 -0
  97. package/{dist/heading → heading}/Heading.js +30 -93
  98. package/heading/Heading.stories.tsx +53 -0
  99. package/heading/types.d.ts +33 -0
  100. package/heading/types.js +5 -0
  101. package/input-text/Icons.js +22 -0
  102. package/{dist/input-text → input-text}/InputText.js +151 -171
  103. package/input-text/index.d.ts +36 -0
  104. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  105. package/layout/Icons.js +55 -0
  106. package/link/Link.d.ts +3 -0
  107. package/link/Link.js +161 -0
  108. package/link/Link.stories.tsx +146 -0
  109. package/link/types.d.ts +74 -0
  110. package/link/types.js +5 -0
  111. package/main.d.ts +44 -0
  112. package/{dist/main.js → main.js} +121 -69
  113. package/number-input/NumberInput.d.ts +4 -0
  114. package/number-input/NumberInput.js +86 -0
  115. package/number-input/NumberInput.stories.tsx +115 -0
  116. package/number-input/NumberInputContext.d.ts +4 -0
  117. package/number-input/NumberInputContext.js +19 -0
  118. package/number-input/numberInputContextTypes.d.ts +19 -0
  119. package/number-input/numberInputContextTypes.js +5 -0
  120. package/number-input/types.d.ts +117 -0
  121. package/number-input/types.js +5 -0
  122. package/package.json +34 -25
  123. package/paginator/Icons.js +66 -0
  124. package/paginator/Paginator.d.ts +4 -0
  125. package/paginator/Paginator.js +198 -0
  126. package/paginator/Paginator.stories.tsx +63 -0
  127. package/paginator/types.d.ts +38 -0
  128. package/paginator/types.js +5 -0
  129. package/password-input/PasswordInput.d.ts +4 -0
  130. package/password-input/PasswordInput.js +164 -0
  131. package/password-input/PasswordInput.stories.tsx +131 -0
  132. package/password-input/types.d.ts +107 -0
  133. package/password-input/types.js +5 -0
  134. package/progress-bar/ProgressBar.d.ts +4 -0
  135. package/progress-bar/ProgressBar.js +170 -0
  136. package/progress-bar/ProgressBar.stories.jsx +58 -0
  137. package/progress-bar/types.d.ts +37 -0
  138. package/progress-bar/types.js +5 -0
  139. package/radio/Radio.d.ts +4 -0
  140. package/{dist/radio → radio}/Radio.js +17 -52
  141. package/radio/Radio.stories.tsx +192 -0
  142. package/radio/types.d.ts +54 -0
  143. package/radio/types.js +5 -0
  144. package/resultsetTable/ResultsetTable.d.ts +4 -0
  145. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +80 -161
  146. package/resultsetTable/types.d.ts +67 -0
  147. package/resultsetTable/types.js +5 -0
  148. package/select/Select.js +865 -0
  149. package/select/Select.stories.tsx +572 -0
  150. package/select/index.d.ts +131 -0
  151. package/sidenav/Sidenav.d.ts +9 -0
  152. package/sidenav/Sidenav.js +136 -0
  153. package/sidenav/Sidenav.stories.tsx +165 -0
  154. package/sidenav/types.d.ts +50 -0
  155. package/sidenav/types.js +5 -0
  156. package/slider/Slider.d.ts +4 -0
  157. package/slider/Slider.js +317 -0
  158. package/slider/Slider.stories.tsx +177 -0
  159. package/slider/types.d.ts +78 -0
  160. package/slider/types.js +5 -0
  161. package/spinner/Spinner.d.ts +4 -0
  162. package/spinner/Spinner.js +250 -0
  163. package/spinner/Spinner.stories.jsx +102 -0
  164. package/spinner/types.d.ts +32 -0
  165. package/spinner/types.js +5 -0
  166. package/switch/Switch.d.ts +4 -0
  167. package/{dist/switch → switch}/Switch.js +28 -71
  168. package/switch/Switch.stories.tsx +160 -0
  169. package/switch/types.d.ts +58 -0
  170. package/switch/types.js +5 -0
  171. package/table/Table.d.ts +4 -0
  172. package/table/Table.js +118 -0
  173. package/table/Table.stories.jsx +276 -0
  174. package/table/types.d.ts +21 -0
  175. package/table/types.js +5 -0
  176. package/tabs/Tabs.d.ts +4 -0
  177. package/tabs/Tabs.js +213 -0
  178. package/tabs/Tabs.stories.tsx +121 -0
  179. package/tabs/types.d.ts +70 -0
  180. package/tabs/types.js +5 -0
  181. package/tag/Tag.d.ts +4 -0
  182. package/tag/Tag.js +193 -0
  183. package/tag/Tag.stories.tsx +145 -0
  184. package/tag/types.d.ts +60 -0
  185. package/tag/types.js +5 -0
  186. package/text-input/TextInput.d.ts +4 -0
  187. package/text-input/TextInput.js +786 -0
  188. package/text-input/TextInput.stories.tsx +456 -0
  189. package/text-input/types.d.ts +159 -0
  190. package/text-input/types.js +5 -0
  191. package/textarea/Textarea.js +316 -0
  192. package/textarea/Textarea.stories.jsx +135 -0
  193. package/textarea/index.d.ts +127 -0
  194. package/{dist/toggle → toggle}/Toggle.js +15 -49
  195. package/toggle/index.d.ts +21 -0
  196. package/toggle-group/ToggleGroup.d.ts +4 -0
  197. package/toggle-group/ToggleGroup.js +217 -0
  198. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  199. package/toggle-group/types.d.ts +84 -0
  200. package/toggle-group/types.js +5 -0
  201. package/{dist/upload → upload}/Upload.js +11 -19
  202. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  203. package/upload/buttons-upload/Icons.js +40 -0
  204. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  205. package/upload/dragAndDropArea/Icons.js +39 -0
  206. package/upload/file-upload/FileToUpload.js +115 -0
  207. package/upload/file-upload/Icons.js +66 -0
  208. package/{dist/upload → upload}/files-upload/FilesToUpload.js +14 -28
  209. package/upload/index.d.ts +15 -0
  210. package/upload/transaction/Icons.js +160 -0
  211. package/upload/transaction/Transaction.js +104 -0
  212. package/upload/transactions/Transactions.js +94 -0
  213. package/{dist/useTheme.js → useTheme.js} +0 -0
  214. package/wizard/Icons.js +65 -0
  215. package/wizard/Wizard.d.ts +4 -0
  216. package/wizard/Wizard.js +231 -0
  217. package/wizard/Wizard.stories.jsx +224 -0
  218. package/wizard/types.d.ts +64 -0
  219. package/wizard/types.js +5 -0
  220. package/README.md +0 -66
  221. package/babel.config.js +0 -8
  222. package/dist/BackgroundColorContext.js +0 -46
  223. package/dist/ThemeContext.js +0 -216
  224. package/dist/accordion/Accordion.js +0 -356
  225. package/dist/accordion/Accordion.stories.js +0 -207
  226. package/dist/accordion/readme.md +0 -96
  227. package/dist/accordion-group/AccordionGroup.js +0 -188
  228. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  229. package/dist/accordion-group/readme.md +0 -70
  230. package/dist/alert/Alert.js +0 -388
  231. package/dist/alert/Alert.stories.js +0 -158
  232. package/dist/alert/close.svg +0 -4
  233. package/dist/alert/error.svg +0 -4
  234. package/dist/alert/info.svg +0 -4
  235. package/dist/alert/readme.md +0 -43
  236. package/dist/alert/success.svg +0 -4
  237. package/dist/alert/warning.svg +0 -4
  238. package/dist/badge/Badge.js +0 -61
  239. package/dist/button/Button.js +0 -228
  240. package/dist/button/Button.stories.js +0 -224
  241. package/dist/button/readme.md +0 -93
  242. package/dist/card/Card.js +0 -247
  243. package/dist/checkbox/Checkbox.js +0 -233
  244. package/dist/checkbox/Checkbox.stories.js +0 -144
  245. package/dist/checkbox/readme.md +0 -116
  246. package/dist/chip/Chip.js +0 -277
  247. package/dist/common/variables.js +0 -987
  248. package/dist/date/Date.stories.js +0 -205
  249. package/dist/date/calendar.svg +0 -1
  250. package/dist/date/calendar_dark.svg +0 -1
  251. package/dist/date/readme.md +0 -73
  252. package/dist/dialog/Dialog.stories.js +0 -217
  253. package/dist/dialog/readme.md +0 -32
  254. package/dist/dropdown/Dropdown.js +0 -498
  255. package/dist/dropdown/Dropdown.stories.js +0 -249
  256. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  257. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  258. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  259. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  260. package/dist/dropdown/readme.md +0 -69
  261. package/dist/footer/Footer.js +0 -405
  262. package/dist/footer/Footer.stories.js +0 -94
  263. package/dist/footer/dxc_logo_wht.png +0 -0
  264. package/dist/footer/readme.md +0 -41
  265. package/dist/header/Header.js +0 -431
  266. package/dist/header/Header.stories.js +0 -176
  267. package/dist/header/close_icon.svg +0 -1
  268. package/dist/header/dxc_logo_black.png +0 -0
  269. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  270. package/dist/header/dxc_logo_white.png +0 -0
  271. package/dist/header/hamb_menu_black.svg +0 -1
  272. package/dist/header/hamb_menu_white.svg +0 -1
  273. package/dist/header/readme.md +0 -33
  274. package/dist/input-text/InputText.stories.js +0 -209
  275. package/dist/input-text/error.svg +0 -1
  276. package/dist/input-text/readme.md +0 -91
  277. package/dist/layout/facebook.svg +0 -45
  278. package/dist/layout/linkedin.svg +0 -50
  279. package/dist/layout/twitter.svg +0 -53
  280. package/dist/link/Link.js +0 -212
  281. package/dist/link/readme.md +0 -51
  282. package/dist/paginator/Paginator.js +0 -283
  283. package/dist/paginator/images/next.svg +0 -3
  284. package/dist/paginator/images/nextPage.svg +0 -3
  285. package/dist/paginator/images/previous.svg +0 -3
  286. package/dist/paginator/images/previousPage.svg +0 -3
  287. package/dist/paginator/readme.md +0 -50
  288. package/dist/progress-bar/ProgressBar.js +0 -206
  289. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  290. package/dist/progress-bar/readme.md +0 -63
  291. package/dist/radio/Radio.stories.js +0 -166
  292. package/dist/radio/readme.md +0 -70
  293. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  294. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  295. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  296. package/dist/select/Select.js +0 -490
  297. package/dist/select/Select.stories.js +0 -235
  298. package/dist/select/readme.md +0 -72
  299. package/dist/sidenav/Sidenav.js +0 -183
  300. package/dist/slider/Slider.js +0 -267
  301. package/dist/slider/Slider.stories.js +0 -241
  302. package/dist/slider/readme.md +0 -64
  303. package/dist/spinner/Spinner.js +0 -214
  304. package/dist/spinner/Spinner.stories.js +0 -183
  305. package/dist/spinner/readme.md +0 -65
  306. package/dist/switch/Switch.stories.js +0 -134
  307. package/dist/switch/readme.md +0 -133
  308. package/dist/table/Table.js +0 -118
  309. package/dist/tabs/Tabs.js +0 -347
  310. package/dist/tabs/Tabs.stories.js +0 -130
  311. package/dist/tabs/readme.md +0 -78
  312. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  313. package/dist/tabs-for-sections/readme.md +0 -78
  314. package/dist/tag/Tag.js +0 -268
  315. package/dist/textarea/Textarea.js +0 -238
  316. package/dist/toggle/Toggle.stories.js +0 -297
  317. package/dist/toggle/readme.md +0 -80
  318. package/dist/toggle-group/ToggleGroup.js +0 -241
  319. package/dist/toggle-group/readme.md +0 -82
  320. package/dist/upload/Upload.stories.js +0 -72
  321. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  322. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  323. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  324. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -293
  325. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  326. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  327. package/dist/upload/file-upload/FileToUpload.js +0 -162
  328. package/dist/upload/file-upload/audio-icon.svg +0 -4
  329. package/dist/upload/file-upload/close.svg +0 -4
  330. package/dist/upload/file-upload/file-icon.svg +0 -4
  331. package/dist/upload/file-upload/video-icon.svg +0 -4
  332. package/dist/upload/readme.md +0 -37
  333. package/dist/upload/transaction/Transaction.js +0 -152
  334. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  335. package/dist/upload/transaction/audio-icon.svg +0 -4
  336. package/dist/upload/transaction/error-icon.svg +0 -4
  337. package/dist/upload/transaction/file-icon-err.svg +0 -4
  338. package/dist/upload/transaction/file-icon.svg +0 -4
  339. package/dist/upload/transaction/image-icon-err.svg +0 -4
  340. package/dist/upload/transaction/image-icon.svg +0 -4
  341. package/dist/upload/transaction/success-icon.svg +0 -4
  342. package/dist/upload/transaction/video-icon-err.svg +0 -4
  343. package/dist/upload/transaction/video-icon.svg +0 -4
  344. package/dist/upload/transactions/Transactions.js +0 -122
  345. package/dist/wizard/Wizard.js +0 -383
  346. package/dist/wizard/invalid_icon.svg +0 -6
  347. package/dist/wizard/valid_icon.svg +0 -6
  348. package/dist/wizard/validation-wrong.svg +0 -6
  349. package/test/Accordion.test.js +0 -33
  350. package/test/AccordionGroup.test.js +0 -125
  351. package/test/Alert.test.js +0 -53
  352. package/test/Box.test.js +0 -10
  353. package/test/Button.test.js +0 -18
  354. package/test/Card.test.js +0 -30
  355. package/test/Checkbox.test.js +0 -45
  356. package/test/Chip.test.js +0 -25
  357. package/test/Date.test.js +0 -393
  358. package/test/Dialog.test.js +0 -23
  359. package/test/Dropdown.test.js +0 -130
  360. package/test/Footer.test.js +0 -99
  361. package/test/Header.test.js +0 -39
  362. package/test/Heading.test.js +0 -35
  363. package/test/InputText.test.js +0 -240
  364. package/test/Link.test.js +0 -42
  365. package/test/Paginator.test.js +0 -177
  366. package/test/ProgressBar.test.js +0 -35
  367. package/test/Radio.test.js +0 -37
  368. package/test/ResultsetTable.test.js +0 -330
  369. package/test/Select.test.js +0 -192
  370. package/test/Sidenav.test.js +0 -45
  371. package/test/Slider.test.js +0 -82
  372. package/test/Spinner.test.js +0 -27
  373. package/test/Switch.test.js +0 -45
  374. package/test/Table.test.js +0 -36
  375. package/test/Tabs.test.js +0 -109
  376. package/test/TabsForSections.test.js +0 -34
  377. package/test/Tag.test.js +0 -32
  378. package/test/TextArea.test.js +0 -52
  379. package/test/ToggleGroup.test.js +0 -81
  380. package/test/Upload.test.js +0 -60
  381. package/test/Wizard.test.js +0 -130
  382. package/test/mocks/pngMock.js +0 -1
  383. package/test/mocks/svgMock.js +0 -1
@@ -1,133 +0,0 @@
1
- # DXC Checkbox Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcSwitch } from "@dxc-technology/halstack-react";
7
-
8
- <DxcSwitch onChange={handleNewValue} label="Test Switch" checked={checked} />;
9
- ```
10
-
11
- ## Props
12
-
13
- The API properties are the following:
14
-
15
- <table>
16
- <tr style="background-color: grey">
17
- <td>Name</td>
18
- <td>Type</td>
19
- <td>Default</td>
20
- <td>Required</td>
21
- <td>Description</td>
22
- </tr>
23
- <tr>
24
- <td>checked</td>
25
- <td><code> boolean </code></td>
26
- <td>false</td>
27
- <td>No</td>
28
- <td>If true, the component is checked.</td>
29
- </tr>
30
- <tr>
31
- <td>value</td>
32
- <td><code> any </code></td>
33
- <td></td>
34
- <td>No</td>
35
- <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the switch is checked </td>
36
- </tr>
37
- <tr>
38
- <td>label</td>
39
- <td><code>string</code></td>
40
- <td></td>
41
- <td>No</td>
42
- <td>Text to be placed next to the switch.</td>
43
- </tr>
44
- <tr>
45
- <td>labelPosition</td>
46
- <td><code>string: 'before' | 'after'</code></td>
47
- <td><code>'before'</code></td>
48
- <td>No</td>
49
- <td>Whether the label should appear after or before the switch.</td>
50
- </tr>
51
- <tr>
52
- <td>theme</td>
53
- <td><code> string: 'light' |
54
- 'dark'</code></td>
55
- <td><code>'light'</code></td>
56
- <td>No</td>
57
- <td>Uses one of the available component themes.</td>
58
- </tr>
59
- <tr>
60
- <td>name</td>
61
- <td><code>string</code></td>
62
- <td><code>false</code></td>
63
- <td></td>
64
- <td>Name attribute of the input element.</td>
65
- </tr>
66
- <tr>
67
- <td>disabled</td>
68
- <td><code>boolean</code></td>
69
- <td><code>false</code></td>
70
- <td>No</td>
71
- <td>If true, the component will be disabled.</td>
72
- </tr>
73
- <tr>
74
- <td>disableRipple</td>
75
- <td><code>boolean</code></td>
76
- <td><code>false</code></td>
77
- <td>No</td>
78
- <td>If true, the ripple effect will be disabled.</td>
79
- </tr>
80
- <tr>
81
- <td>onChange</td>
82
- <td><code>function</code></td>
83
- <td></td>
84
- <td>No</td>
85
- <td>This function will be called when the user clicks the radio. The new value will be passed as a parameter.<br>
86
- </tr>
87
- </table>
88
-
89
- ## Examples
90
-
91
- - Basic switch - Light theme - Enabled - Label after switch - With ripple
92
-
93
- ```js
94
- import React from "react";
95
- import { DxcSwitch } from "@dxc-technology/halstack-react";
96
-
97
- class App extends React.Component {
98
- state = {
99
- isChecked: true
100
- };
101
- constructor() {
102
- super();
103
- this.handleChange = this.handleChange.bind(this);
104
- }
105
-
106
- handleChange(checked) {
107
- this.setState({
108
- isChecked: checked
109
- });
110
- }
111
-
112
- render() {
113
- return (
114
- <div>
115
- <DxcSwitch
116
- checked={this.state.isChecked}
117
- value="Switch1"
118
- label="Switch 1"
119
- labelPosition="after"
120
- theme="light"
121
- name="Checkbox"
122
- disabled={false}
123
- disableRipple={false}
124
- onChange={event => this.handleChange(event)}
125
- />
126
- </div>
127
- );
128
- }
129
- }
130
- export default App;
131
-
132
-
133
- ```
@@ -1,118 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _variables = require("../common/variables.js");
21
-
22
- var _utils = require("../common/utils.js");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- function _templateObject2() {
27
- var data = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n height: ", ";\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n min-height: 48px;\n padding: 14px 20px 12px 40px;\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n min-height: 60px;\n padding: 16px 20px 16px 40px;\n }\n & th:first-child {\n border-top-left-radius: 4px;\n }\n & th:last-child {\n border-top-right-radius: 4px;\n }\n"]);
28
-
29
- _templateObject2 = function _templateObject2() {
30
- return data;
31
- };
32
-
33
- return data;
34
- }
35
-
36
- function _templateObject() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow-x: auto;\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n &::-webkit-scrollbar {\n height: 6px;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 6px;\n }\n &::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 6px;\n }\n"]);
38
-
39
- _templateObject = function _templateObject() {
40
- return data;
41
- };
42
-
43
- return data;
44
- }
45
-
46
- var DxcTable = function DxcTable(_ref) {
47
- var children = _ref.children,
48
- margin = _ref.margin;
49
- var colorsTheme = (0, _useTheme["default"])();
50
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
51
- theme: colorsTheme.table
52
- }, _react["default"].createElement(DxcTableContainer, {
53
- margin: margin
54
- }, _react["default"].createElement(DxcTableContent, null, children)));
55
- };
56
-
57
- var calculateWidth = function calculateWidth(margin) {
58
- return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
59
- };
60
-
61
- var DxcTableContainer = _styledComponents["default"].div(_templateObject(), function (props) {
62
- return calculateWidth(props.margin);
63
- }, function (props) {
64
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
65
- }, function (props) {
66
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
67
- }, function (props) {
68
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
69
- }, function (props) {
70
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
71
- }, function (props) {
72
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
73
- }, function (props) {
74
- return props.theme.scrollBarThumbColor;
75
- }, function (props) {
76
- return props.theme.scrollBarTrackColor;
77
- });
78
-
79
- var DxcTableContent = _styledComponents["default"].table(_templateObject2(), function (props) {
80
- return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
81
- }, function (props) {
82
- return props.theme.rowHeight;
83
- }, function (props) {
84
- return props.theme.dataBackgroundColor;
85
- }, function (props) {
86
- return props.theme.dataFontFamily;
87
- }, function (props) {
88
- return props.theme.dataFontSize;
89
- }, function (props) {
90
- return props.theme.dataFontStyle;
91
- }, function (props) {
92
- return props.theme.dataFontWeight;
93
- }, function (props) {
94
- return props.theme.dataFontColor;
95
- }, function (props) {
96
- return props.theme.dataFontTextTransform;
97
- }, function (props) {
98
- return props.theme.dataTextAlign;
99
- }, function (props) {
100
- return props.theme.headerBackgroundColor;
101
- }, function (props) {
102
- return props.theme.headerFontFamily;
103
- }, function (props) {
104
- return props.theme.headerFontSize;
105
- }, function (props) {
106
- return props.theme.headerFontStyle;
107
- }, function (props) {
108
- return props.theme.headerFontWeight;
109
- }, function (props) {
110
- return props.theme.headerFontColor;
111
- }, function (props) {
112
- return props.theme.headerFontTextTransform;
113
- }, function (props) {
114
- return props.theme.headerTextAlign;
115
- });
116
-
117
- var _default = DxcTable;
118
- exports["default"] = _default;
package/dist/tabs/Tabs.js DELETED
@@ -1,347 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
19
-
20
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
21
-
22
- var _react = _interopRequireDefault(require("react"));
23
-
24
- var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
25
-
26
- var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
27
-
28
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
29
-
30
- var _propTypes = _interopRequireDefault(require("prop-types"));
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _Badge = _interopRequireDefault(require("../badge/Badge"));
35
-
36
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
37
-
38
- function _templateObject9() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n margin-bottom: ", ";\n margin-right: ", ";\n overflow: hidden;\n display: flex;\n align-items: center;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
40
-
41
- _templateObject9 = function _templateObject9() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject8() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n"]);
50
-
51
- _templateObject8 = function _templateObject8() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject7() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n .MuiTabs-root {\n background: white;\n min-height: ", ";\n\n .MuiTabs-scroller {\n .MuiTabs-flexContainer + span {\n z-index: 4;\n }\n }\n .MuiTab-root {\n text-transform: ", " !important;\n }\n .MuiButtonBase-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n\n padding: ", ";\n height: ", ";\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n font-weight: ", ";\n }\n &:not(.Mui-selected) {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-selected {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-disabled {\n cursor: not-allowed !important;\n pointer-events: all;\n color: ", ";\n font-style: ", ";\n svg {\n color: ", ";\n }\n }\n &:focus {\n outline: ", " auto 1px;\n }\n }\n .MuiTabs-indicator {\n background-color: ", ";\n height: ", ";\n }\n .MuiTabs-scrollButtons {\n min-width: ", ";\n width: ", ";\n padding: 0;\n }\n @media (max-width: 599.95px) {\n .MuiTabs-scrollButtonsDesktop {\n display: flex;\n }\n }\n }\n"]);
60
-
61
- _templateObject7 = function _templateObject7() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject6() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n left: 0px;\n bottom: 0;\n width: 100%;\n height: ", ";\n position: absolute;\n background-color: ", ";\n"]);
70
-
71
- _templateObject6 = function _templateObject6() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject5() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n margin-left: ", ";\n margin-right: ", ";\n"]);
80
-
81
- _templateObject5 = function _templateObject5() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject4() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n right: 0;\n top: ", ";\n width: 23px;\n height: 17px;\n"]);
90
-
91
- _templateObject4 = function _templateObject4() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject3() {
99
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
100
-
101
- _templateObject3 = function _templateObject3() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject2() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n"]);
110
-
111
- _templateObject2 = function _templateObject2() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n"]);
120
-
121
- _templateObject = function _templateObject() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- var DxcTabs = function DxcTabs(_ref) {
129
- var activeTabIndex = _ref.activeTabIndex,
130
- _ref$tabs = _ref.tabs,
131
- tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
132
- onTabClick = _ref.onTabClick,
133
- onTabHover = _ref.onTabHover,
134
- margin = _ref.margin,
135
- _ref$iconPosition = _ref.iconPosition,
136
- iconPosition = _ref$iconPosition === void 0 ? "left" : _ref$iconPosition,
137
- _ref$tabIndex = _ref.tabIndex,
138
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
139
-
140
- var _React$useState = _react["default"].useState(0),
141
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
142
- innerActiveTabIndex = _React$useState2[0],
143
- setInnerActiveTabIndex = _React$useState2[1];
144
-
145
- var colorsTheme = (0, _useTheme["default"])();
146
- var hasLabelAndIcon = tabs && tabs.filter(function (tab) {
147
- return tab.label && tab.icon;
148
- }).length > 0;
149
-
150
- var handleChange = function handleChange(event, newValue) {
151
- if (activeTabIndex == null) {
152
- setInnerActiveTabIndex(newValue);
153
- }
154
-
155
- if (typeof onTabClick === "function") {
156
- onTabClick(newValue);
157
- }
158
- };
159
-
160
- var getTabIndex = function getTabIndex(index, disabled) {
161
- return (activeTabIndex === index || innerActiveTabIndex === index) && !disabled ? tabIndex : -1;
162
- };
163
-
164
- var getLabelForTab = function getLabelForTab(tab) {
165
- return _react["default"].createElement(ParentLabelSpan, null, _react["default"].createElement(MainLabelContainer, {
166
- hasBadge: tab.notificationNumber
167
- }, _react["default"].createElement(TabLabelContainer, {
168
- hasLabelAndIcon: hasLabelAndIcon,
169
- iconPosition: iconPosition
170
- }, tab.icon ? _react["default"].createElement(TabIconContainer, {
171
- hasLabelAndIcon: hasLabelAndIcon,
172
- iconPosition: iconPosition
173
- }, (0, _typeof2["default"])(tab.icon) === "object" ? tab.icon : _react["default"].createElement(tab.icon)) : tab.iconSrc && _react["default"].createElement(TabIcon, {
174
- src: tab.iconSrc
175
- }), _react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && _react["default"].createElement(BadgeContainer, {
176
- hasLabelAndIcon: hasLabelAndIcon,
177
- iconPosition: iconPosition
178
- }, _react["default"].createElement(_Badge["default"], {
179
- notificationText: tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
180
- })));
181
- };
182
-
183
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
184
- theme: colorsTheme.tabs
185
- }, _react["default"].createElement(DxCTabs, {
186
- margin: margin,
187
- hasLabelAndIcon: hasLabelAndIcon,
188
- iconPosition: iconPosition
189
- }, _react["default"].createElement(Underline, null), _react["default"].createElement(_Tabs["default"], {
190
- value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
191
- onChange: handleChange,
192
- variant: "scrollable",
193
- scrollButtons: "auto"
194
- }, tabs.map(function (tab, i) {
195
- var tabContent = _react["default"].forwardRef(function (props, ref) {
196
- return _react["default"].createElement("div", (0, _extends2["default"])({
197
- role: "button"
198
- }, props, {
199
- ref: ref
200
- }));
201
- });
202
-
203
- return _react["default"].createElement(_Tab["default"], {
204
- tabIndex: (activeTabIndex === i || innerActiveTabIndex === i) && !tab.isDisabled ? tabIndex : -1,
205
- key: "tab".concat(i).concat(tab.label),
206
- label: getLabelForTab(tab),
207
- disabled: tab.isDisabled,
208
- disableRipple: true,
209
- onMouseEnter: function onMouseEnter() {
210
- onTabHover(i);
211
- },
212
- onMouseLeave: function onMouseLeave() {
213
- onTabHover(null);
214
- }
215
- });
216
- }))));
217
- };
218
-
219
- var ParentLabelSpan = _styledComponents["default"].div(_templateObject());
220
-
221
- var TabLabelContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
222
- return props.hasLabelAndIcon && props.iconPosition === "top" && "column" || "row";
223
- });
224
-
225
- var LabelTextContainer = _styledComponents["default"].div(_templateObject3());
226
-
227
- var BadgeContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
228
- return props.hasLabelAndIcon && props.iconPosition === "top" && "0" || "5px";
229
- });
230
-
231
- var MainLabelContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
232
- return props.hasBadge && "35px" || "unset";
233
- }, function (props) {
234
- return props.hasBadge && "35px" || "unset";
235
- });
236
-
237
- var Underline = _styledComponents["default"].div(_templateObject6(), function (props) {
238
- return props.theme.dividerThickness;
239
- }, function (props) {
240
- return props.theme.dividerColor;
241
- });
242
-
243
- var DxCTabs = _styledComponents["default"].div(_templateObject7(), function (props) {
244
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
245
- }, function (props) {
246
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
247
- }, function (props) {
248
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
249
- }, function (props) {
250
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
251
- }, function (props) {
252
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
253
- }, function (props) {
254
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
255
- }, function (props) {
256
- return props.theme.fontTextTransform;
257
- }, function (props) {
258
- return props.theme.fontFamily;
259
- }, function (props) {
260
- return props.theme.fontSize;
261
- }, function (props) {
262
- return props.theme.fontStyle;
263
- }, function (props) {
264
- return props.theme.fontWeight;
265
- }, function (props) {
266
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "12px 16px" || "8px 16px";
267
- }, function (props) {
268
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
269
- }, function (props) {
270
- return props.theme.minWidth;
271
- }, function (props) {
272
- return props.theme.maxWidth;
273
- }, function (props) {
274
- return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && props.theme.minHeight || props.theme.minHeightWithLabelAndIcon;
275
- }, function (props) {
276
- return "".concat(props.theme.hoverBackgroundColor, " !important");
277
- }, function (props) {
278
- return "".concat(props.theme.pressedBackgroundColor, " !important");
279
- }, function (props) {
280
- return "".concat(props.theme.pressedFontWeight, " !important");
281
- }, function (props) {
282
- return props.theme.unselectedBackgroundColor;
283
- }, function (props) {
284
- return props.theme.unselectedFontColor;
285
- }, function (props) {
286
- return props.theme.unselectedIconColor;
287
- }, function (props) {
288
- return props.theme.selectedBackgroundColor;
289
- }, function (props) {
290
- return props.theme.selectedFontColor;
291
- }, function (props) {
292
- return props.theme.selectedIconColor;
293
- }, function (props) {
294
- return props.theme.disabledFontColor;
295
- }, function (props) {
296
- return props.theme.disabledFontStyle;
297
- }, function (props) {
298
- return props.theme.disabledIconColor;
299
- }, function (props) {
300
- return props.theme.focusOutline;
301
- }, function (props) {
302
- return props.theme.selectedUnderlineColor;
303
- }, function (props) {
304
- return props.theme.selectedUnderlineThickness;
305
- }, function (props) {
306
- return props.theme.scrollButtonsWidth;
307
- }, function (props) {
308
- return props.theme.scrollButtonsWidth;
309
- });
310
-
311
- var TabIcon = _styledComponents["default"].img(_templateObject8());
312
-
313
- var TabIconContainer = _styledComponents["default"].div(_templateObject9(), function (props) {
314
- return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";
315
- }, function (props) {
316
- return props.hasLabelAndIcon && props.iconPosition === "left" && "12px" || "";
317
- });
318
-
319
- DxcTabs.propTypes = {
320
- activeTabIndex: _propTypes["default"].number,
321
- onTabClick: _propTypes["default"].func,
322
- onTabHover: _propTypes["default"].func,
323
- tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
324
- label: _propTypes["default"].string,
325
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
326
- iconSrc: _propTypes["default"].string,
327
- isDisabled: _propTypes["default"].bool,
328
- notificationNumber: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].number])
329
- })),
330
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
331
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
332
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
333
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
334
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
335
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
336
- iconPosition: _propTypes["default"].oneOf(["top", "left"]),
337
- tabIndex: _propTypes["default"].number
338
- };
339
- DxcTabs.defaultProps = {
340
- activeTabIndex: null,
341
- tabs: [],
342
- onTabClick: function onTabClick() {},
343
- onTabHover: function onTabHover() {},
344
- iconPosition: "top"
345
- };
346
- var _default = DxcTabs;
347
- exports["default"] = _default;