@dxc-technology/halstack-react 10.0.0 → 11.0.0

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 (219) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +5 -17
  3. package/HalstackContext.d.ts +26 -6
  4. package/HalstackContext.js +9 -34
  5. package/README.md +47 -0
  6. package/accordion/Accordion.js +21 -58
  7. package/accordion/Accordion.stories.tsx +1 -15
  8. package/accordion/Accordion.test.js +18 -33
  9. package/accordion/types.d.ts +5 -5
  10. package/accordion-group/AccordionGroup.js +15 -42
  11. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  12. package/accordion-group/AccordionGroup.test.js +42 -60
  13. package/accordion-group/AccordionGroupAccordion.js +9 -21
  14. package/accordion-group/types.d.ts +6 -6
  15. package/alert/Alert.js +14 -46
  16. package/alert/Alert.test.js +28 -45
  17. package/alert/types.d.ts +5 -5
  18. package/badge/Badge.js +4 -17
  19. package/badge/types.d.ts +1 -1
  20. package/bleed/Bleed.js +13 -21
  21. package/bleed/types.d.ts +2 -2
  22. package/box/Box.js +10 -29
  23. package/box/Box.test.js +1 -6
  24. package/box/types.d.ts +3 -3
  25. package/bulleted-list/BulletedList.js +7 -33
  26. package/bulleted-list/BulletedList.stories.tsx +1 -91
  27. package/bulleted-list/types.d.ts +5 -5
  28. package/button/Button.js +23 -46
  29. package/button/Button.stories.tsx +5 -86
  30. package/button/Button.test.js +11 -21
  31. package/button/types.d.ts +4 -4
  32. package/card/Card.js +21 -44
  33. package/card/Card.test.js +10 -21
  34. package/card/types.d.ts +5 -5
  35. package/checkbox/Checkbox.js +81 -111
  36. package/checkbox/Checkbox.stories.tsx +16 -54
  37. package/checkbox/Checkbox.test.js +107 -63
  38. package/checkbox/types.d.ts +8 -4
  39. package/chip/Chip.js +12 -31
  40. package/chip/Chip.test.js +15 -28
  41. package/chip/types.d.ts +4 -4
  42. package/common/coreTokens.js +1 -2
  43. package/common/utils.js +2 -8
  44. package/common/variables.d.ts +23 -6
  45. package/common/variables.js +25 -15
  46. package/date-input/Calendar.js +13 -57
  47. package/date-input/DateInput.js +50 -96
  48. package/date-input/DateInput.stories.tsx +11 -30
  49. package/date-input/DateInput.test.js +674 -701
  50. package/date-input/DatePicker.js +11 -42
  51. package/date-input/Icons.d.ts +6 -6
  52. package/date-input/Icons.js +6 -23
  53. package/date-input/YearPicker.js +8 -34
  54. package/date-input/types.d.ts +27 -21
  55. package/dialog/Dialog.js +11 -35
  56. package/dialog/Dialog.test.js +125 -187
  57. package/dialog/types.d.ts +18 -13
  58. package/dropdown/Dropdown.js +39 -93
  59. package/dropdown/Dropdown.test.js +391 -378
  60. package/dropdown/DropdownMenu.js +8 -19
  61. package/dropdown/DropdownMenuItem.js +5 -17
  62. package/dropdown/types.d.ts +17 -19
  63. package/file-input/FileInput.js +131 -220
  64. package/file-input/FileInput.stories.tsx +1 -1
  65. package/file-input/FileInput.test.js +293 -342
  66. package/file-input/FileItem.js +12 -39
  67. package/file-input/types.d.ts +9 -9
  68. package/flex/Flex.js +25 -39
  69. package/flex/types.d.ts +6 -6
  70. package/footer/Footer.js +9 -39
  71. package/footer/Footer.stories.tsx +8 -7
  72. package/footer/Footer.test.js +18 -32
  73. package/footer/Icons.d.ts +2 -2
  74. package/footer/Icons.js +2 -7
  75. package/footer/types.d.ts +13 -13
  76. package/grid/Grid.js +1 -16
  77. package/grid/types.d.ts +10 -10
  78. package/header/Header.d.ts +1 -1
  79. package/header/Header.js +19 -64
  80. package/header/Header.test.js +12 -25
  81. package/header/Icons.d.ts +2 -2
  82. package/header/Icons.js +2 -7
  83. package/header/types.d.ts +5 -7
  84. package/heading/Heading.js +9 -31
  85. package/heading/Heading.test.js +70 -87
  86. package/heading/types.d.ts +7 -7
  87. package/image/Image.d.ts +4 -0
  88. package/image/Image.js +70 -0
  89. package/image/Image.stories.tsx +127 -0
  90. package/image/types.d.ts +72 -0
  91. package/inset/Inset.js +13 -21
  92. package/inset/types.d.ts +2 -2
  93. package/layout/ApplicationLayout.d.ts +1 -1
  94. package/layout/ApplicationLayout.js +25 -65
  95. package/layout/ApplicationLayout.stories.tsx +1 -1
  96. package/layout/Icons.d.ts +8 -5
  97. package/layout/Icons.js +51 -59
  98. package/layout/SidenavContext.d.ts +1 -1
  99. package/layout/SidenavContext.js +3 -9
  100. package/layout/types.d.ts +3 -3
  101. package/link/Link.js +21 -42
  102. package/link/Link.test.js +23 -41
  103. package/link/types.d.ts +14 -14
  104. package/main.d.ts +3 -2
  105. package/main.js +10 -51
  106. package/nav-tabs/NavTabs.js +11 -43
  107. package/nav-tabs/NavTabs.stories.tsx +1 -1
  108. package/nav-tabs/NavTabs.test.js +36 -43
  109. package/nav-tabs/Tab.js +16 -45
  110. package/nav-tabs/types.d.ts +9 -9
  111. package/number-input/NumberInput.d.ts +7 -0
  112. package/number-input/NumberInput.js +26 -35
  113. package/number-input/NumberInput.stories.tsx +42 -26
  114. package/number-input/NumberInput.test.js +700 -412
  115. package/number-input/types.d.ts +11 -5
  116. package/package.json +28 -26
  117. package/paginator/Icons.d.ts +5 -5
  118. package/paginator/Icons.js +5 -19
  119. package/paginator/Paginator.js +14 -39
  120. package/paginator/Paginator.test.js +224 -207
  121. package/paginator/types.d.ts +3 -3
  122. package/paragraph/Paragraph.js +3 -14
  123. package/paragraph/Paragraph.stories.tsx +0 -17
  124. package/password-input/Icons.d.ts +6 -0
  125. package/password-input/Icons.js +35 -0
  126. package/password-input/PasswordInput.js +57 -126
  127. package/password-input/PasswordInput.stories.tsx +1 -32
  128. package/password-input/PasswordInput.test.js +157 -140
  129. package/password-input/types.d.ts +8 -7
  130. package/progress-bar/ProgressBar.js +16 -42
  131. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  132. package/progress-bar/ProgressBar.test.js +35 -52
  133. package/progress-bar/types.d.ts +3 -3
  134. package/quick-nav/QuickNav.js +4 -27
  135. package/quick-nav/QuickNav.stories.tsx +1 -1
  136. package/quick-nav/types.d.ts +10 -10
  137. package/radio-group/Radio.d.ts +1 -1
  138. package/radio-group/Radio.js +22 -54
  139. package/radio-group/RadioGroup.js +37 -83
  140. package/radio-group/RadioGroup.stories.tsx +10 -10
  141. package/radio-group/RadioGroup.test.js +504 -470
  142. package/radio-group/types.d.ts +8 -8
  143. package/resultset-table/Icons.d.ts +7 -0
  144. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  145. package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
  146. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  147. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  148. package/select/Icons.d.ts +7 -7
  149. package/select/Icons.js +1 -5
  150. package/select/Listbox.js +13 -39
  151. package/select/Option.js +9 -26
  152. package/select/Select.js +54 -138
  153. package/select/Select.stories.tsx +3 -3
  154. package/select/Select.test.js +1906 -1800
  155. package/select/types.d.ts +14 -15
  156. package/sidenav/Icons.d.ts +4 -4
  157. package/sidenav/Icons.js +1 -5
  158. package/sidenav/Sidenav.js +24 -63
  159. package/sidenav/Sidenav.test.js +3 -10
  160. package/sidenav/types.d.ts +18 -18
  161. package/slider/Slider.js +38 -86
  162. package/slider/Slider.test.js +107 -103
  163. package/slider/types.d.ts +4 -4
  164. package/spinner/Spinner.js +10 -40
  165. package/spinner/Spinner.test.js +25 -34
  166. package/spinner/types.d.ts +3 -3
  167. package/switch/Switch.js +26 -69
  168. package/switch/Switch.stories.tsx +0 -34
  169. package/switch/Switch.test.js +51 -96
  170. package/switch/types.d.ts +4 -4
  171. package/table/Table.js +4 -23
  172. package/table/Table.test.js +1 -6
  173. package/table/types.d.ts +8 -8
  174. package/tabs/Tab.js +10 -29
  175. package/tabs/Tabs.js +48 -124
  176. package/tabs/Tabs.test.js +62 -118
  177. package/tabs/types.d.ts +19 -19
  178. package/tag/Tag.js +21 -51
  179. package/tag/Tag.test.js +19 -30
  180. package/tag/types.d.ts +7 -7
  181. package/text-input/Icons.d.ts +5 -5
  182. package/text-input/Icons.js +1 -5
  183. package/text-input/Suggestion.js +9 -26
  184. package/text-input/Suggestions.d.ts +1 -1
  185. package/text-input/Suggestions.js +12 -57
  186. package/text-input/TextInput.js +182 -263
  187. package/text-input/TextInput.stories.tsx +48 -152
  188. package/text-input/TextInput.test.js +1210 -1194
  189. package/text-input/types.d.ts +25 -17
  190. package/textarea/Textarea.js +60 -96
  191. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
  192. package/textarea/Textarea.test.js +150 -179
  193. package/textarea/types.d.ts +9 -5
  194. package/toggle-group/ToggleGroup.js +91 -105
  195. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  196. package/toggle-group/ToggleGroup.test.js +68 -87
  197. package/toggle-group/types.d.ts +26 -17
  198. package/typography/Typography.js +4 -13
  199. package/typography/types.d.ts +1 -1
  200. package/useTheme.d.ts +20 -3
  201. package/useTheme.js +1 -8
  202. package/useTranslatedLabels.js +1 -7
  203. package/utils/BaseTypography.d.ts +2 -2
  204. package/utils/BaseTypography.js +16 -30
  205. package/utils/FocusLock.js +12 -36
  206. package/wizard/Wizard.js +14 -49
  207. package/wizard/Wizard.test.js +53 -80
  208. package/wizard/types.d.ts +6 -6
  209. package/number-input/NumberInputContext.d.ts +0 -4
  210. package/number-input/NumberInputContext.js +0 -19
  211. package/number-input/numberInputContextTypes.d.ts +0 -19
  212. package/resultsetTable/Icons.d.ts +0 -7
  213. package/slider/Slider.stories.tsx +0 -240
  214. /package/{resultsetTable → image}/types.js +0 -0
  215. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  216. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  217. /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
  218. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  219. /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
