@dxc-technology/halstack-react 0.0.0-eb9d984 → 0.0.0-ebe476f

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 (320) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6683 -0
  3. package/dist/index.d.ts +6683 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +69 -70
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -295
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -226
  13. package/accordion/Accordion.stories.tsx +0 -307
  14. package/accordion/Accordion.test.js +0 -72
  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 -169
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  20. package/accordion-group/AccordionGroup.test.js +0 -151
  21. package/accordion-group/types.d.ts +0 -72
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -43
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -174
  51. package/button/Button.stories.tsx +0 -274
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -67
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -257
  64. package/checkbox/Checkbox.stories.tsx +0 -188
  65. package/checkbox/Checkbox.test.js +0 -78
  66. package/checkbox/types.d.ts +0 -64
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -161
  70. package/chip/Chip.stories.tsx +0 -119
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/RequiredComponent.js +0 -32
  76. package/common/fonts/OpenSans-Bold.ttf +0 -0
  77. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-Italic.ttf +0 -0
  81. package/common/fonts/OpenSans-Light.ttf +0 -0
  82. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  83. package/common/fonts/OpenSans-Regular.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  86. package/common/utils.js +0 -22
  87. package/common/variables.js +0 -1495
  88. package/date-input/DateInput.d.ts +0 -4
  89. package/date-input/DateInput.js +0 -372
  90. package/date-input/DateInput.stories.tsx +0 -138
  91. package/date-input/DateInput.test.js +0 -479
  92. package/date-input/types.d.ts +0 -107
  93. package/date-input/types.js +0 -5
  94. package/dialog/Dialog.d.ts +0 -4
  95. package/dialog/Dialog.js +0 -138
  96. package/dialog/Dialog.stories.tsx +0 -212
  97. package/dialog/Dialog.test.js +0 -40
  98. package/dialog/types.d.ts +0 -43
  99. package/dialog/types.js +0 -5
  100. package/dropdown/Dropdown.d.ts +0 -4
  101. package/dropdown/Dropdown.js +0 -391
  102. package/dropdown/Dropdown.stories.tsx +0 -249
  103. package/dropdown/Dropdown.test.js +0 -189
  104. package/dropdown/types.d.ts +0 -80
  105. package/dropdown/types.js +0 -5
  106. package/file-input/FileInput.d.ts +0 -4
  107. package/file-input/FileInput.js +0 -593
  108. package/file-input/FileInput.stories.tsx +0 -507
  109. package/file-input/FileInput.test.js +0 -457
  110. package/file-input/FileItem.d.ts +0 -14
  111. package/file-input/FileItem.js +0 -186
  112. package/file-input/types.d.ts +0 -112
  113. package/file-input/types.js +0 -5
  114. package/flex/Flex.d.ts +0 -3
  115. package/flex/Flex.js +0 -74
  116. package/flex/Flex.stories.tsx +0 -103
  117. package/flex/types.d.ts +0 -21
  118. package/flex/types.js +0 -5
  119. package/footer/Footer.d.ts +0 -4
  120. package/footer/Footer.js +0 -185
  121. package/footer/Footer.stories.tsx +0 -130
  122. package/footer/Footer.test.js +0 -109
  123. package/footer/Icons.d.ts +0 -2
  124. package/footer/Icons.js +0 -77
  125. package/footer/types.d.ts +0 -65
  126. package/footer/types.js +0 -5
  127. package/header/Header.d.ts +0 -7
  128. package/header/Header.js +0 -303
  129. package/header/Header.stories.tsx +0 -172
  130. package/header/Header.test.js +0 -79
  131. package/header/Icons.d.ts +0 -2
  132. package/header/Icons.js +0 -34
  133. package/header/types.d.ts +0 -47
  134. package/header/types.js +0 -5
  135. package/heading/Heading.d.ts +0 -4
  136. package/heading/Heading.js +0 -159
  137. package/heading/Heading.stories.tsx +0 -54
  138. package/heading/Heading.test.js +0 -186
  139. package/heading/types.d.ts +0 -33
  140. package/heading/types.js +0 -5
  141. package/inset/Inset.d.ts +0 -3
  142. package/inset/Inset.js +0 -51
  143. package/inset/Inset.stories.tsx +0 -229
  144. package/inset/types.d.ts +0 -37
  145. package/inset/types.js +0 -5
  146. package/layout/ApplicationLayout.d.ts +0 -11
  147. package/layout/ApplicationLayout.js +0 -186
  148. package/layout/ApplicationLayout.stories.tsx +0 -130
  149. package/layout/Icons.d.ts +0 -5
  150. package/layout/Icons.js +0 -66
  151. package/layout/SidenavContext.d.ts +0 -5
  152. package/layout/SidenavContext.js +0 -19
  153. package/layout/types.d.ts +0 -44
  154. package/layout/types.js +0 -5
  155. package/link/Link.d.ts +0 -4
  156. package/link/Link.js +0 -136
  157. package/link/Link.stories.tsx +0 -186
  158. package/link/Link.test.js +0 -83
  159. package/link/types.d.ts +0 -54
  160. package/link/types.js +0 -5
  161. package/main.d.ts +0 -49
  162. package/main.js +0 -409
  163. package/number-input/NumberInput.d.ts +0 -4
  164. package/number-input/NumberInput.js +0 -76
  165. package/number-input/NumberInput.stories.tsx +0 -115
  166. package/number-input/NumberInput.test.js +0 -506
  167. package/number-input/NumberInputContext.d.ts +0 -4
  168. package/number-input/NumberInputContext.js +0 -19
  169. package/number-input/numberInputContextTypes.d.ts +0 -19
  170. package/number-input/numberInputContextTypes.js +0 -5
  171. package/number-input/types.d.ts +0 -124
  172. package/number-input/types.js +0 -5
  173. package/paginator/Icons.js +0 -66
  174. package/paginator/Paginator.d.ts +0 -4
  175. package/paginator/Paginator.js +0 -171
  176. package/paginator/Paginator.stories.tsx +0 -63
  177. package/paginator/Paginator.test.js +0 -308
  178. package/paginator/types.d.ts +0 -38
  179. package/paginator/types.js +0 -5
  180. package/paragraph/Paragraph.d.ts +0 -6
  181. package/paragraph/Paragraph.js +0 -38
  182. package/paragraph/Paragraph.stories.tsx +0 -44
  183. package/password-input/PasswordInput.d.ts +0 -4
  184. package/password-input/PasswordInput.js +0 -166
  185. package/password-input/PasswordInput.stories.tsx +0 -131
  186. package/password-input/PasswordInput.test.js +0 -180
  187. package/password-input/types.d.ts +0 -110
  188. package/password-input/types.js +0 -5
  189. package/progress-bar/ProgressBar.d.ts +0 -4
  190. package/progress-bar/ProgressBar.js +0 -170
  191. package/progress-bar/ProgressBar.stories.jsx +0 -58
  192. package/progress-bar/ProgressBar.test.js +0 -65
  193. package/progress-bar/types.d.ts +0 -37
  194. package/progress-bar/types.js +0 -5
  195. package/quick-nav/QuickNav.d.ts +0 -4
  196. package/quick-nav/QuickNav.js +0 -118
  197. package/quick-nav/QuickNav.stories.tsx +0 -264
  198. package/quick-nav/types.d.ts +0 -21
  199. package/quick-nav/types.js +0 -5
  200. package/radio-group/Radio.d.ts +0 -4
  201. package/radio-group/Radio.js +0 -141
  202. package/radio-group/RadioGroup.d.ts +0 -4
  203. package/radio-group/RadioGroup.js +0 -283
  204. package/radio-group/RadioGroup.stories.tsx +0 -100
  205. package/radio-group/RadioGroup.test.js +0 -695
  206. package/radio-group/types.d.ts +0 -114
  207. package/radio-group/types.js +0 -5
  208. package/resultsetTable/ResultsetTable.d.ts +0 -4
  209. package/resultsetTable/ResultsetTable.js +0 -254
  210. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  211. package/resultsetTable/ResultsetTable.test.js +0 -348
  212. package/resultsetTable/types.d.ts +0 -67
  213. package/resultsetTable/types.js +0 -5
  214. package/row/Row.d.ts +0 -3
  215. package/row/Row.js +0 -127
  216. package/row/Row.stories.tsx +0 -237
  217. package/row/types.d.ts +0 -28
  218. package/row/types.js +0 -5
  219. package/select/Icons.d.ts +0 -10
  220. package/select/Icons.js +0 -93
  221. package/select/Listbox.d.ts +0 -4
  222. package/select/Listbox.js +0 -175
  223. package/select/Option.d.ts +0 -4
  224. package/select/Option.js +0 -110
  225. package/select/Select.d.ts +0 -4
  226. package/select/Select.js +0 -660
  227. package/select/Select.stories.tsx +0 -626
  228. package/select/Select.test.js +0 -2162
  229. package/select/types.d.ts +0 -212
  230. package/select/types.js +0 -5
  231. package/sidenav/Sidenav.d.ts +0 -10
  232. package/sidenav/Sidenav.js +0 -256
  233. package/sidenav/Sidenav.stories.tsx +0 -180
  234. package/sidenav/Sidenav.test.js +0 -44
  235. package/sidenav/types.d.ts +0 -73
  236. package/sidenav/types.js +0 -5
  237. package/slider/Slider.d.ts +0 -4
  238. package/slider/Slider.js +0 -318
  239. package/slider/Slider.stories.tsx +0 -177
  240. package/slider/Slider.test.js +0 -150
  241. package/slider/types.d.ts +0 -82
  242. package/slider/types.js +0 -5
  243. package/spinner/Spinner.d.ts +0 -4
  244. package/spinner/Spinner.js +0 -250
  245. package/spinner/Spinner.stories.jsx +0 -103
  246. package/spinner/Spinner.test.js +0 -64
  247. package/spinner/types.d.ts +0 -32
  248. package/spinner/types.js +0 -5
  249. package/stack/Stack.d.ts +0 -4
  250. package/stack/Stack.js +0 -56
  251. package/stack/Stack.stories.tsx +0 -263
  252. package/stack/types.d.ts +0 -32
  253. package/stack/types.js +0 -5
  254. package/switch/Switch.d.ts +0 -4
  255. package/switch/Switch.js +0 -195
  256. package/switch/Switch.stories.tsx +0 -160
  257. package/switch/Switch.test.js +0 -98
  258. package/switch/types.d.ts +0 -62
  259. package/switch/types.js +0 -5
  260. package/table/Table.d.ts +0 -4
  261. package/table/Table.js +0 -118
  262. package/table/Table.stories.jsx +0 -277
  263. package/table/Table.test.js +0 -26
  264. package/table/types.d.ts +0 -21
  265. package/table/types.js +0 -5
  266. package/tabs/Tabs.d.ts +0 -4
  267. package/tabs/Tabs.js +0 -211
  268. package/tabs/Tabs.stories.tsx +0 -112
  269. package/tabs/Tabs.test.js +0 -140
  270. package/tabs/types.d.ts +0 -82
  271. package/tabs/types.js +0 -5
  272. package/tabs-nav/NavTabs.d.ts +0 -8
  273. package/tabs-nav/NavTabs.js +0 -125
  274. package/tabs-nav/NavTabs.stories.tsx +0 -170
  275. package/tabs-nav/NavTabs.test.js +0 -82
  276. package/tabs-nav/Tab.d.ts +0 -4
  277. package/tabs-nav/Tab.js +0 -132
  278. package/tabs-nav/types.d.ts +0 -53
  279. package/tabs-nav/types.js +0 -5
  280. package/tag/Tag.d.ts +0 -4
  281. package/tag/Tag.js +0 -183
  282. package/tag/Tag.stories.tsx +0 -142
  283. package/tag/Tag.test.js +0 -60
  284. package/tag/types.d.ts +0 -69
  285. package/tag/types.js +0 -5
  286. package/text-input/Suggestion.d.ts +0 -4
  287. package/text-input/Suggestion.js +0 -55
  288. package/text-input/TextInput.d.ts +0 -4
  289. package/text-input/TextInput.js +0 -770
  290. package/text-input/TextInput.stories.tsx +0 -474
  291. package/text-input/TextInput.test.js +0 -1712
  292. package/text-input/types.d.ts +0 -178
  293. package/text-input/types.js +0 -5
  294. package/textarea/Textarea.d.ts +0 -4
  295. package/textarea/Textarea.js +0 -277
  296. package/textarea/Textarea.stories.jsx +0 -157
  297. package/textarea/Textarea.test.js +0 -437
  298. package/textarea/types.d.ts +0 -137
  299. package/textarea/types.js +0 -5
  300. package/toggle-group/ToggleGroup.d.ts +0 -4
  301. package/toggle-group/ToggleGroup.js +0 -215
  302. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  303. package/toggle-group/ToggleGroup.test.js +0 -156
  304. package/toggle-group/types.d.ts +0 -105
  305. package/toggle-group/types.js +0 -5
  306. package/typography/Typography.d.ts +0 -4
  307. package/typography/Typography.js +0 -131
  308. package/typography/Typography.stories.tsx +0 -198
  309. package/typography/types.d.ts +0 -18
  310. package/typography/types.js +0 -5
  311. package/useTheme.d.ts +0 -2
  312. package/useTheme.js +0 -22
  313. package/useTranslatedLabels.d.ts +0 -2
  314. package/useTranslatedLabels.js +0 -20
  315. package/wizard/Wizard.d.ts +0 -4
  316. package/wizard/Wizard.js +0 -285
  317. package/wizard/Wizard.stories.tsx +0 -233
  318. package/wizard/Wizard.test.js +0 -141
  319. package/wizard/types.d.ts +0 -65
  320. package/wizard/types.js +0 -5
