@dxc-technology/halstack-react 0.0.0-d20101f → 0.0.0-d4fec82

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 (308) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  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/alert/Alert.js +290 -0
  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 -21
  21. package/box/Box.stories.jsx +132 -0
  22. package/box/index.d.ts +25 -0
  23. package/button/Button.d.ts +4 -0
  24. package/button/Button.js +182 -0
  25. package/button/Button.stories.tsx +293 -0
  26. package/button/types.d.ts +57 -0
  27. package/button/types.js +5 -0
  28. package/card/Card.d.ts +4 -0
  29. package/{dist/card → card}/Card.js +32 -121
  30. package/card/types.d.ts +69 -0
  31. package/card/types.js +5 -0
  32. package/checkbox/Checkbox.d.ts +4 -0
  33. package/{dist/checkbox → checkbox}/Checkbox.js +42 -80
  34. package/checkbox/types.d.ts +60 -0
  35. package/checkbox/types.js +5 -0
  36. package/{dist/chip → chip}/Chip.js +33 -81
  37. package/chip/index.d.ts +22 -0
  38. package/{dist/common → common}/OpenSans.css +0 -0
  39. package/{dist/common → common}/RequiredComponent.js +3 -11
  40. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  50. package/{dist/common → common}/utils.js +0 -0
  51. package/common/variables.js +1569 -0
  52. package/{dist/date → date}/Date.js +23 -31
  53. package/date/index.d.ts +27 -0
  54. package/date-input/DateInput.d.ts +4 -0
  55. package/date-input/DateInput.js +361 -0
  56. package/date-input/types.d.ts +100 -0
  57. package/date-input/types.js +5 -0
  58. package/{dist/dialog → dialog}/Dialog.js +26 -77
  59. package/dialog/index.d.ts +18 -0
  60. package/dropdown/Dropdown.d.ts +4 -0
  61. package/dropdown/Dropdown.js +417 -0
  62. package/dropdown/types.d.ts +89 -0
  63. package/dropdown/types.js +5 -0
  64. package/file-input/FileInput.js +532 -0
  65. package/file-input/FileItem.js +193 -0
  66. package/file-input/index.d.ts +81 -0
  67. package/footer/Footer.d.ts +4 -0
  68. package/footer/Footer.js +266 -0
  69. package/footer/Icons.js +77 -0
  70. package/footer/types.d.ts +61 -0
  71. package/footer/types.js +5 -0
  72. package/header/Header.js +326 -0
  73. package/header/Icons.js +59 -0
  74. package/header/index.d.ts +25 -0
  75. package/{dist/heading → heading}/Heading.js +30 -76
  76. package/heading/index.d.ts +17 -0
  77. package/input-text/Icons.js +22 -0
  78. package/{dist/input-text → input-text}/InputText.js +120 -178
  79. package/input-text/index.d.ts +36 -0
  80. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  81. package/layout/Icons.js +55 -0
  82. package/{dist/link → link}/Link.js +29 -83
  83. package/link/index.d.ts +23 -0
  84. package/main.d.ts +44 -0
  85. package/{dist/main.js → main.js} +121 -69
  86. package/number-input/NumberInput.js +128 -0
  87. package/number-input/NumberInput.stories.jsx +115 -0
  88. package/number-input/NumberInputContext.js +16 -0
  89. package/number-input/index.d.ts +113 -0
  90. package/package.json +34 -25
  91. package/paginator/Icons.js +66 -0
  92. package/paginator/Paginator.d.ts +4 -0
  93. package/paginator/Paginator.js +198 -0
  94. package/paginator/types.d.ts +38 -0
  95. package/paginator/types.js +5 -0
  96. package/password-input/PasswordInput.js +199 -0
  97. package/password-input/PasswordInput.stories.jsx +131 -0
  98. package/password-input/index.d.ts +94 -0
  99. package/progress-bar/ProgressBar.d.ts +4 -0
  100. package/progress-bar/ProgressBar.js +170 -0
  101. package/progress-bar/types.d.ts +37 -0
  102. package/progress-bar/types.js +5 -0
  103. package/radio/Radio.d.ts +4 -0
  104. package/{dist/radio → radio}/Radio.js +15 -50
  105. package/radio/types.d.ts +54 -0
  106. package/radio/types.js +5 -0
  107. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  108. package/resultsetTable/index.d.ts +19 -0
  109. package/select/Select.js +865 -0
  110. package/select/index.d.ts +131 -0
  111. package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
  112. package/sidenav/index.d.ts +13 -0
  113. package/slider/Slider.d.ts +4 -0
  114. package/slider/Slider.js +306 -0
  115. package/slider/types.d.ts +83 -0
  116. package/slider/types.js +5 -0
  117. package/spinner/Spinner.js +267 -0
  118. package/spinner/index.d.ts +17 -0
  119. package/switch/Switch.d.ts +4 -0
  120. package/{dist/switch → switch}/Switch.js +26 -69
  121. package/switch/types.d.ts +58 -0
  122. package/switch/types.js +5 -0
  123. package/{dist/table → table}/Table.js +13 -23
  124. package/table/index.d.ts +13 -0
  125. package/tabs/Tabs.d.ts +4 -0
  126. package/tabs/Tabs.js +211 -0
  127. package/tabs/types.d.ts +71 -0
  128. package/tabs/types.js +5 -0
  129. package/{dist/tag → tag}/Tag.js +50 -122
  130. package/tag/index.d.ts +24 -0
  131. package/text-input/TextInput.js +825 -0
  132. package/text-input/index.d.ts +135 -0
  133. package/textarea/Textarea.js +317 -0
  134. package/textarea/Textarea.stories.jsx +135 -0
  135. package/textarea/index.d.ts +117 -0
  136. package/{dist/toggle → toggle}/Toggle.js +15 -49
  137. package/toggle/index.d.ts +21 -0
  138. package/toggle-group/ToggleGroup.js +243 -0
  139. package/toggle-group/index.d.ts +21 -0
  140. package/{dist/upload → upload}/Upload.js +11 -15
  141. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  142. package/upload/buttons-upload/Icons.js +40 -0
  143. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  144. package/upload/dragAndDropArea/Icons.js +39 -0
  145. package/upload/file-upload/FileToUpload.js +115 -0
  146. package/upload/file-upload/Icons.js +66 -0
  147. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  148. package/upload/index.d.ts +15 -0
  149. package/upload/transaction/Icons.js +160 -0
  150. package/upload/transaction/Transaction.js +104 -0
  151. package/upload/transactions/Transactions.js +94 -0
  152. package/{dist/useTheme.js → useTheme.js} +0 -0
  153. package/wizard/Icons.js +65 -0
  154. package/{dist/wizard → wizard}/Wizard.js +40 -180
  155. package/wizard/index.d.ts +18 -0
  156. package/README.md +0 -66
  157. package/babel.config.js +0 -8
  158. package/dist/BackgroundColorContext.js +0 -46
  159. package/dist/ThemeContext.js +0 -216
  160. package/dist/accordion/Accordion.js +0 -346
  161. package/dist/accordion/Accordion.stories.js +0 -207
  162. package/dist/accordion/readme.md +0 -96
  163. package/dist/accordion-group/AccordionGroup.js +0 -188
  164. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  165. package/dist/accordion-group/readme.md +0 -70
  166. package/dist/alert/Alert.js +0 -388
  167. package/dist/alert/Alert.stories.js +0 -158
  168. package/dist/alert/close.svg +0 -4
  169. package/dist/alert/error.svg +0 -4
  170. package/dist/alert/info.svg +0 -4
  171. package/dist/alert/readme.md +0 -43
  172. package/dist/alert/success.svg +0 -4
  173. package/dist/alert/warning.svg +0 -4
  174. package/dist/badge/Badge.js +0 -63
  175. package/dist/button/Button.js +0 -232
  176. package/dist/button/Button.stories.js +0 -224
  177. package/dist/button/readme.md +0 -93
  178. package/dist/checkbox/Checkbox.stories.js +0 -144
  179. package/dist/checkbox/readme.md +0 -116
  180. package/dist/common/variables.js +0 -1158
  181. package/dist/date/Date.stories.js +0 -205
  182. package/dist/date/readme.md +0 -73
  183. package/dist/dialog/Dialog.stories.js +0 -217
  184. package/dist/dialog/readme.md +0 -32
  185. package/dist/dropdown/Dropdown.js +0 -492
  186. package/dist/dropdown/Dropdown.stories.js +0 -249
  187. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  188. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  189. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  190. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  191. package/dist/dropdown/readme.md +0 -69
  192. package/dist/footer/Footer.js +0 -405
  193. package/dist/footer/Footer.stories.js +0 -94
  194. package/dist/footer/dxc_logo_wht.png +0 -0
  195. package/dist/footer/readme.md +0 -41
  196. package/dist/header/Header.js +0 -431
  197. package/dist/header/Header.stories.js +0 -176
  198. package/dist/header/close_icon.svg +0 -1
  199. package/dist/header/dxc_logo_black.png +0 -0
  200. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  201. package/dist/header/dxc_logo_white.png +0 -0
  202. package/dist/header/hamb_menu_black.svg +0 -1
  203. package/dist/header/hamb_menu_white.svg +0 -1
  204. package/dist/header/readme.md +0 -33
  205. package/dist/input-text/InputText.stories.js +0 -209
  206. package/dist/input-text/error.svg +0 -1
  207. package/dist/input-text/readme.md +0 -91
  208. package/dist/layout/facebook.svg +0 -45
  209. package/dist/layout/linkedin.svg +0 -50
  210. package/dist/layout/twitter.svg +0 -53
  211. package/dist/link/readme.md +0 -51
  212. package/dist/paginator/Paginator.js +0 -283
  213. package/dist/paginator/images/next.svg +0 -3
  214. package/dist/paginator/images/nextPage.svg +0 -3
  215. package/dist/paginator/images/previous.svg +0 -3
  216. package/dist/paginator/images/previousPage.svg +0 -3
  217. package/dist/paginator/readme.md +0 -50
  218. package/dist/progress-bar/ProgressBar.js +0 -206
  219. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  220. package/dist/progress-bar/readme.md +0 -63
  221. package/dist/radio/Radio.stories.js +0 -166
  222. package/dist/radio/readme.md +0 -70
  223. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  224. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  225. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  226. package/dist/select/Select.js +0 -563
  227. package/dist/select/Select.stories.js +0 -235
  228. package/dist/select/readme.md +0 -72
  229. package/dist/slider/Slider.js +0 -315
  230. package/dist/slider/Slider.stories.js +0 -241
  231. package/dist/slider/readme.md +0 -64
  232. package/dist/spinner/Spinner.js +0 -214
  233. package/dist/spinner/Spinner.stories.js +0 -183
  234. package/dist/spinner/readme.md +0 -65
  235. package/dist/switch/Switch.stories.js +0 -134
  236. package/dist/switch/readme.md +0 -133
  237. package/dist/tabs/Tabs.js +0 -343
  238. package/dist/tabs/Tabs.stories.js +0 -130
  239. package/dist/tabs/readme.md +0 -78
  240. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  241. package/dist/tabs-for-sections/readme.md +0 -78
  242. package/dist/toggle/Toggle.stories.js +0 -297
  243. package/dist/toggle/readme.md +0 -80
  244. package/dist/toggle-group/ToggleGroup.js +0 -241
  245. package/dist/toggle-group/readme.md +0 -82
  246. package/dist/upload/Upload.stories.js +0 -72
  247. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  248. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  249. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  250. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  251. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  252. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  253. package/dist/upload/file-upload/FileToUpload.js +0 -184
  254. package/dist/upload/file-upload/audio-icon.svg +0 -4
  255. package/dist/upload/file-upload/close.svg +0 -4
  256. package/dist/upload/file-upload/file-icon.svg +0 -4
  257. package/dist/upload/file-upload/video-icon.svg +0 -4
  258. package/dist/upload/readme.md +0 -37
  259. package/dist/upload/transaction/Transaction.js +0 -171
  260. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  261. package/dist/upload/transaction/audio-icon.svg +0 -4
  262. package/dist/upload/transaction/error-icon.svg +0 -4
  263. package/dist/upload/transaction/file-icon-err.svg +0 -4
  264. package/dist/upload/transaction/file-icon.svg +0 -4
  265. package/dist/upload/transaction/image-icon-err.svg +0 -4
  266. package/dist/upload/transaction/image-icon.svg +0 -4
  267. package/dist/upload/transaction/success-icon.svg +0 -4
  268. package/dist/upload/transaction/video-icon-err.svg +0 -4
  269. package/dist/upload/transaction/video-icon.svg +0 -4
  270. package/dist/upload/transactions/Transactions.js +0 -138
  271. package/dist/wizard/invalid_icon.svg +0 -5
  272. package/dist/wizard/valid_icon.svg +0 -5
  273. package/dist/wizard/validation-wrong.svg +0 -6
  274. package/test/Accordion.test.js +0 -33
  275. package/test/AccordionGroup.test.js +0 -125
  276. package/test/Alert.test.js +0 -53
  277. package/test/Box.test.js +0 -10
  278. package/test/Button.test.js +0 -18
  279. package/test/Card.test.js +0 -30
  280. package/test/Checkbox.test.js +0 -45
  281. package/test/Chip.test.js +0 -25
  282. package/test/Date.test.js +0 -393
  283. package/test/Dialog.test.js +0 -23
  284. package/test/Dropdown.test.js +0 -130
  285. package/test/Footer.test.js +0 -99
  286. package/test/Header.test.js +0 -39
  287. package/test/Heading.test.js +0 -35
  288. package/test/InputText.test.js +0 -240
  289. package/test/Link.test.js +0 -43
  290. package/test/Paginator.test.js +0 -177
  291. package/test/ProgressBar.test.js +0 -35
  292. package/test/Radio.test.js +0 -37
  293. package/test/ResultsetTable.test.js +0 -330
  294. package/test/Select.test.js +0 -192
  295. package/test/Sidenav.test.js +0 -45
  296. package/test/Slider.test.js +0 -82
  297. package/test/Spinner.test.js +0 -27
  298. package/test/Switch.test.js +0 -45
  299. package/test/Table.test.js +0 -36
  300. package/test/Tabs.test.js +0 -109
  301. package/test/TabsForSections.test.js +0 -34
  302. package/test/Tag.test.js +0 -32
  303. package/test/TextArea.test.js +0 -52
  304. package/test/ToggleGroup.test.js +0 -81
  305. package/test/Upload.test.js +0 -60
  306. package/test/Wizard.test.js +0 -130
  307. package/test/mocks/pngMock.js +0 -1
  308. package/test/mocks/svgMock.js +0 -1
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -23,42 +23,32 @@ var _utils = require("../common/utils.js");
23
23
 
