@dxc-technology/halstack-react 0.0.0-26ebe9c → 0.0.0-283b4b6

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 (266) hide show
  1. package/BackgroundColorContext.js +46 -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/accordion/Accordion.js +353 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/accordion-group/AccordionGroup.js +186 -0
  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 +39 -19
  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 +64 -56
  20. package/card/index.d.ts +22 -0
  21. package/checkbox/Checkbox.js +299 -0
  22. package/checkbox/index.d.ts +24 -0
  23. package/chip/Chip.js +265 -0
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +5 -15
  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 +110 -76
  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 +87 -33
  44. package/dialog/index.d.ts +18 -0
  45. package/dropdown/Dropdown.js +544 -0
  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 +125 -45
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/header/Header.js +470 -0
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/{dist/heading → heading}/Heading.js +93 -22
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/input-text/InputText.js +705 -0
  60. package/input-text/index.d.ts +36 -0
  61. package/layout/ApplicationLayout.js +327 -0
  62. package/layout/Icons.js +55 -0
  63. package/link/Link.js +237 -0
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +120 -24
  67. package/number-input/NumberInput.js +136 -0
  68. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +34 -19
  71. package/paginator/Icons.js +66 -0
  72. package/paginator/Paginator.js +305 -0
  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 +97 -44
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +39 -34
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +94 -70
  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/sidenav/Sidenav.js +179 -0
  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 +54 -51
  91. package/switch/index.d.ts +24 -0
  92. package/table/Table.js +132 -0
  93. package/table/index.d.ts +13 -0
  94. package/tabs/Tabs.js +343 -0
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +100 -35
  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 +16 -19
  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 +13 -8
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +35 -25
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +84 -37
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/upload/file-upload/FileToUpload.js +189 -0
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +16 -16
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/upload/transaction/Transaction.js +148 -0
  117. package/{dist/upload → upload}/transactions/Transactions.js +38 -20
  118. package/useTheme.js +22 -0
  119. package/wizard/Icons.js +65 -0
  120. package/wizard/Wizard.js +405 -0
  121. package/wizard/index.d.ts +18 -0
  122. package/babel.config.js +0 -4
  123. package/dist/accordion/Accordion.js +0 -264
  124. package/dist/accordion/Accordion.stories.js +0 -207
  125. package/dist/accordion/readme.md +0 -96
  126. package/dist/alert/Alert.js +0 -302
  127. package/dist/alert/Alert.stories.js +0 -158
  128. package/dist/alert/close.svg +0 -4
  129. package/dist/alert/error.svg +0 -4
  130. package/dist/alert/info.svg +0 -4
  131. package/dist/alert/readme.md +0 -43
  132. package/dist/alert/success.svg +0 -4
  133. package/dist/alert/warning.svg +0 -4
  134. package/dist/button/Button.js +0 -187
  135. package/dist/button/Button.stories.js +0 -224
  136. package/dist/button/readme.md +0 -93
  137. package/dist/checkbox/Checkbox.js +0 -221
  138. package/dist/checkbox/Checkbox.stories.js +0 -144
  139. package/dist/checkbox/readme.md +0 -116
  140. package/dist/common/services/example-service.js +0 -10
  141. package/dist/common/services/example-service.test.js +0 -12
  142. package/dist/common/variables.js +0 -77
  143. package/dist/date/Date.stories.js +0 -205
  144. package/dist/date/calendar.svg +0 -1
  145. package/dist/date/calendar_dark.svg +0 -1
  146. package/dist/date/readme.md +0 -73
  147. package/dist/dialog/Dialog.stories.js +0 -217
  148. package/dist/dialog/readme.md +0 -32
  149. package/dist/dropdown/Dropdown.js +0 -412
  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.js +0 -343
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  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/input-text/InputText.js +0 -510
  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/link/Link.js +0 -129
  172. package/dist/link/readme.md +0 -51
  173. package/dist/paginator/Paginator.js +0 -178
  174. package/dist/paginator/images/next.svg +0 -3
  175. package/dist/paginator/images/nextPage.svg +0 -3
  176. package/dist/paginator/images/previous.svg +0 -3
  177. package/dist/paginator/images/previousPage.svg +0 -3
  178. package/dist/paginator/readme.md +0 -50
  179. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  180. package/dist/progress-bar/readme.md +0 -63
  181. package/dist/radio/Radio.stories.js +0 -166
  182. package/dist/radio/readme.md +0 -70
  183. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  184. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  185. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  186. package/dist/select/Select.js +0 -425
  187. package/dist/select/Select.stories.js +0 -235
  188. package/dist/select/readme.md +0 -72
  189. package/dist/sidenav/Sidenav.js +0 -217
  190. package/dist/sidenav/arrow_icon.svg +0 -3
  191. package/dist/slider/Slider.js +0 -268
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -196
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/table/Table.js +0 -84
  200. package/dist/tabs/Tabs.js +0 -183
  201. package/dist/tabs/Tabs.stories.js +0 -130
  202. package/dist/tabs/readme.md +0 -78
  203. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  204. package/dist/tabs-for-sections/readme.md +0 -78
  205. package/dist/textarea/Textarea.js +0 -226
  206. package/dist/toggle/Toggle.stories.js +0 -297
  207. package/dist/toggle/readme.md +0 -80
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/FileToUpload.js +0 -158
  214. package/dist/upload/file-upload/audio-icon.svg +0 -4
  215. package/dist/upload/file-upload/close.svg +0 -4
  216. package/dist/upload/file-upload/file-icon.svg +0 -4
  217. package/dist/upload/file-upload/video-icon.svg +0 -4
  218. package/dist/upload/readme.md +0 -37
  219. package/dist/upload/transaction/Transaction.js +0 -155
  220. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  221. package/dist/upload/transaction/audio-icon.svg +0 -4
  222. package/dist/upload/transaction/error-icon.svg +0 -4
  223. package/dist/upload/transaction/file-icon-err.svg +0 -4
  224. package/dist/upload/transaction/file-icon.svg +0 -4
  225. package/dist/upload/transaction/image-icon-err.svg +0 -4
  226. package/dist/upload/transaction/image-icon.svg +0 -4
  227. package/dist/upload/transaction/success-icon.svg +0 -4
  228. package/dist/upload/transaction/video-icon-err.svg +0 -4
  229. package/dist/upload/transaction/video-icon.svg +0 -4
  230. package/dist/wizard/Wizard.js +0 -310
  231. package/dist/wizard/invalid_icon.svg +0 -6
  232. package/dist/wizard/valid_icon.svg +0 -6
  233. package/dist/wizard/validation-wrong.svg +0 -6
  234. package/test/Accordion.test.js +0 -33
  235. package/test/Alert.test.js +0 -53
  236. package/test/Box.test.js +0 -10
  237. package/test/Button.test.js +0 -18
  238. package/test/Card.test.js +0 -30
  239. package/test/Checkbox.test.js +0 -45
  240. package/test/Date.test.js +0 -393
  241. package/test/Dialog.test.js +0 -23
  242. package/test/Dropdown.test.js +0 -130
  243. package/test/Footer.test.js +0 -99
  244. package/test/Header.test.js +0 -39
  245. package/test/Heading.test.js +0 -35
  246. package/test/InputText.test.js +0 -236
  247. package/test/Link.test.js +0 -25
  248. package/test/Paginator.test.js +0 -165
  249. package/test/ProgressBar.test.js +0 -35
  250. package/test/Radio.test.js +0 -37
  251. package/test/ResultsetTable.test.js +0 -282
  252. package/test/Select.test.js +0 -191
  253. package/test/Sidenav.test.js +0 -87
  254. package/test/Slider.test.js +0 -65
  255. package/test/Spinner.test.js +0 -27
  256. package/test/Switch.test.js +0 -45
  257. package/test/Table.test.js +0 -36
  258. package/test/Tabs.test.js +0 -88
  259. package/test/TabsForSections.test.js +0 -34
  260. package/test/Tag.test.js +0 -32
  261. package/test/TextArea.test.js +0 -52
  262. package/test/Toggle.test.js +0 -43
  263. package/test/Upload.test.js +0 -60
  264. package/test/Wizard.test.js +0 -130
  265. package/test/mocks/pngMock.js +0 -1
  266. package/test/mocks/svgMock.js +0 -1
