@dxc-technology/halstack-react 0.0.0-b7f3ffd → 0.0.0-b915415

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 (224) hide show
  1. package/README.md +1 -1
  2. package/babel.config.js +0 -1
  3. package/dist/ThemeContext.js +134 -100
  4. package/dist/V3Select/V3Select.js +549 -0
  5. package/dist/V3Select/index.d.ts +27 -0
  6. package/dist/V3Textarea/V3Textarea.js +264 -0
  7. package/dist/V3Textarea/index.d.ts +27 -0
  8. package/dist/accordion/Accordion.js +80 -83
  9. package/dist/accordion/index.d.ts +28 -0
  10. package/dist/accordion-group/AccordionGroup.js +1 -3
  11. package/dist/accordion-group/index.d.ts +16 -0
  12. package/dist/alert/Alert.js +168 -83
  13. package/dist/alert/index.d.ts +51 -0
  14. package/dist/badge/Badge.js +3 -1
  15. package/dist/box/Box.js +1 -9
  16. package/dist/box/index.d.ts +25 -0
  17. package/dist/button/Button.js +32 -22
  18. package/dist/button/Button.stories.js +14 -211
  19. package/dist/button/index.d.ts +24 -0
  20. package/dist/card/Card.js +15 -8
  21. package/dist/card/index.d.ts +22 -0
  22. package/dist/checkbox/Checkbox.js +89 -23
  23. package/dist/checkbox/index.d.ts +24 -0
  24. package/dist/chip/Chip.js +63 -21
  25. package/dist/chip/index.d.ts +22 -0
  26. package/dist/common/variables.js +1114 -422
  27. package/dist/date/Date.js +60 -38
  28. package/dist/date/index.d.ts +27 -0
  29. package/dist/date-input/DateInput.js +400 -0
  30. package/dist/date-input/index.d.ts +95 -0
  31. package/dist/dialog/Dialog.js +44 -29
  32. package/dist/dialog/index.d.ts +18 -0
  33. package/dist/dropdown/Dropdown.js +162 -74
  34. package/dist/dropdown/index.d.ts +26 -0
  35. package/dist/file-input/FileInput.js +644 -0
  36. package/dist/file-input/FileItem.js +287 -0
  37. package/dist/file-input/index.d.ts +81 -0
  38. package/dist/footer/Footer.js +69 -53
  39. package/dist/footer/Icons.js +77 -0
  40. package/dist/footer/index.d.ts +25 -0
  41. package/dist/header/Header.js +123 -84
  42. package/dist/header/Icons.js +59 -0
  43. package/dist/header/index.d.ts +25 -0
  44. package/dist/heading/Heading.js +13 -5
  45. package/dist/heading/index.d.ts +17 -0
  46. package/dist/input-text/Icons.js +22 -0
  47. package/dist/input-text/InputText.js +159 -63
  48. package/dist/input-text/index.d.ts +36 -0
  49. package/dist/layout/ApplicationLayout.js +7 -11
  50. package/dist/layout/Icons.js +55 -0
  51. package/dist/link/Link.js +71 -46
  52. package/dist/link/index.d.ts +23 -0
  53. package/dist/main.d.ts +40 -0
  54. package/dist/main.js +63 -15
  55. package/dist/number-input/NumberInput.js +136 -0
  56. package/dist/number-input/NumberInputContext.js +16 -0
  57. package/dist/number-input/index.d.ts +113 -0
  58. package/dist/paginator/Icons.js +66 -0
  59. package/dist/paginator/Paginator.js +60 -38
  60. package/dist/paginator/index.d.ts +20 -0
  61. package/dist/password-input/PasswordInput.js +203 -0
  62. package/dist/password-input/index.d.ts +94 -0
  63. package/dist/progress-bar/ProgressBar.js +63 -27
  64. package/dist/progress-bar/index.d.ts +18 -0
  65. package/dist/radio/Radio.js +28 -9
  66. package/dist/radio/index.d.ts +23 -0
  67. package/dist/resultsetTable/ResultsetTable.js +64 -38
  68. package/dist/resultsetTable/index.d.ts +19 -0
  69. package/dist/select/Select.js +888 -282
  70. package/dist/select/index.d.ts +53 -0
  71. package/dist/sidenav/Sidenav.js +11 -15
  72. package/dist/sidenav/index.d.ts +13 -0
  73. package/dist/slider/Slider.js +204 -67
  74. package/dist/slider/index.d.ts +29 -0
  75. package/dist/spinner/Spinner.js +226 -59
  76. package/dist/spinner/index.d.ts +17 -0
  77. package/dist/switch/Switch.js +3 -3
  78. package/dist/switch/index.d.ts +24 -0
  79. package/dist/table/Table.js +19 -5
  80. package/dist/table/index.d.ts +13 -0
  81. package/dist/tabs/Tabs.js +6 -10
  82. package/dist/tabs/index.d.ts +19 -0
  83. package/dist/tag/Tag.js +50 -36
  84. package/dist/tag/index.d.ts +24 -0
  85. package/dist/text-input/TextInput.js +974 -0
  86. package/dist/text-input/index.d.ts +135 -0
  87. package/dist/textarea/Textarea.js +238 -107
  88. package/dist/textarea/index.d.ts +117 -0
  89. package/dist/toggle/index.d.ts +21 -0
  90. package/dist/toggle-group/ToggleGroup.js +137 -40
  91. package/dist/toggle-group/index.d.ts +21 -0
  92. package/dist/upload/Upload.js +1 -5
  93. package/dist/upload/buttons-upload/ButtonsUpload.js +28 -16
  94. package/dist/upload/buttons-upload/Icons.js +40 -0
  95. package/dist/upload/dragAndDropArea/DragAndDropArea.js +61 -25
  96. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  97. package/dist/upload/file-upload/FileToUpload.js +52 -25
  98. package/dist/upload/file-upload/Icons.js +66 -0
  99. package/dist/upload/files-upload/FilesToUpload.js +3 -3
  100. package/dist/upload/index.d.ts +15 -0
  101. package/dist/upload/transaction/Icons.js +160 -0
  102. package/dist/upload/transaction/Transaction.js +37 -41
  103. package/dist/upload/transactions/Transactions.js +24 -8
  104. package/dist/wizard/Icons.js +65 -0
  105. package/dist/wizard/Wizard.js +85 -63
  106. package/dist/wizard/index.d.ts +18 -0
  107. package/package.json +17 -11
  108. package/test/Date.test.js +15 -13
  109. package/test/DateInput.test.js +242 -0
  110. package/test/Dropdown.test.js +15 -0
  111. package/test/FileInput.test.js +201 -0
  112. package/test/Footer.test.js +2 -7
  113. package/test/Header.test.js +5 -10
  114. package/test/Heading.test.js +60 -12
  115. package/test/InputText.test.js +1 -2
  116. package/test/Link.test.js +3 -2
  117. package/test/NumberInput.test.js +259 -0
  118. package/test/Paginator.test.js +6 -2
  119. package/test/PasswordInput.test.js +83 -0
  120. package/test/ResultsetTable.test.js +6 -6
  121. package/test/Select.test.js +371 -148
  122. package/test/Slider.test.js +9 -17
  123. package/test/Spinner.test.js +5 -0
  124. package/test/TextInput.test.js +732 -0
  125. package/test/Textarea.test.js +193 -0
  126. package/test/ToggleGroup.test.js +5 -1
  127. package/test/Upload.test.js +1 -1
  128. package/test/V3Select.test.js +212 -0
  129. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  130. package/dist/accordion/Accordion.stories.js +0 -207
  131. package/dist/accordion/readme.md +0 -96
  132. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  133. package/dist/accordion-group/readme.md +0 -70
  134. package/dist/alert/Alert.stories.js +0 -158
  135. package/dist/alert/close.svg +0 -4
  136. package/dist/alert/error.svg +0 -4
  137. package/dist/alert/info.svg +0 -4
  138. package/dist/alert/readme.md +0 -43
  139. package/dist/alert/success.svg +0 -4
  140. package/dist/alert/warning.svg +0 -4
  141. package/dist/button/readme.md +0 -93
  142. package/dist/checkbox/Checkbox.stories.js +0 -144
  143. package/dist/checkbox/readme.md +0 -116
  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/input-text/InputText.stories.js +0 -209
  168. package/dist/input-text/error.svg +0 -1
  169. package/dist/input-text/readme.md +0 -91
  170. package/dist/layout/facebook.svg +0 -45
  171. package/dist/layout/linkedin.svg +0 -50
  172. package/dist/layout/twitter.svg +0 -53
  173. package/dist/link/readme.md +0 -51
  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.stories.js +0 -235
  187. package/dist/select/readme.md +0 -72
  188. package/dist/slider/Slider.stories.js +0 -241
  189. package/dist/slider/readme.md +0 -64
  190. package/dist/spinner/Spinner.stories.js +0 -183
  191. package/dist/spinner/readme.md +0 -65
  192. package/dist/switch/Switch.stories.js +0 -134
  193. package/dist/switch/readme.md +0 -133
  194. package/dist/tabs/Tabs.stories.js +0 -130
  195. package/dist/tabs/readme.md +0 -78
  196. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  197. package/dist/tabs-for-sections/readme.md +0 -78
  198. package/dist/toggle/Toggle.stories.js +0 -297
  199. package/dist/toggle/readme.md +0 -80
  200. package/dist/toggle-group/readme.md +0 -82
  201. package/dist/upload/Upload.stories.js +0 -72
  202. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  203. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  204. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  205. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  206. package/dist/upload/file-upload/audio-icon.svg +0 -4
  207. package/dist/upload/file-upload/close.svg +0 -4
  208. package/dist/upload/file-upload/file-icon.svg +0 -4
  209. package/dist/upload/file-upload/video-icon.svg +0 -4
  210. package/dist/upload/readme.md +0 -37
  211. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  212. package/dist/upload/transaction/audio-icon.svg +0 -4
  213. package/dist/upload/transaction/error-icon.svg +0 -4
  214. package/dist/upload/transaction/file-icon-err.svg +0 -4
  215. package/dist/upload/transaction/file-icon.svg +0 -4
  216. package/dist/upload/transaction/image-icon-err.svg +0 -4
  217. package/dist/upload/transaction/image-icon.svg +0 -4
  218. package/dist/upload/transaction/success-icon.svg +0 -4
  219. package/dist/upload/transaction/video-icon-err.svg +0 -4
  220. package/dist/upload/transaction/video-icon.svg +0 -4
  221. package/dist/wizard/invalid_icon.svg +0 -6
  222. package/dist/wizard/valid_icon.svg +0 -6
  223. package/dist/wizard/validation-wrong.svg +0 -6
  224. package/test/TabsForSections.test.js +0 -34
@@ -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 "@dxc-technology/halstack-react";
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 "@dxc-technology/halstack-react";
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 "@dxc-technology/halstack-react";
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>