@dxc-technology/halstack-react 0.0.0-9439a0d → 0.0.0-9559292

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 (208) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6439 -0
  3. package/dist/index.d.ts +6439 -0
  4. package/dist/index.js +12618 -0
  5. package/dist/index.mjs +12530 -0
  6. package/package.json +72 -67
  7. package/BackgroundColorContext.js +0 -50
  8. package/ThemeContext.js +0 -246
  9. package/V3Select/V3Select.js +0 -455
  10. package/V3Select/index.d.ts +0 -27
  11. package/V3Textarea/V3Textarea.js +0 -260
  12. package/V3Textarea/index.d.ts +0 -27
  13. package/accordion/Accordion.d.ts +0 -4
  14. package/accordion/Accordion.js +0 -258
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -170
  19. package/accordion-group/types.d.ts +0 -72
  20. package/accordion-group/types.js +0 -5
  21. package/alert/Alert.d.ts +0 -4
  22. package/alert/Alert.js +0 -290
  23. package/alert/Alert.stories.tsx +0 -170
  24. package/alert/types.d.ts +0 -49
  25. package/alert/types.js +0 -5
  26. package/badge/Badge.js +0 -59
  27. package/box/Box.d.ts +0 -4
  28. package/box/Box.js +0 -126
  29. package/box/Box.stories.tsx +0 -132
  30. package/box/types.d.ts +0 -43
  31. package/box/types.js +0 -5
  32. package/button/Button.d.ts +0 -4
  33. package/button/Button.js +0 -177
  34. package/button/Button.stories.tsx +0 -276
  35. package/button/types.d.ts +0 -57
  36. package/button/types.js +0 -5
  37. package/card/Card.d.ts +0 -4
  38. package/card/Card.js +0 -164
  39. package/card/Card.stories.tsx +0 -201
  40. package/card/ice-cream.jpg +0 -0
  41. package/card/types.d.ts +0 -69
  42. package/card/types.js +0 -5
  43. package/checkbox/Checkbox.d.ts +0 -4
  44. package/checkbox/Checkbox.js +0 -253
  45. package/checkbox/Checkbox.stories.tsx +0 -192
  46. package/checkbox/types.d.ts +0 -60
  47. package/checkbox/types.js +0 -5
  48. package/chip/Chip.js +0 -221
  49. package/chip/Chip.stories.tsx +0 -121
  50. package/chip/index.d.ts +0 -22
  51. package/common/OpenSans.css +0 -81
  52. package/common/RequiredComponent.js +0 -32
  53. package/common/fonts/OpenSans-Bold.ttf +0 -0
  54. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  55. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  56. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  57. package/common/fonts/OpenSans-Italic.ttf +0 -0
  58. package/common/fonts/OpenSans-Light.ttf +0 -0
  59. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  60. package/common/fonts/OpenSans-Regular.ttf +0 -0
  61. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  62. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  63. package/common/utils.js +0 -22
  64. package/common/variables.js +0 -1577
  65. package/date/Date.js +0 -373
  66. package/date/index.d.ts +0 -27
  67. package/date-input/DateInput.d.ts +0 -4
  68. package/date-input/DateInput.js +0 -361
  69. package/date-input/DateInput.stories.tsx +0 -138
  70. package/date-input/types.d.ts +0 -100
  71. package/date-input/types.js +0 -5
  72. package/dialog/Dialog.d.ts +0 -4
  73. package/dialog/Dialog.js +0 -165
  74. package/dialog/Dialog.stories.tsx +0 -212
  75. package/dialog/types.d.ts +0 -43
  76. package/dialog/types.js +0 -5
  77. package/dropdown/Dropdown.d.ts +0 -4
  78. package/dropdown/Dropdown.js +0 -417
  79. package/dropdown/types.d.ts +0 -89
  80. package/dropdown/types.js +0 -5
  81. package/file-input/FileInput.d.ts +0 -4
  82. package/file-input/FileInput.js +0 -511
  83. package/file-input/FileItem.d.ts +0 -14
  84. package/file-input/FileItem.js +0 -182
  85. package/file-input/types.d.ts +0 -87
  86. package/file-input/types.js +0 -5
  87. package/footer/Footer.d.ts +0 -4
  88. package/footer/Footer.js +0 -266
  89. package/footer/Footer.stories.jsx +0 -151
  90. package/footer/Icons.js +0 -77
  91. package/footer/types.d.ts +0 -61
  92. package/footer/types.js +0 -5
  93. package/header/Header.d.ts +0 -7
  94. package/header/Header.js +0 -324
  95. package/header/Header.stories.tsx +0 -162
  96. package/header/Icons.js +0 -34
  97. package/header/types.d.ts +0 -45
  98. package/header/types.js +0 -5
  99. package/heading/Heading.d.ts +0 -4
  100. package/heading/Heading.js +0 -159
  101. package/heading/types.d.ts +0 -33
  102. package/heading/types.js +0 -5
  103. package/input-text/Icons.js +0 -22
  104. package/input-text/InputText.js +0 -611
  105. package/input-text/index.d.ts +0 -36
  106. package/layout/ApplicationLayout.js +0 -235
  107. package/layout/Icons.js +0 -55
  108. package/link/Link.d.ts +0 -3
  109. package/link/Link.js +0 -161
  110. package/link/Link.stories.tsx +0 -146
  111. package/link/types.d.ts +0 -74
  112. package/link/types.js +0 -5
  113. package/main.d.ts +0 -44
  114. package/main.js +0 -363
  115. package/number-input/NumberInput.d.ts +0 -4
  116. package/number-input/NumberInput.js +0 -86
  117. package/number-input/NumberInput.stories.tsx +0 -115
  118. package/number-input/NumberInputContext.js +0 -16
  119. package/number-input/types.d.ts +0 -117
  120. package/number-input/types.js +0 -5
  121. package/paginator/Icons.js +0 -66
  122. package/paginator/Paginator.d.ts +0 -4
  123. package/paginator/Paginator.js +0 -198
  124. package/paginator/Paginator.stories.tsx +0 -63
  125. package/paginator/types.d.ts +0 -38
  126. package/paginator/types.js +0 -5
  127. package/password-input/PasswordInput.d.ts +0 -4
  128. package/password-input/PasswordInput.js +0 -162
  129. package/password-input/PasswordInput.stories.tsx +0 -131
  130. package/password-input/types.d.ts +0 -100
  131. package/password-input/types.js +0 -5
  132. package/progress-bar/ProgressBar.d.ts +0 -4
  133. package/progress-bar/ProgressBar.js +0 -170
  134. package/progress-bar/ProgressBar.stories.jsx +0 -58
  135. package/progress-bar/types.d.ts +0 -37
  136. package/progress-bar/types.js +0 -5
  137. package/radio/Radio.d.ts +0 -4
  138. package/radio/Radio.js +0 -174
  139. package/radio/Radio.stories.tsx +0 -192
  140. package/radio/types.d.ts +0 -54
  141. package/radio/types.js +0 -5
  142. package/resultsetTable/ResultsetTable.js +0 -274
  143. package/resultsetTable/index.d.ts +0 -19
  144. package/select/Select.js +0 -865
  145. package/select/Select.stories.tsx +0 -572
  146. package/select/index.d.ts +0 -131
  147. package/sidenav/Sidenav.d.ts +0 -9
  148. package/sidenav/Sidenav.js +0 -136
  149. package/sidenav/types.d.ts +0 -50
  150. package/sidenav/types.js +0 -5
  151. package/slider/Slider.d.ts +0 -4
  152. package/slider/Slider.js +0 -317
  153. package/slider/Slider.stories.tsx +0 -177
  154. package/slider/types.d.ts +0 -78
  155. package/slider/types.js +0 -5
  156. package/spinner/Spinner.d.ts +0 -4
  157. package/spinner/Spinner.js +0 -250
  158. package/spinner/Spinner.stories.jsx +0 -102
  159. package/spinner/types.d.ts +0 -32
  160. package/spinner/types.js +0 -5
  161. package/switch/Switch.d.ts +0 -4
  162. package/switch/Switch.js +0 -179
  163. package/switch/Switch.stories.tsx +0 -160
  164. package/switch/types.d.ts +0 -58
  165. package/switch/types.js +0 -5
  166. package/table/Table.d.ts +0 -4
  167. package/table/Table.js +0 -118
  168. package/table/Table.stories.jsx +0 -276
  169. package/table/types.d.ts +0 -21
  170. package/table/types.js +0 -5
  171. package/tabs/Tabs.d.ts +0 -4
  172. package/tabs/Tabs.js +0 -211
  173. package/tabs/types.d.ts +0 -71
  174. package/tabs/types.js +0 -5
  175. package/tag/Tag.d.ts +0 -4
  176. package/tag/Tag.js +0 -193
  177. package/tag/Tag.stories.tsx +0 -145
  178. package/tag/types.d.ts +0 -60
  179. package/tag/types.js +0 -5
  180. package/text-input/TextInput.js +0 -825
  181. package/text-input/index.d.ts +0 -135
  182. package/textarea/Textarea.js +0 -317
  183. package/textarea/Textarea.stories.jsx +0 -135
  184. package/textarea/index.d.ts +0 -117
  185. package/toggle/Toggle.js +0 -186
  186. package/toggle/index.d.ts +0 -21
  187. package/toggle-group/ToggleGroup.js +0 -243
  188. package/toggle-group/ToggleGroup.stories.tsx +0 -178
  189. package/toggle-group/index.d.ts +0 -21
  190. package/upload/Upload.js +0 -201
  191. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  192. package/upload/buttons-upload/Icons.js +0 -40
  193. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  194. package/upload/dragAndDropArea/Icons.js +0 -39
  195. package/upload/file-upload/FileToUpload.js +0 -115
  196. package/upload/file-upload/Icons.js +0 -66
  197. package/upload/files-upload/FilesToUpload.js +0 -109
  198. package/upload/index.d.ts +0 -15
  199. package/upload/transaction/Icons.js +0 -160
  200. package/upload/transaction/Transaction.js +0 -104
  201. package/upload/transactions/Transactions.js +0 -94
  202. package/useTheme.js +0 -22
  203. package/wizard/Icons.js +0 -65
  204. package/wizard/Wizard.d.ts +0 -4
  205. package/wizard/Wizard.js +0 -231
  206. package/wizard/Wizard.stories.jsx +0 -224
  207. package/wizard/types.d.ts +0 -64
  208. package/wizard/types.js +0 -5
