@dxc-technology/halstack-react 0.0.0-b177758 → 0.0.0-b39a1d2

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 (389) 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/box/Box.js +126 -0
  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.js +221 -0
  44. package/chip/Chip.stories.tsx +121 -0
  45. package/chip/index.d.ts +22 -0
  46. package/{dist/common → common}/OpenSans.css +0 -0
  47. package/{dist/common → common}/RequiredComponent.js +5 -19
  48. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  57. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  58. package/common/utils.js +22 -0
  59. package/common/variables.js +1578 -0
  60. package/{dist/date → date}/Date.js +87 -70
  61. package/date/index.d.ts +27 -0
  62. package/date-input/DateInput.d.ts +4 -0
  63. package/date-input/DateInput.js +361 -0
  64. package/date-input/DateInput.stories.tsx +138 -0
  65. package/date-input/types.d.ts +100 -0
  66. package/date-input/types.js +5 -0
  67. package/dialog/Dialog.d.ts +4 -0
  68. package/dialog/Dialog.js +165 -0
  69. package/dialog/Dialog.stories.tsx +212 -0
  70. package/dialog/types.d.ts +43 -0
  71. package/dialog/types.js +5 -0
  72. package/dropdown/Dropdown.d.ts +4 -0
  73. package/dropdown/Dropdown.js +417 -0
  74. package/dropdown/types.d.ts +89 -0
  75. package/dropdown/types.js +5 -0
  76. package/file-input/FileInput.d.ts +4 -0
  77. package/file-input/FileInput.js +511 -0
  78. package/file-input/FileItem.d.ts +14 -0
  79. package/file-input/FileItem.js +184 -0
  80. package/file-input/types.d.ts +87 -0
  81. package/file-input/types.js +5 -0
  82. package/footer/Footer.d.ts +4 -0
  83. package/footer/Footer.js +266 -0
  84. package/footer/Footer.stories.jsx +151 -0
  85. package/footer/Icons.js +77 -0
  86. package/footer/types.d.ts +61 -0
  87. package/footer/types.js +5 -0
  88. package/header/Header.d.ts +7 -0
  89. package/header/Header.js +324 -0
  90. package/header/Header.stories.tsx +162 -0
  91. package/header/Icons.js +34 -0
  92. package/header/types.d.ts +47 -0
  93. package/header/types.js +5 -0
  94. package/heading/Heading.d.ts +4 -0
  95. package/heading/Heading.js +159 -0
  96. package/heading/Heading.stories.tsx +53 -0
  97. package/heading/types.d.ts +33 -0
  98. package/heading/types.js +5 -0
  99. package/input-text/Icons.js +22 -0
  100. package/input-text/InputText.js +611 -0
  101. package/input-text/index.d.ts +36 -0
  102. package/layout/ApplicationLayout.js +235 -0
  103. package/layout/Icons.js +55 -0
  104. package/link/Link.d.ts +3 -0
  105. package/link/Link.js +161 -0
  106. package/link/Link.stories.tsx +146 -0
  107. package/link/types.d.ts +74 -0
  108. package/link/types.js +5 -0
  109. package/main.d.ts +44 -0
  110. package/{dist/main.js → main.js} +137 -53
  111. package/number-input/NumberInput.d.ts +4 -0
  112. package/number-input/NumberInput.js +86 -0
  113. package/number-input/NumberInput.stories.tsx +115 -0
  114. package/number-input/NumberInputContext.d.ts +4 -0
  115. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +6 -2
  116. package/number-input/numberInputContextTypes.d.ts +19 -0
  117. package/number-input/numberInputContextTypes.js +5 -0
  118. package/number-input/types.d.ts +117 -0
  119. package/number-input/types.js +5 -0
  120. package/package.json +38 -23
  121. package/paginator/Icons.js +66 -0
  122. package/paginator/Paginator.d.ts +4 -0
  123. package/paginator/Paginator.js +198 -0
  124. package/paginator/Paginator.stories.tsx +63 -0
  125. package/paginator/types.d.ts +38 -0
  126. package/paginator/types.js +5 -0
  127. package/password-input/PasswordInput.d.ts +4 -0
  128. package/password-input/PasswordInput.js +164 -0
  129. package/password-input/PasswordInput.stories.tsx +131 -0
  130. package/password-input/types.d.ts +107 -0
  131. package/password-input/types.js +5 -0
  132. package/progress-bar/ProgressBar.d.ts +4 -0
  133. package/progress-bar/ProgressBar.js +170 -0
  134. package/progress-bar/ProgressBar.stories.jsx +58 -0
  135. package/progress-bar/types.d.ts +37 -0
  136. package/progress-bar/types.js +5 -0
  137. package/radio/Radio.d.ts +4 -0
  138. package/radio/Radio.js +174 -0
  139. package/radio/Radio.stories.tsx +192 -0
  140. package/radio/types.d.ts +54 -0
  141. package/radio/types.js +5 -0
  142. package/resultsetTable/ResultsetTable.d.ts +4 -0
  143. package/resultsetTable/ResultsetTable.js +251 -0
  144. package/resultsetTable/types.d.ts +67 -0
  145. package/resultsetTable/types.js +5 -0
  146. package/select/Select.js +865 -0
  147. package/select/Select.stories.tsx +572 -0
  148. package/select/index.d.ts +131 -0
  149. package/sidenav/Sidenav.d.ts +9 -0
  150. package/sidenav/Sidenav.js +136 -0
  151. package/sidenav/Sidenav.stories.tsx +165 -0
  152. package/sidenav/types.d.ts +50 -0
  153. package/sidenav/types.js +5 -0
  154. package/slider/Slider.d.ts +4 -0
  155. package/slider/Slider.js +317 -0
  156. package/slider/Slider.stories.tsx +177 -0
  157. package/slider/types.d.ts +78 -0
  158. package/slider/types.js +5 -0
  159. package/spinner/Spinner.d.ts +4 -0
  160. package/spinner/Spinner.js +250 -0
  161. package/spinner/Spinner.stories.jsx +102 -0
  162. package/spinner/types.d.ts +32 -0
  163. package/spinner/types.js +5 -0
  164. package/switch/Switch.d.ts +4 -0
  165. package/switch/Switch.js +179 -0
  166. package/switch/Switch.stories.tsx +160 -0
  167. package/switch/types.d.ts +58 -0
  168. package/switch/types.js +5 -0
  169. package/table/Table.d.ts +4 -0
  170. package/table/Table.js +118 -0
  171. package/table/Table.stories.jsx +276 -0
  172. package/table/types.d.ts +21 -0
  173. package/table/types.js +5 -0
  174. package/tabs/Tabs.d.ts +4 -0
  175. package/tabs/Tabs.js +213 -0
  176. package/tabs/Tabs.stories.tsx +121 -0
  177. package/tabs/types.d.ts +70 -0
  178. package/tabs/types.js +5 -0
  179. package/tag/Tag.d.ts +4 -0
  180. package/tag/Tag.js +193 -0
  181. package/tag/Tag.stories.tsx +145 -0
  182. package/tag/types.d.ts +60 -0
  183. package/tag/types.js +5 -0
  184. package/text-input/TextInput.d.ts +4 -0
  185. package/text-input/TextInput.js +786 -0
  186. package/text-input/TextInput.stories.tsx +456 -0
  187. package/text-input/types.d.ts +159 -0
  188. package/text-input/types.js +5 -0
  189. package/textarea/Textarea.js +316 -0
  190. package/textarea/Textarea.stories.jsx +135 -0
  191. package/textarea/index.d.ts +127 -0
  192. package/{dist/toggle → toggle}/Toggle.js +30 -67
  193. package/toggle/index.d.ts +21 -0
  194. package/toggle-group/ToggleGroup.d.ts +4 -0
  195. package/toggle-group/ToggleGroup.js +217 -0
  196. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  197. package/toggle-group/types.d.ts +84 -0
  198. package/toggle-group/types.js +5 -0
  199. package/{dist/upload → upload}/Upload.js +23 -22
  200. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  201. package/upload/buttons-upload/Icons.js +40 -0
  202. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  203. package/upload/dragAndDropArea/Icons.js +39 -0
  204. package/upload/file-upload/FileToUpload.js +115 -0
  205. package/upload/file-upload/Icons.js +66 -0
  206. package/upload/files-upload/FilesToUpload.js +109 -0
  207. package/upload/index.d.ts +15 -0
  208. package/upload/transaction/Icons.js +160 -0
  209. package/upload/transaction/Transaction.js +104 -0
  210. package/upload/transactions/Transactions.js +94 -0
  211. package/useTheme.js +22 -0
  212. package/wizard/Icons.js +65 -0
  213. package/wizard/Wizard.d.ts +4 -0
  214. package/wizard/Wizard.js +231 -0
  215. package/wizard/Wizard.stories.jsx +224 -0
  216. package/wizard/types.d.ts +64 -0
  217. package/wizard/types.js +5 -0
  218. package/README.md +0 -66
  219. package/babel.config.js +0 -4
  220. package/dist/accordion/Accordion.js +0 -248
  221. package/dist/accordion/Accordion.stories.js +0 -207
  222. package/dist/accordion/readme.md +0 -96
  223. package/dist/alert/Alert.js +0 -304
  224. package/dist/alert/Alert.stories.js +0 -158
  225. package/dist/alert/close.svg +0 -4
  226. package/dist/alert/error.svg +0 -4
  227. package/dist/alert/info.svg +0 -4
  228. package/dist/alert/readme.md +0 -43
  229. package/dist/alert/success.svg +0 -4
  230. package/dist/alert/warning.svg +0 -4
  231. package/dist/box/Box.js +0 -148
  232. package/dist/button/Button.js +0 -181
  233. package/dist/button/Button.stories.js +0 -224
  234. package/dist/button/readme.md +0 -93
  235. package/dist/card/Card.js +0 -217
  236. package/dist/checkbox/Checkbox.js +0 -240
  237. package/dist/checkbox/Checkbox.stories.js +0 -144
  238. package/dist/checkbox/readme.md +0 -116
  239. package/dist/chip/Chip.js +0 -173
  240. package/dist/common/services/example-service.js +0 -10
  241. package/dist/common/services/example-service.test.js +0 -12
  242. package/dist/common/utils.js +0 -42
  243. package/dist/common/variables.js +0 -438
  244. package/dist/date/Date.stories.js +0 -205
  245. package/dist/date/calendar.svg +0 -1
  246. package/dist/date/calendar_dark.svg +0 -1
  247. package/dist/date/readme.md +0 -73
  248. package/dist/dialog/Dialog.js +0 -197
  249. package/dist/dialog/Dialog.stories.js +0 -217
  250. package/dist/dialog/readme.md +0 -32
  251. package/dist/dropdown/Dropdown.js +0 -416
  252. package/dist/dropdown/Dropdown.stories.js +0 -249
  253. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  254. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  255. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  256. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  257. package/dist/dropdown/readme.md +0 -69
  258. package/dist/footer/Footer.js +0 -346
  259. package/dist/footer/Footer.stories.js +0 -94
  260. package/dist/footer/dxc_logo_wht.png +0 -0
  261. package/dist/footer/readme.md +0 -41
  262. package/dist/header/Header.js +0 -360
  263. package/dist/header/Header.stories.js +0 -176
  264. package/dist/header/close_icon.svg +0 -1
  265. package/dist/header/dxc_logo_black.png +0 -0
  266. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  267. package/dist/header/dxc_logo_white.png +0 -0
  268. package/dist/header/hamb_menu_black.svg +0 -1
  269. package/dist/header/hamb_menu_white.svg +0 -1
  270. package/dist/header/readme.md +0 -33
  271. package/dist/heading/Heading.js +0 -153
  272. package/dist/input-text/InputText.js +0 -519
  273. package/dist/input-text/InputText.stories.js +0 -209
  274. package/dist/input-text/error.svg +0 -1
  275. package/dist/input-text/readme.md +0 -91
  276. package/dist/layout/ApplicationLayout.js +0 -320
  277. package/dist/layout/SideNav.js +0 -67
  278. package/dist/layout/facebook.svg +0 -45
  279. package/dist/layout/linkedin.svg +0 -50
  280. package/dist/layout/twitter.svg +0 -53
  281. package/dist/link/Link.js +0 -136
  282. package/dist/link/readme.md +0 -51
  283. package/dist/paginator/Paginator.js +0 -196
  284. package/dist/paginator/images/next.svg +0 -3
  285. package/dist/paginator/images/nextPage.svg +0 -3
  286. package/dist/paginator/images/previous.svg +0 -3
  287. package/dist/paginator/images/previousPage.svg +0 -3
  288. package/dist/paginator/readme.md +0 -50
  289. package/dist/progress-bar/ProgressBar.js +0 -185
  290. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  291. package/dist/progress-bar/readme.md +0 -63
  292. package/dist/radio/Radio.js +0 -195
  293. package/dist/radio/Radio.stories.js +0 -166
  294. package/dist/radio/readme.md +0 -70
  295. package/dist/resultsetTable/ResultsetTable.js +0 -333
  296. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  297. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  298. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  299. package/dist/select/Select.js +0 -451
  300. package/dist/select/Select.stories.js +0 -235
  301. package/dist/select/readme.md +0 -72
  302. package/dist/sidenav/Sidenav.js +0 -222
  303. package/dist/sidenav/arrow_icon.svg +0 -3
  304. package/dist/slider/Slider.js +0 -258
  305. package/dist/slider/Slider.stories.js +0 -241
  306. package/dist/slider/readme.md +0 -64
  307. package/dist/spinner/Spinner.js +0 -193
  308. package/dist/spinner/Spinner.stories.js +0 -183
  309. package/dist/spinner/readme.md +0 -65
  310. package/dist/switch/Switch.js +0 -199
  311. package/dist/switch/Switch.stories.js +0 -134
  312. package/dist/switch/readme.md +0 -133
  313. package/dist/table/Table.js +0 -93
  314. package/dist/tabs/Tabs.js +0 -172
  315. package/dist/tabs/Tabs.stories.js +0 -130
  316. package/dist/tabs/readme.md +0 -78
  317. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  318. package/dist/tabs-for-sections/readme.md +0 -78
  319. package/dist/tag/Tag.js +0 -217
  320. package/dist/textarea/Textarea.js +0 -227
  321. package/dist/toggle/Toggle.stories.js +0 -297
  322. package/dist/toggle/readme.md +0 -80
  323. package/dist/toggle-group/ToggleGroup.js +0 -214
  324. package/dist/toggle-group/readme.md +0 -82
  325. package/dist/upload/Upload.stories.js +0 -72
  326. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  327. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  328. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  329. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  330. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  331. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  332. package/dist/upload/file-upload/FileToUpload.js +0 -158
  333. package/dist/upload/file-upload/audio-icon.svg +0 -4
  334. package/dist/upload/file-upload/close.svg +0 -4
  335. package/dist/upload/file-upload/file-icon.svg +0 -4
  336. package/dist/upload/file-upload/video-icon.svg +0 -4
  337. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  338. package/dist/upload/readme.md +0 -37
  339. package/dist/upload/transaction/Transaction.js +0 -155
  340. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  341. package/dist/upload/transaction/audio-icon.svg +0 -4
  342. package/dist/upload/transaction/error-icon.svg +0 -4
  343. package/dist/upload/transaction/file-icon-err.svg +0 -4
  344. package/dist/upload/transaction/file-icon.svg +0 -4
  345. package/dist/upload/transaction/image-icon-err.svg +0 -4
  346. package/dist/upload/transaction/image-icon.svg +0 -4
  347. package/dist/upload/transaction/success-icon.svg +0 -4
  348. package/dist/upload/transaction/video-icon-err.svg +0 -4
  349. package/dist/upload/transaction/video-icon.svg +0 -4
  350. package/dist/upload/transactions/Transactions.js +0 -120
  351. package/dist/wizard/Wizard.js +0 -327
  352. package/dist/wizard/invalid_icon.svg +0 -6
  353. package/dist/wizard/valid_icon.svg +0 -6
  354. package/dist/wizard/validation-wrong.svg +0 -6
  355. package/test/Accordion.test.js +0 -33
  356. package/test/Alert.test.js +0 -53
  357. package/test/Box.test.js +0 -10
  358. package/test/Button.test.js +0 -18
  359. package/test/Card.test.js +0 -30
  360. package/test/Checkbox.test.js +0 -45
  361. package/test/Chip.test.js +0 -25
  362. package/test/Date.test.js +0 -393
  363. package/test/Dialog.test.js +0 -23
  364. package/test/Dropdown.test.js +0 -130
  365. package/test/Footer.test.js +0 -99
  366. package/test/Header.test.js +0 -39
  367. package/test/Heading.test.js +0 -35
  368. package/test/InputText.test.js +0 -236
  369. package/test/Link.test.js +0 -25
  370. package/test/Paginator.test.js +0 -165
  371. package/test/ProgressBar.test.js +0 -35
  372. package/test/Radio.test.js +0 -37
  373. package/test/ResultsetTable.test.js +0 -282
  374. package/test/Select.test.js +0 -191
  375. package/test/Sidenav.test.js +0 -87
  376. package/test/Slider.test.js +0 -65
  377. package/test/Spinner.test.js +0 -27
  378. package/test/Switch.test.js +0 -45
  379. package/test/Table.test.js +0 -36
  380. package/test/Tabs.test.js +0 -88
  381. package/test/TabsForSections.test.js +0 -34
  382. package/test/Tag.test.js +0 -32
  383. package/test/TextArea.test.js +0 -52
  384. package/test/Toggle.test.js +0 -43
  385. package/test/ToggleGroup.test.js +0 -81
  386. package/test/Upload.test.js +0 -60
  387. package/test/Wizard.test.js +0 -130
  388. package/test/mocks/pngMock.js +0 -1
  389. package/test/mocks/svgMock.js +0 -1
