@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.
- package/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +26 -6
- package/HalstackContext.js +9 -34
- package/README.md +47 -0
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.js +1 -2
- package/common/utils.js +2 -8
- package/common/variables.d.ts +23 -6
- package/common/variables.js +25 -15
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +131 -220
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +293 -342
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +4 -0
- package/image/Image.js +70 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -51
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +700 -412
- package/number-input/types.d.ts +11 -5
- package/package.json +28 -26
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -126
- package/password-input/PasswordInput.stories.tsx +1 -32
- package/password-input/PasswordInput.test.js +157 -140
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +182 -263
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +91 -105
- package/toggle-group/ToggleGroup.stories.tsx +7 -4
- package/toggle-group/ToggleGroup.test.js +68 -87
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +20 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → image}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/switch/Switch.test.js
CHANGED
|
@@ -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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
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
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
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
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
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
|
-
|
|
2
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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;
|
package/table/Table.test.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
3
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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);
|