@@ -1,276 +0,0 @@
1
- import React from "react";
2
- import DxcTable from "./Table";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- export default {
7
- title: "Table",
8
- component: DxcTable,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <ExampleContainer>
14
- <Title title="Default" theme="light" level={4} />
15
- <DxcTable>
16
- <tr>
17
- <th>header 1</th>
18
- <th>header 2</th>
19
- <th>header 3</th>
20
- </tr>
21
- <tr>
22
- <td>cell 1</td>
23
- <td>cell 2</td>
24
- <td>cell 3</td>
25
- </tr>
26
- <tr>
27
- <td>cell 4</td>
28
- <td>cell 5</td>
29
- <td>cell 6</td>
30
- </tr>
31
- <tr>
32
- <td>cell 7</td>
33
- <td>cell 8</td>
34
- <td>Cell 9</td>
35
- </tr>
36
- </DxcTable>
37
- </ExampleContainer>
38
- <ExampleContainer>
39
- <Title title="With scrollbar" theme="light" level={4} />
40
- <div
41
- style={{ height: 200 + "px", display: "flex", flexDirection: "row", width: 100 + "%", marginBottom: 50 + "px" }}
42
- >
43
- <DxcTable>
44
- <tr>
45
- <th>
46
- header<br></br>subheader
47
- </th>
48
- <th>
49
- header<br></br>subheader
50
- </th>
51
- <th>
52
- header<br></br>subheader
53
- </th>
54
- </tr>
55
- <tr>
56
- <td>
57
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
58
- dolore magna aliqua.
59
- </td>
60
- <td>
61
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
62
- consequat.
63
- </td>
64
- <td>
65
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
66
- </td>
67
- </tr>
68
- <tr>
69
- <td>cell data</td>
70
- <td>cell data</td>
71
- <td>cell data</td>
72
- </tr>
73
- <tr>
74
- <td>cell data</td>
75
- <td>cell data</td>
76
- <td>cell data</td>
77
- </tr>
78
- <tr>
79
- <td>cell data</td>
80
- <td>cell data</td>
81
- <td>cell data</td>
82
- </tr>
83
- <tr>
84
- <td>cell data</td>
85
- <td>cell data</td>
86
- <td>cell data</td>
87
- </tr>
88
- <tr>
89
- <td>cell data</td>
90
- <td>cell data</td>
91
- <td>cell data</td>
92
- </tr>
93
- <tr>
94
- <td>cell data</td>
95
- <td>cell data</td>
96
- <td>cell data</td>
97
- </tr>
98
- <tr>
99
- <td>cell data</td>
100
- <td>cell data</td>
101
- <td>cell data</td>
102
- </tr>
103
- <tr>
104
- <td>cell data</td>
105
- <td>cell data</td>
106
- <td>cell data</td>
107
- </tr>
108
- </DxcTable>
109
- </div>
110
- </ExampleContainer>
111
- <Title title="Margins" theme="light" level={2} />
112
- <ExampleContainer>
113
- <Title title="Xxsmall margin" theme="light" level={4} />
114
- <DxcTable margin="xxsmall">
115
- <tr>
116
- <th>header 1</th>
117
- <th>header 2</th>
118
- <th>header 3</th>
119
- </tr>
120
- <tr>
121
- <td>cell 1</td>
122
- <td>cell 2</td>
123
- <td>cell 3</td>
124
- </tr>
125
- <tr>
126
- <td>cell 4</td>
127
- <td>cell 5</td>
128
- <td>cell 6</td>
129
- </tr>
130
- <tr>
131
- <td>cell 7</td>
132
- <td>cell 8</td>
133
- <td>Cell 9</td>
134
- </tr>
135
- </DxcTable>
136
- <Title title="Xsmall margin" theme="light" level={4} />
137
- <DxcTable margin="xsmall">
138
- <tr>
139
- <th>header 1</th>
140
- <th>header 2</th>
141
- <th>header 3</th>
142
- </tr>
143
- <tr>
144
- <td>cell 1</td>
145
- <td>cell 2</td>
146
- <td>cell 3</td>
147
- </tr>
148
- <tr>
149
- <td>cell 4</td>
150
- <td>cell 5</td>
151
- <td>cell 6</td>
152
- </tr>
153
- <tr>
154
- <td>cell 7</td>
155
- <td>cell 8</td>
156
- <td>Cell 9</td>
157
- </tr>
158
- </DxcTable>
159
- <Title title="Small margin" theme="light" level={4} />
160
- <DxcTable margin="small">
161
- <tr>
162
- <th>header 1</th>
163
- <th>header 2</th>
164
- <th>header 3</th>
165
- </tr>
166
- <tr>
167
- <td>cell 1</td>
168
- <td>cell 2</td>
169
- <td>cell 3</td>
170
- </tr>
171
- <tr>
172
- <td>cell 4</td>
173
- <td>cell 5</td>
174
- <td>cell 6</td>
175
- </tr>
176
- <tr>
177
- <td>cell 7</td>
178
- <td>cell 8</td>
179
- <td>Cell 9</td>
180
- </tr>
181
- </DxcTable>
182
- <Title title="Medium margin" theme="light" level={4} />
183
- <DxcTable margin="medium">
184
- <tr>
185
- <th>header 1</th>
186
- <th>header 2</th>
187
- <th>header 3</th>
188
- </tr>
189
- <tr>
190
- <td>cell 1</td>
191
- <td>cell 2</td>
192
- <td>cell 3</td>
193
- </tr>
194
- <tr>
195
- <td>cell 4</td>
196
- <td>cell 5</td>
197
- <td>cell 6</td>
198
- </tr>
199
- <tr>
200
- <td>cell 7</td>
201
- <td>cell 8</td>
202
- <td>Cell 9</td>
203
- </tr>
204
- </DxcTable>
205
- <Title title="Large margin" theme="light" level={4} />
206
- <DxcTable margin="large">
207
- <tr>
208
- <th>header 1</th>
209
- <th>header 2</th>
210
- <th>header 3</th>
211
- </tr>
212
- <tr>
213
- <td>cell 1</td>
214
- <td>cell 2</td>
215
- <td>cell 3</td>
216
- </tr>
217
- <tr>
218
- <td>cell 4</td>
219
- <td>cell 5</td>
220
- <td>cell 6</td>
221
- </tr>
222
- <tr>
223
- <td>cell 7</td>
224
- <td>cell 8</td>
225
- <td>Cell 9</td>
226
- </tr>
227
- </DxcTable>
228
- <Title title="Xlarge margin" theme="light" level={4} />
229
- <DxcTable margin="xlarge">
230
- <tr>
231
- <th>header 1</th>
232
- <th>header 2</th>
233
- <th>header 3</th>
234
- </tr>
235
- <tr>
236
- <td>cell 1</td>
237
- <td>cell 2</td>
238
- <td>cell 3</td>
239
- </tr>
240
- <tr>
241
- <td>cell 4</td>
242
- <td>cell 5</td>
243
- <td>cell 6</td>
244
- </tr>
245
- <tr>
246
- <td>cell 7</td>
247
- <td>cell 8</td>
248
- <td>Cell 9</td>
249
- </tr>
250
- </DxcTable>
251
- <Title title="Xxlarge margin" theme="light" level={4} />
252
- <DxcTable margin="xxlarge">
253
- <tr>
254
- <th>header 1</th>
255
- <th>header 2</th>
256
- <th>header 3</th>
257
- </tr>
258
- <tr>
259
- <td>cell 1</td>
260
- <td>cell 2</td>
261
- <td>cell 3</td>
262
- </tr>
263
- <tr>
264
- <td>cell 4</td>
265
- <td>cell 5</td>
266
- <td>cell 6</td>
267
- </tr>
268
- <tr>
269
- <td>cell 7</td>
270
- <td>cell 8</td>
271
- <td>Cell 9</td>
272
- </tr>
273
- </DxcTable>
274
- </ExampleContainer>
275
- </>
276
- );
package/table/types.d.ts DELETED
@@ -1,21 +0,0 @@
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 Props = {
10
- /**
11
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
12
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
13
- */
14
- margin?: Space | Margin;
15
- /**
16
- * The center section of the table. Can be used to render custom
17
- * content in this area.
18
- */
19
- children: React.ReactNode;
20
- };
21
- export default Props;
package/table/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/tabs/Tabs.d.ts DELETED
@@ -1,4 +0,0 @@
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 DELETED
@@ -1,211 +0,0 @@
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;
package/tabs/types.d.ts DELETED
@@ -1,71 +0,0 @@
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 DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/tag/Tag.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import TagPropsType from "./types";
3
- declare const DxcTag: ({ icon, iconSrc, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: TagPropsType) => JSX.Element;
4
- export default DxcTag;