@@ -1,186 +1,143 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Switch = _interopRequireDefault(require("./Switch.tsx"));
10
-
11
7
  describe("Switch component tests", function () {
12
8
  test("Switch renders with correct text", function () {
13
9
  var onChange = jest.fn(function (returnedValue) {
14
10
  expect(returnedValue).toBe(true);
15
11
  });
16
-
17
12
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
18
- label: "SwitchComponent",
19
- checked: false,
20
- onChange: onChange
21
- })),
22
- getByText = _render.getByText;
23
-
13
+ label: "SwitchComponent",
14
+ checked: false,
15
+ onChange: onChange
16
+ })),
17
+ getByText = _render.getByText;
24
18
  expect(getByText("SwitchComponent")).toBeTruthy();
25
19
  });
26
20
  test("Calls correct function on click", function () {
27
21
  var onChange = jest.fn();
28
-
29
22
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
30
- label: "SwitchComponent",
31
- checked: false,
32
- onChange: onChange
33
- })),
34
- getByText = _render2.getByText;
35
-
23
+ label: "SwitchComponent",
24
+ checked: false,
25
+ onChange: onChange
26
+ })),
27
+ getByText = _render2.getByText;
36
28
  _react2.fireEvent.click(getByText("SwitchComponent"));
37
-
38
29
  expect(onChange).toHaveBeenCalled();
