@dxc-technology/halstack-react 0.0.0-4727df3 → 0.0.0-4970b2f

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 (252) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +38 -132
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +10 -14
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/{dist/accordion → accordion}/Accordion.js +35 -130
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/{dist/alert → alert}/Alert.js +38 -151
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -13
  21. package/box/index.d.ts +25 -0
  22. package/button/Button.d.ts +4 -0
  23. package/{dist/button → button}/Button.js +16 -72
  24. package/button/Button.stories.tsx +293 -0
  25. package/button/types.d.ts +57 -0
  26. package/button/types.js +5 -0
  27. package/{dist/card → card}/Card.js +19 -73
  28. package/card/index.d.ts +22 -0
  29. package/checkbox/Checkbox.d.ts +4 -0
  30. package/{dist/checkbox → checkbox}/Checkbox.js +16 -63
  31. package/checkbox/types.d.ts +60 -0
  32. package/checkbox/types.js +5 -0
  33. package/{dist/chip → chip}/Chip.js +17 -61
  34. package/chip/index.d.ts +22 -0
  35. package/{dist/common → common}/OpenSans.css +0 -0
  36. package/{dist/common → common}/RequiredComponent.js +3 -11
  37. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  39. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  47. package/{dist/common → common}/utils.js +0 -0
  48. package/{dist/common → common}/variables.js +131 -131
  49. package/{dist/date → date}/Date.js +21 -27
  50. package/date/index.d.ts +27 -0
  51. package/date-input/DateInput.d.ts +4 -0
  52. package/{dist/date-input → date-input}/DateInput.js +22 -61
  53. package/date-input/types.d.ts +100 -0
  54. package/date-input/types.js +5 -0
  55. package/{dist/dialog → dialog}/Dialog.js +16 -50
  56. package/dialog/index.d.ts +18 -0
  57. package/{dist/dropdown → dropdown}/Dropdown.js +37 -131
  58. package/dropdown/index.d.ts +26 -0
  59. package/{dist/file-input → file-input}/FileInput.js +49 -161
  60. package/{dist/file-input → file-input}/FileItem.js +36 -123
  61. package/{dist/file-input → file-input}/index.d.ts +1 -1
  62. package/{dist/footer → footer}/Footer.js +34 -158
  63. package/{dist/footer → footer}/Icons.js +13 -13
  64. package/footer/index.d.ts +25 -0
  65. package/{dist/header → header}/Header.js +62 -170
  66. package/{dist/header → header}/Icons.js +11 -11
  67. package/header/index.d.ts +25 -0
  68. package/{dist/heading → heading}/Heading.js +30 -72
  69. package/heading/index.d.ts +17 -0
  70. package/{dist/input-text → input-text}/Icons.js +2 -2
  71. package/{dist/input-text → input-text}/InputText.js +36 -130
  72. package/input-text/index.d.ts +36 -0
  73. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  74. package/layout/Icons.js +55 -0
  75. package/{dist/link → link}/Link.js +18 -72
  76. package/link/index.d.ts +23 -0
  77. package/main.d.ts +44 -0
  78. package/{dist/main.js → main.js} +93 -97
  79. package/{dist/number-input → number-input}/NumberInput.js +5 -13
  80. package/{dist/number-input → number-input}/NumberInputContext.js +1 -1
  81. package/{dist/number-input → number-input}/index.d.ts +0 -0
  82. package/package.json +32 -25
  83. package/paginator/Icons.js +66 -0
  84. package/paginator/Paginator.d.ts +4 -0
  85. package/paginator/Paginator.js +198 -0
  86. package/paginator/types.d.ts +38 -0
  87. package/paginator/types.js +5 -0
  88. package/{dist/password-input → password-input}/PasswordInput.js +23 -22
  89. package/password-input/PasswordInput.stories.jsx +131 -0
  90. package/{dist/password-input → password-input}/index.d.ts +0 -0
  91. package/{dist/progress-bar → progress-bar}/ProgressBar.js +18 -72
  92. package/progress-bar/index.d.ts +18 -0
  93. package/radio/Radio.d.ts +4 -0
  94. package/{dist/radio → radio}/Radio.js +15 -50
  95. package/radio/types.d.ts +54 -0
  96. package/radio/types.js +5 -0
  97. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  98. package/resultsetTable/index.d.ts +19 -0
  99. package/select/Select.js +865 -0
  100. package/select/index.d.ts +131 -0
  101. package/{dist/sidenav → sidenav}/Sidenav.js +15 -49
  102. package/sidenav/index.d.ts +13 -0
  103. package/{dist/slider → slider}/Slider.js +33 -87
  104. package/slider/index.d.ts +29 -0
  105. package/{dist/spinner → spinner}/Spinner.js +38 -152
  106. package/spinner/index.d.ts +17 -0
  107. package/switch/Switch.d.ts +4 -0
  108. package/{dist/switch → switch}/Switch.js +26 -69
  109. package/switch/types.d.ts +58 -0
  110. package/switch/types.js +5 -0
  111. package/{dist/table → table}/Table.js +10 -24
  112. package/table/index.d.ts +13 -0
  113. package/{dist/tabs → tabs}/Tabs.js +26 -110
  114. package/tabs/index.d.ts +19 -0
  115. package/{dist/tag → tag}/Tag.js +22 -96
  116. package/tag/index.d.ts +24 -0
  117. package/{dist/text-input → text-input}/TextInput.js +244 -390
  118. package/{dist/text-input → text-input}/index.d.ts +0 -0
  119. package/{dist/textarea → textarea}/Textarea.js +20 -72
  120. package/{dist/textarea → textarea}/index.d.ts +0 -0
  121. package/{dist/toggle → toggle}/Toggle.js +15 -49
  122. package/toggle/index.d.ts +21 -0
  123. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +23 -107
  124. package/toggle-group/index.d.ts +21 -0
  125. package/{dist/upload → upload}/Upload.js +14 -18
  126. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  127. package/upload/buttons-upload/Icons.js +40 -0
  128. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  129. package/upload/dragAndDropArea/Icons.js +39 -0
  130. package/upload/file-upload/FileToUpload.js +115 -0
  131. package/upload/file-upload/Icons.js +66 -0
  132. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  133. package/upload/index.d.ts +15 -0
  134. package/upload/transaction/Icons.js +160 -0
  135. package/upload/transaction/Transaction.js +104 -0
  136. package/upload/transactions/Transactions.js +94 -0
  137. package/{dist/useTheme.js → useTheme.js} +0 -0
  138. package/wizard/Icons.js +65 -0
  139. package/{dist/wizard → wizard}/Wizard.js +32 -172
  140. package/wizard/index.d.ts +18 -0
  141. package/README.md +0 -66
  142. package/babel.config.js +0 -8
  143. package/dist/BackgroundColorContext.js +0 -46
  144. package/dist/ThemeContext.js +0 -248
  145. package/dist/accordion-group/AccordionGroup.js +0 -186
  146. package/dist/alert/index.d.ts +0 -51
  147. package/dist/badge/Badge.js +0 -63
  148. package/dist/checkbox/Checkbox.stories.js +0 -144
  149. package/dist/checkbox/readme.md +0 -116
  150. package/dist/date/Date.stories.js +0 -205
  151. package/dist/date/readme.md +0 -73
  152. package/dist/date-input/index.d.ts +0 -95
  153. package/dist/layout/facebook.svg +0 -45
  154. package/dist/layout/linkedin.svg +0 -50
  155. package/dist/layout/twitter.svg +0 -53
  156. package/dist/link/readme.md +0 -51
  157. package/dist/main.d.ts +0 -8
  158. package/dist/new-select/NewSelect.js +0 -836
  159. package/dist/new-select/index.d.ts +0 -53
  160. package/dist/paginator/Paginator.js +0 -289
  161. package/dist/paginator/images/next.svg +0 -3
  162. package/dist/paginator/images/nextPage.svg +0 -3
  163. package/dist/paginator/images/previous.svg +0 -3
  164. package/dist/paginator/images/previousPage.svg +0 -3
  165. package/dist/paginator/readme.md +0 -50
  166. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  167. package/dist/progress-bar/readme.md +0 -63
  168. package/dist/radio/Radio.stories.js +0 -166
  169. package/dist/radio/readme.md +0 -70
  170. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  171. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  172. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  173. package/dist/slider/readme.md +0 -64
  174. package/dist/spinner/Spinner.stories.js +0 -183
  175. package/dist/spinner/readme.md +0 -65
  176. package/dist/switch/Switch.stories.js +0 -134
  177. package/dist/switch/readme.md +0 -133
  178. package/dist/tabs/Tabs.stories.js +0 -130
  179. package/dist/tabs/readme.md +0 -78
  180. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  181. package/dist/tabs-for-sections/readme.md +0 -78
  182. package/dist/toggle/Toggle.stories.js +0 -297
  183. package/dist/toggle/readme.md +0 -80
  184. package/dist/upload/Upload.stories.js +0 -72
  185. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  186. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  187. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  188. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  189. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  190. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  191. package/dist/upload/file-upload/FileToUpload.js +0 -184
  192. package/dist/upload/file-upload/audio-icon.svg +0 -4
  193. package/dist/upload/file-upload/close.svg +0 -4
  194. package/dist/upload/file-upload/file-icon.svg +0 -4
  195. package/dist/upload/file-upload/video-icon.svg +0 -4
  196. package/dist/upload/readme.md +0 -37
  197. package/dist/upload/transaction/Transaction.js +0 -175
  198. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  199. package/dist/upload/transaction/audio-icon.svg +0 -4
  200. package/dist/upload/transaction/error-icon.svg +0 -4
  201. package/dist/upload/transaction/file-icon-err.svg +0 -4
  202. package/dist/upload/transaction/file-icon.svg +0 -4
  203. package/dist/upload/transaction/image-icon-err.svg +0 -4
  204. package/dist/upload/transaction/image-icon.svg +0 -4
  205. package/dist/upload/transaction/success-icon.svg +0 -4
  206. package/dist/upload/transaction/video-icon-err.svg +0 -4
  207. package/dist/upload/transaction/video-icon.svg +0 -4
  208. package/dist/upload/transactions/Transactions.js +0 -138
  209. package/dist/wizard/invalid_icon.svg +0 -5
  210. package/dist/wizard/valid_icon.svg +0 -5
  211. package/dist/wizard/validation-wrong.svg +0 -6
  212. package/test/Accordion.test.js +0 -33
  213. package/test/AccordionGroup.test.js +0 -125
  214. package/test/Alert.test.js +0 -53
  215. package/test/Box.test.js +0 -10
  216. package/test/Button.test.js +0 -18
  217. package/test/Card.test.js +0 -30
  218. package/test/Checkbox.test.js +0 -45
  219. package/test/Chip.test.js +0 -25
  220. package/test/Date.test.js +0 -397
  221. package/test/DateInput.test.js +0 -242
  222. package/test/Dialog.test.js +0 -23
  223. package/test/Dropdown.test.js +0 -145
  224. package/test/FileInput.test.js +0 -201
  225. package/test/Footer.test.js +0 -94
  226. package/test/Header.test.js +0 -34
  227. package/test/Heading.test.js +0 -35
  228. package/test/InputText.test.js +0 -248
  229. package/test/Link.test.js +0 -43
  230. package/test/NumberInput.test.js +0 -259
  231. package/test/Paginator.test.js +0 -177
  232. package/test/PasswordInput.test.js +0 -83
  233. package/test/ProgressBar.test.js +0 -35
  234. package/test/Radio.test.js +0 -37
  235. package/test/ResultsetTable.test.js +0 -329
  236. package/test/Select.test.js +0 -212
  237. package/test/Sidenav.test.js +0 -45
  238. package/test/Slider.test.js +0 -82
  239. package/test/Spinner.test.js +0 -32
  240. package/test/Switch.test.js +0 -45
  241. package/test/Table.test.js +0 -36
  242. package/test/Tabs.test.js +0 -109
  243. package/test/TabsForSections.test.js +0 -34
  244. package/test/Tag.test.js +0 -32
  245. package/test/TextInput.test.js +0 -732
  246. package/test/Textarea.test.js +0 -193
  247. package/test/ToggleGroup.test.js +0 -85
  248. package/test/Upload.test.js +0 -60
  249. package/test/V3TextArea.test.js +0 -51
  250. package/test/Wizard.test.js +0 -130
  251. package/test/mocks/pngMock.js +0 -1
  252. package/test/mocks/svgMock.js +0 -1