24
24
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
25
 
26
- function _templateObject2() {
27
- var data = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th:first-child {\n border-top-left-radius: ", ";\n }\n & th:last-child {\n border-top-right-radius: ", ";\n }\n"]);
28
-
29
- _templateObject2 = function _templateObject2() {
30
- return data;
31
- };
32
-
33
- return data;
34
- }
26
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
35
27
 
36
- function _templateObject() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n overflow: hidden auto;\n &::-webkit-scrollbar {\n width: 8px;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 6px;\n }\n &::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 6px;\n }\n"]);
28
+ var _templateObject, _templateObject2;
38
29
 
39
- _templateObject = function _templateObject() {
40
- return data;
41
- };
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
42
31
 
43
- return data;
44
- }
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
45
33
 
46
34
  var DxcTable = function DxcTable(_ref) {
47
35
  var children = _ref.children,
48
36
  margin = _ref.margin;
49
37
  var colorsTheme = (0, _useTheme["default"])();
50
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
38
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
51
39
  theme: colorsTheme.table
52
- }, _react["default"].createElement(DxcTableContainer, {
40
+ }, /*#__PURE__*/_react["default"].createElement(DxcTableContainer, {
53
41
  margin: margin
54
- }, _react["default"].createElement(DxcTableContent, null, children)));
42
+ }, /*#__PURE__*/_react["default"].createElement(DxcTableContent, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
43
+ color: colorsTheme.table.dataBackgroundColor
44
+ }, children))));
55
45
  };
