@pingux/astro 2.6.1-alpha.2 → 2.7.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/lib/cjs/components/IconButton/IconButton.js +2 -38
- package/lib/cjs/components/IconButton/IconButton.stories.js +2 -34
- package/lib/cjs/components/IconButton/iconButtonAttributes.js +100 -0
- package/lib/cjs/components/ListView/ListView.js +0 -9
- package/lib/cjs/components/ListView/ListView.stories.js +34 -80
- package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +6 -1
- package/lib/cjs/components/Menu/Menu.js +7 -60
- package/lib/cjs/components/Menu/Menu.stories.js +2 -56
- package/lib/cjs/components/Menu/menuAttributes.js +104 -0
- package/lib/cjs/components/SwitchField/SwitchField.js +12 -54
- package/lib/cjs/components/SwitchField/SwitchField.stories.js +2 -34
- package/lib/cjs/components/SwitchField/SwitchField.test.js +4 -5
- package/lib/cjs/components/SwitchField/switchFieldAttributes.js +191 -0
- package/lib/cjs/experimental/StyledListItem/StyledListItem.js +159 -0
- package/lib/cjs/experimental/StyledListItem/StyledListItem.stories.js +155 -0
- package/lib/cjs/experimental/StyledListItem/StyledListItem.test.js +83 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.js +34 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.stories.js +31 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.test.js +25 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.js +37 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.stories.js +36 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.test.js +59 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.js +32 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +41 -0
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.test.js +25 -0
- package/lib/cjs/experimental/StyledListItem/styledListItemAttributes.js +81 -0
- package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +370 -0
- package/lib/cjs/experimental/recipes/ScrollableListView.stories.js +108 -0
- package/lib/cjs/experimental/recipes/items.js +126 -0
- package/lib/cjs/index.js +33 -1
- package/lib/cjs/utils/docUtils/ariaAttributes.js +2 -1
- package/lib/cjs/utils/docUtils/docArgTypes.js +41 -0
- package/lib/cjs/utils/docUtils/hoverProps.js +7 -2
- package/lib/components/IconButton/IconButton.js +2 -38
- package/lib/components/IconButton/IconButton.stories.js +2 -34
- package/lib/components/IconButton/iconButtonAttributes.js +91 -0
- package/lib/components/ListView/ListView.js +0 -9
- package/lib/components/ListView/ListView.stories.js +35 -82
- package/lib/components/ListViewItem/ListViewItem.styles.js +6 -1
- package/lib/components/Menu/Menu.js +7 -60
- package/lib/components/Menu/Menu.stories.js +2 -57
- package/lib/components/Menu/menuAttributes.js +95 -0
- package/lib/components/SwitchField/SwitchField.js +14 -55
- package/lib/components/SwitchField/SwitchField.stories.js +2 -34
- package/lib/components/SwitchField/SwitchField.test.js +4 -5
- package/lib/components/SwitchField/switchFieldAttributes.js +182 -0
- package/lib/experimental/StyledListItem/StyledListItem.js +146 -0
- package/lib/experimental/StyledListItem/StyledListItem.stories.js +140 -0
- package/lib/experimental/StyledListItem/StyledListItem.test.js +74 -0
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.js +25 -0
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.stories.js +21 -0
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.test.js +22 -0
- package/lib/experimental/StyledListItem/controls/ListItemMenu.js +28 -0
- package/lib/experimental/StyledListItem/controls/ListItemMenu.stories.js +26 -0
- package/lib/experimental/StyledListItem/controls/ListItemMenu.test.js +56 -0
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.js +23 -0
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +32 -0
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.test.js +22 -0
- package/lib/experimental/StyledListItem/styledListItemAttributes.js +72 -0
- package/lib/experimental/recipes/ListAndPanel.stories.js +353 -0
- package/lib/experimental/recipes/ScrollableListView.stories.js +93 -0
- package/lib/experimental/recipes/items.js +117 -0
- package/lib/index.js +7 -1
- package/lib/utils/docUtils/ariaAttributes.js +1 -1
- package/lib/utils/docUtils/docArgTypes.js +29 -0
- package/lib/utils/docUtils/hoverProps.js +7 -2
- package/package.json +1 -1
@@ -1,24 +1,13 @@
|
|
1
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
1
|
import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
|
10
2
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
11
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
13
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
14
3
|
import React from 'react';
|
15
4
|
import { Item } from 'react-stately';
|
16
5
|
import { withDesign } from 'storybook-addon-designs';
|
17
6
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
18
7
|
import { Menu, Text } from '../../index';
|
19
8
|
import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
|
20
|
-
import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
|
21
9
|
import MenuReadme from './Menu.mdx';
|
10
|
+
import { menuArgTypes } from './menuAttributes';
|
22
11
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
23
12
|
export default {
|
24
13
|
title: 'Components/Menu',
|
@@ -40,51 +29,7 @@ export default {
|
|
40
29
|
type: 'figma'
|
41
30
|
}
|
42
31
|
},
|
43
|
-
argTypes:
|
44
|
-
selectionMode: {},
|
45
|
-
isDisabled: {},
|
46
|
-
isNotFocusedOnHover: {},
|
47
|
-
'aria-label': {
|
48
|
-
control: {
|
49
|
-
type: 'text'
|
50
|
-
}
|
51
|
-
},
|
52
|
-
'aria-labelledby': {
|
53
|
-
control: {
|
54
|
-
type: 'text'
|
55
|
-
}
|
56
|
-
},
|
57
|
-
'aria-describedby': {
|
58
|
-
control: {
|
59
|
-
type: 'text'
|
60
|
-
}
|
61
|
-
},
|
62
|
-
'aria-details': {
|
63
|
-
control: {
|
64
|
-
type: 'text'
|
65
|
-
}
|
66
|
-
},
|
67
|
-
isSelected: {
|
68
|
-
control: {
|
69
|
-
type: 'none'
|
70
|
-
}
|
71
|
-
},
|
72
|
-
disabledKeys: {
|
73
|
-
control: {
|
74
|
-
type: 'none'
|
75
|
-
}
|
76
|
-
},
|
77
|
-
defaultSelectedKeys: {
|
78
|
-
control: {
|
79
|
-
type: 'none'
|
80
|
-
}
|
81
|
-
},
|
82
|
-
selectedKeys: {
|
83
|
-
control: {
|
84
|
-
type: 'none'
|
85
|
-
}
|
86
|
-
}
|
87
|
-
}, onHoverArgTypes)
|
32
|
+
argTypes: menuArgTypes
|
88
33
|
};
|
89
34
|
export var Default = function Default(_ref) {
|
90
35
|
var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
11
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
12
|
+
import PropTypes from 'prop-types';
|
13
|
+
import { ariaAttributeBaseArgTypes, ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
|
14
|
+
import { booleanArg, funcArg, stringOrStringArray } from '../../utils/docUtils/docArgTypes';
|
15
|
+
import { onHoverArgTypes, onHoverPropTypes } from '../../utils/docUtils/hoverProps';
|
16
|
+
var descriptions = {
|
17
|
+
selectionMode: 'The type of selection that is allowed.',
|
18
|
+
disabledKeys: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.',
|
19
|
+
defaultSelectedKeys: "\n The initial selected keys in the collection (uncontrolled).\n `defaultSelectedKeys=\"all\"` can be used to select every key.\n ",
|
20
|
+
selectedKeys: "\n The currently selected keys in the collection (controlled).\n `selectedKeys=\"all\"` can be used to select every key.\n ",
|
21
|
+
isDisabled: 'Whether the item is disabled. ',
|
22
|
+
isSelected: 'Whether the menu item is selected.',
|
23
|
+
isNotFocusedOnHover: 'Whether menu item should receive focus state on hover.',
|
24
|
+
onAction: 'Handler that is called when an item is selected. `(key: Key) => void`',
|
25
|
+
onSelectionChange: "Handler that is called when the selection changes. Does not fire when `selectionMode=\"none\"`.\n `(keys: Selection) => any`\n "
|
26
|
+
};
|
27
|
+
export var menuArgTypes = _objectSpread(_objectSpread({
|
28
|
+
onAction: _objectSpread({
|
29
|
+
description: descriptions.onAction
|
30
|
+
}, funcArg),
|
31
|
+
onSelectionChange: _objectSpread({
|
32
|
+
description: descriptions.onSelectionChange
|
33
|
+
}, funcArg),
|
34
|
+
selectionMode: {
|
35
|
+
description: descriptions.selectionMode,
|
36
|
+
control: {
|
37
|
+
type: 'radio',
|
38
|
+
options: ['none', 'single', 'multiple'],
|
39
|
+
defaultValue: 'none'
|
40
|
+
},
|
41
|
+
type: {
|
42
|
+
summary: 'none, single, multiple'
|
43
|
+
}
|
44
|
+
},
|
45
|
+
isDisabled: _objectSpread({
|
46
|
+
description: descriptions.isDisabled
|
47
|
+
}, booleanArg),
|
48
|
+
isNotFocusedOnHover: _objectSpread({
|
49
|
+
description: descriptions.isNotFocusedOnHover
|
50
|
+
}, booleanArg),
|
51
|
+
isSelected: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
52
|
+
control: {
|
53
|
+
type: 'none'
|
54
|
+
},
|
55
|
+
description: descriptions.isSelected
|
56
|
+
}),
|
57
|
+
disabledKeys: {
|
58
|
+
control: {
|
59
|
+
type: 'none'
|
60
|
+
},
|
61
|
+
description: descriptions.disabledKeys,
|
62
|
+
type: {
|
63
|
+
summary: stringOrStringArray
|
64
|
+
}
|
65
|
+
},
|
66
|
+
defaultSelectedKeys: {
|
67
|
+
control: {
|
68
|
+
type: 'none'
|
69
|
+
},
|
70
|
+
description: descriptions.defaultSelectedKeys,
|
71
|
+
type: {
|
72
|
+
summary: stringOrStringArray
|
73
|
+
}
|
74
|
+
},
|
75
|
+
selectedKeys: {
|
76
|
+
control: {
|
77
|
+
type: 'none'
|
78
|
+
},
|
79
|
+
type: {
|
80
|
+
summary: stringOrStringArray
|
81
|
+
},
|
82
|
+
description: descriptions.selectedKeys
|
83
|
+
}
|
84
|
+
}, ariaAttributeBaseArgTypes), onHoverArgTypes);
|
85
|
+
export var menuPropTypes = _objectSpread(_objectSpread({
|
86
|
+
selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
|
87
|
+
disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
|
88
|
+
defaultSelectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
89
|
+
selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
90
|
+
isDisabled: PropTypes.bool,
|
91
|
+
isSelected: PropTypes.bool,
|
92
|
+
isNotFocusedOnHover: PropTypes.bool,
|
93
|
+
onAction: PropTypes.func,
|
94
|
+
onSelectionChange: PropTypes.func
|
95
|
+
}, ariaAttributesBasePropTypes), onHoverPropTypes);
|
@@ -12,17 +12,16 @@ var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onCh
|
|
12
12
|
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
13
13
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
14
14
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
15
|
+
/* eslint-disable no-unused-vars */
|
15
16
|
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
16
17
|
import { useSwitch } from 'react-aria';
|
17
18
|
import { useToggleState } from 'react-stately';
|
18
19
|
import { usePress } from '@react-aria/interactions';
|
19
20
|
import omit from 'lodash/omit';
|
20
|
-
import PropTypes from 'prop-types';
|
21
21
|
import { Box, FieldHelperText, Label, Switch } from '../..';
|
22
22
|
import { useField, usePropWarning } from '../../hooks';
|
23
|
-
import {
|
24
|
-
import {
|
25
|
-
import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
|
23
|
+
import { statusDefaultProp } from '../../utils/docUtils/statusProp';
|
24
|
+
import { switchFieldPropTypes } from './switchFieldAttributes';
|
26
25
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
27
26
|
var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
|
28
27
|
var label = props.label,
|
@@ -33,10 +32,14 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
32
|
value = props.value,
|
34
33
|
name = props.name,
|
35
34
|
id = props.id,
|
36
|
-
isDisabled = props.isDisabled,
|
37
|
-
|
38
|
-
|
39
|
-
|
35
|
+
_props$isDisabled = props.isDisabled,
|
36
|
+
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
37
|
+
_props$isReadOnly = props.isReadOnly,
|
38
|
+
isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
|
39
|
+
_props$isRequired = props.isRequired,
|
40
|
+
isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
|
41
|
+
_props$hasAutoFocus = props.hasAutoFocus,
|
42
|
+
hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
|
40
43
|
onFocus = props.onFocus,
|
41
44
|
onBlur = props.onBlur,
|
42
45
|
onFocusChange = props.onFocusChange,
|
@@ -86,55 +89,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
86
89
|
}, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
|
87
90
|
ref: switchRef,
|
88
91
|
inputProps: fieldControlInputProps
|
89
|
-
}, unhandledAriaProps))), label), helperText && ___EmotionJSX(FieldHelperText, {
|
92
|
+
}, unhandledAriaProps, others))), label), helperText && ___EmotionJSX(FieldHelperText, {
|
90
93
|
status: status
|
91
94
|
}, helperText));
|
92
95
|
});
|
93
|
-
SwitchField.propTypes =
|
94
|
-
|
95
|
-
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
96
|
-
/** Whether the element should receive focus on render. */
|
97
|
-
hasAutoFocus: PropTypes.bool,
|
98
|
-
/** Text rendered below the input. */
|
99
|
-
helperText: PropTypes.node,
|
100
|
-
/** If present this prop will cause a help hint to render in the label of the field. */
|
101
|
-
hintText: PropTypes.string,
|
102
|
-
/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
|
103
|
-
id: PropTypes.string,
|
104
|
-
/** Whether the element should be selected (uncontrolled). */
|
105
|
-
isDefaultSelected: PropTypes.bool,
|
106
|
-
/** Whether the field is disabled. */
|
107
|
-
isDisabled: PropTypes.bool,
|
108
|
-
/** Whether the input can be selected, but not changed by the user. */
|
109
|
-
isReadOnly: PropTypes.bool,
|
110
|
-
/** Whether user input is required on the input before form submission. */
|
111
|
-
isRequired: PropTypes.bool,
|
112
|
-
/** Whether the element should be selected (controlled). */
|
113
|
-
isSelected: PropTypes.bool,
|
114
|
-
/** The rendered label for the field. */
|
115
|
-
label: PropTypes.node,
|
116
|
-
/** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
|
117
|
-
name: PropTypes.string,
|
118
|
-
/** Handler that is called when the element loses focus. */
|
119
|
-
onBlur: PropTypes.func,
|
120
|
-
/** Handler that is called when the element's selection state changes. */
|
121
|
-
onChange: PropTypes.func,
|
122
|
-
/** Handler that is called when the element receives focus. */
|
123
|
-
onFocus: PropTypes.func,
|
124
|
-
/** Handler that is called when the element's focus status changes. */
|
125
|
-
onFocusChange: PropTypes.func,
|
126
|
-
/** Handler that is called when a key is pressed. */
|
127
|
-
onKeyDown: PropTypes.func,
|
128
|
-
/** Handler that is called when a key is released. */
|
129
|
-
onKeyUp: PropTypes.func,
|
130
|
-
/** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
|
131
|
-
value: PropTypes.string
|
132
|
-
}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
|
133
|
-
SwitchField.defaultProps = _objectSpread({
|
134
|
-
isDisabled: false,
|
135
|
-
isReadOnly: false,
|
136
|
-
isRequired: false,
|
137
|
-
hasAutoFocus: false
|
138
|
-
}, statusDefaultProp);
|
96
|
+
SwitchField.propTypes = switchFieldPropTypes;
|
97
|
+
SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
|
139
98
|
SwitchField.displayName = 'SwitchField';
|
140
99
|
export default SwitchField;
|
@@ -18,6 +18,7 @@ import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
|
|
18
18
|
import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
|
19
19
|
import { statusArgTypes } from '../../utils/docUtils/statusProp';
|
20
20
|
import SwitchFieldReadme from './SwitchField.mdx';
|
21
|
+
import { switchFieldArgTypes } from './switchFieldAttributes';
|
21
22
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
22
23
|
export default {
|
23
24
|
title: 'Form/SwitchField',
|
@@ -32,40 +33,7 @@ export default {
|
|
32
33
|
}
|
33
34
|
}
|
34
35
|
},
|
35
|
-
argTypes: _objectSpread(_objectSpread(_objectSpread({
|
36
|
-
label: {
|
37
|
-
control: {
|
38
|
-
type: 'text'
|
39
|
-
},
|
40
|
-
defaultValue: 'Example Label'
|
41
|
-
},
|
42
|
-
helperText: {
|
43
|
-
control: {
|
44
|
-
type: 'text'
|
45
|
-
}
|
46
|
-
},
|
47
|
-
hintText: {
|
48
|
-
control: {
|
49
|
-
type: 'text'
|
50
|
-
}
|
51
|
-
},
|
52
|
-
value: {
|
53
|
-
defaultValue: 'my-switch'
|
54
|
-
},
|
55
|
-
name: {},
|
56
|
-
className: {},
|
57
|
-
isDisabled: {},
|
58
|
-
isRequired: {},
|
59
|
-
isReadOnly: {},
|
60
|
-
isDefaultSelected: {},
|
61
|
-
hasAutoFocus: {},
|
62
|
-
id: {},
|
63
|
-
isSelected: {
|
64
|
-
control: {
|
65
|
-
type: 'none'
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
36
|
+
argTypes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, switchFieldArgTypes), statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
69
37
|
};
|
70
38
|
export var Default = function Default(args) {
|
71
39
|
return ___EmotionJSX(SwitchField, args);
|
@@ -5,10 +5,9 @@ import axeTest from '../../utils/testUtils/testAxe';
|
|
5
5
|
import { render, screen } from '../../utils/testUtils/testWrapper';
|
6
6
|
import SwitchField from './SwitchField';
|
7
7
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
|
-
var
|
8
|
+
var TEST_LABEL = 'test label';
|
9
9
|
var defaultProps = {
|
10
|
-
label:
|
11
|
-
'data-testid': testId
|
10
|
+
label: TEST_LABEL
|
12
11
|
};
|
13
12
|
var getComponent = function getComponent() {
|
14
13
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
@@ -21,9 +20,9 @@ test('renders Switch component', function () {
|
|
21
20
|
getComponent({
|
22
21
|
'aria-label': 'test'
|
23
22
|
});
|
24
|
-
var switchComponent = screen.
|
23
|
+
var switchComponent = screen.getByText(TEST_LABEL);
|
25
24
|
screen.getByRole('switch');
|
26
|
-
expect(switchComponent).toBeInstanceOf(
|
25
|
+
expect(switchComponent).toBeInstanceOf(HTMLLabelElement);
|
27
26
|
expect(switchComponent).toBeInTheDocument();
|
28
27
|
});
|
29
28
|
test('renders label', function () {
|
@@ -0,0 +1,182 @@
|
|
1
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
|
+
var _context;
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
14
|
+
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
|
15
|
+
import PropTypes from 'prop-types';
|
16
|
+
import statuses from '../../utils/devUtils/constants/statuses';
|
17
|
+
import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
|
18
|
+
import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
|
19
|
+
import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
|
20
|
+
import { statusPropTypes } from '../../utils/docUtils/statusProp';
|
21
|
+
var descriptions = {
|
22
|
+
className: 'A list of class names to apply to the input element.',
|
23
|
+
hasAutoFocus: 'Whether the element should receive focus on render.',
|
24
|
+
helperText: 'Text rendered below the input.',
|
25
|
+
hintText: 'If present this prop will cause a help hint to render in the label of the field.',
|
26
|
+
id: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
|
27
|
+
isDefaultSelected: 'Whether the element should be selected (uncontrolled).',
|
28
|
+
isDisabled: 'Whether the field is disabled.',
|
29
|
+
isReadOnly: 'Whether the input can be selected, but not changed by the user.',
|
30
|
+
isRequired: 'Whether user input is required on the input before form submission.',
|
31
|
+
isSelected: 'Whether the element should be selected (controlled).',
|
32
|
+
label: 'The rendered label for the field.',
|
33
|
+
name: 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).',
|
34
|
+
onBlur: 'Handler that is called when the element loses focus.',
|
35
|
+
onChange: "Handler that is called when the element's selection state changes.",
|
36
|
+
onFocus: 'Handler that is called when the element receives focus.',
|
37
|
+
onFocusChange: "Handler that is called when the element's focus status changes.",
|
38
|
+
onKeyDown: 'Handler that is called when a key is pressed.',
|
39
|
+
onKeyUp: 'Handler that is called when a key is released.',
|
40
|
+
status: 'Determines the textarea status indicator and helper text styling.',
|
41
|
+
value: 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).'
|
42
|
+
};
|
43
|
+
var string = docArgTypes.string,
|
44
|
+
stringArray = docArgTypes.stringArray,
|
45
|
+
text = docArgTypes.text,
|
46
|
+
node = docArgTypes.node;
|
47
|
+
export var switchFieldArgTypes = {
|
48
|
+
className: {
|
49
|
+
type: {
|
50
|
+
summary: _concatInstanceProperty(_context = "".concat(string, " | ")).call(_context, stringArray)
|
51
|
+
},
|
52
|
+
description: descriptions.className
|
53
|
+
},
|
54
|
+
hasAutoFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
55
|
+
description: descriptions.hasAutoFocus
|
56
|
+
}),
|
57
|
+
helperText: {
|
58
|
+
control: {
|
59
|
+
type: text
|
60
|
+
},
|
61
|
+
type: {
|
62
|
+
summary: node
|
63
|
+
},
|
64
|
+
description: descriptions.helperText
|
65
|
+
},
|
66
|
+
hintText: {
|
67
|
+
control: {
|
68
|
+
type: text
|
69
|
+
},
|
70
|
+
type: {
|
71
|
+
summary: string
|
72
|
+
},
|
73
|
+
description: descriptions.hintText
|
74
|
+
},
|
75
|
+
id: {
|
76
|
+
control: {
|
77
|
+
type: text
|
78
|
+
},
|
79
|
+
type: {
|
80
|
+
summary: string
|
81
|
+
},
|
82
|
+
description: descriptions.id
|
83
|
+
},
|
84
|
+
isDefaultSelected: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
85
|
+
description: descriptions.isDefaultSelected
|
86
|
+
}),
|
87
|
+
isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
88
|
+
description: descriptions.isDisabled
|
89
|
+
}),
|
90
|
+
isReadOnly: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
91
|
+
description: descriptions.isReadOnly
|
92
|
+
}),
|
93
|
+
isRequired: _objectSpread(_objectSpread({}, booleanArg), {}, {
|
94
|
+
description: descriptions.isRequired
|
95
|
+
}),
|
96
|
+
isSelected: {
|
97
|
+
control: {
|
98
|
+
type: 'none'
|
99
|
+
},
|
100
|
+
type: {
|
101
|
+
summary: string
|
102
|
+
},
|
103
|
+
description: descriptions.isSelected
|
104
|
+
},
|
105
|
+
label: {
|
106
|
+
control: {
|
107
|
+
type: text
|
108
|
+
},
|
109
|
+
type: {
|
110
|
+
summary: string
|
111
|
+
},
|
112
|
+
defaultValue: 'Example Label',
|
113
|
+
description: descriptions.label
|
114
|
+
},
|
115
|
+
name: {
|
116
|
+
control: {
|
117
|
+
type: text
|
118
|
+
},
|
119
|
+
type: {
|
120
|
+
summary: string
|
121
|
+
},
|
122
|
+
description: descriptions.name
|
123
|
+
},
|
124
|
+
onBlur: _objectSpread(_objectSpread({}, funcArg), {}, {
|
125
|
+
description: descriptions.onBlur
|
126
|
+
}),
|
127
|
+
onChange: _objectSpread(_objectSpread({}, funcArg), {}, {
|
128
|
+
description: descriptions.onChange
|
129
|
+
}),
|
130
|
+
onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
|
131
|
+
description: descriptions.onFocus
|
132
|
+
}),
|
133
|
+
onFocusChange: _objectSpread(_objectSpread({}, funcArg), {}, {
|
134
|
+
description: descriptions.onFocusChange
|
135
|
+
}),
|
136
|
+
onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
|
137
|
+
description: descriptions.onKeyDown
|
138
|
+
}),
|
139
|
+
onKeyUp: _objectSpread(_objectSpread({}, funcArg), {}, {
|
140
|
+
description: descriptions.onKeyUp
|
141
|
+
}),
|
142
|
+
value: {
|
143
|
+
defaultValue: 'my-switch',
|
144
|
+
control: {
|
145
|
+
type: text
|
146
|
+
},
|
147
|
+
type: {
|
148
|
+
summary: string
|
149
|
+
},
|
150
|
+
description: descriptions.value
|
151
|
+
},
|
152
|
+
status: {
|
153
|
+
control: {
|
154
|
+
type: 'select',
|
155
|
+
options: statuses
|
156
|
+
},
|
157
|
+
defaultValue: statuses.DEFAULT,
|
158
|
+
description: descriptions.status
|
159
|
+
}
|
160
|
+
};
|
161
|
+
export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
|
162
|
+
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
163
|
+
hasAutoFocus: PropTypes.bool,
|
164
|
+
helperText: PropTypes.node,
|
165
|
+
hintText: PropTypes.string,
|
166
|
+
id: PropTypes.string,
|
167
|
+
isDefaultSelected: PropTypes.bool,
|
168
|
+
isDisabled: PropTypes.bool,
|
169
|
+
isReadOnly: PropTypes.bool,
|
170
|
+
isRequired: PropTypes.bool,
|
171
|
+
isSelected: PropTypes.bool,
|
172
|
+
label: PropTypes.node,
|
173
|
+
name: PropTypes.string,
|
174
|
+
onBlur: PropTypes.func,
|
175
|
+
onChange: PropTypes.func,
|
176
|
+
onFocus: PropTypes.func,
|
177
|
+
onFocusChange: PropTypes.func,
|
178
|
+
onKeyDown: PropTypes.func,
|
179
|
+
onKeyUp: PropTypes.func,
|
180
|
+
status: PropTypes.oneOf(_Object$values(statuses)),
|
181
|
+
value: PropTypes.string
|
182
|
+
}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);
|