@dxc-technology/halstack-react 0.0.0-b646454 → 0.0.0-b821bfb

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 (267) 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 +1567 -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 +58 -37
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +205 -85
  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 +121 -46
  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 -16
  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 +95 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +39 -17
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +93 -68
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -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 +50 -27
  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 +992 -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 +32 -19
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +84 -34
  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/{dist/wizard → wizard}/Wizard.js +138 -60
  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 -242
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/alert/Alert.js +0 -304
  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 -181
  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 -173
  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 -400
  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.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.js +0 -372
  161. package/dist/header/Header.stories.js +0 -176
  162. package/dist/header/close_icon.svg +0 -1
  163. package/dist/header/dxc_logo_black.png +0 -0
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/input-text/InputText.js +0 -519
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/link/Link.js +0 -136
  173. package/dist/link/readme.md +0 -51
  174. package/dist/paginator/Paginator.js +0 -196
  175. package/dist/paginator/images/next.svg +0 -3
  176. package/dist/paginator/images/nextPage.svg +0 -3
  177. package/dist/paginator/images/previous.svg +0 -3
  178. package/dist/paginator/images/previousPage.svg +0 -3
  179. package/dist/paginator/readme.md +0 -50
  180. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  181. package/dist/progress-bar/readme.md +0 -63
  182. package/dist/radio/Radio.stories.js +0 -166
  183. package/dist/radio/readme.md +0 -70
  184. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  185. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  187. package/dist/select/Select.js +0 -445
  188. package/dist/select/Select.stories.js +0 -235
  189. package/dist/select/readme.md +0 -72
  190. package/dist/sidenav/Sidenav.js +0 -236
  191. package/dist/sidenav/arrow_icon.svg +0 -3
  192. package/dist/slider/Slider.js +0 -258
  193. package/dist/slider/Slider.stories.js +0 -241
  194. package/dist/slider/readme.md +0 -64
  195. package/dist/spinner/Spinner.js +0 -193
  196. package/dist/spinner/Spinner.stories.js +0 -183
  197. package/dist/spinner/readme.md +0 -65
  198. package/dist/switch/Switch.stories.js +0 -134
  199. package/dist/switch/readme.md +0 -133
  200. package/dist/table/Table.js +0 -87
  201. package/dist/tabs/Tabs.js +0 -172
  202. package/dist/tabs/Tabs.stories.js +0 -130
  203. package/dist/tabs/readme.md +0 -78
  204. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  205. package/dist/tabs-for-sections/readme.md +0 -78
  206. package/dist/textarea/Textarea.js +0 -227
  207. package/dist/toggle/Toggle.stories.js +0 -297
  208. package/dist/toggle/readme.md +0 -80
  209. package/dist/upload/Upload.stories.js +0 -72
  210. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  211. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  212. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  213. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  214. package/dist/upload/file-upload/FileToUpload.js +0 -158
  215. package/dist/upload/file-upload/audio-icon.svg +0 -4
  216. package/dist/upload/file-upload/close.svg +0 -4
  217. package/dist/upload/file-upload/file-icon.svg +0 -4
  218. package/dist/upload/file-upload/video-icon.svg +0 -4
  219. package/dist/upload/readme.md +0 -37
  220. package/dist/upload/transaction/Transaction.js +0 -155
  221. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  222. package/dist/upload/transaction/audio-icon.svg +0 -4
  223. package/dist/upload/transaction/error-icon.svg +0 -4
  224. package/dist/upload/transaction/file-icon-err.svg +0 -4
  225. package/dist/upload/transaction/file-icon.svg +0 -4
  226. package/dist/upload/transaction/image-icon-err.svg +0 -4
  227. package/dist/upload/transaction/image-icon.svg +0 -4
  228. package/dist/upload/transaction/success-icon.svg +0 -4
  229. package/dist/upload/transaction/video-icon-err.svg +0 -4
  230. package/dist/upload/transaction/video-icon.svg +0 -4
  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/Chip.test.js +0 -25
  241. package/test/Date.test.js +0 -393
  242. package/test/Dialog.test.js +0 -23
  243. package/test/Dropdown.test.js +0 -130
  244. package/test/Footer.test.js +0 -99
  245. package/test/Header.test.js +0 -39
  246. package/test/Heading.test.js +0 -35
  247. package/test/InputText.test.js +0 -236
  248. package/test/Link.test.js +0 -25
  249. package/test/Paginator.test.js +0 -165
  250. package/test/ProgressBar.test.js +0 -35
  251. package/test/Radio.test.js +0 -37
  252. package/test/ResultsetTable.test.js +0 -282
  253. package/test/Select.test.js +0 -191
  254. package/test/Sidenav.test.js +0 -87
  255. package/test/Slider.test.js +0 -65
  256. package/test/Spinner.test.js +0 -27
  257. package/test/Switch.test.js +0 -45
  258. package/test/Table.test.js +0 -36
  259. package/test/Tabs.test.js +0 -88
  260. package/test/TabsForSections.test.js +0 -34
  261. package/test/Tag.test.js +0 -32
  262. package/test/TextArea.test.js +0 -52
  263. package/test/Toggle.test.js +0 -43
  264. package/test/Upload.test.js +0 -60
  265. package/test/Wizard.test.js +0 -130
  266. package/test/mocks/pngMock.js +0 -1
  267. package/test/mocks/svgMock.js +0 -1
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="7.41" height="12" viewBox="0 0 7.41 12">
2
- <path id="Path_2461" data-name="Path 2461" d="M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z" transform="translate(-8.59 -6)"/>
3
- </svg>
@@ -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_2465" data-name="Path 2465" d="M5.59,7.41,10.18,12,5.59,16.59,7,18l6-6L7,6ZM16,6h2V18H16Z" transform="translate(-5.59 -6)"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="7.41" height="12" viewBox="0 0 7.41 12">
2
- <path id="Path_2459" data-name="Path 2459" d="M15.41,7.41,14,6,8,12l6,6,1.41-1.41L10.83,12Z" transform="translate(-8 -6)"/>
3
- </svg>
@@ -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>