39
30
  });
40
31
  test("Calls correct function on key down", function () {
41
32
  var onChange = jest.fn();
42
-
43
33
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
44
- label: "SwitchComponent",
45
- checked: false,
46
- onChange: onChange
47
- })),
48
- getByText = _render3.getByText;
49
-
34
+ label: "SwitchComponent",
35
+ checked: false,
36
+ onChange: onChange
37
+ })),
38
+ getByText = _render3.getByText;
50
39
  _react2.fireEvent.focus(getByText("SwitchComponent"));
51
-
52
40
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
53
41
  key: "Enter"
54
42
  });
55
-
56
43
  expect(onChange).toHaveBeenCalled();
57
-
58
44
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
59
45
  key: " "
60
46
  });
61
-
62
47
  expect(onChange).toHaveBeenCalled();
63
48
  });
64
49
  test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
65
50
  var onChange = jest.fn();
66
-
67
51
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
68
- label: "SwitchComponent",
69
- checked: false,
70
- onChange: onChange
71
- })),
72
- getByText = _render4.getByText;
73
-
52
+ label: "SwitchComponent",
53
+ checked: false,
54
+ onChange: onChange
55
+ })),
56
+ getByText = _render4.getByText;
74
57
  _react2.fireEvent.click(getByText("SwitchComponent"));
