@dxc-technology/halstack-react 0.0.0-9005464 → 0.0.0-902d48d

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 (197) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6670 -0
  3. package/dist/index.d.ts +6670 -0
  4. package/dist/index.js +14276 -0
  5. package/dist/index.mjs +14219 -0
  6. package/package.json +69 -68
  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 -129
  29. package/box/Box.stories.tsx +0 -132
  30. package/box/types.d.ts +0 -47
  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 -165
  39. package/card/types.d.ts +0 -69
  40. package/card/types.js +0 -5
  41. package/checkbox/Checkbox.d.ts +0 -4
  42. package/checkbox/Checkbox.js +0 -253
  43. package/checkbox/Checkbox.stories.tsx +0 -192
  44. package/checkbox/types.d.ts +0 -60
  45. package/checkbox/types.js +0 -5
  46. package/chip/Chip.js +0 -221
  47. package/chip/index.d.ts +0 -22
  48. package/common/OpenSans.css +0 -81
  49. package/common/RequiredComponent.js +0 -32
  50. package/common/fonts/OpenSans-Bold.ttf +0 -0
  51. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  52. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  53. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  54. package/common/fonts/OpenSans-Italic.ttf +0 -0
  55. package/common/fonts/OpenSans-Light.ttf +0 -0
  56. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  57. package/common/fonts/OpenSans-Regular.ttf +0 -0
  58. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  59. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  60. package/common/utils.js +0 -22
  61. package/common/variables.js +0 -1577
  62. package/date/Date.js +0 -373
  63. package/date/index.d.ts +0 -27
  64. package/date-input/DateInput.d.ts +0 -4
  65. package/date-input/DateInput.js +0 -361
  66. package/date-input/DateInput.stories.tsx +0 -138
  67. package/date-input/types.d.ts +0 -100
  68. package/date-input/types.js +0 -5
  69. package/dialog/Dialog.d.ts +0 -4
  70. package/dialog/Dialog.js +0 -165
  71. package/dialog/types.d.ts +0 -43
  72. package/dialog/types.js +0 -5
  73. package/dropdown/Dropdown.d.ts +0 -4
  74. package/dropdown/Dropdown.js +0 -417
  75. package/dropdown/types.d.ts +0 -89
  76. package/dropdown/types.js +0 -5
  77. package/file-input/FileInput.js +0 -532
  78. package/file-input/FileItem.js +0 -193
  79. package/file-input/index.d.ts +0 -81
  80. package/footer/Footer.d.ts +0 -4
  81. package/footer/Footer.js +0 -266
  82. package/footer/Footer.stories.jsx +0 -151
  83. package/footer/Icons.js +0 -77
  84. package/footer/types.d.ts +0 -61
  85. package/footer/types.js +0 -5
  86. package/header/Header.d.ts +0 -7
  87. package/header/Header.js +0 -324
  88. package/header/Icons.js +0 -34
  89. package/header/types.d.ts +0 -45
  90. package/header/types.js +0 -5
  91. package/heading/Heading.js +0 -176
  92. package/heading/index.d.ts +0 -17
  93. package/input-text/Icons.js +0 -22
  94. package/input-text/InputText.js +0 -611
  95. package/input-text/index.d.ts +0 -36
  96. package/layout/ApplicationLayout.js +0 -235
  97. package/layout/Icons.js +0 -55
  98. package/link/Link.d.ts +0 -3
  99. package/link/Link.js +0 -161
  100. package/link/Link.stories.tsx +0 -70
  101. package/link/types.d.ts +0 -74
  102. package/link/types.js +0 -5
  103. package/main.d.ts +0 -44
  104. package/main.js +0 -363
  105. package/number-input/NumberInput.d.ts +0 -4
  106. package/number-input/NumberInput.js +0 -86
  107. package/number-input/NumberInput.stories.tsx +0 -115
  108. package/number-input/NumberInputContext.js +0 -16
  109. package/number-input/types.d.ts +0 -117
  110. package/number-input/types.js +0 -5
  111. package/paginator/Icons.js +0 -66
  112. package/paginator/Paginator.d.ts +0 -4
  113. package/paginator/Paginator.js +0 -198
  114. package/paginator/Paginator.stories.tsx +0 -63
  115. package/paginator/types.d.ts +0 -38
  116. package/paginator/types.js +0 -5
  117. package/password-input/PasswordInput.d.ts +0 -4
  118. package/password-input/PasswordInput.js +0 -162
  119. package/password-input/PasswordInput.stories.tsx +0 -131
  120. package/password-input/types.d.ts +0 -100
  121. package/password-input/types.js +0 -5
  122. package/progress-bar/ProgressBar.d.ts +0 -4
  123. package/progress-bar/ProgressBar.js +0 -170
  124. package/progress-bar/ProgressBar.stories.jsx +0 -58
  125. package/progress-bar/types.d.ts +0 -37
  126. package/progress-bar/types.js +0 -5
  127. package/radio/Radio.d.ts +0 -4
  128. package/radio/Radio.js +0 -174
  129. package/radio/Radio.stories.tsx +0 -192
  130. package/radio/types.d.ts +0 -54
  131. package/radio/types.js +0 -5
  132. package/resultsetTable/ResultsetTable.js +0 -274
  133. package/resultsetTable/index.d.ts +0 -19
  134. package/select/Select.js +0 -865
  135. package/select/Select.stories.tsx +0 -572
  136. package/select/index.d.ts +0 -131
  137. package/sidenav/Sidenav.d.ts +0 -9
  138. package/sidenav/Sidenav.js +0 -136
  139. package/sidenav/types.d.ts +0 -50
  140. package/sidenav/types.js +0 -5
  141. package/slider/Slider.d.ts +0 -4
  142. package/slider/Slider.js +0 -317
  143. package/slider/Slider.stories.tsx +0 -172
  144. package/slider/types.d.ts +0 -78
  145. package/slider/types.js +0 -5
  146. package/spinner/Spinner.d.ts +0 -4
  147. package/spinner/Spinner.js +0 -250
  148. package/spinner/Spinner.stories.jsx +0 -102
  149. package/spinner/types.d.ts +0 -32
  150. package/spinner/types.js +0 -5
  151. package/switch/Switch.d.ts +0 -4
  152. package/switch/Switch.js +0 -179
  153. package/switch/Switch.stories.tsx +0 -160
  154. package/switch/types.d.ts +0 -58
  155. package/switch/types.js +0 -5
  156. package/table/Table.d.ts +0 -4
  157. package/table/Table.js +0 -118
  158. package/table/Table.stories.jsx +0 -276
  159. package/table/types.d.ts +0 -21
  160. package/table/types.js +0 -5
  161. package/tabs/Tabs.d.ts +0 -4
  162. package/tabs/Tabs.js +0 -211
  163. package/tabs/types.d.ts +0 -71
  164. package/tabs/types.js +0 -5
  165. package/tag/Tag.d.ts +0 -4
  166. package/tag/Tag.js +0 -193
  167. package/tag/Tag.stories.tsx +0 -145
  168. package/tag/types.d.ts +0 -60
  169. package/tag/types.js +0 -5
  170. package/text-input/TextInput.js +0 -825
  171. package/text-input/index.d.ts +0 -135
  172. package/textarea/Textarea.js +0 -317
  173. package/textarea/Textarea.stories.jsx +0 -135
  174. package/textarea/index.d.ts +0 -117
  175. package/toggle/Toggle.js +0 -186
  176. package/toggle/index.d.ts +0 -21
  177. package/toggle-group/ToggleGroup.js +0 -243
  178. package/toggle-group/ToggleGroup.stories.tsx +0 -178
  179. package/toggle-group/index.d.ts +0 -21
  180. package/upload/Upload.js +0 -201
  181. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  182. package/upload/buttons-upload/Icons.js +0 -40
  183. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  184. package/upload/dragAndDropArea/Icons.js +0 -39
  185. package/upload/file-upload/FileToUpload.js +0 -115
  186. package/upload/file-upload/Icons.js +0 -66
  187. package/upload/files-upload/FilesToUpload.js +0 -109
  188. package/upload/index.d.ts +0 -15
  189. package/upload/transaction/Icons.js +0 -160
  190. package/upload/transaction/Transaction.js +0 -104
  191. package/upload/transactions/Transactions.js +0 -94
  192. package/useTheme.js +0 -22
  193. package/wizard/Icons.js +0 -65
  194. package/wizard/Wizard.d.ts +0 -4
  195. package/wizard/Wizard.js +0 -231
  196. package/wizard/types.d.ts +0 -64
  197. 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;