@dxc-technology/halstack-react 0.0.0-d20101f → 0.0.0-d4fec82

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 (308) 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/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
  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/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/alert/Alert.js +290 -0
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -21
  21. package/box/Box.stories.jsx +132 -0
  22. package/box/index.d.ts +25 -0
  23. package/button/Button.d.ts +4 -0
  24. package/button/Button.js +182 -0
  25. package/button/Button.stories.tsx +293 -0
  26. package/button/types.d.ts +57 -0
  27. package/button/types.js +5 -0
  28. package/card/Card.d.ts +4 -0
  29. package/{dist/card → card}/Card.js +32 -121
  30. package/card/types.d.ts +69 -0
  31. package/card/types.js +5 -0
  32. package/checkbox/Checkbox.d.ts +4 -0
  33. package/{dist/checkbox → checkbox}/Checkbox.js +42 -80
  34. package/checkbox/types.d.ts +60 -0
  35. package/checkbox/types.js +5 -0
  36. package/{dist/chip → chip}/Chip.js +33 -81
  37. package/chip/index.d.ts +22 -0
  38. package/{dist/common → common}/OpenSans.css +0 -0
  39. package/{dist/common → common}/RequiredComponent.js +3 -11
  40. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  50. package/{dist/common → common}/utils.js +0 -0
  51. package/common/variables.js +1569 -0
  52. package/{dist/date → date}/Date.js +23 -31
  53. package/date/index.d.ts +27 -0
  54. package/date-input/DateInput.d.ts +4 -0
  55. package/date-input/DateInput.js +361 -0
  56. package/date-input/types.d.ts +100 -0
  57. package/date-input/types.js +5 -0
  58. package/{dist/dialog → dialog}/Dialog.js +26 -77
  59. package/dialog/index.d.ts +18 -0
  60. package/dropdown/Dropdown.d.ts +4 -0
  61. package/dropdown/Dropdown.js +417 -0
  62. package/dropdown/types.d.ts +89 -0
  63. package/dropdown/types.js +5 -0
  64. package/file-input/FileInput.js +532 -0
  65. package/file-input/FileItem.js +193 -0
  66. package/file-input/index.d.ts +81 -0
  67. package/footer/Footer.d.ts +4 -0
  68. package/footer/Footer.js +266 -0
  69. package/footer/Icons.js +77 -0
  70. package/footer/types.d.ts +61 -0
  71. package/footer/types.js +5 -0
  72. package/header/Header.js +326 -0
  73. package/header/Icons.js +59 -0
  74. package/header/index.d.ts +25 -0
  75. package/{dist/heading → heading}/Heading.js +30 -76
  76. package/heading/index.d.ts +17 -0
  77. package/input-text/Icons.js +22 -0
  78. package/{dist/input-text → input-text}/InputText.js +120 -178
  79. package/input-text/index.d.ts +36 -0
  80. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  81. package/layout/Icons.js +55 -0
  82. package/{dist/link → link}/Link.js +29 -83
  83. package/link/index.d.ts +23 -0
  84. package/main.d.ts +44 -0
  85. package/{dist/main.js → main.js} +121 -69
  86. package/number-input/NumberInput.js +128 -0
  87. package/number-input/NumberInput.stories.jsx +115 -0
  88. package/number-input/NumberInputContext.js +16 -0
  89. package/number-input/index.d.ts +113 -0
  90. package/package.json +34 -25
  91. package/paginator/Icons.js +66 -0
  92. package/paginator/Paginator.d.ts +4 -0
  93. package/paginator/Paginator.js +198 -0
  94. package/paginator/types.d.ts +38 -0
  95. package/paginator/types.js +5 -0
  96. package/password-input/PasswordInput.js +199 -0
  97. package/password-input/PasswordInput.stories.jsx +131 -0
  98. package/password-input/index.d.ts +94 -0
  99. package/progress-bar/ProgressBar.d.ts +4 -0
  100. package/progress-bar/ProgressBar.js +170 -0
  101. package/progress-bar/types.d.ts +37 -0
  102. package/progress-bar/types.js +5 -0
  103. package/radio/Radio.d.ts +4 -0
  104. package/{dist/radio → radio}/Radio.js +15 -50
  105. package/radio/types.d.ts +54 -0
  106. package/radio/types.js +5 -0
  107. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  108. package/resultsetTable/index.d.ts +19 -0
  109. package/select/Select.js +865 -0
  110. package/select/index.d.ts +131 -0
  111. package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
  112. package/sidenav/index.d.ts +13 -0
  113. package/slider/Slider.d.ts +4 -0
  114. package/slider/Slider.js +306 -0
  115. package/slider/types.d.ts +83 -0
  116. package/slider/types.js +5 -0
  117. package/spinner/Spinner.js +267 -0
  118. package/spinner/index.d.ts +17 -0
  119. package/switch/Switch.d.ts +4 -0
  120. package/{dist/switch → switch}/Switch.js +26 -69
  121. package/switch/types.d.ts +58 -0
  122. package/switch/types.js +5 -0
  123. package/{dist/table → table}/Table.js +13 -23
  124. package/table/index.d.ts +13 -0
  125. package/tabs/Tabs.d.ts +4 -0
  126. package/tabs/Tabs.js +211 -0
  127. package/tabs/types.d.ts +71 -0
  128. package/tabs/types.js +5 -0
  129. package/{dist/tag → tag}/Tag.js +50 -122
  130. package/tag/index.d.ts +24 -0
  131. package/text-input/TextInput.js +825 -0
  132. package/text-input/index.d.ts +135 -0
  133. package/textarea/Textarea.js +317 -0
  134. package/textarea/Textarea.stories.jsx +135 -0
  135. package/textarea/index.d.ts +117 -0
  136. package/{dist/toggle → toggle}/Toggle.js +15 -49
  137. package/toggle/index.d.ts +21 -0
  138. package/toggle-group/ToggleGroup.js +243 -0
  139. package/toggle-group/index.d.ts +21 -0
  140. package/{dist/upload → upload}/Upload.js +11 -15
  141. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  142. package/upload/buttons-upload/Icons.js +40 -0
  143. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  144. package/upload/dragAndDropArea/Icons.js +39 -0
  145. package/upload/file-upload/FileToUpload.js +115 -0
  146. package/upload/file-upload/Icons.js +66 -0
  147. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  148. package/upload/index.d.ts +15 -0
  149. package/upload/transaction/Icons.js +160 -0
  150. package/upload/transaction/Transaction.js +104 -0
  151. package/upload/transactions/Transactions.js +94 -0
  152. package/{dist/useTheme.js → useTheme.js} +0 -0
  153. package/wizard/Icons.js +65 -0
  154. package/{dist/wizard → wizard}/Wizard.js +40 -180
  155. package/wizard/index.d.ts +18 -0
  156. package/README.md +0 -66
  157. package/babel.config.js +0 -8
  158. package/dist/BackgroundColorContext.js +0 -46
  159. package/dist/ThemeContext.js +0 -216
  160. package/dist/accordion/Accordion.js +0 -346
  161. package/dist/accordion/Accordion.stories.js +0 -207
  162. package/dist/accordion/readme.md +0 -96
  163. package/dist/accordion-group/AccordionGroup.js +0 -188
  164. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  165. package/dist/accordion-group/readme.md +0 -70
  166. package/dist/alert/Alert.js +0 -388
  167. package/dist/alert/Alert.stories.js +0 -158
  168. package/dist/alert/close.svg +0 -4
  169. package/dist/alert/error.svg +0 -4
  170. package/dist/alert/info.svg +0 -4
  171. package/dist/alert/readme.md +0 -43
  172. package/dist/alert/success.svg +0 -4
  173. package/dist/alert/warning.svg +0 -4
  174. package/dist/badge/Badge.js +0 -63
  175. package/dist/button/Button.js +0 -232
  176. package/dist/button/Button.stories.js +0 -224
  177. package/dist/button/readme.md +0 -93
  178. package/dist/checkbox/Checkbox.stories.js +0 -144
  179. package/dist/checkbox/readme.md +0 -116
  180. package/dist/common/variables.js +0 -1158
  181. package/dist/date/Date.stories.js +0 -205
  182. package/dist/date/readme.md +0 -73
  183. package/dist/dialog/Dialog.stories.js +0 -217
  184. package/dist/dialog/readme.md +0 -32
  185. package/dist/dropdown/Dropdown.js +0 -492
  186. package/dist/dropdown/Dropdown.stories.js +0 -249
  187. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  188. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  189. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  190. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  191. package/dist/dropdown/readme.md +0 -69
  192. package/dist/footer/Footer.js +0 -405
  193. package/dist/footer/Footer.stories.js +0 -94
  194. package/dist/footer/dxc_logo_wht.png +0 -0
  195. package/dist/footer/readme.md +0 -41
  196. package/dist/header/Header.js +0 -431
  197. package/dist/header/Header.stories.js +0 -176
  198. package/dist/header/close_icon.svg +0 -1
  199. package/dist/header/dxc_logo_black.png +0 -0
  200. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  201. package/dist/header/dxc_logo_white.png +0 -0
  202. package/dist/header/hamb_menu_black.svg +0 -1
  203. package/dist/header/hamb_menu_white.svg +0 -1
  204. package/dist/header/readme.md +0 -33
  205. package/dist/input-text/InputText.stories.js +0 -209
  206. package/dist/input-text/error.svg +0 -1
  207. package/dist/input-text/readme.md +0 -91
  208. package/dist/layout/facebook.svg +0 -45
  209. package/dist/layout/linkedin.svg +0 -50
  210. package/dist/layout/twitter.svg +0 -53
  211. package/dist/link/readme.md +0 -51
  212. package/dist/paginator/Paginator.js +0 -283
  213. package/dist/paginator/images/next.svg +0 -3
  214. package/dist/paginator/images/nextPage.svg +0 -3
  215. package/dist/paginator/images/previous.svg +0 -3
  216. package/dist/paginator/images/previousPage.svg +0 -3
  217. package/dist/paginator/readme.md +0 -50
  218. package/dist/progress-bar/ProgressBar.js +0 -206
  219. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  220. package/dist/progress-bar/readme.md +0 -63
  221. package/dist/radio/Radio.stories.js +0 -166
  222. package/dist/radio/readme.md +0 -70
  223. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  224. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  225. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  226. package/dist/select/Select.js +0 -563
  227. package/dist/select/Select.stories.js +0 -235
  228. package/dist/select/readme.md +0 -72
  229. package/dist/slider/Slider.js +0 -315
  230. package/dist/slider/Slider.stories.js +0 -241
  231. package/dist/slider/readme.md +0 -64
  232. package/dist/spinner/Spinner.js +0 -214
  233. package/dist/spinner/Spinner.stories.js +0 -183
  234. package/dist/spinner/readme.md +0 -65
  235. package/dist/switch/Switch.stories.js +0 -134
  236. package/dist/switch/readme.md +0 -133
  237. package/dist/tabs/Tabs.js +0 -343
  238. package/dist/tabs/Tabs.stories.js +0 -130
  239. package/dist/tabs/readme.md +0 -78
  240. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  241. package/dist/tabs-for-sections/readme.md +0 -78
  242. package/dist/toggle/Toggle.stories.js +0 -297
  243. package/dist/toggle/readme.md +0 -80
  244. package/dist/toggle-group/ToggleGroup.js +0 -241
  245. package/dist/toggle-group/readme.md +0 -82
  246. package/dist/upload/Upload.stories.js +0 -72
  247. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  248. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  249. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  250. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  251. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  252. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  253. package/dist/upload/file-upload/FileToUpload.js +0 -184
  254. package/dist/upload/file-upload/audio-icon.svg +0 -4
  255. package/dist/upload/file-upload/close.svg +0 -4
  256. package/dist/upload/file-upload/file-icon.svg +0 -4
  257. package/dist/upload/file-upload/video-icon.svg +0 -4
  258. package/dist/upload/readme.md +0 -37
  259. package/dist/upload/transaction/Transaction.js +0 -171
  260. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  261. package/dist/upload/transaction/audio-icon.svg +0 -4
  262. package/dist/upload/transaction/error-icon.svg +0 -4
  263. package/dist/upload/transaction/file-icon-err.svg +0 -4
  264. package/dist/upload/transaction/file-icon.svg +0 -4
  265. package/dist/upload/transaction/image-icon-err.svg +0 -4
  266. package/dist/upload/transaction/image-icon.svg +0 -4
  267. package/dist/upload/transaction/success-icon.svg +0 -4
  268. package/dist/upload/transaction/video-icon-err.svg +0 -4
  269. package/dist/upload/transaction/video-icon.svg +0 -4
  270. package/dist/upload/transactions/Transactions.js +0 -138
  271. package/dist/wizard/invalid_icon.svg +0 -5
  272. package/dist/wizard/valid_icon.svg +0 -5
  273. package/dist/wizard/validation-wrong.svg +0 -6
  274. package/test/Accordion.test.js +0 -33
  275. package/test/AccordionGroup.test.js +0 -125
  276. package/test/Alert.test.js +0 -53
  277. package/test/Box.test.js +0 -10
  278. package/test/Button.test.js +0 -18
  279. package/test/Card.test.js +0 -30
  280. package/test/Checkbox.test.js +0 -45
  281. package/test/Chip.test.js +0 -25
  282. package/test/Date.test.js +0 -393
  283. package/test/Dialog.test.js +0 -23
  284. package/test/Dropdown.test.js +0 -130
  285. package/test/Footer.test.js +0 -99
  286. package/test/Header.test.js +0 -39
  287. package/test/Heading.test.js +0 -35
  288. package/test/InputText.test.js +0 -240
  289. package/test/Link.test.js +0 -43
  290. package/test/Paginator.test.js +0 -177
  291. package/test/ProgressBar.test.js +0 -35
  292. package/test/Radio.test.js +0 -37
  293. package/test/ResultsetTable.test.js +0 -330
  294. package/test/Select.test.js +0 -192
  295. package/test/Sidenav.test.js +0 -45
  296. package/test/Slider.test.js +0 -82
  297. package/test/Spinner.test.js +0 -27
  298. package/test/Switch.test.js +0 -45
  299. package/test/Table.test.js +0 -36
  300. package/test/Tabs.test.js +0 -109
  301. package/test/TabsForSections.test.js +0 -34
  302. package/test/Tag.test.js +0 -32
  303. package/test/TextArea.test.js +0 -52
  304. package/test/ToggleGroup.test.js +0 -81
  305. package/test/Upload.test.js +0 -60
  306. package/test/Wizard.test.js +0 -130
  307. package/test/mocks/pngMock.js +0 -1
  308. package/test/mocks/svgMock.js +0 -1
