@dxc-technology/halstack-react 0.0.0-ccdec40 → 0.0.0-cd617f3

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