@pingux/astro 1.0.0-alpha.6 → 1.1.0-alpha.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/CHANGELOG.md +186 -0
- package/README.md +5 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/cjs/components/AccordionItem/AccordionItem.js +3 -1
- package/lib/cjs/components/Button/Button.js +5 -24
- package/lib/cjs/components/Button/Button.stories.js +5 -11
- package/lib/cjs/components/Button/Button.test.js +0 -24
- package/lib/cjs/components/Chip/Chip.js +26 -10
- package/lib/cjs/components/Chip/Chip.stories.js +44 -5
- package/lib/cjs/components/Chip/Chip.test.js +9 -0
- package/lib/cjs/components/{Panel/index.js → Chip/ChipContext.js} +8 -7
- package/lib/cjs/components/CopyText/CopyText.js +3 -73
- package/lib/cjs/components/IconButton/IconButton.js +17 -7
- package/lib/cjs/components/IconButton/IconButton.test.js +0 -1
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/ListView/ListView.js +4 -3
- package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +1 -1
- package/lib/cjs/components/Stepper/Stepper.js +1 -0
- package/lib/cjs/components/Tab/Tab.js +15 -6
- package/lib/cjs/components/Tabs/Tabs.js +7 -1
- package/lib/cjs/components/Tabs/Tabs.stories.js +60 -6
- package/lib/cjs/components/Tabs/Tabs.test.js +78 -15
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
- package/lib/cjs/{components/DropdownField → hooks/useCopyToClipboard}/index.js +2 -2
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.js +83 -0
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.test.js +79 -0
- package/lib/cjs/index.js +48 -136
- package/lib/cjs/layouts/ListLayout.stories.js +2 -1
- package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
- package/lib/cjs/recipes/ArrayField.stories.js +3 -3
- package/lib/cjs/recipes/CopyToClipboard.stories.js +45 -0
- package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +146 -0
- package/lib/cjs/styles/forms/input.js +4 -0
- package/lib/cjs/styles/theme.js +0 -3
- package/lib/cjs/styles/variants/accordion.js +7 -9
- package/lib/cjs/styles/variants/boxes.js +22 -19
- package/lib/cjs/styles/variants/buttons.js +38 -29
- package/lib/cjs/styles/variants/tabs.js +1 -0
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/components/AccordionItem/AccordionItem.js +3 -1
- package/lib/components/Button/Button.js +7 -24
- package/lib/components/Button/Button.stories.js +5 -10
- package/lib/components/Button/Button.test.js +0 -20
- package/lib/components/Chip/Chip.js +25 -10
- package/lib/components/Chip/Chip.stories.js +41 -5
- package/lib/components/Chip/Chip.test.js +9 -0
- package/lib/components/Chip/ChipContext.js +3 -0
- package/lib/components/CopyText/CopyText.js +2 -71
- package/lib/components/IconButton/IconButton.js +17 -9
- package/lib/components/IconButton/IconButton.test.js +0 -1
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/ListView/ListView.js +4 -3
- package/lib/components/ListViewItem/ListViewItem.js +3 -5
- package/lib/components/MultivaluesField/MultivaluesField.js +1 -1
- package/lib/components/Stepper/Stepper.js +1 -0
- package/lib/components/Tab/Tab.js +15 -6
- package/lib/components/Tabs/Tabs.js +7 -1
- package/lib/components/Tabs/Tabs.stories.js +56 -4
- package/lib/components/Tabs/Tabs.test.js +78 -15
- package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
- package/lib/hooks/useCopyToClipboard/index.js +1 -0
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js +69 -0
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.test.js +64 -0
- package/lib/index.js +0 -8
- package/lib/layouts/ListLayout.stories.js +2 -1
- package/lib/layouts/SchemaFormLayout.stories.js +2 -19
- package/lib/recipes/ArrayField.stories.js +3 -3
- package/lib/recipes/CopyToClipboard.stories.js +25 -0
- package/lib/recipes/RadioButtonsWithLinks.stories.js +120 -0
- package/lib/styles/forms/input.js +4 -0
- package/lib/styles/theme.js +0 -3
- package/lib/styles/variants/accordion.js +7 -9
- package/lib/styles/variants/boxes.js +21 -19
- package/lib/styles/variants/buttons.js +37 -29
- package/lib/styles/variants/tabs.js +1 -0
- package/lib/styles/variants/variants.js +0 -2
- package/package.json +2 -2
- package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
- package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
- package/lib/cjs/components/Dropdown/index.js +0 -18
- package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
- package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
- package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
- package/lib/cjs/components/Panel/Panel.js +0 -101
- package/lib/cjs/components/Panel/Panel.stories.js +0 -57
- package/lib/cjs/components/Panel/Panel.test.js +0 -72
- package/lib/cjs/components/Popover/Popover.js +0 -87
- package/lib/cjs/components/Popover/Popover.stories.js +0 -80
- package/lib/cjs/components/Popover/Popover.test.js +0 -91
- package/lib/cjs/components/Popover/index.js +0 -18
- package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
- package/lib/cjs/styles/variants/popover.js +0 -86
- package/lib/components/Dropdown/Dropdown.js +0 -90
- package/lib/components/Dropdown/Dropdown.test.js +0 -62
- package/lib/components/Dropdown/index.js +0 -1
- package/lib/components/DropdownField/DropdownField.js +0 -155
- package/lib/components/DropdownField/DropdownField.stories.js +0 -222
- package/lib/components/DropdownField/DropdownField.test.js +0 -60
- package/lib/components/DropdownField/index.js +0 -1
- package/lib/components/Panel/Panel.js +0 -71
- package/lib/components/Panel/Panel.stories.js +0 -35
- package/lib/components/Panel/Panel.test.js +0 -52
- package/lib/components/Panel/index.js +0 -1
- package/lib/components/Popover/Popover.js +0 -65
- package/lib/components/Popover/Popover.stories.js +0 -52
- package/lib/components/Popover/Popover.test.js +0 -75
- package/lib/components/Popover/index.js +0 -2
- package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
- package/lib/styles/variants/popover.js +0 -76
@@ -1,278 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
|
4
|
-
|
5
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
6
|
-
|
7
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
8
|
-
|
9
|
-
_Object$defineProperty(exports, "__esModule", {
|
10
|
-
value: true
|
11
|
-
});
|
12
|
-
|
13
|
-
exports.WithoutStatusIndicator = exports.Transparent = exports.HelperText = exports.IsDisabled = exports.CustomNoneOption = exports.NoneOption = exports.WithOptionGroups = exports.Controlled = exports.DefaultValue = exports.DisabledFirstOption = exports.Default = exports["default"] = void 0;
|
14
|
-
|
15
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
16
|
-
|
17
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
18
|
-
|
19
|
-
var _react = _interopRequireWildcard(require("react"));
|
20
|
-
|
21
|
-
var _ = _interopRequireDefault(require("."));
|
22
|
-
|
23
|
-
var _Box = _interopRequireDefault(require("../Box/Box"));
|
24
|
-
|
25
|
-
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
26
|
-
|
27
|
-
var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
|
28
|
-
|
29
|
-
var _react2 = require("@emotion/react");
|
30
|
-
|
31
|
-
var _default = {
|
32
|
-
title: 'Deprecated/DropdownField',
|
33
|
-
component: _["default"],
|
34
|
-
argTypes: {
|
35
|
-
defaultValue: {},
|
36
|
-
helperText: {
|
37
|
-
control: {
|
38
|
-
type: 'text'
|
39
|
-
}
|
40
|
-
},
|
41
|
-
hintText: {
|
42
|
-
control: {
|
43
|
-
type: 'text'
|
44
|
-
}
|
45
|
-
},
|
46
|
-
firstLabel: {},
|
47
|
-
noneLabel: {},
|
48
|
-
status: {
|
49
|
-
control: {
|
50
|
-
type: 'select',
|
51
|
-
options: _statuses["default"]
|
52
|
-
},
|
53
|
-
defaultValue: _statuses["default"].DEFAULT
|
54
|
-
},
|
55
|
-
hasNoneOption: {},
|
56
|
-
hasDisabledFirstOption: {},
|
57
|
-
isRequired: {},
|
58
|
-
hasAutoFocus: {},
|
59
|
-
controlProps: {},
|
60
|
-
id: {},
|
61
|
-
'aria-label': {
|
62
|
-
control: {
|
63
|
-
type: 'text'
|
64
|
-
}
|
65
|
-
},
|
66
|
-
'aria-labelledby': {
|
67
|
-
control: {
|
68
|
-
type: 'text'
|
69
|
-
}
|
70
|
-
},
|
71
|
-
'aria-describedby': {
|
72
|
-
control: {
|
73
|
-
type: 'text'
|
74
|
-
}
|
75
|
-
},
|
76
|
-
'aria-details': {
|
77
|
-
control: {
|
78
|
-
type: 'text'
|
79
|
-
}
|
80
|
-
},
|
81
|
-
value: {
|
82
|
-
control: {
|
83
|
-
type: 'none'
|
84
|
-
}
|
85
|
-
}
|
86
|
-
},
|
87
|
-
decorators: [function (Story, context) {
|
88
|
-
return (0, _withDeprecationWarning["default"])(Story, context, '`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
|
89
|
-
}]
|
90
|
-
};
|
91
|
-
exports["default"] = _default;
|
92
|
-
|
93
|
-
var Default = function Default(args) {
|
94
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
95
|
-
label: "Select one"
|
96
|
-
}), (0, _react2.jsx)("option", {
|
97
|
-
value: "1"
|
98
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
99
|
-
value: "2"
|
100
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
101
|
-
value: "3"
|
102
|
-
}, "Option 3"));
|
103
|
-
};
|
104
|
-
|
105
|
-
exports.Default = Default;
|
106
|
-
|
107
|
-
var DisabledFirstOption = function DisabledFirstOption(args) {
|
108
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
109
|
-
label: "Select one",
|
110
|
-
hasDisabledFirstOption: true
|
111
|
-
}), (0, _react2.jsx)("option", {
|
112
|
-
value: "1"
|
113
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
114
|
-
value: "2"
|
115
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
116
|
-
value: "3"
|
117
|
-
}, "Option 3"));
|
118
|
-
};
|
119
|
-
|
120
|
-
exports.DisabledFirstOption = DisabledFirstOption;
|
121
|
-
|
122
|
-
var DefaultValue = function DefaultValue(args) {
|
123
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
124
|
-
label: "Select one",
|
125
|
-
defaultValue: "2"
|
126
|
-
}), (0, _react2.jsx)("option", {
|
127
|
-
value: "1"
|
128
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
129
|
-
value: "2"
|
130
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
131
|
-
value: "3"
|
132
|
-
}, "Option 3"));
|
133
|
-
};
|
134
|
-
|
135
|
-
exports.DefaultValue = DefaultValue;
|
136
|
-
|
137
|
-
var Controlled = function Controlled(args) {
|
138
|
-
var _useState = (0, _react.useState)('3'),
|
139
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
140
|
-
selected = _useState2[0],
|
141
|
-
setSelected = _useState2[1];
|
142
|
-
|
143
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
144
|
-
label: "Select one",
|
145
|
-
value: selected,
|
146
|
-
onChange: function onChange(e) {
|
147
|
-
return setSelected(e.target.value);
|
148
|
-
}
|
149
|
-
}), (0, _react2.jsx)("option", {
|
150
|
-
value: "1"
|
151
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
152
|
-
value: "2"
|
153
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
154
|
-
value: "3"
|
155
|
-
}, "Option 3"));
|
156
|
-
};
|
157
|
-
|
158
|
-
exports.Controlled = Controlled;
|
159
|
-
|
160
|
-
var WithOptionGroups = function WithOptionGroups(args) {
|
161
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
162
|
-
label: "Select one"
|
163
|
-
}), (0, _react2.jsx)("optgroup", {
|
164
|
-
label: "Cheeses"
|
165
|
-
}, (0, _react2.jsx)("option", {
|
166
|
-
value: "brie"
|
167
|
-
}, "Brie"), (0, _react2.jsx)("option", {
|
168
|
-
value: "gouda"
|
169
|
-
}, "Gouda"), (0, _react2.jsx)("option", {
|
170
|
-
value: "swiss"
|
171
|
-
}, "Swiss")), (0, _react2.jsx)("optgroup", {
|
172
|
-
label: "Breads"
|
173
|
-
}, (0, _react2.jsx)("option", {
|
174
|
-
value: "sourdough"
|
175
|
-
}, "Sourdough"), (0, _react2.jsx)("option", {
|
176
|
-
value: "rye"
|
177
|
-
}, "Rye"), (0, _react2.jsx)("option", {
|
178
|
-
value: "focaccia"
|
179
|
-
}, "Focaccia")));
|
180
|
-
};
|
181
|
-
|
182
|
-
exports.WithOptionGroups = WithOptionGroups;
|
183
|
-
|
184
|
-
var NoneOption = function NoneOption(args) {
|
185
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
186
|
-
label: "Select one",
|
187
|
-
hasNoneOption: true
|
188
|
-
}), (0, _react2.jsx)("option", {
|
189
|
-
value: "1"
|
190
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
191
|
-
value: "2"
|
192
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
193
|
-
value: "3"
|
194
|
-
}, "Option 3"));
|
195
|
-
};
|
196
|
-
|
197
|
-
exports.NoneOption = NoneOption;
|
198
|
-
|
199
|
-
var CustomNoneOption = function CustomNoneOption(args) {
|
200
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
201
|
-
label: "Select one",
|
202
|
-
hasNoneOption: true,
|
203
|
-
hasDisabledFirstOption: true,
|
204
|
-
noneLabel: "None"
|
205
|
-
}), (0, _react2.jsx)("option", {
|
206
|
-
value: "1"
|
207
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
208
|
-
value: "2"
|
209
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
210
|
-
value: "3"
|
211
|
-
}, "Option 3"));
|
212
|
-
};
|
213
|
-
|
214
|
-
exports.CustomNoneOption = CustomNoneOption;
|
215
|
-
|
216
|
-
var IsDisabled = function IsDisabled(args) {
|
217
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
218
|
-
label: "Select one",
|
219
|
-
isDisabled: true
|
220
|
-
}), (0, _react2.jsx)("option", {
|
221
|
-
value: "1"
|
222
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
223
|
-
value: "2"
|
224
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
225
|
-
value: "3"
|
226
|
-
}, "Option 3"));
|
227
|
-
};
|
228
|
-
|
229
|
-
exports.IsDisabled = IsDisabled;
|
230
|
-
|
231
|
-
var HelperText = function HelperText(args) {
|
232
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
|
233
|
-
label: "Select one",
|
234
|
-
helperText: "Here is some helpful text...",
|
235
|
-
status: "error"
|
236
|
-
}, args), (0, _react2.jsx)("option", {
|
237
|
-
value: "1"
|
238
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
239
|
-
value: "2"
|
240
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
241
|
-
value: "3"
|
242
|
-
}, "Option 3"));
|
243
|
-
};
|
244
|
-
|
245
|
-
exports.HelperText = HelperText;
|
246
|
-
|
247
|
-
var Transparent = function Transparent(args) {
|
248
|
-
return (0, _react2.jsx)(_Box["default"], {
|
249
|
-
bg: "neutral.90",
|
250
|
-
p: 20
|
251
|
-
}, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
252
|
-
label: "Select one",
|
253
|
-
variant: "forms.select.transparent"
|
254
|
-
}), (0, _react2.jsx)("option", {
|
255
|
-
value: "1"
|
256
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
257
|
-
value: "2"
|
258
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
259
|
-
value: "3"
|
260
|
-
}, "Option 3")));
|
261
|
-
};
|
262
|
-
|
263
|
-
exports.Transparent = Transparent;
|
264
|
-
|
265
|
-
var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
|
266
|
-
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
|
267
|
-
label: "Select one",
|
268
|
-
hasNoStatusIndicator: true
|
269
|
-
}), (0, _react2.jsx)("option", {
|
270
|
-
value: "1"
|
271
|
-
}, "Option 1"), (0, _react2.jsx)("option", {
|
272
|
-
value: "2"
|
273
|
-
}, "Option 2"), (0, _react2.jsx)("option", {
|
274
|
-
value: "3"
|
275
|
-
}, "Option 3"));
|
276
|
-
};
|
277
|
-
|
278
|
-
exports.WithoutStatusIndicator = WithoutStatusIndicator;
|
@@ -1,80 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
6
|
-
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
8
|
-
|
9
|
-
var _react2 = require("@testing-library/react");
|
10
|
-
|
11
|
-
var _DropdownField = _interopRequireDefault(require("./DropdownField"));
|
12
|
-
|
13
|
-
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
14
|
-
|
15
|
-
var _react3 = require("@emotion/react");
|
16
|
-
|
17
|
-
var testId = 'test-dropdown';
|
18
|
-
var defaultProps = {
|
19
|
-
'data-testid': testId,
|
20
|
-
controlProps: {
|
21
|
-
'data-testid': "".concat(testId, "-input")
|
22
|
-
},
|
23
|
-
label: 'testLabel'
|
24
|
-
};
|
25
|
-
|
26
|
-
var getComponent = function getComponent() {
|
27
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
28
|
-
return (0, _react2.render)((0, _react3.jsx)(_DropdownField["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)("option", {
|
29
|
-
value: "a"
|
30
|
-
}, "A"), (0, _react3.jsx)("option", {
|
31
|
-
value: "b"
|
32
|
-
}, "B")));
|
33
|
-
};
|
34
|
-
|
35
|
-
afterEach(function () {
|
36
|
-
jest.restoreAllMocks();
|
37
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
38
|
-
|
39
|
-
(0, _testAxe["default"])(getComponent);
|
40
|
-
test('default dropdownfield', function () {
|
41
|
-
getComponent();
|
42
|
-
|
43
|
-
var container = _react2.screen.getByTestId(testId);
|
44
|
-
|
45
|
-
var input = _react2.screen.getByLabelText('testLabel');
|
46
|
-
|
47
|
-
var label = _react2.screen.getByText('testLabel');
|
48
|
-
|
49
|
-
expect(container).toBeInstanceOf(HTMLDivElement);
|
50
|
-
expect(input).toBeInstanceOf(HTMLSelectElement);
|
51
|
-
expect(label).toBeInstanceOf(HTMLLabelElement);
|
52
|
-
expect(container).toBeInTheDocument();
|
53
|
-
expect(input).toBeInTheDocument();
|
54
|
-
expect(label).toBeInTheDocument();
|
55
|
-
});
|
56
|
-
test('disabled prop disables dropdown input', function () {
|
57
|
-
getComponent({
|
58
|
-
isDisabled: true
|
59
|
-
});
|
60
|
-
|
61
|
-
var dropdown = _react2.screen.getByRole('combobox');
|
62
|
-
|
63
|
-
expect(dropdown).toBeDisabled();
|
64
|
-
});
|
65
|
-
test('input is not disabled without disabled prop', function () {
|
66
|
-
getComponent();
|
67
|
-
|
68
|
-
var dropdown = _react2.screen.getByRole('combobox');
|
69
|
-
|
70
|
-
expect(dropdown).toBeEnabled();
|
71
|
-
});
|
72
|
-
test('displays helper text when helperText prop is passed', function () {
|
73
|
-
getComponent({
|
74
|
-
helperText: 'helper text!'
|
75
|
-
});
|
76
|
-
|
77
|
-
var label = _react2.screen.getByText('helper text!');
|
78
|
-
|
79
|
-
expect(label).toBeInTheDocument();
|
80
|
-
});
|
@@ -1,101 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
|
4
|
-
|
5
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
6
|
-
|
7
|
-
var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
8
|
-
|
9
|
-
_Object$defineProperty2(exports, "__esModule", {
|
10
|
-
value: true
|
11
|
-
});
|
12
|
-
|
13
|
-
exports["default"] = void 0;
|
14
|
-
|
15
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
|
16
|
-
|
17
|
-
var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
|
18
|
-
|
19
|
-
var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
|
20
|
-
|
21
|
-
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
|
22
|
-
|
23
|
-
var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
|
24
|
-
|
25
|
-
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
26
|
-
|
27
|
-
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
|
28
|
-
|
29
|
-
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
30
|
-
|
31
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
32
|
-
|
33
|
-
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
34
|
-
|
35
|
-
var _react = _interopRequireWildcard(require("react"));
|
36
|
-
|
37
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
38
|
-
|
39
|
-
var _focus = require("@react-aria/focus");
|
40
|
-
|
41
|
-
var _hooks = require("../../hooks");
|
42
|
-
|
43
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
44
|
-
|
45
|
-
var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
|
46
|
-
|
47
|
-
var _react2 = require("@emotion/react");
|
48
|
-
|
49
|
-
function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
50
|
-
|
51
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
|
52
|
-
|
53
|
-
/**
|
54
|
-
* **WARNING: Panel will be deprecated in Astro 1.0.0, use `OverlayPanel` instead.**
|
55
|
-
*
|
56
|
-
*/
|
57
|
-
var Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
58
|
-
var className = props.className,
|
59
|
-
children = props.children,
|
60
|
-
isVisible = props.isVisible,
|
61
|
-
sx = props.sx,
|
62
|
-
width = props.width,
|
63
|
-
scrollBoxProps = props.scrollBoxProps;
|
64
|
-
|
65
|
-
var _useFocusRing = (0, _focus.useFocusRing)(),
|
66
|
-
isFocusVisible = _useFocusRing.isFocusVisible,
|
67
|
-
focusProps = _useFocusRing.focusProps;
|
68
|
-
|
69
|
-
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
70
|
-
isFocused: isFocusVisible,
|
71
|
-
isVisible: isVisible
|
72
|
-
}),
|
73
|
-
classNames = _useStatusClasses.classNames;
|
74
|
-
|
75
|
-
var dynamicStyles = {
|
76
|
-
marginRight: isVisible ? 0 : "-".concat(width)
|
77
|
-
};
|
78
|
-
(0, _hooks.useDeprecationWarning)('`Panel` will be deprecated in Astro-UI 1.0.0, use `OverflowPanel` instead.');
|
79
|
-
return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
80
|
-
className: classNames,
|
81
|
-
ref: ref,
|
82
|
-
tabIndex: isVisible ? 0 : -1,
|
83
|
-
variant: "boxes.panel"
|
84
|
-
}, props, focusProps, {
|
85
|
-
sx: _objectSpread(_objectSpread({}, dynamicStyles), sx)
|
86
|
-
}), isVisible && (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, children));
|
87
|
-
});
|
88
|
-
Panel.propTypes = {
|
89
|
-
isVisible: _propTypes["default"].bool,
|
90
|
-
width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
|
91
|
-
|
92
|
-
/** Props object that is spread directly into the ScrollBox element. */
|
93
|
-
scrollBoxProps: _propTypes["default"].shape({})
|
94
|
-
};
|
95
|
-
Panel.defaultProps = {
|
96
|
-
width: '100%',
|
97
|
-
isVisible: false
|
98
|
-
};
|
99
|
-
Panel.displayName = 'Panel';
|
100
|
-
var _default = Panel;
|
101
|
-
exports["default"] = _default;
|
@@ -1,57 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
-
|
7
|
-
_Object$defineProperty(exports, "__esModule", {
|
8
|
-
value: true
|
9
|
-
});
|
10
|
-
|
11
|
-
exports.Default = exports["default"] = void 0;
|
12
|
-
|
13
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
14
|
-
|
15
|
-
var _react = _interopRequireDefault(require("react"));
|
16
|
-
|
17
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
18
|
-
|
19
|
-
var _Text = _interopRequireDefault(require("../Text"));
|
20
|
-
|
21
|
-
var _ = _interopRequireDefault(require("."));
|
22
|
-
|
23
|
-
var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
|
24
|
-
|
25
|
-
var _react2 = require("@emotion/react");
|
26
|
-
|
27
|
-
var _default = {
|
28
|
-
title: 'Deprecated/Panel',
|
29
|
-
component: _["default"],
|
30
|
-
argTypes: {
|
31
|
-
isVisible: {
|
32
|
-
defaultValue: false,
|
33
|
-
description: 'Toggle panel.'
|
34
|
-
},
|
35
|
-
width: {
|
36
|
-
control: {
|
37
|
-
type: 'text'
|
38
|
-
},
|
39
|
-
description: 'Width of panel.'
|
40
|
-
}
|
41
|
-
},
|
42
|
-
decorators: [function (Story, context) {
|
43
|
-
return (0, _withDeprecationWarning["default"])(Story, context, '`Panel` will be deprecated in Astro-UI 1.0.0, use `OverlayPanel` instead.');
|
44
|
-
}]
|
45
|
-
};
|
46
|
-
exports["default"] = _default;
|
47
|
-
|
48
|
-
var Default = function Default(_ref) {
|
49
|
-
var args = (0, _extends2["default"])({}, _ref);
|
50
|
-
return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Box["default"], {
|
51
|
-
isRow: true
|
52
|
-
}, (0, _react2.jsx)(_Box["default"], {
|
53
|
-
flexGrow: 1
|
54
|
-
}, (0, _react2.jsx)(_Text["default"], null, "Reveal panel with toggle below.")), (0, _react2.jsx)(_["default"], args, "Panel content goes here.")));
|
55
|
-
};
|
56
|
-
|
57
|
-
exports.Default = Default;
|
@@ -1,72 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
6
|
-
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
8
|
-
|
9
|
-
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
10
|
-
|
11
|
-
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
12
|
-
|
13
|
-
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
14
|
-
|
15
|
-
var _ = _interopRequireDefault(require("."));
|
16
|
-
|
17
|
-
var _react2 = require("@emotion/react");
|
18
|
-
|
19
|
-
var testId = 'test-panel';
|
20
|
-
var defaultProps = {
|
21
|
-
'data-testid': testId
|
22
|
-
};
|
23
|
-
|
24
|
-
var getComponent = function getComponent() {
|
25
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
26
|
-
return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
|
27
|
-
};
|
28
|
-
|
29
|
-
afterEach(function () {
|
30
|
-
jest.restoreAllMocks();
|
31
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
32
|
-
|
33
|
-
(0, _testAxe["default"])(getComponent);
|
34
|
-
test('default panel', function () {
|
35
|
-
getComponent({
|
36
|
-
children: (0, _react2.jsx)("div", null, "Test")
|
37
|
-
});
|
38
|
-
|
39
|
-
var panel = _testWrapper.screen.getByTestId(testId);
|
40
|
-
|
41
|
-
var child = _testWrapper.screen.queryByText('Test');
|
42
|
-
|
43
|
-
expect(panel).toBeInTheDocument();
|
44
|
-
expect(child).not.toBeInTheDocument();
|
45
|
-
expect(panel).toHaveAttribute('tabIndex', '-1');
|
46
|
-
});
|
47
|
-
test('panel when visible', function () {
|
48
|
-
getComponent({
|
49
|
-
isVisible: true,
|
50
|
-
children: (0, _react2.jsx)("div", null, "Test")
|
51
|
-
});
|
52
|
-
|
53
|
-
var panel = _testWrapper.screen.getByTestId(testId);
|
54
|
-
|
55
|
-
var child = _testWrapper.screen.queryByText('Test');
|
56
|
-
|
57
|
-
expect(panel).toBeInTheDocument();
|
58
|
-
expect(child).toBeInTheDocument();
|
59
|
-
expect(panel).toHaveAttribute('tabIndex', '0');
|
60
|
-
});
|
61
|
-
test('panel with focus', function () {
|
62
|
-
getComponent({
|
63
|
-
isVisible: true,
|
64
|
-
children: (0, _react2.jsx)("div", null, "Test")
|
65
|
-
});
|
66
|
-
|
67
|
-
var panel = _testWrapper.screen.getByTestId(testId);
|
68
|
-
|
69
|
-
_userEvent["default"].tab();
|
70
|
-
|
71
|
-
expect(panel).toHaveFocus();
|
72
|
-
});
|
@@ -1,87 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
|
4
|
-
|
5
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
6
|
-
|
7
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
8
|
-
|
9
|
-
_Object$defineProperty(exports, "__esModule", {
|
10
|
-
value: true
|
11
|
-
});
|
12
|
-
|
13
|
-
exports["default"] = void 0;
|
14
|
-
|
15
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
16
|
-
|
17
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
18
|
-
|
19
|
-
var _react = _interopRequireWildcard(require("react"));
|
20
|
-
|
21
|
-
var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
|
22
|
-
|
23
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
24
|
-
|
25
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
26
|
-
|
27
|
-
var _hooks = require("../../hooks");
|
28
|
-
|
29
|
-
var _react2 = require("@emotion/react");
|
30
|
-
|
31
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0.
|
32
|
-
// Replace with PopoverContainer
|
33
|
-
|
34
|
-
/**
|
35
|
-
* **WARNING: Will be deprecated in Astro 1.0.0, use `PopoverMenu` instead.**
|
36
|
-
*
|
37
|
-
* Popover component used for popover button menus and help hints.
|
38
|
-
* Built using Tippy.js [Tippy.js](https://atomiks.github.io/tippyjs/) and uses the
|
39
|
-
* available [props from Tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/).
|
40
|
-
*/
|
41
|
-
var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
42
|
-
var content = props.content,
|
43
|
-
trigger = props.trigger,
|
44
|
-
others = (0, _objectWithoutProperties2["default"])(props, ["content", "trigger"]);
|
45
|
-
(0, _hooks.useDeprecationWarning)('`Popover` will be deprecated in Astro-UI 1.0.0, use `PopoverMenu` for menus instead. Or `Tooltip` when it is available.');
|
46
|
-
return (0, _react2.jsx)(_headless["default"], (0, _extends2["default"])({
|
47
|
-
ref: ref,
|
48
|
-
interactive: true,
|
49
|
-
render: function render(attrs) {
|
50
|
-
return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, attrs, {
|
51
|
-
variant: "popover.container"
|
52
|
-
}), (0, _react2.jsx)(_Box["default"], {
|
53
|
-
role: "tooltip",
|
54
|
-
variant: "popover.content"
|
55
|
-
}, content), (0, _react2.jsx)(_Box["default"], {
|
56
|
-
className: "tippy-arrow",
|
57
|
-
"data-popper-arrow": "",
|
58
|
-
variant: "popover.arrow"
|
59
|
-
}));
|
60
|
-
}
|
61
|
-
}, trigger && {
|
62
|
-
trigger: trigger
|
63
|
-
}, others));
|
64
|
-
});
|
65
|
-
Popover.propTypes = {
|
66
|
-
/** The content of the popover. */
|
67
|
-
content: _propTypes["default"].node,
|
68
|
-
|
69
|
-
/** Placement of the popover. Note that TippyJs's flip modifier can change this
|
70
|
-
* to the opposite placement if it has more space. [More information on placement](https://atomiks.github.io/tippyjs/v6/all-props/#placement) */
|
71
|
-
placement: _propTypes["default"].string,
|
72
|
-
|
73
|
-
/** Determines the events that cause the tooltip to show.
|
74
|
-
* Multiple event names are separated by spaces.
|
75
|
-
* [More information on trigger](https://atomiks.github.io/tippyjs/v6/all-props/#trigger) */
|
76
|
-
trigger: _propTypes["default"].string,
|
77
|
-
|
78
|
-
/** Delay in ms once a trigger event is fired before a popover shows or hides.
|
79
|
-
* [More information on delay](https://atomiks.github.io/tippyjs/v6/all-props/#delay) */
|
80
|
-
delay: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf([_propTypes["default"].number])])
|
81
|
-
};
|
82
|
-
Popover.defaultProps = {
|
83
|
-
placement: 'top',
|
84
|
-
trigger: 'mouseenter focus'
|
85
|
-
};
|
86
|
-
var _default = Popover;
|
87
|
-
exports["default"] = _default;
|