@@ -1,78 +0,0 @@
1
- # DXC Tabs Component
2
-
3
- ## Tab Group Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>mode: 'filled' | 'underlined'</td>
13
- <td><code>'filled'</code></td>
14
- <td>Uses one of the available component modes.</td>
15
- </tr>
16
- <tr>
17
- <td>theme: 'light' | 'dark'</td>
18
- <td><code>'light'</code></td>
19
- <td>Uses one of the available component themes.</td>
20
- </tr>
21
- <tr>
22
- <td>showDotIndicator: boolean</td>
23
- <td><code>false</code></td>
24
- <td>If true, a dot indicator will be shown in the active tab.</td>
25
- </tr>
26
- <tr>
27
- <td>disableRipple: boolean</td>
28
- <td><code>false</code></td>
29
- <td>If true, the ripple effect will be disabled.</td>
30
- </tr>
31
- <tr>
32
- <td>activeTabIndex: number</td>
33
- <td><code>0</code></td>
34
- <td>The index of the active tab.</td>
35
- </tr>
36
- <tr>
37
- <td>activeTabIndexChange: function</td>
38
- <td></td>
39
- <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
40
- </tr>
41
- <tr>
42
- <td>stepper: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component should be rendered as a Stepper component.</td>
45
- </tr>
46
- <tr>
47
- <td>orientation: 'horizontal' | 'vertical'</td>
48
- <td><code>'horizontal'</code></td>
49
- <td>Only if stepper, this parameter shows the stepper orientation.</td>
50
- </tr>
51
-
52
- </table>
53
-
54
- ## Tab Props
55
-
56
- <table>
57
- <tr style="background-color: grey">
58
- <td>Name</td>
59
- <td>Default</td>
60
- <td>Description</td>
61
- </tr>
62
- <tr>
63
- <td>label: string</td>
64
- <td></td>
65
- <td>Text to be placed within the tab.</td>
66
- </tr>
67
- <tr>
68
- <td>iconSrc: string</td>
69
- <td></td>
70
- <td>The path of an icon to be placed within the tab.</td>
71
- </tr>
72
- <tr>
73
- <td>disabled: boolean</td>
74
- <td><code>false</code></td>
75
- <td>Whether the tab is disabled.</td>
76
- </tr>
77
- </table>
78
-
@@ -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
- });
@@ -1,80 +0,0 @@
1
- # DXC Toggle Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcToggle } from "@dxc-technology/halstack-react";
7
-
8
- <DxcToggle onClick={handleClick} label="Test Button" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>selected: boolean</td>
21
- <td><code>false</code></td>
22
- <td>If true, the component is selected.</td>
23
- </tr>
24
- <tr>
25
- <td>mode: 'basic' | 'outlined'</td>
26
- <td><code>'basic'</code></td>
27
- <td>Uses on of the available toggle modes.</td>
28
- </tr>
29
- <tr>
30
- <td>iconPosition: 'before' | 'after'</td>
31
- <td><code>'before'</code></td>
32
- <td>Changes the position of the icon.</td>
33
- </tr>
34
- <tr>
35
- <td>theme: 'light' |'dark'</td>
36
- <td><code>'light'</code></td>
37
- <td>Uses one of the available component themes.</td>
38
- </tr>
39
- <tr>
40
- <td>label: string</td>
41
- <td><code>'basic'</code></td>
42
- <td>Text to be placed on the toggle.</td>
43
- </tr>
44
- <tr>
45
- <td>iconSrc: string</td>
46
- <td></td>
47
- <td>URL of the icon that will be placed on the toggle.</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>disableRipple: boolean</td>
56
- <td><code>false</code></td>
57
- <td>If true, the ripple effect will be disabled.</td>
58
- </tr>
59
- <tr>
60
- <td>onClick: function</td>
61
- <td></td>
62
- <td>This function will be called when the user clicks the button. The new state will be passed as a parameter.</td>
63
- </tr>
64
-
65
- </table>
66
-
67
- ## Examples
68
-
69
- ```js
70
- import { DxcToggle } from "@dxc-technology/halstack-react";
71
- <DxcToggle
72
- label="Disabled Ripple"
73
- disableRipple={true}
74
- theme="dark"
75
- iconSrc={amazon}
76
- mode="outlined"
77
- selected={selected}
78
- onClick={click}
79
- ></DxcToggle>;
80
- ```
@@ -1,241 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
-
30
- function _templateObject6() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n overflow: hidden;\n display: flex;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
32
-
33
- _templateObject6 = function _templateObject6() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject5() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n"]);
42
-
43
- _templateObject5 = function _templateObject5() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject4() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n text-transform: ", ";\n letter-spacing: ", ";\n"]);
52
-
53
- _templateObject4 = function _templateObject4() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject3() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n ", "\n"]);
62
-
63
- _templateObject3 = function _templateObject3() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- function _templateObject2() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"]);
72
-
73
- _templateObject2 = function _templateObject2() {
74
- return data;
75
- };
76
-
77
- return data;
78
- }
79
-
80
- function _templateObject() {
81
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: flex;\n flex-direction: column;\n opacity: 1;\n"]);
82
-
83
- _templateObject = function _templateObject() {
84
- return data;
85
- };
86
-
87
- return data;
88
- }
89
-
90
- var DxcToggleGroup = function DxcToggleGroup(_ref) {
91
- var value = _ref.value,
92
- onChange = _ref.onChange,
93
- _ref$disabled = _ref.disabled,
94
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
95
- _ref$options = _ref.options,
96
- options = _ref$options === void 0 ? [] : _ref$options,
97
- margin = _ref.margin,
98
- _ref$multiple = _ref.multiple,
99
- multiple = _ref$multiple === void 0 ? false : _ref$multiple,
100
- _ref$tabIndex = _ref.tabIndex,
101
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
102
- var colorsTheme = (0, _useTheme["default"])();
103
-
104
- var _useState = (0, _react.useState)(multiple ? [] : null),
105
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
106
- selectedValue = _useState2[0],
107
- setSelectedValue = _useState2[1];
108
-
109
- var handleToggleChange = function handleToggleChange(selectedOption) {
110
- var newSelectedOptions;
111
-
112
- if (value == null) {
113
- if (multiple) {
114
- newSelectedOptions = selectedValue.map(function (value) {
115
- return value;
116
- });
117
-
118
- if (newSelectedOptions.includes(selectedOption)) {
119
- var index = newSelectedOptions.indexOf(selectedOption);
120
- newSelectedOptions.splice(index, 1);
121
- } else {
122
- newSelectedOptions.push(selectedOption);
123
- }
124
-
125
- setSelectedValue(newSelectedOptions);
126
- } else {
127
- setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
128
- }
129
- } else if (multiple) {
130
- newSelectedOptions = value.map(function (v) {
131
- return v;
132
- });
133
- newSelectedOptions.push(selectedOption);
134
- }
135
-
136
- if (typeof onChange === "function") {
137
- onChange(multiple ? newSelectedOptions : selectedOption);
138
- }
139
- };
140
-
141
- var handleKeyPress = function handleKeyPress(event, optionValue) {
142
- event.preventDefault();
143
-
144
- if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) {
145
- handleToggleChange(optionValue);
146
- }
147
- };
148
-
149
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
150
- theme: colorsTheme.toggleGroup
151
- }, _react["default"].createElement(ToggleGroup, {
152
- margin: margin,
153
- disabled: disabled
154
- }, _react["default"].createElement(ToggleGroupContainer, null, options.map(function (option, i) {
155
- return _react["default"].createElement(ToggleContainer, {
156
- selected: multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
157
- tabIndex: !disabled ? tabIndex : -1,
158
- onClick: function onClick() {
159
- return !disabled && handleToggleChange(option.value);
160
- },
161
- isFirst: i === 0,
162
- isLast: i === options.length - 1,
163
- isIcon: option.iconSrc || option.icon,
164
- disabled: disabled,
165
- onKeyPress: function onKeyPress(event) {
166
- handleKeyPress(event, option.value);
167
- },
168
- key: "toggle-".concat(i, "-").concat(option.label)
169
- }, option.icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc ? _react["default"].createElement(Icon, {
170
- src: option.iconSrc
171
- }) : _react["default"].createElement(LabelContainer, {
172
- disabled: disabled
173
- }, option.label));
174
- }))));
175
- };
176
-
177
- var ToggleGroup = _styledComponents["default"].div(_templateObject(), function (props) {
178
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
179
- }, function (props) {
180
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
181
- }, function (props) {
182
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
183
- }, function (props) {
184
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
185
- }, function (props) {
186
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
187
- });
188
-
189
- var ToggleGroupContainer = _styledComponents["default"].div(_templateObject2());
190
-
191
- var ToggleContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
192
- return "\n background-color: ".concat(props.selected ? props.disabled ? props.theme.disabledSelectedBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.disabledUnselectedBackgroundColor : props.theme.unselectedBackgroundColor, ";\n &:focus {\n outline: ").concat(props.theme.focusColor, " auto 1px;\n }\n border-radius: ").concat(props.isFirst ? "4px 0 0 4px" : props.isLast ? "0 4px 4px 0" : "0", ";\n color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n padding: ").concat(props.isIcon ? "".concat(props.theme.iconPaddingTop, " ").concat(props.theme.iconPaddingRight, " ").concat(props.theme.iconPaddingBottom, " ").concat(props.theme.iconPaddingLeft) : "".concat(props.theme.labelPaddingTop, " ").concat(props.theme.labelPaddingRight, " ").concat(props.theme.labelPaddingBottom, " ").concat(props.theme.labelPaddingLeft), ";\n ").concat(!props.disabled ? "&:hover {\n background-color: ".concat(props.selected ? props.theme.selectedBackgroundHoverColor : props.theme.unselectedBackgroundHoverColor, ";\n color: ").concat(props.selected ? props.theme.selectedHoverFontColor : props.theme.unselectedHoverFontColor, " !important;\n }\n cursor: pointer;") : "color: ".concat(props.selected ? props.theme.disabledSelectedFontColor : props.theme.disabledUnselectedFontColor, " !important;\n cursor: not-allowed;"), "\n ");
193
- });
194
-
195
- var LabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
196
- return props.theme.fontFamily;
197
- }, function (props) {
198
- return props.theme.fontSize;
199
- }, function (props) {
200
- return props.theme.fontStyle;
201
- }, function (props) {
202
- return props.theme.fontWeight;
203
- }, function (props) {
204
- return props.theme.fontTextTransform;
205
- }, function (props) {
206
- return props.theme.fontLetterSpacing;
207
- });
208
-
209
- var Icon = _styledComponents["default"].img(_templateObject5(), function (props) {
210
- return props.theme.iconSize;
211
- }, function (props) {
212
- return props.theme.iconSize;
213
- });
214
-
215
- var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
216
- return props.theme.iconSize;
217
- }, function (props) {
218
- return props.theme.iconSize;
219
- });
220
-
221
- DxcToggleGroup.propTypes = {
222
- value: _propTypes["default"].any,
223
- onChange: _propTypes["default"].func,
224
- disabled: _propTypes["default"].bool,
225
- multiple: _propTypes["default"].bool,
226
- options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
227
- value: _propTypes["default"].any.isRequired,
228
- label: _propTypes["default"].string,
229
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
230
- iconSrc: _propTypes["default"].string
231
- })),
232
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
233
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
234
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
235
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
236
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
237
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
238
- tabIndex: _propTypes["default"].number
239
- };
240
- var _default = DxcToggleGroup;
241
- exports["default"] = _default;