@dxc-technology/halstack-react 0.0.0-d1d02c1 → 0.0.0-d20b360

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 (333) 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/V3Textarea/V3Textarea.js +260 -0
  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 +38 -34
  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/card/Card.js +165 -0
  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/checkbox/Checkbox.js +253 -0
  34. package/checkbox/Checkbox.stories.tsx +192 -0
  35. package/checkbox/types.d.ts +60 -0
  36. package/checkbox/types.js +5 -0
  37. package/chip/Chip.js +221 -0
  38. package/chip/index.d.ts +22 -0
  39. package/{dist/common → common}/OpenSans.css +0 -0
  40. package/{dist/common → common}/RequiredComponent.js +5 -19
  41. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  51. package/common/utils.js +22 -0
  52. package/common/variables.js +1569 -0
  53. package/{dist/date → date}/Date.js +87 -70
  54. package/date/index.d.ts +27 -0
  55. package/date-input/DateInput.d.ts +4 -0
  56. package/date-input/DateInput.js +361 -0
  57. package/date-input/types.d.ts +100 -0
  58. package/date-input/types.js +5 -0
  59. package/dialog/Dialog.d.ts +4 -0
  60. package/dialog/Dialog.js +165 -0
  61. package/dialog/types.d.ts +43 -0
  62. package/dialog/types.js +5 -0
  63. package/dropdown/Dropdown.d.ts +4 -0
  64. package/dropdown/Dropdown.js +417 -0
  65. package/dropdown/types.d.ts +89 -0
  66. package/dropdown/types.js +5 -0
  67. package/file-input/FileInput.js +532 -0
  68. package/file-input/FileItem.js +193 -0
  69. package/file-input/index.d.ts +81 -0
  70. package/footer/Footer.d.ts +4 -0
  71. package/footer/Footer.js +266 -0
  72. package/footer/Footer.stories.jsx +151 -0
  73. package/footer/Icons.js +77 -0
  74. package/footer/types.d.ts +61 -0
  75. package/footer/types.js +5 -0
  76. package/header/Header.d.ts +7 -0
  77. package/header/Header.js +324 -0
  78. package/header/Icons.js +34 -0
  79. package/header/types.d.ts +45 -0
  80. package/header/types.js +5 -0
  81. package/heading/Heading.js +176 -0
  82. package/heading/index.d.ts +17 -0
  83. package/input-text/Icons.js +22 -0
  84. package/input-text/InputText.js +611 -0
  85. package/input-text/index.d.ts +36 -0
  86. package/{dist/layout → layout}/ApplicationLayout.js +43 -142
  87. package/layout/Icons.js +55 -0
  88. package/link/Link.js +183 -0
  89. package/link/index.d.ts +23 -0
  90. package/main.d.ts +44 -0
  91. package/{dist/main.js → main.js} +137 -53
  92. package/number-input/NumberInput.js +128 -0
  93. package/number-input/NumberInput.stories.jsx +115 -0
  94. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  95. package/number-input/index.d.ts +113 -0
  96. package/package.json +37 -23
  97. package/paginator/Icons.js +66 -0
  98. package/paginator/Paginator.d.ts +4 -0
  99. package/paginator/Paginator.js +198 -0
  100. package/paginator/Paginator.stories.tsx +63 -0
  101. package/paginator/types.d.ts +38 -0
  102. package/paginator/types.js +5 -0
  103. package/password-input/PasswordInput.js +199 -0
  104. package/password-input/PasswordInput.stories.jsx +131 -0
  105. package/password-input/index.d.ts +94 -0
  106. package/progress-bar/ProgressBar.d.ts +4 -0
  107. package/progress-bar/ProgressBar.js +170 -0
  108. package/progress-bar/types.d.ts +37 -0
  109. package/progress-bar/types.js +5 -0
  110. package/radio/Radio.d.ts +4 -0
  111. package/radio/Radio.js +174 -0
  112. package/radio/Radio.stories.tsx +192 -0
  113. package/radio/types.d.ts +54 -0
  114. package/radio/types.js +5 -0
  115. package/resultsetTable/ResultsetTable.js +274 -0
  116. package/resultsetTable/index.d.ts +19 -0
  117. package/select/Select.js +865 -0
  118. package/select/index.d.ts +131 -0
  119. package/sidenav/Sidenav.js +145 -0
  120. package/sidenav/index.d.ts +13 -0
  121. package/slider/Slider.d.ts +4 -0
  122. package/slider/Slider.js +306 -0
  123. package/slider/types.d.ts +83 -0
  124. package/slider/types.js +5 -0
  125. package/spinner/Spinner.js +267 -0
  126. package/spinner/Spinner.stories.jsx +102 -0
  127. package/spinner/index.d.ts +17 -0
  128. package/switch/Switch.d.ts +4 -0
  129. package/switch/Switch.js +179 -0
  130. package/switch/types.d.ts +58 -0
  131. package/switch/types.js +5 -0
  132. package/table/Table.js +118 -0
  133. package/table/Table.stories.jsx +276 -0
  134. package/table/index.d.ts +13 -0
  135. package/tabs/Tabs.d.ts +4 -0
  136. package/tabs/Tabs.js +211 -0
  137. package/tabs/types.d.ts +71 -0
  138. package/tabs/types.js +5 -0
  139. package/tag/Tag.js +208 -0
  140. package/tag/index.d.ts +24 -0
  141. package/text-input/TextInput.js +825 -0
  142. package/text-input/index.d.ts +135 -0
  143. package/textarea/Textarea.js +317 -0
  144. package/textarea/Textarea.stories.jsx +135 -0
  145. package/textarea/index.d.ts +117 -0
  146. package/{dist/toggle → toggle}/Toggle.js +30 -67
  147. package/toggle/index.d.ts +21 -0
  148. package/toggle-group/ToggleGroup.js +243 -0
  149. package/toggle-group/index.d.ts +21 -0
  150. package/{dist/upload → upload}/Upload.js +23 -22
  151. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  152. package/upload/buttons-upload/Icons.js +40 -0
  153. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  154. package/upload/dragAndDropArea/Icons.js +39 -0
  155. package/upload/file-upload/FileToUpload.js +115 -0
  156. package/upload/file-upload/Icons.js +66 -0
  157. package/upload/files-upload/FilesToUpload.js +109 -0
  158. package/upload/index.d.ts +15 -0
  159. package/upload/transaction/Icons.js +160 -0
  160. package/upload/transaction/Transaction.js +104 -0
  161. package/upload/transactions/Transactions.js +94 -0
  162. package/useTheme.js +22 -0
  163. package/wizard/Icons.js +65 -0
  164. package/wizard/Wizard.js +271 -0
  165. package/wizard/index.d.ts +18 -0
  166. package/README.md +0 -66
  167. package/babel.config.js +0 -4
  168. package/dist/accordion/Accordion.js +0 -248
  169. package/dist/accordion/Accordion.stories.js +0 -207
  170. package/dist/accordion/readme.md +0 -96
  171. package/dist/alert/Alert.js +0 -304
  172. package/dist/alert/Alert.stories.js +0 -158
  173. package/dist/alert/close.svg +0 -4
  174. package/dist/alert/error.svg +0 -4
  175. package/dist/alert/info.svg +0 -4
  176. package/dist/alert/readme.md +0 -43
  177. package/dist/alert/success.svg +0 -4
  178. package/dist/alert/warning.svg +0 -4
  179. package/dist/button/Button.js +0 -181
  180. package/dist/button/Button.stories.js +0 -224
  181. package/dist/button/readme.md +0 -93
  182. package/dist/card/Card.js +0 -217
  183. package/dist/checkbox/Checkbox.js +0 -240
  184. package/dist/checkbox/Checkbox.stories.js +0 -144
  185. package/dist/checkbox/readme.md +0 -116
  186. package/dist/chip/Chip.js +0 -173
  187. package/dist/common/services/example-service.js +0 -10
  188. package/dist/common/services/example-service.test.js +0 -12
  189. package/dist/common/utils.js +0 -42
  190. package/dist/common/variables.js +0 -434
  191. package/dist/date/Date.stories.js +0 -205
  192. package/dist/date/calendar.svg +0 -1
  193. package/dist/date/calendar_dark.svg +0 -1
  194. package/dist/date/readme.md +0 -73
  195. package/dist/dialog/Dialog.js +0 -197
  196. package/dist/dialog/Dialog.stories.js +0 -217
  197. package/dist/dialog/readme.md +0 -32
  198. package/dist/dropdown/Dropdown.js +0 -416
  199. package/dist/dropdown/Dropdown.stories.js +0 -249
  200. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  201. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  202. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  203. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  204. package/dist/dropdown/readme.md +0 -69
  205. package/dist/footer/Footer.js +0 -346
  206. package/dist/footer/Footer.stories.js +0 -94
  207. package/dist/footer/dxc_logo_wht.png +0 -0
  208. package/dist/footer/readme.md +0 -41
  209. package/dist/header/Header.js +0 -373
  210. package/dist/header/Header.stories.js +0 -176
  211. package/dist/header/close_icon.svg +0 -1
  212. package/dist/header/dxc_logo_black.png +0 -0
  213. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  214. package/dist/header/dxc_logo_white.png +0 -0
  215. package/dist/header/hamb_menu_black.svg +0 -1
  216. package/dist/header/hamb_menu_white.svg +0 -1
  217. package/dist/header/readme.md +0 -33
  218. package/dist/heading/Heading.js +0 -153
  219. package/dist/input-text/InputText.js +0 -519
  220. package/dist/input-text/InputText.stories.js +0 -209
  221. package/dist/input-text/error.svg +0 -1
  222. package/dist/input-text/readme.md +0 -91
  223. package/dist/layout/facebook.svg +0 -45
  224. package/dist/layout/linkedin.svg +0 -50
  225. package/dist/layout/twitter.svg +0 -53
  226. package/dist/link/Link.js +0 -171
  227. package/dist/link/readme.md +0 -51
  228. package/dist/paginator/Paginator.js +0 -196
  229. package/dist/paginator/images/next.svg +0 -3
  230. package/dist/paginator/images/nextPage.svg +0 -3
  231. package/dist/paginator/images/previous.svg +0 -3
  232. package/dist/paginator/images/previousPage.svg +0 -3
  233. package/dist/paginator/readme.md +0 -50
  234. package/dist/progress-bar/ProgressBar.js +0 -185
  235. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  236. package/dist/progress-bar/readme.md +0 -63
  237. package/dist/radio/Radio.js +0 -195
  238. package/dist/radio/Radio.stories.js +0 -166
  239. package/dist/radio/readme.md +0 -70
  240. package/dist/resultsetTable/ResultsetTable.js +0 -333
  241. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  242. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  243. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  244. package/dist/select/Select.js +0 -453
  245. package/dist/select/Select.stories.js +0 -235
  246. package/dist/select/readme.md +0 -72
  247. package/dist/sidenav/Sidenav.js +0 -69
  248. package/dist/slider/Slider.js +0 -266
  249. package/dist/slider/Slider.stories.js +0 -241
  250. package/dist/slider/readme.md +0 -64
  251. package/dist/spinner/Spinner.js +0 -193
  252. package/dist/spinner/Spinner.stories.js +0 -183
  253. package/dist/spinner/readme.md +0 -65
  254. package/dist/switch/Switch.js +0 -199
  255. package/dist/switch/Switch.stories.js +0 -134
  256. package/dist/switch/readme.md +0 -133
  257. package/dist/table/Table.js +0 -105
  258. package/dist/tabs/Tabs.js +0 -172
  259. package/dist/tabs/Tabs.stories.js +0 -130
  260. package/dist/tabs/readme.md +0 -78
  261. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  262. package/dist/tabs-for-sections/readme.md +0 -78
  263. package/dist/tag/Tag.js +0 -234
  264. package/dist/textarea/Textarea.js +0 -227
  265. package/dist/toggle/Toggle.stories.js +0 -297
  266. package/dist/toggle/readme.md +0 -80
  267. package/dist/toggle-group/ToggleGroup.js +0 -214
  268. package/dist/toggle-group/readme.md +0 -82
  269. package/dist/upload/Upload.stories.js +0 -72
  270. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  271. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  272. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  273. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  274. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  275. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  276. package/dist/upload/file-upload/FileToUpload.js +0 -158
  277. package/dist/upload/file-upload/audio-icon.svg +0 -4
  278. package/dist/upload/file-upload/close.svg +0 -4
  279. package/dist/upload/file-upload/file-icon.svg +0 -4
  280. package/dist/upload/file-upload/video-icon.svg +0 -4
  281. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  282. package/dist/upload/readme.md +0 -37
  283. package/dist/upload/transaction/Transaction.js +0 -155
  284. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  285. package/dist/upload/transaction/audio-icon.svg +0 -4
  286. package/dist/upload/transaction/error-icon.svg +0 -4
  287. package/dist/upload/transaction/file-icon-err.svg +0 -4
  288. package/dist/upload/transaction/file-icon.svg +0 -4
  289. package/dist/upload/transaction/image-icon-err.svg +0 -4
  290. package/dist/upload/transaction/image-icon.svg +0 -4
  291. package/dist/upload/transaction/success-icon.svg +0 -4
  292. package/dist/upload/transaction/video-icon-err.svg +0 -4
  293. package/dist/upload/transaction/video-icon.svg +0 -4
  294. package/dist/upload/transactions/Transactions.js +0 -120
  295. package/dist/wizard/Wizard.js +0 -327
  296. package/dist/wizard/invalid_icon.svg +0 -6
  297. package/dist/wizard/valid_icon.svg +0 -6
  298. package/dist/wizard/validation-wrong.svg +0 -6
  299. package/test/Accordion.test.js +0 -33
  300. package/test/Alert.test.js +0 -53
  301. package/test/Box.test.js +0 -10
  302. package/test/Button.test.js +0 -18
  303. package/test/Card.test.js +0 -30
  304. package/test/Checkbox.test.js +0 -45
  305. package/test/Chip.test.js +0 -25
  306. package/test/Date.test.js +0 -393
  307. package/test/Dialog.test.js +0 -23
  308. package/test/Dropdown.test.js +0 -130
  309. package/test/Footer.test.js +0 -99
  310. package/test/Header.test.js +0 -39
  311. package/test/Heading.test.js +0 -35
  312. package/test/InputText.test.js +0 -236
  313. package/test/Link.test.js +0 -33
  314. package/test/Paginator.test.js +0 -165
  315. package/test/ProgressBar.test.js +0 -35
  316. package/test/Radio.test.js +0 -37
  317. package/test/ResultsetTable.test.js +0 -282
  318. package/test/Select.test.js +0 -191
  319. package/test/Sidenav.test.js +0 -19
  320. package/test/Slider.test.js +0 -82
  321. package/test/Spinner.test.js +0 -27
  322. package/test/Switch.test.js +0 -45
  323. package/test/Table.test.js +0 -36
  324. package/test/Tabs.test.js +0 -88
  325. package/test/TabsForSections.test.js +0 -34
  326. package/test/Tag.test.js +0 -32
  327. package/test/TextArea.test.js +0 -52
  328. package/test/Toggle.test.js +0 -43
  329. package/test/ToggleGroup.test.js +0 -81
  330. package/test/Upload.test.js +0 -60
  331. package/test/Wizard.test.js +0 -130
  332. package/test/mocks/pngMock.js +0 -1
  333. package/test/mocks/svgMock.js +0 -1
