@pingux/astro 1.0.0-alpha.9 → 1.1.0-alpha.0
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 +147 -0
- package/README.md +5 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/cjs/components/Button/Button.js +5 -24
- package/lib/cjs/components/Button/Button.stories.js +5 -11
- package/lib/cjs/components/Button/Button.test.js +0 -24
- package/lib/cjs/components/Chip/Chip.js +26 -10
- package/lib/cjs/components/Chip/Chip.stories.js +44 -5
- package/lib/cjs/components/Chip/Chip.test.js +9 -0
- package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
- package/lib/cjs/components/IconButton/IconButton.js +17 -7
- package/lib/cjs/components/IconButton/IconButton.test.js +0 -1
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/ListView/ListView.js +4 -3
- package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +1 -1
- 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/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 +5 -7
- package/lib/cjs/styles/variants/boxes.js +22 -19
- package/lib/cjs/styles/variants/buttons.js +38 -29
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/components/Button/Button.js +7 -24
- package/lib/components/Button/Button.stories.js +5 -10
- package/lib/components/Button/Button.test.js +0 -20
- package/lib/components/Chip/Chip.js +25 -10
- package/lib/components/Chip/Chip.stories.js +41 -5
- package/lib/components/Chip/Chip.test.js +9 -0
- package/lib/components/Chip/ChipContext.js +3 -0
- package/lib/components/IconButton/IconButton.js +17 -9
- package/lib/components/IconButton/IconButton.test.js +0 -1
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/ListView/ListView.js +4 -3
- package/lib/components/ListViewItem/ListViewItem.js +3 -5
- package/lib/components/MultivaluesField/MultivaluesField.js +1 -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/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 +5 -7
- package/lib/styles/variants/boxes.js +21 -19
- package/lib/styles/variants/buttons.js +37 -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,86 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
|
9
|
-
exports["default"] = void 0;
|
10
|
-
var container = {
|
11
|
-
position: 'relative',
|
12
|
-
backgroundColor: 'accent.20',
|
13
|
-
color: 'white',
|
14
|
-
borderRadius: 4,
|
15
|
-
fontSize: 'md',
|
16
|
-
lineHeight: 1.4,
|
17
|
-
outline: 0,
|
18
|
-
transitionProperty: 'transform,visibility,opacity',
|
19
|
-
'&[data-animation=fade][data-state=hidden]': {
|
20
|
-
opacity: 0
|
21
|
-
},
|
22
|
-
'&[data-placement^=top] > .tippy-arrow': {
|
23
|
-
bottom: 0
|
24
|
-
},
|
25
|
-
'&[data-placement^=top] > .tippy-arrow:before': {
|
26
|
-
bottom: -7,
|
27
|
-
left: 0,
|
28
|
-
borderWidth: '8px 8px 0',
|
29
|
-
borderTopColor: 'initial',
|
30
|
-
transformOrigin: 'center top'
|
31
|
-
},
|
32
|
-
'&[data-placement^=bottom] > .tippy-arrow': {
|
33
|
-
top: 0
|
34
|
-
},
|
35
|
-
'&[data-placement^=bottom] > .tippy-arrow:before': {
|
36
|
-
top: -7,
|
37
|
-
left: 0,
|
38
|
-
borderWidth: '0 8px 8px',
|
39
|
-
borderBottomColor: 'initial',
|
40
|
-
transformOrigin: 'center bottom'
|
41
|
-
},
|
42
|
-
'&[data-placement^=left] > .tippy-arrow': {
|
43
|
-
right: 0
|
44
|
-
},
|
45
|
-
'&[data-placement^=left] > .tippy-arrow:before': {
|
46
|
-
borderWidth: '8px 0 8px 8px',
|
47
|
-
borderLeftColor: 'initial',
|
48
|
-
right: -7,
|
49
|
-
transformOrigin: 'center left'
|
50
|
-
},
|
51
|
-
'&[data-placement^=right] > .tippy-arrow': {
|
52
|
-
left: 0
|
53
|
-
},
|
54
|
-
'&[data-placement^=right] > .tippy-arrow:before': {
|
55
|
-
left: -7,
|
56
|
-
borderWidth: '8px 8px 8px 0',
|
57
|
-
borderRightColor: 'initial',
|
58
|
-
transformOrigin: 'center right'
|
59
|
-
},
|
60
|
-
'&[data-inertia][data-state=visible]': {
|
61
|
-
transitionTimingFunction: 'cubic-bezier(.54,1.5,.38,1.11)'
|
62
|
-
}
|
63
|
-
};
|
64
|
-
var content = {
|
65
|
-
position: 'relative',
|
66
|
-
px: 'sm',
|
67
|
-
py: 'xs',
|
68
|
-
zIndex: 1
|
69
|
-
};
|
70
|
-
var arrow = {
|
71
|
-
width: 16,
|
72
|
-
height: 16,
|
73
|
-
color: 'accent.20',
|
74
|
-
'&:before': {
|
75
|
-
content: '""',
|
76
|
-
position: 'absolute',
|
77
|
-
borderColor: 'transparent',
|
78
|
-
borderStyle: 'solid'
|
79
|
-
}
|
80
|
-
};
|
81
|
-
var _default = {
|
82
|
-
arrow: arrow,
|
83
|
-
container: container,
|
84
|
-
content: content
|
85
|
-
};
|
86
|
-
exports["default"] = _default;
|
@@ -1,90 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
|
-
import React, { useRef, useImperativeHandle } from 'react';
|
4
|
-
import PropTypes from 'prop-types';
|
5
|
-
import { Select as RSelect } from '@rebass/forms';
|
6
|
-
import { useFocusRing } from '@react-aria/focus';
|
7
|
-
import { useStatusClasses } from '../../hooks';
|
8
|
-
/**
|
9
|
-
* Basic dropdown menu input.
|
10
|
-
* Accepts most styling props from [styled-system](https://styled-system.com/table).
|
11
|
-
* Built on top of the [Select component from Rebass Forms](https://rebassjs.org/forms/select).
|
12
|
-
*/
|
13
|
-
|
14
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
15
|
-
var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
16
|
-
var className = props.className,
|
17
|
-
children = props.children,
|
18
|
-
hasNoneOption = props.hasNoneOption,
|
19
|
-
hasDisabledFirstOption = props.hasDisabledFirstOption,
|
20
|
-
firstLabel = props.firstLabel,
|
21
|
-
noneLabel = props.noneLabel,
|
22
|
-
defaultValue = props.defaultValue,
|
23
|
-
value = props.value,
|
24
|
-
others = _objectWithoutProperties(props, ["className", "children", "hasNoneOption", "hasDisabledFirstOption", "firstLabel", "noneLabel", "defaultValue", "value"]);
|
25
|
-
|
26
|
-
var dropdownRef = useRef();
|
27
|
-
/* istanbul ignore next */
|
28
|
-
|
29
|
-
useImperativeHandle(ref, function () {
|
30
|
-
return dropdownRef.current;
|
31
|
-
});
|
32
|
-
|
33
|
-
var _useFocusRing = useFocusRing(),
|
34
|
-
isFocusVisible = _useFocusRing.isFocusVisible,
|
35
|
-
focusProps = _useFocusRing.focusProps;
|
36
|
-
|
37
|
-
var _useStatusClasses = useStatusClasses(className, {
|
38
|
-
isFocused: isFocusVisible
|
39
|
-
}),
|
40
|
-
classNames = _useStatusClasses.classNames;
|
41
|
-
|
42
|
-
return ___EmotionJSX(RSelect, _extends({
|
43
|
-
ref: dropdownRef,
|
44
|
-
className: classNames,
|
45
|
-
defaultValue: value ? undefined : defaultValue || '',
|
46
|
-
value: value
|
47
|
-
}, others, focusProps), !hasNoneOption && ___EmotionJSX("option", {
|
48
|
-
key: "__empty",
|
49
|
-
value: "",
|
50
|
-
disabled: hasDisabledFirstOption
|
51
|
-
}, firstLabel), hasNoneOption && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("option", {
|
52
|
-
key: "__empty",
|
53
|
-
value: "",
|
54
|
-
disabled: hasDisabledFirstOption
|
55
|
-
}, noneLabel || firstLabel), ___EmotionJSX("option", {
|
56
|
-
key: "__spacer",
|
57
|
-
disabled: true
|
58
|
-
}, "--------")), children);
|
59
|
-
});
|
60
|
-
Dropdown.propTypes = {
|
61
|
-
/** Displays a none option within the dropdown options */
|
62
|
-
hasNoneOption: PropTypes.bool,
|
63
|
-
|
64
|
-
/** Whether the first option is disabled. Useful to prevent reselection of the first option. */
|
65
|
-
hasDisabledFirstOption: PropTypes.bool,
|
66
|
-
|
67
|
-
/** Id of the selected element */
|
68
|
-
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
69
|
-
|
70
|
-
/** Label for first option. */
|
71
|
-
firstLabel: PropTypes.string,
|
72
|
-
|
73
|
-
/** Label for none option. `firstLabel` prop can also be used. */
|
74
|
-
noneLabel: PropTypes.string,
|
75
|
-
|
76
|
-
/** Value of the select (controlled). */
|
77
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
78
|
-
|
79
|
-
/** Default value of the select (uncontrolled). */
|
80
|
-
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
81
|
-
|
82
|
-
/** Handler that is called when the element's selection state changes. */
|
83
|
-
onChange: PropTypes.func
|
84
|
-
};
|
85
|
-
Dropdown.defaultProps = {
|
86
|
-
hasNoneOption: false,
|
87
|
-
firstLabel: 'Select an option'
|
88
|
-
};
|
89
|
-
Dropdown.displayName = 'Dropdown';
|
90
|
-
export default Dropdown;
|
@@ -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';
|