@dxc-technology/halstack-react 0.0.0-bfa479f → 0.0.0-c060fff

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 (264) hide show
  1. package/{dist/BackgroundColorContext.js → BackgroundColorContext.js} +0 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +15 -8
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/{dist/common → common}/utils.js +0 -0
  38. package/common/variables.js +1574 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +96 -42
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +159 -63
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +63 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +64 -38
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1137 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +974 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -216
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/variables.js +0 -521
  144. package/dist/date/Date.stories.js +0 -205
  145. package/dist/date/calendar.svg +0 -1
  146. package/dist/date/calendar_dark.svg +0 -1
  147. package/dist/date/readme.md +0 -73
  148. package/dist/dialog/Dialog.stories.js +0 -217
  149. package/dist/dialog/readme.md +0 -32
  150. package/dist/dropdown/Dropdown.stories.js +0 -249
  151. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  152. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  153. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  154. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  155. package/dist/dropdown/readme.md +0 -69
  156. package/dist/footer/Footer.stories.js +0 -94
  157. package/dist/footer/dxc_logo_wht.png +0 -0
  158. package/dist/footer/readme.md +0 -41
  159. package/dist/header/Header.stories.js +0 -176
  160. package/dist/header/close_icon.svg +0 -1
  161. package/dist/header/dxc_logo_black.png +0 -0
  162. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  163. package/dist/header/dxc_logo_white.png +0 -0
  164. package/dist/header/hamb_menu_black.svg +0 -1
  165. package/dist/header/hamb_menu_white.svg +0 -1
  166. package/dist/header/readme.md +0 -33
  167. package/dist/heading/Heading.js +0 -163
  168. package/dist/input-text/InputText.stories.js +0 -209
  169. package/dist/input-text/error.svg +0 -1
  170. package/dist/input-text/readme.md +0 -91
  171. package/dist/layout/facebook.svg +0 -45
  172. package/dist/layout/linkedin.svg +0 -50
  173. package/dist/layout/twitter.svg +0 -53
  174. package/dist/link/readme.md +0 -51
  175. package/dist/paginator/images/next.svg +0 -3
  176. package/dist/paginator/images/nextPage.svg +0 -3
  177. package/dist/paginator/images/previous.svg +0 -3
  178. package/dist/paginator/images/previousPage.svg +0 -3
  179. package/dist/paginator/readme.md +0 -50
  180. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  181. package/dist/progress-bar/readme.md +0 -63
  182. package/dist/radio/Radio.stories.js +0 -166
  183. package/dist/radio/readme.md +0 -70
  184. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  185. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  187. package/dist/select/Select.js +0 -490
  188. package/dist/select/Select.stories.js +0 -235
  189. package/dist/select/readme.md +0 -72
  190. package/dist/slider/Slider.js +0 -267
  191. package/dist/slider/Slider.stories.js +0 -241
  192. package/dist/slider/readme.md +0 -64
  193. package/dist/spinner/Spinner.js +0 -198
  194. package/dist/spinner/Spinner.stories.js +0 -183
  195. package/dist/spinner/readme.md +0 -65
  196. package/dist/switch/Switch.stories.js +0 -134
  197. package/dist/switch/readme.md +0 -133
  198. package/dist/tabs/Tabs.stories.js +0 -130
  199. package/dist/tabs/readme.md +0 -78
  200. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  201. package/dist/tabs-for-sections/readme.md +0 -78
  202. package/dist/textarea/Textarea.js +0 -238
  203. package/dist/toggle/Toggle.stories.js +0 -297
  204. package/dist/toggle/readme.md +0 -80
  205. package/dist/toggle-group/ToggleGroup.js +0 -223
  206. package/dist/toggle-group/readme.md +0 -82
  207. package/dist/upload/Upload.stories.js +0 -72
  208. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  209. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  210. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  211. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  212. package/dist/upload/file-upload/audio-icon.svg +0 -4
  213. package/dist/upload/file-upload/close.svg +0 -4
  214. package/dist/upload/file-upload/file-icon.svg +0 -4
  215. package/dist/upload/file-upload/video-icon.svg +0 -4
  216. package/dist/upload/readme.md +0 -37
  217. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  218. package/dist/upload/transaction/audio-icon.svg +0 -4
  219. package/dist/upload/transaction/error-icon.svg +0 -4
  220. package/dist/upload/transaction/file-icon-err.svg +0 -4
  221. package/dist/upload/transaction/file-icon.svg +0 -4
  222. package/dist/upload/transaction/image-icon-err.svg +0 -4
  223. package/dist/upload/transaction/image-icon.svg +0 -4
  224. package/dist/upload/transaction/success-icon.svg +0 -4
  225. package/dist/upload/transaction/video-icon-err.svg +0 -4
  226. package/dist/upload/transaction/video-icon.svg +0 -4
  227. package/dist/wizard/invalid_icon.svg +0 -6
  228. package/dist/wizard/valid_icon.svg +0 -6
  229. package/dist/wizard/validation-wrong.svg +0 -6
  230. package/test/Accordion.test.js +0 -33
  231. package/test/AccordionGroup.test.js +0 -125
  232. package/test/Alert.test.js +0 -53
  233. package/test/Box.test.js +0 -10
  234. package/test/Button.test.js +0 -18
  235. package/test/Card.test.js +0 -30
  236. package/test/Checkbox.test.js +0 -45
  237. package/test/Chip.test.js +0 -25
  238. package/test/Date.test.js +0 -393
  239. package/test/Dialog.test.js +0 -23
  240. package/test/Dropdown.test.js +0 -130
  241. package/test/Footer.test.js +0 -99
  242. package/test/Header.test.js +0 -39
  243. package/test/Heading.test.js +0 -35
  244. package/test/InputText.test.js +0 -240
  245. package/test/Link.test.js +0 -42
  246. package/test/Paginator.test.js +0 -177
  247. package/test/ProgressBar.test.js +0 -35
  248. package/test/Radio.test.js +0 -37
  249. package/test/ResultsetTable.test.js +0 -330
  250. package/test/Select.test.js +0 -192
  251. package/test/Sidenav.test.js +0 -45
  252. package/test/Slider.test.js +0 -82
  253. package/test/Spinner.test.js +0 -27
  254. package/test/Switch.test.js +0 -45
  255. package/test/Table.test.js +0 -36
  256. package/test/Tabs.test.js +0 -109
  257. package/test/TabsForSections.test.js +0 -34
  258. package/test/Tag.test.js +0 -32
  259. package/test/TextArea.test.js +0 -52
  260. package/test/ToggleGroup.test.js +0 -81
  261. package/test/Upload.test.js +0 -60
  262. package/test/Wizard.test.js +0 -130
  263. package/test/mocks/pngMock.js +0 -1
  264. 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,238 +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 _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 _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
