@dxc-technology/halstack-react 0.0.0-e345e78 → 0.0.0-e3e5511

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 (269) 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 +31 -23
  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 +72 -35
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +107 -32
  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 +2 -8
  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/common/utils.js +22 -0
  38. package/common/variables.js +1574 -0
  39. package/{dist/date → date}/Date.js +81 -59
  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 +61 -36
  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 +122 -47
  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} +112 -16
  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 +31 -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 -21
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +93 -69
  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 +52 -25
  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/README.md +0 -66
  123. package/babel.config.js +0 -4
  124. package/dist/accordion/Accordion.js +0 -264
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/alert/Alert.js +0 -302
  128. package/dist/alert/Alert.stories.js +0 -158
  129. package/dist/alert/close.svg +0 -4
  130. package/dist/alert/error.svg +0 -4
  131. package/dist/alert/info.svg +0 -4
  132. package/dist/alert/readme.md +0 -43
  133. package/dist/alert/success.svg +0 -4
  134. package/dist/alert/warning.svg +0 -4
  135. package/dist/button/Button.js +0 -183
  136. package/dist/button/Button.stories.js +0 -224
  137. package/dist/button/readme.md +0 -93
  138. package/dist/checkbox/Checkbox.stories.js +0 -144
  139. package/dist/checkbox/readme.md +0 -116
  140. package/dist/chip/Chip.js +0 -170
  141. package/dist/common/services/example-service.js +0 -10
  142. package/dist/common/services/example-service.test.js +0 -12
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -260
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.js +0 -412
  152. package/dist/dropdown/Dropdown.stories.js +0 -249
  153. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  154. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  155. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  156. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  157. package/dist/dropdown/readme.md +0 -69
  158. package/dist/footer/Footer.stories.js +0 -94
  159. package/dist/footer/dxc_logo_wht.png +0 -0
  160. package/dist/footer/readme.md +0 -41
  161. package/dist/header/Header.js +0 -350
  162. package/dist/header/Header.stories.js +0 -176
  163. package/dist/header/close_icon.svg +0 -1
  164. package/dist/header/dxc_logo_black.png +0 -0
  165. package/dist/header/dxc_logo_white.png +0 -0
  166. package/dist/header/hamb_menu_black.svg +0 -1
  167. package/dist/header/hamb_menu_white.svg +0 -1
  168. package/dist/header/readme.md +0 -33
  169. package/dist/input-text/InputText.js +0 -519
  170. package/dist/input-text/InputText.stories.js +0 -209
  171. package/dist/input-text/error.svg +0 -1
  172. package/dist/input-text/readme.md +0 -91
  173. package/dist/link/Link.js +0 -136
  174. package/dist/link/readme.md +0 -51
  175. package/dist/paginator/Paginator.js +0 -178
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -442
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/sidenav/Sidenav.js +0 -217
  192. package/dist/sidenav/arrow_icon.svg +0 -3
  193. package/dist/slider/Slider.js +0 -258
  194. package/dist/slider/Slider.stories.js +0 -241
  195. package/dist/slider/readme.md +0 -64
  196. package/dist/spinner/Spinner.js +0 -196
  197. package/dist/spinner/Spinner.stories.js +0 -183
  198. package/dist/spinner/readme.md +0 -65
  199. package/dist/switch/Switch.stories.js +0 -134
  200. package/dist/switch/readme.md +0 -133
  201. package/dist/table/Table.js +0 -84
  202. package/dist/tabs/Tabs.js +0 -170
  203. package/dist/tabs/Tabs.stories.js +0 -130
  204. package/dist/tabs/readme.md +0 -78
  205. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  206. package/dist/tabs-for-sections/readme.md +0 -78
  207. package/dist/textarea/Textarea.js +0 -226
  208. package/dist/toggle/Toggle.stories.js +0 -297
  209. package/dist/toggle/readme.md +0 -80
  210. package/dist/upload/Upload.stories.js +0 -72
  211. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  212. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  213. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  214. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  215. package/dist/upload/file-upload/FileToUpload.js +0 -158
  216. package/dist/upload/file-upload/audio-icon.svg +0 -4
  217. package/dist/upload/file-upload/close.svg +0 -4
  218. package/dist/upload/file-upload/file-icon.svg +0 -4
  219. package/dist/upload/file-upload/video-icon.svg +0 -4
  220. package/dist/upload/readme.md +0 -37
  221. package/dist/upload/transaction/Transaction.js +0 -155
  222. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  223. package/dist/upload/transaction/audio-icon.svg +0 -4
  224. package/dist/upload/transaction/error-icon.svg +0 -4
  225. package/dist/upload/transaction/file-icon-err.svg +0 -4
  226. package/dist/upload/transaction/file-icon.svg +0 -4
  227. package/dist/upload/transaction/image-icon-err.svg +0 -4
  228. package/dist/upload/transaction/image-icon.svg +0 -4
  229. package/dist/upload/transaction/success-icon.svg +0 -4
  230. package/dist/upload/transaction/video-icon-err.svg +0 -4
  231. package/dist/upload/transaction/video-icon.svg +0 -4
  232. package/dist/wizard/Wizard.js +0 -310
  233. package/dist/wizard/invalid_icon.svg +0 -6
  234. package/dist/wizard/valid_icon.svg +0 -6
  235. package/dist/wizard/validation-wrong.svg +0 -6
  236. package/test/Accordion.test.js +0 -33
  237. package/test/Alert.test.js +0 -53
  238. package/test/Box.test.js +0 -10
  239. package/test/Button.test.js +0 -18
  240. package/test/Card.test.js +0 -30
  241. package/test/Checkbox.test.js +0 -45
  242. package/test/Chip.test.js +0 -25
  243. package/test/Date.test.js +0 -393
  244. package/test/Dialog.test.js +0 -23
  245. package/test/Dropdown.test.js +0 -130
  246. package/test/Footer.test.js +0 -99
  247. package/test/Header.test.js +0 -39
  248. package/test/Heading.test.js +0 -35
  249. package/test/InputText.test.js +0 -236
  250. package/test/Link.test.js +0 -25
  251. package/test/Paginator.test.js +0 -165
  252. package/test/ProgressBar.test.js +0 -35
  253. package/test/Radio.test.js +0 -37
  254. package/test/ResultsetTable.test.js +0 -282
  255. package/test/Select.test.js +0 -191
  256. package/test/Sidenav.test.js +0 -87
  257. package/test/Slider.test.js +0 -65
  258. package/test/Spinner.test.js +0 -27
  259. package/test/Switch.test.js +0 -45
  260. package/test/Table.test.js +0 -36
  261. package/test/Tabs.test.js +0 -88
  262. package/test/TabsForSections.test.js +0 -34
  263. package/test/Tag.test.js +0 -32
  264. package/test/TextArea.test.js +0 -52
  265. package/test/Toggle.test.js +0 -43
  266. package/test/Upload.test.js +0 -60
  267. package/test/Wizard.test.js +0 -130
  268. package/test/mocks/pngMock.js +0 -1
  269. package/test/mocks/svgMock.js +0 -1
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="12.41" height="12" viewBox="0 0 12.41 12">
2
- <path id="Path_2463" data-name="Path 2463" d="M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z" transform="translate(-6 -6)"/>
3
- </svg>
@@ -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 "@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>