package/dist/tabs/Tabs.js DELETED
@@ -1,172 +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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
23
-
24
- var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
25
-
26
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
27
-
28
- var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
- require("../common/OpenSans.css");
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _utils = require("../common/utils.js");
35
-
36
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
37
-
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 22px;\n max-width: 22px;\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n .MuiTabs-root {\n background: white;\n .MuiTabs-scroller {\n .MuiTabs-flexContainer + span {\n z-index: 4;\n }\n }\n .MuiButtonBase-root {\n padding: 12px;\n min-height: 48px;\n height: auto;\n font-family: \"Open Sans\", sans-serif;\n font-size: 14px;\n /* height: 64px cuando vengan con icono y texto */\n min-width: 180px;\n color: ", ";\n margin: 1px 0;\n &:not(.Mui-selected) {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-selected {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-disabled {\n cursor: not-allowed !important;\n pointer-events: all;\n opacity: ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n }\n\n .MuiTabs-indicator {\n background-color: ", ";\n }\n }\n"]);
50
-
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n left: 0px;\n bottom: 0;\n width: 100%;\n height: 2px;\n position: absolute;\n background-color: ", ";\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- var DxcTabs = function DxcTabs(_ref) {
69
- var activeTabIndex = _ref.activeTabIndex,
70
- _ref$tabs = _ref.tabs,
71
- tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
72
- onTabClick = _ref.onTabClick,
73
- margin = _ref.margin;
74
-
75
- var _React$useState = _react["default"].useState(0),
76
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
77
- innerActiveTabIndex = _React$useState2[0],
78
- setInnerActiveTabIndex = _React$useState2[1];
79
-
80
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
81
- var colorsTheme = (0, _react.useMemo)(function () {
82
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
83
- }, [customTheme]);
84
-
85
- var handleChange = function handleChange(event, newValue) {
86
- if (activeTabIndex == null) {
87
- setInnerActiveTabIndex(newValue);
88
- }
89
-
90
- if (typeof onTabClick === "function") {
91
- onTabClick(newValue);
92
- }
93
- };
94
-
95
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
96
- theme: colorsTheme.tabs
97
- }, _react["default"].createElement(DxCTabs, {
98
- margin: margin
99
- }, _react["default"].createElement(Underline, null), _react["default"].createElement(_Tabs["default"], {
100
- value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
101
- onChange: handleChange,
102
- variant: "scrollable",
103
- scrollButtons: "off"
104
- }, tabs.map(function (tab, i) {
105
- return _react["default"].createElement(_Tab["default"], {
106
- key: "tab".concat(i).concat(tab.label),
107
- label: tab.label,
108
- icon: tab.iconSrc && _react["default"].createElement(TabIcon, {
109
- src: tab.iconSrc
110
- }),
111
- disabled: tab.isDisabled,
112
- disableRipple: true
113
- });
114
- }))));
115
- };
116
-
117
- var Underline = _styledComponents["default"].div(_templateObject(), function (props) {
118
- return props.theme.underlinedColor;
119
- });
120
-
121
- var DxCTabs = _styledComponents["default"].div(_templateObject2(), function (props) {
122
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
123
- }, function (props) {
124
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
125
- }, function (props) {
126
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
127
- }, function (props) {
128
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
129
- }, function (props) {
130
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
131
- }, function (props) {
132
- return props.theme.fontColor;
133
- }, function (props) {
134
- return "".concat(props.theme.selectedBackgroundColor).concat(props.theme.backgroundColor);
135
- }, function (props) {
136
- return "".concat(props.theme.fontColor).concat(props.theme.notSelectedOpacity);
137
- }, function (props) {
138
- return props.theme.selectedBackgroundColor;
139
- }, function (props) {
140
- return props.theme.selectedFontColor;
141
- }, function (props) {
142
- return props.theme.disabled;
143
- }, function (props) {
144
- return props.theme.focusColor;
145
- }, function (props) {
146
- return props.theme.selectedUnderlinedColor;
147
- });
148
-
149
- var TabIcon = _styledComponents["default"].img(_templateObject3());
150
-
151
- DxcTabs.propTypes = {
152
- activeTabIndex: _propTypes["default"].number,
153
- onTabClick: _propTypes["default"].func,
154
- tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
155
- label: _propTypes["default"].string,
156
- iconSrc: _propTypes["default"].string,
157
- isDisabled: _propTypes["default"]["boolean"]
158
- })),
159
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
160
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
161
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
162
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
163
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
164
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
165
- };
166
- DxcTabs.defaultProps = {
167
- activeTabIndex: null,
168
- tabs: [],
169
- onTabClick: function onTabClick() {}
170
- };
171
- var _default = DxcTabs;
172
- exports["default"] = _default;
@@ -1,130 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Tabs = _interopRequireDefault(require("./Tabs"));
18
-
19
- var _Tab = _interopRequireDefault(require("./tab/Tab"));
20
-
21
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
22
-
23
- var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
24
-
25
- var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
-
29
- onChange.toString = function () {
30
- return "onChangeHandler";
31
- };
32
-
33
- (0, _react2.storiesOf)("Form Components|Tabs", module).add("Types", function () {
34
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
35
- activeTabIndex: 0,
36
- activeTabIndexChange: onChange,
37
- mode: "underlined"
38
- }, _react["default"].createElement(_Tab["default"], {
39
- label: "Tab ONE",
40
- iconSrc: "",
41
- disabled: false
42
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
43
- label: "Tab TWO",
44
- iconSrc: "",
45
- disabled: false
46
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
47
- label: "Tab THREE",
48
- iconSrc: "",
49
- disabled: false
50
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
51
- activeTabIndex: 0,
52
- activeTabIndexChange: onChange,
53
- mode: "filled"
54
- }, _react["default"].createElement(_Tab["default"], {
55
- label: "Label 1",
56
- iconSrc: _amazon["default"],
57
- disabled: false
58
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
59
- label: "Label 2",
60
- iconSrc: _ebay["default"],
61
- disabled: false
62
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
63
- label: "Label 3",
64
- iconSrc: _apple["default"],
65
- disabled: true
66
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))));
67
- }, {
68
- notes: {
69
- markdown: _readme["default"]
70
- }
71
- });
72
-
73
- var knobProps = function knobProps() {
74
- return {
75
- mode: (0, _addonKnobs.select)("mode", {
76
- filled: "filled",
77
- underlined: "underlined"
78
- }, "filled"),
79
- theme: (0, _addonKnobs.select)("theme", {
80
- light: "light",
81
- dark: "dark"
82
- }, "light"),
83
- activeTabIndex: (0, _addonKnobs.number)("Tab Active", 0)
84
- };
85
- };
86
-
87
- var knobTab1Props = function knobTab1Props() {
88
- return {
89
- label: (0, _addonKnobs.text)("First Tab Label", "Tab 1"),
90
- disabled: (0, _addonKnobs["boolean"])("First Tab Disabled", false)
91
- };
92
- };
93
-
94
- var knobTab2Props = function knobTab2Props() {
95
- return {
96
- label: (0, _addonKnobs.text)("Second Tab Label", "Tab 2"),
97
- disabled: (0, _addonKnobs["boolean"])("Second Tab Disabled", false)
98
- };
99
- };
100
-
101
- var knobTab3Props = function knobTab3Props() {
102
- return {
103
- label: (0, _addonKnobs.text)("Third Tab Label", "Tab 3"),
104
- disabled: (0, _addonKnobs["boolean"])("Third Tab Disabled", false)
105
- };
106
- };
107
-
108
- (0, _react2.storiesOf)("Form Components|Tabs", module).add("Knobs example", function () {
109
- var props = knobProps();
110
- var tab1Props = knobTab1Props();
111
- var tab2Props = knobTab2Props();
112
- var tab3Props = knobTab3Props();
113
- return _react["default"].createElement("div", {
114
- style: {
115
- background: props.theme === "dark" && "black" || "transparent"
116
- }
117
- }, _react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({}, props, {
118
- activeTabIndexChange: onChange
119
- }), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab1Props, {
120
- iconSrc: _amazon["default"]
121
- }), "Content ONE"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab2Props, {
122
- iconSrc: _ebay["default"]
123
- }), "Content TWO"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab3Props, {
124
- iconSrc: _apple["default"]
125
- }), "Content THREE")));
126
- }, {
127
- notes: {
128
- markdown: _readme["default"]
129
- }
130
- });
@@ -1,78 +0,0 @@
1
- # DXC Tabs Component
2
-
3
- ## Tab Group 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>mode: 'filled' | 'underlined'</td>
13
- <td><code>'filled'</code></td>
14
- <td>Uses one of the available component modes.</td>
15
- </tr>
16
- <tr>
17
- <td>theme: 'light' | 'dark'</td>
18
- <td><code>'light'</code></td>
19
- <td>Uses one of the available component themes.</td>
20
- </tr>
21
- <tr>
22
- <td>showDotIndicator: boolean</td>
23
- <td><code>false</code></td>
24
- <td>If true, a dot indicator will be shown in the active tab.</td>
25
- </tr>
26
- <tr>
27
- <td>disableRipple: boolean</td>
28
- <td><code>false</code></td>
29
- <td>If true, the ripple effect will be disabled.</td>
30
- </tr>
31
- <tr>
32
- <td>activeTabIndex: number</td>
33
- <td><code>0</code></td>
34
- <td>The index of the active tab.</td>
35
- </tr>
36
- <tr>
37
- <td>activeTabIndexChange: function</td>
38
- <td></td>
39
- <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
40
- </tr>
41
- <tr>
42
- <td>stepper: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component should be rendered as a Stepper component.</td>
45
- </tr>
46
- <tr>
47
- <td>orientation: 'horizontal' | 'vertical'</td>
48
- <td><code>'horizontal'</code></td>
49
- <td>Only if stepper, this parameter shows the stepper orientation.</td>
50
- </tr>
51
-
52
- </table>
53
-
54
- ## Tab Props
55
-
56
- <table>
57
- <tr style="background-color: grey">
58
- <td>Name</td>
59
- <td>Default</td>
60
- <td>Description</td>
61
- </tr>
62
- <tr>
63
- <td>label: string</td>
64
- <td></td>
65
- <td>Text to be placed within the tab.</td>
66
- </tr>
67
- <tr>
68
- <td>iconSrc: string</td>
69
- <td></td>
70
- <td>The path of an icon to be placed within the tab.</td>
71
- </tr>
72
- <tr>
73
- <td>disabled: boolean</td>
74
- <td><code>false</code></td>
75
- <td>Whether the tab is disabled.</td>
76
- </tr>
77
- </table>
78
-
@@ -1,92 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _reactUseScrollspy = _interopRequireDefault(require("react-use-scrollspy"));
19
-
20
- var _Tabs = _interopRequireDefault(require("../tabs/Tabs"));
21
-
22
- function _templateObject() {
23
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 10;\n ", "\n"]);
24
-
25
- _templateObject = function _templateObject() {
26
- return data;
27
- };
28
-
29
- return data;
30
- }
31
-
32
- var TABS_HEIGHT = 54;
33
-
34
- var DxcTabsForSections = function DxcTabsForSections(_ref) {
35
- var _ref$sections = _ref.sections,
36
- sections = _ref$sections === void 0 ? [] : _ref$sections,
37
- _ref$stickAtPx = _ref.stickAtPx,
38
- stickAtPx = _ref$stickAtPx === void 0 ? 0 : _ref$stickAtPx;
39
- var tabs = sections.map(function (section) {
40
- return {
41
- label: section.tabLabel
42
- };
43
- });
44
- var refs = sections.map(function () {
45
- return _react["default"].createRef();
46
- });
47
- var activeTab = (0, _reactUseScrollspy["default"])({
48
- sectionElementRefs: refs,
49
- offsetPx: -stickAtPx - TABS_HEIGHT
50
- });
51
-
52
- var onTabClick = function onTabClick(tabId) {
53
- var topOfElement = refs[tabId].current.offsetTop - stickAtPx - TABS_HEIGHT + 5;
54
- window.scroll({
55
- top: topOfElement,
56
- behavior: "smooth"
57
- });
58
- };
59
-
60
- return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(StyledTabs, {
61
- stickAtPx: stickAtPx
62
- }, _react["default"].createElement(_Tabs["default"], {
63
- tabs: tabs,
64
- activeTabIndex: activeTab,
65
- onTabClick: onTabClick
66
- })), sections.map(function (section, i) {
67
- return _react["default"].createElement("div", {
68
- key: "section".concat(i),
69
- ref: refs[i]
70
- }, _react["default"].createElement(section.section, null));
71
- }));
72
- };
73
-
74
- DxcTabsForSections.propTypes = {
75
- stickAtPx: _propTypes["default"].number,
76
- sections: _propTypes["default"].arrayOf(_propTypes["default"].shape({
77
- tabLabel: _propTypes["default"].string,
78
- section: _propTypes["default"].func
79
- }))
80
- };
81
- DxcTabsForSections.defaultProps = {
82
- stickAtPx: 0,
83
- sections: []
84
- };
85
-
86
- var StyledTabs = _styledComponents["default"].div(_templateObject(), function (_ref2) {
87
- var stickAtPx = _ref2.stickAtPx;
88
- return stickAtPx && "\n position: sticky;\n top: ".concat(stickAtPx, "px;\n ");
89
- });
90
-
91
- var _default = DxcTabsForSections;
92
- exports["default"] = _default;
@@ -1,78 +0,0 @@
1
- # DXC Tabs Component
2
-
3
- ## Tab Group 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>mode: 'filled' | 'underlined'</td>
13
- <td><code>'filled'</code></td>
14
- <td>Uses one of the available component modes.</td>
15
- </tr>
16
- <tr>
17
- <td>theme: 'light' | 'dark'</td>
18
- <td><code>'light'</code></td>
19
- <td>Uses one of the available component themes.</td>
20
- </tr>
21
- <tr>
22
- <td>showDotIndicator: boolean</td>
23
- <td><code>false</code></td>
24
- <td>If true, a dot indicator will be shown in the active tab.</td>
25
- </tr>
26
- <tr>
27
- <td>disableRipple: boolean</td>
28
- <td><code>false</code></td>
29
- <td>If true, the ripple effect will be disabled.</td>
30
- </tr>
31
- <tr>
32
- <td>activeTabIndex: number</td>
33
- <td><code>0</code></td>
34
- <td>The index of the active tab.</td>
35
- </tr>
36
- <tr>
37
- <td>activeTabIndexChange: function</td>
38
- <td></td>
39
- <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
40
- </tr>
41
- <tr>
42
- <td>stepper: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component should be rendered as a Stepper component.</td>
45
- </tr>
46
- <tr>
47
- <td>orientation: 'horizontal' | 'vertical'</td>
48
- <td><code>'horizontal'</code></td>
49
- <td>Only if stepper, this parameter shows the stepper orientation.</td>
50
- </tr>
51
-
52
- </table>
53
-
54
- ## Tab Props
55
-
56
- <table>
57
- <tr style="background-color: grey">
58
- <td>Name</td>
59
- <td>Default</td>
60
- <td>Description</td>
61
- </tr>
62
- <tr>
63
- <td>label: string</td>
64
- <td></td>
65
- <td>Text to be placed within the tab.</td>
66
- </tr>
67
- <tr>
68
- <td>iconSrc: string</td>
69
- <td></td>
70
- <td>The path of an icon to be placed within the tab.</td>
71
- </tr>
72
- <tr>
73
- <td>disabled: boolean</td>
74
- <td><code>false</code></td>
75
- <td>Whether the tab is disabled.</td>
76
- </tr>
77
- </table>
78
-