@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370
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 +3 -3
- package/BackgroundColorContext.js +12 -2
- package/HalstackContext.d.ts +1330 -7
- package/HalstackContext.js +84 -67
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +74 -55
- package/accordion/Accordion.stories.tsx +3 -101
- package/accordion/Accordion.test.js +34 -19
- package/accordion/types.d.ts +4 -16
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +49 -42
- package/accordion-group/AccordionGroup.stories.tsx +77 -76
- package/accordion-group/AccordionGroup.test.js +62 -54
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +6 -18
- package/alert/Alert.js +47 -20
- package/alert/Alert.test.js +46 -29
- package/alert/types.d.ts +3 -3
- package/badge/Badge.js +14 -2
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +21 -13
- package/bleed/Bleed.stories.tsx +1 -0
- package/bleed/types.d.ts +2 -2
- package/box/Box.d.ts +1 -1
- package/box/Box.js +33 -33
- package/box/Box.stories.tsx +25 -53
- package/box/Box.test.js +7 -2
- package/box/types.d.ts +3 -15
- package/bulleted-list/BulletedList.js +36 -9
- package/bulleted-list/BulletedList.stories.tsx +7 -1
- package/bulleted-list/types.d.ts +32 -5
- package/button/Button.d.ts +1 -1
- package/button/Button.js +83 -71
- package/button/Button.stories.tsx +4 -4
- package/button/Button.test.js +28 -8
- package/button/types.d.ts +8 -4
- package/card/Card.d.ts +1 -1
- package/card/Card.js +67 -62
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +22 -11
- package/card/types.d.ts +4 -10
- package/checkbox/Checkbox.js +71 -27
- package/checkbox/Checkbox.test.js +60 -33
- package/checkbox/types.d.ts +4 -4
- package/chip/Chip.js +51 -48
- package/chip/Chip.stories.tsx +25 -17
- package/chip/Chip.test.js +29 -17
- package/chip/types.d.ts +4 -4
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/utils.d.ts +1 -0
- package/common/utils.js +8 -3
- package/common/variables.d.ts +226 -175
- package/common/variables.js +956 -1133
- package/date-input/Calendar.js +55 -12
- package/date-input/DateInput.js +82 -35
- package/date-input/DateInput.test.js +351 -164
- package/date-input/DatePicker.js +38 -8
- package/date-input/Icons.js +12 -0
- package/date-input/YearPicker.js +30 -5
- package/date-input/types.d.ts +7 -7
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +83 -86
- package/dialog/Dialog.stories.tsx +127 -221
- package/dialog/Dialog.test.js +331 -18
- package/dialog/types.d.ts +1 -14
- package/dropdown/Dropdown.js +86 -32
- package/dropdown/Dropdown.test.js +211 -104
- package/dropdown/DropdownMenu.js +22 -8
- package/dropdown/DropdownMenuItem.js +15 -6
- package/dropdown/types.d.ts +8 -8
- package/file-input/FileInput.js +218 -134
- package/file-input/FileInput.test.js +343 -331
- package/file-input/FileItem.js +39 -12
- package/file-input/types.d.ts +10 -10
- package/flex/Flex.js +39 -25
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +74 -9
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +80 -68
- package/footer/Footer.stories.tsx +12 -89
- package/footer/Footer.test.js +47 -40
- package/footer/Icons.js +4 -0
- package/footer/types.d.ts +15 -17
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +72 -55
- package/header/Header.stories.tsx +7 -71
- package/header/Header.test.js +26 -13
- package/header/Icons.js +4 -0
- package/header/types.d.ts +2 -16
- package/heading/Heading.js +28 -7
- package/heading/Heading.test.js +88 -71
- package/heading/types.d.ts +3 -3
- package/inset/Inset.js +21 -13
- package/inset/Inset.stories.tsx +2 -1
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +5 -5
- package/layout/ApplicationLayout.js +57 -15
- package/layout/Icons.js +10 -0
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +4 -0
- package/layout/types.d.ts +5 -6
- package/link/Link.js +41 -21
- package/link/Link.test.js +42 -26
- package/link/types.d.ts +4 -4
- package/main.d.ts +2 -1
- package/main.js +55 -0
- package/nav-tabs/NavTabs.d.ts +2 -2
- package/nav-tabs/NavTabs.js +43 -16
- package/nav-tabs/NavTabs.stories.tsx +14 -0
- package/nav-tabs/NavTabs.test.js +44 -37
- package/nav-tabs/Tab.js +71 -45
- package/nav-tabs/types.d.ts +10 -11
- package/number-input/NumberInput.js +30 -20
- package/number-input/NumberInput.test.js +249 -113
- package/number-input/NumberInputContext.js +5 -0
- package/number-input/numberInputContextTypes.d.ts +1 -1
- package/number-input/types.d.ts +4 -4
- package/package.json +7 -7
- package/paginator/Icons.js +10 -0
- package/paginator/Paginator.js +39 -17
- package/paginator/Paginator.test.js +156 -104
- package/paginator/types.d.ts +1 -1
- package/paragraph/Paragraph.d.ts +3 -4
- package/paragraph/Paragraph.js +18 -8
- package/password-input/PasswordInput.js +51 -22
- package/password-input/PasswordInput.test.js +94 -51
- package/password-input/types.d.ts +4 -4
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +39 -14
- package/progress-bar/ProgressBar.test.js +53 -36
- package/progress-bar/types.d.ts +4 -3
- package/quick-nav/QuickNav.js +24 -2
- package/quick-nav/types.d.ts +2 -2
- package/radio-group/Radio.js +53 -22
- package/radio-group/RadioGroup.js +84 -41
- package/radio-group/RadioGroup.test.js +288 -186
- package/radio-group/types.d.ts +4 -4
- package/resultsetTable/Icons.js +3 -0
- package/resultsetTable/ResultsetTable.js +56 -21
- package/resultsetTable/ResultsetTable.test.js +75 -42
- package/resultsetTable/types.d.ts +5 -5
- package/select/Icons.js +3 -0
- package/select/Listbox.js +35 -10
- package/select/Option.js +24 -8
- package/select/Select.js +143 -56
- package/select/Select.test.js +839 -456
- package/select/types.d.ts +12 -12
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +116 -104
- package/sidenav/Sidenav.stories.tsx +60 -60
- package/sidenav/Sidenav.test.js +10 -3
- package/sidenav/types.d.ts +26 -23
- package/slider/Slider.js +84 -38
- package/slider/Slider.test.js +104 -76
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +51 -28
- package/spinner/Spinner.stories.jsx +28 -28
- package/spinner/Spinner.test.js +35 -26
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +66 -24
- package/switch/Switch.test.js +97 -52
- package/switch/types.d.ts +4 -4
- package/table/Table.js +22 -4
- package/table/Table.test.js +7 -2
- package/table/types.d.ts +3 -3
- package/tabs/Tab.js +39 -22
- package/tabs/Tabs.js +131 -62
- package/tabs/Tabs.test.js +122 -67
- package/tabs/types.d.ts +8 -8
- package/tag/Tag.js +54 -27
- package/tag/Tag.test.js +31 -20
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.js +3 -0
- package/text-input/Suggestion.js +24 -8
- package/text-input/Suggestions.js +36 -11
- package/text-input/TextInput.js +144 -59
- package/text-input/TextInput.stories.tsx +1 -1
- package/text-input/TextInput.test.js +858 -539
- package/text-input/types.d.ts +9 -9
- package/textarea/Textarea.js +73 -38
- package/textarea/Textarea.test.js +173 -98
- package/textarea/types.d.ts +4 -4
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +59 -21
- package/toggle-group/ToggleGroup.test.js +72 -40
- package/toggle-group/types.d.ts +11 -11
- package/typography/Typography.d.ts +2 -2
- package/typography/Typography.js +23 -110
- package/typography/Typography.stories.tsx +1 -1
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +1234 -1
- package/useTheme.js +6 -0
- package/useTranslatedLabels.d.ts +84 -2
- package/useTranslatedLabels.js +5 -0
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +138 -0
- package/wizard/Wizard.js +47 -13
- package/wizard/Wizard.test.js +81 -54
- package/wizard/types.d.ts +7 -8
- package/card/ice-cream.jpg +0 -0
- package/translatedLabelsType.d.ts +0 -82
- /package/{translatedLabelsType.js → grid/types.js} +0 -0
|
@@ -1,35 +1,43 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
5
7
|
var _react2 = require("@testing-library/react");
|
|
8
|
+
|
|
6
9
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
7
|
-
|
|
10
|
+
|
|
11
|
+
var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
|
|
12
|
+
|
|
8
13
|
describe("Textarea component tests", function () {
|
|
9
14
|
test("Renders with correct label", function () {
|
|
10
15
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
label: "Example label"
|
|
17
|
+
})),
|
|
18
|
+
getByText = _render.getByText;
|
|
19
|
+
|
|
14
20
|
expect(getByText("Example label")).toBeTruthy();
|
|
15
21
|
});
|
|
16
22
|
test("Renders with correct label and helper text", function () {
|
|
17
23
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
label: "Example label",
|
|
25
|
+
helperText: "Example helper text"
|
|
26
|
+
})),
|
|
27
|
+
getByText = _render2.getByText;
|
|
28
|
+
|
|
22
29
|
expect(getByText("Example label")).toBeTruthy();
|
|
23
30
|
expect(getByText("Example helper text")).toBeTruthy();
|
|
24
31
|
});
|
|
25
32
|
test("Renders with correct label and optional", function () {
|
|
26
33
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
label: "Example label",
|
|
35
|
+
helperText: "Example helper text",
|
|
36
|
+
optional: true
|
|
37
|
+
})),
|
|
38
|
+
getByText = _render3.getByText,
|
|
39
|
+
getByRole = _render3.getByRole;
|
|
40
|
+
|
|
33
41
|
var textarea = getByRole("textbox");
|
|
34
42
|
expect(getByText("Example label")).toBeTruthy();
|
|
35
43
|
expect(getByText("(Optional)")).toBeTruthy();
|
|
@@ -38,19 +46,21 @@ describe("Textarea component tests", function () {
|
|
|
38
46
|
});
|
|
39
47
|
test("Renders with correct placeholder", function () {
|
|
40
48
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
placeholder: "Placeholder"
|
|
50
|
+
})),
|
|
51
|
+
getByRole = _render4.getByRole;
|
|
52
|
+
|
|
44
53
|
var textarea = getByRole("textbox");
|
|
45
54
|
expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
|
|
46
55
|
});
|
|
47
56
|
test("Renders with error message and correct aria attributes", function () {
|
|
48
57
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
label: "Example label",
|
|
59
|
+
error: "Error message."
|
|
60
|
+
})),
|
|
61
|
+
getByText = _render5.getByText,
|
|
62
|
+
getByLabelText = _render5.getByLabelText;
|
|
63
|
+
|
|
54
64
|
var textarea = getByLabelText("Example label");
|
|
55
65
|
var errorMessage = getByText("Error message.");
|
|
56
66
|
expect(errorMessage).toBeTruthy();
|
|
@@ -60,71 +70,84 @@ describe("Textarea component tests", function () {
|
|
|
60
70
|
});
|
|
61
71
|
test("Renders with correct default rows", function () {
|
|
62
72
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
73
|
+
label: "Example label",
|
|
74
|
+
rows: 10
|
|
75
|
+
})),
|
|
76
|
+
getByLabelText = _render6.getByLabelText;
|
|
77
|
+
|
|
67
78
|
var textarea = getByLabelText("Example label");
|
|
68
79
|
expect(textarea.rows).toBe(10);
|
|
69
80
|
});
|
|
70
81
|
test("Renders with correct accesibility attributes", function () {
|
|
71
82
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
83
|
+
label: "Example label"
|
|
84
|
+
})),
|
|
85
|
+
getByLabelText = _render7.getByLabelText;
|
|
86
|
+
|
|
75
87
|
var textarea = getByLabelText("Example label");
|
|
76
|
-
expect(textarea.getAttribute("aria-disabled")).toBe("false");
|
|
77
88
|
expect(textarea.getAttribute("aria-invalid")).toBe("false");
|
|
78
89
|
expect(textarea.getAttribute("aria-describedBy")).toBeNull();
|
|
79
90
|
expect(textarea.getAttribute("aria-required")).toBe("true");
|
|
80
91
|
});
|
|
81
92
|
test("Renders with correct initial value", function () {
|
|
82
93
|
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
94
|
+
label: "Example label",
|
|
95
|
+
placeholder: "Placeholder",
|
|
96
|
+
defaultValue: "Example text"
|
|
97
|
+
})),
|
|
98
|
+
getByLabelText = _render8.getByLabelText;
|
|
99
|
+
|
|
88
100
|
var textarea = getByLabelText("Example label");
|
|
89
101
|
expect(textarea.value).toBe("Example text");
|
|
90
102
|
});
|
|
91
|
-
test("Disabled textarea
|
|
103
|
+
test("Disabled textarea can not be modified", function () {
|
|
92
104
|
var onChange = jest.fn();
|
|
105
|
+
|
|
93
106
|
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
107
|
+
label: "Example label",
|
|
108
|
+
onChange: onChange,
|
|
109
|
+
disabled: true
|
|
110
|
+
})),
|
|
111
|
+
getByLabelText = _render9.getByLabelText;
|
|
112
|
+
|
|
99
113
|
var textarea = getByLabelText("Example label");
|
|
100
|
-
|
|
114
|
+
|
|
101
115
|
_userEvent["default"].type(textarea, "Test");
|
|
116
|
+
|
|
102
117
|
expect(onChange).not.toHaveBeenCalled();
|
|
103
118
|
});
|
|
104
119
|
test("Not optional constraint (onBlur)", function () {
|
|
105
120
|
var onChange = jest.fn();
|
|
106
121
|
var onBlur = jest.fn();
|
|
122
|
+
|
|
107
123
|
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
124
|
+
label: "Example label",
|
|
125
|
+
placeholder: "Placeholder",
|
|
126
|
+
onChange: onChange,
|
|
127
|
+
onBlur: onBlur
|
|
128
|
+
})),
|
|
129
|
+
getByLabelText = _render10.getByLabelText;
|
|
130
|
+
|
|
114
131
|
var textarea = getByLabelText("Example label");
|
|
132
|
+
|
|
115
133
|
_react2.fireEvent.focus(textarea);
|
|
134
|
+
|
|
116
135
|
_react2.fireEvent.blur(textarea);
|
|
136
|
+
|
|
117
137
|
expect(onBlur).toHaveBeenCalled();
|
|
118
138
|
expect(onBlur).toHaveBeenCalledWith({
|
|
119
139
|
value: "",
|
|
120
140
|
error: "This field is required. Please, enter a value."
|
|
121
141
|
});
|
|
142
|
+
|
|
122
143
|
_react2.fireEvent.change(textarea, {
|
|
123
144
|
target: {
|
|
124
145
|
value: "Test"
|
|
125
146
|
}
|
|
126
147
|
});
|
|
148
|
+
|
|
127
149
|
_react2.fireEvent.blur(textarea);
|
|
150
|
+
|
|
128
151
|
expect(onBlur).toHaveBeenCalled();
|
|
129
152
|
expect(onBlur).toHaveBeenCalledWith({
|
|
130
153
|
value: "Test"
|
|
@@ -132,24 +155,31 @@ describe("Textarea component tests", function () {
|
|
|
132
155
|
});
|
|
133
156
|
test("Not optional constraint (onChange)", function () {
|
|
134
157
|
var onChange = jest.fn();
|
|
158
|
+
|
|
135
159
|
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
160
|
+
label: "Example label",
|
|
161
|
+
placeholder: "Placeholder",
|
|
162
|
+
onChange: onChange
|
|
163
|
+
})),
|
|
164
|
+
getByLabelText = _render11.getByLabelText;
|
|
165
|
+
|
|
141
166
|
var textarea = getByLabelText("Example label");
|
|
167
|
+
|
|
142
168
|
_react2.fireEvent.focus(textarea);
|
|
169
|
+
|
|
143
170
|
_react2.fireEvent.change(textarea, {
|
|
144
171
|
target: {
|
|
145
172
|
value: "Test"
|
|
146
173
|
}
|
|
147
174
|
});
|
|
175
|
+
|
|
148
176
|
expect(onChange).toHaveBeenCalled();
|
|
149
177
|
expect(onChange).toHaveBeenCalledWith({
|
|
150
178
|
value: "Test"
|
|
151
179
|
});
|
|
180
|
+
|
|
152
181
|
_userEvent["default"].clear(textarea);
|
|
182
|
+
|
|
153
183
|
expect(onChange).toHaveBeenCalled();
|
|
154
184
|
expect(onChange).toHaveBeenCalledWith({
|
|
155
185
|
value: "",
|
|
@@ -159,46 +189,57 @@ describe("Textarea component tests", function () {
|
|
|
159
189
|
test("Pattern constraint", function () {
|
|
160
190
|
var onChange = jest.fn();
|
|
161
191
|
var onBlur = jest.fn();
|
|
192
|
+
|
|
162
193
|
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
194
|
+
label: "Example label",
|
|
195
|
+
placeholder: "Placeholder",
|
|
196
|
+
onChange: onChange,
|
|
197
|
+
onBlur: onBlur,
|
|
198
|
+
margin: {
|
|
199
|
+
left: "medium",
|
|
200
|
+
right: "medium"
|
|
201
|
+
},
|
|
202
|
+
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
203
|
+
})),
|
|
204
|
+
getByLabelText = _render12.getByLabelText;
|
|
205
|
+
|
|
174
206
|
var textarea = getByLabelText("Example label");
|
|
207
|
+
|
|
175
208
|
_react2.fireEvent.change(textarea, {
|
|
176
209
|
target: {
|
|
177
210
|
value: "pattern test"
|
|
178
211
|
}
|
|
179
212
|
});
|
|
213
|
+
|
|
180
214
|
expect(onChange).toHaveBeenCalled();
|
|
181
215
|
expect(onChange).toHaveBeenCalledWith({
|
|
182
216
|
value: "pattern test",
|
|
183
217
|
error: "Please match the format requested."
|
|
184
218
|
});
|
|
219
|
+
|
|
185
220
|
_react2.fireEvent.blur(textarea);
|
|
221
|
+
|
|
186
222
|
expect(onBlur).toHaveBeenCalled();
|
|
187
223
|
expect(onBlur).toHaveBeenCalledWith({
|
|
188
224
|
value: "pattern test",
|
|
189
225
|
error: "Please match the format requested."
|
|
190
226
|
});
|
|
227
|
+
|
|
191
228
|
_userEvent["default"].clear(textarea);
|
|
229
|
+
|
|
192
230
|
_react2.fireEvent.change(textarea, {
|
|
193
231
|
target: {
|
|
194
232
|
value: "pattern4&"
|
|
195
233
|
}
|
|
196
234
|
});
|
|
235
|
+
|
|
197
236
|
expect(onChange).toHaveBeenCalled();
|
|
198
237
|
expect(onChange).toHaveBeenCalledWith({
|
|
199
238
|
value: "pattern4&"
|
|
200
239
|
});
|
|
240
|
+
|
|
201
241
|
_react2.fireEvent.blur(textarea);
|
|
242
|
+
|
|
202
243
|
expect(onBlur).toHaveBeenCalled();
|
|
203
244
|
expect(onBlur).toHaveBeenCalledWith({
|
|
204
245
|
value: "pattern4&"
|
|
@@ -207,47 +248,58 @@ describe("Textarea component tests", function () {
|
|
|
207
248
|
test("Length constraint", function () {
|
|
208
249
|
var onChange = jest.fn();
|
|
209
250
|
var onBlur = jest.fn();
|
|
251
|
+
|
|
210
252
|
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
253
|
+
label: "Example label",
|
|
254
|
+
placeholder: "Placeholder",
|
|
255
|
+
onChange: onChange,
|
|
256
|
+
onBlur: onBlur,
|
|
257
|
+
margin: {
|
|
258
|
+
left: "medium",
|
|
259
|
+
right: "medium"
|
|
260
|
+
},
|
|
261
|
+
minLength: 5,
|
|
262
|
+
maxLength: 10
|
|
263
|
+
})),
|
|
264
|
+
getByLabelText = _render13.getByLabelText;
|
|
265
|
+
|
|
223
266
|
var textarea = getByLabelText("Example label");
|
|
267
|
+
|
|
224
268
|
_react2.fireEvent.change(textarea, {
|
|
225
269
|
target: {
|
|
226
270
|
value: "test"
|
|
227
271
|
}
|
|
228
272
|
});
|
|
273
|
+
|
|
229
274
|
expect(onChange).toHaveBeenCalled();
|
|
230
275
|
expect(onChange).toHaveBeenCalledWith({
|
|
231
276
|
value: "test",
|
|
232
277
|
error: "Min length 5, max length 10."
|
|
233
278
|
});
|
|
279
|
+
|
|
234
280
|
_react2.fireEvent.blur(textarea);
|
|
281
|
+
|
|
235
282
|
expect(onBlur).toHaveBeenCalled();
|
|
236
283
|
expect(onBlur).toHaveBeenCalledWith({
|
|
237
284
|
value: "test",
|
|
238
285
|
error: "Min length 5, max length 10."
|
|
239
286
|
});
|
|
287
|
+
|
|
240
288
|
_userEvent["default"].clear(textarea);
|
|
289
|
+
|
|
241
290
|
_react2.fireEvent.change(textarea, {
|
|
242
291
|
target: {
|
|
243
292
|
value: "length"
|
|
244
293
|
}
|
|
245
294
|
});
|
|
295
|
+
|
|
246
296
|
expect(onChange).toHaveBeenCalled();
|
|
247
297
|
expect(onChange).toHaveBeenCalledWith({
|
|
248
298
|
value: "length"
|
|
249
299
|
});
|
|
300
|
+
|
|
250
301
|
_react2.fireEvent.blur(textarea);
|
|
302
|
+
|
|
251
303
|
expect(onBlur).toHaveBeenCalled();
|
|
252
304
|
expect(onBlur).toHaveBeenCalledWith({
|
|
253
305
|
value: "length"
|
|
@@ -256,63 +308,77 @@ describe("Textarea component tests", function () {
|
|
|
256
308
|
test("Pattern and length constraints", function () {
|
|
257
309
|
var onChange = jest.fn();
|
|
258
310
|
var onBlur = jest.fn();
|
|
311
|
+
|
|
259
312
|
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
313
|
+
label: "Example label",
|
|
314
|
+
placeholder: "Placeholder",
|
|
315
|
+
onChange: onChange,
|
|
316
|
+
onBlur: onBlur,
|
|
317
|
+
margin: {
|
|
318
|
+
left: "medium",
|
|
319
|
+
right: "medium"
|
|
320
|
+
},
|
|
321
|
+
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
|
|
322
|
+
minLength: 5,
|
|
323
|
+
maxLength: 10
|
|
324
|
+
})),
|
|
325
|
+
getByLabelText = _render14.getByLabelText;
|
|
326
|
+
|
|
273
327
|
var textarea = getByLabelText("Example label");
|
|
328
|
+
|
|
274
329
|
_react2.fireEvent.change(textarea, {
|
|
275
330
|
target: {
|
|
276
331
|
value: "test"
|
|
277
332
|
}
|
|
278
333
|
});
|
|
334
|
+
|
|
279
335
|
expect(onChange).toHaveBeenCalled();
|
|
280
336
|
expect(onChange).toHaveBeenCalledWith({
|
|
281
337
|
value: "test",
|
|
282
338
|
error: "Min length 5, max length 10."
|
|
283
339
|
});
|
|
340
|
+
|
|
284
341
|
_react2.fireEvent.blur(textarea);
|
|
342
|
+
|
|
285
343
|
expect(onBlur).toHaveBeenCalled();
|
|
286
344
|
expect(onBlur).toHaveBeenCalledWith({
|
|
287
345
|
value: "test",
|
|
288
346
|
error: "Min length 5, max length 10."
|
|
289
347
|
});
|
|
348
|
+
|
|
290
349
|
_react2.fireEvent.change(textarea, {
|
|
291
350
|
target: {
|
|
292
351
|
value: "tests"
|
|
293
352
|
}
|
|
294
353
|
});
|
|
354
|
+
|
|
295
355
|
expect(onChange).toHaveBeenCalled();
|
|
296
356
|
expect(onChange).toHaveBeenCalledWith({
|
|
297
357
|
value: "tests",
|
|
298
358
|
error: "Please match the format requested."
|
|
299
359
|
});
|
|
360
|
+
|
|
300
361
|
_react2.fireEvent.blur(textarea);
|
|
362
|
+
|
|
301
363
|
expect(onBlur).toHaveBeenCalled();
|
|
302
364
|
expect(onBlur).toHaveBeenCalledWith({
|
|
303
365
|
value: "tests",
|
|
304
366
|
error: "Please match the format requested."
|
|
305
367
|
});
|
|
368
|
+
|
|
306
369
|
_react2.fireEvent.change(textarea, {
|
|
307
370
|
target: {
|
|
308
371
|
value: "tests4&"
|
|
309
372
|
}
|
|
310
373
|
});
|
|
374
|
+
|
|
311
375
|
expect(onChange).toHaveBeenCalled();
|
|
312
376
|
expect(onChange).toHaveBeenCalledWith({
|
|
313
377
|
value: "tests4&"
|
|
314
378
|
});
|
|
379
|
+
|
|
315
380
|
_react2.fireEvent.blur(textarea);
|
|
381
|
+
|
|
316
382
|
expect(onBlur).toHaveBeenCalled();
|
|
317
383
|
expect(onBlur).toHaveBeenCalledWith({
|
|
318
384
|
value: "tests4&"
|
|
@@ -320,18 +386,23 @@ describe("Textarea component tests", function () {
|
|
|
320
386
|
});
|
|
321
387
|
test("onBlur function is called correctly", function () {
|
|
322
388
|
var onBlur = jest.fn();
|
|
389
|
+
|
|
323
390
|
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
391
|
+
label: "Example label",
|
|
392
|
+
onBlur: onBlur
|
|
393
|
+
})),
|
|
394
|
+
getByLabelText = _render15.getByLabelText;
|
|
395
|
+
|
|
328
396
|
var textarea = getByLabelText("Example label");
|
|
397
|
+
|
|
329
398
|
_react2.fireEvent.change(textarea, {
|
|
330
399
|
target: {
|
|
331
400
|
value: "Blur test"
|
|
332
401
|
}
|
|
333
402
|
});
|
|
403
|
+
|
|
334
404
|
_react2.fireEvent.blur(textarea);
|
|
405
|
+
|
|
335
406
|
expect(onBlur).toHaveBeenCalled();
|
|
336
407
|
expect(onBlur).toHaveBeenCalledWith({
|
|
337
408
|
value: "Blur test"
|
|
@@ -339,18 +410,22 @@ describe("Textarea component tests", function () {
|
|
|
339
410
|
});
|
|
340
411
|
test("onChange function is called correctly", function () {
|
|
341
412
|
var onChange = jest.fn();
|
|
413
|
+
|
|
342
414
|
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
415
|
+
label: "Example label",
|
|
416
|
+
value: "Test value",
|
|
417
|
+
onChange: onChange
|
|
418
|
+
})),
|
|
419
|
+
getByLabelText = _render16.getByLabelText;
|
|
420
|
+
|
|
348
421
|
var textarea = getByLabelText("Example label");
|
|
422
|
+
|
|
349
423
|
_react2.fireEvent.change(textarea, {
|
|
350
424
|
target: {
|
|
351
425
|
value: "Controlled test"
|
|
352
426
|
}
|
|
353
427
|
});
|
|
428
|
+
|
|
354
429
|
expect(onChange).toHaveBeenCalled();
|
|
355
430
|
expect(onChange).toHaveBeenCalledWith({
|
|
356
431
|
value: "Controlled test"
|
package/textarea/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
1
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
declare type Margin = {
|
|
3
3
|
top?: Space;
|
|
4
4
|
bottom?: Space;
|
|
5
5
|
left?: Space;
|
|
6
6
|
right?: Space;
|
|
7
7
|
};
|
|
8
|
-
type Props = {
|
|
8
|
+
declare type Props = {
|
|
9
9
|
/**
|
|
10
10
|
* Text to be placed above the textarea.
|
|
11
11
|
*/
|
|
@@ -133,5 +133,5 @@ type Props = {
|
|
|
133
133
|
/**
|
|
134
134
|
* Reference to the component.
|
|
135
135
|
*/
|
|
136
|
-
export type RefType = HTMLDivElement;
|
|
136
|
+
export declare type RefType = HTMLDivElement;
|
|
137
137
|
export default Props;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import
|
|
3
|
-
declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }:
|
|
2
|
+
import ToggleGroupPropsType from "./types";
|
|
3
|
+
declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToggleGroupPropsType) => JSX.Element;
|
|
4
4
|
export default DxcToggleGroup;
|