@@ -1,53 +0,0 @@
1
- type SVG = string | (HTMLElement & SVGElement);
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type OptionGroup = {
11
- label: string;
12
- options: Option[];
13
- };
14
- type Option = {
15
- icon?: string | SVG;
16
- label: string;
17
- value: string;
18
- };
19
-
20
- type Props = {
21
- label?: string;
22
- name?: string;
23
- value?: string | string[];
24
- options?: Option[] | OptionGroup[];
25
- helperText?: string;
26
- placeholder?: string;
27
- disabled?: boolean;
28
- optional?: boolean;
29
- searchable?: boolean;
30
- multiple?: boolean;
31
- onChange?: (value: string | string[]) => void;
32
- onBlur?: (val: { value: string | string[]; error: string }) => void;
33
- error?: string;
34
- /**
35
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
36
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
37
- */
38
- margin?: Space | Margin;
39
- /**
40
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
41
- */
42
- size?: "small" | "medium" | "large" | "fillParent";
43
- /**
44
- * Value of the tabindex attribute.
45
- */
46
- tabIndex?: number;
47
- /**
48
- * Reference to the component.
49
- */
50
- ref?: React.RefObject<HTMLDivElement>;
51
- };
52
-
53
- export default function DxcNewSelect(props: Props): JSX.Element;
@@ -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,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
- });