33
-
34
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
35
-
36
- function _templateObject() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n .MuiTextField-root {\n width: 100%;\n font-family: ", ";\n\n .MuiFormHelperText-root {\n font-family: ", ";\n\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n color: ", ";\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n padding-left: \"inherit\";\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: \"translate(0, 1.5px) scale(0.75);\";\n }\n }\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: \"translate(0, 1.5px) scale(0.75)\";\n }\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n &::before {\n border-bottom: ", ";\n }\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n &::after {\n border-bottom: ", ";\n }\n\n .MuiInputBase-inputMultiline {\n overflow: auto !important;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n\n &.Mui-error {\n &::before {\n border-width: 1px;\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: 2px;\n border-color: ", ";\n transform: scaleX(1);\n }\n\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n .MuiInputBase-input {\n padding-left: \"inherit\";\n color: ", ";\n text-overflow: ellipsis;\n &.Mui-disabled {\n cursor: not-allowed;\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
38
-
39
- _templateObject = function _templateObject() {
40
- return data;
41
- };
42
-
43
- return data;
44
- }
45
-
46
- var DxcTextarea = function DxcTextarea(_ref) {
47
- var _ref$label = _ref.label,
48
- label = _ref$label === void 0 ? " " : _ref$label,
49
- _ref$name = _ref.name,
50
- name = _ref$name === void 0 ? "" : _ref$name,
51
- value = _ref.value,
52
- _ref$assistiveText = _ref.assistiveText,
53
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
54
- _ref$disabled = _ref.disabled,
55
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
56
- _ref$onChange = _ref.onChange,
57
- onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
58
- _ref$onBlur = _ref.onBlur,
59
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
60
- _ref$numRows = _ref.numRows,
61
- numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
62
- _ref$invalid = _ref.invalid,
63
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
64
- _ref$required = _ref.required,
65
- required = _ref$required === void 0 ? false : _ref$required,
66
- _ref$placeholder = _ref.placeholder,
67
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
68
- margin = _ref.margin,
69
- _ref$size = _ref.size,
70
- size = _ref$size === void 0 ? "medium" : _ref$size,
71
- _ref$tabIndex = _ref.tabIndex,
72
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
73
-
74
- var _useState = (0, _react.useState)(""),
75
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
76
- innerValue = _useState2[0],
77
- setInnerValue = _useState2[1];
78
-
79
- var colorsTheme = (0, _useTheme["default"])();
80
-
81
- var handlerTextareaChange = function handlerTextareaChange(event) {
82
- if (value === null || value === undefined) {
83
- if (typeof onChange === "function") {
84
- setInnerValue(event.target.value);
85
- onChange(event.target.value);
86
- } else {
87
- setInnerValue(event.target.value);
88
- }
89
- } else if (onChange !== "") {
90
- if (typeof onChange === "function") {
91
- onChange(event.target.value);
92
- } else {
93
- setInnerValue(event.target.value);
94
- }
95
- }
96
- };
97
-
98
- var handlerTextareaBlur = function handlerTextareaBlur(event) {
99
- setInnerValue(event.target.value);
100
-
101
- if (onBlur) {
102
- onBlur(event.target.value);
103
- }
104
- };
105
-
106
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
107
- theme: colorsTheme.textarea
108
- }, _react["default"].createElement(TextContainer, {
109
- required: required,
110
- assistiveText: assistiveText,
111
- margin: margin,
112
- size: size
113
- }, _react["default"].createElement(_TextField["default"], {
114
- error: invalid,
115
- value: value !== null ? value : innerValue,
116
- name: name,
117
- multiline: true,
118
- disabled: disabled,
119
- label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
120
- helperText: assistiveText,
121
- onChange: handlerTextareaChange,
122
- onBlur: onBlur && handlerTextareaBlur || null,
123
- rows: numRows,
124
- placeholder: placeholder,
125
- inputProps: {
126
- tabIndex: tabIndex
127
- }
128
- })));
129
- };
130
-
131
- var sizes = {
132
- small: "42px",
133
- medium: "240px",
134
- large: "480px",
135
- fillParent: "100%"
136
- };
137
-
138
- var calculateWidth = function calculateWidth(margin, size) {
139
- if (size === "fillParent") {
140
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
141
- }
142
-
143
- return sizes[size];
144
- };
145
-
146
- var TextContainer = _styledComponents["default"].div(_templateObject(), function (props) {
147
- return props.theme.fontSizeBase;
148
- }, function (props) {
149
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
150
- }, function (props) {
151
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
152
- }, function (props) {
153
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
154
- }, function (props) {
155
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
156
- }, function (props) {
157
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
158
- }, function (props) {
159
- return calculateWidth(props.margin, props.size);
160
- }, function (props) {
161
- return props.theme.fontFamily;
162
- }, function (props) {
163
- return props.theme.fontFamily;
164
- }, function (props) {
165
- return props.theme.fontSize;
166
- }, function (props) {
167
- return props.theme.fontColor;
168
- }, function (props) {
169
- return props.theme.disabledFontColor;
170
- }, function (props) {
171
- return props.theme.fontColor;
172
- }, function (props) {
173
- return props.theme.fontFamily;
174
- }, function (props) {
175
- return props.theme.error;
176
- }, function (props) {
177
- return props.theme.fontFamily;
178
- }, function (props) {
179
- return props.theme.fontColor;
180
- }, function (props) {
181
- return props.theme.fontColor;
182
- }, function (props) {
183
- return props.theme.fontColor;
184
- }, function (props) {
185
- return props.theme.fontColor;
186
- }, function (props) {
187
- return props.theme.fontFamily;
188
- }, function (props) {
189
- return "1px solid ".concat(props.theme.fontColor);
190
- }, function (props) {
191
- return "1px solid ".concat(props.theme.fontColor);
192
- }, function (props) {
193
- return "2px solid ".concat(props.theme.fontColor);
194
- }, function (props) {
195
- return props.theme.scrollBarTrackColor;
196
- }, function (props) {
197
- return props.theme.scrollBarThumbColor;
198
- }, function (props) {
199
- return props.theme.error;
200
- }, function (props) {
201
- return props.theme.fontColor;
202
- }, function (props) {
203
- return props.theme.error;
204
- }, function (props) {
205
- return "1px solid ".concat(props.theme.disabledFontColor, " !important");
206
- }, function (props) {
207
- return props.theme.fontColor;
208
- }, function (props) {
209
- return props.theme.fontColor;
210
- }, function (props) {
211
- return "".concat(props.theme.error, " !important");
212
- }, function (props) {
213
- return props.theme.disabledFontColor;
214
- });
215
-
216
- DxcTextarea.propTypes = {
217
- label: _propTypes["default"].string,
218
- name: _propTypes["default"].string,
219
- value: _propTypes["default"].string,
220
- assistiveText: _propTypes["default"].string,
221
- disabled: _propTypes["default"].bool,
222
- required: _propTypes["default"].bool,
223
- invalid: _propTypes["default"].bool,
224
- placeholder: _propTypes["default"].string,
225
- onChange: _propTypes["default"].func,
226
- onBlur: _propTypes["default"].func,
227
- numRows: _propTypes["default"].number,
228
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
229
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
230
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
231
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
232
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
233
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
234
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
235
- tabIndex: _propTypes["default"].number
236
- };
237
- var _default = DxcTextarea;
238
- exports["default"] = _default;
@@ -1,297 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
-
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
-
11
- var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
12
-
13
- var _react = _interopRequireWildcard(require("react"));
14
-
15
- var _react2 = require("@storybook/react");
16
-
17
- var _addonActions = require("@storybook/addon-actions");
18
-
19
- var _addonKnobs = require("@storybook/addon-knobs");
20
-
21
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
22
-
23
- var _Toggle = _interopRequireDefault(require("./Toggle.jsx"));
24
-
25
- var _readme = _interopRequireDefault(require("./readme.md"));
26
-
27
- var onClick = (0, _addonActions.action)("onClick");
28
-
29
- onClick.toString = function () {
30
- return "onClickHandler";
31
- };
32
-
33
- (0, _react2.storiesOf)("Form Components|Toggle", module).add("Types", function () {
34
- var ControlledStory = function ControlledStory(_ref) {
35
- (0, _objectDestructuringEmpty2["default"])(_ref);
36
-
37
- var _useState = (0, _react.useState)(false),
38
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
39
- selected = _useState2[0],
40
- setSelected = _useState2[1];
41
-
42
- var _useState3 = (0, _react.useState)(false),
43
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
44
- selected1 = _useState4[0],
45
- setselected1 = _useState4[1];
46
-
47
- var _useState5 = (0, _react.useState)(false),
48
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
49
- selected2 = _useState6[0],
50
- setselected2 = _useState6[1];
51
-
52
- var _useState7 = (0, _react.useState)(false),
53
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
54
- selected3 = _useState8[0],
55
- setselected3 = _useState8[1];
56
-
57
- var _useState9 = (0, _react.useState)(false),
58
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
59
- selected4 = _useState10[0],
60
- setselected4 = _useState10[1];
61
-
62
- var _useState11 = (0, _react.useState)(false),
63
- _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
64
- selected5 = _useState12[0],
65
- setselected5 = _useState12[1];
66
-
67
- var _useState13 = (0, _react.useState)(false),
68
- _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
69
- selected6 = _useState14[0],
70
- setSelected6 = _useState14[1];
71
-
72
- var _useState15 = (0, _react.useState)(false),
73
- _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
74
- selected7 = _useState16[0],
75
- setselected7 = _useState16[1];
76
-
77
- var _useState17 = (0, _react.useState)(false),
78
- _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
79
- selected8 = _useState18[0],
80
- setselected8 = _useState18[1];
81
-
82
- var _useState19 = (0, _react.useState)(false),
83
- _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
84
- selected9 = _useState20[0],
85
- setselected9 = _useState20[1];
86
-
87
- var _useState21 = (0, _react.useState)(false),
88
- _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
89
- selected10 = _useState22[0],
90
- setselected10 = _useState22[1];
91
-
92
- var _useState23 = (0, _react.useState)(false),
93
- _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
94
- selected11 = _useState24[0],
95
- setselected11 = _useState24[1];
96
-
97
- var click = function click(value) {
98
- setSelected(!value);
99
- };
100
-
101
- var click1 = function click1(value) {
102
- setselected1(!value);
103
- };
104
-
105
- var click2 = function click2(value) {
106
- setselected2(!value);
107
- };
108
-
109
- var click3 = function click3(value) {
110
- setselected3(!value);
111
- };
112
-
113
- var click4 = function click4(value) {
114
- setselected4(!value);
115
- };
116
-
117
- var click5 = function click5(value) {
118
- setselected5(!value);
119
- };
120
-
121
- var click6 = function click6(value) {
122
- setSelected6(!value);
123
- };
124
-
125
- var click7 = function click7(value) {
126
- setselected7(!value);
127
- };
128
-
129
- var click8 = function click8(value) {
130
- setselected8(!value);
131
- };
132
-
133
- var click9 = function click9(value) {
134
- setselected9(!value);
135
- };
136
-
137
- var click10 = function click10(value) {
138
- setselected10(!value);
139
- };
140
-
141
- var click11 = function click11(value) {
142
- setselected11(!value);
143
- };
144
-
145
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
146
- style: {
147
- width: "100%",
148
- display: "inline-flex",
149
- alignItems: "center"
150
- }
151
- }, _react["default"].createElement(_Toggle["default"], {
152
- iconSrc: _amazon["default"],
153
- label: "Toggle 1",
154
- selected: selected,
155
- onClick: click
156
- }), _react["default"].createElement(_Toggle["default"], {
157
- label: "Toggle 2",
158
- selected: true,
159
- disabled: true
160
- }), _react["default"].createElement(_Toggle["default"], {
161
- iconSrc: _amazon["default"],
162
- selected: selected1,
163
- onClick: click1
164
- }), _react["default"].createElement(_Toggle["default"], {
165
- label: "Disabled Ripple",
166
- disableRipple: true,
167
- iconSrc: _amazon["default"],
168
- selected: selected2,
169
- onClick: click2
170
- }), _react["default"].createElement(_Toggle["default"], {
171
- iconSrc: _amazon["default"],
172
- label: "Toggle 1",
173
- mode: "outlined",
174
- selected: false,
175
- disabled: true
176
- }), _react["default"].createElement(_Toggle["default"], {
177
- label: "Toggle 2",
178
- mode: "outlined",
179
- selected: selected3,
180
- onClick: click3
181
- }), _react["default"].createElement(_Toggle["default"], {
182
- iconSrc: _amazon["default"],
183
- mode: "outlined",
184
- selected: selected4,
185
- onClick: click4
186
- }), _react["default"].createElement(_Toggle["default"], {
187
- label: "Disabled Ripple",
188
- disableRipple: true,
189
- iconSrc: _amazon["default"],
190
- mode: "outlined",
191
- selected: selected5,
192
- onClick: click5
193
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
194
- style: {
195
- width: "100%",
196
- display: "inline-flex",
197
- background: "black",
198
- alignItems: "center"
199
- }
200
- }, _react["default"].createElement(_Toggle["default"], {
201
- theme: "dark",
202
- iconSrc: _amazon["default"],
203
- label: "Toggle 1",
204
- selected: selected6,
205
- onClick: click6
206
- }), _react["default"].createElement(_Toggle["default"], {
207
- theme: "dark",
208
- label: "Toggle 2",
209
- selected: false,
210
- disabled: true
211
- }), _react["default"].createElement(_Toggle["default"], {
212
- theme: "dark",
213
- iconSrc: _amazon["default"],
214
- selected: selected7,
215
- onClick: click7
216
- }), _react["default"].createElement(_Toggle["default"], {
217
- label: "Disabled Ripple",
218
- disableRipple: true,
219
- theme: "dark",
220
- iconSrc: _amazon["default"],
221
- selected: selected8,
222
- onClick: click8
223
- }), _react["default"].createElement(_Toggle["default"], {
224
- theme: "dark",
225
- iconSrc: _amazon["default"],
226
- label: "Toggle 1",
227
- mode: "outlined",
228
- selected: true,
229
- disabled: true
230
- }), _react["default"].createElement(_Toggle["default"], {
231
- theme: "dark",
232
- label: "Toggle 2",
233
- mode: "outlined",
234
- selected: selected9,
235
- onClick: click9
236
- }), _react["default"].createElement(_Toggle["default"], {
237
- theme: "dark",
238
- iconSrc: _amazon["default"],
239
- mode: "outlined",
240
- selected: selected10,
241
- onClick: click10
242
- }), _react["default"].createElement(_Toggle["default"], {
243
- label: "Disabled Ripple",
244
- disableRipple: true,
245
- theme: "dark",
246
- iconSrc: _amazon["default"],
247
- mode: "outlined",
248
- selected: selected11,
249
- onClick: click11
250
- })));
251
- };
252
-
253
- return _react["default"].createElement(ControlledStory, null);
254
- }, {
255
- notes: {
256
- markdown: _readme["default"]
257
- }
258
- });
259
-
260
- var knobProps = function knobProps() {
261
- return {
262
- theme: (0, _addonKnobs.select)("Theme", {
263
- light: "light",
264
- dark: "dark"
265
- }, "light"),
266
- iconPosition: (0, _addonKnobs.select)("Icon Position", {
267
- after: "after",
268
- before: "before"
269
- }, "before"),
270
- mode: (0, _addonKnobs.select)("Mode", {
271
- "default": "basic",
272
- alternative: "outlined"
273
- }, "basic"),
274
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
275
- disableRipple: (0, _addonKnobs["boolean"])("Disable ripple", false),
276
- selected: (0, _addonKnobs["boolean"])("Selected", false),
277
- label: (0, _addonKnobs.text)("Label", "label")
278
- };
279
- };
280
-
281
- (0, _react2.storiesOf)("Form Components|Toggle", module).add("Knobs example", function () {
282
- var props = knobProps();
283
- return _react["default"].createElement("div", {
284
- style: {
285
- background: props.theme === "dark" && "black" || "transparent",
286
- display: "flex",
287
- alignItems: "center",
288
- flexWrap: "wrap"
289
- }
290
- }, _react["default"].createElement(_Toggle["default"], (0, _extends2["default"])({}, props, {
291
- iconSrc: _amazon["default"]
292
- })));
293
- }, {
294
- notes: {
295
- markdown: _readme["default"]
296
- }
297
- });
@@ -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
- ```