@dxc-technology/halstack-react 0.0.0-ba36a4a → 0.0.0-ba408d4

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 (249) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +116 -246
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +14 -18
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +23 -87
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +13 -15
  10. package/accordion-group/index.d.ts +16 -0
  11. package/{dist/alert → alert}/Alert.js +42 -136
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +59 -0
  14. package/{dist/box → box}/Box.js +9 -13
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.d.ts +4 -0
  17. package/{dist/button → button}/Button.js +16 -72
  18. package/button/Button.stories.tsx +306 -0
  19. package/button/types.d.ts +57 -0
  20. package/button/types.js +5 -0
  21. package/{dist/card → card}/Card.js +19 -73
  22. package/card/index.d.ts +22 -0
  23. package/{dist/checkbox → checkbox}/Checkbox.js +16 -41
  24. package/checkbox/index.d.ts +24 -0
  25. package/{dist/chip → chip}/Chip.js +17 -61
  26. package/chip/index.d.ts +22 -0
  27. package/{dist/common → common}/OpenSans.css +0 -0
  28. package/{dist/common → common}/RequiredComponent.js +3 -11
  29. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  39. package/{dist/common → common}/utils.js +0 -0
  40. package/{dist/common → common}/variables.js +347 -139
  41. package/{dist/date → date}/Date.js +20 -28
  42. package/date/index.d.ts +27 -0
  43. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +85 -92
  44. package/date-input/index.d.ts +95 -0
  45. package/{dist/dialog → dialog}/Dialog.js +16 -50
  46. package/dialog/index.d.ts +18 -0
  47. package/{dist/dropdown → dropdown}/Dropdown.js +37 -131
  48. package/dropdown/index.d.ts +26 -0
  49. package/file-input/FileInput.js +532 -0
  50. package/file-input/FileItem.js +193 -0
  51. package/file-input/index.d.ts +81 -0
  52. package/{dist/footer → footer}/Footer.js +53 -151
  53. package/footer/Icons.js +77 -0
  54. package/footer/index.d.ts +25 -0
  55. package/header/Header.js +326 -0
  56. package/header/Icons.js +59 -0
  57. package/header/index.d.ts +25 -0
  58. package/{dist/heading → heading}/Heading.js +30 -72
  59. package/heading/index.d.ts +17 -0
  60. package/input-text/Icons.js +22 -0
  61. package/{dist/input-text → input-text}/InputText.js +37 -133
  62. package/input-text/index.d.ts +36 -0
  63. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  64. package/layout/Icons.js +55 -0
  65. package/{dist/link → link}/Link.js +20 -78
  66. package/link/index.d.ts +23 -0
  67. package/main.d.ts +44 -0
  68. package/{dist/main.js → main.js} +104 -92
  69. package/{dist/number/Number.js → number-input/NumberInput.js} +10 -20
  70. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  71. package/number-input/index.d.ts +113 -0
  72. package/package.json +31 -23
  73. package/paginator/Icons.js +66 -0
  74. package/paginator/Paginator.d.ts +4 -0
  75. package/paginator/Paginator.js +198 -0
  76. package/paginator/types.d.ts +38 -0
  77. package/paginator/types.js +5 -0
  78. package/{dist/password/Password.js → password-input/PasswordInput.js} +27 -28
  79. package/password-input/index.d.ts +94 -0
  80. package/{dist/progress-bar → progress-bar}/ProgressBar.js +18 -72
  81. package/progress-bar/index.d.ts +18 -0
  82. package/{dist/radio → radio}/Radio.js +12 -26
  83. package/radio/index.d.ts +23 -0
  84. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  85. package/resultsetTable/index.d.ts +19 -0
  86. package/select/Select.js +865 -0
  87. package/select/index.d.ts +131 -0
  88. package/{dist/sidenav → sidenav}/Sidenav.js +17 -49
  89. package/sidenav/index.d.ts +13 -0
  90. package/{dist/slider → slider}/Slider.js +79 -58
  91. package/slider/index.d.ts +29 -0
  92. package/{dist/spinner → spinner}/Spinner.js +38 -152
  93. package/spinner/index.d.ts +17 -0
  94. package/{dist/switch → switch}/Switch.js +12 -26
  95. package/switch/index.d.ts +24 -0
  96. package/{dist/table → table}/Table.js +10 -24
  97. package/table/index.d.ts +13 -0
  98. package/{dist/tabs → tabs}/Tabs.js +26 -110
  99. package/tabs/index.d.ts +19 -0
  100. package/{dist/tag → tag}/Tag.js +40 -120
  101. package/tag/index.d.ts +24 -0
  102. package/text-input/TextInput.js +825 -0
  103. package/text-input/index.d.ts +135 -0
  104. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +81 -110
  105. package/textarea/index.d.ts +117 -0
  106. package/{dist/toggle → toggle}/Toggle.js +15 -49
  107. package/toggle/index.d.ts +21 -0
  108. package/toggle-group/ToggleGroup.js +243 -0
  109. package/toggle-group/index.d.ts +21 -0
  110. package/{dist/upload → upload}/Upload.js +11 -15
  111. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  112. package/upload/buttons-upload/Icons.js +40 -0
  113. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  114. package/upload/dragAndDropArea/Icons.js +39 -0
  115. package/upload/file-upload/FileToUpload.js +115 -0
  116. package/upload/file-upload/Icons.js +66 -0
  117. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  118. package/upload/index.d.ts +15 -0
  119. package/upload/transaction/Icons.js +160 -0
  120. package/upload/transaction/Transaction.js +104 -0
  121. package/upload/transactions/Transactions.js +94 -0
  122. package/{dist/useTheme.js → useTheme.js} +0 -0
  123. package/wizard/Icons.js +65 -0
  124. package/{dist/wizard → wizard}/Wizard.js +32 -172
  125. package/wizard/index.d.ts +18 -0
  126. package/README.md +0 -66
  127. package/babel.config.js +0 -8
  128. package/dist/BackgroundColorContext.js +0 -46
  129. package/dist/ThemeContext.js +0 -240
  130. package/dist/badge/Badge.js +0 -63
  131. package/dist/checkbox/Checkbox.stories.js +0 -144
  132. package/dist/checkbox/readme.md +0 -116
  133. package/dist/date/Date.stories.js +0 -205
  134. package/dist/date/readme.md +0 -73
  135. package/dist/footer/Footer.stories.js +0 -94
  136. package/dist/footer/dxc_logo.svg +0 -15
  137. package/dist/footer/readme.md +0 -41
  138. package/dist/header/Header.js +0 -403
  139. package/dist/header/Header.stories.js +0 -176
  140. package/dist/header/close_icon.svg +0 -1
  141. package/dist/header/dxc_logo_black.svg +0 -8
  142. package/dist/header/hamb_menu_black.svg +0 -1
  143. package/dist/header/hamb_menu_white.svg +0 -1
  144. package/dist/header/readme.md +0 -33
  145. package/dist/input-text/InputText.stories.js +0 -209
  146. package/dist/input-text/error.svg +0 -1
  147. package/dist/input-text/readme.md +0 -91
  148. package/dist/layout/facebook.svg +0 -45
  149. package/dist/layout/linkedin.svg +0 -50
  150. package/dist/layout/twitter.svg +0 -53
  151. package/dist/link/readme.md +0 -51
  152. package/dist/new-input-text/NewInputText.js +0 -961
  153. package/dist/paginator/Paginator.js +0 -289
  154. package/dist/paginator/images/next.svg +0 -3
  155. package/dist/paginator/images/nextPage.svg +0 -3
  156. package/dist/paginator/images/previous.svg +0 -3
  157. package/dist/paginator/images/previousPage.svg +0 -3
  158. package/dist/paginator/readme.md +0 -50
  159. package/dist/password/styles.css +0 -3
  160. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  161. package/dist/progress-bar/readme.md +0 -63
  162. package/dist/radio/Radio.stories.js +0 -166
  163. package/dist/radio/readme.md +0 -70
  164. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  165. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  166. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  167. package/dist/select/Select.stories.js +0 -235
  168. package/dist/select/readme.md +0 -72
  169. package/dist/slider/Slider.stories.js +0 -241
  170. package/dist/slider/readme.md +0 -64
  171. package/dist/spinner/Spinner.stories.js +0 -183
  172. package/dist/spinner/readme.md +0 -65
  173. package/dist/switch/Switch.stories.js +0 -134
  174. package/dist/switch/readme.md +0 -133
  175. package/dist/tabs/Tabs.stories.js +0 -130
  176. package/dist/tabs/readme.md +0 -78
  177. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  178. package/dist/tabs-for-sections/readme.md +0 -78
  179. package/dist/toggle/Toggle.stories.js +0 -297
  180. package/dist/toggle/readme.md +0 -80
  181. package/dist/toggle-group/ToggleGroup.js +0 -223
  182. package/dist/upload/Upload.stories.js +0 -72
  183. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  184. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  185. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  186. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  187. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  188. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  189. package/dist/upload/file-upload/FileToUpload.js +0 -184
  190. package/dist/upload/file-upload/audio-icon.svg +0 -4
  191. package/dist/upload/file-upload/close.svg +0 -4
  192. package/dist/upload/file-upload/file-icon.svg +0 -4
  193. package/dist/upload/file-upload/video-icon.svg +0 -4
  194. package/dist/upload/readme.md +0 -37
  195. package/dist/upload/transaction/Transaction.js +0 -175
  196. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  197. package/dist/upload/transaction/audio-icon.svg +0 -4
  198. package/dist/upload/transaction/error-icon.svg +0 -4
  199. package/dist/upload/transaction/file-icon-err.svg +0 -4
  200. package/dist/upload/transaction/file-icon.svg +0 -4
  201. package/dist/upload/transaction/image-icon-err.svg +0 -4
  202. package/dist/upload/transaction/image-icon.svg +0 -4
  203. package/dist/upload/transaction/success-icon.svg +0 -4
  204. package/dist/upload/transaction/video-icon-err.svg +0 -4
  205. package/dist/upload/transaction/video-icon.svg +0 -4
  206. package/dist/upload/transactions/Transactions.js +0 -138
  207. package/dist/wizard/invalid_icon.svg +0 -5
  208. package/dist/wizard/valid_icon.svg +0 -5
  209. package/dist/wizard/validation-wrong.svg +0 -6
  210. package/test/Accordion.test.js +0 -33
  211. package/test/AccordionGroup.test.js +0 -125
  212. package/test/Alert.test.js +0 -53
  213. package/test/Box.test.js +0 -10
  214. package/test/Button.test.js +0 -18
  215. package/test/Card.test.js +0 -30
  216. package/test/Checkbox.test.js +0 -45
  217. package/test/Chip.test.js +0 -25
  218. package/test/Date.test.js +0 -393
  219. package/test/Dialog.test.js +0 -23
  220. package/test/Dropdown.test.js +0 -145
  221. package/test/Footer.test.js +0 -99
  222. package/test/Header.test.js +0 -39
  223. package/test/Heading.test.js +0 -35
  224. package/test/InputText.test.js +0 -240
  225. package/test/Link.test.js +0 -43
  226. package/test/NewDate.test.js +0 -203
  227. package/test/NewInputText.test.js +0 -817
  228. package/test/NewTextarea.test.js +0 -201
  229. package/test/Number.test.js +0 -241
  230. package/test/Paginator.test.js +0 -177
  231. package/test/Password.test.js +0 -76
  232. package/test/ProgressBar.test.js +0 -35
  233. package/test/Radio.test.js +0 -37
  234. package/test/ResultsetTable.test.js +0 -330
  235. package/test/Select.test.js +0 -189
  236. package/test/Sidenav.test.js +0 -45
  237. package/test/Slider.test.js +0 -82
  238. package/test/Spinner.test.js +0 -32
  239. package/test/Switch.test.js +0 -45
  240. package/test/Table.test.js +0 -36
  241. package/test/Tabs.test.js +0 -109
  242. package/test/TabsForSections.test.js +0 -34
  243. package/test/Tag.test.js +0 -32
  244. package/test/TextArea.test.js +0 -52
  245. package/test/ToggleGroup.test.js +0 -81
  246. package/test/Upload.test.js +0 -60
  247. package/test/Wizard.test.js +0 -130
  248. package/test/mocks/pngMock.js +0 -1
  249. package/test/mocks/svgMock.js +0 -1
