@pingux/astro 1.0.0-alpha.6 → 1.0.1
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 +170 -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/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/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 +20 -18
- package/lib/cjs/styles/variants/buttons.js +2 -28
- 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/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/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 +20 -18
- package/lib/styles/variants/buttons.js +2 -28
- 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,222 +0,0 @@
|
|
1
|
-
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
2
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
3
|
-
import React, { useState } from 'react';
|
4
|
-
import DropdownField from '.';
|
5
|
-
import Box from '../Box/Box';
|
6
|
-
import statuses from '../../utils/devUtils/constants/statuses';
|
7
|
-
import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
|
8
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
9
|
-
export default {
|
10
|
-
title: 'Deprecated/DropdownField',
|
11
|
-
component: DropdownField,
|
12
|
-
argTypes: {
|
13
|
-
defaultValue: {},
|
14
|
-
helperText: {
|
15
|
-
control: {
|
16
|
-
type: 'text'
|
17
|
-
}
|
18
|
-
},
|
19
|
-
hintText: {
|
20
|
-
control: {
|
21
|
-
type: 'text'
|
22
|
-
}
|
23
|
-
},
|
24
|
-
firstLabel: {},
|
25
|
-
noneLabel: {},
|
26
|
-
status: {
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
options: statuses
|
30
|
-
},
|
31
|
-
defaultValue: statuses.DEFAULT
|
32
|
-
},
|
33
|
-
hasNoneOption: {},
|
34
|
-
hasDisabledFirstOption: {},
|
35
|
-
isRequired: {},
|
36
|
-
hasAutoFocus: {},
|
37
|
-
controlProps: {},
|
38
|
-
id: {},
|
39
|
-
'aria-label': {
|
40
|
-
control: {
|
41
|
-
type: 'text'
|
42
|
-
}
|
43
|
-
},
|
44
|
-
'aria-labelledby': {
|
45
|
-
control: {
|
46
|
-
type: 'text'
|
47
|
-
}
|
48
|
-
},
|
49
|
-
'aria-describedby': {
|
50
|
-
control: {
|
51
|
-
type: 'text'
|
52
|
-
}
|
53
|
-
},
|
54
|
-
'aria-details': {
|
55
|
-
control: {
|
56
|
-
type: 'text'
|
57
|
-
}
|
58
|
-
},
|
59
|
-
value: {
|
60
|
-
control: {
|
61
|
-
type: 'none'
|
62
|
-
}
|
63
|
-
}
|
64
|
-
},
|
65
|
-
decorators: [function (Story, context) {
|
66
|
-
return withDeprecationWarning(Story, context, '`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
|
67
|
-
}]
|
68
|
-
};
|
69
|
-
export var Default = function Default(args) {
|
70
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
71
|
-
label: "Select one"
|
72
|
-
}), ___EmotionJSX("option", {
|
73
|
-
value: "1"
|
74
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
75
|
-
value: "2"
|
76
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
77
|
-
value: "3"
|
78
|
-
}, "Option 3"));
|
79
|
-
};
|
80
|
-
export var DisabledFirstOption = function DisabledFirstOption(args) {
|
81
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
82
|
-
label: "Select one",
|
83
|
-
hasDisabledFirstOption: true
|
84
|
-
}), ___EmotionJSX("option", {
|
85
|
-
value: "1"
|
86
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
87
|
-
value: "2"
|
88
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
89
|
-
value: "3"
|
90
|
-
}, "Option 3"));
|
91
|
-
};
|
92
|
-
export var DefaultValue = function DefaultValue(args) {
|
93
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
94
|
-
label: "Select one",
|
95
|
-
defaultValue: "2"
|
96
|
-
}), ___EmotionJSX("option", {
|
97
|
-
value: "1"
|
98
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
99
|
-
value: "2"
|
100
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
101
|
-
value: "3"
|
102
|
-
}, "Option 3"));
|
103
|
-
};
|
104
|
-
export var Controlled = function Controlled(args) {
|
105
|
-
var _useState = useState('3'),
|
106
|
-
_useState2 = _slicedToArray(_useState, 2),
|
107
|
-
selected = _useState2[0],
|
108
|
-
setSelected = _useState2[1];
|
109
|
-
|
110
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
111
|
-
label: "Select one",
|
112
|
-
value: selected,
|
113
|
-
onChange: function onChange(e) {
|
114
|
-
return setSelected(e.target.value);
|
115
|
-
}
|
116
|
-
}), ___EmotionJSX("option", {
|
117
|
-
value: "1"
|
118
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
119
|
-
value: "2"
|
120
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
121
|
-
value: "3"
|
122
|
-
}, "Option 3"));
|
123
|
-
};
|
124
|
-
export var WithOptionGroups = function WithOptionGroups(args) {
|
125
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
126
|
-
label: "Select one"
|
127
|
-
}), ___EmotionJSX("optgroup", {
|
128
|
-
label: "Cheeses"
|
129
|
-
}, ___EmotionJSX("option", {
|
130
|
-
value: "brie"
|
131
|
-
}, "Brie"), ___EmotionJSX("option", {
|
132
|
-
value: "gouda"
|
133
|
-
}, "Gouda"), ___EmotionJSX("option", {
|
134
|
-
value: "swiss"
|
135
|
-
}, "Swiss")), ___EmotionJSX("optgroup", {
|
136
|
-
label: "Breads"
|
137
|
-
}, ___EmotionJSX("option", {
|
138
|
-
value: "sourdough"
|
139
|
-
}, "Sourdough"), ___EmotionJSX("option", {
|
140
|
-
value: "rye"
|
141
|
-
}, "Rye"), ___EmotionJSX("option", {
|
142
|
-
value: "focaccia"
|
143
|
-
}, "Focaccia")));
|
144
|
-
};
|
145
|
-
export var NoneOption = function NoneOption(args) {
|
146
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
147
|
-
label: "Select one",
|
148
|
-
hasNoneOption: true
|
149
|
-
}), ___EmotionJSX("option", {
|
150
|
-
value: "1"
|
151
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
152
|
-
value: "2"
|
153
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
154
|
-
value: "3"
|
155
|
-
}, "Option 3"));
|
156
|
-
};
|
157
|
-
export var CustomNoneOption = function CustomNoneOption(args) {
|
158
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
159
|
-
label: "Select one",
|
160
|
-
hasNoneOption: true,
|
161
|
-
hasDisabledFirstOption: true,
|
162
|
-
noneLabel: "None"
|
163
|
-
}), ___EmotionJSX("option", {
|
164
|
-
value: "1"
|
165
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
166
|
-
value: "2"
|
167
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
168
|
-
value: "3"
|
169
|
-
}, "Option 3"));
|
170
|
-
};
|
171
|
-
export var IsDisabled = function IsDisabled(args) {
|
172
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
173
|
-
label: "Select one",
|
174
|
-
isDisabled: true
|
175
|
-
}), ___EmotionJSX("option", {
|
176
|
-
value: "1"
|
177
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
178
|
-
value: "2"
|
179
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
180
|
-
value: "3"
|
181
|
-
}, "Option 3"));
|
182
|
-
};
|
183
|
-
export var HelperText = function HelperText(args) {
|
184
|
-
return ___EmotionJSX(DropdownField, _extends({
|
185
|
-
label: "Select one",
|
186
|
-
helperText: "Here is some helpful text...",
|
187
|
-
status: "error"
|
188
|
-
}, args), ___EmotionJSX("option", {
|
189
|
-
value: "1"
|
190
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
191
|
-
value: "2"
|
192
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
193
|
-
value: "3"
|
194
|
-
}, "Option 3"));
|
195
|
-
};
|
196
|
-
export var Transparent = function Transparent(args) {
|
197
|
-
return ___EmotionJSX(Box, {
|
198
|
-
bg: "neutral.90",
|
199
|
-
p: 20
|
200
|
-
}, ___EmotionJSX(DropdownField, _extends({}, args, {
|
201
|
-
label: "Select one",
|
202
|
-
variant: "forms.select.transparent"
|
203
|
-
}), ___EmotionJSX("option", {
|
204
|
-
value: "1"
|
205
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
206
|
-
value: "2"
|
207
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
208
|
-
value: "3"
|
209
|
-
}, "Option 3")));
|
210
|
-
};
|
211
|
-
export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
|
212
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
213
|
-
label: "Select one",
|
214
|
-
hasNoStatusIndicator: true
|
215
|
-
}), ___EmotionJSX("option", {
|
216
|
-
value: "1"
|
217
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
218
|
-
value: "2"
|
219
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
220
|
-
value: "3"
|
221
|
-
}, "Option 3"));
|
222
|
-
};
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import { render, screen } from '@testing-library/react';
|
4
|
-
import DropdownField from './DropdownField';
|
5
|
-
import axeTest from '../../utils/testUtils/testAxe';
|
6
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
7
|
-
var testId = 'test-dropdown';
|
8
|
-
var defaultProps = {
|
9
|
-
'data-testid': testId,
|
10
|
-
controlProps: {
|
11
|
-
'data-testid': "".concat(testId, "-input")
|
12
|
-
},
|
13
|
-
label: 'testLabel'
|
14
|
-
};
|
15
|
-
|
16
|
-
var getComponent = function getComponent() {
|
17
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
18
|
-
return render(___EmotionJSX(DropdownField, _extends({}, defaultProps, props), ___EmotionJSX("option", {
|
19
|
-
value: "a"
|
20
|
-
}, "A"), ___EmotionJSX("option", {
|
21
|
-
value: "b"
|
22
|
-
}, "B")));
|
23
|
-
};
|
24
|
-
|
25
|
-
afterEach(function () {
|
26
|
-
jest.restoreAllMocks();
|
27
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
28
|
-
|
29
|
-
axeTest(getComponent);
|
30
|
-
test('default dropdownfield', function () {
|
31
|
-
getComponent();
|
32
|
-
var container = screen.getByTestId(testId);
|
33
|
-
var input = screen.getByLabelText('testLabel');
|
34
|
-
var label = screen.getByText('testLabel');
|
35
|
-
expect(container).toBeInstanceOf(HTMLDivElement);
|
36
|
-
expect(input).toBeInstanceOf(HTMLSelectElement);
|
37
|
-
expect(label).toBeInstanceOf(HTMLLabelElement);
|
38
|
-
expect(container).toBeInTheDocument();
|
39
|
-
expect(input).toBeInTheDocument();
|
40
|
-
expect(label).toBeInTheDocument();
|
41
|
-
});
|
42
|
-
test('disabled prop disables dropdown input', function () {
|
43
|
-
getComponent({
|
44
|
-
isDisabled: true
|
45
|
-
});
|
46
|
-
var dropdown = screen.getByRole('combobox');
|
47
|
-
expect(dropdown).toBeDisabled();
|
48
|
-
});
|
49
|
-
test('input is not disabled without disabled prop', function () {
|
50
|
-
getComponent();
|
51
|
-
var dropdown = screen.getByRole('combobox');
|
52
|
-
expect(dropdown).toBeEnabled();
|
53
|
-
});
|
54
|
-
test('displays helper text when helperText prop is passed', function () {
|
55
|
-
getComponent({
|
56
|
-
helperText: 'helper text!'
|
57
|
-
});
|
58
|
-
var label = screen.getByText('helper text!');
|
59
|
-
expect(label).toBeInTheDocument();
|
60
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './DropdownField';
|
@@ -1,71 +0,0 @@
|
|
1
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
3
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
4
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
5
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
6
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
7
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
8
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
9
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
10
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
|
-
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
13
|
-
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
15
|
-
|
16
|
-
import React, { forwardRef } from 'react';
|
17
|
-
import PropTypes from 'prop-types';
|
18
|
-
import { useFocusRing } from '@react-aria/focus';
|
19
|
-
import { useStatusClasses, useDeprecationWarning } from '../../hooks';
|
20
|
-
import Box from '../Box';
|
21
|
-
import ScrollBox from '../ScrollBox';
|
22
|
-
/**
|
23
|
-
* **WARNING: Panel will be deprecated in Astro 1.0.0, use `OverlayPanel` instead.**
|
24
|
-
*
|
25
|
-
*/
|
26
|
-
|
27
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
28
|
-
var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
|
29
|
-
var className = props.className,
|
30
|
-
children = props.children,
|
31
|
-
isVisible = props.isVisible,
|
32
|
-
sx = props.sx,
|
33
|
-
width = props.width,
|
34
|
-
scrollBoxProps = props.scrollBoxProps;
|
35
|
-
|
36
|
-
var _useFocusRing = useFocusRing(),
|
37
|
-
isFocusVisible = _useFocusRing.isFocusVisible,
|
38
|
-
focusProps = _useFocusRing.focusProps;
|
39
|
-
|
40
|
-
var _useStatusClasses = useStatusClasses(className, {
|
41
|
-
isFocused: isFocusVisible,
|
42
|
-
isVisible: isVisible
|
43
|
-
}),
|
44
|
-
classNames = _useStatusClasses.classNames;
|
45
|
-
|
46
|
-
var dynamicStyles = {
|
47
|
-
marginRight: isVisible ? 0 : "-".concat(width)
|
48
|
-
};
|
49
|
-
useDeprecationWarning('`Panel` will be deprecated in Astro-UI 1.0.0, use `OverflowPanel` instead.');
|
50
|
-
return ___EmotionJSX(Box, _extends({
|
51
|
-
className: classNames,
|
52
|
-
ref: ref,
|
53
|
-
tabIndex: isVisible ? 0 : -1,
|
54
|
-
variant: "boxes.panel"
|
55
|
-
}, props, focusProps, {
|
56
|
-
sx: _objectSpread(_objectSpread({}, dynamicStyles), sx)
|
57
|
-
}), isVisible && ___EmotionJSX(ScrollBox, scrollBoxProps, children));
|
58
|
-
});
|
59
|
-
Panel.propTypes = {
|
60
|
-
isVisible: PropTypes.bool,
|
61
|
-
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
62
|
-
|
63
|
-
/** Props object that is spread directly into the ScrollBox element. */
|
64
|
-
scrollBoxProps: PropTypes.shape({})
|
65
|
-
};
|
66
|
-
Panel.defaultProps = {
|
67
|
-
width: '100%',
|
68
|
-
isVisible: false
|
69
|
-
};
|
70
|
-
Panel.displayName = 'Panel';
|
71
|
-
export default Panel;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import Box from '../Box';
|
4
|
-
import Text from '../Text';
|
5
|
-
import Panel from '.';
|
6
|
-
import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
|
7
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
|
-
export default {
|
9
|
-
title: 'Deprecated/Panel',
|
10
|
-
component: Panel,
|
11
|
-
argTypes: {
|
12
|
-
isVisible: {
|
13
|
-
defaultValue: false,
|
14
|
-
description: 'Toggle panel.'
|
15
|
-
},
|
16
|
-
width: {
|
17
|
-
control: {
|
18
|
-
type: 'text'
|
19
|
-
},
|
20
|
-
description: 'Width of panel.'
|
21
|
-
}
|
22
|
-
},
|
23
|
-
decorators: [function (Story, context) {
|
24
|
-
return withDeprecationWarning(Story, context, '`Panel` will be deprecated in Astro-UI 1.0.0, use `OverlayPanel` instead.');
|
25
|
-
}]
|
26
|
-
};
|
27
|
-
export var Default = function Default(_ref) {
|
28
|
-
var args = _extends({}, _ref);
|
29
|
-
|
30
|
-
return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
|
31
|
-
isRow: true
|
32
|
-
}, ___EmotionJSX(Box, {
|
33
|
-
flexGrow: 1
|
34
|
-
}, ___EmotionJSX(Text, null, "Reveal panel with toggle below.")), ___EmotionJSX(Panel, args, "Panel content goes here.")));
|
35
|
-
};
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import userEvent from '@testing-library/user-event';
|
4
|
-
import axeTest from '../../utils/testUtils/testAxe';
|
5
|
-
import { render, screen } from '../../utils/testUtils/testWrapper';
|
6
|
-
import Panel from '.';
|
7
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
|
-
var testId = 'test-panel';
|
9
|
-
var defaultProps = {
|
10
|
-
'data-testid': testId
|
11
|
-
};
|
12
|
-
|
13
|
-
var getComponent = function getComponent() {
|
14
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
15
|
-
return render(___EmotionJSX(Panel, _extends({}, defaultProps, props)));
|
16
|
-
};
|
17
|
-
|
18
|
-
afterEach(function () {
|
19
|
-
jest.restoreAllMocks();
|
20
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
21
|
-
|
22
|
-
axeTest(getComponent);
|
23
|
-
test('default panel', function () {
|
24
|
-
getComponent({
|
25
|
-
children: ___EmotionJSX("div", null, "Test")
|
26
|
-
});
|
27
|
-
var panel = screen.getByTestId(testId);
|
28
|
-
var child = screen.queryByText('Test');
|
29
|
-
expect(panel).toBeInTheDocument();
|
30
|
-
expect(child).not.toBeInTheDocument();
|
31
|
-
expect(panel).toHaveAttribute('tabIndex', '-1');
|
32
|
-
});
|
33
|
-
test('panel when visible', function () {
|
34
|
-
getComponent({
|
35
|
-
isVisible: true,
|
36
|
-
children: ___EmotionJSX("div", null, "Test")
|
37
|
-
});
|
38
|
-
var panel = screen.getByTestId(testId);
|
39
|
-
var child = screen.queryByText('Test');
|
40
|
-
expect(panel).toBeInTheDocument();
|
41
|
-
expect(child).toBeInTheDocument();
|
42
|
-
expect(panel).toHaveAttribute('tabIndex', '0');
|
43
|
-
});
|
44
|
-
test('panel with focus', function () {
|
45
|
-
getComponent({
|
46
|
-
isVisible: true,
|
47
|
-
children: ___EmotionJSX("div", null, "Test")
|
48
|
-
});
|
49
|
-
var panel = screen.getByTestId(testId);
|
50
|
-
userEvent.tab();
|
51
|
-
expect(panel).toHaveFocus();
|
52
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './Panel';
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0.
|
4
|
-
// Replace with PopoverContainer
|
5
|
-
import React, { forwardRef } from 'react';
|
6
|
-
import Tippy from '@tippyjs/react/headless';
|
7
|
-
import PropTypes from 'prop-types';
|
8
|
-
import Box from '../Box';
|
9
|
-
import { useDeprecationWarning } from '../../hooks';
|
10
|
-
/**
|
11
|
-
* **WARNING: Will be deprecated in Astro 1.0.0, use `PopoverMenu` instead.**
|
12
|
-
*
|
13
|
-
* Popover component used for popover button menus and help hints.
|
14
|
-
* Built using Tippy.js [Tippy.js](https://atomiks.github.io/tippyjs/) and uses the
|
15
|
-
* available [props from Tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/).
|
16
|
-
*/
|
17
|
-
|
18
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
19
|
-
var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
|
20
|
-
var content = props.content,
|
21
|
-
trigger = props.trigger,
|
22
|
-
others = _objectWithoutProperties(props, ["content", "trigger"]);
|
23
|
-
|
24
|
-
useDeprecationWarning('`Popover` will be deprecated in Astro-UI 1.0.0, use `PopoverMenu` for menus instead. Or `Tooltip` when it is available.');
|
25
|
-
return ___EmotionJSX(Tippy, _extends({
|
26
|
-
ref: ref,
|
27
|
-
interactive: true,
|
28
|
-
render: function render(attrs) {
|
29
|
-
return ___EmotionJSX(Box, _extends({}, attrs, {
|
30
|
-
variant: "popover.container"
|
31
|
-
}), ___EmotionJSX(Box, {
|
32
|
-
role: "tooltip",
|
33
|
-
variant: "popover.content"
|
34
|
-
}, content), ___EmotionJSX(Box, {
|
35
|
-
className: "tippy-arrow",
|
36
|
-
"data-popper-arrow": "",
|
37
|
-
variant: "popover.arrow"
|
38
|
-
}));
|
39
|
-
}
|
40
|
-
}, trigger && {
|
41
|
-
trigger: trigger
|
42
|
-
}, others));
|
43
|
-
});
|
44
|
-
Popover.propTypes = {
|
45
|
-
/** The content of the popover. */
|
46
|
-
content: PropTypes.node,
|
47
|
-
|
48
|
-
/** Placement of the popover. Note that TippyJs's flip modifier can change this
|
49
|
-
* to the opposite placement if it has more space. [More information on placement](https://atomiks.github.io/tippyjs/v6/all-props/#placement) */
|
50
|
-
placement: PropTypes.string,
|
51
|
-
|
52
|
-
/** Determines the events that cause the tooltip to show.
|
53
|
-
* Multiple event names are separated by spaces.
|
54
|
-
* [More information on trigger](https://atomiks.github.io/tippyjs/v6/all-props/#trigger) */
|
55
|
-
trigger: PropTypes.string,
|
56
|
-
|
57
|
-
/** Delay in ms once a trigger event is fired before a popover shows or hides.
|
58
|
-
* [More information on delay](https://atomiks.github.io/tippyjs/v6/all-props/#delay) */
|
59
|
-
delay: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf([PropTypes.number])])
|
60
|
-
};
|
61
|
-
Popover.defaultProps = {
|
62
|
-
placement: 'top',
|
63
|
-
trigger: 'mouseenter focus'
|
64
|
-
};
|
65
|
-
export default Popover;
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0
|
3
|
-
import React from 'react';
|
4
|
-
import MoreVertIcon from 'mdi-react/MoreVertIcon';
|
5
|
-
import { action } from '@storybook/addon-actions';
|
6
|
-
import Popover from '../Popover/Popover';
|
7
|
-
import Button from '../Button/Button';
|
8
|
-
import Icon from '../Icon/Icon';
|
9
|
-
import Link from '../Link/Link';
|
10
|
-
import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
|
11
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
12
|
-
export default {
|
13
|
-
title: 'Deprecated/Popover',
|
14
|
-
component: Popover,
|
15
|
-
argTypes: {
|
16
|
-
content: {
|
17
|
-
control: {
|
18
|
-
type: 'text'
|
19
|
-
},
|
20
|
-
defaultValue: 'Hi, I\'m a popover!'
|
21
|
-
}
|
22
|
-
},
|
23
|
-
decorators: [function (Story, context) {
|
24
|
-
return withDeprecationWarning(Story, context, '`Popover` will be deprecated in Astro-UI 1.0.0, use `PopoverMenu` for menus instead. Or `Tooltip` when it is available.');
|
25
|
-
}]
|
26
|
-
};
|
27
|
-
export var Default = function Default(_ref) {
|
28
|
-
var args = _extends({}, _ref);
|
29
|
-
|
30
|
-
return ___EmotionJSX(Popover, args, ___EmotionJSX(Button, null, "Hover over button"));
|
31
|
-
};
|
32
|
-
export var PopoverMenu = function PopoverMenu() {
|
33
|
-
return ___EmotionJSX(Popover, {
|
34
|
-
delay: [null, 500],
|
35
|
-
trigger: "click",
|
36
|
-
content: // Content will be replaced with Menu component which is still in development
|
37
|
-
___EmotionJSX(React.Fragment, null, ___EmotionJSX(Link, {
|
38
|
-
onPress: action('onPress')
|
39
|
-
}, "Edit"), ___EmotionJSX("br", null), ___EmotionJSX(Link, {
|
40
|
-
onPress: action('onPress')
|
41
|
-
}, "Duplicate"), ___EmotionJSX("br", null), ___EmotionJSX(Link, {
|
42
|
-
onPress: action('onPress')
|
43
|
-
}, "Delete"), ___EmotionJSX("br", null)),
|
44
|
-
placement: "bottom"
|
45
|
-
}, ___EmotionJSX(Button, {
|
46
|
-
variant: "icon",
|
47
|
-
ml: "sm"
|
48
|
-
}, ___EmotionJSX(Icon, {
|
49
|
-
icon: MoreVertIcon,
|
50
|
-
size: 20
|
51
|
-
})));
|
52
|
-
};
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
|
2
|
-
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
|
3
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0
|
4
|
-
import React from 'react';
|
5
|
-
import { render, screen, waitFor } from '@testing-library/react';
|
6
|
-
import userEvent from '@testing-library/user-event';
|
7
|
-
import Popover from './Popover';
|
8
|
-
import Button from '../Button/Button';
|
9
|
-
import Link from '../Link/Link';
|
10
|
-
import axeTest from '../../utils/testUtils/testAxe';
|
11
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
12
|
-
var defaultProps = {
|
13
|
-
content: ___EmotionJSX(Link, null, "Click Me!")
|
14
|
-
};
|
15
|
-
|
16
|
-
var getComponent = function getComponent() {
|
17
|
-
return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(Popover, defaultProps, ___EmotionJSX(Button, null, "Mock Button"))));
|
18
|
-
}; // Need to be added to each test file to test accessibility using axe.
|
19
|
-
|
20
|
-
|
21
|
-
axeTest(getComponent); // NOTE: We must use waitFor to assert the async DOM changes that occur
|
22
|
-
|
23
|
-
test('renders a popover when target is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
24
|
-
var button, popover;
|
25
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
26
|
-
while (1) {
|
27
|
-
switch (_context.prev = _context.next) {
|
28
|
-
case 0:
|
29
|
-
getComponent();
|
30
|
-
button = screen.getByRole('button');
|
31
|
-
_context.next = 4;
|
32
|
-
return waitFor(function () {
|
33
|
-
return userEvent.click(button);
|
34
|
-
});
|
35
|
-
|
36
|
-
case 4:
|
37
|
-
popover = screen.getByRole('tooltip');
|
38
|
-
expect(popover).toBeInTheDocument();
|
39
|
-
|
40
|
-
case 6:
|
41
|
-
case "end":
|
42
|
-
return _context.stop();
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}, _callee);
|
46
|
-
})));
|
47
|
-
test('it does not render a popover when the target is not clicked', function () {
|
48
|
-
getComponent();
|
49
|
-
var popover = screen.queryByRole('tooltip');
|
50
|
-
expect(popover).not.toBeInTheDocument();
|
51
|
-
});
|
52
|
-
test('renders content in the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
53
|
-
var button, link;
|
54
|
-
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
55
|
-
while (1) {
|
56
|
-
switch (_context2.prev = _context2.next) {
|
57
|
-
case 0:
|
58
|
-
getComponent();
|
59
|
-
button = screen.getByRole('button');
|
60
|
-
_context2.next = 4;
|
61
|
-
return waitFor(function () {
|
62
|
-
return userEvent.click(button);
|
63
|
-
});
|
64
|
-
|
65
|
-
case 4:
|
66
|
-
link = screen.getByRole('link');
|
67
|
-
expect(link).toBeInTheDocument();
|
68
|
-
|
69
|
-
case 6:
|
70
|
-
case "end":
|
71
|
-
return _context2.stop();
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}, _callee2);
|
75
|
-
})));
|