package/tabs/Tabs.test.js DELETED
@@ -1,140 +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 _Tabs = _interopRequireDefault(require("./Tabs"));
10
-
11
- var sampleTabs = [{
12
- label: "Tab-1"
13
- }, {
14
- label: "Tab-2"
15
- }, {
16
- label: "Tab-3"
17
- }];
18
- var sampleTabsWithBadge = [{
19
- label: "Tab-1",
20
- notificationNumber: "10"
21
- }, {
22
- label: "Tab-2",
23
- notificationNumber: "20"
24
- }, {
25
- label: "Tab-3",
26
- notificationNumber: "101"
27
- }];
28
- describe("Tabs component tests", function () {
29
- test("Tabs render with correct labels", function () {
30
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
31
- tabs: sampleTabs
32
- })),
33
- getByText = _render.getByText,
34
- getAllByRole = _render.getAllByRole;
35
-
36
- var tabs = getAllByRole("tab");
37
- expect(getByText("Tab-1")).toBeTruthy();
38
- expect(getByText("Tab-2")).toBeTruthy();
39
- expect(getByText("Tab-3")).toBeTruthy();
40
- expect(tabs[0].getAttribute("aria-selected")).toBe("true");
41
- expect(tabs[1].getAttribute("aria-selected")).toBe("false");
42
- expect(tabs[2].getAttribute("aria-selected")).toBe("false");
43
- });
44
- test("Tabs render with correct labels and badges", function () {
45
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
46
- tabs: sampleTabsWithBadge
47
- })),
48
- getByText = _render2.getByText;
49
-
50
- expect(getByText("10")).toBeTruthy();
51
- expect(getByText("20")).toBeTruthy();
52
- expect(getByText("+99")).toBeTruthy();
53
- });
54
- test("Tabs render with an initially active tab", function () {
55
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
56
- defaultActiveTabIndex: 2,
57
- tabs: sampleTabsWithBadge
58
- })),
59
- getAllByRole = _render3.getAllByRole;
60
-
61
- var tabs = getAllByRole("tab");
62
- expect(tabs[0].getAttribute("aria-selected")).toBe("false");
63
- expect(tabs[1].getAttribute("aria-selected")).toBe("false");
64
- expect(tabs[2].getAttribute("aria-selected")).toBe("true");
65
- });
66
- test("Tabs render with correct icons", function () {
67
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
68
- tabs: [{
69
- label: "Tab-1",
70
- icon: "/testIcon1.png"
71
- }, {
72
- label: "Tab-2",
73
- icon: "/testIcon2.png"
74
- }, {
75
- label: "Tab-3",
76
- icon: "/testIcon3.png"
77
- }]
78
- })),
79
- getAllByRole = _render4.getAllByRole;
80
-
81
- expect(getAllByRole("img")[0].getAttribute("src")).toBe("/testIcon1.png");
82
- expect(getAllByRole("img")[1].getAttribute("src")).toBe("/testIcon2.png");
83
- expect(getAllByRole("img")[2].getAttribute("src")).toBe("/testIcon3.png");
84
- });
85
- test("Tabs render with disabled tab", function () {
86
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
87
- tabs: [{
88
- label: "Tab-1",
89
- isDisabled: true
90
- }, {
91
- label: "Tab-2"
92
- }]
93
- })),
94
- getAllByRole = _render5.getAllByRole;
95
-
96
- expect(getAllByRole("tab")[0].hasAttribute("disabled")).toBeTruthy();
97
- expect(getAllByRole("tab")[1].hasAttribute("disabled")).toBeFalsy();
98
- });
99
- test("Uncontrolled tabs", function () {
100
- var onTabClick = jest.fn();
101
-
102
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
103
- tabs: sampleTabs,
104
- onTabClick: onTabClick
105
- })),
106
- getByText = _render6.getByText;
107
-
108
- var tab1 = getByText("Tab-1");
109
- var tab2 = getByText("Tab-2");
110
-
111
- _react2.fireEvent.click(tab2);
112
-
113
- expect(onTabClick).toHaveBeenCalledWith(1);
114
-
115
- _react2.fireEvent.click(tab1);
116
-
117
- expect(onTabClick).toHaveBeenCalledWith(0);
118
- });
119
- test("Controlled tabs", function () {
120
- var onTabClick = jest.fn();
121
-
122
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
123
- tabs: sampleTabs,
124
- onTabClick: onTabClick,
125
- activeTabIndex: 0
126
- })),
127
- getByText = _render7.getByText;
128
-
129
- var tab2 = getByText("Tab-2");
130
- var tab3 = getByText("Tab-3");
131
-
132
- _react2.fireEvent.click(tab2);
133
-
134
- expect(onTabClick).toHaveBeenCalledWith(1);
135
-
136
- _react2.fireEvent.click(tab3);
137
-
138
- expect(onTabClick).toHaveBeenCalledWith(2);
139
- });
140
- });
package/tabs/types.d.ts DELETED
@@ -1,82 +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>;
10
- declare type TabCommonProps = {
11
- /**
12
- * Whether the tab is disabled or not.
13
- */
14
- isDisabled?: boolean;
15
- /**
16
- * If the value is 'true', an empty badge will appear.
17
- * If it is 'false', no badge will appear.
18
- * If a number is put it will be shown as the label of the notification
19
- * in the tab, taking into account that if that number is greater than 99,
20
- * it will appear as '+99' in the badge.
21
- */
22
- notificationNumber?: boolean | number;
23
- };
24
- declare type TabLabelProps = TabCommonProps & {
25
- /**
26
- * Tab label.
27
- */
28
- label: string;
29
- /**
30
- * Element or path used as the icon that will be displayed in the tab.
31
- */
32
- icon?: string | SVG;
33
- };
34
- declare type TabIconProps = TabCommonProps & {
35
- /**
36
- * Tab label.
37
- */
38
- label?: string;
39
- /**
40
- * Element or path used as the icon that will be displayed in the tab.
41
- */
42
- icon: string | SVG;
43
- };
44
- declare type Props = {
45
- /**
46
- * An array of objects representing the tabs.
47
- */
48
- tabs: (TabLabelProps | TabIconProps)[];
49
- /**
50
- * Whether the icon should appear above or to the left of the label.
51
- */
52
- iconPosition?: "top" | "left";
53
- /**
54
- * Initially active tab, only when it is uncontrolled.
55
- */
56
- defaultActiveTabIndex?: number;
57
- /**
58
- * The index of the active tab. If undefined, the component will be
59
- * uncontrolled and the active tab will be managed internally by the component.
60
- */
61
- activeTabIndex?: number;
62
- /**
63
- * This function will be called when the user clicks on a tab. The index of the
64
- * clicked tab will be passed as a parameter.
65
- */
66
- onTabClick?: (tabIndex: number) => void;
67
- /**
68
- * This function will be called when the user hovers a tab.The index of the
69
- * hovered tab will be passed as a parameter.
70
- */
71
- onTabHover?: (tabIndex: number) => void;
72
- /**
73
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
74
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
75
- */
76
- margin?: Space | Margin;
77
- /**
78
- * Value of the tabindex for each tab.
79
- */
80
- tabIndex?: number;
81
- };
82
- 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
- });
@@ -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,125 +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"] = exports.NavTabsContext = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _useTheme = _interopRequireDefault(require("../useTheme"));
21
-
22
- var _Tab = _interopRequireDefault(require("./Tab"));
23
-
24
- var _templateObject;
25
-
26
- 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); }
27
-
28
- 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; }
29
-
30
- var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
31
- exports.NavTabsContext = NavTabsContext;
32
-
33
- var getPropInChild = function getPropInChild(child, propName) {
34
- return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
35
- };
36
-
37
- var getLabelFromTab = function getLabelFromTab(child) {
38
- if (typeof child === "string") {
39
- return child.toString();
40
- } else if (child.props.children) {
41
- return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
42
- }
43
- };
44
-
45
- var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
46
- var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
47
-
48
- while (getPropInChild(array[index], "disabled")) {
49
- index = index === 0 ? array.length - 1 : index - 1;
50
- }
51
-
52
- return index;
53
- };
54
-
55
- var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
56
- var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
57
-
58
- while (getPropInChild(array[index], "disabled")) {
59
- index = index === array.length - 1 ? 0 : index + 1;
60
- }
61
-
62
- return index;
63
- };
64
-
65
- var DxcNavTabs = function DxcNavTabs(_ref) {
66
- var _ref$iconPosition = _ref.iconPosition,
67
- iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
68
- _ref$tabIndex = _ref.tabIndex,
69
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
70
- children = _ref.children;
71
- var colorsTheme = (0, _useTheme["default"])();
72
-
73
- var _useState = (0, _react.useState)(null),
74
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
75
- innerFocus = _useState2[0],
76
- setInnerFocus = _useState2[1];
77
-
78
- var contextValue = (0, _react.useMemo)(function () {
79
- return {
80
- iconPosition: iconPosition,
81
- tabIndex: tabIndex,
82
- hasIcons: _react["default"].Children.toArray(children).some(function (child) {
83
- return getPropInChild(child, "icon");
84
- }),
85
- focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
86
- };
87
- }, [iconPosition, tabIndex, innerFocus]);
88
-
89
- var handleOnKeyDown = function handleOnKeyDown(event) {
90
- var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
91
- return getPropInChild(child, "active");
92
- });
93
-
94
- switch (event.keyCode) {
95
- case 37:
96
- // arrow left
97
- event.preventDefault();
98
- setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
99
- break;
100
-
101
- case 39:
102
- // arrow right
103
- event.preventDefault();
104
- setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
105
- break;
106
- }
107
- };
108
-
109
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
110
- theme: colorsTheme.tabs
111
- }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
112
- onKeyDown: handleOnKeyDown,
113
- role: "tablist",
114
- "aria-label": "Navigation tabs"
115
- }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
116
- value: contextValue
117
- }, children)));
118
- };
119
-
120
- DxcNavTabs.Tab = _Tab["default"];
121
-
122
- var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
123
-
124
- var _default = DxcNavTabs;
125
- exports["default"] = _default;
@@ -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.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { TabProps } from "./types";
3
- declare const DxcTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLAnchorElement>>;
4
- export default DxcTab;