@dxc-technology/halstack-react 3.4.1 → 4.0.0

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 (233) hide show
  1. package/{dist/BackgroundColorContext.js → BackgroundColorContext.js} +0 -0
  2. package/{dist/ThemeContext.js → ThemeContext.js} +74 -64
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +127 -163
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +4 -4
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +0 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +0 -0
  10. package/accordion-group/index.d.ts +16 -0
  11. package/{dist/alert → alert}/Alert.js +6 -6
  12. package/alert/index.d.ts +51 -0
  13. package/{dist/badge → badge}/Badge.js +0 -0
  14. package/{dist/box → box}/Box.js +0 -0
  15. package/box/index.d.ts +25 -0
  16. package/{dist/button → button}/Button.js +3 -3
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +0 -0
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +4 -5
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +0 -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 +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/{dist/common → common}/utils.js +0 -0
  38. package/{dist/common → common}/variables.js +344 -138
  39. package/{dist/date → date}/Date.js +4 -6
  40. package/date/index.d.ts +27 -0
  41. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +69 -72
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +0 -0
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +0 -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 +44 -18
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +122 -55
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/{dist/heading → heading}/Heading.js +12 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +7 -9
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +5 -9
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +4 -8
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +37 -29
  67. package/{dist/number/Number.js → number-input/NumberInput.js} +9 -11
  68. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +21 -16
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +53 -37
  73. package/paginator/index.d.ts +20 -0
  74. package/{dist/password/Password.js → password-input/PasswordInput.js} +17 -14
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +1 -1
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +0 -0
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +1 -1
  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/{dist/sidenav → sidenav}/Sidenav.js +6 -4
  85. package/sidenav/index.d.ts +13 -0
  86. package/{dist/slider → slider}/Slider.js +104 -19
  87. package/slider/index.d.ts +29 -0
  88. package/{dist/spinner → spinner}/Spinner.js +0 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +0 -0
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +0 -0
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +0 -0
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +26 -32
  97. package/tag/index.d.ts +24 -0
  98. package/{dist/new-input-text/NewInputText.js → text-input/TextInput.js} +343 -312
  99. package/text-input/index.d.ts +135 -0
  100. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +68 -45
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +132 -28
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +0 -0
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +7 -11
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +14 -14
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +26 -21
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +0 -0
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +11 -38
  117. package/{dist/upload → upload}/transactions/Transactions.js +0 -0
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +3 -9
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/checkbox/Checkbox.stories.js +0 -144
  125. package/dist/checkbox/readme.md +0 -116
  126. package/dist/date/Date.stories.js +0 -205
  127. package/dist/date/readme.md +0 -73
  128. package/dist/footer/Footer.stories.js +0 -94
  129. package/dist/footer/dxc_logo.svg +0 -15
  130. package/dist/footer/readme.md +0 -41
  131. package/dist/header/Header.stories.js +0 -176
  132. package/dist/header/close_icon.svg +0 -1
  133. package/dist/header/dxc_logo_black.svg +0 -8
  134. package/dist/header/hamb_menu_black.svg +0 -1
  135. package/dist/header/hamb_menu_white.svg +0 -1
  136. package/dist/header/readme.md +0 -33
  137. package/dist/input-text/InputText.stories.js +0 -209
  138. package/dist/input-text/error.svg +0 -1
  139. package/dist/input-text/readme.md +0 -91
  140. package/dist/layout/facebook.svg +0 -45
  141. package/dist/layout/linkedin.svg +0 -50
  142. package/dist/layout/twitter.svg +0 -53
  143. package/dist/link/readme.md +0 -51
  144. package/dist/paginator/images/next.svg +0 -3
  145. package/dist/paginator/images/nextPage.svg +0 -3
  146. package/dist/paginator/images/previous.svg +0 -3
  147. package/dist/paginator/images/previousPage.svg +0 -3
  148. package/dist/paginator/readme.md +0 -50
  149. package/dist/password/styles.css +0 -3
  150. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  151. package/dist/progress-bar/readme.md +0 -63
  152. package/dist/radio/Radio.stories.js +0 -166
  153. package/dist/radio/readme.md +0 -70
  154. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  155. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  156. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  157. package/dist/select/Select.stories.js +0 -235
  158. package/dist/select/readme.md +0 -72
  159. package/dist/slider/Slider.stories.js +0 -241
  160. package/dist/slider/readme.md +0 -64
  161. package/dist/spinner/Spinner.stories.js +0 -183
  162. package/dist/spinner/readme.md +0 -65
  163. package/dist/switch/Switch.stories.js +0 -134
  164. package/dist/switch/readme.md +0 -133
  165. package/dist/tabs/Tabs.stories.js +0 -130
  166. package/dist/tabs/readme.md +0 -78
  167. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  168. package/dist/tabs-for-sections/readme.md +0 -78
  169. package/dist/toggle/Toggle.stories.js +0 -297
  170. package/dist/toggle/readme.md +0 -80
  171. package/dist/upload/Upload.stories.js +0 -72
  172. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  173. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  174. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  175. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  176. package/dist/upload/file-upload/audio-icon.svg +0 -4
  177. package/dist/upload/file-upload/close.svg +0 -4
  178. package/dist/upload/file-upload/file-icon.svg +0 -4
  179. package/dist/upload/file-upload/video-icon.svg +0 -4
  180. package/dist/upload/readme.md +0 -37
  181. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  182. package/dist/upload/transaction/audio-icon.svg +0 -4
  183. package/dist/upload/transaction/error-icon.svg +0 -4
  184. package/dist/upload/transaction/file-icon-err.svg +0 -4
  185. package/dist/upload/transaction/file-icon.svg +0 -4
  186. package/dist/upload/transaction/image-icon-err.svg +0 -4
  187. package/dist/upload/transaction/image-icon.svg +0 -4
  188. package/dist/upload/transaction/success-icon.svg +0 -4
  189. package/dist/upload/transaction/video-icon-err.svg +0 -4
  190. package/dist/upload/transaction/video-icon.svg +0 -4
  191. package/dist/wizard/invalid_icon.svg +0 -5
  192. package/dist/wizard/valid_icon.svg +0 -5
  193. package/dist/wizard/validation-wrong.svg +0 -6
  194. package/test/Accordion.test.js +0 -33
  195. package/test/AccordionGroup.test.js +0 -125
  196. package/test/Alert.test.js +0 -53
  197. package/test/Box.test.js +0 -10
  198. package/test/Button.test.js +0 -18
  199. package/test/Card.test.js +0 -30
  200. package/test/Checkbox.test.js +0 -45
  201. package/test/Chip.test.js +0 -25
  202. package/test/Date.test.js +0 -393
  203. package/test/Dialog.test.js +0 -23
  204. package/test/Dropdown.test.js +0 -145
  205. package/test/Footer.test.js +0 -99
  206. package/test/Header.test.js +0 -39
  207. package/test/Heading.test.js +0 -35
  208. package/test/InputText.test.js +0 -240
  209. package/test/Link.test.js +0 -43
  210. package/test/NewDate.test.js +0 -203
  211. package/test/NewInputText.test.js +0 -817
  212. package/test/NewTextarea.test.js +0 -201
  213. package/test/Number.test.js +0 -241
  214. package/test/Paginator.test.js +0 -177
  215. package/test/Password.test.js +0 -76
  216. package/test/ProgressBar.test.js +0 -35
  217. package/test/Radio.test.js +0 -37
  218. package/test/ResultsetTable.test.js +0 -330
  219. package/test/Select.test.js +0 -189
  220. package/test/Sidenav.test.js +0 -45
  221. package/test/Slider.test.js +0 -82
  222. package/test/Spinner.test.js +0 -32
  223. package/test/Switch.test.js +0 -45
  224. package/test/Table.test.js +0 -36
  225. package/test/Tabs.test.js +0 -109
  226. package/test/TabsForSections.test.js +0 -34
  227. package/test/Tag.test.js +0 -32
  228. package/test/TextArea.test.js +0 -52
  229. package/test/ToggleGroup.test.js +0 -81
  230. package/test/Upload.test.js +0 -60
  231. package/test/Wizard.test.js +0 -130
  232. package/test/mocks/pngMock.js +0 -1
  233. package/test/mocks/svgMock.js +0 -1
@@ -1,53 +0,0 @@
1
- <?xml version="1.0" encoding="iso-8859-1"?>
2
- <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="438.536px" height="438.536px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
6
- xml:space="preserve" fill="#FFFFFF">
7
- <g>
8
- <path d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
9
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
10
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
11
- C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
12
- c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
13
- c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
14
- c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
15
- c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
16
- c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
17
- c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
18
- c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
19
- c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
20
- c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
21
- C357.458,149.793,347.462,160.166,335.471,168.735z"/>
22
- </g>
23
- <g>
24
- </g>
25
- <g>
26
- </g>
27
- <g>
28
- </g>
29
- <g>
30
- </g>
31
- <g>
32
- </g>
33
- <g>
34
- </g>
35
- <g>
36
- </g>
37
- <g>
38
- </g>
39
- <g>
40
- </g>
41
- <g>
42
- </g>
43
- <g>
44
- </g>
45
- <g>
46
- </g>
47
- <g>
48
- </g>
49
- <g>
50
- </g>
51
- <g>
52
- </g>
53
- </svg>
@@ -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,3 +0,0 @@
1
- ::-ms-reveal {
2
- display: none;
3
- }
@@ -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
- ```