@pingux/astro 1.0.0-alpha.9 → 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.
Files changed (94) hide show
  1. package/CHANGELOG.md +131 -0
  2. package/README.md +5 -0
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  4. package/lib/cjs/components/Button/Button.js +5 -24
  5. package/lib/cjs/components/Button/Button.stories.js +5 -11
  6. package/lib/cjs/components/Button/Button.test.js +0 -24
  7. package/lib/cjs/components/Chip/Chip.js +26 -10
  8. package/lib/cjs/components/Chip/Chip.stories.js +44 -5
  9. package/lib/cjs/components/Chip/Chip.test.js +9 -0
  10. package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
  11. package/lib/cjs/components/IconButton/IconButton.js +17 -7
  12. package/lib/cjs/components/IconButton/IconButton.test.js +0 -1
  13. package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
  14. package/lib/cjs/components/ListView/ListView.js +4 -3
  15. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  16. package/lib/cjs/components/Stepper/Stepper.js +1 -0
  17. package/lib/cjs/components/Tab/Tab.js +5 -3
  18. package/lib/cjs/components/Tabs/Tabs.js +3 -0
  19. package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
  20. package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
  21. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
  22. package/lib/cjs/index.js +48 -136
  23. package/lib/cjs/layouts/ListLayout.stories.js +2 -1
  24. package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
  25. package/lib/cjs/recipes/ArrayField.stories.js +3 -3
  26. package/lib/cjs/styles/forms/input.js +4 -0
  27. package/lib/cjs/styles/theme.js +0 -3
  28. package/lib/cjs/styles/variants/accordion.js +5 -7
  29. package/lib/cjs/styles/variants/boxes.js +20 -18
  30. package/lib/cjs/styles/variants/buttons.js +2 -28
  31. package/lib/cjs/styles/variants/variants.js +0 -3
  32. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  33. package/lib/components/Button/Button.js +7 -24
  34. package/lib/components/Button/Button.stories.js +5 -10
  35. package/lib/components/Button/Button.test.js +0 -20
  36. package/lib/components/Chip/Chip.js +25 -10
  37. package/lib/components/Chip/Chip.stories.js +41 -5
  38. package/lib/components/Chip/Chip.test.js +9 -0
  39. package/lib/components/Chip/ChipContext.js +3 -0
  40. package/lib/components/IconButton/IconButton.js +17 -9
  41. package/lib/components/IconButton/IconButton.test.js +0 -1
  42. package/lib/components/ListItem/ListItem.stories.js +0 -2
  43. package/lib/components/ListView/ListView.js +4 -3
  44. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  45. package/lib/components/Stepper/Stepper.js +1 -0
  46. package/lib/components/Tab/Tab.js +5 -3
  47. package/lib/components/Tabs/Tabs.js +3 -0
  48. package/lib/components/Tabs/Tabs.stories.js +3 -4
  49. package/lib/components/Tabs/Tabs.test.js +40 -15
  50. package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
  51. package/lib/index.js +0 -8
  52. package/lib/layouts/ListLayout.stories.js +2 -1
  53. package/lib/layouts/SchemaFormLayout.stories.js +2 -19
  54. package/lib/recipes/ArrayField.stories.js +3 -3
  55. package/lib/styles/forms/input.js +4 -0
  56. package/lib/styles/theme.js +0 -3
  57. package/lib/styles/variants/accordion.js +5 -7
  58. package/lib/styles/variants/boxes.js +20 -18
  59. package/lib/styles/variants/buttons.js +2 -28
  60. package/lib/styles/variants/variants.js +0 -2
  61. package/package.json +1 -1
  62. package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
  63. package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
  64. package/lib/cjs/components/Dropdown/index.js +0 -18
  65. package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
  66. package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
  67. package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
  68. package/lib/cjs/components/Panel/Panel.js +0 -101
  69. package/lib/cjs/components/Panel/Panel.stories.js +0 -57
  70. package/lib/cjs/components/Panel/Panel.test.js +0 -72
  71. package/lib/cjs/components/Panel/index.js +0 -18
  72. package/lib/cjs/components/Popover/Popover.js +0 -87
  73. package/lib/cjs/components/Popover/Popover.stories.js +0 -80
  74. package/lib/cjs/components/Popover/Popover.test.js +0 -91
  75. package/lib/cjs/components/Popover/index.js +0 -18
  76. package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
  77. package/lib/cjs/styles/variants/popover.js +0 -86
  78. package/lib/components/Dropdown/Dropdown.js +0 -90
  79. package/lib/components/Dropdown/Dropdown.test.js +0 -62
  80. package/lib/components/Dropdown/index.js +0 -1
  81. package/lib/components/DropdownField/DropdownField.js +0 -155
  82. package/lib/components/DropdownField/DropdownField.stories.js +0 -222
  83. package/lib/components/DropdownField/DropdownField.test.js +0 -60
  84. package/lib/components/DropdownField/index.js +0 -1
  85. package/lib/components/Panel/Panel.js +0 -71
  86. package/lib/components/Panel/Panel.stories.js +0 -35
  87. package/lib/components/Panel/Panel.test.js +0 -52
  88. package/lib/components/Panel/index.js +0 -1
  89. package/lib/components/Popover/Popover.js +0 -65
  90. package/lib/components/Popover/Popover.stories.js +0 -52
  91. package/lib/components/Popover/Popover.test.js +0 -75
  92. package/lib/components/Popover/index.js +0 -2
  93. package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
  94. package/lib/styles/variants/popover.js +0 -76
