@dxc-technology/halstack-react 0.0.0-e441916 → 0.0.0-e628009

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 (195) hide show
  1. package/README.md +1 -1
  2. package/babel.config.js +6 -2
  3. package/dist/BackgroundColorContext.js +46 -0
  4. package/dist/ThemeContext.js +235 -2
  5. package/dist/V3Textarea/V3Textarea.js +264 -0
  6. package/dist/accordion/Accordion.js +170 -81
  7. package/dist/accordion-group/AccordionGroup.js +186 -0
  8. package/dist/alert/Alert.js +184 -83
  9. package/dist/alert/index.d.ts +51 -0
  10. package/dist/badge/Badge.js +63 -0
  11. package/dist/box/Box.js +39 -19
  12. package/dist/button/Button.js +84 -29
  13. package/dist/card/Card.js +64 -56
  14. package/dist/checkbox/Checkbox.js +108 -32
  15. package/dist/chip/Chip.js +135 -40
  16. package/dist/common/RequiredComponent.js +2 -8
  17. package/dist/common/utils.js +2 -22
  18. package/dist/common/variables.js +1486 -105
  19. package/dist/date/Date.js +115 -78
  20. package/dist/date-input/DateInput.js +400 -0
  21. package/dist/date-input/index.d.ts +95 -0
  22. package/dist/dialog/Dialog.js +61 -36
  23. package/dist/dropdown/Dropdown.js +226 -94
  24. package/dist/file-input/FileInput.js +644 -0
  25. package/dist/file-input/FileItem.js +280 -0
  26. package/dist/file-input/index.d.ts +81 -0
  27. package/dist/footer/Footer.js +125 -45
  28. package/dist/footer/Icons.js +77 -0
  29. package/dist/header/Header.js +174 -90
  30. package/dist/header/Icons.js +59 -0
  31. package/dist/heading/Heading.js +93 -22
  32. package/dist/input-text/Icons.js +22 -0
  33. package/dist/input-text/InputText.js +298 -108
  34. package/dist/layout/ApplicationLayout.js +327 -0
  35. package/dist/layout/Icons.js +55 -0
  36. package/dist/link/Link.js +142 -34
  37. package/dist/main.d.ts +8 -0
  38. package/dist/main.js +111 -7
  39. package/dist/new-select/NewSelect.js +836 -0
  40. package/dist/new-select/index.d.ts +53 -0
  41. package/dist/number-input/NumberInput.js +136 -0
  42. package/dist/number-input/NumberInputContext.js +16 -0
  43. package/dist/number-input/index.d.ts +113 -0
  44. package/dist/paginator/Icons.js +66 -0
  45. package/dist/paginator/Paginator.js +162 -57
  46. package/dist/password-input/PasswordInput.js +198 -0
  47. package/dist/password-input/index.d.ts +94 -0
  48. package/dist/progress-bar/ProgressBar.js +97 -44
  49. package/dist/radio/Radio.js +39 -21
  50. package/dist/resultsetTable/ResultsetTable.js +93 -69
  51. package/dist/select/Select.js +253 -129
  52. package/dist/sidenav/Sidenav.js +87 -125
  53. package/dist/slider/Slider.js +219 -73
  54. package/dist/spinner/Spinner.js +249 -64
  55. package/dist/switch/Switch.js +52 -25
  56. package/dist/table/Table.js +63 -15
  57. package/dist/tabs/Tabs.js +210 -50
  58. package/dist/tabs-for-sections/TabsForSections.js +1 -16
  59. package/dist/tag/Tag.js +100 -35
  60. package/dist/text-input/TextInput.js +971 -0
  61. package/dist/text-input/index.d.ts +135 -0
  62. package/dist/textarea/Textarea.js +250 -107
  63. package/dist/textarea/index.d.ts +117 -0
  64. package/dist/toggle/Toggle.js +16 -19
  65. package/dist/toggle-group/ToggleGroup.js +327 -0
  66. package/dist/upload/Upload.js +16 -11
  67. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  68. package/dist/upload/buttons-upload/Icons.js +40 -0
  69. package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -37
  70. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  71. package/dist/upload/file-upload/FileToUpload.js +64 -33
  72. package/dist/upload/file-upload/Icons.js +66 -0
  73. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  74. package/dist/upload/transaction/Icons.js +160 -0
  75. package/dist/upload/transaction/Transaction.js +42 -49
  76. package/dist/upload/transactions/Transactions.js +38 -20
  77. package/dist/useTheme.js +22 -0
  78. package/dist/wizard/Icons.js +65 -0
  79. package/dist/wizard/Wizard.js +156 -61
  80. package/package.json +14 -6
  81. package/test/AccordionGroup.test.js +125 -0
  82. package/test/Date.test.js +49 -45
  83. package/test/DateInput.test.js +242 -0
  84. package/test/Dropdown.test.js +19 -4
  85. package/test/FileInput.test.js +201 -0
  86. package/test/Footer.test.js +2 -7
  87. package/test/Header.test.js +5 -10
  88. package/test/Heading.test.js +60 -12
  89. package/test/InputText.test.js +53 -41
  90. package/test/Link.test.js +25 -7
  91. package/test/NumberInput.test.js +259 -0
  92. package/test/Paginator.test.js +72 -60
  93. package/test/PasswordInput.test.js +83 -0
  94. package/test/ResultsetTable.test.js +66 -19
  95. package/test/Select.test.js +55 -34
  96. package/test/Sidenav.test.js +22 -64
  97. package/test/Slider.test.js +24 -15
  98. package/test/Spinner.test.js +5 -0
  99. package/test/Tabs.test.js +21 -0
  100. package/test/TextInput.test.js +732 -0
  101. package/test/Textarea.test.js +193 -0
  102. package/test/ToggleGroup.test.js +85 -0
  103. package/test/Upload.test.js +5 -5
  104. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  105. package/dist/accordion/Accordion.stories.js +0 -207
  106. package/dist/accordion/readme.md +0 -96
  107. package/dist/alert/Alert.stories.js +0 -158
  108. package/dist/alert/close.svg +0 -4
  109. package/dist/alert/error.svg +0 -4
  110. package/dist/alert/info.svg +0 -4
  111. package/dist/alert/readme.md +0 -43
  112. package/dist/alert/success.svg +0 -4
  113. package/dist/alert/warning.svg +0 -4
  114. package/dist/button/Button.stories.js +0 -224
  115. package/dist/button/readme.md +0 -93
  116. package/dist/checkbox/Checkbox.stories.js +0 -144
  117. package/dist/checkbox/readme.md +0 -116
  118. package/dist/common/services/example-service.js +0 -10
  119. package/dist/common/services/example-service.test.js +0 -12
  120. package/dist/date/Date.stories.js +0 -205
  121. package/dist/date/calendar.svg +0 -1
  122. package/dist/date/calendar_dark.svg +0 -1
  123. package/dist/date/readme.md +0 -73
  124. package/dist/dialog/Dialog.stories.js +0 -217
  125. package/dist/dialog/readme.md +0 -32
  126. package/dist/dropdown/Dropdown.stories.js +0 -249
  127. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  128. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  129. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  130. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  131. package/dist/dropdown/readme.md +0 -69
  132. package/dist/footer/Footer.stories.js +0 -94
  133. package/dist/footer/dxc_logo_wht.png +0 -0
  134. package/dist/footer/readme.md +0 -41
  135. package/dist/header/Header.stories.js +0 -176
  136. package/dist/header/close_icon.svg +0 -1
  137. package/dist/header/dxc_logo_black.png +0 -0
  138. package/dist/header/dxc_logo_white.png +0 -0
  139. package/dist/header/hamb_menu_black.svg +0 -1
  140. package/dist/header/hamb_menu_white.svg +0 -1
  141. package/dist/header/readme.md +0 -33
  142. package/dist/input-text/InputText.stories.js +0 -209
  143. package/dist/input-text/error.svg +0 -1
  144. package/dist/input-text/readme.md +0 -91
  145. package/dist/link/readme.md +0 -51
  146. package/dist/paginator/images/next.svg +0 -3
  147. package/dist/paginator/images/nextPage.svg +0 -3
  148. package/dist/paginator/images/previous.svg +0 -3
  149. package/dist/paginator/images/previousPage.svg +0 -3
  150. package/dist/paginator/readme.md +0 -50
  151. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  152. package/dist/progress-bar/readme.md +0 -63
  153. package/dist/radio/Radio.stories.js +0 -166
  154. package/dist/radio/readme.md +0 -70
  155. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  156. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  157. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  158. package/dist/select/Select.stories.js +0 -235
  159. package/dist/select/readme.md +0 -72
  160. package/dist/sidenav/arrow_icon.svg +0 -3
  161. package/dist/slider/Slider.stories.js +0 -241
  162. package/dist/slider/readme.md +0 -64
  163. package/dist/spinner/Spinner.stories.js +0 -183
  164. package/dist/spinner/readme.md +0 -65
  165. package/dist/switch/Switch.stories.js +0 -134
  166. package/dist/switch/readme.md +0 -133
  167. package/dist/tabs/Tabs.stories.js +0 -130
  168. package/dist/tabs/readme.md +0 -78
  169. package/dist/tabs-for-sections/readme.md +0 -78
  170. package/dist/toggle/Toggle.stories.js +0 -297
  171. package/dist/toggle/readme.md +0 -80
  172. package/dist/upload/Upload.stories.js +0 -72
  173. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  174. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  175. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  176. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  177. package/dist/upload/file-upload/audio-icon.svg +0 -4
  178. package/dist/upload/file-upload/close.svg +0 -4
  179. package/dist/upload/file-upload/file-icon.svg +0 -4
  180. package/dist/upload/file-upload/video-icon.svg +0 -4
  181. package/dist/upload/readme.md +0 -37
  182. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  183. package/dist/upload/transaction/audio-icon.svg +0 -4
  184. package/dist/upload/transaction/error-icon.svg +0 -4
  185. package/dist/upload/transaction/file-icon-err.svg +0 -4
  186. package/dist/upload/transaction/file-icon.svg +0 -4
  187. package/dist/upload/transaction/image-icon-err.svg +0 -4
  188. package/dist/upload/transaction/image-icon.svg +0 -4
  189. package/dist/upload/transaction/success-icon.svg +0 -4
  190. package/dist/upload/transaction/video-icon-err.svg +0 -4
  191. package/dist/upload/transaction/video-icon.svg +0 -4
  192. package/dist/wizard/invalid_icon.svg +0 -6
  193. package/dist/wizard/valid_icon.svg +0 -6
  194. package/dist/wizard/validation-wrong.svg +0 -6
  195. package/test/Toggle.test.js +0 -43