75
-
76
58
  _react2.fireEvent.click(getByText("SwitchComponent"));
77
-
78
59
  expect(onChange.mock.calls[0][0]).toBe(true);
79
60
  expect(onChange.mock.calls[1][0]).toBe(true);
80
61
  });
81
62
  test("Everytime the user use enter in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
82
63
  var onChange = jest.fn();
83
-
84
64
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
85
- label: "SwitchComponent",
86
- checked: false,
87
- onChange: onChange
88
- })),
89
- getByText = _render5.getByText;
90
-
65
+ label: "SwitchComponent",
66
+ checked: false,
67
+ onChange: onChange
68
+ })),
69
+ getByText = _render5.getByText;
91
70
  _react2.fireEvent.focus(getByText("SwitchComponent"));
92
-
93
71
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
94
72
  key: "Enter"
95
73
  });
96
-
97
74
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
98
75
  key: "Enter"
99
76
  });
100
-
101
77
  expect(onChange.mock.calls[0][0]).toBe(true);
102
78
  expect(onChange.mock.calls[1][0]).toBe(true);
103
79
  });
104
80
  test("Everytime the user use space in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
105
81
  var onChange = jest.fn();
106
-
107
82
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
108
- label: "SwitchComponent",
109
- checked: false,
110
- onChange: onChange
111
- })),
112
- getByText = _render6.getByText;
113
-
83
+ label: "SwitchComponent",
84
+ checked: false,
85
+ onChange: onChange
86
+ })),
87
+ getByText = _render6.getByText;
114
88
  _react2.fireEvent.focus(getByText("SwitchComponent"));
