@dxc-technology/halstack-react 0.0.0-e1386cf → 0.0.0-e19ca5f

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 (385) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1240 -6
  4. package/HalstackContext.js +122 -106
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +44 -118
  9. package/accordion/Accordion.stories.tsx +82 -147
  10. package/accordion/Accordion.test.js +19 -34
  11. package/accordion/types.d.ts +6 -18
  12. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  13. package/accordion-group/AccordionGroup.d.ts +2 -2
  14. package/accordion-group/AccordionGroup.js +29 -77
  15. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  16. package/accordion-group/AccordionGroup.test.js +44 -72
  17. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  18. package/accordion-group/AccordionGroupAccordion.js +31 -0
  19. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  20. package/accordion-group/AccordionGroupContext.js +8 -0
  21. package/accordion-group/types.d.ts +7 -19
  22. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  23. package/action-icon/ActionIcon.d.ts +4 -0
  24. package/action-icon/ActionIcon.js +48 -0
  25. package/action-icon/ActionIcon.stories.tsx +41 -0
  26. package/action-icon/ActionIcon.test.js +64 -0
  27. package/action-icon/types.d.ts +26 -0
  28. package/alert/Alert.accessibility.test.js +95 -0
  29. package/alert/Alert.js +36 -126
  30. package/alert/Alert.stories.tsx +28 -0
  31. package/alert/Alert.test.js +29 -46
  32. package/alert/types.d.ts +5 -5
  33. package/badge/Badge.accessibility.test.js +129 -0
  34. package/badge/Badge.d.ts +1 -1
  35. package/badge/Badge.js +142 -42
  36. package/badge/Badge.stories.tsx +210 -0
  37. package/badge/Badge.test.js +30 -0
  38. package/badge/types.d.ts +52 -3
  39. package/bleed/Bleed.js +13 -21
  40. package/bleed/Bleed.stories.tsx +1 -0
  41. package/bleed/types.d.ts +2 -2
  42. package/box/Box.accessibility.test.js +33 -0
  43. package/box/Box.d.ts +1 -1
  44. package/box/Box.js +18 -59
  45. package/box/Box.stories.tsx +38 -51
  46. package/box/Box.test.js +2 -7
  47. package/box/types.d.ts +3 -15
  48. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  49. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  50. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  51. package/breadcrumbs/Breadcrumbs.js +79 -0
  52. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  53. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  54. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  55. package/breadcrumbs/Item.d.ts +4 -0
  56. package/breadcrumbs/Item.js +52 -0
  57. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  58. package/breadcrumbs/dropdownTheme.js +62 -0
  59. package/breadcrumbs/types.d.ts +16 -0
  60. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  61. package/bulleted-list/BulletedList.js +22 -53
  62. package/bulleted-list/BulletedList.stories.tsx +8 -93
  63. package/bulleted-list/types.d.ts +32 -5
  64. package/button/Button.accessibility.test.js +127 -0
  65. package/button/Button.d.ts +1 -1
  66. package/button/Button.js +71 -106
  67. package/button/Button.stories.tsx +143 -101
  68. package/button/Button.test.js +20 -17
  69. package/button/types.d.ts +9 -5
  70. package/card/Card.accessibility.test.js +36 -0
  71. package/card/Card.d.ts +1 -1
  72. package/card/Card.js +49 -89
  73. package/card/Card.stories.tsx +12 -42
  74. package/card/Card.test.js +11 -22
  75. package/card/types.d.ts +6 -12
  76. package/checkbox/Checkbox.accessibility.test.js +87 -0
  77. package/checkbox/Checkbox.js +90 -125
  78. package/checkbox/Checkbox.stories.tsx +68 -54
  79. package/checkbox/Checkbox.test.js +108 -64
  80. package/checkbox/types.d.ts +8 -4
  81. package/chip/Chip.accessibility.test.js +67 -0
  82. package/chip/Chip.js +45 -80
  83. package/chip/Chip.stories.tsx +107 -27
  84. package/chip/Chip.test.js +18 -33
  85. package/chip/types.d.ts +4 -4
  86. package/common/coreTokens.d.ts +237 -0
  87. package/common/coreTokens.js +184 -0
  88. package/common/utils.d.ts +1 -0
  89. package/common/utils.js +6 -12
  90. package/common/variables.d.ts +1392 -0
  91. package/common/variables.js +969 -1213
  92. package/container/Container.d.ts +4 -0
  93. package/container/Container.js +194 -0
  94. package/container/Container.stories.tsx +214 -0
  95. package/container/types.d.ts +74 -0
  96. package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
  97. package/contextual-menu/ContextualMenu.d.ts +5 -0
  98. package/contextual-menu/ContextualMenu.js +88 -0
  99. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  100. package/contextual-menu/ContextualMenu.test.js +205 -0
  101. package/contextual-menu/GroupItem.d.ts +4 -0
  102. package/contextual-menu/GroupItem.js +67 -0
  103. package/contextual-menu/ItemAction.d.ts +4 -0
  104. package/contextual-menu/ItemAction.js +51 -0
  105. package/contextual-menu/MenuItem.d.ts +4 -0
  106. package/contextual-menu/MenuItem.js +29 -0
  107. package/contextual-menu/SingleItem.d.ts +4 -0
  108. package/contextual-menu/SingleItem.js +38 -0
  109. package/contextual-menu/types.d.ts +58 -0
  110. package/contextual-menu/types.js +5 -0
  111. package/date-input/Calendar.d.ts +4 -0
  112. package/date-input/Calendar.js +214 -0
  113. package/date-input/DateInput.accessibility.test.js +228 -0
  114. package/date-input/DateInput.js +149 -299
  115. package/date-input/DateInput.stories.tsx +210 -56
  116. package/date-input/DateInput.test.js +694 -429
  117. package/date-input/DatePicker.d.ts +4 -0
  118. package/date-input/DatePicker.js +121 -0
  119. package/date-input/YearPicker.d.ts +4 -0
  120. package/date-input/YearPicker.js +100 -0
  121. package/date-input/types.d.ts +72 -15
  122. package/dialog/Dialog.accessibility.test.js +69 -0
  123. package/dialog/Dialog.d.ts +1 -1
  124. package/dialog/Dialog.js +51 -120
  125. package/dialog/Dialog.stories.tsx +316 -212
  126. package/dialog/Dialog.test.js +270 -33
  127. package/dialog/types.d.ts +18 -26
  128. package/divider/Divider.accessibility.test.js +33 -0
  129. package/divider/Divider.d.ts +4 -0
  130. package/divider/Divider.js +36 -0
  131. package/divider/Divider.stories.tsx +223 -0
  132. package/divider/Divider.test.js +38 -0
  133. package/divider/types.d.ts +21 -0
  134. package/divider/types.js +5 -0
  135. package/dropdown/Dropdown.accessibility.test.js +180 -0
  136. package/dropdown/Dropdown.js +66 -136
  137. package/dropdown/Dropdown.stories.tsx +209 -94
  138. package/dropdown/Dropdown.test.js +404 -390
  139. package/dropdown/DropdownMenu.js +23 -40
  140. package/dropdown/DropdownMenuItem.js +17 -38
  141. package/dropdown/types.d.ts +20 -24
  142. package/file-input/FileInput.accessibility.test.js +160 -0
  143. package/file-input/FileInput.js +184 -292
  144. package/file-input/FileInput.stories.tsx +86 -3
  145. package/file-input/FileInput.test.js +279 -395
  146. package/file-input/FileItem.js +31 -67
  147. package/file-input/types.d.ts +10 -10
  148. package/flex/Flex.js +27 -39
  149. package/flex/Flex.stories.tsx +35 -26
  150. package/flex/types.d.ts +74 -9
  151. package/footer/Footer.accessibility.test.js +125 -0
  152. package/footer/Footer.d.ts +1 -1
  153. package/footer/Footer.js +73 -118
  154. package/footer/Footer.stories.tsx +94 -23
  155. package/footer/Footer.test.js +33 -57
  156. package/footer/Icons.d.ts +3 -2
  157. package/footer/Icons.js +53 -22
  158. package/footer/types.d.ts +26 -28
  159. package/grid/Grid.d.ts +7 -0
  160. package/grid/Grid.js +76 -0
  161. package/grid/Grid.stories.tsx +219 -0
  162. package/grid/types.d.ts +115 -0
  163. package/grid/types.js +5 -0
  164. package/header/Header.accessibility.test.js +93 -0
  165. package/header/Header.d.ts +4 -3
  166. package/header/Header.js +55 -150
  167. package/header/Header.stories.tsx +130 -35
  168. package/header/Header.test.js +13 -26
  169. package/header/Icons.d.ts +2 -2
  170. package/header/Icons.js +3 -13
  171. package/header/types.d.ts +7 -22
  172. package/heading/Heading.accessibility.test.js +33 -0
  173. package/heading/Heading.js +10 -32
  174. package/heading/Heading.test.js +71 -88
  175. package/heading/types.d.ts +7 -7
  176. package/icon/Icon.accessibility.test.js +30 -0
  177. package/icon/Icon.d.ts +4 -0
  178. package/icon/Icon.js +33 -0
  179. package/icon/Icon.stories.tsx +28 -0
  180. package/icon/types.d.ts +4 -0
  181. package/icon/types.js +5 -0
  182. package/image/Image.accessibility.test.js +56 -0
  183. package/image/Image.d.ts +4 -0
  184. package/image/Image.js +70 -0
  185. package/image/Image.stories.tsx +129 -0
  186. package/image/types.d.ts +72 -0
  187. package/image/types.js +5 -0
  188. package/inset/Inset.js +13 -21
  189. package/inset/Inset.stories.tsx +2 -1
  190. package/inset/types.d.ts +2 -2
  191. package/layout/ApplicationLayout.d.ts +5 -5
  192. package/layout/ApplicationLayout.js +36 -70
  193. package/layout/ApplicationLayout.stories.tsx +1 -1
  194. package/layout/Icons.d.ts +7 -5
  195. package/layout/Icons.js +41 -59
  196. package/layout/types.d.ts +5 -6
  197. package/link/Link.accessibility.test.js +108 -0
  198. package/link/Link.js +31 -50
  199. package/link/Link.stories.tsx +64 -4
  200. package/link/Link.test.js +24 -44
  201. package/link/types.d.ts +14 -14
  202. package/main.d.ts +11 -5
  203. package/main.js +54 -59
  204. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  205. package/nav-tabs/NavTabs.d.ts +7 -0
  206. package/{tabs-nav → nav-tabs}/NavTabs.js +25 -57
  207. package/nav-tabs/NavTabs.stories.tsx +279 -0
  208. package/nav-tabs/NavTabs.test.js +77 -0
  209. package/nav-tabs/NavTabsContext.d.ts +3 -0
  210. package/nav-tabs/NavTabsContext.js +8 -0
  211. package/nav-tabs/Tab.js +117 -0
  212. package/{tabs-nav → nav-tabs}/types.d.ts +15 -16
  213. package/nav-tabs/types.js +5 -0
  214. package/number-input/NumberInput.accessibility.test.js +228 -0
  215. package/number-input/NumberInput.js +46 -36
  216. package/number-input/NumberInput.stories.tsx +42 -26
  217. package/number-input/NumberInput.test.js +860 -413
  218. package/number-input/NumberInputContext.d.ts +3 -4
  219. package/number-input/NumberInputContext.js +3 -14
  220. package/number-input/types.d.ts +17 -5
  221. package/package.json +43 -46
  222. package/paginator/Paginator.accessibility.test.js +79 -0
  223. package/paginator/Paginator.js +34 -67
  224. package/paginator/Paginator.stories.tsx +24 -0
  225. package/paginator/Paginator.test.js +252 -225
  226. package/paginator/types.d.ts +3 -3
  227. package/paragraph/Paragraph.accessibility.test.js +28 -0
  228. package/paragraph/Paragraph.d.ts +3 -4
  229. package/paragraph/Paragraph.js +6 -22
  230. package/paragraph/Paragraph.stories.tsx +0 -17
  231. package/password-input/PasswordInput.accessibility.test.js +153 -0
  232. package/password-input/PasswordInput.js +58 -127
  233. package/password-input/PasswordInput.stories.tsx +1 -33
  234. package/password-input/PasswordInput.test.js +158 -141
  235. package/password-input/types.d.ts +8 -7
  236. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  237. package/progress-bar/ProgressBar.d.ts +2 -2
  238. package/progress-bar/ProgressBar.js +28 -58
  239. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +36 -3
  240. package/progress-bar/ProgressBar.test.js +36 -53
  241. package/progress-bar/types.d.ts +4 -3
  242. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  243. package/quick-nav/QuickNav.js +4 -27
  244. package/quick-nav/QuickNav.stories.tsx +15 -1
  245. package/quick-nav/types.d.ts +10 -10
  246. package/radio-group/Radio.d.ts +1 -1
  247. package/radio-group/Radio.js +31 -63
  248. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  249. package/radio-group/RadioGroup.js +46 -93
  250. package/radio-group/RadioGroup.stories.tsx +131 -18
  251. package/radio-group/RadioGroup.test.js +505 -471
  252. package/radio-group/types.d.ts +8 -8
  253. package/resultset-table/Icons.d.ts +7 -0
  254. package/{text-input → resultset-table}/Icons.js +13 -26
  255. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  256. package/resultset-table/ResultsetTable.d.ts +7 -0
  257. package/resultset-table/ResultsetTable.js +171 -0
  258. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +168 -30
  259. package/resultset-table/ResultsetTable.test.js +381 -0
  260. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  261. package/resultset-table/types.js +5 -0
  262. package/select/Listbox.d.ts +1 -1
  263. package/select/Listbox.js +43 -86
  264. package/select/Option.js +35 -56
  265. package/select/Select.accessibility.test.js +228 -0
  266. package/select/Select.js +140 -183
  267. package/select/Select.stories.tsx +496 -204
  268. package/select/Select.test.js +1949 -1917
  269. package/select/types.d.ts +17 -18
  270. package/sidenav/Sidenav.accessibility.test.js +59 -0
  271. package/sidenav/Sidenav.d.ts +2 -2
  272. package/sidenav/Sidenav.js +90 -157
  273. package/sidenav/Sidenav.stories.tsx +160 -63
  274. package/sidenav/Sidenav.test.js +3 -10
  275. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  276. package/{layout → sidenav}/SidenavContext.js +3 -9
  277. package/sidenav/types.d.ts +33 -30
  278. package/slider/Slider.accessibility.test.js +104 -0
  279. package/slider/Slider.js +75 -132
  280. package/slider/Slider.test.js +108 -104
  281. package/slider/types.d.ts +4 -4
  282. package/spinner/Spinner.accessibility.test.js +96 -0
  283. package/spinner/Spinner.js +34 -74
  284. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  285. package/spinner/Spinner.test.js +26 -35
  286. package/spinner/types.d.ts +3 -3
  287. package/status-light/StatusLight.accessibility.test.js +157 -0
  288. package/status-light/StatusLight.d.ts +4 -0
  289. package/status-light/StatusLight.js +51 -0
  290. package/status-light/StatusLight.stories.tsx +74 -0
  291. package/status-light/StatusLight.test.js +25 -0
  292. package/status-light/types.d.ts +17 -0
  293. package/status-light/types.js +5 -0
  294. package/switch/Switch.accessibility.test.js +98 -0
  295. package/switch/Switch.js +52 -100
  296. package/switch/Switch.stories.tsx +45 -34
  297. package/switch/Switch.test.js +52 -97
  298. package/switch/types.d.ts +4 -4
  299. package/table/DropdownTheme.js +62 -0
  300. package/table/Table.accessibility.test.js +93 -0
  301. package/table/Table.d.ts +6 -2
  302. package/table/Table.js +78 -35
  303. package/table/Table.stories.tsx +663 -0
  304. package/table/Table.test.js +94 -7
  305. package/table/types.d.ts +34 -6
  306. package/tabs/Tab.js +28 -46
  307. package/tabs/Tabs.accessibility.test.js +56 -0
  308. package/tabs/Tabs.js +69 -163
  309. package/tabs/Tabs.stories.tsx +50 -6
  310. package/tabs/Tabs.test.js +61 -136
  311. package/tabs/types.d.ts +21 -21
  312. package/tag/Tag.accessibility.test.js +69 -0
  313. package/tag/Tag.js +34 -66
  314. package/tag/Tag.stories.tsx +18 -8
  315. package/tag/Tag.test.js +18 -37
  316. package/tag/types.d.ts +9 -9
  317. package/text-input/Suggestion.js +35 -25
  318. package/text-input/Suggestions.d.ts +1 -1
  319. package/text-input/Suggestions.js +30 -70
  320. package/text-input/TextInput.accessibility.test.js +321 -0
  321. package/text-input/TextInput.js +229 -335
  322. package/text-input/TextInput.stories.tsx +155 -162
  323. package/text-input/TextInput.test.js +1289 -1157
  324. package/text-input/types.d.ts +25 -17
  325. package/textarea/Textarea.accessibility.test.js +155 -0
  326. package/textarea/Textarea.js +71 -113
  327. package/textarea/Textarea.stories.tsx +174 -0
  328. package/textarea/Textarea.test.js +152 -183
  329. package/textarea/types.d.ts +9 -5
  330. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  331. package/toggle-group/ToggleGroup.d.ts +2 -2
  332. package/toggle-group/ToggleGroup.js +94 -107
  333. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  334. package/toggle-group/ToggleGroup.test.js +69 -88
  335. package/toggle-group/types.d.ts +28 -19
  336. package/typography/Typography.accessibility.test.js +339 -0
  337. package/typography/Typography.d.ts +2 -2
  338. package/typography/Typography.js +15 -123
  339. package/typography/Typography.stories.tsx +1 -1
  340. package/typography/types.d.ts +1 -1
  341. package/useTheme.d.ts +1144 -1
  342. package/useTheme.js +2 -9
  343. package/useTranslatedLabels.d.ts +84 -1
  344. package/useTranslatedLabels.js +1 -7
  345. package/utils/BaseTypography.d.ts +21 -0
  346. package/utils/BaseTypography.js +94 -0
  347. package/utils/FocusLock.d.ts +13 -0
  348. package/utils/FocusLock.js +124 -0
  349. package/wizard/Wizard.accessibility.test.js +55 -0
  350. package/wizard/Wizard.js +29 -75
  351. package/wizard/Wizard.stories.tsx +39 -0
  352. package/wizard/Wizard.test.js +54 -81
  353. package/wizard/types.d.ts +10 -11
  354. package/card/ice-cream.jpg +0 -0
  355. package/common/OpenSans.css +0 -81
  356. package/common/RequiredComponent.js +0 -32
  357. package/common/fonts/OpenSans-Bold.ttf +0 -0
  358. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  359. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  360. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  361. package/common/fonts/OpenSans-Italic.ttf +0 -0
  362. package/common/fonts/OpenSans-Light.ttf +0 -0
  363. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  364. package/common/fonts/OpenSans-Regular.ttf +0 -0
  365. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  366. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  367. package/number-input/numberInputContextTypes.d.ts +0 -19
  368. package/paginator/Icons.js +0 -66
  369. package/resultsetTable/ResultsetTable.d.ts +0 -4
  370. package/resultsetTable/ResultsetTable.js +0 -252
  371. package/resultsetTable/ResultsetTable.test.js +0 -348
  372. package/select/Icons.d.ts +0 -10
  373. package/select/Icons.js +0 -93
  374. package/slider/Slider.stories.tsx +0 -183
  375. package/table/Table.stories.jsx +0 -277
  376. package/tabs-nav/NavTabs.d.ts +0 -8
  377. package/tabs-nav/NavTabs.stories.tsx +0 -170
  378. package/tabs-nav/NavTabs.test.js +0 -82
  379. package/tabs-nav/Tab.js +0 -130
  380. package/text-input/Icons.d.ts +0 -8
  381. package/textarea/Textarea.stories.jsx +0 -157
  382. /package/{resultsetTable → action-icon}/types.js +0 -0
  383. /package/{tabs-nav → breadcrumbs}/types.js +0 -0
  384. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
  385. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
