@dxc-technology/halstack-react 0.0.0-51a5c42 → 0.0.0-522074c

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