115
-
116
89
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
117
90
  key: " "
118
91
  });
119
-
120
92
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
121
93
  key: " "
122
94
  });
123
-
124
95
  expect(onChange.mock.calls[0][0]).toBe(true);
125
96
  expect(onChange.mock.calls[1][0]).toBe(true);
126
97
  });
127
98
  test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
128
99
  var onChange = jest.fn();
129
-
130
100
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
131
- label: "SwitchComponent",
132
- onChange: onChange
133
- })),
134
- getByText = _render7.getByText;
135
-
101
+ label: "SwitchComponent",
102
+ onChange: onChange
103
+ })),
104
+ getByText = _render7.getByText;
136
105
  _react2.fireEvent.click(getByText("SwitchComponent"));
137
-
138
106
  _react2.fireEvent.click(getByText("SwitchComponent"));
139
-
140
107
  expect(onChange.mock.calls[0][0]).toBe(true);
141
108
  expect(onChange.mock.calls[1][0]).toBe(false);
142
109
  });
143
110
  test("Everytime the user use enter in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
144
111
  var onChange = jest.fn();
145
-
146
112
  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
147
- label: "SwitchComponent",
148
- onChange: onChange
149
- })),
150
- getByText = _render8.getByText;
151
-
113
+ label: "SwitchComponent",
114
+ onChange: onChange
115
+ })),
116
+ getByText = _render8.getByText;
152
117
  _react2.fireEvent.focus(getByText("SwitchComponent"));
153
-
154
118
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
155
119
  key: "Enter"
156
120
  });
157
-
158
121
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
159
122
  key: "Enter"
160
123
  });
161
-
162
124
  expect(onChange.mock.calls[0][0]).toBe(true);
163
125
  expect(onChange.mock.calls[1][0]).toBe(false);
164
126
  });
165
127
  test("Everytime the user use space in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
166
128
  var onChange = jest.fn();
167
-
168
129
  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
169
- label: "SwitchComponent",
170
- onChange: onChange
171
- })),
172
- getByText = _render9.getByText;
173
-
130
+ label: "SwitchComponent",
131
+ onChange: onChange
132
+ })),
133
+ getByText = _render9.getByText;
174
134
  _react2.fireEvent.focus(getByText("SwitchComponent"));
175
-
176
135
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
177
136
  key: " "
178
137
  });
179
-
180
138
  _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
181
139
  key: " "
182
140
  });
183
-
184
141
  expect(onChange.mock.calls[0][0]).toBe(true);
185
142
  expect(onChange.mock.calls[1][0]).toBe(false);
186
143
  });
@@ -198,11 +155,10 @@ describe("Switch component tests", function () {
198
155
  });
199
156
  test("Renders with correct aria attributes", function () {
200
157
  var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
201
- label: "Default label"
202
- })),
203
- getByText = _render10.getByText,
204
- getByRole = _render10.getByRole;
205
-
158
+ label: "Default label"
159
+ })),
160
+ getByText = _render10.getByText,
161
+ getByRole = _render10.getByRole;
206
162
  var switchEl = getByRole("switch");
207
163
  var label = getByText("Default label");
208
164
  expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
@@ -210,12 +166,11 @@ describe("Switch component tests", function () {
210
166
  });
211
167
  test("Renders disabled switch correctly", function () {
212
168
  var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
213
- label: "Default label",
214
- disabled: true
215
- })),
216
- getByText = _render11.getByText,
217
- getByRole = _render11.getByRole;
218
-
169
+ label: "Default label",
170
+ disabled: true
171
+ })),
172
+ getByText = _render11.getByText,
173
+ getByRole = _render11.getByRole;
219
174
  var switchEl = getByRole("switch");