@@ -1,116 +0,0 @@
1
- # DXC Checkbox Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
7
-
8
- <DxcCheckbox onChange={handleNewValue} label="Test Checkbox" checked={checked} />;
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>checked: boolean</td>
21
- <td><code>false</code></td>
22
- <td>If true, the component is checked.</td>
23
- </tr>
24
- <tr>
25
- <td>value: any</td>
26
- <td></td>
27
- <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 checkbox is checked </td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td></td>
32
- <td>Text to be placed next to the checkbox.</td>
33
- </tr>
34
- <tr>
35
- <td>labelPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the label should appear after or before the checkbox.</td>
38
- </tr>
39
- <tr>
40
- <td>theme: 'light' | 'dark'</td>
41
- <td><code>'light'</code></td>
42
- <td>Uses one of the available component themes.</td>
43
- </tr>
44
- <tr>
45
- <td>name: string</td>
46
- <td></td>
47
- <td>Name attribute of the input element.</td>
48
- </tr>
49
- <tr>
50
- <td>disabled: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the component will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>required: boolean</td>
56
- <td><code>false</code></td>
57
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
58
- </tr>
59
- <tr>
60
- <td>disableRipple: boolean</td>
61
- <td><code>false</code></td>
62
- <td>If true, the ripple effect will be disabled.</td>
63
- </tr>
64
- <tr>
65
- <td>onChange: function</td>
66
- <td></td>
67
- <td>This function will be called when the user clicks the checkbox. The new value will be passed as a parameter.<br>
68
- </td>
69
- </tr>
70
- </table>
71
-
72
- ## Examples
73
-
74
- - Basic checkbox - Light theme - Enabled - Label after checkbox - With ripple
75
-
76
- ```js
77
- import React from "react";
78
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
79
-
80
- class App extends React.Component {
81
- state = {
82
- isChecked: true
83
- };
84
- constructor() {
85
- super();
86
- this.handleChange = this.handleChange.bind(this);
87
- }
88
-
89
- handleChange(checked) {
90
- this.setState({
91
- isChecked: checked
92
- });
93
- }
94
-
95
- render() {
96
- return (
97
- <div>
98
- <DxcCheckbox
99
- checked={this.state.isChecked}
100
- value="Checkbox1"
101
- label="Checkbox 1"
102
- labelPosition="after"
103
- theme="light"
104
- name="Checkbox"
105
- disabled={false}
106
- disableRipple={false}
107
- onChange={event => this.handleChange(event)}
108
- />
109
- </div>
110
- );
111
- }
112
- }
113
- export default App;
114
-
115
-
116
- ```
package/dist/chip/Chip.js DELETED
@@ -1,173 +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 _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
27
-
28
- require("../common/OpenSans.css");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- function _templateObject4() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n margin-right: ", ";\n max-width: 24px;\n max-height: 24px;\n"]);
34
-
35
- _templateObject4 = function _templateObject4() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject3() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n margin-left: ", ";\n max-width: 24px;\n max-height: 24px;\n"]);
44
-
45
- _templateObject3 = function _templateObject3() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject2() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 16px;\n font-family: \"Open Sans\";\n line-height: 24px;\n color: ", ";\n cursor: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"]);
54
-
55
- _templateObject2 = function _templateObject2() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n border-radius: 50px;\n margin: 2px;\n max-width: ", ";\n background-color: ", ";\n ", ";\n height: ", ";\n\n padding: 10px 20px;\n cursor: ", ";\n opacity: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
64
-
65
- _templateObject = function _templateObject() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- var DxcChip = function DxcChip(_ref) {
73
- var label = _ref.label,
74
- suffixIconSrc = _ref.suffixIconSrc,
75
- onClickSuffix = _ref.onClickSuffix,
76
- prefixIconSrc = _ref.prefixIconSrc,
77
- onClickPrefix = _ref.onClickPrefix,
78
- disabled = _ref.disabled,
79
- margin = _ref.margin;
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.chip
86
- }, _react["default"].createElement(StyledDxcChip, {
87
- disabled: disabled,
88
- margin: margin
89
- }, prefixIconSrc && _react["default"].createElement(PrefixIconContainer, {
90
- disabled: disabled,
91
- src: prefixIconSrc,
92
- label: label,
93
- onClick: function onClick() {
94
- return onClickPrefix && !disabled && onClickPrefix(label);
95
- }
96
- }), label && _react["default"].createElement(ChipTextContainer, {
97
- disabled: disabled,
98
- prefixIconSrc: prefixIconSrc,
99
- suffixIconSrc: suffixIconSrc
100
- }, label), suffixIconSrc && _react["default"].createElement(SuffixIconContainer, {
101
- disabled: disabled,
102
- src: suffixIconSrc,
103
- label: label,
104
- onClick: function onClick() {
105
- return onClickSuffix && !disabled && onClickSuffix(label);
106
- }
107
- })));
108
- };
109
-
110
- var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function (_ref2) {
111
- var margin = _ref2.margin;
112
- return "calc(100% - 40px - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
113
- }, function (props) {
114
- return props.theme.backgroundColor;
115
- }, function (props) {
116
- return props.theme.outlinedColor !== "" ? "border: 2px solid ".concat(props.theme.outlinedColor) : "";
117
- }, function (props) {
118
- return props.theme.outlinedColor !== "" ? "18px" : "22px";
119
- }, function (_ref3) {
120
- var disabled = _ref3.disabled;
121
- return disabled && "not-allowed";
122
- }, function (props) {
123
- return props.disabled && props.theme.disabled || "initial";
124
- }, function (props) {
125
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
126
- }, function (props) {
127
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
128
- }, function (props) {
129
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
130
- }, function (props) {
131
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
132
- }, function (props) {
133
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
134
- });
135
-
136
- var ChipTextContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
137
- return props.theme.fontColor;
138
- }, function (_ref4) {
139
- var disabled = _ref4.disabled;
140
- return disabled && "not-allowed" || "default";
141
- });
142
-
143
- var SuffixIconContainer = _styledComponents["default"].img(_templateObject3(), function (_ref5) {
144
- var disabled = _ref5.disabled;
145
- return disabled && "not-allowed" || "pointer";
146
- }, function (props) {
147
- return (props.label || props.suffixIconSrc) && "10px" || props.prefixIconSrc && "5px";
148
- });
149
-
150
- var PrefixIconContainer = _styledComponents["default"].img(_templateObject4(), function (_ref6) {
151
- var disabled = _ref6.disabled;
152
- return disabled && "not-allowed" || "pointer";
153
- }, function (props) {
154
- return (props.label || props.suffixIconSrc) && "10px" || props.prefixIconSrc && "5px";
155
- });
156
-
157
- DxcChip.propTypes = {
158
- label: _propTypes["default"].string,
159
- disabled: _propTypes["default"].bool,
160
- theme: _propTypes["default"].oneOf(["dark", "light"]),
161
- suffixIconSrc: _propTypes["default"].string,
162
- prefixIconSrc: _propTypes["default"].string,
163
- onClickSuffix: _propTypes["default"].func,
164
- onClickPrefix: _propTypes["default"].func,
165
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
166
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
167
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
168
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
169
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
170
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
171
- };
172
- var _default = DxcChip;
173
- exports["default"] = _default;
@@ -1,10 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = testFunction;
7
-
8
- function testFunction(num1, num2) {
9
- return num1 + num2;
10
- }
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _exampleService = _interopRequireDefault(require("./example-service"));
6
-
7
- describe("warnings array creation", function () {
8
- it("Function sums values", function () {
9
- var result = (0, _exampleService["default"])(2, 3);
10
- expect(result).toEqual(5);
11
- });
12
- });
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.getCustomTheme = exports.getMargin = void 0;
9
-
10
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
-
12
- var _variables = require("./variables.js");
13
-
14
- var getMargin = function getMargin(marginProp, side) {
15
- if (marginProp && (0, _typeof2["default"])(marginProp) === "object") {
16
- return marginProp[side] && _variables.spaces[marginProp[side]] || "0px";
17
- } else {
18
- return marginProp && _variables.spaces[marginProp] || "0px";
19
- }
20
- };
21
-
22
- exports.getMargin = getMargin;
23
-
24
- var getCustomTheme = function getCustomTheme(defaultTheme, customTheme) {
25
- var newTheme = JSON.parse(JSON.stringify(defaultTheme));
26
-
27
- if (customTheme) {
28
- Object.keys(newTheme).map(function (component) {
29
- if (customTheme[component]) {
30
- Object.keys(newTheme[component]).map(function (objectKey) {
31
- if (customTheme[component][objectKey]) {
32
- newTheme[component][objectKey] = customTheme[component][objectKey];
33
- }
34
- });
35
- }
36
- });
37
- }
38
-
39
- return newTheme;
40
- };
41
-
42
- exports.getCustomTheme = getCustomTheme;