@@ -1,289 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _propTypes = _interopRequireDefault(require("prop-types"));
21
-
22
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
23
-
24
- var _Button = _interopRequireDefault(require("../button/Button"));
25
-
26
- var _Select = _interopRequireDefault(require("../select/Select"));
27
-
28
- var _previousPage = _interopRequireDefault(require("./images/previousPage.svg"));
29
-
30
- var _previous = _interopRequireDefault(require("./images/previous.svg"));
31
-
32
- var _next = _interopRequireDefault(require("./images/next.svg"));
33
-
34
- var _nextPage = _interopRequireDefault(require("./images/nextPage.svg"));
35
-
36
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
37
-
38
- function _templateObject8() {
39
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
40
-
41
- _templateObject8 = function _templateObject8() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject7() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
50
-
51
- _templateObject7 = function _templateObject7() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject6() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n width: 100%;\n justify-content: flex-end;\n align-items: center;\n margin: 0 ", " 0 ", ";\n"]);
60
-
61
- _templateObject6 = function _templateObject6() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject5() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: ", ";\n margin-left: ", ";\n"]);
70
-
71
- _templateObject5 = function _templateObject5() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject4() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 10px;\n margin-left: 10px;\n"]);
80
-
81
- _templateObject4 = function _templateObject4() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject3() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 15px;\n"]);
90
-
91
- _templateObject3 = function _templateObject3() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject2() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
100
-
101
- _templateObject2 = function _templateObject2() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: ", ";\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-transform: ", ";\n background-color: ", ";\n color: ", ";\n\n button {\n &:disabled {\n background-color: transparent !important;\n opacity: 0.3 !important;\n }\n }\n"]);
110
-
111
- _templateObject = function _templateObject() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- var DxcPaginator = function DxcPaginator(_ref) {
119
- var _ref$currentPage = _ref.currentPage,
120
- currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
121
- _ref$itemsPerPage = _ref.itemsPerPage,
122
- itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
123
- itemsPerPageOptions = _ref.itemsPerPageOptions,
124
- _ref$totalItems = _ref.totalItems,
125
- totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
126
- showGoToPage = _ref.showGoToPage,
127
- onPageChange = _ref.onPageChange,
128
- itemsPerPageFunction = _ref.itemsPerPageFunction,
129
- _ref$tabIndex = _ref.tabIndex,
130
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
131
- var totalPages = Math.ceil(totalItems / itemsPerPage);
132
- var currentPageInternal = currentPage === -1 ? totalPages : currentPage;
133
- var minItemsPerPage = currentPageInternal === 1 || currentPageInternal === 0 ? currentPageInternal : (currentPageInternal - 1) * itemsPerPage + 1;
134
- var maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage;
135
- var colorsTheme = (0, _useTheme["default"])();
136
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
137
- theme: colorsTheme.paginator
138
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
139
- color: colorsTheme.paginator.backgroundColor
140
- }, _react["default"].createElement(DxcPaginatorContainer, {
141
- disabled: currentPageInternal === 1
142
- }, _react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && _react["default"].createElement(ItemsPageContainer, null, _react["default"].createElement(ItemsLabel, null, "Items per page "), _react["default"].createElement(_Select["default"], {
143
- options: itemsPerPageOptions.map(function (num) {
144
- return {
145
- label: num,
146
- value: num
147
- };
148
- }),
149
- onChange: itemsPerPageFunction,
150
- value: itemsPerPage,
151
- size: "small",
152
- tabIndex: tabIndex
153
- })), _react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && _react["default"].createElement(_Button["default"], {
154
- size: "small",
155
- mode: "secondary",
156
- disabled: currentPageInternal === 1 || currentPageInternal === 0,
157
- margin: {
158
- left: "xxsmall",
159
- right: "xxsmall"
160
- },
161
- iconSrc: _previousPage["default"],
162
- tabIndex: tabIndex,
163
- onClick: function onClick() {
164
- onPageChange(1);
165
- }
166
- }), onPageChange && _react["default"].createElement(_Button["default"], {
167
- size: "small",
168
- mode: "secondary",
169
- disabled: currentPageInternal === 1 || currentPageInternal === 0,
170
- margin: {
171
- left: "xxsmall",
172
- right: "xxsmall"
173
- },
174
- iconSrc: _previous["default"],
175
- tabIndex: tabIndex,
176
- onClick: function onClick() {
177
- onPageChange(currentPage - 1);
178
- }
179
- }), showGoToPage && _react["default"].createElement(PageToSelectContainer, null, _react["default"].createElement(GoToLabel, null, "Go to page: "), _react["default"].createElement(_Select["default"], {
180
- options: (0, _toConsumableArray2["default"])(Array(totalPages).keys()).map(function (num) {
181
- return {
182
- label: num + 1,
183
- value: num + 1
184
- };
185
- }),
186
- onChange: onPageChange,
187
- value: currentPage,
188
- size: "small",
189
- tabIndex: tabIndex
190
- })) || _react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && _react["default"].createElement(_Button["default"], {
191
- size: "small",
192
- mode: "secondary",
193
- disabled: currentPageInternal === totalPages,
194
- margin: {
195
- left: "xxsmall",
196
- right: "xxsmall"
197
- },
198
- iconSrc: _next["default"],
199
- tabIndex: tabIndex,
200
- onClick: function onClick() {
201
- onPageChange(currentPage + 1);
202
- }
203
- }), onPageChange && _react["default"].createElement(_Button["default"], {
204
- size: "small",
205
- mode: "secondary",
206
- disabled: currentPageInternal === totalPages,
207
- margin: {
208
- left: "xxsmall",
209
- right: "xxsmall"
210
- },
211
- iconSrc: _nextPage["default"],
212
- tabIndex: tabIndex,
213
- onClick: function onClick() {
214
- onPageChange(totalPages);
215
- }
216
- })))));
217
- };
218
-
219
- var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(), function (props) {
220
- return props.theme.height;
221
- }, function (props) {
222
- return props.theme.width;
223
- }, function (props) {
224
- return props.theme.fontFamily;
225
- }, function (props) {
226
- return props.theme.fontSize;
227
- }, function (props) {
228
- return props.theme.fontWeight;
229
- }, function (props) {
230
- return props.theme.fontStyle;
231
- }, function (props) {
232
- return props.theme.fontTextTransform;
233
- }, function (props) {
234
- return props.theme.backgroundColor;
235
- }, function (props) {
236
- return props.theme.fontColor;
237
- });
238
-
239
- var ItemsPageContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
240
- return props.theme.itemsPerPageSelectorMarginRight;
241
- }, function (props) {
242
- return props.theme.itemsPerPageSelectorMarginLeft;
243
- });
244
-
245
- var ItemsLabel = _styledComponents["default"].span(_templateObject3());
246
-
247
- var GoToLabel = _styledComponents["default"].span(_templateObject4());
248
-
249
- var TotalItemsContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
250
- return props.theme.totalItemsContainerMarginRight;
251
- }, function (props) {
252
- return props.theme.totalItemsContainerMarginLeft;
253
- });
254
-
255
- var LabelsContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
256
- return props.theme.marginRight;
257
- }, function (props) {
258
- return props.theme.marginLeft;
259
- });
260
-
261
- var PageToSelectContainer = _styledComponents["default"].span(_templateObject7(), function (props) {
262
- return props.theme.pageSelectorMarginRight;
263
- }, function (props) {
264
- return props.theme.pageSelectorMarginLeft;
265
- });
266
-
267
- var TextContainer = _styledComponents["default"].span(_templateObject8());
268
-
269
- DxcPaginator.propTypes = {
270
- currentPage: _propTypes["default"].number,
271
- itemsPerPage: _propTypes["default"].number,
272
- itemsPerPageOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
273
- totalItems: _propTypes["default"].number.isRequired,
274
- showGoToPage: _propTypes["default"].bool,
275
- onPageChange: _propTypes["default"].func,
276
- itemsPerPageFunction: _propTypes["default"].func,
277
- tabIndex: _propTypes["default"].number
278
- };
279
- DxcPaginator.defaultProps = {
280
- currentPage: 1,
281
- itemsPerPage: 5,
282
- itemsPerPageOptions: null,
283
- showGoToPage: false,
284
- onPageChange: null,
285
- itemsPerPageFunction: null,
286
- tabIndex: 0
287
- };
288
- var _default = DxcPaginator;
289
- exports["default"] = _default;
@@ -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
- });