@@ -1,50 +0,0 @@
1
- # DXC Paginator Component
2
-
3
- ## 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>currentPage: number</td>
13
- <td><code>1</code></td>
14
- <td>Current page.</td>
15
- </tr>
16
- <tr>
17
- <td>itemsPerPage: number</td>
18
- <td><code>5</code></td>
19
- <td>Number of items to be displayed on each page.</td>
20
- </tr>
21
- <tr>
22
- <td>totalItems: number</td>
23
- <td></td>
24
- <td>Total number of items.</td>
25
- </tr>
26
- <tr>
27
- <td>nextFunction: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the next page button.<br>
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>prevFunction: function</td>
34
- <td></td>
35
- <td>This function will be called when the user clicks the previous page button.<br>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td>lastFunction: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the last page button.<br>
42
- </td>
43
- </tr>
44
- <tr>
45
- <td>firstFunction: function</td>
46
- <td></td>
47
- <td>This function will be called when the user clicks the first page button.<br>
48
- </td>
49
- </tr>
50
- </table>
@@ -1,280 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
10
-
11
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
12
-
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
-
15
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
16
-
17
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
-
19
- var _react = _interopRequireDefault(require("react"));
20
-
21
- var _react2 = require("@storybook/react");
22
-
23
- var _addonKnobs = require("@storybook/addon-knobs");
24
-
25
- var _readme = _interopRequireDefault(require("./readme.md"));
26
-
27
- var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
28
-
29
- var _Button = _interopRequireDefault(require("../button/Button"));
30
-
31
- (0, _react2.storiesOf)("Form Components|Progress Bar", module).add("Types", function () {
32
- var ControlledStory =
33
- /*#__PURE__*/
34
- function (_React$Component) {
35
- (0, _inherits2["default"])(ControlledStory, _React$Component);
36
-
37
- function ControlledStory(props) {
38
- var _this;
39
-
40
- (0, _classCallCheck2["default"])(this, ControlledStory);
41
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
42
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openProgressBar", function () {
43
- _this.setState({
44
- isVisible: !_this.state.isVisible
45
- });
46
- });
47
- _this.state = {
48
- isVisible: false
49
- };
50
- return _this;
51
- }
52
-
53
- (0, _createClass2["default"])(ControlledStory, [{
54
- key: "render",
55
- value: function render() {
56
- return _react["default"].createElement("div", null, _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Determined and undetermined progress bar"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
57
- style: {
58
- display: "flex",
59
- flexDirection: "row"
60
- }
61
- }, _react["default"].createElement("div", {
62
- style: {
63
- display: "flex",
64
- flexDirection: "column"
65
- }
66
- }, _react["default"].createElement(_ProgressBar["default"], {
67
- label: "Loading...",
68
- theme: "light",
69
- overlay: false,
70
- showValue: true,
71
- value: 0
72
- }), _react["default"].createElement(_ProgressBar["default"], {
73
- label: "Loading...",
74
- theme: "light",
75
- overlay: false,
76
- showValue: true,
77
- value: 15
78
- }), _react["default"].createElement(_ProgressBar["default"], {
79
- label: "Loading...",
80
- theme: "light",
81
- overlay: false,
82
- showValue: true,
83
- value: 52
84
- }), _react["default"].createElement(_ProgressBar["default"], {
85
- label: "Loading...",
86
- theme: "light",
87
- overlay: false,
88
- showValue: true,
89
- value: 80
90
- })), _react["default"].createElement("div", {
91
- style: {
92
- display: "flex",
93
- flexDirection: "column"
94
- }
95
- }, _react["default"].createElement(_ProgressBar["default"], {
96
- label: "Loading...",
97
- theme: "light",
98
- overlay: false,
99
- value: 0
100
- }), _react["default"].createElement(_ProgressBar["default"], {
101
- label: "Loading...",
102
- theme: "light",
103
- overlay: false,
104
- value: 15
105
- }), _react["default"].createElement(_ProgressBar["default"], {
106
- label: "Loading...",
107
- theme: "light",
108
- overlay: false,
109
- value: 52
110
- }), _react["default"].createElement(_ProgressBar["default"], {
111
- label: "Loading...",
112
- theme: "light",
113
- overlay: false,
114
- value: 80
115
- }))))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
116
- style: {
117
- display: "flex",
118
- flexDirection: "row",
119
- background: "black"
120
- }
121
- }, _react["default"].createElement("div", {
122
- style: {
123
- display: "flex",
124
- flexDirection: "column"
125
- }
126
- }, _react["default"].createElement(_ProgressBar["default"], {
127
- label: "Loading...",
128
- theme: "dark",
129
- overlay: false,
130
- showValue: true,
131
- value: 0
132
- }), _react["default"].createElement(_ProgressBar["default"], {
133
- label: "Loading...",
134
- theme: "dark",
135
- overlay: false,
136
- showValue: true,
137
- value: 15
138
- }), _react["default"].createElement(_ProgressBar["default"], {
139
- label: "Loading...",
140
- theme: "dark",
141
- overlay: false,
142
- showValue: true,
143
- value: 52
144
- }), _react["default"].createElement(_ProgressBar["default"], {
145
- label: "Loading...",
146
- theme: "dark",
147
- overlay: false,
148
- showValue: true,
149
- value: 80
150
- })), _react["default"].createElement("div", {
151
- style: {
152
- display: "flex",
153
- flexDirection: "column"
154
- }
155
- }, _react["default"].createElement(_ProgressBar["default"], {
156
- label: "Loading...",
157
- theme: "dark",
158
- overlay: false,
159
- value: 0
160
- }), _react["default"].createElement(_ProgressBar["default"], {
161
- label: "Loading...",
162
- theme: "dark",
163
- overlay: false,
164
- value: 15
165
- }), _react["default"].createElement(_ProgressBar["default"], {
166
- label: "Loading...",
167
- theme: "dark",
168
- overlay: false,
169
- value: 52
170
- }), _react["default"].createElement(_ProgressBar["default"], {
171
- label: "Loading...",
172
- theme: "dark",
173
- overlay: false,
174
- value: 80
175
- })))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Simplified"), _react["default"].createElement("div", {
176
- style: {
177
- display: "flex",
178
- flexDirection: "row"
179
- }
180
- }, _react["default"].createElement("div", {
181
- style: {
182
- display: "flex",
183
- flexDirection: "column"
184
- }
185
- }, _react["default"].createElement(_ProgressBar["default"], {
186
- theme: "light",
187
- overlay: false
188
- }), _react["default"].createElement(_ProgressBar["default"], {
189
- theme: "light",
190
- overlay: false
191
- }), _react["default"].createElement(_ProgressBar["default"], {
192
- theme: "light",
193
- overlay: false
194
- }), _react["default"].createElement(_ProgressBar["default"], {
195
- theme: "light",
196
- overlay: false
197
- })), _react["default"].createElement("div", {
198
- style: {
199
- display: "flex",
200
- flexDirection: "column"
201
- }
202
- }, _react["default"].createElement(_ProgressBar["default"], {
203
- theme: "light",
204
- overlay: false,
205
- showValue: true,
206
- value: 0
207
- }), _react["default"].createElement(_ProgressBar["default"], {
208
- theme: "light",
209
- overlay: false,
210
- showValue: true,
211
- value: 20
212
- }), _react["default"].createElement(_ProgressBar["default"], {
213
- theme: "light",
214
- overlay: false,
215
- showValue: true,
216
- value: 30
217
- }), _react["default"].createElement(_ProgressBar["default"], {
218
- theme: "light",
219
- overlay: false,
220
- showValue: true,
221
- value: 50
222
- })))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Overlay"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
223
- mode: "basic",
224
- theme: "light",
225
- label: "Overlay Progress Bar",
226
- onClick: this.openProgressBar
227
- }), this.state.isVisible && _react["default"].createElement("div", {
228
- onClick: this.openProgressBar,
229
- style: {
230
- position: "fixed",
231
- top: 0,
232
- left: 0,
233
- right: 0,
234
- bottom: 0,
235
- zIndex: 1000
236
- }
237
- }, _react["default"].createElement(_ProgressBar["default"], {
238
- theme: "light",
239
- label: "Loading...",
240
- overlay: true,
241
- showValue: true,
242
- value: 33
243
- })))));
244
- }
245
- }]);
246
- return ControlledStory;
247
- }(_react["default"].Component);
248
-
249
- return _react["default"].createElement(ControlledStory, null);
250
- }, {
251
- notes: {
252
- markdown: _readme["default"]
253
- }
254
- });
255
-
256
- var knobProps = function knobProps() {
257
- return {
258
- label: (0, _addonKnobs.text)("label", "Loading..."),
259
- theme: (0, _addonKnobs.select)("theme", {
260
- light: "light",
261
- dark: "dark"
262
- }, "light"),
263
- value: (0, _addonKnobs.number)("value", ""),
264
- overlay: (0, _addonKnobs["boolean"])("overlay", false),
265
- showValue: (0, _addonKnobs["boolean"])("showValue", false)
266
- };
267
- };
268
-
269
- (0, _react2.storiesOf)("Form Components|Progress Bar", module).add("Knobs example", function () {
270
- var props = knobProps();
271
- return _react["default"].createElement("div", {
272
- style: {
273
- background: props.theme === "dark" && "black" || "transparent"
274
- }
275
- }, _react["default"].createElement(_ProgressBar["default"], props));
276
- }, {
277
- notes: {
278
- markdown: _readme["default"]
279
- }
280
- });
@@ -1,63 +0,0 @@
1
- # DXC ProgressBar Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcProgressBar } from "@diaas/dxc-react-cdk";
7
-
8
- <DxcProgressBar 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>label: string</td>
21
- <td></td>
22
- <td>Text to be placed above the progressbar.</td>
23
- </tr>
24
- <tr>
25
- <td>theme: 'light' |'dark'</td>
26
- <td><code>'light'</code></td>
27
- <td>Uses one of the available component themes.</td>
28
- </tr>
29
- <tr>
30
- <td>overlay: boolean</td>
31
- <td>true</td>
32
- <td>If true, the progressbar will be over a darker background</td>
33
- </tr>
34
- <tr>
35
- <td>value: string</td>
36
- <td></td>
37
- <td>The value of the progress indicator. If it´s received the component is determinated otherwise is indeterminate</td>
38
- </tr>
39
- <tr>
40
- <td>showValue: boolean</td>
41
- <td>false</td>
42
- <td>If true the value is displayed above the progressbar</td>
43
- </tr>
44
- </table>
45
-
46
- ## Examples
47
-
48
- ```js
49
- import React from "react";
50
- import { DxcSpinner } from "@diaas/dxc-react-cdk";
51
-
52
- function App() {
53
- return (
54
- <div>
55
- <ProgressBar label="Loading..." theme="light" overlay={false} value={20} />
56
- </div>
57
- <div>
58
- <ProgressBar label="Loading..." theme="dark" showValue value={52} />
59
- </div>
60
- );
61
- }
62
- export default App;
63
- ```
@@ -1,166 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Radio = _interopRequireDefault(require("./Radio"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- (0, _react2.storiesOf)("Form Components|Radio", module).add("Component", function () {
26
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Radio["default"], {
27
- checked: false,
28
- theme: "light",
29
- value: "TestValue",
30
- label: "Enable Radio",
31
- labelPosition: "after",
32
- onChange: onChange,
33
- disabled: false,
34
- required: true
35
- }), _react["default"].createElement(_Radio["default"], {
36
- checked: false,
37
- theme: "light",
38
- value: "TestValue",
39
- label: "Label before",
40
- labelPosition: "before",
41
- onChange: onChange,
42
- disabled: false
43
- }), _react["default"].createElement(_Radio["default"], {
44
- checked: false,
45
- theme: "light",
46
- value: "TestValue",
47
- label: "Label after",
48
- labelPosition: "after",
49
- onChange: onChange,
50
- disabled: false
51
- }), _react["default"].createElement(_Radio["default"], {
52
- checked: true,
53
- theme: "light",
54
- value: "TestValue",
55
- label: "Selected Radio",
56
- labelPosition: "before",
57
- onChange: onChange,
58
- disabled: false
59
- }), _react["default"].createElement(_Radio["default"], {
60
- checked: false,
61
- theme: "light",
62
- value: "TestValue",
63
- label: "Disabled Radio",
64
- labelPosition: "before",
65
- onChange: onChange,
66
- disabled: true
67
- }), _react["default"].createElement(_Radio["default"], {
68
- checked: true,
69
- theme: "light",
70
- value: "TestValue",
71
- label: "Disabled Selected Radio",
72
- labelPosition: "before",
73
- onChange: onChange,
74
- disabled: true
75
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
76
- style: {
77
- background: "black"
78
- }
79
- }, _react["default"].createElement(_Radio["default"], {
80
- checked: false,
81
- theme: "dark",
82
- value: "TestValue",
83
- label: "Enable Radio",
84
- labelPosition: "after",
85
- onChange: onChange,
86
- disabled: false
87
- }), _react["default"].createElement(_Radio["default"], {
88
- checked: false,
89
- theme: "dark",
90
- value: "TestValue",
91
- label: "Label before",
92
- labelPosition: "before",
93
- onChange: onChange,
94
- disabled: false,
95
- required: true
96
- }), _react["default"].createElement(_Radio["default"], {
97
- checked: false,
98
- theme: "dark",
99
- value: "TestValue",
100
- label: "Label after",
101
- labelPosition: "after",
102
- onChange: onChange,
103
- disabled: false
104
- }), _react["default"].createElement(_Radio["default"], {
105
- checked: true,
106
- theme: "dark",
107
- value: "TestValue",
108
- label: "Selected Radio",
109
- labelPosition: "before",
110
- onChange: onChange,
111
- disabled: false
112
- }), _react["default"].createElement(_Radio["default"], {
113
- checked: false,
114
- theme: "dark",
115
- value: "TestValue",
116
- label: "Disabled Radio",
117
- labelPosition: "before",
118
- onChange: onChange,
119
- disabled: true
120
- }), _react["default"].createElement(_Radio["default"], {
121
- checked: true,
122
- theme: "dark",
123
- value: "TestValue",
124
- label: "Disabled Selected Radio",
125
- labelPosition: "before",
126
- onChange: onChange,
127
- disabled: true
128
- })));
129
- }, {
130
- notes: {
131
- markdown: _readme["default"]
132
- }
133
- });
134
-
135
- var knobProps = function knobProps() {
136
- return {
137
- label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
138
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
139
- labelPosition: (0, _addonKnobs.select)("Label position", {
140
- before: "before",
141
- after: "after"
142
- }, "before"),
143
- theme: (0, _addonKnobs.select)("Theme", {
144
- light: "light",
145
- dark: "dark"
146
- }, "light"),
147
- disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
148
- required: (0, _addonKnobs["boolean"])("Required", false)
149
- };
150
- };
151
-
152
- (0, _react2.storiesOf)("Form Components|Radio", module).add("Knobs example", function () {
153
- var props = knobProps();
154
- return _react["default"].createElement("div", {
155
- style: {
156
- background: props.theme === "dark" && "black" || "transparent"
157
- }
158
- }, _react["default"].createElement(_Radio["default"], (0, _extends2["default"])({}, props, {
159
- value: "TestValue",
160
- onChange: onChange
161
- })));
162
- }, {
163
- notes: {
164
- markdown: _readme["default"]
165
- }
166
- });
@@ -1,70 +0,0 @@
1
- # DXC Radio Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcRadio } from "@diaas/dxc-react-cdk";
7
-
8
- <DxcRadio onChange={handleNewValue} label="Test Radio" 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 radio is checked </td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td></td>
32
- <td>Text to be placed next to the radio.</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 radio.</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 radio. The event object will be passed as a parameter.<br>
68
- Current state can be accessed via event.target.checked</td>
69
- </tr>
70
- </table>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>