@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,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
|
-
})));
|
@@ -1,43 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import Link from 'mdi-react/LinkVariantIcon';
|
3
|
-
import Chip from '../components/Chip';
|
4
|
-
import Text from '../components/Text';
|
5
|
-
import Icon from '../components/Icon';
|
6
|
-
import Box from '../components/Box';
|
7
|
-
import Popover from '../components/Popover';
|
8
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
9
|
-
export default {
|
10
|
-
title: 'Recipes/InputBoxWithLinkedChip'
|
11
|
-
};
|
12
|
-
export var Default = function Default() {
|
13
|
-
return ___EmotionJSX(Box, {
|
14
|
-
variant: "forms.input.container",
|
15
|
-
width: "500px"
|
16
|
-
}, ___EmotionJSX(Box, {
|
17
|
-
variant: "forms.input",
|
18
|
-
height: "40px",
|
19
|
-
p: "0",
|
20
|
-
justifyContent: "center"
|
21
|
-
}, ___EmotionJSX(Popover, {
|
22
|
-
content: "steps.registration.formData.user",
|
23
|
-
placement: "bottom"
|
24
|
-
}, ___EmotionJSX(Chip, {
|
25
|
-
ml: "md",
|
26
|
-
bg: "#E5E9F8",
|
27
|
-
label: ___EmotionJSX(Box, {
|
28
|
-
isRow: true,
|
29
|
-
justifyContent: "center"
|
30
|
-
}, ___EmotionJSX(Icon, {
|
31
|
-
icon: Link,
|
32
|
-
color: "#253746",
|
33
|
-
size: 15,
|
34
|
-
alignSelf: "center",
|
35
|
-
mr: "xs"
|
36
|
-
}), ___EmotionJSX(Text, {
|
37
|
-
color: "#253746",
|
38
|
-
sx: {
|
39
|
-
textTransform: 'lowercase'
|
40
|
-
}
|
41
|
-
}, "user"))
|
42
|
-
}))));
|
43
|
-
};
|
@@ -1,76 +0,0 @@
|
|
1
|
-
var container = {
|
2
|
-
position: 'relative',
|
3
|
-
backgroundColor: 'accent.20',
|
4
|
-
color: 'white',
|
5
|
-
borderRadius: 4,
|
6
|
-
fontSize: 'md',
|
7
|
-
lineHeight: 1.4,
|
8
|
-
outline: 0,
|
9
|
-
transitionProperty: 'transform,visibility,opacity',
|
10
|
-
'&[data-animation=fade][data-state=hidden]': {
|
11
|
-
opacity: 0
|
12
|
-
},
|
13
|
-
'&[data-placement^=top] > .tippy-arrow': {
|
14
|
-
bottom: 0
|
15
|
-
},
|
16
|
-
'&[data-placement^=top] > .tippy-arrow:before': {
|
17
|
-
bottom: -7,
|
18
|
-
left: 0,
|
19
|
-
borderWidth: '8px 8px 0',
|
20
|
-
borderTopColor: 'initial',
|
21
|
-
transformOrigin: 'center top'
|
22
|
-
},
|
23
|
-
'&[data-placement^=bottom] > .tippy-arrow': {
|
24
|
-
top: 0
|
25
|
-
},
|
26
|
-
'&[data-placement^=bottom] > .tippy-arrow:before': {
|
27
|
-
top: -7,
|
28
|
-
left: 0,
|
29
|
-
borderWidth: '0 8px 8px',
|
30
|
-
borderBottomColor: 'initial',
|
31
|
-
transformOrigin: 'center bottom'
|
32
|
-
},
|
33
|
-
'&[data-placement^=left] > .tippy-arrow': {
|
34
|
-
right: 0
|
35
|
-
},
|
36
|
-
'&[data-placement^=left] > .tippy-arrow:before': {
|
37
|
-
borderWidth: '8px 0 8px 8px',
|
38
|
-
borderLeftColor: 'initial',
|
39
|
-
right: -7,
|
40
|
-
transformOrigin: 'center left'
|
41
|
-
},
|
42
|
-
'&[data-placement^=right] > .tippy-arrow': {
|
43
|
-
left: 0
|
44
|
-
},
|
45
|
-
'&[data-placement^=right] > .tippy-arrow:before': {
|
46
|
-
left: -7,
|
47
|
-
borderWidth: '8px 8px 8px 0',
|
48
|
-
borderRightColor: 'initial',
|
49
|
-
transformOrigin: 'center right'
|
50
|
-
},
|
51
|
-
'&[data-inertia][data-state=visible]': {
|
52
|
-
transitionTimingFunction: 'cubic-bezier(.54,1.5,.38,1.11)'
|
53
|
-
}
|
54
|
-
};
|
55
|
-
var content = {
|
56
|
-
position: 'relative',
|
57
|
-
px: 'sm',
|
58
|
-
py: 'xs',
|
59
|
-
zIndex: 1
|
60
|
-
};
|
61
|
-
var arrow = {
|
62
|
-
width: 16,
|
63
|
-
height: 16,
|
64
|
-
color: 'accent.20',
|
65
|
-
'&:before': {
|
66
|
-
content: '""',
|
67
|
-
position: 'absolute',
|
68
|
-
borderColor: 'transparent',
|
69
|
-
borderStyle: 'solid'
|
70
|
-
}
|
71
|
-
};
|
72
|
-
export default {
|
73
|
-
arrow: arrow,
|
74
|
-
container: container,
|
75
|
-
content: content
|
76
|
-
};
|