220
175
  var label = getByText("Default label");
221
176
  expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
package/switch/types.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
3
  top?: Space;
4
4
  bottom?: Space;
5
5
  left?: Space;
6
6
  right?: Space;
7
7
  };
8
- declare type Props = {
8
+ type Props = {
9
9
  /**
10
10
  * Initial state of the switch, only when it is uncontrolled.
11
11
  */
@@ -62,5 +62,5 @@ declare type Props = {
62
62
  /**
63
63
  * Reference to the component.
64
64
  */
65
- export declare type RefType = HTMLDivElement;
65
+ export type RefType = HTMLDivElement;
66
66
  export default Props;
package/table/Table.js CHANGED
@@ -1,39 +1,25 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
11
  var _react = _interopRequireDefault(require("react"));
17
-
18
12
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
13
  var _variables = require("../common/variables");
21
-
22
14
  var _utils = require("../common/utils");
23
-
24
15
  var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
16
  var _BackgroundColorContext = require("../BackgroundColorContext");
27
-
28
17
  var _templateObject, _templateObject2;
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 || _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; }
33
-
18
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
34
20
  var DxcTable = function DxcTable(_ref) {
35
21
  var children = _ref.children,
36
- margin = _ref.margin;
22
+ margin = _ref.margin;
37
23
  var colorsTheme = (0, _useTheme["default"])();
38
24
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
39
25
  theme: colorsTheme.table
@@ -43,11 +29,9 @@ var DxcTable = function DxcTable(_ref) {
43
29
  color: colorsTheme.table.dataBackgroundColor
44
30
  }, children))));
45
31
  };
46
-
47
32
  var calculateWidth = function calculateWidth(margin) {
48
33
  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
49
34
  };
50
-
51
35
  var DxcTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n overflow: auto;\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 6px;\n }\n &::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 6px;\n }\n"])), function (props) {
52
36
  return calculateWidth(props.margin);
53
37
  }, function (props) {
@@ -65,7 +49,6 @@ var DxcTableContainer = _styledComponents["default"].div(_templateObject || (_te
65
49
  }, function (props) {
66
50
  return props.theme.scrollBarTrackColor;
67
51
  });
68
-
69
52
  var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n height: 60px;\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th:first-child {\n border-top-left-radius: ", ";\n }\n & th:last-child {\n border-top-right-radius: ", ";\n }\n & td:last-child {\n padding-right: 40px;\n }\n"])), function (props) {
70
53
  return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
71
54
  }, function (props) {
@@ -113,6 +96,4 @@ var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_t
113
96
  }, function (props) {
114
97
  return props.theme.headerBorderRadius;
115
98
  });
116
-
117
- var _default = DxcTable;
118
- exports["default"] = _default;
99
+ var _default = exports["default"] = DxcTable;
@@ -1,18 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Table = _interopRequireDefault(require("./Table.tsx"));
10
-
11
7
  describe("Table component tests", function () {
12
8
  test("Table renders with correct content", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "header-1"), /*#__PURE__*/_react["default"].createElement("th", null, "header-2"), /*#__PURE__*/_react["default"].createElement("th", null, "header-3"))), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-1"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-2"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-3")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-4"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-5"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-6"))))),
14
- getByText = _render.getByText;
15
-
10
+ getByText = _render.getByText;
16
11
  expect(getByText("header-1")).toBeTruthy();
17
12
  expect(getByText("header-2")).toBeTruthy();
18
13
  expect(getByText("header-3")).toBeTruthy();
package/table/types.d.ts CHANGED
@@ -1,21 +1,21 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
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;
9
+ type Props = {
15
10
  /**
16
11
  * The center section of the table. Can be used to render custom
17
12
  * content in this area.
18
13
  */
19
14
  children: React.ReactNode;
15
+ /**
16
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
17
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
18
+ */
19
+ margin?: Space | Margin;
20
20
  };