56
46
 
57
47
  var calculateWidth = function calculateWidth(margin) {
58
48
  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
59
49
  };
60
50
 
61
- var DxcTableContainer = _styledComponents["default"].div(_templateObject(), function (props) {
51
+ var DxcTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n overflow: hidden auto;\n &::-webkit-scrollbar {\n width: 8px;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 6px;\n }\n &::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 6px;\n }\n"])), function (props) {
62
52
  return calculateWidth(props.margin);
63
53
  }, function (props) {
64
54
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -76,7 +66,7 @@ var DxcTableContainer = _styledComponents["default"].div(_templateObject(), func
76
66
  return props.theme.scrollBarTrackColor;
77
67
  });
78
68
 
79
- var DxcTableContent = _styledComponents["default"].table(_templateObject2(), function (props) {
69
+ var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th:first-child {\n border-top-left-radius: ", ";\n }\n & th:last-child {\n border-top-right-radius: ", ";\n }\n"])), function (props) {
80
70
  return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
81
71
  }, function (props) {
82
72
  return props.theme.dataBackgroundColor;
@@ -0,0 +1,13 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ margin?: Space | Margin;
11
+ };
12
+
13
+ export default function DxcTable(props: Props): JSX.Element;
package/tabs/Tabs.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import TabsPropsType from "./types";
3
+ declare const DxcTabs: ({ activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, }: TabsPropsType) => JSX.Element;
4
+ export default DxcTabs;
package/tabs/Tabs.js ADDED
@@ -0,0 +1,211 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _react = _interopRequireDefault(require("react"));
19
+
20
+ var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
21
+
22
+ var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
23
+
24
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
+
26
+ var _variables = require("../common/variables.js");
27
+
28
+ var _Badge = _interopRequireDefault(require("../badge/Badge"));
29
+
30
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
31
+
32
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
33
+
34
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
+
36
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
+
38
+ var DxcTabs = function DxcTabs(_ref) {
39
+ var activeTabIndex = _ref.activeTabIndex,
40
+ tabs = _ref.tabs,
41
+ onTabClick = _ref.onTabClick,
42
+ onTabHover = _ref.onTabHover,
43
+ margin = _ref.margin,
44
+ _ref$iconPosition = _ref.iconPosition,
45
+ iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
46
+ _ref$tabIndex = _ref.tabIndex,
47
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
48
+
49
+ var _React$useState = _react["default"].useState(0),
50
+ _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
51
+ innerActiveTabIndex = _React$useState2[0],
52
+ setInnerActiveTabIndex = _React$useState2[1];
53
+
54
+ var colorsTheme = (0, _useTheme["default"])();
55
+ var hasLabelAndIcon = tabs && tabs.filter(function (tab) {
56
+ return tab.label && tab.icon;
57
+ }).length > 0;
58
+
59
+ var handleChange = function handleChange(event, newValue) {
60
+ if (activeTabIndex == null) {
61
+ setInnerActiveTabIndex(newValue);
62
+ }
63
+
64
+ onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(newValue);
65
+ };
66
+
67
+ var getLabelForTab = function getLabelForTab(tab) {
68
+ return /*#__PURE__*/_react["default"].createElement(ParentLabelSpan, null, /*#__PURE__*/_react["default"].createElement(MainLabelContainer, {
69
+ hasBadge: tab.notificationNumber
70
+ }, /*#__PURE__*/_react["default"].createElement(TabLabelContainer, {
71
+ hasLabelAndIcon: hasLabelAndIcon,
72
+ iconPosition: iconPosition
73
+ }, tab.icon ? /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
74
+ hasLabelAndIcon: hasLabelAndIcon,
75
+ iconPosition: iconPosition
76
+ }, (0, _typeof2["default"])(tab.icon) === "object" ? tab.icon : /*#__PURE__*/_react["default"].createElement(tab.icon)) : tab.iconSrc && /*#__PURE__*/_react["default"].createElement(TabIcon, {
77
+ src: tab.iconSrc
78
+ }), /*#__PURE__*/_react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
79
+ hasLabelAndIcon: hasLabelAndIcon,
80
+ iconPosition: iconPosition
81
+ }, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
82
+ notificationText: tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
83
+ })));
84
+ };
85
+
86
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
87
+ theme: colorsTheme.tabs
88
+ }, /*#__PURE__*/_react["default"].createElement(DxCTabs, {
89
+ margin: margin,
90
+ hasLabelAndIcon: hasLabelAndIcon,
91
+ iconPosition: iconPosition
92
+ }, /*#__PURE__*/_react["default"].createElement(Underline, null), /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
93
+ value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
94
+ onChange: handleChange,
95
+ variant: "scrollable",
96
+ scrollButtons: "auto"
97
+ }, tabs.map(function (tab, i) {
98
+ return /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
99
+ tabIndex: (activeTabIndex === i || innerActiveTabIndex === i) && !tab.isDisabled ? tabIndex : -1,
100
+ key: "tab".concat(i).concat(tab.label),
101
+ label: getLabelForTab(tab),
102
+ disabled: tab.isDisabled,
103
+ disableRipple: true,
104
+ onMouseEnter: function onMouseEnter() {
105
+ onTabHover === null || onTabHover === void 0 ? void 0 : onTabHover(i);
106
+ },
107
+ onMouseLeave: function onMouseLeave() {
108
+ onTabHover === null || onTabHover === void 0 ? void 0 : onTabHover(null);
109
+ }
110
+ });
111
+ }))));
112
+ };
113
+
114
+ var ParentLabelSpan = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n"])));
115
+
116
+ var TabLabelContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n"])), function (props) {
117
+ return props.hasLabelAndIcon && props.iconPosition === "top" && "column" || "row";
118
+ });
119
+
120
+ var LabelTextContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
121
+
122
+ var BadgeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n right: 0;\n top: ", ";\n width: 23px;\n height: 17px;\n"])), function (props) {
123
+ return props.hasLabelAndIcon && props.iconPosition === "top" && "0" || "5px";
124
+ });
125
+
126
+ var MainLabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (props) {
127
+ return props.hasBadge && "35px" || "unset";
128
+ }, function (props) {
129
+ return props.hasBadge && "35px" || "unset";
130
+ });
131
+
132
+ var Underline = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n left: 0px;\n bottom: 0;\n width: 100%;\n height: ", ";\n position: absolute;\n background-color: ", ";\n"])), function (props) {
133
+ return props.theme.dividerThickness;
134
+ }, function (props) {
135
+ return props.theme.dividerColor;
136
+ });
137
+
138
+ var DxCTabs = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n .MuiTabs-root {\n background: white;\n min-height: ", ";\n\n .MuiTabs-scroller {\n .MuiTabs-flexContainer + span {\n z-index: 4;\n }\n }\n .MuiTab-root {\n text-transform: ", " !important;\n }\n .MuiButtonBase-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n\n padding: ", ";\n height: ", ";\n min-width: 90px;\n max-width: 360px;\n min-height: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n font-weight: ", ";\n }\n &:not(.Mui-selected) {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-selected {\n background-color: ", ";\n color: ", ";\n svg {\n color: ", ";\n }\n }\n &.Mui-disabled {\n cursor: not-allowed !important;\n pointer-events: all;\n color: ", ";\n font-style: ", ";\n svg {\n color: ", ";\n }\n }\n &:focus {\n outline: ", " auto 1px;\n }\n }\n .MuiTabs-indicator {\n background-color: ", ";\n height: ", ";\n }\n .MuiTabs-scrollButtons {\n min-width: ", ";\n width: ", ";\n padding: 0;\n }\n @media (max-width: 599.95px) {\n .MuiTabs-scrollButtonsDesktop {\n display: flex;\n }\n }\n }\n"])), function (props) {
139
+ return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
140
+ }, function (props) {
141
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
142
+ }, function (props) {
143
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
144
+ }, function (props) {
145
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
146
+ }, function (props) {
147
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
148
+ }, function (props) {
149
+ return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "48px" || "72px";
150
+ }, function (props) {
151
+ return props.theme.fontTextTransform;
152
+ }, function (props) {
153
+ return props.theme.fontFamily;
154
+ }, function (props) {
155
+ return props.theme.fontSize;
156
+ }, function (props) {
157
+ return props.theme.fontStyle;
158
+ }, function (props) {
159
+ return props.theme.fontWeight;
160
+ }, function (props) {
161
+ return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "12px 16px" || "8px 16px";
162
+ }, function (props) {
163
+ return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "48px" || "72px";
164
+ }, function (props) {
165
+ return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "48px" || "72px";
166
+ }, function (props) {
167
+ return "".concat(props.theme.hoverBackgroundColor, " !important");
168
+ }, function (props) {
169
+ return "".concat(props.theme.pressedBackgroundColor, " !important");
170
+ }, function (props) {
171
+ return "".concat(props.theme.pressedFontWeight, " !important");
172
+ }, function (props) {
173
+ return props.theme.unselectedBackgroundColor;
174
+ }, function (props) {
175
+ return props.theme.unselectedFontColor;
176
+ }, function (props) {
177
+ return props.theme.unselectedIconColor;
178
+ }, function (props) {
179
+ return props.theme.selectedBackgroundColor;
180
+ }, function (props) {
181
+ return props.theme.selectedFontColor;
182
+ }, function (props) {
183
+ return props.theme.selectedIconColor;
184
+ }, function (props) {
185
+ return props.theme.disabledFontColor;
186
+ }, function (props) {
187
+ return props.theme.disabledFontStyle;
188
+ }, function (props) {
189
+ return props.theme.disabledIconColor;
190
+ }, function (props) {
191
+ return props.theme.focusOutline;
192
+ }, function (props) {
193
+ return props.theme.selectedUnderlineColor;
194
+ }, function (props) {
195
+ return props.theme.selectedUnderlineThickness;
196
+ }, function (props) {
197
+ return props.theme.scrollButtonsWidth;
198
+ }, function (props) {
199
+ return props.theme.scrollButtonsWidth;
200
+ });
201
+
202
+ var TabIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n"])));
203
+
204
+ var TabIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n margin-bottom: ", ";\n margin-right: ", ";\n overflow: hidden;\n display: flex;\n align-items: center;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
205
+ return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";
206
+ }, function (props) {
207
+ return props.hasLabelAndIcon && props.iconPosition === "left" && "12px" || "";
208
+ });
209
+
210
+ var _default = DxcTabs;
211
+ exports["default"] = _default;
@@ -0,0 +1,71 @@
1
+ /// <reference types="react" />
2
+ declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ declare type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+ declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
10
+ declare type Tab = {
11
+ /**
12
+ * Tab label.
13
+ */
14
+ label?: string;
15
+ /**
16
+ * Element used as the icon that will be displayed in the tab.
17
+ */
18
+ icon?: SVG;
19
+ /**
20
+ * @deprecated URL of the icon to be displayed in the tab.
21
+ */
22
+ iconSrc?: string;
23
+ /**
24
+ * Whether the tab is disabled or not.
25
+ */
26
+ isDisabled?: boolean;
27
+ /**
28
+ * If the value is 'true', an empty badge will appear.
29
+ * If it is 'false', no badge will appear.
30
+ * If a number is put it will be shown as the label of the notification
31
+ * in the tab, taking into account that if that number is greater than 99,
32
+ * it will appear as '+99' in the badge.
33
+ */
34
+ notificationNumber?: boolean | number;
35
+ };
36
+ declare type Props = {
37
+ /**
38
+ * An array of objects representing the tabs.
39
+ */
40
+ tabs: [Tab, ...Tab[]];
41
+ /**
42
+ * Whether the icon should appear above or to the left of the label.
43
+ */
44
+ iconPosition?: "top" | "left";
45
+ /**
46
+ * The index of the active tab. If undefined, the component will be
47
+ * uncontrolled and the active tab will be managed internally by the component.
48
+ */
49
+ activeTabIndex?: number;
50
+ /**
51
+ * This function will be called when the user clicks on a tab. The index of the
52
+ * clicked tab will be passed as a parameter.
53
+ */
54
+ onTabClick?: (tabIndex: number) => void;
55
+ /**
56
+ * This function will be called when the user hovers a tab.The index of the
57
+ * hovered tab will be passed as a parameter.
58
+ */
59
+ onTabHover?: (tabIndex: number) => void;
60
+ /**
61
+ * Size of the margin to be applied to the component. You can pass an object
62
+ * with 'top', 'bottom', 'left' and 'right' properties in order to specify
63
+ * different margin sizes.
64
+ */
65
+ margin?: Space | Margin;
66
+ /**
67
+ * Value of the tabindex for each tab.
68
+ */
69
+ tabIndex?: number;
70
+ };
71
+ export default Props;
package/tabs/types.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });