@pingux/astro 2.7.0-alpha.2 → 2.7.0-alpha.3
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 +38 -2
- package/lib/cjs/components/IconButton/IconButton.stories.js +34 -2
- package/lib/cjs/components/ListView/ListView.js +9 -0
- package/lib/cjs/components/ListView/ListView.stories.js +80 -34
- package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +1 -6
- package/lib/cjs/components/Menu/Menu.js +60 -7
- package/lib/cjs/components/Menu/Menu.stories.js +56 -2
- package/lib/cjs/components/SwitchField/SwitchField.js +54 -12
- package/lib/cjs/components/SwitchField/SwitchField.stories.js +34 -2
- package/lib/cjs/components/SwitchField/SwitchField.test.js +5 -4
- package/lib/cjs/index.js +1 -33
- package/lib/cjs/utils/docUtils/ariaAttributes.js +1 -2
- package/lib/cjs/utils/docUtils/hoverProps.js +2 -7
- package/lib/components/IconButton/IconButton.js +38 -2
- package/lib/components/IconButton/IconButton.stories.js +34 -2
- package/lib/components/ListView/ListView.js +9 -0
- package/lib/components/ListView/ListView.stories.js +82 -35
- package/lib/components/ListViewItem/ListViewItem.styles.js +1 -6
- package/lib/components/Menu/Menu.js +60 -7
- package/lib/components/Menu/Menu.stories.js +57 -2
- package/lib/components/SwitchField/SwitchField.js +55 -14
- package/lib/components/SwitchField/SwitchField.stories.js +34 -2
- package/lib/components/SwitchField/SwitchField.test.js +5 -4
- package/lib/index.js +1 -7
- package/lib/utils/docUtils/ariaAttributes.js +1 -1
- package/lib/utils/docUtils/hoverProps.js +2 -7
- package/package.json +1 -1
- package/lib/cjs/components/IconButton/iconButtonAttributes.js +0 -100
- package/lib/cjs/components/Menu/menuAttributes.js +0 -104
- package/lib/cjs/components/SwitchField/switchFieldAttributes.js +0 -191
- package/lib/cjs/experimental/StyledListItem/StyledListItem.js +0 -159
- package/lib/cjs/experimental/StyledListItem/StyledListItem.stories.js +0 -155
- package/lib/cjs/experimental/StyledListItem/StyledListItem.test.js +0 -83
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.js +0 -34
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -31
- package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -25
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.js +0 -37
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -36
- package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -59
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -32
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -41
- package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -25
- package/lib/cjs/experimental/StyledListItem/styledListItemAttributes.js +0 -81
- package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +0 -370
- package/lib/cjs/experimental/recipes/ScrollableListView.stories.js +0 -108
- package/lib/cjs/experimental/recipes/items.js +0 -126
- package/lib/cjs/utils/docUtils/docArgTypes.js +0 -41
- package/lib/components/IconButton/iconButtonAttributes.js +0 -91
- package/lib/components/Menu/menuAttributes.js +0 -95
- package/lib/components/SwitchField/switchFieldAttributes.js +0 -182
- package/lib/experimental/StyledListItem/StyledListItem.js +0 -146
- package/lib/experimental/StyledListItem/StyledListItem.stories.js +0 -140
- package/lib/experimental/StyledListItem/StyledListItem.test.js +0 -74
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.js +0 -25
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -21
- package/lib/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -22
- package/lib/experimental/StyledListItem/controls/ListItemMenu.js +0 -28
- package/lib/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -26
- package/lib/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -56
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -23
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -32
- package/lib/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -22
- package/lib/experimental/StyledListItem/styledListItemAttributes.js +0 -72
- package/lib/experimental/recipes/ListAndPanel.stories.js +0 -353
- package/lib/experimental/recipes/ScrollableListView.stories.js +0 -93
- package/lib/experimental/recipes/items.js +0 -117
- package/lib/utils/docUtils/docArgTypes.js +0 -29
@@ -1,191 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
4
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
5
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
8
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
9
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
10
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
11
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
12
|
-
_Object$defineProperty(exports, "__esModule", {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
exports.switchFieldPropTypes = exports.switchFieldArgTypes = void 0;
|
16
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
|
-
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
18
|
-
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
|
19
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
20
|
-
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
21
|
-
var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
|
22
|
-
var _docArgTypes = require("../../utils/docUtils/docArgTypes");
|
23
|
-
var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
|
24
|
-
var _statusProp = require("../../utils/docUtils/statusProp");
|
25
|
-
var _context;
|
26
|
-
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; }
|
27
|
-
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) { (0, _defineProperty2["default"])(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; }
|
28
|
-
var descriptions = {
|
29
|
-
className: 'A list of class names to apply to the input element.',
|
30
|
-
hasAutoFocus: 'Whether the element should receive focus on render.',
|
31
|
-
helperText: 'Text rendered below the input.',
|
32
|
-
hintText: 'If present this prop will cause a help hint to render in the label of the field.',
|
33
|
-
id: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
|
34
|
-
isDefaultSelected: 'Whether the element should be selected (uncontrolled).',
|
35
|
-
isDisabled: 'Whether the field is disabled.',
|
36
|
-
isReadOnly: 'Whether the input can be selected, but not changed by the user.',
|
37
|
-
isRequired: 'Whether user input is required on the input before form submission.',
|
38
|
-
isSelected: 'Whether the element should be selected (controlled).',
|
39
|
-
label: 'The rendered label for the field.',
|
40
|
-
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).',
|
41
|
-
onBlur: 'Handler that is called when the element loses focus.',
|
42
|
-
onChange: "Handler that is called when the element's selection state changes.",
|
43
|
-
onFocus: 'Handler that is called when the element receives focus.',
|
44
|
-
onFocusChange: "Handler that is called when the element's focus status changes.",
|
45
|
-
onKeyDown: 'Handler that is called when a key is pressed.',
|
46
|
-
onKeyUp: 'Handler that is called when a key is released.',
|
47
|
-
status: 'Determines the textarea status indicator and helper text styling.',
|
48
|
-
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).'
|
49
|
-
};
|
50
|
-
var string = _docArgTypes.docArgTypes.string,
|
51
|
-
stringArray = _docArgTypes.docArgTypes.stringArray,
|
52
|
-
text = _docArgTypes.docArgTypes.text,
|
53
|
-
node = _docArgTypes.docArgTypes.node;
|
54
|
-
var switchFieldArgTypes = {
|
55
|
-
className: {
|
56
|
-
type: {
|
57
|
-
summary: (0, _concat["default"])(_context = "".concat(string, " | ")).call(_context, stringArray)
|
58
|
-
},
|
59
|
-
description: descriptions.className
|
60
|
-
},
|
61
|
-
hasAutoFocus: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
|
62
|
-
description: descriptions.hasAutoFocus
|
63
|
-
}),
|
64
|
-
helperText: {
|
65
|
-
control: {
|
66
|
-
type: text
|
67
|
-
},
|
68
|
-
type: {
|
69
|
-
summary: node
|
70
|
-
},
|
71
|
-
description: descriptions.helperText
|
72
|
-
},
|
73
|
-
hintText: {
|
74
|
-
control: {
|
75
|
-
type: text
|
76
|
-
},
|
77
|
-
type: {
|
78
|
-
summary: string
|
79
|
-
},
|
80
|
-
description: descriptions.hintText
|
81
|
-
},
|
82
|
-
id: {
|
83
|
-
control: {
|
84
|
-
type: text
|
85
|
-
},
|
86
|
-
type: {
|
87
|
-
summary: string
|
88
|
-
},
|
89
|
-
description: descriptions.id
|
90
|
-
},
|
91
|
-
isDefaultSelected: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
|
92
|
-
description: descriptions.isDefaultSelected
|
93
|
-
}),
|
94
|
-
isDisabled: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
|
95
|
-
description: descriptions.isDisabled
|
96
|
-
}),
|
97
|
-
isReadOnly: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
|
98
|
-
description: descriptions.isReadOnly
|
99
|
-
}),
|
100
|
-
isRequired: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
|
101
|
-
description: descriptions.isRequired
|
102
|
-
}),
|
103
|
-
isSelected: {
|
104
|
-
control: {
|
105
|
-
type: 'none'
|
106
|
-
},
|
107
|
-
type: {
|
108
|
-
summary: string
|
109
|
-
},
|
110
|
-
description: descriptions.isSelected
|
111
|
-
},
|
112
|
-
label: {
|
113
|
-
control: {
|
114
|
-
type: text
|
115
|
-
},
|
116
|
-
type: {
|
117
|
-
summary: string
|
118
|
-
},
|
119
|
-
defaultValue: 'Example Label',
|
120
|
-
description: descriptions.label
|
121
|
-
},
|
122
|
-
name: {
|
123
|
-
control: {
|
124
|
-
type: text
|
125
|
-
},
|
126
|
-
type: {
|
127
|
-
summary: string
|
128
|
-
},
|
129
|
-
description: descriptions.name
|
130
|
-
},
|
131
|
-
onBlur: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
132
|
-
description: descriptions.onBlur
|
133
|
-
}),
|
134
|
-
onChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
135
|
-
description: descriptions.onChange
|
136
|
-
}),
|
137
|
-
onFocus: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
138
|
-
description: descriptions.onFocus
|
139
|
-
}),
|
140
|
-
onFocusChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
141
|
-
description: descriptions.onFocusChange
|
142
|
-
}),
|
143
|
-
onKeyDown: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
144
|
-
description: descriptions.onKeyDown
|
145
|
-
}),
|
146
|
-
onKeyUp: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
|
147
|
-
description: descriptions.onKeyUp
|
148
|
-
}),
|
149
|
-
value: {
|
150
|
-
defaultValue: 'my-switch',
|
151
|
-
control: {
|
152
|
-
type: text
|
153
|
-
},
|
154
|
-
type: {
|
155
|
-
summary: string
|
156
|
-
},
|
157
|
-
description: descriptions.value
|
158
|
-
},
|
159
|
-
status: {
|
160
|
-
control: {
|
161
|
-
type: 'select',
|
162
|
-
options: _statuses["default"]
|
163
|
-
},
|
164
|
-
defaultValue: _statuses["default"].DEFAULT,
|
165
|
-
description: descriptions.status
|
166
|
-
}
|
167
|
-
};
|
168
|
-
exports.switchFieldArgTypes = switchFieldArgTypes;
|
169
|
-
var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
|
170
|
-
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
|
171
|
-
hasAutoFocus: _propTypes["default"].bool,
|
172
|
-
helperText: _propTypes["default"].node,
|
173
|
-
hintText: _propTypes["default"].string,
|
174
|
-
id: _propTypes["default"].string,
|
175
|
-
isDefaultSelected: _propTypes["default"].bool,
|
176
|
-
isDisabled: _propTypes["default"].bool,
|
177
|
-
isReadOnly: _propTypes["default"].bool,
|
178
|
-
isRequired: _propTypes["default"].bool,
|
179
|
-
isSelected: _propTypes["default"].bool,
|
180
|
-
label: _propTypes["default"].node,
|
181
|
-
name: _propTypes["default"].string,
|
182
|
-
onBlur: _propTypes["default"].func,
|
183
|
-
onChange: _propTypes["default"].func,
|
184
|
-
onFocus: _propTypes["default"].func,
|
185
|
-
onFocusChange: _propTypes["default"].func,
|
186
|
-
onKeyDown: _propTypes["default"].func,
|
187
|
-
onKeyUp: _propTypes["default"].func,
|
188
|
-
status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
|
189
|
-
value: _propTypes["default"].string
|
190
|
-
}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
|
191
|
-
exports.switchFieldPropTypes = switchFieldPropTypes;
|
@@ -1,159 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
5
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
6
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
7
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
8
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
9
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
10
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
11
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
12
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
13
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
14
|
-
_Object$defineProperty(exports, "__esModule", {
|
15
|
-
value: true
|
16
|
-
});
|
17
|
-
exports["default"] = exports.LIST_ITEM_ICON = void 0;
|
18
|
-
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
19
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
20
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
21
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
22
|
-
var _react = _interopRequireWildcard(require("react"));
|
23
|
-
var _interactions = require("@react-aria/interactions");
|
24
|
-
var _hooks = require("../../hooks");
|
25
|
-
var _index = require("../../index");
|
26
|
-
var _styledListItemAttributes = require("./styledListItemAttributes");
|
27
|
-
var _react2 = require("@emotion/react");
|
28
|
-
var _excluded = ["children", "className", "details", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
|
29
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
31
|
-
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; }
|
32
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
33
|
-
var sx = {
|
34
|
-
container: {
|
35
|
-
m: 1,
|
36
|
-
minHeight: 72,
|
37
|
-
'&.is-hovered': {
|
38
|
-
bg: 'white',
|
39
|
-
cursor: 'pointer'
|
40
|
-
}
|
41
|
-
},
|
42
|
-
controls: {
|
43
|
-
alignSelf: 'center',
|
44
|
-
ml: 'auto',
|
45
|
-
pr: 'sm'
|
46
|
-
},
|
47
|
-
details: {
|
48
|
-
alignItems: 'center'
|
49
|
-
},
|
50
|
-
icon: {
|
51
|
-
width: 25,
|
52
|
-
color: 'accent.40'
|
53
|
-
},
|
54
|
-
rightOfDetails: {
|
55
|
-
alignSelf: 'center',
|
56
|
-
ml: 'sm'
|
57
|
-
},
|
58
|
-
subtitle: {
|
59
|
-
alignSelf: 'start',
|
60
|
-
fontSize: 'sm',
|
61
|
-
lineHeight: '16px',
|
62
|
-
my: '1px'
|
63
|
-
},
|
64
|
-
text: {
|
65
|
-
ml: 'md'
|
66
|
-
},
|
67
|
-
title: {
|
68
|
-
alignSelf: 'start',
|
69
|
-
fontSize: 'md'
|
70
|
-
},
|
71
|
-
wrapper: {
|
72
|
-
cursor: 'pointer',
|
73
|
-
display: 'flex',
|
74
|
-
flex: '1 1 0px',
|
75
|
-
ml: 'md'
|
76
|
-
}
|
77
|
-
};
|
78
|
-
var LIST_ITEM_ICON = '-list-item-icon';
|
79
|
-
exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
|
80
|
-
var StyledListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
81
|
-
var _context, _context2;
|
82
|
-
var children = _ref.children,
|
83
|
-
className = _ref.className,
|
84
|
-
_ref$details = _ref.details,
|
85
|
-
details = _ref$details === void 0 ? {} : _ref$details,
|
86
|
-
isHovered = _ref.isHovered,
|
87
|
-
isSelected = _ref.isSelected,
|
88
|
-
linkProps = _ref.linkProps,
|
89
|
-
onHoverChange = _ref.onHoverChange,
|
90
|
-
onHoverEnd = _ref.onHoverEnd,
|
91
|
-
onHoverStart = _ref.onHoverStart,
|
92
|
-
slots = _ref.slots,
|
93
|
-
others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
94
|
-
var icon = details.icon,
|
95
|
-
subtext = details.subtext,
|
96
|
-
text = details.text;
|
97
|
-
var shouldUseDefaultHover = isHovered === undefined;
|
98
|
-
var _useHover = (0, _interactions.useHover)({
|
99
|
-
onHoverChange: onHoverChange,
|
100
|
-
onHoverEnd: onHoverEnd,
|
101
|
-
onHoverStart: onHoverStart
|
102
|
-
}),
|
103
|
-
hoverProps = _useHover.hoverProps,
|
104
|
-
defaultIsHovered = _useHover.isHovered;
|
105
|
-
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
106
|
-
isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
|
107
|
-
isSelected: isSelected
|
108
|
-
}),
|
109
|
-
classNames = _useStatusClasses.classNames;
|
110
|
-
var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
|
111
|
-
ml: 0
|
112
|
-
}) : sx.wrapper;
|
113
|
-
var textStyles = slots !== null && slots !== void 0 && slots.leftOfDetails ? _objectSpread(_objectSpread({}, sx.text), {}, {
|
114
|
-
ml: 0
|
115
|
-
}) : sx.text;
|
116
|
-
var renderIcon = (0, _react2.jsx)(_index.Box, {
|
117
|
-
sx: sx.icon
|
118
|
-
}, icon && (0, _react2.jsx)(_index.Icon, {
|
119
|
-
icon: icon,
|
120
|
-
size: "md",
|
121
|
-
title: {
|
122
|
-
id: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
|
123
|
-
name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
|
124
|
-
}
|
125
|
-
}));
|
126
|
-
var renderDetails = (0, _react2.jsx)(_index.Box, {
|
127
|
-
isRow: true,
|
128
|
-
sx: sx.details
|
129
|
-
}, (slots === null || slots === void 0 ? void 0 : slots.leftOfDetails) || renderIcon, (0, _react2.jsx)(_index.Box, {
|
130
|
-
sx: textStyles
|
131
|
-
}, text && (0, _react2.jsx)(_index.Text, {
|
132
|
-
variant: "bodyStrong",
|
133
|
-
sx: sx.title
|
134
|
-
}, text), subtext && (0, _react2.jsx)(_index.Text, {
|
135
|
-
variant: "subtitle",
|
136
|
-
sx: sx.subtitle
|
137
|
-
}, subtext)));
|
138
|
-
return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
139
|
-
className: classNames,
|
140
|
-
ref: ref,
|
141
|
-
sx: sx.container
|
142
|
-
}, hoverProps, others), (0, _react2.jsx)(_index.Box, {
|
143
|
-
isRow: true,
|
144
|
-
sx: wrapperStyles
|
145
|
-
}, renderDetails, (slots === null || slots === void 0 ? void 0 : slots.rightOfDetails) && (0, _react2.jsx)(_index.Box, {
|
146
|
-
isRow: true,
|
147
|
-
alignSelf: "center",
|
148
|
-
ml: "md"
|
149
|
-
}, slots.rightOfDetails), (0, _react2.jsx)(_index.Box, {
|
150
|
-
isRow: true,
|
151
|
-
gap: "sm",
|
152
|
-
alignItems: "center",
|
153
|
-
sx: sx.controls
|
154
|
-
}, children)));
|
155
|
-
});
|
156
|
-
StyledListItem.propTypes = _styledListItemAttributes.styledListItemPropTypes;
|
157
|
-
StyledListItem.displayName = 'StyledListItem';
|
158
|
-
var _default = StyledListItem;
|
159
|
-
exports["default"] = _default;
|
@@ -1,155 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports["default"] = exports.WithSubtext = exports.WithRightOfDetailsSlot = exports.WithLinkProps = exports.WithLeftOfDetailsSlot = exports.WithControls = exports.Default = void 0;
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
10
|
-
var _reactStately = require("react-stately");
|
11
|
-
var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
|
12
|
-
var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
|
13
|
-
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
14
|
-
var _index = require("../../index");
|
15
|
-
var _StyledListItem = _interopRequireDefault(require("./StyledListItem.mdx"));
|
16
|
-
var _styledListItemAttributes = require("./styledListItemAttributes");
|
17
|
-
var _react2 = require("@emotion/react");
|
18
|
-
var _default = {
|
19
|
-
title: 'Experimental/StyledListItem',
|
20
|
-
component: _index.StyledListItem,
|
21
|
-
parameters: {
|
22
|
-
docs: {
|
23
|
-
page: function page() {
|
24
|
-
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_StyledListItem["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
|
25
|
-
},
|
26
|
-
source: {
|
27
|
-
type: 'code'
|
28
|
-
}
|
29
|
-
}
|
30
|
-
},
|
31
|
-
argTypes: _styledListItemAttributes.styledListItemArgTypes
|
32
|
-
};
|
33
|
-
exports["default"] = _default;
|
34
|
-
var Wrapper = function Wrapper(_ref) {
|
35
|
-
var children = _ref.children;
|
36
|
-
return (0, _react2.jsx)(_index.Box, {
|
37
|
-
sx: {
|
38
|
-
bg: 'accent.99'
|
39
|
-
}
|
40
|
-
}, (0, _react2.jsx)(_index.Separator, {
|
41
|
-
margin: 0
|
42
|
-
}), children, (0, _react2.jsx)(_index.Separator, {
|
43
|
-
margin: 0
|
44
|
-
}));
|
45
|
-
};
|
46
|
-
var Default = function Default() {
|
47
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
48
|
-
details: {
|
49
|
-
icon: _AccountIcon["default"],
|
50
|
-
text: 'Fons Vernall'
|
51
|
-
}
|
52
|
-
}));
|
53
|
-
};
|
54
|
-
exports.Default = Default;
|
55
|
-
var WithSubtext = function WithSubtext() {
|
56
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
57
|
-
details: {
|
58
|
-
icon: _AccountIcon["default"],
|
59
|
-
subtext: 'rad_developer@pingidentity.com',
|
60
|
-
text: 'Fons Vernall'
|
61
|
-
}
|
62
|
-
}));
|
63
|
-
};
|
64
|
-
exports.WithSubtext = WithSubtext;
|
65
|
-
var WithControls = function WithControls() {
|
66
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
67
|
-
details: {
|
68
|
-
icon: _FormSelectIcon["default"],
|
69
|
-
text: 'Fons Vernall'
|
70
|
-
}
|
71
|
-
}, (0, _react2.jsx)(_index.ListItemEditButton, null), (0, _react2.jsx)(_index.ListItemSwitchField, null), (0, _react2.jsx)(_index.ListItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
|
72
|
-
key: "enable"
|
73
|
-
}, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
|
74
|
-
key: "disable"
|
75
|
-
}, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
|
76
|
-
key: "delete"
|
77
|
-
}, "Delete user"))));
|
78
|
-
};
|
79
|
-
exports.WithControls = WithControls;
|
80
|
-
var WithRightOfDetailsSlot = function WithRightOfDetailsSlot() {
|
81
|
-
var renderRightOfDetails = (0, _react2.jsx)(_index.Box, {
|
82
|
-
isRow: true,
|
83
|
-
gap: "md"
|
84
|
-
}, (0, _react2.jsx)(_index.Badge, {
|
85
|
-
label: "Label"
|
86
|
-
}), (0, _react2.jsx)(_index.Badge, {
|
87
|
-
label: "Label",
|
88
|
-
bg: "active"
|
89
|
-
}));
|
90
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
91
|
-
details: {
|
92
|
-
icon: _AccountIcon["default"],
|
93
|
-
text: 'Fons Vernall',
|
94
|
-
subtext: 'verylongemailaddress@email.com'
|
95
|
-
},
|
96
|
-
slots: {
|
97
|
-
rightOfDetails: renderRightOfDetails
|
98
|
-
}
|
99
|
-
}, (0, _react2.jsx)(_index.ListItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
|
100
|
-
key: "enable"
|
101
|
-
}, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
|
102
|
-
key: "disable"
|
103
|
-
}, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
|
104
|
-
key: "delete"
|
105
|
-
}, "Delete user"))));
|
106
|
-
};
|
107
|
-
exports.WithRightOfDetailsSlot = WithRightOfDetailsSlot;
|
108
|
-
var WithLeftOfDetailsSlot = function WithLeftOfDetailsSlot() {
|
109
|
-
var renderLeftOfDetails = (0, _react2.jsx)(_index.Box, {
|
110
|
-
mx: "sm"
|
111
|
-
}, (0, _react2.jsx)(_index.Text, {
|
112
|
-
pr: 3,
|
113
|
-
variant: "H3"
|
114
|
-
}, "Ping"));
|
115
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
116
|
-
details: {
|
117
|
-
icon: _AccountIcon["default"],
|
118
|
-
text: 'Fons Vernall',
|
119
|
-
subtext: 'verylongemailaddress@email.com'
|
120
|
-
}
|
121
|
-
// Note that when the leftOfDetails slot is used, it overrides the provided icon and
|
122
|
-
// removes all margins and padding on the left of details
|
123
|
-
,
|
124
|
-
slots: {
|
125
|
-
leftOfDetails: renderLeftOfDetails
|
126
|
-
}
|
127
|
-
}, (0, _react2.jsx)(_index.ListItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
|
128
|
-
key: "enable"
|
129
|
-
}, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
|
130
|
-
key: "disable"
|
131
|
-
}, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
|
132
|
-
key: "delete"
|
133
|
-
}, "Delete user"))));
|
134
|
-
};
|
135
|
-
exports.WithLeftOfDetailsSlot = WithLeftOfDetailsSlot;
|
136
|
-
var WithLinkProps = function WithLinkProps() {
|
137
|
-
return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.StyledListItem, {
|
138
|
-
details: {
|
139
|
-
icon: _AccountIcon["default"],
|
140
|
-
text: 'Fons Vernall'
|
141
|
-
}
|
142
|
-
// With linkProps added, meta click functionality is enabled
|
143
|
-
,
|
144
|
-
linkProps: {
|
145
|
-
href: 'https://pingidentity.com/'
|
146
|
-
}
|
147
|
-
}, (0, _react2.jsx)(_index.ListItemSwitchField, null), (0, _react2.jsx)(_index.ListItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
|
148
|
-
key: "enable"
|
149
|
-
}, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
|
150
|
-
key: "disable"
|
151
|
-
}, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
|
152
|
-
key: "delete"
|
153
|
-
}, "Delete user"))));
|
154
|
-
};
|
155
|
-
exports.WithLinkProps = WithLinkProps;
|
@@ -1,83 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
8
|
-
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
11
|
-
var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
|
12
|
-
var _index = require("../../index");
|
13
|
-
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
14
|
-
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
15
|
-
var _StyledListItem = _interopRequireWildcard(require("./StyledListItem"));
|
16
|
-
var _react2 = require("@emotion/react");
|
17
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
18
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
19
|
-
var defaultProps = {
|
20
|
-
details: {
|
21
|
-
text: 'testText',
|
22
|
-
subtext: 'testSubtext',
|
23
|
-
icon: _AccountIcon["default"]
|
24
|
-
}
|
25
|
-
};
|
26
|
-
var getComponent = function getComponent() {
|
27
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
28
|
-
return (0, _testWrapper.render)((0, _react2.jsx)(_StyledListItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
|
29
|
-
};
|
30
|
-
|
31
|
-
// Need to be added to each test file to test accessibility using axe.
|
32
|
-
(0, _testAxe["default"])(getComponent);
|
33
|
-
var TEST_TEXT = 'test text';
|
34
|
-
describe('StyledListItem', function () {
|
35
|
-
test('renders details', function () {
|
36
|
-
var _context;
|
37
|
-
getComponent();
|
38
|
-
var _defaultProps$details = defaultProps.details,
|
39
|
-
text = _defaultProps$details.text,
|
40
|
-
subtext = _defaultProps$details.subtext;
|
41
|
-
_testWrapper.screen.getByText(text);
|
42
|
-
_testWrapper.screen.getByText(subtext);
|
43
|
-
_testWrapper.screen.getByRole('img', {
|
44
|
-
name: (0, _concat["default"])(_context = "".concat(text)).call(_context, _StyledListItem.LIST_ITEM_ICON)
|
45
|
-
});
|
46
|
-
});
|
47
|
-
test('renders children', function () {
|
48
|
-
getComponent({
|
49
|
-
children: (0, _react2.jsx)(_index.ListItemSwitchField, null)
|
50
|
-
});
|
51
|
-
_testWrapper.screen.getByRole('switch');
|
52
|
-
});
|
53
|
-
test('renders rightOfDetails slot', function () {
|
54
|
-
getComponent({
|
55
|
-
slots: {
|
56
|
-
rightOfDetails: (0, _react2.jsx)("div", null, TEST_TEXT)
|
57
|
-
}
|
58
|
-
});
|
59
|
-
_testWrapper.screen.getByText(TEST_TEXT);
|
60
|
-
});
|
61
|
-
describe('when there is a leftOfDetails slot', function () {
|
62
|
-
test('renders leftOfDetails slot', function () {
|
63
|
-
getComponent({
|
64
|
-
slots: {
|
65
|
-
leftOfDetails: (0, _react2.jsx)("div", null, TEST_TEXT)
|
66
|
-
}
|
67
|
-
});
|
68
|
-
_testWrapper.screen.getByText(TEST_TEXT);
|
69
|
-
});
|
70
|
-
test('it dose not render an icon', function () {
|
71
|
-
getComponent({
|
72
|
-
slots: {
|
73
|
-
leftOfDetails: (0, _react2.jsx)("div", null, TEST_TEXT)
|
74
|
-
}
|
75
|
-
});
|
76
|
-
var text = defaultProps.details.text;
|
77
|
-
expect(_testWrapper.screen.queryByTitle({
|
78
|
-
id: "".concat(text, "-list-item-icon"),
|
79
|
-
name: text
|
80
|
-
})).not.toBeInTheDocument();
|
81
|
-
});
|
82
|
-
});
|
83
|
-
});
|
@@ -1,34 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports["default"] = void 0;
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
11
|
-
var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
|
12
|
-
var _iconButtonAttributes = require("../../../components/IconButton/iconButtonAttributes");
|
13
|
-
var _index = require("../../../index");
|
14
|
-
var _react2 = require("@emotion/react");
|
15
|
-
/**
|
16
|
-
* ListItemEditButton is one of several styled control components that can be used as a child
|
17
|
-
* nested inside of the [StyledListItem](./?path=/story/experimental-styledlistitem--default).
|
18
|
-
* Its a wrapper component around the [IconButton](./?path=/story/components-iconbutton--default),
|
19
|
-
* intended to make matching specs easy. Most props available to the IconButton are also available
|
20
|
-
* to ListItemEditButton.
|
21
|
-
*/
|
22
|
-
|
23
|
-
var ListItemEditButton = function ListItemEditButton(props) {
|
24
|
-
return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
|
25
|
-
"aria-label": "edit-icon"
|
26
|
-
}, props), (0, _react2.jsx)(_index.Icon, {
|
27
|
-
icon: _CreateIcon["default"],
|
28
|
-
size: "sm"
|
29
|
-
})));
|
30
|
-
};
|
31
|
-
ListItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;
|
32
|
-
ListItemEditButton.displayName = 'ListItemEditButton';
|
33
|
-
var _default = ListItemEditButton;
|
34
|
-
exports["default"] = _default;
|
@@ -1,31 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
exports["default"] = exports.Default = void 0;
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
10
|
-
var _iconButtonAttributes = require("../../../components/IconButton/iconButtonAttributes");
|
11
|
-
var _index = require("../../../index");
|
12
|
-
var _react2 = require("@emotion/react");
|
13
|
-
delete _iconButtonAttributes.iconButtonArgTypes.size;
|
14
|
-
delete _iconButtonAttributes.iconButtonArgTypes.icon;
|
15
|
-
var _default = {
|
16
|
-
title: 'Experimental/StyledListItem/Controls/ListItemEditButton',
|
17
|
-
component: _index.ListItemEditButton,
|
18
|
-
parameters: {
|
19
|
-
docs: {
|
20
|
-
source: {
|
21
|
-
type: 'code'
|
22
|
-
}
|
23
|
-
}
|
24
|
-
},
|
25
|
-
argTypes: _iconButtonAttributes.iconButtonArgTypes
|
26
|
-
};
|
27
|
-
exports["default"] = _default;
|
28
|
-
var Default = function Default(args) {
|
29
|
-
return (0, _react2.jsx)(_index.ListItemEditButton, args);
|
30
|
-
};
|
31
|
-
exports.Default = Default;
|