@pingux/astro 1.0.0-alpha.19 → 1.0.0-alpha.22
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 +30 -0
- package/lib/cjs/components/Button/Button.js +5 -24
- package/lib/cjs/components/Button/Button.test.js +0 -24
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +1 -1
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
- package/lib/cjs/index.js +48 -136
- package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
- package/lib/cjs/recipes/ArrayField.stories.js +3 -3
- package/lib/cjs/styles/theme.js +0 -3
- package/lib/cjs/styles/variants/boxes.js +2 -16
- package/lib/cjs/styles/variants/buttons.js +37 -28
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/Button/Button.js +7 -24
- package/lib/components/Button/Button.test.js +0 -20
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/MultivaluesField/MultivaluesField.js +1 -1
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
- package/lib/index.js +0 -8
- package/lib/layouts/SchemaFormLayout.stories.js +2 -19
- package/lib/recipes/ArrayField.stories.js +3 -3
- package/lib/styles/theme.js +0 -3
- package/lib/styles/variants/boxes.js +1 -16
- package/lib/styles/variants/buttons.js +36 -28
- 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/DropdownField/index.js +0 -18
- 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,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,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 _DropdownField["default"];
|
15
|
-
}
|
16
|
-
});
|
17
|
-
|
18
|
-
var _DropdownField = _interopRequireDefault(require("./DropdownField"));
|
@@ -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"));
|
@@ -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;
|
@@ -1,80 +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.PopoverMenu = 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 _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
|
18
|
-
|
19
|
-
var _addonActions = require("@storybook/addon-actions");
|
20
|
-
|
21
|
-
var _Popover = _interopRequireDefault(require("../Popover/Popover"));
|
22
|
-
|
23
|
-
var _Button = _interopRequireDefault(require("../Button/Button"));
|
24
|
-
|
25
|
-
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
26
|
-
|
27
|
-
var _Link = _interopRequireDefault(require("../Link/Link"));
|
28
|
-
|
29
|
-
var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
|
30
|
-
|
31
|
-
var _react2 = require("@emotion/react");
|
32
|
-
|
33
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0
|
34
|
-
var _default = {
|
35
|
-
title: 'Deprecated/Popover',
|
36
|
-
component: _Popover["default"],
|
37
|
-
argTypes: {
|
38
|
-
content: {
|
39
|
-
control: {
|
40
|
-
type: 'text'
|
41
|
-
},
|
42
|
-
defaultValue: 'Hi, I\'m a popover!'
|
43
|
-
}
|
44
|
-
},
|
45
|
-
decorators: [function (Story, context) {
|
46
|
-
return (0, _withDeprecationWarning["default"])(Story, context, '`Popover` will be deprecated in Astro-UI 1.0.0, use `PopoverMenu` for menus instead. Or `Tooltip` when it is available.');
|
47
|
-
}]
|
48
|
-
};
|
49
|
-
exports["default"] = _default;
|
50
|
-
|
51
|
-
var Default = function Default(_ref) {
|
52
|
-
var args = (0, _extends2["default"])({}, _ref);
|
53
|
-
return (0, _react2.jsx)(_Popover["default"], args, (0, _react2.jsx)(_Button["default"], null, "Hover over button"));
|
54
|
-
};
|
55
|
-
|
56
|
-
exports.Default = Default;
|
57
|
-
|
58
|
-
var PopoverMenu = function PopoverMenu() {
|
59
|
-
return (0, _react2.jsx)(_Popover["default"], {
|
60
|
-
delay: [null, 500],
|
61
|
-
trigger: "click",
|
62
|
-
content: // Content will be replaced with Menu component which is still in development
|
63
|
-
(0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Link["default"], {
|
64
|
-
onPress: (0, _addonActions.action)('onPress')
|
65
|
-
}, "Edit"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Link["default"], {
|
66
|
-
onPress: (0, _addonActions.action)('onPress')
|
67
|
-
}, "Duplicate"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Link["default"], {
|
68
|
-
onPress: (0, _addonActions.action)('onPress')
|
69
|
-
}, "Delete"), (0, _react2.jsx)("br", null)),
|
70
|
-
placement: "bottom"
|
71
|
-
}, (0, _react2.jsx)(_Button["default"], {
|
72
|
-
variant: "icon",
|
73
|
-
ml: "sm"
|
74
|
-
}, (0, _react2.jsx)(_Icon["default"], {
|
75
|
-
icon: _MoreVertIcon["default"],
|
76
|
-
size: 20
|
77
|
-
})));
|
78
|
-
};
|
79
|
-
|
80
|
-
exports.PopoverMenu = PopoverMenu;
|
@@ -1,91 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
|
6
|
-
|
7
|
-
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
|
8
|
-
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
10
|
-
|
11
|
-
var _react2 = require("@testing-library/react");
|
12
|
-
|
13
|
-
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
14
|
-
|
15
|
-
var _Popover = _interopRequireDefault(require("./Popover"));
|
16
|
-
|
17
|
-
var _Button = _interopRequireDefault(require("../Button/Button"));
|
18
|
-
|
19
|
-
var _Link = _interopRequireDefault(require("../Link/Link"));
|
20
|
-
|
21
|
-
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
22
|
-
|
23
|
-
var _react3 = require("@emotion/react");
|
24
|
-
|
25
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0
|
26
|
-
var defaultProps = {
|
27
|
-
content: (0, _react3.jsx)(_Link["default"], null, "Click Me!")
|
28
|
-
};
|
29
|
-
|
30
|
-
var getComponent = function getComponent() {
|
31
|
-
return (0, _react2.render)((0, _react3.jsx)(_react["default"].Fragment, null, (0, _react3.jsx)(_Popover["default"], defaultProps, (0, _react3.jsx)(_Button["default"], null, "Mock Button"))));
|
32
|
-
}; // Need to be added to each test file to test accessibility using axe.
|
33
|
-
|
34
|
-
|
35
|
-
(0, _testAxe["default"])(getComponent); // NOTE: We must use waitFor to assert the async DOM changes that occur
|
36
|
-
|
37
|
-
test('renders a popover when target is clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
38
|
-
var button, popover;
|
39
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
40
|
-
while (1) {
|
41
|
-
switch (_context.prev = _context.next) {
|
42
|
-
case 0:
|
43
|
-
getComponent();
|
44
|
-
button = _react2.screen.getByRole('button');
|
45
|
-
_context.next = 4;
|
46
|
-
return (0, _react2.waitFor)(function () {
|
47
|
-
return _userEvent["default"].click(button);
|
48
|
-
});
|
49
|
-
|
50
|
-
case 4:
|
51
|
-
popover = _react2.screen.getByRole('tooltip');
|
52
|
-
expect(popover).toBeInTheDocument();
|
53
|
-
|
54
|
-
case 6:
|
55
|
-
case "end":
|
56
|
-
return _context.stop();
|
57
|
-
}
|
58
|
-
}
|
59
|
-
}, _callee);
|
60
|
-
})));
|
61
|
-
test('it does not render a popover when the target is not clicked', function () {
|
62
|
-
getComponent();
|
63
|
-
|
64
|
-
var popover = _react2.screen.queryByRole('tooltip');
|
65
|
-
|
66
|
-
expect(popover).not.toBeInTheDocument();
|
67
|
-
});
|
68
|
-
test('renders content in the popover', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
69
|
-
var button, link;
|
70
|
-
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
71
|
-
while (1) {
|
72
|
-
switch (_context2.prev = _context2.next) {
|
73
|
-
case 0:
|
74
|
-
getComponent();
|
75
|
-
button = _react2.screen.getByRole('button');
|
76
|
-
_context2.next = 4;
|
77
|
-
return (0, _react2.waitFor)(function () {
|
78
|
-
return _userEvent["default"].click(button);
|
79
|
-
});
|
80
|
-
|
81
|
-
case 4:
|
82
|
-
link = _react2.screen.getByRole('link');
|
83
|
-
expect(link).toBeInTheDocument();
|
84
|
-
|
85
|
-
case 6:
|
86
|
-
case "end":
|
87
|
-
return _context2.stop();
|
88
|
-
}
|
89
|
-
}
|
90
|
-
}, _callee2);
|
91
|
-
})));
|
@@ -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 _Popover["default"];
|
15
|
-
}
|
16
|
-
});
|
17
|
-
|
18
|
-
var _Popover = _interopRequireDefault(require("./Popover"));
|