21
21
  export default Props;
package/tabs/Tab.js CHANGED
@@ -1,41 +1,29 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
-
18
12
  var _Badge = _interopRequireDefault(require("../badge/Badge"));
19
-
20
13
  var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
21
-
22
14
  var _useTheme = _interopRequireDefault(require("../useTheme"));
23
-
24
15
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
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
-
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
30
18
  var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
31
19
  var active = _ref.active,
32
- tab = _ref.tab,
33
- tabIndex = _ref.tabIndex,
34
- hasLabelAndIcon = _ref.hasLabelAndIcon,
35
- iconPosition = _ref.iconPosition,
36
- _onClick = _ref.onClick,
37
- _onMouseEnter = _ref.onMouseEnter,
38
- _onMouseLeave = _ref.onMouseLeave;
20
+ tab = _ref.tab,
21
+ tabIndex = _ref.tabIndex,
22
+ hasLabelAndIcon = _ref.hasLabelAndIcon,
23
+ iconPosition = _ref.iconPosition,
24
+ _onClick = _ref.onClick,
25
+ _onMouseEnter = _ref.onMouseEnter,
26
+ _onMouseLeave = _ref.onMouseLeave;
39
27
  var colorsTheme = (0, _useTheme["default"])();
40
28
  return /*#__PURE__*/_react["default"].createElement(TabContainer, {
41
29
  role: "tab",
@@ -80,7 +68,6 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
80
68
  notificationText: typeof tab.notificationNumber === "number" && tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
81
69
  })));
82
70
  });
83
-
84
71
  var TabContainer = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n text-transform: ", ";\n overflow: hidden;\n flex-shrink: 0;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n user-select: none;\n vertical-align: middle;\n justify-content: center;\n min-width: 90px;\n max-width: 360px;\n padding: ", ";\n height: ", ";\n min-height: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:focus {\n outline: ", " solid 1px;\n outline-offset: -1px;\n }\n svg {\n color: ", ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ", ";\n svg {\n color: ", ";\n }\n opacity: 1;\n }\n\n &:disabled {\n background-color: ", " !important;\n cursor: not-allowed !important;\n pointer-events: all;\n font-style: ", ";\n outline: none !important;\n\n svg {\n color: ", ";\n }\n > div {\n opacity: 0.5;\n }\n }\n"])), function (props) {
85
72
  return props.theme.fontTextTransform;
86
73
  }, function (props) {
@@ -110,23 +97,17 @@ var TabContainer = _styledComponents["default"].button(_templateObject || (_temp
110
97
  }, function (props) {
111
98
  return props.theme.disabledIconColor;
112
99
  });
113
-
114
100
  var BadgeContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
115
101
  return props.hasLabelAndIcon && props.iconPosition === "top" ? "flex-start" : "center";
116
102
  });
117
-
118
103
  var MainLabelContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n margin-left: ", ";\n"])), function (props) {
119
104
  return props.hasLabelAndIcon && props.iconPosition === "top" && "column" || "row";
120
105
  }, function (props) {
121
106
  return props.notificationNumber ? typeof props.notificationNumber === "number" ? "calc(".concat(props.theme.badgeWidthWithNotificationNumber, " + 12px)") : "calc(".concat(props.theme.badgeWidth, " + 12px)") : "unset";
122
107
  });
123
-
124
108
  var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n margin-bottom: ", ";\n margin-right: ", ";\n\n img,\n svg {\n height: 22px;\n width: 22px;\n }\n"])), function (props) {
125
109
  return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";
126
110
  }, function (props) {
127
111
  return props.hasLabelAndIcon && props.iconPosition === "left" && "12px" || "";
128
112
  });
129
-
130
- var _default = /*#__PURE__*/_react["default"].memo(Tab);
131
-
132
- exports["default"] = _default;
113
+ var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(Tab);