@@ -1,277 +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
- <hr />
275
- </ExampleContainer>
276
- </>
277
- );
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- import { NavTabsContextProps, NavTabsProps } from "./types";
3
- export declare const NavTabsContext: React.Context<NavTabsContextProps>;
4
- declare const DxcNavTabs: {
5
- ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
6
- Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
7
- };
8
- export default DxcNavTabs;
@@ -1,170 +0,0 @@
1
- import React from "react";
2
- import DxcNavTabs from "./NavTabs";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- export default {
7
- title: "NavTabs",
8
- component: DxcNavTabs,
9
- };
10
-
11
- const iconSVG = (
12
- <svg viewBox="0 0 24 24" fill="currentColor">
13
- <path d="M0 0h24v24H0z" fill="none" />
14
- <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
15
- </svg>
16
- );
17
-
18
- export const Chromatic = () => (
19
- <>
20
- <ExampleContainer>
21
- <Title title="Only label" theme="light" level={4} />
22
- <DxcNavTabs>
23
- <DxcNavTabs.Tab href="#" active>
24
- Tab 1
25
- </DxcNavTabs.Tab>
26
- <DxcNavTabs.Tab href="#" disabled>
27
- Tab 2
28
- </DxcNavTabs.Tab>
29
- <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
30
- <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
31
- </DxcNavTabs>
32
- </ExampleContainer>
33
- <ExampleContainer pseudoState="pseudo-hover">
34
- <Title title="Hovered tabs" theme="light" level={4} />
35
- <DxcNavTabs>
36
- <DxcNavTabs.Tab href="#" active>
37
- Tab 1
38
- </DxcNavTabs.Tab>
39
- <DxcNavTabs.Tab href="#" disabled>
40
- Tab 2
41
- </DxcNavTabs.Tab>
42
- <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
43
- <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
44
- </DxcNavTabs>
45
- </ExampleContainer>
46
- <ExampleContainer pseudoState="pseudo-focus">
47
- <Title title="Focused tabs" theme="light" level={4} />
48
- <DxcNavTabs>
49
- <DxcNavTabs.Tab href="#" active>
50
- Tab 1
51
- </DxcNavTabs.Tab>
52
- <DxcNavTabs.Tab href="#" disabled>
53
- Tab 2
54
- </DxcNavTabs.Tab>
55
- <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
56
- <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
57
- </DxcNavTabs>
58
- </ExampleContainer>
59
- <ExampleContainer pseudoState="pseudo-active">
60
- <Title title="Actived tabs" theme="light" level={4} />
61
- <DxcNavTabs>
62
- <DxcNavTabs.Tab href="#" active>
63
- Tab 1
64
- </DxcNavTabs.Tab>
65
- <DxcNavTabs.Tab href="#" disabled>
66
- Tab 2
67
- </DxcNavTabs.Tab>
68
- <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
69
- <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
70
- </DxcNavTabs>
71
- </ExampleContainer>
72
- <ExampleContainer>
73
- <Title title="With notification number" theme="light" level={4} />
74
- <DxcNavTabs>
75
- <DxcNavTabs.Tab href="#" active notificationNumber>
76
- Tab 1
77
- </DxcNavTabs.Tab>
78
- <DxcNavTabs.Tab href="#" disabled notificationNumber={5}>
79
- Tab 2
80
- </DxcNavTabs.Tab>
81
- <DxcNavTabs.Tab href="#" notificationNumber={120}>
82
- Tab 3
83
- </DxcNavTabs.Tab>
84
- <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
85
- </DxcNavTabs>
86
- </ExampleContainer>
87
- <ExampleContainer>
88
- <Title title="With icon position top" theme="light" level={4} />
89
- <DxcNavTabs>
90
- <DxcNavTabs.Tab href="#" active icon={iconSVG}>
91
- Tab 1
92
- </DxcNavTabs.Tab>
93
- <DxcNavTabs.Tab href="#" disabled icon={iconSVG}>
94
- Tab 2
95
- </DxcNavTabs.Tab>
96
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
97
- Tab 3
98
- </DxcNavTabs.Tab>
99
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
100
- Tab 4
101
- </DxcNavTabs.Tab>
102
- </DxcNavTabs>
103
- </ExampleContainer>
104
- <ExampleContainer>
105
- <Title title="With icon position left" theme="light" level={4} />
106
- <DxcNavTabs iconPosition="left">
107
- <DxcNavTabs.Tab href="#" active icon={iconSVG}>
108
- Tab 1
109
- </DxcNavTabs.Tab>
110
- <DxcNavTabs.Tab href="#" disabled icon={iconSVG}>
111
- Tab 2
112
- </DxcNavTabs.Tab>
113
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
114
- Tab 3
115
- </DxcNavTabs.Tab>
116
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
117
- Tab 4
118
- </DxcNavTabs.Tab>
119
- </DxcNavTabs>
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="With icon and notification number" theme="light" level={4} />
123
- <DxcNavTabs>
124
- <DxcNavTabs.Tab href="#" active icon={iconSVG} notificationNumber>
125
- Tab 1
126
- </DxcNavTabs.Tab>
127
- <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
128
- Tab 2
129
- </DxcNavTabs.Tab>
130
- <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
131
- Tab 3
132
- </DxcNavTabs.Tab>
133
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
134
- Tab 4
135
- </DxcNavTabs.Tab>
136
- </DxcNavTabs>
137
- </ExampleContainer>
138
- <ExampleContainer>
139
- <Title title="With icon on the left and notification number" theme="light" level={4} />
140
- <DxcNavTabs iconPosition="left">
141
- <DxcNavTabs.Tab href="#" active icon={iconSVG} notificationNumber>
142
- Tab 1
143
- </DxcNavTabs.Tab>
144
- <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
145
- Tab 2
146
- </DxcNavTabs.Tab>
147
- <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
148
- Tab 3
149
- </DxcNavTabs.Tab>
150
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
151
- Tab 4
152
- </DxcNavTabs.Tab>
153
- </DxcNavTabs>
154
- </ExampleContainer>
155
- <ExampleContainer>
156
- <Title title="With long label" theme="light" level={4} />
157
- <DxcNavTabs>
158
- <DxcNavTabs.Tab href="#" active>
159
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
160
- </DxcNavTabs.Tab>
161
- <DxcNavTabs.Tab href="#" icon={iconSVG} disabled notificationNumber={3}>
162
- Tab 2
163
- </DxcNavTabs.Tab>
164
- <DxcNavTabs.Tab href="#" icon={iconSVG}>
165
- Tab 3
166
- </DxcNavTabs.Tab>
167
- </DxcNavTabs>
168
- </ExampleContainer>
169
- </>
170
- );
@@ -1,82 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _NavTabs = _interopRequireDefault(require("./NavTabs"));
10
-
11
- describe("Tabs component tests", function () {
12
- test("Tabs render with correct labels and attributes", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
14
- href: "/test1",
15
- active: true
16
- }, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
17
- href: "/test2",
18
- disabled: true
19
- }, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
20
- href: "/test3"
21
- }, "Tab 3"))),
22
- getByText = _render.getByText,
23
- getAllByRole = _render.getAllByRole,
24
- getByRole = _render.getByRole;
25
-
26
- expect(getByRole("tablist")).toBeTruthy();
27
- expect(getByRole("tablist").getAttribute("aria-label")).toBe("Navigation tabs");
28
- expect(getByText("Tab 1")).toBeTruthy();
29
- expect(getByText("Tab 2")).toBeTruthy();
30
- expect(getByText("Tab 3")).toBeTruthy();
31
- var tabs = getAllByRole("tab");
32
- tabs.forEach(function (tab, index) {
33
- expect(tab.getAttribute("aria-selected")).toBe((index === 0).toString());
34
- });
35
- var anchors = getAllByRole("link");
36
- expect(anchors.length).toBe(2);
37
- expect(anchors[0].getAttribute("href")).toBe("/test1");
38
- expect(anchors[1].getAttribute("href")).toBe("/test3");
39
- expect(anchors[0].getAttribute("tabindex")).toBe("0");
40
- expect(anchors[1].getAttribute("tabindex")).toBe("-1");
41
- });
42
- test("Tabs render with correct labels, badges and icons", function () {
43
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
44
- href: "/test1",
45
- active: true,
46
- notificationNumber: 10
47
- }, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
48
- href: "/test2",
49
- disabled: true,
50
- notificationNumber: 20
51
- }, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
52
- href: "/test3",
53
- notificationNumber: 1000,
54
- icon: "/testIcon.png"
55
- }, "Tab 3"))),
56
- getByText = _render2.getByText,
57
- getByRole = _render2.getByRole;
58
-
59
- expect(getByText("10")).toBeTruthy();
60
- expect(getByText("20")).toBeTruthy();
61
- expect(getByText("+99")).toBeTruthy();
62
- expect(getByRole("img")).toBeTruthy();
63
- });
64
- test("Tabs render with correct tab index", function () {
65
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], {
66
- tabIndex: 3
67
- }, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
68
- href: "/test1"
69
- }, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
70
- href: "/test2",
71
- disabled: true
72
- }, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
73
- href: "/test3",
74
- active: true
75
- }, "Tab 3"))),
76
- getAllByRole = _render3.getAllByRole;
77
-
78
- var tabs = getAllByRole("link");
79
- expect(tabs[0].getAttribute("tabindex")).toBe("-1");
80
- expect(tabs[1].getAttribute("tabindex")).toBe("3");
81
- });
82
- });
package/tabs-nav/Tab.js DELETED
@@ -1,130 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
-
16
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireDefault(require("styled-components"));
21
-
22
- var _Badge = _interopRequireDefault(require("../badge/Badge"));
23
-
24
- var _NavTabs = require("./NavTabs");
25
-
26
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
27
-
28
- var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
29
-
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
33
-
34
- var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
35
- var href = _ref.href,
36
- _ref$active = _ref.active,
37
- active = _ref$active === void 0 ? false : _ref$active,
38
- icon = _ref.icon,
39
- _ref$disabled = _ref.disabled,
40
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
41
- _ref$notificationNumb = _ref.notificationNumber,
42
- notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
43
- children = _ref.children,
44
- otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
45
- var tabRef = /*#__PURE__*/(0, _react.createRef)();
46
-
47
- var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
48
- iconPosition = _useContext.iconPosition,
49
- tabIndex = _useContext.tabIndex,
50
- hasIcons = _useContext.hasIcons,
51
- focusedLabel = _useContext.focusedLabel;
52
-
53
- (0, _react.useLayoutEffect)(function () {
54
- var _tabRef$current;
55
-
56
- focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
57
- }, [focusedLabel]);
58
-
59
- var handleOnKeyDown = function handleOnKeyDown(event) {
60
- var _tabRef$current2;
61
-
62
- switch (event.key) {
63
- case " ":
64
- case "Enter":
65
- tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
66
- event.preventDefault();
67
- break;
68
- }
69
- };
70
-
71
- return /*#__PURE__*/_react["default"].createElement(TabContainer, {
72
- active: active,
73
- role: "tab",
74
- "aria-selected": active
75
- }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
76
- href: !disabled && href ? href : undefined,
77
- disabled: disabled,
78
- iconPosition: iconPosition,
79
- hasIcon: hasIcons,
80
- ref: function ref(anchorRef) {
81
- tabRef.current = anchorRef;
82
-
83
- if (_ref2) {
84
- if (typeof _ref2 === "function") _ref2(anchorRef);else {
85
- _ref2.current = anchorRef;
86
- }
87
- }
88
- },
89
- onKeyDown: handleOnKeyDown,
90
- tabIndex: active ? tabIndex : -1
91
- }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
92
- iconPosition: iconPosition
93
- }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
94
- src: icon
95
- }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
96
- notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
97
- disabled: disabled
98
- })))));
99
- });
100
-
101
- var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n border-bottom: 2px solid ", ";\n"])), function (props) {
102
- return props.active ? "#6f2c91" : "#0000001a";
103
- });
104
-
105
- var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n align-items: center;\n\n font-family: \"Open Sans\";\n font-style: normal;\n font-weight: 400;\n font-size: 1rem;\n color: ", ";\n text-decoration-color: transparent;\n cursor: ", ";\n\n height: ", ";\n min-width: 164px;\n margin: 0.5rem;\n padding: 0.375rem;\n\n border-radius: 4px;\n\n ", "\n"])), function (props) {
106
- return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
107
- }, function (props) {
108
- return props.disabled ? "#0000004D" : "#333333";
109
- }, function (props) {
110
- return props.disabled ? "not-allowed" : "pointer";
111
- }, function (props) {
112
- return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
113
- }, function (props) {
114
- return !props.disabled && ":hover {\n background: #0000000D;\n }\n\n :focus {\n outline: 2px solid #33aaff};\n }\n\n :active {\n background: #0000001A;\n outline: 2px solid #33aaff};\n }";
115
- });
116
-
117
- var TabIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
118
-
119
- var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 24px;\n max-width: 24px;\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) {
120
- return props.iconPosition === "top" && "0.375rem";
121
- }, function (props) {
122
- return props.iconPosition === "left" && "0.625rem";
123
- });
124
-
125
- var LabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n"])));
126
-
127
- var BadgeContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 0.5rem;\n"])));
128
-
129
- var _default = DxcTab;
130
- exports["default"] = _default;
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- declare const icons: {
3
- error: JSX.Element;
4
- clear: JSX.Element;
5
- increment: JSX.Element;
6
- decrement: JSX.Element;
7
- };
8
- export default icons;