@pingux/astro 1.0.0-alpha.9 → 1.1.0-alpha.10
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 +257 -0
- package/README.md +5 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -0
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
- package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +33 -1
- package/lib/cjs/components/AccordionItem/AccordionItem.js +5 -4
- package/lib/cjs/components/Button/Button.js +6 -26
- package/lib/cjs/components/Button/Button.stories.js +7 -12
- package/lib/cjs/components/Button/Button.test.js +2 -25
- 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/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
- package/lib/cjs/components/ColorField/ColorField.js +1 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.js +7 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +25 -1
- package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +44 -0
- package/lib/cjs/components/FileInputField/FileItem.js +2 -1
- package/lib/cjs/components/IconButton/IconButton.js +17 -7
- package/lib/cjs/components/IconButton/IconButton.stories.js +8 -17
- package/lib/cjs/components/IconButton/IconButton.test.js +4 -6
- package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js +2 -1
- package/lib/cjs/components/List/List.js +3 -0
- package/lib/cjs/components/List/List.stories.js +7 -2
- package/lib/cjs/components/ListBox/ListBox.js +3 -6
- package/lib/cjs/components/ListBox/ListBox.test.js +2 -0
- package/lib/cjs/components/ListBox/Option.js +6 -0
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/ListView/ListView.js +4 -3
- package/lib/cjs/components/ListView/ListView.stories.js +580 -39
- package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
- package/lib/cjs/components/Messages/Message.js +2 -2
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +3 -2
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +15 -14
- package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js +15 -0
- package/lib/cjs/components/Stepper/Stepper.js +1 -0
- package/lib/cjs/components/Tab/Tab.js +5 -3
- package/lib/cjs/components/Tabs/Tabs.js +3 -0
- package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
- package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
- package/lib/cjs/components/TextArea/TextArea.js +5 -1
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
- 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/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 +48 -29
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +23 -1
- package/lib/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
- package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
- package/lib/components/AccordionGroup/AccordionGroup.test.js +30 -1
- package/lib/components/AccordionItem/AccordionItem.js +6 -5
- package/lib/components/Button/Button.js +8 -26
- package/lib/components/Button/Button.stories.js +7 -11
- package/lib/components/Button/Button.test.js +2 -21
- 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/ColorField/ColorField.js +1 -0
- package/lib/components/ComboBoxField/ComboBoxField.js +7 -0
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +21 -0
- package/lib/components/ComboBoxField/ComboBoxField.test.js +35 -0
- package/lib/components/FileInputField/FileItem.js +2 -1
- package/lib/components/IconButton/IconButton.js +17 -9
- package/lib/components/IconButton/IconButton.stories.js +7 -13
- package/lib/components/IconButton/IconButton.test.js +4 -6
- package/lib/components/ImageUploadField/ImagePreviewButton.js +2 -1
- package/lib/components/List/List.js +2 -0
- package/lib/components/List/List.stories.js +6 -2
- package/lib/components/ListBox/ListBox.js +3 -5
- package/lib/components/ListBox/ListBox.test.js +2 -0
- package/lib/components/ListBox/Option.js +6 -0
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/ListView/ListView.js +4 -3
- package/lib/components/ListView/ListView.stories.js +577 -39
- package/lib/components/ListViewItem/ListViewItem.js +3 -5
- package/lib/components/Messages/Message.js +2 -2
- package/lib/components/MultivaluesField/MultivaluesField.js +3 -2
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -5
- package/lib/components/PopoverContainer/PopoverContainer.test.js +16 -1
- package/lib/components/Stepper/Stepper.js +1 -0
- package/lib/components/Tab/Tab.js +5 -3
- package/lib/components/Tabs/Tabs.js +3 -0
- package/lib/components/Tabs/Tabs.stories.js +3 -4
- package/lib/components/Tabs/Tabs.test.js +40 -15
- package/lib/components/TextArea/TextArea.js +5 -1
- package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
- 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/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 +47 -29
- package/lib/styles/variants/variants.js +0 -2
- package/package.json +1 -1
- 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/Panel/index.js +0 -18
- 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,18 +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
|
-
_Object$defineProperty(exports, "default", {
|
12
|
-
enumerable: true,
|
13
|
-
get: function get() {
|
14
|
-
return _Panel["default"];
|
15
|
-
}
|
16
|
-
});
|
17
|
-
|
18
|
-
var _Panel = _interopRequireDefault(require("./Panel"));
|