@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.
Files changed (142) hide show
  1. package/CHANGELOG.md +257 -0
  2. package/README.md +5 -0
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  4. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -0
  5. package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
  6. package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
  7. package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +33 -1
  8. package/lib/cjs/components/AccordionItem/AccordionItem.js +5 -4
  9. package/lib/cjs/components/Button/Button.js +6 -26
  10. package/lib/cjs/components/Button/Button.stories.js +7 -12
  11. package/lib/cjs/components/Button/Button.test.js +2 -25
  12. package/lib/cjs/components/Chip/Chip.js +26 -10
  13. package/lib/cjs/components/Chip/Chip.stories.js +44 -5
  14. package/lib/cjs/components/Chip/Chip.test.js +9 -0
  15. package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
  16. package/lib/cjs/components/ColorField/ColorField.js +1 -0
  17. package/lib/cjs/components/ComboBoxField/ComboBoxField.js +7 -0
  18. package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +25 -1
  19. package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +44 -0
  20. package/lib/cjs/components/FileInputField/FileItem.js +2 -1
  21. package/lib/cjs/components/IconButton/IconButton.js +17 -7
  22. package/lib/cjs/components/IconButton/IconButton.stories.js +8 -17
  23. package/lib/cjs/components/IconButton/IconButton.test.js +4 -6
  24. package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js +2 -1
  25. package/lib/cjs/components/List/List.js +3 -0
  26. package/lib/cjs/components/List/List.stories.js +7 -2
  27. package/lib/cjs/components/ListBox/ListBox.js +3 -6
  28. package/lib/cjs/components/ListBox/ListBox.test.js +2 -0
  29. package/lib/cjs/components/ListBox/Option.js +6 -0
  30. package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
  31. package/lib/cjs/components/ListView/ListView.js +4 -3
  32. package/lib/cjs/components/ListView/ListView.stories.js +580 -39
  33. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  34. package/lib/cjs/components/Messages/Message.js +2 -2
  35. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +3 -2
  36. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +15 -14
  37. package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js +15 -0
  38. package/lib/cjs/components/Stepper/Stepper.js +1 -0
  39. package/lib/cjs/components/Tab/Tab.js +5 -3
  40. package/lib/cjs/components/Tabs/Tabs.js +3 -0
  41. package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
  42. package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
  43. package/lib/cjs/components/TextArea/TextArea.js +5 -1
  44. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
  45. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
  46. package/lib/cjs/index.js +48 -136
  47. package/lib/cjs/layouts/ListLayout.stories.js +2 -1
  48. package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
  49. package/lib/cjs/recipes/ArrayField.stories.js +3 -3
  50. package/lib/cjs/styles/forms/input.js +4 -0
  51. package/lib/cjs/styles/theme.js +0 -3
  52. package/lib/cjs/styles/variants/accordion.js +7 -9
  53. package/lib/cjs/styles/variants/boxes.js +22 -19
  54. package/lib/cjs/styles/variants/buttons.js +48 -29
  55. package/lib/cjs/styles/variants/variants.js +0 -3
  56. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  57. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +23 -1
  58. package/lib/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
  59. package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
  60. package/lib/components/AccordionGroup/AccordionGroup.test.js +30 -1
  61. package/lib/components/AccordionItem/AccordionItem.js +6 -5
  62. package/lib/components/Button/Button.js +8 -26
  63. package/lib/components/Button/Button.stories.js +7 -11
  64. package/lib/components/Button/Button.test.js +2 -21
  65. package/lib/components/Chip/Chip.js +25 -10
  66. package/lib/components/Chip/Chip.stories.js +41 -5
  67. package/lib/components/Chip/Chip.test.js +9 -0
  68. package/lib/components/Chip/ChipContext.js +3 -0
  69. package/lib/components/ColorField/ColorField.js +1 -0
  70. package/lib/components/ComboBoxField/ComboBoxField.js +7 -0
  71. package/lib/components/ComboBoxField/ComboBoxField.stories.js +21 -0
  72. package/lib/components/ComboBoxField/ComboBoxField.test.js +35 -0
  73. package/lib/components/FileInputField/FileItem.js +2 -1
  74. package/lib/components/IconButton/IconButton.js +17 -9
  75. package/lib/components/IconButton/IconButton.stories.js +7 -13
  76. package/lib/components/IconButton/IconButton.test.js +4 -6
  77. package/lib/components/ImageUploadField/ImagePreviewButton.js +2 -1
  78. package/lib/components/List/List.js +2 -0
  79. package/lib/components/List/List.stories.js +6 -2
  80. package/lib/components/ListBox/ListBox.js +3 -5
  81. package/lib/components/ListBox/ListBox.test.js +2 -0
  82. package/lib/components/ListBox/Option.js +6 -0
  83. package/lib/components/ListItem/ListItem.stories.js +0 -2
  84. package/lib/components/ListView/ListView.js +4 -3
  85. package/lib/components/ListView/ListView.stories.js +577 -39
  86. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  87. package/lib/components/Messages/Message.js +2 -2
  88. package/lib/components/MultivaluesField/MultivaluesField.js +3 -2
  89. package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -5
  90. package/lib/components/PopoverContainer/PopoverContainer.test.js +16 -1
  91. package/lib/components/Stepper/Stepper.js +1 -0
  92. package/lib/components/Tab/Tab.js +5 -3
  93. package/lib/components/Tabs/Tabs.js +3 -0
  94. package/lib/components/Tabs/Tabs.stories.js +3 -4
  95. package/lib/components/Tabs/Tabs.test.js +40 -15
  96. package/lib/components/TextArea/TextArea.js +5 -1
  97. package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
  98. package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
  99. package/lib/index.js +0 -8
  100. package/lib/layouts/ListLayout.stories.js +2 -1
  101. package/lib/layouts/SchemaFormLayout.stories.js +2 -19
  102. package/lib/recipes/ArrayField.stories.js +3 -3
  103. package/lib/styles/forms/input.js +4 -0
  104. package/lib/styles/theme.js +0 -3
  105. package/lib/styles/variants/accordion.js +7 -9
  106. package/lib/styles/variants/boxes.js +21 -19
  107. package/lib/styles/variants/buttons.js +47 -29
  108. package/lib/styles/variants/variants.js +0 -2
  109. package/package.json +1 -1
  110. package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
  111. package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
  112. package/lib/cjs/components/Dropdown/index.js +0 -18
  113. package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
  114. package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
  115. package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
  116. package/lib/cjs/components/Panel/Panel.js +0 -101
  117. package/lib/cjs/components/Panel/Panel.stories.js +0 -57
  118. package/lib/cjs/components/Panel/Panel.test.js +0 -72
  119. package/lib/cjs/components/Panel/index.js +0 -18
  120. package/lib/cjs/components/Popover/Popover.js +0 -87
  121. package/lib/cjs/components/Popover/Popover.stories.js +0 -80
  122. package/lib/cjs/components/Popover/Popover.test.js +0 -91
  123. package/lib/cjs/components/Popover/index.js +0 -18
  124. package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
  125. package/lib/cjs/styles/variants/popover.js +0 -86
  126. package/lib/components/Dropdown/Dropdown.js +0 -90
  127. package/lib/components/Dropdown/Dropdown.test.js +0 -62
  128. package/lib/components/Dropdown/index.js +0 -1
  129. package/lib/components/DropdownField/DropdownField.js +0 -155
  130. package/lib/components/DropdownField/DropdownField.stories.js +0 -222
  131. package/lib/components/DropdownField/DropdownField.test.js +0 -60
  132. package/lib/components/DropdownField/index.js +0 -1
  133. package/lib/components/Panel/Panel.js +0 -71
  134. package/lib/components/Panel/Panel.stories.js +0 -35
  135. package/lib/components/Panel/Panel.test.js +0 -52
  136. package/lib/components/Panel/index.js +0 -1
  137. package/lib/components/Popover/Popover.js +0 -65
  138. package/lib/components/Popover/Popover.stories.js +0 -52
  139. package/lib/components/Popover/Popover.test.js +0 -75
  140. package/lib/components/Popover/index.js +0 -2
  141. package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
  142. 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,2 +0,0 @@
1
- // TODO: popover-deprecate Remove when popover is deprecated in 1.0.0
2
- export { default } from './Popover';
@@ -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
- };