@@ -1,51 +0,0 @@
1
- # DXC Input Text 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>underlined: 'boolean'</td>
13
- <td><code>false</code></td>
14
- <td>If true, the text is underlined.</td>
15
- </tr>
16
- <tr>
17
- <td>color: boolean</td>
18
- <td><code>false</code></td>
19
- <td>If true, the link have the default colors.</td>
20
- </tr>
21
- <tr>
22
- <td>text: string</td>
23
- <td></td>
24
- <td>Link text.</td>
25
- </tr>
26
- <tr>
27
- <td>iconSrc: string</td>
28
- <td></td>
29
- <td>Source of the icon.</td>
30
- </tr>
31
- <tr>
32
- <td>iconPosition: 'before' | 'after'</td>
33
- <td><code>before</code></td>
34
- <td>Indicates the position of the icon in the component.</td>
35
- </tr>
36
- <tr>
37
- <td>href: string</td>
38
- <td></td>
39
- <td>Page to be opened when the user clicks on the link.</td>
40
- </tr>
41
- <tr>
42
- <td>theme: 'light' | 'dark'</td>
43
- <td><code>light</code></td>
44
- <td>Theme of the component.</td>
45
- </tr>
46
- <tr>
47
- <td>newWindow: boolean</td>
48
- <td><code>false</code></td>
49
- <td>If true, the page is opened in a new browser tab.</td>
50
- </tr>
51
- </table>
@@ -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
- });