@@ -1,62 +0,0 @@
1
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
- import React from 'react';
3
- import axeTest from '../../utils/testUtils/testAxe';
4
- import { render, screen, within } from '../../utils/testUtils/testWrapper';
5
- import Dropdown from '.';
6
- import { jsx as ___EmotionJSX } from "@emotion/react";
7
- var testId = 'test-box';
8
- var defaultProps = {
9
- 'data-testid': testId
10
- };
11
-
12
- var getComponent = function getComponent() {
13
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
14
- var children = props.children;
15
- return render(___EmotionJSX(Dropdown, _extends({}, defaultProps, props), children));
16
- }; // Need to be added to each test file to test accessibility using axe.
17
-
18
-
19
- axeTest(getComponent, {
20
- // Dropdown with label provided by DropdownField
21
- rules: {
22
- 'select-name': {
23
- enabled: false
24
- }
25
- }
26
- });
27
- test('dropdown renders', function () {
28
- getComponent();
29
- var dropdown = screen.getByTestId(testId);
30
- expect(dropdown).toBeInstanceOf(HTMLSelectElement);
31
- expect(dropdown).toBeInTheDocument();
32
- });
33
- test('hasNoneOption prop renders none option', function () {
34
- getComponent({
35
- hasNoneOption: true,
36
- noneLabel: 'None'
37
- });
38
- expect(within(document).getByText('None')).toBeInTheDocument();
39
- });
40
- test('default option is first one', function () {
41
- getComponent();
42
- var firstOption = screen.getByRole('option');
43
- expect(firstOption.value).toEqual('');
44
- expect(firstOption).toHaveAttribute('selected', '');
45
- expect(firstOption).toBeEnabled();
46
- });
47
- test('default option is disabled when hasDisabledFirstOption is passed in', function () {
48
- getComponent({
49
- hasDisabledFirstOption: true
50
- });
51
- var firstOption = screen.getByRole('option');
52
- expect(firstOption.value).toEqual('');
53
- expect(firstOption).toHaveAttribute('selected', '');
54
- expect(firstOption).toBeDisabled();
55
- });
56
- test('default option is not first one when custom defaultValue is passed in', function () {
57
- getComponent({
58
- defaultValue: '1'
59
- });
60
- var firstOption = screen.getByRole('option');
61
- expect(firstOption).not.toHaveAttribute('selected', '');
62
- });
@@ -1 +0,0 @@
1
- export { default } from './Dropdown';
@@ -1,155 +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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
10
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
11
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
12
-
13
- 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; }
14
-
15
- 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; }
16
-
17
- import React, { forwardRef, useRef, useImperativeHandle } from 'react';
18
- import PropTypes from 'prop-types'; // TODO: Deprecate this component in Astro-UI 1.0.0
19
-
20
- import { useDeprecationWarning, useField } from '../../hooks';
21
- import statuses from '../../utils/devUtils/constants/statuses';
22
- import Box from '../Box';
23
- import Dropdown from '../Dropdown';
24
- import FieldHelperText from '../FieldHelperText';
25
- import Label from '../Label';
26
- /**
27
- * **WARNING: Will be deprecated in Astro 1.0.0, use `SelectField` instead.**
28
- *
29
- * Combines a dropdown, label, and helper text for a complete, form-ready solution.
30
- */
31
-
32
- import { jsx as ___EmotionJSX } from "@emotion/react";
33
- var DropdownField = /*#__PURE__*/forwardRef(function (props, ref) {
34
- var children = props.children,
35
- controlProps = props.controlProps,
36
- firstLabel = props.firstLabel,
37
- hasAutoFocus = props.hasAutoFocus,
38
- hasDisabledFirstOption = props.hasDisabledFirstOption,
39
- hasNoneOption = props.hasNoneOption,
40
- helperText = props.helperText,
41
- noneLabel = props.noneLabel,
42
- status = props.status;
43
-
44
- var _useField = useField(_objectSpread({
45
- autoFocus: hasAutoFocus,
46
- controlProps: _objectSpread({
47
- firstLabel: firstLabel,
48
- hasDisabledFirstOption: hasDisabledFirstOption,
49
- hasNoneOption: hasNoneOption,
50
- noneLabel: noneLabel
51
- }, controlProps)
52
- }, props)),
53
- fieldContainerProps = _useField.fieldContainerProps,
54
- fieldControlProps = _useField.fieldControlProps,
55
- fieldLabelProps = _useField.fieldLabelProps;
56
-
57
- var dropdownRef = useRef();
58
- /* istanbul ignore next */
59
-
60
- useImperativeHandle(ref, function () {
61
- return dropdownRef.current;
62
- });
63
- useDeprecationWarning('`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
64
- return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
65
- variant: "forms.input.container",
66
- className: fieldControlProps.className
67
- }, ___EmotionJSX(Dropdown, _extends({
68
- ref: dropdownRef
69
- }, fieldControlProps), children)), helperText && ___EmotionJSX(FieldHelperText, {
70
- status: status
71
- }, helperText));
72
- });
73
- DropdownField.propTypes = {
74
- /** The default value of the select field (uncontrolled). */
75
- defaultValue: PropTypes.string,
76
-
77
- /** The value of the select field (controlled). */
78
- value: PropTypes.string,
79
-
80
- /** Displays a none option within the dropdown options */
81
- hasNoneOption: PropTypes.bool,
82
-
83
- /** Whether the first option is disabled. Useful to prevent reselection of the first option. */
84
- hasDisabledFirstOption: PropTypes.bool,
85
-
86
- /** Label for first option. */
87
- firstLabel: PropTypes.string,
88
-
89
- /** Label for none option. `firstLabel` prop can also be used. */
90
- noneLabel: PropTypes.string,
91
-
92
- /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
93
- id: PropTypes.string,
94
-
95
- /** Whether the Dropdown is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
96
- isRequired: PropTypes.bool,
97
-
98
- /** @ignore Whether the Dropdown can be interacted
99
- * with but cannot have its selection state changed. */
100
- isReadOnly: PropTypes.bool,
101
-
102
- /** Whether the element should receive focus on render. */
103
- hasAutoFocus: PropTypes.bool,
104
-
105
- /** Whether the field has a status indicator. */
106
- hasNoStatusIndicator: PropTypes.bool,
107
-
108
- /** Text to display after the radio group label. Useful for errors or other info. */
109
- helperText: PropTypes.node,
110
-
111
- /** If present this prop will cause a help hint to render in the label of the field. */
112
- hintText: PropTypes.string,
113
-
114
- /** Determines the helper text styling. */
115
- status: PropTypes.oneOf(_Object$values(statuses)),
116
-
117
- /** Handler that is called when the element receives focus. */
118
- onFocus: PropTypes.func,
119
-
120
- /** Handler that is called when the element loses focus. */
121
- onBlur: PropTypes.func,
122
-
123
- /** Handler that is called when the element's focus status changes. */
124
- onFocusChange: PropTypes.func,
125
-
126
- /** Handler that is called when a key is pressed. */
127
- onKeyDown: PropTypes.func,
128
-
129
- /** Handler that is called when a key is released. */
130
- onKeyUp: PropTypes.func,
131
-
132
- /** Defines a string value that labels the current element. */
133
- 'aria-label': PropTypes.string,
134
-
135
- /** Identifies the element (or elements) that labels the current element. */
136
- 'aria-labelledby': PropTypes.string,
137
-
138
- /** Identifies the element (or elements) that describes the object. */
139
- 'aria-describedby': PropTypes.string,
140
-
141
- /**
142
- * Identifies the element (or elements) that provide a detailed, extended description for the
143
- * object.
144
- */
145
- 'aria-details': PropTypes.string,
146
-
147
- /** Props object that is spread directly into the select element. */
148
- controlProps: PropTypes.shape({})
149
- };
150
- DropdownField.defaultProps = {
151
- hasNoneOption: false,
152
- firstLabel: 'Select an option'
153
- };
154
- DropdownField.displayName = 'DropdownField';
155
- export default DropdownField;
@@ -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';